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

package/dist/stzh-components/p-206ec94f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhFieldsetCss","StzhFieldset","render","classes","this","hideLegend","h","Host","class","legend","legendLevel","level","curve","legendCurve"],"sources":["src/components/stzh-fieldset/stzh-fieldset.scss?tag=stzh-fieldset&encapsulation=scoped","src/components/stzh-fieldset/stzh-fieldset.tsx"],"sourcesContent":[":host {\n  // default spacing for form and layout elements\n  ::slotted(.layout_column > .stzh-fieldset-row > .stzh-fieldset-row),\n  ::slotted(.stzh-fieldset-row > .stzh-fieldset-row),\n  ::slotted(.layout_column > .stzh-fieldset-row),\n  ::slotted(.stzh-fieldset-row),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-input),\n  ::slotted(.stzh-fieldset-row > stzh-input),\n  ::slotted(stzh-input),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-datepicker),\n  ::slotted(.stzh-fieldset-row > stzh-datepicker),\n  ::slotted(stzh-datepicker),\n  ::slotted(.stzh-fieldset-row > stzh-dropdown),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-dropdown),\n  ::slotted(stzh-dropdown),\n  ::slotted(.stzh-fieldset-row > stzh-fieldset),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-fieldset),\n  ::slotted(stzh-fieldset),\n  ::slotted(.stzh-fieldset-row > stzh-upload),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-upload),\n  ::slotted(stzh-upload),\n  ::slotted(.stzh-fieldset-row > stzh-checkbox),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkbox),\n  ::slotted(stzh-checkbox),\n  ::slotted(.stzh-fieldset-row > stzh-checkboxgroup),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-checkboxgroup),\n  ::slotted(stzh-checkboxgroup),\n  ::slotted(.stzh-fieldset-row > stzh-radio),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-radio),\n  ::slotted(stzh-radio),\n  ::slotted(.stzh-fieldset-row > stzh-radiogroup),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-radiogroup),\n  ::slotted(stzh-radiogroup),\n  ::slotted(.stzh-fieldset-row > stzh-row),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-row),\n  ::slotted(stzh-row),\n  ::slotted(.stzh-fieldset-row > stzh-vspace),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-vspace),\n  ::slotted(stzh-vspace),\n  ::slotted(.stzh-fieldset-row > stzh-hspace),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-hspace),\n  ::slotted(stzh-hspace),\n  ::slotted(.stzh-fieldset-row > stzh-text),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-text),\n  ::slotted(stzh-text) {\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > stzh-chipgroup,\n  & > stzh-chipgroup,\n  & > .section > stzh-chipselect,\n  & > stzh-chipselect {\n    margin-bottom: space('xlarge');\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-daterange),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-daterange),\n  ::slotted(stzh-daterange) {\n    @include mq($to: medium) {\n      margin-bottom: calc(#{$fieldsetDescriptionMinHeight} + #{spaceCurveValue('tiny')});\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-message),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-message),\n  ::slotted(stzh-message) {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  ::slotted(.stzh-fieldset-row > stzh-actions),\n  ::slotted(.layout_column > .stzh-fieldset-row > stzh-actions),\n  ::slotted(stzh-actions) {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  ::slotted(*) {\n    stzh-checkboxgroup stzh-checkbox,\n    stzh-radiogroup stzh-radio {\n      --stzh-description-min-height: none;\n    }\n  }\n\n  ::slotted(.stzh-fieldset-row > :last-child),\n  ::slotted(.layout_column > .stzh-fieldset-row > :last-child),\n  ::slotted(:last-child),\n  ::slotted(.layout_column > .stzh-fieldset-row:has(cq) > :nth-last-child(2)),\n  ::slotted(.stzh-fieldset-row:has(cq) > :nth-last-child(2)) {\n    margin-bottom: 0;\n  }\n}\n\n.stzh-fieldset {\n  // --stzh-row-row-gap: #{space('xsmall')};\n  --stzh-description-min-height: #{$fieldsetDescriptionMinHeight};\n\n  margin: 0;\n  padding: 0;\n  border: none;\n  min-inline-size: auto;\n\n  &__wrapper {\n    display: grid;\n  }\n\n  &__legend {\n    @include font('title');\n    @include fontCurve('h4');\n    color: $colorPrimary70;\n    padding: 0;\n    margin-bottom: space('large');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for any (mostly form) elements\n */\n@Component({\n  tag: \"stzh-fieldset\",\n  styleUrl: \"stzh-fieldset.scss\",\n  scoped: true\n})\nexport class StzhFieldset {\n  /** Legend describing the field group inside the fieldset */\n  @Prop() legend: string = \"\";\n\n  /** Hide legend to show only for screenreaders */\n  @Prop() hideLegend: boolean = false;\n\n  /** Heading level inside legend */\n  @Prop() legendLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n  /** Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n  @Prop() legendCurve: Font.Curves | \"auto\" = \"auto\";\n\n  render() {\n    const classes = {\n      \"stzh-fieldset\": true,\n      \"stzh-fieldset--hide-legend\": this.hideLegend\n    };\n\n    return (\n      <Host>\n        <fieldset class={classes}>\n          {this.legend &&\n            <legend class=\"stzh-fieldset__legend\">\n              {this.legendLevel ?\n                <stzh-heading\n                  level={this.legendLevel}\n                  curve={this.legendCurve}\n                >\n                  {this.legend}\n                </stzh-heading>\n              :\n                this.legend\n              }\n            </legend>\n          }\n          <div class=\"stzh-fieldset__wrapper\">\n            <slot></slot>\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,sjgB,MCiBXC,EAAY,M,qCAEE,G,gBAGK,M,iBAGoB,G,iBAGN,M,CAE5C,MAAAC,GACE,MAAMC,EAAU,CACd,gBAAiB,KACjB,6BAA8BC,KAAKC,YAGrC,OACEC,EAACC,EAAI,KACHD,EAAA,YAAUE,MAAOL,GACdC,KAAKK,QACJH,EAAA,UAAQE,MAAM,yBACXJ,KAAKM,YACJJ,EAAA,gBACEK,MAAOP,KAAKM,YACZE,MAAOR,KAAKS,aAEXT,KAAKK,QAGRL,KAAKK,QAIXH,EAAA,OAAKE,MAAM,0BACTF,EAAA,e"}

package/dist/stzh-components/p-2773b08f.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as t,h as r,F as e,a,g as h}from"./p-c7bfac7a.js";import{h as c}from"./p-7e304ea3.js";import"./p-9b063923.js";const i='.sc-stzh-card-searchresult-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-card-searchresult-h{display:none}.sc-stzh-card-searchresult-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::before,.sc-stzh-card-searchresult-h *.sc-stzh-card-searchresult::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-card-searchresult-h .has-focus.sc-stzh-card-searchresult{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult{outline-style:none !important}.sc-stzh-card-searchresult-h .stzh-fylingfocus-focused.sc-stzh-card-searchresult::-moz-focus-inner{border:0 !important}.sc-stzh-card-searchresult-h{--service-background-color:var(--stzh-color-secondary30);--service-color:var(--stzh-color-primary70);--grid-template-areas:"heading"\n    "description"\n    "meta";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr);display:grid}.sc-stzh-card-searchresult-h .sc-stzh-card-searchresult-s>img{width:100%;max-width:100%}[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:"image"\n    "heading"\n    "description"\n    "meta";--grid-template-rows:repeat(3, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr)}@media screen and (min-width: 600px){[has-image].sc-stzh-card-searchresult-h{--grid-template-areas:"heading image"\n      "description image"\n      "meta image";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(11.25rem, min-content)}}@media screen and (max-width: 599px){[has-image][image-position=right].sc-stzh-card-searchresult-h{--grid-template-areas:"heading image"\n      "description description"\n      "meta meta";--grid-template-rows:repeat(2, auto) minmax(0, 1fr);--grid-template-columns:minmax(0, 1fr) minmax(6.25rem, min-content)}}.stzh-card-searchresult.sc-stzh-card-searchresult{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:grid;background-color:var(--stzh-color-grey10);grid-template-areas:var(--grid-template-areas);grid-template-rows:var(--grid-template-rows);grid-template-columns:var(--grid-template-columns);color:var(--stzh-color-grey80)}.stzh-card-searchresult__tag.sc-stzh-card-searchresult,.stzh-card-searchresult__dateline.sc-stzh-card-searchresult,.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult,.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult,.stzh-card-searchresult__heading-link-text.sc-stzh-card-searchresult,.stzh-card-searchresult__description.sc-stzh-card-searchresult,.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{z-index:1;position:relative}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{margin-left:var(--stzh-space-medium);margin-right:var(--stzh-space-medium);margin-bottom:var(--stzh-space-large)}.stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{grid-area:heading;display:grid;margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult__image.sc-stzh-card-searchresult{display:grid;grid-area:image;width:100%}.stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{grid-area:description}.stzh-card-searchresult__meta-wrapper.sc-stzh-card-searchresult{grid-area:meta}.stzh-card-searchresult__meta.sc-stzh-card-searchresult{overflow:hidden}.stzh-card-searchresult__download.sc-stzh-card-searchresult{display:flex;justify-content:space-between;align-items:center;gap:var(--stzh-space-xsmall);overflow:hidden}.stzh-card-searchresult__download-button.sc-stzh-card-searchresult{align-self:flex-end;display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height);color:var(--stzh-color-primary70)}.stzh-card-searchresult__download-heading.sc-stzh-card-searchresult{color:var(--stzh-color-primary70);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);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)}.stzh-card-searchresult__tag.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult,.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{z-index:2}.stzh-card-searchresult__tag.sc-stzh-card-searchresult{position:absolute;left:0;top:0}.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;right:0;background-color:var(--stzh-color-secondary30);color:var(--stzh-color-primary70);padding:var(--stzh-space-xsmall) var(--stzh-space-medium);text-align:center}@media screen and (min-width: 600px){.stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult__topic.sc-stzh-card-searchresult{min-width:11.25rem}}.stzh-card-searchresult__service.sc-stzh-card-searchresult{background-color:var(--service-background-color);color:var(--service-color)}.stzh-card-searchresult__dateline.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__heading.sc-stzh-card-searchresult{margin-top:0px;margin-bottom:var(--stzh-space-xsmall)}.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-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);display:block;color:var(--stzh-color-primary70);-webkit-text-decoration-line:none;text-decoration-line:none}@media screen and (min-width: 900px){.stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{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)}}.stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-color-black)}.stzh-card-searchresult.sc-stzh-card-searchresult:has(.stzh-card-searchresult__description:not(:empty)) .stzh-card-searchresult__event-infos.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__description.sc-stzh-card-searchresult:empty{display:none}.stzh-card-searchresult__breadcrumb.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult__event-date-teaser.sc-stzh-card-searchresult{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-transform:uppercase;display:flex;flex-direction:column;justify-content:center;align-items:center;width:5rem;height:5rem;color:var(--stzh-color-black);background-color:var(--stzh-color-secondary30);position:absolute;top:0;right:0}.stzh-card-searchresult__event-date-teaser-day.sc-stzh-card-searchresult{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing);color:var(--stzh-color-primary70);margin-top:-0.4375rem;margin-bottom:-0.4375rem}.stzh-card-searchresult__meta-list.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list.sc-stzh-card-searchresult{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:var(--stzh-space-xsmall);column-gap:var(--stzh-space-xsmall);margin-left:calc((var(--stzh-space-xsmall) + 0.0625rem) / -1)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult{display:flex;align-items:center;min-height:1.5rem;gap:var(--stzh-space-xsmall)}.stzh-card-searchresult__meta-list-item.sc-stzh-card-searchresult::before,.stzh-card-searchresult__download-meta-list-item.sc-stzh-card-searchresult::before{content:"";display:block;width:0.0625rem;height:1rem;background-color:currentColor}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult{border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before,.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::after{z-index:10}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__heading-link.sc-stzh-card-searchresult::before{background-color:var(--stzh-color-secondary10)}.stzh-card-searchresult--has-link.sc-stzh-card-searchresult:has(.stzh-card-searchresult__heading-link:hover) .stzh-card-searchresult__tag.sc-stzh-card-searchresult{--color:var(--stzh-color-secondary60)}.stzh-card-searchresult--has-breadcrumb.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xlarge)}.stzh-card-searchresult--has-tag.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult--has-service.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-topic.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxxlarge)}.stzh-card-searchresult--has-service.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-topic.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-xxxlarge)}.stzh-card-searchresult--has-image.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{z-index:1;position:relative}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-default.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-top:var(--stzh-space-small)}}@media screen and (max-width: 599px){.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__image.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}}.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__service.sc-stzh-card-searchresult,.stzh-card-searchresult--has-image-right.sc-stzh-card-searchresult .stzh-card-searchresult__topic.sc-stzh-card-searchresult{position:static}.stzh-card-searchresult--has-description-wrapper.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__heading-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult,.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description-wrapper.sc-stzh-card-searchresult{margin-bottom:0px}.stzh-card-searchresult--has-meta.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty),.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__description.sc-stzh-card-searchresult:not(:empty){margin-bottom:var(--stzh-space-small)}.stzh-card-searchresult--has-download.sc-stzh-card-searchresult .stzh-card-searchresult__meta.sc-stzh-card-searchresult{margin-bottom:var(--stzh-space-xsmall)}';const l=class{constructor(r){s(this,r);this.stzhClick=t(this,"stzhClick",7);this.handleCardClick=s=>{this.stzhClick.emit({component:"stzh-card-searchresult",originalEvent:s,href:this.href})};this.localization=undefined;this.href=undefined;this.target=undefined;this.download=undefined;this.analyticsId=undefined;this.heading="";this.headingLevel="3";this.description="";this.tag=undefined;this.topic=undefined;this.service=undefined;this.dateline=undefined;this.meta=undefined;this.breadcrumbItems=undefined;this.datalistItems=[];this.eventDateStart=undefined;this.eventDateEnd=undefined;this.eventLocation=undefined;this.imagePosition="default";this.downloadHeading=undefined;this.downloadMeta=undefined;this.dateAdapter=undefined}metaWatcher(s){if(!s){this._meta=[]}else if(typeof s==="string"){try{this._meta=JSON.parse(s)}catch(s){this._meta=[]}}else{this._meta=s}}downloadMetaWatcher(s){if(!s){this._downloadMeta=[]}else if(typeof s==="string"){try{this._downloadMeta=JSON.parse(s)}catch(s){this._downloadMeta=[]}}else{this._downloadMeta=s}}componentDidRender(){requestAnimationFrame((()=>{var s,t;const r=this.analyticsId||((s=this.headingTextElement)===null||s===void 0?void 0:s.innerText);if(r){(t=this.headingLinkElement)===null||t===void 0?void 0:t.setAttribute("s-object-id",r)}}))}async componentWillLoad(){this.metaWatcher(this.meta);this.downloadMetaWatcher(this.downloadMeta);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"card-searchresult")}if(!this.dateAdapter){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}}render(){const s=!!this.heading||c(this.element,"heading");const t=!!this.description||c(this.element,"description");const h=c(this.element,"image");const i=this.eventDateStart&&new Date(this.eventDateStart);const l=this.eventDateEnd&&new Date(this.eventDateEnd);const d={"stzh-card-searchresult":true,"stzh-card-searchresult--has-heading":s,"stzh-card-searchresult--has-description":t,"stzh-card-searchresult--has-description-wrapper":t||!!i||!!this.eventLocation,"stzh-card-searchresult--has-link":!!this.href,"stzh-card-searchresult--has-service":!!this.service,"stzh-card-searchresult--has-tag":!!this.tag,"stzh-card-searchresult--has-topic":!!this.topic,"stzh-card-searchresult--has-image":h,"stzh-card-searchresult--has-image-default":h&&this.imagePosition==="default","stzh-card-searchresult--has-image-right":h&&this.imagePosition==="right","stzh-card-searchresult--has-meta":this._meta.length>0,"stzh-card-searchresult--has-download":!!this.downloadHeading||this._downloadMeta.length>0,"stzh-card-searchresult--has-breadcrumb":!!this.breadcrumbItems};const n=`h${this.headingLevel}`;const o=this.href?"a":"div";return r(a,{"has-image":h},r("article",{class:d,"aria-label":this.heading,role:"listitem"},this.tag&&r("stzh-tag",{class:"stzh-card-searchresult__tag",label:this.tag,nonInteractive:true}),r("div",{class:"stzh-card-searchresult__heading-wrapper"},this.breadcrumbItems&&r("stzh-breadcrumb",{class:"stzh-card-searchresult__breadcrumb",items:this.breadcrumbItems,variant:"teaser"}),this.dateline&&r("div",{class:"stzh-card-searchresult__dateline"},this.dateline),r(n,{class:"stzh-card-searchresult__heading"},r(o,{ref:s=>this.headingLinkElement=s,class:"stzh-card-searchresult__heading-link",href:this.href,target:this.target,download:this.download,onClick:this.handleCardClick},r("div",{class:"stzh-card-searchresult__heading-link-text",ref:s=>this.headingTextElement=s},this.heading?this.heading:r("slot",{name:"heading"}))))),r("div",{class:"stzh-card-searchresult__description-wrapper"},(i||this.eventLocation)&&r("div",{class:"stzh-card-searchresult__event-infos"},i&&r("div",{class:"stzh-card-searchresult__event-date"},r("span",null,this.dateAdapter.format(i,"dateLong"),", "),this.dateAdapter.formatSpan(i,l,"time")),this.eventLocation&&r("div",{class:"stzh-card-searchresult__event-location"},this.eventLocation)),r("div",{class:"stzh-card-searchresult__description"},this.description?this.description:r("slot",{name:"description"}))),r("div",{class:"stzh-card-searchresult__image"},i&&r("div",{class:"stzh-card-searchresult__event-date-teaser"},r("div",{class:"stzh-card-searchresult__event-date-teaser-day-name"},this.localization.$globals.dayNamesShort[i.getDay()]),r("div",{class:"stzh-card-searchresult__event-date-teaser-day"},i.getDate()<10&&"0",i.getDate()),r("div",{class:"stzh-card-searchresult__event-date-teaser-month"},this.localization.$globals.monthNamesShort[i.getMonth()])),this.topic&&r("div",{class:"stzh-card-searchresult__topic"},this.topic),this.service&&r("div",{class:"stzh-card-searchresult__service"},this.service),r("slot",{name:"image"})),(this._meta.length>0||this.datalistItems||(!!this.downloadHeading||this._downloadMeta.length>0))&&r("div",{class:"stzh-card-searchresult__meta-wrapper"},this.datalistItems&&r("stzh-datalist",{class:"stzh-card-searchresult__datalist",items:this.datalistItems}),this._meta.length>0&&r("div",{class:"stzh-card-searchresult__meta"},r("div",{class:"stzh-card-searchresult__meta-list"},this._meta.map((s=>r(e,null,r("div",{class:"stzh-card-searchresult__meta-list-item"},s)))))),(!!this.downloadHeading||this._downloadMeta.length>0)&&r("div",{class:"stzh-card-searchresult__download"},r("div",{class:"stzh-card-searchresult__download-data"},this.downloadHeading&&r("div",{class:"stzh-card-searchresult__download-heading"},this.downloadHeading),this._downloadMeta.length>0&&r("div",{class:"stzh-card-searchresult__download-meta-list"},this._downloadMeta.map((s=>r(e,null,r("div",{class:"stzh-card-searchresult__download-meta-list-item"},s)))))),r("div",{class:"stzh-card-searchresult__download-button"},r("stzh-icon",{class:"stzh-card-searchresult__download-icon",name:"download"}))))))}get element(){return h(this)}static get watchers(){return{meta:["metaWatcher"],downloadMeta:["downloadMetaWatcher"]}}};l.style=i;export{l as stzh_card_searchresult};
+//# sourceMappingURL=p-2773b08f.entry.js.map

package/dist/stzh-components/p-2773b08f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["stzhCardSearchresultCss","StzhCardSearchresult","this","handleCardClick","originalEvent","stzhClick","emit","component","href","metaWatcher","newValue","_meta","JSON","parse","e","downloadMetaWatcher","_downloadMeta","componentDidRender","requestAnimationFrame","objectId","analyticsId","_a","headingTextElement","innerText","_b","headingLinkElement","setAttribute","componentWillLoad","meta","downloadMeta","localization","window","stzhComponents","utils","fetchTranslations","element","dateAdapter","createFormatParseAdapter","$formats","$globals","render","hasHeading","heading","hasSlot","hasDescription","description","hasImage","eventDateStart","Date","eventDateEnd","classes","eventLocation","service","tag","topic","imagePosition","length","downloadHeading","breadcrumbItems","Heading","headingLevel","HeadingLink","h","Host","class","role","label","nonInteractive","items","variant","dateline","ref","el","target","download","onClick","name","format","formatSpan","dayNamesShort","getDay","getDate","monthNamesShort","getMonth","datalistItems","map","Fragment"],"sources":["src/components/stzh-card-searchresult/stzh-card-searchresult.scss?tag=stzh-card-searchresult&encapsulation=scoped","src/components/stzh-card-searchresult/stzh-card-searchresult.tsx"],"sourcesContent":[":host {\n  --service-background-color: #{$colorSecondary30};\n  --service-color: #{$colorPrimary70};\n\n  --grid-template-areas:\n    \"heading\"\n    \"description\"\n    \"meta\";\n  --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n  --grid-template-columns: minmax(0, 1fr);\n\n  display: grid;\n\n  ::slotted(img) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  &[has-image] {\n    --grid-template-areas:\n      \"image\"\n      \"heading\"\n      \"description\"\n      \"meta\";\n    --grid-template-rows: repeat(3, auto) minmax(0, 1fr);\n    --grid-template-columns: minmax(0, 1fr);\n\n    @include mq($from: small) {\n      --grid-template-areas:\n        \"heading image\"\n        \"description image\"\n        \"meta image\";\n      --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n      --grid-template-columns: minmax(0, 1fr) minmax(180px, min-content);\n    }\n  }\n\n  &[has-image][image-position=\"right\"] {\n    @include mq($to: small) {\n      --grid-template-areas:\n        \"heading image\"\n        \"description description\"\n        \"meta meta\";\n      --grid-template-rows: repeat(2, auto) minmax(0, 1fr);\n      --grid-template-columns: minmax(0, 1fr) minmax(100px, min-content);\n    }\n  }\n}\n\n.stzh-card-searchresult {\n  @include fontSize('milli');\n  position: relative;\n  display: grid;\n  background-color: $colorGrey10;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-rows: var(--grid-template-rows);\n  grid-template-columns: var(--grid-template-columns);\n  color: $colorGrey80;\n\n  &__tag,\n  &__dateline,\n  &__breadcrumb,\n  &__event-infos,\n  &__heading-link-text,\n  &__description,\n  &__meta-wrapper {\n    z-index: 1;\n    position: relative;\n  }\n\n  &__heading-wrapper,\n  &--has-description-wrapper &__description-wrapper,\n  &__meta-wrapper {\n    margin-left: space('medium');\n    margin-right: space('medium');\n    margin-bottom: space('large');\n  }\n\n  &__heading-wrapper {\n    grid-area: heading;\n    display: grid;\n    margin-top: space('xlarge');\n  }\n\n  &__image {\n    display: grid;\n    grid-area: image;\n    width: 100%;\n  }\n\n  &__description-wrapper {\n    grid-area: description;\n  }\n\n  &__meta-wrapper {\n    grid-area: meta;\n  }\n\n  &__meta {\n    overflow: hidden;\n  }\n\n  &__download {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: space('xsmall');\n    overflow: hidden;\n  }\n\n  &__download-button {\n    align-self: flex-end;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: $formInputHeightSmall;\n    height: $formInputHeightSmall;\n    color: $colorPrimary70;\n  }\n\n  &__download-heading {\n    color: $colorPrimary70;\n    text-underline-offset: $linkTextUnderlineOffset;\n    text-decoration-line: $linkTextDecorationLine;\n    text-decoration-thickness: $linkTextDecorationThickness;\n    text-decoration-skip-ink: $linkTextDecorationSkipInk;\n  }\n\n  &__tag,\n  &__topic,\n  &__service,\n  &__event-date-teaser {\n    z-index: 2;\n  }\n\n  &__tag {\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n\n  &__service,\n  &__topic {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: absolute;\n    top: 0;\n    right: 0;\n    background-color: $colorSecondary30;\n    color: $colorPrimary70;\n    padding: space('xsmall') space('medium');\n    text-align: center;\n\n    @include mq($from: small) {\n      min-width: 180px;\n    }\n  }\n\n  &__service {\n    background-color: var(--service-background-color);\n    color: var(--service-color);\n  }\n\n  &__dateline {\n    @include fontSize('micro');\n    margin-bottom: space('small');\n  }\n\n  &__heading {\n    margin-top: 0px;\n    margin-bottom: space('xsmall');\n  }\n\n  &__heading-link {\n    @include font('heavy');\n    @include fontCurve('p1');\n    display: block;\n    color: $colorPrimary70;\n    text-decoration-line: none;\n  }\n\n  &__event-infos {\n    @include fontSize('micro');\n    color: $colorBlack;\n  }\n\n  &:has(#{&}__description:not(:empty)) &__event-infos {\n    margin-bottom: space('small');\n  }\n\n  &__description {\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__breadcrumb {\n    margin-bottom: space('small');\n  }\n\n  &__event-date-teaser {\n    @include fontSize('nano');\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: 80px;\n    height: 80px;\n    color: $colorBlack;\n    background-color: $colorSecondary30;\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n\n  &__event-date-teaser-day {\n    @include font('heavy');\n    @include fontSize('hecto');\n    color: $colorPrimary70;\n    margin-top: -7px;\n    margin-bottom: -7px;\n  }\n\n  &__meta-list,\n  &__download-meta-list {\n    @include fontSize('micro');\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    column-gap: space('xsmall');\n    margin-left: calc((#{space('xsmall')} + 1px) / -1);\n  }\n\n  &__meta-list-item,\n  &__download-meta-list-item {\n    display: flex;\n    align-items: center;\n    min-height: 24px;\n    gap: space('xsmall');\n\n    &::before {\n      content: '';\n      display: block;\n      width: 1px;\n      height: 16px;\n      background-color: currentColor;\n    }\n  }\n\n  /* Has link */\n\n  &--has-link &__heading-link {\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n\n    &::after {\n      z-index: 10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__heading-link {\n    &::before {\n      background-color: $colorSecondary10;\n    }\n  }\n\n  &--has-link:has(#{&}__heading-link:hover) &__tag {\n    --color: #{$colorSecondary60};\n  }\n\n  /* Has breadcrumb */\n\n  &--has-breadcrumb &__heading-wrapper {\n    margin-top: space('xlarge');\n  }\n\n  /* Has tag */\n\n  &--has-tag &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has topic or service */\n\n  &--has-service &__heading-wrapper,\n  &--has-topic &__heading-wrapper {\n    margin-top: space('xxxxlarge');\n  }\n\n  &--has-service#{&}--has-image-right &__heading-wrapper,\n  &--has-topic#{&}--has-image-right &__heading-wrapper {\n    margin-top: space('xxxlarge');\n  }\n\n  /* Has image (default) */\n\n  &--has-image &__image {\n    z-index: 1;\n    position: relative;\n  }\n\n  &--has-image-default &__heading-wrapper {\n    @include mq($to: small) {\n      margin-top: space('small');\n    }\n  }\n\n  /* Has image right */\n\n  &--has-image-right &__image {\n    @include mq($to: small) {\n      margin-bottom: space('xsmall');\n    }\n  }\n\n  &--has-image-right &__service,\n  &--has-image-right &__topic {\n    position: static;\n  }\n\n  /* Has description wrapper, meta or download */\n\n  &--has-description-wrapper &__heading-wrapper,\n  &--has-meta &__heading-wrapper,\n  &--has-download &__heading-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description-wrapper,\n  &--has-download &__description-wrapper {\n    margin-bottom: 0px;\n  }\n\n  &--has-meta &__description,\n  &--has-download &__description {\n    &:not(:empty) {\n      margin-bottom: space('small');\n    }\n  }\n\n  &--has-download &__meta {\n    margin-bottom: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhCardSearchresultClickEvent,\n  StzhBreadcrumbItem,\n  StzhDatalistItemEntry,\n  StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot heading - Heading text (alternative for heading property)\n * @slot description - Description text (alternative for description property)\n * @slot image - Image\n */\n@Component({\n  tag: \"stzh-card-searchresult\",\n  styleUrl: \"stzh-card-searchresult.scss\",\n  scoped: true\n})\nexport class StzhCardSearchresult {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /** Download attribute (if href is used) */\n  @Prop() download: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Heading (alternative for heading slot) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Description text (alternative for description slot) */\n  @Prop() description: string = \"\";\n\n  /** Tag */\n  @Prop() tag: string;\n\n  /** Topic */\n  @Prop() topic: string;\n\n  /** Service */\n  @Prop() service: string;\n\n  /** Dateline */\n  @Prop() dateline: string;\n\n  /** Meta */\n  @Prop() meta: string[] | string;\n  private _meta: string[];\n\n  /** Breadcrumb items */\n  @Prop() breadcrumbItems: StzhBreadcrumbItem[] | string;\n\n  /** Datalist items */\n  @Prop() datalistItems: StzhDatalistItemEntry[] | string = [];\n\n  /** Event start date */\n  @Prop() eventDateStart: Date | string;\n\n  /** Event start date */\n  @Prop() eventDateEnd: Date | string;\n\n  /** Event location */\n  @Prop() eventLocation: string;\n\n  /** Image position */\n  @Prop({ reflect: true }) imagePosition: \"default\" | \"right\" = \"default\";\n\n  /** Download heading */\n  @Prop() downloadHeading: string;\n\n  /** Download meta */\n  @Prop() downloadMeta: string[] | string;\n  private _downloadMeta: string[];\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  @Element() element: HTMLStzhListElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._meta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (e) {\n        this._meta = [];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"downloadMeta\")\n  downloadMetaWatcher(newValue: string | string[]) {\n    if (!newValue) {\n      this._downloadMeta = [];\n    } else if (typeof newValue === \"string\") {\n      try {\n        this._downloadMeta = JSON.parse(newValue);\n      } catch (e) {\n        this._downloadMeta = [];\n      }\n    } else {\n      this._downloadMeta = newValue;\n    }\n  }\n\n  private headingLinkElement: HTMLAnchorElement | HTMLDivElement;\n  private headingTextElement: HTMLDivElement;\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card-searchresult\",\n      originalEvent,\n      href: this.href\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.headingLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  async componentWillLoad() {\n    this.metaWatcher(this.meta);\n    this.downloadMetaWatcher(this.downloadMeta);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card-searchresult\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  render() {\n    const hasHeading = !!this.heading || hasSlot(this.element, 'heading');\n    const hasDescription = !!this.description || hasSlot(this.element, 'description');\n    const hasImage = hasSlot(this.element, 'image');\n\n    const eventDateStart = this.eventDateStart && new Date(this.eventDateStart);\n    const eventDateEnd = this.eventDateEnd && new Date(this.eventDateEnd);\n\n    const classes = {\n      \"stzh-card-searchresult\": true,\n      \"stzh-card-searchresult--has-heading\": hasHeading,\n      \"stzh-card-searchresult--has-description\": hasDescription,\n      \"stzh-card-searchresult--has-description-wrapper\": hasDescription || !!eventDateStart || !!this.eventLocation,\n      \"stzh-card-searchresult--has-link\": !!this.href,\n      \"stzh-card-searchresult--has-service\": !!this.service,\n      \"stzh-card-searchresult--has-tag\": !!this.tag,\n      \"stzh-card-searchresult--has-topic\": !!this.topic,\n      \"stzh-card-searchresult--has-image\": hasImage,\n      \"stzh-card-searchresult--has-image-default\": hasImage && this.imagePosition === \"default\",\n      \"stzh-card-searchresult--has-image-right\": hasImage && this.imagePosition === \"right\",\n      \"stzh-card-searchresult--has-meta\": this._meta.length > 0,\n      \"stzh-card-searchresult--has-download\": !!this.downloadHeading || this._downloadMeta.length > 0,\n      \"stzh-card-searchresult--has-breadcrumb\": !!this.breadcrumbItems,\n    };\n\n    const Heading = `h${this.headingLevel}`;\n    const HeadingLink = this.href ? \"a\" : \"div\";\n\n    return (\n      <Host has-image={hasImage}>\n        <article class={classes} aria-label={this.heading} role=\"listitem\">\n          {this.tag &&\n            <stzh-tag\n              class=\"stzh-card-searchresult__tag\"\n              label={this.tag}\n              nonInteractive={true}\n            ></stzh-tag>\n          }\n\n          <div class=\"stzh-card-searchresult__heading-wrapper\">\n            {this.breadcrumbItems &&\n              <stzh-breadcrumb\n                class=\"stzh-card-searchresult__breadcrumb\"\n                items={this.breadcrumbItems}\n                variant=\"teaser\"\n              ></stzh-breadcrumb>\n            }\n\n            {this.dateline &&\n              <div class=\"stzh-card-searchresult__dateline\">{this.dateline}</div>\n            }\n\n            <Heading class=\"stzh-card-searchresult__heading\">\n              <HeadingLink\n                ref={(el) => (this.headingLinkElement = el as HTMLAnchorElement | HTMLDivElement)}\n                class=\"stzh-card-searchresult__heading-link\"\n                href={this.href}\n                target={this.target}\n                download={this.download}\n                onClick={this.handleCardClick}\n              >\n                <div\n                  class=\"stzh-card-searchresult__heading-link-text\"\n                  ref={(el) => (this.headingTextElement = el as HTMLDivElement)}\n                >\n                  {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                </div>\n              </HeadingLink>\n            </Heading>\n          </div>\n\n          <div class=\"stzh-card-searchresult__description-wrapper\">\n            {(eventDateStart || this.eventLocation) &&\n              <div class=\"stzh-card-searchresult__event-infos\">\n                {eventDateStart &&\n                  <div class=\"stzh-card-searchresult__event-date\">\n                    <span>{this.dateAdapter.format(eventDateStart, \"dateLong\")},&nbsp;</span>\n                    {this.dateAdapter.formatSpan(eventDateStart, eventDateEnd, \"time\")}\n                  </div>\n                }\n                {this.eventLocation &&\n                  <div class=\"stzh-card-searchresult__event-location\">\n                    {this.eventLocation}\n                  </div>\n                }\n              </div>\n            }\n\n            <div class=\"stzh-card-searchresult__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n          </div>\n\n          <div class=\"stzh-card-searchresult__image\">\n            {eventDateStart &&\n              <div class=\"stzh-card-searchresult__event-date-teaser\">\n                <div class=\"stzh-card-searchresult__event-date-teaser-day-name\">\n                {this.localization.$globals.dayNamesShort[eventDateStart.getDay()]}\n                </div>\n                <div class=\"stzh-card-searchresult__event-date-teaser-day\">\n                  {eventDateStart.getDate() < 10 && '0'}{eventDateStart.getDate()}\n                </div>\n                <div class=\"stzh-card-searchresult__event-date-teaser-month\">\n                  {this.localization.$globals.monthNamesShort[eventDateStart.getMonth()]}\n                </div>\n              </div>\n            }\n            {this.topic && <div class=\"stzh-card-searchresult__topic\">{this.topic}</div>}\n            {this.service && <div class=\"stzh-card-searchresult__service\">{this.service}</div>}\n            <slot name=\"image\"></slot>\n          </div>\n\n          {(this._meta.length > 0 || this.datalistItems || (!!this.downloadHeading || this._downloadMeta.length > 0)) &&\n            <div class=\"stzh-card-searchresult__meta-wrapper\">\n              {this.datalistItems &&\n                <stzh-datalist\n                  class=\"stzh-card-searchresult__datalist\"\n                  items={this.datalistItems}\n                >\n                </stzh-datalist>\n              }\n\n              {this._meta.length > 0 &&\n                <div class=\"stzh-card-searchresult__meta\">\n                  <div class=\"stzh-card-searchresult__meta-list\">\n                    {this._meta.map((meta) =>\n                      <Fragment>\n                        <div class=\"stzh-card-searchresult__meta-list-item\">{meta}</div>\n                      </Fragment>\n                    )}\n                  </div>\n                </div>\n              }\n\n              {(!!this.downloadHeading || this._downloadMeta.length > 0) &&\n                <div class=\"stzh-card-searchresult__download\">\n                  <div class=\"stzh-card-searchresult__download-data\">\n                    {this.downloadHeading &&\n                      <div class=\"stzh-card-searchresult__download-heading\">\n                        {this.downloadHeading}\n                      </div>\n                    }\n                    {this._downloadMeta.length > 0 &&\n                      <div class=\"stzh-card-searchresult__download-meta-list\">\n                        {this._downloadMeta.map((meta) =>\n                          <Fragment>\n                            <div class=\"stzh-card-searchresult__download-meta-list-item\">{meta}</div>\n                          </Fragment>\n                        )}\n                      </div>\n                    }\n                  </div>\n\n                  <div class=\"stzh-card-searchresult__download-button\">\n                    <stzh-icon class=\"stzh-card-searchresult__download-icon\" name=\"download\"></stzh-icon>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </article>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/{p-53828193.entry.js → p-2ca82cdb.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as s,a as i,g as e}from"./p-c7bfac7a.js";import{a as r}from"./p-a771013b.js";const a=".sc-stzh-microsite-teaserlist-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-microsite-teaserlist-h{display:none}.sc-stzh-microsite-teaserlist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-microsite-teaserlist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist,.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist::before,.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist::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-microsite-teaserlist-h .has-focus.sc-stzh-microsite-teaserlist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-microsite-teaserlist-h .stzh-fylingfocus-focused.sc-stzh-microsite-teaserlist{outline-style:none !important}.sc-stzh-microsite-teaserlist-h .stzh-fylingfocus-focused.sc-stzh-microsite-teaserlist::-moz-focus-inner{border:0 !important}.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xlarge);display:grid}@media screen and (min-width: 900px){.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{justify-content:center}}";const o=class{constructor(s){t(this,s);this._tags=[];this._tagChips=[];this._filteredItems=[];this._filteredSlicedItems=[];this._showMoreLink=false;this.handleChange=t=>{this.showItems=this._initialShowItems;this.activeFilter=t.detail.value};this.handleMoreClick=()=>{this.showItems=this.showItems+this.stepItems};this.localization=undefined;this.api=undefined;this.tags=[];this.showItems=6;this.stepItems=6;this.activeFilter="";this.items=[]}async filterHandler(){this._filteredItems=this.items.filter((t=>this.activeFilter!==""?t.tags.some((t=>this.activeFilter===t)):true));this._filteredSlicedItems=this._filteredItems.slice(0,this.showItems);this._showMoreLink=this.showItems<this._filteredItems.length}async tagsWatcher(){if(typeof this.tags==="string"){this._tags=JSON.parse(this.tags)}else{this._tags=this.tags}this._tagChips=this._tags.map((t=>({label:t.name,value:t.id,variant:"filter",counter:(t.id?this.items.filter((s=>s.tags.indexOf(t.id)>-1)).length:this.items.length).toString()})))}async apiWatcher(t){if(!t){return}let s=this.api.replace(/\{lang\}/,this.localization.$locale);const{data:i}=await r.get(s);this.items=i.items;this.showItems=this._initialShowItems}async componentWillLoad(){this._initialShowItems=this.showItems;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"microsite-teaserlist")}await this.apiWatcher(this.api)}render(){const t={"stzh-microsite-teaserlist":true};return s(i,null,s("div",{class:t},this._tagChips.length>0&&s("stzh-chipselect",{"hide-optional":true,class:"stzh-microsite-teaserlist__filter",label:this.localization.tagsLabel,data:this._tagChips,onStzhChange:this.handleChange}),s("stzh-cardlist",{layout:"teasers"},this._filteredSlicedItems.map((t=>s("stzh-card",{href:t.link},t.image&&s("stzh-ratio",{slot:"image"},s("img",{src:t.image})),t.title&&s("div",{slot:"heading"},t.title),t.description&&s("div",{slot:"content"},t.description))))),this._showMoreLink&&s("div",{class:"stzh-microsite-teaserlist__show-more"},s("stzh-button",{variant:"secondary",label:this.localization.showMore,onClick:this.handleMoreClick}))))}get element(){return e(this)}static get watchers(){return{items:["filterHandler","tagsWatcher"],showItems:["filterHandler"],activeFilter:["filterHandler"],tags:["tagsWatcher"],api:["apiWatcher"]}}};o.style=a;export{o as stzh_microsite_teaserlist};
-//# sourceMappingURL=p-53828193.entry.js.map
+import{r as t,h as s,a as i,g as e}from"./p-c7bfac7a.js";import{a as r}from"./p-a771013b.js";const a=".sc-stzh-microsite-teaserlist-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-microsite-teaserlist-h{display:none}.sc-stzh-microsite-teaserlist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-microsite-teaserlist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist,.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist::before,.sc-stzh-microsite-teaserlist-h *.sc-stzh-microsite-teaserlist::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-microsite-teaserlist-h .has-focus.sc-stzh-microsite-teaserlist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-microsite-teaserlist-h .stzh-fylingfocus-focused.sc-stzh-microsite-teaserlist{outline-style:none !important}.sc-stzh-microsite-teaserlist-h .stzh-fylingfocus-focused.sc-stzh-microsite-teaserlist::-moz-focus-inner{border:0 !important}.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-microsite-teaserlist__filter.sc-stzh-microsite-teaserlist{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xlarge);display:grid}@media screen and (min-width: 900px){.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-microsite-teaserlist__show-more.sc-stzh-microsite-teaserlist{justify-content:center}}";const o=class{constructor(s){t(this,s);this._tags=[];this._tagChips=[];this._filteredItems=[];this._filteredSlicedItems=[];this._showMoreLink=false;this.handleChange=t=>{this.showItems=this._initialShowItems;this.activeFilter=typeof t.detail.value==="string"?t.detail.value:t.detail.value[0]||""};this.handleMoreClick=()=>{this.showItems=this.showItems+this.stepItems};this.localization=undefined;this.api=undefined;this.tags=[];this.showItems=6;this.stepItems=6;this.activeFilter="";this.items=[]}async filterHandler(){this._filteredItems=this.items.filter((t=>this.activeFilter!==""?t.tags.some((t=>this.activeFilter===t)):true));this._filteredSlicedItems=this._filteredItems.slice(0,this.showItems);this._showMoreLink=this.showItems<this._filteredItems.length}async tagsWatcher(){if(typeof this.tags==="string"){this._tags=JSON.parse(this.tags)}else{this._tags=this.tags}this._tagChips=this._tags.map((t=>({label:t.name,value:t.id,variant:"filter",counter:(t.id?this.items.filter((s=>s.tags.indexOf(t.id)>-1)).length:this.items.length).toString()})))}async apiWatcher(t){if(!t){return}let s=this.api.replace(/\{lang\}/,this.localization.$locale);const{data:i}=await r.get(s);this.items=i.items;this.showItems=this._initialShowItems}async componentWillLoad(){this._initialShowItems=this.showItems;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"microsite-teaserlist")}await this.apiWatcher(this.api)}render(){const t={"stzh-microsite-teaserlist":true};return s(i,null,s("div",{class:t},this._tagChips.length>0&&s("stzh-chipselect",{"hide-optional":true,"label-hidden":true,class:"stzh-microsite-teaserlist__filter",label:this.localization.tagsLabel,data:this._tagChips,onStzhChange:this.handleChange}),s("stzh-cardlist",{layout:"teasers"},this._filteredSlicedItems.map((t=>s("stzh-card",{href:t.link},t.image&&s("stzh-ratio",{slot:"image"},s("img",{src:t.image})),t.title&&s("div",{slot:"heading"},t.title),t.description&&s("div",{slot:"content"},t.description))))),this._showMoreLink&&s("div",{class:"stzh-microsite-teaserlist__show-more"},s("stzh-button",{variant:"secondary",label:this.localization.showMore,onClick:this.handleMoreClick}))))}get element(){return e(this)}static get watchers(){return{items:["filterHandler","tagsWatcher"],showItems:["filterHandler"],activeFilter:["filterHandler"],tags:["tagsWatcher"],api:["apiWatcher"]}}};o.style=a;export{o as stzh_microsite_teaserlist};
+//# sourceMappingURL=p-2ca82cdb.entry.js.map

package/dist/stzh-components/{p-53828193.entry.js.map → p-2ca82cdb.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhMicrositeTeaserlistCss","StzhMicrositeTeaserlist","this","_tags","_tagChips","_filteredItems","_filteredSlicedItems","_showMoreLink","handleChange","event","showItems","_initialShowItems","activeFilter","detail","value","handleMoreClick","stepItems","filterHandler","items","filter","item","tags","some","tag","slice","length","tagsWatcher","JSON","parse","map","label","name","id","variant","counter","indexOf","toString","apiWatcher","newValue","apiUrl","api","replace","localization","$locale","data","axios","get","componentWillLoad","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","class","tagsLabel","onStzhChange","layout","href","link","image","slot","src","title","description","showMore","onClick"],"sources":["src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.scss?tag=stzh-microsite-teaserlist&encapsulation=scoped","src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-microsite-teaserlist {\n  &__filter {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  &__show-more {\n    @include spaceCurve('margin-top', 'medium');\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: center;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport axios from 'axios';\n\nimport { StzhMicrositeTeaserlistLocalizedText } from './stzh-microsite-teaserlist.localization';\n\nimport {\n  StzhMicrositeTeaserlistTag,\n  StzhMicrositeTeaserlistItem,\n  StzhChipselectItem,\n  StzhChipselectChangeEvent\n} from \"../../index\";\n\n/**\n * @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html\n * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html\n */\n@Component({\n  tag: \"stzh-microsite-teaserlist\",\n  styleUrl: \"stzh-microsite-teaserlist.scss\",\n  scoped: true\n})\nexport class StzhMicrositeTeaserlist {\n  /** Translation strings */\n  @Prop() localization: StzhMicrositeTeaserlistLocalizedText;\n\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string;\n\n  /** Tags */\n  @Prop() tags: string | StzhMicrositeTeaserlistTag[] = [];\n  private _tags: StzhMicrositeTeaserlistTag[] = [];\n  private _tagChips: StzhChipselectItem[] = [];\n\n  /** Numbers of items currently shown */\n  @Prop({ mutable: true }) showItems: number = 6;\n  private _initialShowItems: number;\n\n  /** Numbers of item shown with each load more action */\n  @Prop() stepItems: number = 6;\n\n  @Element() element: HTMLStzhMicrositeTeaserlistElement;\n\n  /** Active filter */\n  @State() activeFilter: string = \"\";\n\n  @State() items: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredItems: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredSlicedItems: StzhMicrositeTeaserlistItem[] = [];\n  private _showMoreLink: boolean = false;\n\n  @Watch(\"items\")\n  @Watch(\"showItems\")\n  @Watch(\"activeFilter\")\n  async filterHandler() {\n    this._filteredItems = this.items\n      .filter((item) => {\n        // return (this.activeFilter[0] !== \"\") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;\n        return (this.activeFilter !== \"\") ? item.tags.some(tag => this.activeFilter === tag) : true;\n      });\n\n    this._filteredSlicedItems = this._filteredItems\n      .slice(0, this.showItems)\n\n    this._showMoreLink = this.showItems < this._filteredItems.length;\n  }\n\n  @Watch(\"items\")\n  @Watch(\"tags\")\n  async tagsWatcher() {\n    if (typeof this.tags === \"string\") {\n      this._tags = JSON.parse(this.tags);\n    } else {\n      this._tags = this.tags;\n    }\n\n    this._tagChips = this._tags.map((tag) => ({\n      \"label\": tag.name,\n      \"value\": tag.id,\n      \"variant\": \"filter\",\n      \"counter\": ((tag.id)\n        ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length\n        : this.items.length).toString()\n    }));\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.items = data.items;\n    this.showItems = this._initialShowItems;\n  }\n\n  private handleChange = (event: CustomEvent<StzhChipselectChangeEvent>) => {\n    this.showItems = this._initialShowItems;\n    this.activeFilter = event.detail.value;\n  }\n\n  private handleMoreClick = () => {\n    this.showItems = this.showItems + this.stepItems;\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"microsite-teaserlist\");\n    }\n\n    await this.apiWatcher(this.api);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-microsite-teaserlist\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._tagChips.length > 0 &&\n            <stzh-chipselect\n              hide-optional\n              class=\"stzh-microsite-teaserlist__filter\"\n              label={this.localization.tagsLabel}\n              data={this._tagChips}\n              onStzhChange={this.handleChange}\n            ></stzh-chipselect>\n          }\n\n          <stzh-cardlist layout=\"teasers\">\n            {this._filteredSlicedItems.map((item) =>\n              <stzh-card href={item.link}>\n                {item.image &&\n                  <stzh-ratio slot=\"image\">\n                    <img src={item.image} />\n                  </stzh-ratio>\n                }\n                {item.title &&\n                  <div slot=\"heading\">{item.title}</div>\n                }\n                {/* <stzh-clamp slot=\"heading\" lines={2}>{item.title}</stzh-clamp> */}\n                {item.description &&\n                  <div slot=\"content\">{item.description}</div>\n                }\n                {/* <stzh-clamp slot=\"content\" lines={3}>{item.description}</stzh-clamp> */}\n              </stzh-card>\n            )}\n          </stzh-cardlist>\n\n          {this._showMoreLink &&\n            <div class=\"stzh-microsite-teaserlist__show-more\">\n              <stzh-button\n                variant=\"secondary\"\n                label={this.localization.showMore}\n                onClick={this.handleMoreClick}\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAA6B,uzE,MC8BtBC,EAAuB,M,yBAS1BC,KAAAC,MAAsC,GACtCD,KAAAE,UAAkC,GAelCF,KAAAG,eAAgD,GAChDH,KAAAI,qBAAsD,GACtDJ,KAAAK,cAAyB,MAoDzBL,KAAAM,aAAgBC,IACtBP,KAAKQ,UAAYR,KAAKS,kBACtBT,KAAKU,aAAeH,EAAMI,OAAOC,KAAK,EAGhCZ,KAAAa,gBAAkB,KACxBb,KAAKQ,UAAYR,KAAKQ,UAAYR,KAAKc,SAAS,E,yDA7EI,G,eAKT,E,eAIjB,E,kBAKI,G,WAEgB,E,CAQhD,mBAAMC,GACJf,KAAKG,eAAiBH,KAAKgB,MACxBC,QAAQC,GAEClB,KAAKU,eAAiB,GAAMQ,EAAKC,KAAKC,MAAKC,GAAOrB,KAAKU,eAAiBW,IAAO,OAG3FrB,KAAKI,qBAAuBJ,KAAKG,eAC9BmB,MAAM,EAAGtB,KAAKQ,WAEjBR,KAAKK,cAAgBL,KAAKQ,UAAYR,KAAKG,eAAeoB,M,CAK5D,iBAAMC,GACJ,UAAWxB,KAAKmB,OAAS,SAAU,CACjCnB,KAAKC,MAAQwB,KAAKC,MAAM1B,KAAKmB,K,KACxB,CACLnB,KAAKC,MAAQD,KAAKmB,I,CAGpBnB,KAAKE,UAAYF,KAAKC,MAAM0B,KAAKN,IAAG,CAClCO,MAASP,EAAIQ,KACbjB,MAASS,EAAIS,GACbC,QAAW,SACXC,SAAaX,EAAM,GACfrB,KAAKgB,MAAMC,QAAOC,GAAQA,EAAKC,KAAKc,QAAQZ,EAAIS,KAAO,IAAGP,OAC1DvB,KAAKgB,MAAMO,QAAQW,c,CAK3B,gBAAMC,CAAWC,GACf,IAAKA,EAAU,CACb,M,CAGF,IAAIC,EAASrC,KAAKsC,IAAIC,QAAQ,WAAYvC,KAAKwC,aAAaC,SAG5D,MAAMC,KAAEA,SAAeC,EAAMC,IAAIP,GAEjCrC,KAAKgB,MAAQ0B,EAAK1B,MAClBhB,KAAKQ,UAAYR,KAAKS,iB,CAYxB,uBAAMoC,GACJ7C,KAAKS,kBAAoBT,KAAKQ,UAE9B,IAAKR,KAAKwC,aAAc,CACtBxC,KAAKwC,mBAAqBM,OAAOC,eAAeC,MAAMC,kBAAkBjD,KAAKkD,QAAS,uB,OAGlFlD,KAAKmC,WAAWnC,KAAKsC,I,CAG7B,MAAAa,GACE,MAAMC,EAAU,CACd,4BAA6B,MAG/B,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACTpD,KAAKE,UAAUqB,OAAS,GACvB8B,EAAA,wCAEEE,MAAM,oCACN3B,MAAO5B,KAAKwC,aAAagB,UACzBd,KAAM1C,KAAKE,UACXuD,aAAczD,KAAKM,eAIvB+C,EAAA,iBAAeK,OAAO,WACnB1D,KAAKI,qBAAqBuB,KAAKT,GAC9BmC,EAAA,aAAWM,KAAMzC,EAAK0C,MACnB1C,EAAK2C,OACJR,EAAA,cAAYS,KAAK,SACfT,EAAA,OAAKU,IAAK7C,EAAK2C,SAGlB3C,EAAK8C,OACJX,EAAA,OAAKS,KAAK,WAAW5C,EAAK8C,OAG3B9C,EAAK+C,aACJZ,EAAA,OAAKS,KAAK,WAAW5C,EAAK+C,iBAOjCjE,KAAKK,eACJgD,EAAA,OAAKE,MAAM,wCACTF,EAAA,eACEtB,QAAQ,YACRH,MAAO5B,KAAKwC,aAAa0B,SACzBC,QAASnE,KAAKa,oB"}
+{"version":3,"names":["stzhMicrositeTeaserlistCss","StzhMicrositeTeaserlist","this","_tags","_tagChips","_filteredItems","_filteredSlicedItems","_showMoreLink","handleChange","event","showItems","_initialShowItems","activeFilter","detail","value","handleMoreClick","stepItems","filterHandler","items","filter","item","tags","some","tag","slice","length","tagsWatcher","JSON","parse","map","label","name","id","variant","counter","indexOf","toString","apiWatcher","newValue","apiUrl","api","replace","localization","$locale","data","axios","get","componentWillLoad","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","class","tagsLabel","onStzhChange","layout","href","link","image","slot","src","title","description","showMore","onClick"],"sources":["src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.scss?tag=stzh-microsite-teaserlist&encapsulation=scoped","src/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-microsite-teaserlist {\n  &__filter {\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  &__show-more {\n    @include spaceCurve('margin-top', 'medium');\n    display: grid;\n\n    @include mq($from: small) {\n      justify-content: center;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport axios from 'axios';\n\nimport { StzhMicrositeTeaserlistLocalizedText } from './stzh-microsite-teaserlist.localization';\n\nimport {\n  StzhMicrositeTeaserlistTag,\n  StzhMicrositeTeaserlistItem,\n  StzhChipselectItem,\n  StzhChipselectChangeEvent\n} from \"../../index\";\n\n/**\n * @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html\n * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html\n */\n@Component({\n  tag: \"stzh-microsite-teaserlist\",\n  styleUrl: \"stzh-microsite-teaserlist.scss\",\n  scoped: true\n})\nexport class StzhMicrositeTeaserlist {\n  /** Translation strings */\n  @Prop() localization: StzhMicrositeTeaserlistLocalizedText;\n\n  /** API URL (`{lang}` is replaced in the URL)  */\n  @Prop() api: string;\n\n  /** Tags */\n  @Prop() tags: string | StzhMicrositeTeaserlistTag[] = [];\n  private _tags: StzhMicrositeTeaserlistTag[] = [];\n  private _tagChips: StzhChipselectItem[] = [];\n\n  /** Numbers of items currently shown */\n  @Prop({ mutable: true }) showItems: number = 6;\n  private _initialShowItems: number;\n\n  /** Numbers of item shown with each load more action */\n  @Prop() stepItems: number = 6;\n\n  @Element() element: HTMLStzhMicrositeTeaserlistElement;\n\n  /** Active filter */\n  @State() activeFilter: string = \"\";\n\n  @State() items: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredItems: StzhMicrositeTeaserlistItem[] = [];\n  private _filteredSlicedItems: StzhMicrositeTeaserlistItem[] = [];\n  private _showMoreLink: boolean = false;\n\n  @Watch(\"items\")\n  @Watch(\"showItems\")\n  @Watch(\"activeFilter\")\n  async filterHandler() {\n    this._filteredItems = this.items\n      .filter((item) => {\n        // return (this.activeFilter[0] !== \"\") ? item.tags.some(tag => this.activeFilters.indexOf(tag) > -1) : true;\n        return (this.activeFilter !== \"\") ? item.tags.some(tag => this.activeFilter === tag) : true;\n      });\n\n    this._filteredSlicedItems = this._filteredItems\n      .slice(0, this.showItems)\n\n    this._showMoreLink = this.showItems < this._filteredItems.length;\n  }\n\n  @Watch(\"items\")\n  @Watch(\"tags\")\n  async tagsWatcher() {\n    if (typeof this.tags === \"string\") {\n      this._tags = JSON.parse(this.tags);\n    } else {\n      this._tags = this.tags;\n    }\n\n    this._tagChips = this._tags.map((tag) => ({\n      \"label\": tag.name,\n      \"value\": tag.id,\n      \"variant\": \"filter\",\n      \"counter\": ((tag.id)\n        ? this.items.filter(item => item.tags.indexOf(tag.id) > -1).length\n        : this.items.length).toString()\n    }));\n  }\n\n  @Watch(\"api\")\n  async apiWatcher(newValue: string) {\n    if (!newValue) {\n      return;\n    }\n\n    let apiUrl = this.api.replace(/\\{lang\\}/, this.localization.$locale)\n\n    // load data from API\n    const { data } = await axios.get(apiUrl);\n\n    this.items = data.items;\n    this.showItems = this._initialShowItems;\n  }\n\n  private handleChange = (event: CustomEvent<StzhChipselectChangeEvent>) => {\n    this.showItems = this._initialShowItems;\n    this.activeFilter = typeof event.detail.value === \"string\" ? event.detail.value : event.detail.value[0] || \"\";\n  }\n\n  private handleMoreClick = () => {\n    this.showItems = this.showItems + this.stepItems;\n  }\n\n  async componentWillLoad() {\n    this._initialShowItems = this.showItems;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"microsite-teaserlist\");\n    }\n\n    await this.apiWatcher(this.api);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-microsite-teaserlist\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this._tagChips.length > 0 &&\n            <stzh-chipselect\n              hide-optional\n              label-hidden\n              class=\"stzh-microsite-teaserlist__filter\"\n              label={this.localization.tagsLabel}\n              data={this._tagChips}\n              onStzhChange={this.handleChange}\n            ></stzh-chipselect>\n          }\n\n          <stzh-cardlist layout=\"teasers\">\n            {this._filteredSlicedItems.map((item) =>\n              <stzh-card href={item.link}>\n                {item.image &&\n                  <stzh-ratio slot=\"image\">\n                    <img src={item.image} />\n                  </stzh-ratio>\n                }\n                {item.title &&\n                  <div slot=\"heading\">{item.title}</div>\n                }\n                {/* <stzh-clamp slot=\"heading\" lines={2}>{item.title}</stzh-clamp> */}\n                {item.description &&\n                  <div slot=\"content\">{item.description}</div>\n                }\n                {/* <stzh-clamp slot=\"content\" lines={3}>{item.description}</stzh-clamp> */}\n              </stzh-card>\n            )}\n          </stzh-cardlist>\n\n          {this._showMoreLink &&\n            <div class=\"stzh-microsite-teaserlist__show-more\">\n              <stzh-button\n                variant=\"secondary\"\n                label={this.localization.showMore}\n                onClick={this.handleMoreClick}\n              ></stzh-button>\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAA6B,uzE,MC8BtBC,EAAuB,M,yBAS1BC,KAAAC,MAAsC,GACtCD,KAAAE,UAAkC,GAelCF,KAAAG,eAAgD,GAChDH,KAAAI,qBAAsD,GACtDJ,KAAAK,cAAyB,MAoDzBL,KAAAM,aAAgBC,IACtBP,KAAKQ,UAAYR,KAAKS,kBACtBT,KAAKU,oBAAsBH,EAAMI,OAAOC,QAAU,SAAWL,EAAMI,OAAOC,MAAQL,EAAMI,OAAOC,MAAM,IAAM,EAAE,EAGvGZ,KAAAa,gBAAkB,KACxBb,KAAKQ,UAAYR,KAAKQ,UAAYR,KAAKc,SAAS,E,yDA7EI,G,eAKT,E,eAIjB,E,kBAKI,G,WAEgB,E,CAQhD,mBAAMC,GACJf,KAAKG,eAAiBH,KAAKgB,MACxBC,QAAQC,GAEClB,KAAKU,eAAiB,GAAMQ,EAAKC,KAAKC,MAAKC,GAAOrB,KAAKU,eAAiBW,IAAO,OAG3FrB,KAAKI,qBAAuBJ,KAAKG,eAC9BmB,MAAM,EAAGtB,KAAKQ,WAEjBR,KAAKK,cAAgBL,KAAKQ,UAAYR,KAAKG,eAAeoB,M,CAK5D,iBAAMC,GACJ,UAAWxB,KAAKmB,OAAS,SAAU,CACjCnB,KAAKC,MAAQwB,KAAKC,MAAM1B,KAAKmB,K,KACxB,CACLnB,KAAKC,MAAQD,KAAKmB,I,CAGpBnB,KAAKE,UAAYF,KAAKC,MAAM0B,KAAKN,IAAG,CAClCO,MAASP,EAAIQ,KACbjB,MAASS,EAAIS,GACbC,QAAW,SACXC,SAAaX,EAAM,GACfrB,KAAKgB,MAAMC,QAAOC,GAAQA,EAAKC,KAAKc,QAAQZ,EAAIS,KAAO,IAAGP,OAC1DvB,KAAKgB,MAAMO,QAAQW,c,CAK3B,gBAAMC,CAAWC,GACf,IAAKA,EAAU,CACb,M,CAGF,IAAIC,EAASrC,KAAKsC,IAAIC,QAAQ,WAAYvC,KAAKwC,aAAaC,SAG5D,MAAMC,KAAEA,SAAeC,EAAMC,IAAIP,GAEjCrC,KAAKgB,MAAQ0B,EAAK1B,MAClBhB,KAAKQ,UAAYR,KAAKS,iB,CAYxB,uBAAMoC,GACJ7C,KAAKS,kBAAoBT,KAAKQ,UAE9B,IAAKR,KAAKwC,aAAc,CACtBxC,KAAKwC,mBAAqBM,OAAOC,eAAeC,MAAMC,kBAAkBjD,KAAKkD,QAAS,uB,OAGlFlD,KAAKmC,WAAWnC,KAAKsC,I,CAG7B,MAAAa,GACE,MAAMC,EAAU,CACd,4BAA6B,MAG/B,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACTpD,KAAKE,UAAUqB,OAAS,GACvB8B,EAAA,4DAGEE,MAAM,oCACN3B,MAAO5B,KAAKwC,aAAagB,UACzBd,KAAM1C,KAAKE,UACXuD,aAAczD,KAAKM,eAIvB+C,EAAA,iBAAeK,OAAO,WACnB1D,KAAKI,qBAAqBuB,KAAKT,GAC9BmC,EAAA,aAAWM,KAAMzC,EAAK0C,MACnB1C,EAAK2C,OACJR,EAAA,cAAYS,KAAK,SACfT,EAAA,OAAKU,IAAK7C,EAAK2C,SAGlB3C,EAAK8C,OACJX,EAAA,OAAKS,KAAK,WAAW5C,EAAK8C,OAG3B9C,EAAK+C,aACJZ,EAAA,OAAKS,KAAK,WAAW5C,EAAK+C,iBAOjCjE,KAAKK,eACJgD,EAAA,OAAKE,MAAM,wCACTF,EAAA,eACEtB,QAAQ,YACRH,MAAO5B,KAAKwC,aAAa0B,SACzBC,QAASnE,KAAKa,oB"}

package/dist/stzh-components/p-3c2d9cff.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as t,F as e,a,g as i}from"./p-c7bfac7a.js";import{a as r}from"./p-a771013b.js";import{r as h,h as n}from"./p-7e304ea3.js";import{m as l,a as o,r as c}from"./p-10e2901a.js";import{d}from"./p-dd385618.js";import"./p-9b063923.js";import"./p-7183ba4d.js";const m=':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}stzh-search{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;--grid-template-areas:"filters-main filters-main filters-main filters-main"\n  "results results results results"}stzh-search[hidden]{display:none}stzh-search::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::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)}stzh-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      ". . results results results results results results results results . ."}}stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main"\n  "filters-aside filters-aside filters-aside filters-aside"\n  "results results results results"}@media screen and (min-width: 900px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      "filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside"\n      "results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters="false"]))){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      "filters-aside filters-aside filters-aside filters-aside results results results results results results results results"}}@media screen and (min-width: 1260px){stzh-search:where([variant="teaser"]){--grid-template-areas:"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main"\n      "results results results results results results results results results results results results"}}.stzh-search{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:-webkit-sticky;position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}.stzh-search--teaser .stzh-search__filters-main:not(:empty){padding:0;background-color:transparent}.stzh-search--teaser .stzh-search__filters-aside:not(:empty){padding:0;background-color:transparent}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0px}.stzh-search--has-hidden-main-filters .stzh-search__filters-main{display:none}.stzh-search--has-hidden-aside-filters .stzh-search__filters-aside{display:none}.stzh-search--has-hidden-main-filters .stzh-search__results-wrapper,.stzh-search--has-hidden-main-filters.stzh-search--teaser .stzh-search__results-wrapper{margin-top:0px}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}';function z(s,t){return`\n    <stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}\n      href="{href}"\n      dateline="{dateline}"\n      tag="{tag}"\n      topic="{topic}"\n      service="{service}"\n      event-location="{eventLocation}"\n      download-heading="{downloadHeading}"\n      meta='{meta}'\n      breadcrumb-items='{breadcrumbItems}'\n      download-meta='{downloadMeta}'\n      datalist-items='{datalistItems}'\n      ${t.imagePosition&&'image-position="{imagePosition}"'}\n      ${t.download&&'download="{download}"'}\n      style="\n        ${t.serviceBackgroundColor?"--service-background-color: {serviceBackgroundColor};":""}\n        ${t.serviceColor?"--service-color: {serviceColor};":""}\n      "\n    >\n      <div slot="heading">{heading}</div>\n      <div slot="description">{description}</div>\n      ${t.image?t.imagePosition==="right"?`<img src="${t.image}" slot="image" />`:`<stzh-ratio ${s.variant==="teaser"?'ratio="2:1"':'ratio="21:9" ratio-small="1:1"'} slot="image"><img src="${t.image}" /></stzh-ratio>`:""}\n    </stzh-card-${s.variant==="teaser"?"superteaser":"searchresult"}>\n  `}function f(s){return{layout:s.variant==="teaser"?"teasers":"searchresults"}}const p=class{constructor(t){s(this,t);this._showMoreLink=false;this.fetch=async(s=false,t=false)=>{var e;if(this.currentController){this.currentController.abort()}if(!this.hasRequiredParams&&!s){this.loading=false;return}this.loading=true;this.error="";let a=this.api.replace(/\{lang\}/gi,this.localization.$locale);let i=this.limit.toString();this.params.set("offset",s?this.results.length.toString():"0");if(t){const s=new URLSearchParams(location.search).get("search");if(s){const t=new URLSearchParams(s).get("limit");if(t){i=t}}}this.params.set("limit",i);this.currentController=new AbortController;let h={};try{const s=await r(a,{params:this.params,signal:this.currentController.signal});h=s.data}catch(s){this.error=this.localization.error}this.resultsHeading=h.resultsHeading||"";this.totalCount=((e=h.meta)===null||e===void 0?void 0:e.total)||0;if(h.error){this.error=h.message||this.localization.error}if(h.results){if(s){this.results=[...this.results,...h.results.map((s=>{var t;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((t=h.templates)===null||t===void 0?void 0:t.result),s)})}))]}else{this.results=h.results.map((s=>{var t;return Object.assign(Object.assign({},s),{html:this.renderResultTemplate(s.html||((t=h.templates)===null||t===void 0?void 0:t.result),s)})}))}}if(!t&&!this.preventUpdateUrl){const s=new URLSearchParams(location.search);const t=new URLSearchParams(this.params);t.delete("offset");t.set("limit",this.results.length.toString());s.set("search",t.toString());window.history.replaceState(null,"",`${location.pathname}?${s}`)}if(t||!this.firstFetched){this.loading=false}else{window.setTimeout((()=>{this.loading=false}),this.debounceTime)}this.firstFetched=true};this.debouncedFetch=d(this.fetch,this.debounceTime);this.handleMainFilterChange=async()=>{if(this.autofetchMainFilters){await this.updateParams();this.debouncedFetch()}};this.handleAsideFilterChange=async()=>{if(this.autofetchAsideFilters){await this.updateParams();this.debouncedFetch()}};this.handleFormSubmit=async s=>{s.preventDefault();await this.updateParams();this.fetch()};this.handleMoreClick=()=>{this.fetch(true)};this.handleMediaChange=()=>{this.isDetailsOpen=l("large").matches};this.handleFormReset=async()=>{requestAnimationFrame((()=>{requestAnimationFrame((async()=>{await this.updateParams()}))}))};this.localization=undefined;this.variant="default";this.autofetchMainFilters=false;this.autofetchAsideFilters=false;this.hideMainFilters=false;this.hideAsideFilters=false;this.api="";this.debounceTime=500;this.limit=6;this.initialFetch=false;this.preventUpdateUrl=false;this.templateResult=z;this.templateResultWrapperElement=function(){return"stzh-cardlist"};this.templateResultWrapperProps=f;this.resultHeadingLevel="3";this.emptyText=undefined;this.emptyLinkHref=undefined;this.emptyLinkLabel=undefined;this.totalCount=0;this.loading=false;this.error="";this.results=[];this.resultsHeading=undefined;this.hasRequiredParams=false;this.firstFetched=false;this.initiallyFetched=false;this.isDetailsOpen=false}totalCountWatcher(){this._showMoreLink=this.totalCount>this.results.length}preventUpdateUrlWatcher(){this.updateParams()}renderResultTemplate(s,t){let e=s||(typeof this.templateResult==="function"?this.templateResult(this.element,t):this.templateResult);["href","heading","dateline","description","image","imagePosition","tag","topic","service","serviceColor","serviceBackgroundColor","meta","breadcrumbItems","eventLocation","download","downloadHeading","downloadMeta","datalistItems"].forEach((s=>{const a=new RegExp(`{${s}}`,"gi");let i=t[s]||"";if(["meta","breadcrumbItems","downloadMeta","datalistItems"].includes(s)&&i){i=JSON.stringify(i)}e=e.replace(a,i)}));return e}async updateParams(s=false){const t=()=>{const s=new FormData(this.formElement);this.params=new URLSearchParams(s);this.params.set("variant",this.variant)};if(s){const s=new URLSearchParams(location.search);const t=s.get("search");if(t){this.initialFetch=true;const s=new URLSearchParams(t);[...new Set(s.keys())].forEach((t=>{const e=s.getAll(t);const a=Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name="${t}"]`));const i=Array.from(document.querySelectorAll(`:where(stzh-checkboxgroup)[name="${t}"]`));const r=Array.from(document.querySelectorAll(`:where(stzh-dropdown)[name="${t}"]`));a.forEach((s=>{s.value=e[0]}));i.forEach((s=>{s.value=e}));r.forEach((s=>{s.items=e}))}))}}await h();t();let e=true;const a=Array.from(this.element.querySelectorAll(":where(stzh-input)[required]"));const i=Array.from(this.element.querySelectorAll(":where(stzh-dropdown)[required]"));const r=Array.from(this.element.querySelectorAll(":where(stzh-monthyearpicker)[required]"));const n=Array.from(this.element.querySelectorAll(":where(stzh-amount,stzh-radiogroup,stzh-chipselect,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[required]"));const l=Array.from(this.element.querySelectorAll(":where(stzh-checkbox)[required]"));l.forEach((t=>{const a=!t.checked;if(!s){t.invalid=a}if(a){e=false}}));a.forEach((t=>{const a=t.value===""||t.minlength&&t.minlength>t.value.length||t.maxlength&&t.maxlength<t.value.length;if(!s){t.invalid=a}if(a){e=false}}));i.forEach((t=>{const a=t.items.length===0;if(!s){t.invalid=a}if(a){e=false}}));n.forEach((t=>{const a=t.value.toString().length===0;if(!s){t.invalid=a}if(a){e=false}}));r.forEach((t=>{const a=t.value.toString().length===0;if(!s){t.invalidYear=a;t.invalidMonth=a}if(a){e=false}}));this.hasRequiredParams=e}async componentDidLoad(){await this.updateParams(true);if(this.initialFetch){await this.fetch(false,true);this.initiallyFetched=true}else{this.initiallyFetched=true}}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"search")}}connectedCallback(){o(this.handleMediaChange);this.handleMediaChange()}disconnectedCallback(){c(this.handleMediaChange)}render(){const s=n(this.element,"filters-main");const i=n(this.element,"filters-aside");const r=(this.hasRequiredParams||this.firstFetched)&&this.firstFetched&&this.initiallyFetched;const h={"stzh-search":true,"stzh-search--has-filters-main":s,"stzh-search--has-filters-aside":i,"stzh-search--has-hidden-main-filters":this.hideMainFilters,"stzh-search--has-hidden-aside-filters":this.hideAsideFilters,"stzh-search--has-results-shown":r,"stzh-search--has-error-shown":!!this.error,"stzh-search--is-loading":this.loading,[`stzh-search--${this.variant}`]:!!this.variant};const l=typeof this.templateResultWrapperElement==="function"?this.templateResultWrapperElement(this.element):this.templateResultWrapperElement;const o=typeof this.templateResultWrapperProps==="function"?this.templateResultWrapperProps(this.element):this.templateResultWrapperProps;return t(a,{"has-aside-filters":i},t("form",{ref:s=>this.formElement=s,novalidate:true,class:h,onSubmit:this.handleFormSubmit,onReset:this.handleFormReset},t("div",{class:"stzh-search__filters-main",onStzhChange:this.handleMainFilterChange},t("slot",{name:"filters-main"})),i&&t(e,null,t("div",{class:"stzh-search__filters-aside",onStzhChange:this.handleAsideFilterChange},t("div",{class:"stzh-search__filters-aside-inner"},t("div",{class:"stzh-search__filters-aside-heading"},this.localization.moreFilter),t("stzh-details",{open:this.isDetailsOpen,class:"stzh-search__filters-aside-details"},t("stzh-button",{class:"stzh-search__filters-aside-details-trigger",variant:"tertiary-plain",size:"small",noPaddingLeft:true,showToggleIcon:true,iconPosition:"right",label:this.localization.moreFilter}),t("div",{slot:"content"},t("slot",{name:"filters-aside"})))))),t("div",{class:"stzh-search__results-wrapper"},r&&t(e,null,this.results.length===0?t(e,null,this.variant!=="teaser"&&this.resultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),this.emptyText&&t("stzh-text",{class:"stzh-search__empty-text",innerHTML:this.emptyText}),this.emptyLinkLabel&&this.emptyLinkHref&&t("div",{class:"stzh-search__empty-link-wrapper"},t("stzh-link",{href:this.emptyLinkHref,label:this.emptyLinkLabel}))):t(e,null,this.variant!=="teaser"&&this.resultsHeading&&t("stzh-heading",{class:"stzh-search__results-heading",curve:"h3",level:this.resultHeadingLevel,innerHTML:this.resultsHeading}),t(l,Object.assign({class:"stzh-search__results"},o),this.results.map((s=>t("div",{class:"stzh-search__results-item",innerHTML:s.html||""})))),t("div",{class:"stzh-search__actions-wrapper"},this._showMoreLink&&t("stzh-button",{variant:"secondary",class:"stzh-search__action-more",label:this.localization.showMore,onClick:this.handleMoreClick,a11yDisabled:this.loading})))),this.error&&t("div",{class:"stzh-search__error"},t("stzh-message",{type:"error",label:this.error})),this.loading&&t("stzh-loader",{class:"stzh-search__loader"})),t("slot",null)))}get element(){return i(this)}static get watchers(){return{totalCount:["totalCountWatcher"],results:["totalCountWatcher"],preventUpdateUrl:["preventUpdateUrlWatcher"]}}};p.style=m;export{p as stzh_search};
+//# sourceMappingURL=p-3c2d9cff.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["stzhSearchCss","defaultTemplateResult","search","item","variant","imagePosition","download","serviceBackgroundColor","serviceColor","image","defaultResultWrapperProps","layout","StzhSearch","this","_showMoreLink","fetch","async","append","initial","currentController","abort","hasRequiredParams","loading","error","apiUrl","api","replace","localization","$locale","limit","toString","params","set","results","length","URLSearchParams","location","get","urlLimit","AbortController","data","response","axios","signal","resultsHeading","totalCount","_a","meta","total","message","map","Object","assign","html","renderResultTemplate","templates","result","preventUpdateUrl","newUrlParams","searchParams","delete","window","history","replaceState","pathname","firstFetched","setTimeout","debounceTime","debouncedFetch","debounce","handleMainFilterChange","autofetchMainFilters","updateParams","handleAsideFilterChange","autofetchAsideFilters","handleFormSubmit","event","preventDefault","handleMoreClick","handleMediaChange","isDetailsOpen","media","matches","handleFormReset","requestAnimationFrame","totalCountWatcher","preventUpdateUrlWatcher","template","templateResult","element","forEach","property","regex","RegExp","value","includes","JSON","stringify","updateByFormElements","formData","FormData","formElement","initialParams","initialFetch","currentSearchParams","Set","keys","key","values","getAll","valueInputs","Array","from","document","querySelectorAll","valueArrayInputs","itemsArrayInputs","input","items","raf","requiredInputFields","requiredDropdownFields","requiredMonthyearpickers","requiredFields","requiredCheckboxFields","field","invalid","checked","minlength","maxlength","invalidYear","invalidMonth","componentDidLoad","initiallyFetched","componentWillLoad","stzhComponents","utils","fetchTranslations","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","filtersMainUsed","hasSlot","filtersAsideUsed","resultsShown","classes","hideMainFilters","hideAsideFilters","WrapperElement","templateResultWrapperElement","wrapperProps","templateResultWrapperProps","h","Host","ref","el","novalidate","class","onSubmit","onReset","onStzhChange","name","Fragment","moreFilter","open","size","noPaddingLeft","showToggleIcon","iconPosition","label","slot","curve","level","resultHeadingLevel","innerHTML","emptyText","emptyLinkLabel","emptyLinkHref","href","showMore","onClick","a11yDisabled","type"],"sources":["src/components/stzh-search/stzh-search.scss?tag=stzh-search","src/components/stzh-search/stzh-search.tsx"],"sourcesContent":["stzh-search {\n  @include host;\n\n  --grid-template-areas:\n  \"filters-main filters-main filters-main filters-main\"\n  \"results results results results\";\n\n  @include mq($from: medium) {\n    --grid-template-areas:\n      \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"results results results results results results results results\";\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas:\n      \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \". . results results results results results results results results . .\";\n  }\n\n  &:where([has-aside-filters]:not([hide-aside-filters]:not([hide-aside-filters=\"false\"]))) {\n    --grid-template-areas:\n    \"filters-main filters-main filters-main filters-main\"\n    \"filters-aside filters-aside filters-aside filters-aside\"\n    \"results results results results\";\n\n    @include mq($from: medium) {\n      --grid-template-areas:\n        \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n        \"filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside\"\n        \"results results results results results results results results\";\n    }\n\n    @include mq($from: large) {\n      --grid-template-areas:\n        \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n        \"filters-aside filters-aside filters-aside filters-aside results results results results results results results results\";\n    }\n  }\n\n  &:where([variant=\"teaser\"]) {\n    @include mq($from: large) {\n      --grid-template-areas:\n        \"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n        \"results results results results results results results results results results results results\";\n    }\n  }\n}\n\n.stzh-search {\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n\n  &__filters-main {\n    grid-area: filters-main;\n\n    &:not(:empty) {\n      @include spaceCurve('padding', 'medium');\n      background-color: $colorGrey10;\n    }\n  }\n\n  &__filters-aside {\n    grid-area: filters-aside;\n\n    &:not(:empty) {\n      @include spaceCurve('padding', 'medium');\n      background-color: $colorGrey10;\n\n      @include mq($from: large) {\n        background-color: transparent;\n        padding: 0;\n      }\n    }\n  }\n\n  &__filters-aside-heading {\n    @include font('heavy');\n    @include fontCurve('h4');\n    @include spaceCurve('padding-bottom', 'tiny');\n    color: $colorPrimary70;\n    display: none;\n\n    @include mq($from: large) {\n      display: block;\n    }\n  }\n\n  stzh-button#{&}__filters-aside-details-trigger {\n    @include mq($from: large) {\n      display: none;\n    }\n  }\n\n  &__filters-aside-inner {\n    @include mq($from: large) {\n      position: sticky;\n      top: calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + #{space('medium')});\n      transition: top $baseTransitionAnimationSpeed;\n      width: calc(100% + #{$gridGutterLarge} - #{spaceCurveValue('large', 'large')});\n    }\n\n    @include mq($from: ultra) {\n      width: calc(100% + #{$gridGutterUltra} - #{spaceCurveValue('large', 'large')});\n    }\n  }\n\n  &__results-wrapper {\n    grid-area: results;\n    display: grid;\n  }\n\n  &__results-heading,\n  &__results-empty,\n  &__results,\n  &__action-more {\n    transition-property: opacity;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__results-heading {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  &__results-item {\n    display: contents;\n  }\n\n  &__actions-wrapper {\n    display: flex;\n    justify-content: center;\n\n    &:not(:empty) {\n      @include spaceCurve('margin-top', 'medium');\n    }\n  }\n\n  &__empty-text {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  &__loader {\n    @include spaceCurve('margin-top', 'medium');\n  }\n\n  /* Teaser variant */\n\n  &--teaser &__actions-wrapper {\n    justify-content: flex-start;\n  }\n\n  &--teaser &__filters-main {\n    &:not(:empty) {\n      padding: 0;\n      background-color: transparent;\n    }\n  }\n\n  &--teaser &__filters-aside {\n    &:not(:empty) {\n      padding: 0;\n      background-color: transparent;\n    }\n  }\n\n  /* Has results shown or aside filter */\n\n  &--has-results-shown &__results-wrapper {\n    @include mq($to: large) {\n      @include spaceCurve('margin-top', 'huge');\n    }\n  }\n\n  &--has-results-shown &__filters-main,\n  &--has-filters-aside &__filters-main {\n    @include mq($from: large) {\n      @include spaceCurve('margin-bottom', 'large');\n    }\n  }\n\n  &--has-results-shown#{&}--teaser &__results-wrapper {\n    @include mq($to: large) {\n      @include spaceCurve('margin-top', 'medium');\n    }\n  }\n\n  &--has-results-shown#{&}--teaser &__filters-main,\n  &--has-filters-aside#{&}--teaser &__filters-main {\n    @include mq($from: large) {\n      @include spaceCurve('margin-bottom', 'medium');\n    }\n  }\n\n  /* Has main and aside filters */\n\n  &--has-filters-main#{&}--has-filters-aside &__filters-main {\n    &:not(:empty) {\n      @include spaceCurve('padding-bottom', 'regular');\n    }\n  }\n\n  &--has-filters-main#{&}--has-filters-aside &__filters-aside {\n    &:not(:empty) {\n      padding-top: 0px;\n    }\n  }\n\n  /* Has hidden main/aside filters */\n\n  &--has-hidden-main-filters &__filters-main {\n    display: none;\n  }\n\n  &--has-hidden-aside-filters &__filters-aside {\n    display: none;\n  }\n\n  &--has-hidden-main-filters &__results-wrapper,\n  &--has-hidden-main-filters#{&}--teaser &__results-wrapper {\n    margin-top: 0px;\n  }\n\n  /* Is loading */\n\n  &--is-loading &__results-heading,\n  &--is-loading &__results-empty,\n  &--is-loading &__results,\n  &--is-loading &__action-more {\n    opacity: 0.5;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Fragment\n} from \"@stencil/core\";\n\nimport { StzhSearchResult } from \"../../index\";\n\nimport axios from 'axios';\nimport { hasSlot, raf } from \"../../utils/utils\";\n\nimport { StzhSearchLocalizedText } from \"./stzh-search.localization\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport debounce from \"lodash/debounce\";\n\nfunction defaultTemplateResult(search: HTMLStzhSearchElement, item: StzhSearchResult): string {\n  return `\n    <stzh-card-${search.variant === \"teaser\" ? \"superteaser\" : \"searchresult\"}\n      href=\"{href}\"\n      dateline=\"{dateline}\"\n      tag=\"{tag}\"\n      topic=\"{topic}\"\n      service=\"{service}\"\n      event-location=\"{eventLocation}\"\n      download-heading=\"{downloadHeading}\"\n      meta='{meta}'\n      breadcrumb-items='{breadcrumbItems}'\n      download-meta='{downloadMeta}'\n      datalist-items='{datalistItems}'\n      ${item.imagePosition && 'image-position=\"{imagePosition}\"'}\n      ${item.download && 'download=\"{download}\"'}\n      style=\"\n        ${item.serviceBackgroundColor ? '--service-background-color: {serviceBackgroundColor};' : ''}\n        ${item.serviceColor ? '--service-color: {serviceColor};' : ''}\n      \"\n    >\n      <div slot=\"heading\">{heading}</div>\n      <div slot=\"description\">{description}</div>\n      ${item.image\n        ?\n          (\n            item.imagePosition === \"right\"\n              ?\n                `<img src=\"${item.image}\" slot=\"image\" />`\n              :\n                `<stzh-ratio ${search.variant === \"teaser\" ? 'ratio=\"2:1\"' : 'ratio=\"21:9\" ratio-small=\"1:1\"'} slot=\"image\"><img src=\"${item.image}\" /></stzh-ratio>`\n          )\n        :\n          ''\n      }\n    </stzh-card-${search.variant === \"teaser\" ? \"superteaser\" : \"searchresult\"}>\n  `;\n}\n\nfunction defaultResultWrapperProps(search: HTMLStzhSearchElement) {\n  return {\n    layout: search.variant === \"teaser\" ? \"teasers\" : \"searchresults\"\n  } as HTMLStzhCardlistElement;\n}\n\n/**\n * @slot filters-main - Slot for main filters\n * @slot filters-aside - Slot for aside filters\n */\n@Component({\n  tag: \"stzh-search\",\n  styleUrl: \"stzh-search.scss\"\n})\nexport class StzhSearch {\n  /** Translation strings */\n  @Prop() localization: StzhSearchLocalizedText;\n\n  /** Variant */\n  @Prop() variant: \"default\" | \"teaser\" = \"default\";\n\n  /** Whether search results should be automatically fetched when a main filters has changed. */\n  @Prop() autofetchMainFilters: boolean = false;\n\n  /** Whether search results should be automatically fetched when a aside filters has changed. */\n  @Prop() autofetchAsideFilters: boolean = false;\n\n  /** Whether to hide the main filters slot */\n  @Prop({ reflect: true }) hideMainFilters: boolean = false;\n\n  /** Whether to hide the aside filters slot */\n  @Prop({ reflect: true }) hideAsideFilters: boolean = false;\n\n  /** API URL */\n  @Prop() api: string = \"\";\n\n  /** Debounce time in ms */\n  @Prop() debounceTime: number = 500;\n\n  /** Numbers of results shown with each load more action */\n  @Prop() limit: number = 6;\n\n  /** Whether search request should be fetched initially with set filters */\n  @Prop() initialFetch: boolean = false;\n\n  /** Whether url query should be updated when filter has changed */\n  @Prop() preventUpdateUrl: boolean = false;\n\n  /** Will be overwritten by api result (`templates.result` or `results[x].html`) */\n  @Prop() templateResult: string | ((search: HTMLStzhSearchElement, item: StzhSearchResult) => string) = defaultTemplateResult;\n\n  /** Element used for list wrapper element */\n  @Prop() templateResultWrapperElement: string | ((search: HTMLStzhSearchElement) => string) = function() {\n    return 'stzh-cardlist';\n  };\n\n  /** Properties applied to list wrapper element */\n  @Prop() templateResultWrapperProps: { [key: string]: any } | ((search: HTMLStzhSearchElement) => { [key: string]: any }) = defaultResultWrapperProps;\n\n  /** Heading level of results heading */\n  @Prop() resultHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Empty text */\n  @Prop() emptyText: string;\n\n  /** Empty link href */\n  @Prop() emptyLinkHref: string;\n\n  /** Empty link label */\n  @Prop() emptyLinkLabel: string;\n\n  @Element() element: HTMLStzhSearchElement;\n\n  @Watch(\"totalCount\")\n  @Watch(\"results\")\n  totalCountWatcher() {\n    this._showMoreLink = this.totalCount > this.results.length;\n  }\n\n  @Watch(\"preventUpdateUrl\")\n  preventUpdateUrlWatcher() {\n    this.updateParams();\n  }\n\n  @State() totalCount: number = 0;\n  private _showMoreLink: boolean = false;\n\n  @State() loading: boolean = false;\n  @State() error: string = \"\";\n\n  @State() results: StzhSearchResult[] = [];\n  @State() resultsHeading: string;\n  @State() hasRequiredParams: boolean = false;\n  @State() firstFetched: boolean = false;\n  @State() initiallyFetched: boolean = false;\n  @State() isDetailsOpen: boolean = false;\n\n  private currentController: AbortController;\n  private params: URLSearchParams;\n  private formElement: HTMLFormElement;\n\n  private renderResultTemplate(html: string, item: StzhSearchResult) {\n    let template = html\n      || (typeof this.templateResult === \"function\"\n        ? this.templateResult(this.element, item)\n        : this.templateResult);\n\n    [\n      \"href\",\n      \"heading\",\n      \"dateline\",\n      \"description\",\n      \"image\",\n      \"imagePosition\",\n      \"tag\",\n      \"topic\",\n      \"service\",\n      \"serviceColor\",\n      \"serviceBackgroundColor\",\n      \"meta\",\n      \"breadcrumbItems\",\n      \"eventLocation\",\n      \"download\",\n      \"downloadHeading\",\n      \"downloadMeta\",\n      \"datalistItems\",\n    ].forEach((property) => {\n      const regex = new RegExp(`\\{${property}\\}`, \"gi\");\n      let value = item[property] || \"\";\n\n      if ([\"meta\", \"breadcrumbItems\", \"downloadMeta\", \"datalistItems\"].includes(property) && value) {\n        value = JSON.stringify(value);\n      }\n\n      template = template.replace(regex, value)\n    });\n\n    return template;\n  }\n\n  private async updateParams(initial: boolean = false) {\n    const updateByFormElements = () => {\n      const formData = new FormData(this.formElement);\n      // @ts-ignore\n      this.params = new URLSearchParams(formData);\n      this.params.set('variant', this.variant);\n    }\n\n    if (initial) {\n      const initialParams = new URLSearchParams(location.search);\n      const search = initialParams.get(\"search\");\n\n      if (search) {\n        this.initialFetch = true;\n        const currentSearchParams = new URLSearchParams(search);\n\n        [...new Set(currentSearchParams.keys())].forEach((key) => {\n          const values = currentSearchParams.getAll(key);\n\n          // value as string/number: input, ... / pagination\n          const valueInputs = Array.from(document.querySelectorAll(`:where(stzh-input,stzh-radiogroup,stzh-chipselect,stzh-amount,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[name=\"${key}\"]`)) as\n            | HTMLStzhInputElement[]\n            | HTMLStzhRadiogroupElement[]\n            | HTMLStzhChipselectElement[]\n            | HTMLStzhAmountElement[]\n            | HTMLStzhDatepickerElement[]\n            | HTMLStzhMonthyearpickerElement[]\n            | HTMLStzhTimepickerElement[]\n            | HTMLStzhPaginationElement[]\n            | HTMLStzhToggleElement[]\n\n          // value as array: checkboxgroup\n          const valueArrayInputs = Array.from(document.querySelectorAll(`:where(stzh-checkboxgroup)[name=\"${key}\"]`)) as\n            | HTMLStzhCheckboxgroupElement[]\n\n          // items as array: dropdown\n          const itemsArrayInputs = Array.from(document.querySelectorAll(`:where(stzh-dropdown)[name=\"${key}\"]`)) as\n            | HTMLStzhDropdownElement[]\n\n          valueInputs.forEach((input: HTMLStzhInputElement | HTMLStzhRadiogroupElement | HTMLStzhChipselectElement | HTMLStzhAmountElement | HTMLStzhDatepickerElement | HTMLStzhMonthyearpickerElement | HTMLStzhTimepickerElement | HTMLStzhPaginationElement | HTMLStzhToggleElement) => {\n            input.value = values[0];\n          });\n\n          valueArrayInputs.forEach((input: HTMLStzhCheckboxgroupElement) => {\n            input.value = values;\n          });\n\n          itemsArrayInputs.forEach((input: HTMLStzhDropdownElement) => {\n            input.items = values;\n          });\n        });\n      }\n\n    }\n\n    await raf();\n    updateByFormElements();\n\n    // console.log(this.params.toString());\n\n    let hasRequiredParams = true;\n\n    const requiredInputFields = Array.from(this.element.querySelectorAll(\":where(stzh-input)[required]\")) as\n      | HTMLStzhInputElement[];\n\n    const requiredDropdownFields = Array.from(this.element.querySelectorAll(\":where(stzh-dropdown)[required]\")) as\n      | HTMLStzhDropdownElement[];\n\n    const requiredMonthyearpickers = Array.from(this.element.querySelectorAll(\":where(stzh-monthyearpicker)[required]\")) as\n      | HTMLStzhMonthyearpickerElement[]\n\n    const requiredFields = Array.from(this.element.querySelectorAll(\":where(stzh-amount,stzh-radiogroup,stzh-chipselect,stzh-datepicker,stzh-monthyearpicker,stzh-timepicker,stzh-pagination,stzh-toggle)[required]\")) as\n      | HTMLStzhAmountElement[]\n      | HTMLStzhRadiogroupElement[]\n      | HTMLStzhChipselectElement[]\n      | HTMLStzhDatepickerElement[]\n      | HTMLStzhTimepickerElement[]\n      | HTMLStzhPaginationElement[]\n      | HTMLStzhToggleElement[];\n\n    const requiredCheckboxFields = Array.from(this.element.querySelectorAll(\":where(stzh-checkbox)[required]\")) as\n      | HTMLStzhCheckboxElement[];\n\n    requiredCheckboxFields.forEach((field: HTMLStzhCheckboxElement) => {\n      const invalid = !field.checked;\n\n      if (!initial) {\n        field.invalid = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    requiredInputFields.forEach((field: HTMLStzhInputElement) => {\n      const invalid = field.value === \"\"\n        || (field.minlength && field.minlength > field.value.length)\n        || (field.maxlength && field.maxlength < field.value.length);\n\n      if (!initial) {\n        field.invalid = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    requiredDropdownFields.forEach((field: HTMLStzhDropdownElement) => {\n      const invalid = field.items.length === 0;\n\n      if (!initial) {\n        field.invalid = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    requiredFields.forEach((field: HTMLStzhAmountElement | HTMLStzhRadiogroupElement | HTMLStzhCheckboxElement | HTMLStzhChipselectElement | HTMLStzhDatepickerElement | HTMLStzhTimepickerElement | HTMLStzhPaginationElement | HTMLStzhToggleElement) => {\n      const invalid = field.value.toString().length === 0;\n\n      if (!initial) {\n        field.invalid = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    requiredMonthyearpickers.forEach((field: HTMLStzhMonthyearpickerElement) => {\n      const invalid = field.value.toString().length === 0;\n\n      if (!initial) {\n        field.invalidYear = invalid;\n        field.invalidMonth = invalid;\n      }\n\n      if (invalid) {\n        hasRequiredParams = false;\n      }\n    });\n\n    this.hasRequiredParams = hasRequiredParams;\n  }\n\n  private fetch = async (append: boolean = false, initial: boolean = false) => {\n    if (this.currentController) {\n      this.currentController.abort()\n    }\n\n    if (!this.hasRequiredParams && !append) {\n      this.loading = false;\n      return;\n    }\n\n    this.loading = true;\n    this.error = \"\";\n\n    let apiUrl = this.api.replace(/\\{lang\\}/gi, this.localization.$locale);\n    let limit = this.limit.toString();\n\n    this.params.set('offset', append ? this.results.length.toString() : '0');\n\n    if (initial) {\n      const search = new URLSearchParams(location.search).get(\"search\");\n\n      if (search) {\n        const urlLimit = new URLSearchParams(search).get(\"limit\");\n\n        if (urlLimit) {\n          limit = urlLimit;\n        }\n      }\n    }\n\n    this.params.set('limit', limit);\n\n    this.currentController = new AbortController();\n\n    let data: {\n      error?: boolean\n      message?: string\n      templates?: {\n        result: string\n      },\n      meta?: {\n        total: number\n      },\n      resultsHeading?: string\n      results?: StzhSearchResult[]\n    } = {};\n\n    try {\n      // load data from API\n      const response = await axios(apiUrl, {\n        params: this.params,\n        signal: this.currentController.signal\n      });\n\n      data = response.data;\n    } catch (error) {\n      this.error = this.localization.error;\n    }\n\n    this.resultsHeading = data.resultsHeading || \"\";\n    this.totalCount = data.meta?.total || 0;\n\n    if (data.error) {\n      this.error = data.message || this.localization.error;\n    }\n\n    if (data.results) {\n      if (append) {\n        this.results = [...this.results, ...data.results.map(item => ({\n          ...item,\n          html: this.renderResultTemplate(item.html || data.templates?.result, item)\n        }))];\n      } else {\n        this.results = data.results.map(item => ({\n          ...item,\n          html: this.renderResultTemplate(item.html || data.templates?.result, item)\n        }));\n      }\n    }\n\n    if (!initial && !this.preventUpdateUrl) {\n      const newUrlParams = new URLSearchParams(location.search);\n      const searchParams = new URLSearchParams(this.params);\n\n      searchParams.delete(\"offset\");\n      searchParams.set(\"limit\", this.results.length.toString());\n      newUrlParams.set(\"search\", searchParams.toString());\n\n      // console.log(location.search, searchParams.toString(), newUrlParams.toString());\n\n      window.history.replaceState(null, \"\", `${location.pathname}?${newUrlParams}`)\n    }\n\n    if (initial || !this.firstFetched) {\n      this.loading = false;\n    } else {\n      // to be able to see loading effect we delay turning off loading state\n      window.setTimeout(() => {\n        this.loading = false;\n      }, this.debounceTime);\n    }\n\n    this.firstFetched = true;\n  }\n\n  private debouncedFetch = debounce(this.fetch, this.debounceTime);\n\n  private handleMainFilterChange = async () => {\n    if (this.autofetchMainFilters) {\n      await this.updateParams();\n      this.debouncedFetch();\n    }\n  }\n\n  private handleAsideFilterChange = async () => {\n    if (this.autofetchAsideFilters) {\n      await this.updateParams();\n      this.debouncedFetch();\n    }\n  }\n\n  private handleFormSubmit = async (event: Event) => {\n    event.preventDefault();\n\n    await this.updateParams();\n    this.fetch();\n  }\n\n  private handleMoreClick = () => {\n    this.fetch(true);\n  }\n\n  private handleMediaChange = () => {\n    this.isDetailsOpen = media(\"large\").matches;\n  }\n\n  private handleFormReset = async () => {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(async () => {\n        await this.updateParams();\n      });\n    });\n  }\n\n  async componentDidLoad() {\n    // update params initially to get hidden filters\n    // and set initialFetch to true if search params exist\n    await this.updateParams(true);\n\n    if (this.initialFetch) {\n      await this.fetch(false, true);\n      this.initiallyFetched = true;\n    } else {\n      this.initiallyFetched = true;\n    }\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"search\");\n    }\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.handleMediaChange);\n    this.handleMediaChange();\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.handleMediaChange);\n  }\n\n  render() {\n    const filtersMainUsed = hasSlot(this.element, 'filters-main');\n    const filtersAsideUsed = hasSlot(this.element, 'filters-aside');\n\n    const resultsShown = (this.hasRequiredParams || this.firstFetched) && this.firstFetched && this.initiallyFetched;\n\n    const classes = {\n      \"stzh-search\": true,\n      \"stzh-search--has-filters-main\": filtersMainUsed,\n      \"stzh-search--has-filters-aside\": filtersAsideUsed,\n      \"stzh-search--has-hidden-main-filters\": this.hideMainFilters,\n      \"stzh-search--has-hidden-aside-filters\": this.hideAsideFilters,\n      \"stzh-search--has-results-shown\": resultsShown,\n      \"stzh-search--has-error-shown\": !!this.error,\n      \"stzh-search--is-loading\": this.loading,\n      [`stzh-search--${this.variant}`]: !!this.variant,\n    };\n\n    const WrapperElement = typeof this.templateResultWrapperElement === \"function\"\n      ? this.templateResultWrapperElement(this.element)\n      : this.templateResultWrapperElement;\n\n    const wrapperProps = typeof this.templateResultWrapperProps === \"function\"\n      ? this.templateResultWrapperProps(this.element)\n      : this.templateResultWrapperProps;\n\n    return (\n      <Host has-aside-filters={filtersAsideUsed}>\n        <form\n          ref={(el) => (this.formElement = el as HTMLFormElement)}\n          novalidate\n          class={classes}\n          onSubmit={this.handleFormSubmit}\n          onReset={this.handleFormReset}\n        >\n          {/* @ts-ignore */}\n          <div class=\"stzh-search__filters-main\" onStzhChange={this.handleMainFilterChange}>\n            <slot name=\"filters-main\"></slot>\n          </div>\n\n          {filtersAsideUsed &&\n            <Fragment>\n              {/* @ts-ignore */}\n              <div class=\"stzh-search__filters-aside\" onStzhChange={this.handleAsideFilterChange}>\n                <div class=\"stzh-search__filters-aside-inner\">\n                  <div class=\"stzh-search__filters-aside-heading\">\n                    {this.localization.moreFilter}\n                  </div>\n                  <stzh-details\n                    open={this.isDetailsOpen}\n                    class=\"stzh-search__filters-aside-details\"\n                  >\n                    <stzh-button\n                      class=\"stzh-search__filters-aside-details-trigger\"\n                      variant=\"tertiary-plain\"\n                      size=\"small\"\n                      noPaddingLeft={true}\n                      showToggleIcon={true}\n                      iconPosition=\"right\"\n                      label={this.localization.moreFilter}\n                    ></stzh-button>\n                    <div slot=\"content\">\n                      <slot name=\"filters-aside\"></slot>\n                    </div>\n                  </stzh-details>\n                </div>\n              </div>\n            </Fragment>\n          }\n\n          <div class=\"stzh-search__results-wrapper\">\n            {resultsShown &&\n              <Fragment>\n                {this.results.length === 0\n                  ?\n                  <Fragment>\n                    {this.variant !== \"teaser\" && this.resultsHeading &&\n                      <stzh-heading\n                        class=\"stzh-search__results-heading\"\n                        curve=\"h3\"\n                        level={this.resultHeadingLevel}\n                        innerHTML={this.resultsHeading}\n                      ></stzh-heading>\n                    }\n\n                    {this.emptyText &&\n                      <stzh-text class=\"stzh-search__empty-text\" innerHTML={this.emptyText}></stzh-text>\n                    }\n\n                    {this.emptyLinkLabel && this.emptyLinkHref &&\n                      <div class=\"stzh-search__empty-link-wrapper\">\n                        <stzh-link\n                          href={this.emptyLinkHref}\n                          label={this.emptyLinkLabel}\n                        ></stzh-link>\n                      </div>\n                    }\n                  </Fragment>\n                  :\n                  <Fragment>\n                    {this.variant !== \"teaser\" && this.resultsHeading &&\n                      <stzh-heading\n                        class=\"stzh-search__results-heading\"\n                        curve=\"h3\"\n                        level={this.resultHeadingLevel}\n                        innerHTML={this.resultsHeading}\n                      ></stzh-heading>\n                    }\n\n                    <WrapperElement class=\"stzh-search__results\" {...wrapperProps}>\n                      {this.results.map((result) =>\n                        <div class=\"stzh-search__results-item\" innerHTML={result.html || \"\"}></div>\n                      )}\n                    </WrapperElement>\n\n                    <div class=\"stzh-search__actions-wrapper\">\n                      {this._showMoreLink &&\n                        <stzh-button\n                          variant=\"secondary\"\n                          class=\"stzh-search__action-more\"\n                          label={this.localization.showMore}\n                          onClick={this.handleMoreClick}\n                          a11yDisabled={this.loading}\n                        >\n                        </stzh-button>\n                      }\n                    </div>\n                  </Fragment>\n                }\n              </Fragment>\n            }\n\n            {this.error &&\n              <div class=\"stzh-search__error\">\n                <stzh-message type=\"error\" label={this.error}></stzh-message>\n              </div>\n            }\n\n            {this.loading && <stzh-loader class=\"stzh-search__loader\"></stzh-loader>}\n          </div>\n\n          <slot></slot>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-3ce84a88.entry.js

@@ -0,0 +1,2 @@
+import{h as t,r as a,c as e,a as s,g as n}from"./p-c7bfac7a.js";import{i,b as r,g as l,c as o,p as h,D as c,d,a as z,e as p,s as f,f as u,h as v,j as m,k as g,l as b}from"./p-23d404e1.js";const y=({focusedDay:a,today:e,day:s,onDaySelect:n,onKeyboardNavigation:l,focusedDayRef:o,disabled:h,inRange:c,isSelected:d,dateFormatter:z})=>{const p=i(s,e);const f=r(s,a);const u=i(s,a);const v=!c;function m(t){n(t,s)}return t("button",{class:{"stzh-calendar__day":true,"is-outside":v,"is-today":p,"is-month":f,"is-disabled":h},tabIndex:u?0:-1,onClick:m,onKeyDown:l,"aria-disabled":h?"true":undefined,disabled:v,type:"button","aria-pressed":d?"true":"false","aria-current":p?"date":undefined,"s-object-id":z.format(s),ref:t=>{if(u&&t&&o){o(t)}}},t("span",{"aria-hidden":"true"},s.getDate()),t("span",{class:"stzh-calendar__vhidden"},z.format(s)))};function _(t,a){const e=[];for(let s=0;s<t.length;s+=a){e.push(t.slice(s,s+a))}return e}function w(t,a,e){return t.map(((s,n)=>{const i=(n+a)%t.length;return e(t[i])}))}const x=({selectedDate:a,focusedDate:e,labelledById:s,localization:n,firstDayOfWeek:r,min:h,max:c,dateFormatter:d,isDateDisabled:z,onDateSelect:p,onKeyboardNavigation:f,focusedDayRef:u})=>{const v=new Date;const m=l(e,r);return t("table",{class:"stzh-calendar__table","aria-labelledby":s},t("thead",null,t("tr",null,w(n.$globals.dayNames,r,(a=>t("th",{class:"stzh-calendar__table-header",scope:"col"},t("span",{"aria-hidden":"true"},a.substring(0,2)),t("span",{class:"stzh-calendar__vhidden"},a)))))),t("tbody",null,_(m,7).map((s=>t("tr",{class:"stzh-calendar__row"},s.map((s=>t("td",{class:"stzh-calendar__cell"},t(y,{day:s,today:v,focusedDay:e,isSelected:i(s,a),disabled:z(s),inRange:o(s,h,c),onDaySelect:p,dateFormatter:d,onKeyboardNavigation:f,focusedDayRef:u})))))))))};const k=".sc-stzh-calendar-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-calendar-h{display:none}.sc-stzh-calendar-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-calendar-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-calendar-h *.sc-stzh-calendar,.sc-stzh-calendar-h *.sc-stzh-calendar::before,.sc-stzh-calendar-h *.sc-stzh-calendar::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-calendar-h .has-focus.sc-stzh-calendar{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-calendar-h .stzh-fylingfocus-focused.sc-stzh-calendar{outline-style:none !important}.sc-stzh-calendar-h .stzh-fylingfocus-focused.sc-stzh-calendar::-moz-focus-inner{border:0 !important}.sc-stzh-calendar-h{--padding-top:var(--stzh-space-small);--padding-bottom:var(--stzh-space-small);--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);width:var(--stzh-calendar-width)}.stzh-calendar.sc-stzh-calendar{--stzh-description-min-height:initial;display:flex;position:relative;text-align:left;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;overflow:clip;padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-calendar__wrapper.sc-stzh-calendar{width:100%}.stzh-calendar__table.sc-stzh-calendar{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);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);border-collapse:collapse;border-spacing:0;text-align:center;width:100%}.stzh-calendar__table-header.sc-stzh-calendar,.stzh-calendar__cell.sc-stzh-calendar{padding:var(--stzh-space-xxxsmall)}.stzh-calendar__table-header.sc-stzh-calendar:first-child,.stzh-calendar__cell.sc-stzh-calendar:first-child{padding-left:0}.stzh-calendar__table-header.sc-stzh-calendar:last-child,.stzh-calendar__cell.sc-stzh-calendar:last-child{padding-right:0}.stzh-calendar__row.sc-stzh-calendar:last-child .stzh-calendar__cell.sc-stzh-calendar{padding-bottom:0}.stzh-calendar__table-header.sc-stzh-calendar{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);-webkit-text-decoration-line:none;text-decoration-line:none;padding-top:0;padding-bottom:0;width:2.75rem;height:2.5rem}.stzh-calendar__cell.sc-stzh-calendar{text-align:center}.stzh-calendar__day.sc-stzh-calendar{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);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);-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;cursor:pointer;display:inline-block;font-variant-numeric:tabular-nums;width:2.5rem;height:2.5rem;text-align:center;vertical-align:middle;transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-calendar__day.is-today.sc-stzh-calendar{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary70)}.stzh-calendar__day.sc-stzh-calendar:hover{background:var(--stzh-color-grey20)}.stzh-calendar__day[aria-pressed=true].sc-stzh-calendar{background:var(--stzh-color-secondary30);color:var(--stzh-color-primary70)}.stzh-calendar__day.sc-stzh-calendar:active{background:var(--stzh-color-secondary30);color:var(--stzh-color-primary70)}.stzh-calendar__day.sc-stzh-calendar:not(.is-month),.stzh-calendar__day[aria-disabled=true].sc-stzh-calendar{background:transparent;color:var(--stzh-color-grey60);cursor:default}.stzh-calendar__day.is-disabled.sc-stzh-calendar{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.stzh-calendar__day.is-outside.sc-stzh-calendar{color:var(--stzh-color-grey60);background:var(--stzh-color-grey20);cursor:default;pointer-events:none;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-calendar__header.sc-stzh-calendar{align-items:center;display:flex;justify-content:space-between;width:100%}.stzh-calendar__nav.sc-stzh-calendar{display:flex;align-items:center}.stzh-calendar__nav.is-dropdowns.sc-stzh-calendar{gap:calc(var(--stzh-space-xsmall) + var(--stzh-space-small));margin-left:var(--stzh-space-small)}.stzh-calendar.sc-stzh-calendar stzh-dropdown.stzh-calendar__dropdown.sc-stzh-calendar{--popover-width:100%;--popover-height:calc(100% - var(--stzh-form-input-small-height) - var(--padding-top));--popover-max-height:initial;position:static}.stzh-calendar__select-wrapper.sc-stzh-calendar{display:inline-flex;position:relative}.stzh-calendar__select-wrapper.sc-stzh-calendar span.sc-stzh-calendar{margin-right:0px}.stzh-calendar__select.sc-stzh-calendar{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);cursor:pointer;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2;border-radius:var(--stzh-form-input-border-radius)}.stzh-calendar__select-label.sc-stzh-calendar{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);-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;align-items:center;border-radius:var(--stzh-form-input-border-radius);color:var(--stzh-color-primary70);display:flex;gap:var(--stzh-space-xsmall);padding:0;padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-xsmall);position:relative;width:100%;min-height:2.5rem;z-index:1}.stzh-calendar__select-icon.sc-stzh-calendar{--size:var(--stzh-icon-size-xsmall)}.stzh-calendar__vhidden.sc-stzh-calendar{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}";function D(t,a){var e=[];for(var s=t;s<=a;s++){e.push(s)}return e}const S={TAB:9,ESC:27,SPACE:32,PAGE_UP:33,PAGE_DOWN:34,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};let F=0;const O=class{constructor(t){a(this,t);this.stzhChange=e(this,"stzhChange",7);this.initialTouchX=null;this.initialTouchY=null;this.enableActiveFocus=()=>{this.activeFocus=true};this.disableActiveFocus=()=>{this.activeFocus=false};this.handleTouchStart=t=>{const a=t.changedTouches[0];this.initialTouchX=a.pageX;this.initialTouchY=a.pageY};this.handleTouchEnd=t=>{const a=t.changedTouches[0];const e=a.pageX-this.initialTouchX;const s=a.pageY-this.initialTouchY;const n=70;const i=Math.abs(e)>=n&&Math.abs(s)<=n;if(i){this.addMonths(e<0?1:-1)}this.initialTouchY=null;this.initialTouchX=null};this.handleNextMonthClick=t=>{t.preventDefault();this.addMonths(1)};this.handlePreviousMonthClick=t=>{t.preventDefault();this.addMonths(-1)};this.handleKeyboardNavigation=t=>{var a=true;switch(t.keyCode){case S.RIGHT:this.addDays(1);break;case S.LEFT:this.addDays(-1);break;case S.DOWN:this.addDays(7);break;case S.UP:this.addDays(-7);break;case S.PAGE_UP:if(t.shiftKey){this.addYears(-1)}else{this.addMonths(-1)}break;case S.PAGE_DOWN:if(t.shiftKey){this.addYears(1)}else{this.addMonths(1)}break;case S.HOME:this.startOfWeek();break;case S.END:this.endOfWeek();break;default:a=false}if(a){t.preventDefault();this.enableActiveFocus()}};this.handleDaySelect=(t,a)=>{const e=o(a,h(this.min),h(this.max));const s=!this.isDateDisabled(a);if(e&&s){this.setDate(a);this.stzhChange.emit({component:"stzh-calendar",value:this.value,valueAsDate:a})}else{this.setFocusedDay(a)}};this.handleMonthSelect=t=>{const a=Array.isArray(t.detail.value)?t.detail.value[0]:t.detail.value;this.setMonth(parseInt(a,10))};this.handleYearSelect=t=>{const a=Array.isArray(t.detail.value)?t.detail.value[0]:t.detail.value;this.setYear(parseInt(a,10))};this.processFocusedDayNode=t=>{if(this.activeFocus){setTimeout((()=>t.focus()),0)}};this.value="";this.min="";this.max="";this.firstDayOfWeek=c.Monday;this.localization=undefined;this.isDateDisabled=()=>false;this.prevMonthAnalyticsId=undefined;this.nextMonthAnalyticsId=undefined;this.activeFocus=false;this.focusedDay=new Date}createDateFormatters(){if(this.localization){this.dateFormatShort=new Intl.DateTimeFormat(this.localization.$locale,{day:"numeric",month:"long"})}}valueWatcher(t){if(t){this.setFocusedDay(h(this.value))}else{this.setFocusedDay(new Date)}}async setFocusedDay(t){this.focusedDay=d(t,h(this.min),h(this.max))}async setDate(t){this.value=z(t)}addDays(t){this.setFocusedDay(p(this.focusedDay,t))}addMonths(t){this.setMonth(this.focusedDay.getMonth()+t)}addYears(t){this.setYear(this.focusedDay.getFullYear()+t)}startOfWeek(){this.setFocusedDay(f(this.focusedDay,this.firstDayOfWeek))}endOfWeek(){this.setFocusedDay(u(this.focusedDay,this.firstDayOfWeek))}setMonth(t){const a=v(m(this.focusedDay),t);const e=g(a);const s=v(this.focusedDay,t);this.setFocusedDay(d(s,a,e))}setYear(t){const a=b(m(this.focusedDay),t);const e=g(a);const s=b(this.focusedDay,t);this.setFocusedDay(d(s,a,e))}async componentWillLoad(){this.dialogLabelId=`stzh-calendar-dialog-${F}`;F++;this.valueWatcher(this.value);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"calendar")}}connectedCallback(){this.createDateFormatters()}render(){const a=h(this.value);const e=(a||this.focusedDay).getFullYear();const n=this.focusedDay.getMonth();const i=this.focusedDay.getFullYear();const r=h(this.min);const l=h(this.max);const c=r!=null&&r.getMonth()===n&&r.getFullYear()===i;const d=l!=null&&l.getMonth()===n&&l.getFullYear()===i;const z=r?r.getFullYear():e-10;const p=l?l.getFullYear():e+10;const f=this.localization.$globals.monthNames.map(((t,a)=>({value:a.toString(),text:t,disabled:!o(new Date(i,a,1),r?m(r):null,l?g(l):null)})));const u=D(z,p).map((t=>({value:t.toString(),text:t.toString()})));return t(s,null,t("div",{class:{"stzh-calendar":true},onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd},t("div",{class:"stzh-calendar__wrapper"},t("div",{class:"stzh-calendar__header",onFocusin:this.disableActiveFocus},t("div",{class:"stzh-calendar__nav is-dropdowns"},t("h2",{id:this.dialogLabelId,class:"stzh-calendar__vhidden","aria-live":"polite","aria-atomic":"true"},this.localization.$globals.monthNames[n],this.focusedDay.getFullYear()),t("stzh-dropdown",{class:"stzh-calendar__dropdown",variant:"plain",size:"small",inline:true,"popover-fullwidth":"horizontal",noSearch:true,openOnFocus:false,items:[n.toString()],options:f,label:this.localization.monthSelectLabel,labelHidden:true,onStzhChange:this.handleMonthSelect}),t("stzh-dropdown",{class:"stzh-calendar__dropdown",variant:"plain",size:"small",inline:true,"popover-fullwidth":"horizontal",noSearch:true,openOnFocus:false,items:[i.toString()],options:u,label:this.localization.yearSelectLabel,labelHidden:true,onStzhChange:this.handleYearSelect})),t("div",{class:"stzh-calendar__nav"},t("stzh-button",{class:"stzh-calendar__prev",variant:"tertiary",size:"small",icon:"arrow-left",iconOnly:true,onClick:this.handlePreviousMonthClick,disabled:c,type:"button",a11yLabel:this.localization.prevMonthLabel,analyticsId:this.prevMonthAnalyticsId||this.localization.prevMonthLabel}),t("stzh-button",{class:"stzh-calendar__next",variant:"tertiary",size:"small",icon:"arrow-right",iconOnly:true,onClick:this.handleNextMonthClick,disabled:d,type:"button",a11yLabel:this.localization.nextMonthLabel,analyticsId:this.nextMonthAnalyticsId||this.localization.nextMonthLabel}))),t(x,{dateFormatter:this.dateFormatShort,selectedDate:a,focusedDate:this.focusedDay,onDateSelect:this.handleDaySelect,onKeyboardNavigation:this.handleKeyboardNavigation,labelledById:this.dialogLabelId,localization:this.localization,firstDayOfWeek:this.firstDayOfWeek,focusedDayRef:this.processFocusedDayNode,min:r,max:l,isDateDisabled:this.isDateDisabled}))))}get element(){return n(this)}static get watchers(){return{localization:["createDateFormatters"],value:["valueWatcher"]}}};O.style=k;export{O as stzh_calendar};
+//# sourceMappingURL=p-3ce84a88.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["StzhCalendarDay","focusedDay","today","day","onDaySelect","onKeyboardNavigation","focusedDayRef","disabled","inRange","isSelected","dateFormatter","isToday","isEqual","isMonth","isEqualMonth","isFocused","isOutsideRange","handleClick","e","h","class","tabIndex","onClick","onKeyDown","undefined","type","format","ref","el","getDate","chunk","array","chunkSize","result","i","length","push","slice","mapWithOffset","startingOffset","mapFn","map","_","adjustedIndex","StzhCalendarMonth","selectedDate","focusedDate","labelledById","localization","firstDayOfWeek","min","max","isDateDisabled","onDateSelect","Date","days","getViewOfMonth","$globals","dayNames","dayName","scope","substring","week","stzhCalendarCss","range","from","to","keyCode","TAB","ESC","SPACE","PAGE_UP","PAGE_DOWN","END","HOME","LEFT","UP","RIGHT","DOWN","calendarCounter","StzhCalendar","this","initialTouchX","initialTouchY","enableActiveFocus","activeFocus","disableActiveFocus","handleTouchStart","event","touch","changedTouches","pageX","pageY","handleTouchEnd","distX","distY","threshold","isHorizontalSwipe","Math","abs","addMonths","handleNextMonthClick","preventDefault","handlePreviousMonthClick","handleKeyboardNavigation","handled","addDays","shiftKey","addYears","startOfWeek","endOfWeek","handleDaySelect","_event","isInRange","parseISODate","isAllowed","setDate","stzhChange","emit","component","value","valueAsDate","setFocusedDay","handleMonthSelect","Array","isArray","detail","setMonth","parseInt","handleYearSelect","setYear","processFocusedDayNode","element","setTimeout","focus","DaysOfWeek","Monday","createDateFormatters","dateFormatShort","Intl","DateTimeFormat","$locale","month","valueWatcher","newValue","clamp","date","printISODate","months","getMonth","years","getFullYear","startOfMonth","endOfMonth","year","componentWillLoad","dialogLabelId","window","stzhComponents","utils","fetchTranslations","connectedCallback","render","selectedYear","focusedMonth","focusedYear","minDate","maxDate","prevMonthDisabled","nextMonthDisabled","minYear","maxYear","monthDropdownOptions","monthNames","toString","text","yearDropdownOptions","Host","onTouchStart","onTouchEnd","onFocusin","id","variant","size","inline","noSearch","openOnFocus","items","options","label","monthSelectLabel","labelHidden","onStzhChange","yearSelectLabel","icon","iconOnly","a11yLabel","prevMonthLabel","analyticsId","prevMonthAnalyticsId","nextMonthLabel","nextMonthAnalyticsId"],"sources":["src/components/stzh-calendar/stzh-calendar-day.tsx","src/components/stzh-calendar/stzh-calendar-month.tsx","src/components/stzh-calendar/stzh-calendar.scss?tag=stzh-calendar&encapsulation=scoped","src/components/stzh-calendar/stzh-calendar.tsx"],"sourcesContent":["import { h, FunctionalComponent } from \"@stencil/core\"\nimport { isEqual, isEqualMonth } from \"../../utils/date-utils\"\n\nexport type StzhCalendarDayProps = {\n  focusedDay: Date\n  today: Date\n  day: Date\n  disabled: boolean\n  inRange: boolean\n  isSelected: boolean\n  dateFormatter: Intl.DateTimeFormat\n  onDaySelect: (event: MouseEvent, day: Date) => void\n  onKeyboardNavigation: (event: KeyboardEvent) => void\n  focusedDayRef?: (element: HTMLElement) => void\n}\n\nexport const StzhCalendarDay: FunctionalComponent<StzhCalendarDayProps> = ({\n  focusedDay,\n  today,\n  day,\n  onDaySelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n  disabled,\n  inRange,\n  isSelected,\n  dateFormatter,\n}) => {\n  const isToday = isEqual(day, today)\n  const isMonth = isEqualMonth(day, focusedDay)\n  const isFocused = isEqual(day, focusedDay)\n  const isOutsideRange = !inRange\n\n  function handleClick(e) {\n    onDaySelect(e, day)\n  }\n\n  return (\n    <button\n      class={{\n        \"stzh-calendar__day\": true,\n        \"is-outside\": isOutsideRange,\n        \"is-today\": isToday,\n        \"is-month\": isMonth,\n        \"is-disabled\": disabled,\n      }}\n      tabIndex={isFocused ? 0 : -1}\n      onClick={handleClick}\n      onKeyDown={onKeyboardNavigation}\n      aria-disabled={disabled ? \"true\" : undefined}\n      disabled={isOutsideRange}\n      type=\"button\"\n      aria-pressed={isSelected ? \"true\" : \"false\"}\n      aria-current={isToday ? \"date\" : undefined}\n      s-object-id={dateFormatter.format(day)}\n      ref={el => {\n        if (isFocused && el && focusedDayRef) {\n          focusedDayRef(el)\n        }\n      }}\n    >\n      <span aria-hidden=\"true\">{day.getDate()}</span>\n      <span class=\"stzh-calendar__vhidden\">{dateFormatter.format(day)}</span>\n    </button>\n  )\n}\n","import { h, FunctionalComponent } from \"@stencil/core\"\nimport { getViewOfMonth, inRange, DaysOfWeek, isEqual } from \"../../utils/date-utils\"\n\nimport { StzhCalendarLocalizedText } from \"./stzh-calendar.localization\"\nimport { StzhCalendarDay, StzhCalendarDayProps } from \"./stzh-calendar-day\"\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nfunction chunk<T>(array: T[], chunkSize: number): T[][] {\n  const result = []\n\n  for (let i = 0; i < array.length; i += chunkSize) {\n    result.push(array.slice(i, i + chunkSize))\n  }\n\n  return result\n}\n\nfunction mapWithOffset<T, U>(array: T[], startingOffset: number, mapFn: (item: T) => U): U[] {\n  return array.map((_, i) => {\n    const adjustedIndex = (i + startingOffset) % array.length\n    return mapFn(array[adjustedIndex])\n  })\n}\n\ntype StzhCalendarMonthProps = {\n  selectedDate: Date\n  focusedDate: Date\n  labelledById: string\n  localization: StzhCalendarLocalizedText\n  firstDayOfWeek: DaysOfWeek\n  min?: Date\n  max?: Date\n  dateFormatter: Intl.DateTimeFormat\n  isDateDisabled: StzhCalendarDateDisabledPredicate\n  onDateSelect: StzhCalendarDayProps[\"onDaySelect\"]\n  onKeyboardNavigation: StzhCalendarDayProps[\"onKeyboardNavigation\"]\n  focusedDayRef: (element: HTMLElement) => void\n}\n\nexport const StzhCalendarMonth: FunctionalComponent<StzhCalendarMonthProps> = ({\n  selectedDate,\n  focusedDate,\n  labelledById,\n  localization,\n  firstDayOfWeek,\n  min,\n  max,\n  dateFormatter,\n  isDateDisabled,\n  onDateSelect,\n  onKeyboardNavigation,\n  focusedDayRef,\n}) => {\n  const today = new Date()\n  const days = getViewOfMonth(focusedDate, firstDayOfWeek)\n\n  return (\n    <table class=\"stzh-calendar__table\" aria-labelledby={labelledById}>\n      <thead>\n        <tr>\n          {mapWithOffset(localization.$globals.dayNames, firstDayOfWeek, dayName => (\n            <th class=\"stzh-calendar__table-header\" scope=\"col\">\n              <span aria-hidden=\"true\">{dayName.substring(0, 2)}</span>\n              <span class=\"stzh-calendar__vhidden\">{dayName}</span>\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {chunk(days, 7).map(week => (\n          <tr class=\"stzh-calendar__row\">\n            {week.map(day => (\n              <td class=\"stzh-calendar__cell\">\n                <StzhCalendarDay\n                  day={day}\n                  today={today}\n                  focusedDay={focusedDate}\n                  isSelected={isEqual(day, selectedDate)}\n                  disabled={isDateDisabled(day)}\n                  inRange={inRange(day, min, max)}\n                  onDaySelect={onDateSelect}\n                  dateFormatter={dateFormatter}\n                  onKeyboardNavigation={onKeyboardNavigation}\n                  focusedDayRef={focusedDayRef}\n                />\n              </td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n","/**\n * @prop --background: Background color of calendar\n * @prop --padding-top: Padding top of calendar\n * @prop --padding-bottom: Padding bottom color of calendar\n * @prop --padding-left: Padding left color of calendar\n * @prop --padding-right: Padding right color of calendar\n * @prop --background-color: Background color of calendar\n */\n\n:host {\n  --padding-top: #{space('small')};\n  --padding-bottom: #{space('small')};\n  --padding-left: #{space('xsmall')};\n  --padding-right: #{space('xsmall')};\n\n  width: #{$calendarWidth};\n}\n\n.stzh-calendar {\n  --stzh-description-min-height: initial;\n\n  display: flex;\n  position: relative;\n  text-align: left;\n  touch-action: pan-y;\n  user-select: none;\n  overflow: hidden;\n  overflow: clip;\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\n  &__wrapper {\n    width: 100%;\n  }\n\n  &__table {\n    @include font;\n    @include fontSize('milli');\n    border-collapse: collapse;\n    border-spacing: 0;\n    text-align: center;\n    width: 100%;\n  }\n\n  &__table-header,\n  &__cell {\n    padding: space('xxxsmall');\n\n    &:first-child {\n      padding-left: 0;\n    }\n\n    &:last-child {\n      padding-right: 0;\n    }\n  }\n\n  &__row:last-child &__cell {\n    padding-bottom: 0;\n  }\n\n  &__table-header {\n    @include font;\n    @include fontSize('nano');\n    text-decoration-line: none;\n    padding-top: 0;\n    padding-bottom: 0;\n    width: 44px;\n    height: 40px;\n  }\n\n  &__cell {\n    text-align: center;\n  }\n\n  &__day {\n    @include font;\n    @include fontSize('milli');\n    appearance: none;\n    background: transparent;\n    border: 0;\n    cursor: pointer;\n    display: inline-block;\n    font-variant-numeric: tabular-nums;\n    width: 40px;\n    height: 40px;\n    text-align: center;\n    vertical-align: middle;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    // position: relative;\n    // padding: 0 0 1px;\n    // z-index: 1;\n\n    // &::before {\n    //   z-index: -1;\n    //   bottom: 0;\n    //   content: \"\";\n    //   left: 0;\n    //   position: absolute;\n    //   right: 0;\n    //   top: 0;\n    // }\n\n    &.is-today {\n      @include font('heavy');\n      color: $colorPrimary70;\n      // box-shadow: 0 0 0 1px $colorPrimary;\n      // position: relative;\n      // z-index: 200;\n    }\n\n    &:hover {\n      background: $colorGrey20;\n    }\n\n    // &:hover::before {\n    //   background: $colorGrey20;\n    // }\n\n    // &:focus,\n    &[aria-pressed=\"true\"] {\n      background: $colorSecondary30;\n      // box-shadow: none;\n      color: $colorPrimary70;\n    }\n\n    &:active {\n      background: $colorSecondary30;\n      // box-shadow: 0 0 5px $colorPrimary;\n      color: $colorPrimary70;\n      // z-index: 200;\n    }\n\n    // &:focus {\n    //   z-index: 200;\n    // }\n\n    // &:not(.is-month) {\n    //   box-shadow: none;\n    // }\n\n    &:not(.is-month),\n    &[aria-disabled=\"true\"] {\n      background: transparent;\n      color: $colorGrey60;\n      cursor: default;\n    }\n\n    // &[aria-disabled=\"true\"] {\n      // &.is-today {\n      //   box-shadow: 0 0 0 1px $colorGrey20;\n\n      //   &:focus {\n      //     box-shadow: 0 0 5px $colorPrimary;\n      //   }\n      // }\n\n      // &::before {\n      //   display: none;\n      // }\n    // }\n\n    &.is-disabled {\n      text-decoration-line: line-through;\n    }\n\n    &.is-outside {\n      color: $colorGrey60;\n      background: $colorGrey20;\n      // box-shadow: none;\n      cursor: default;\n      pointer-events: none;\n      text-decoration-line: none;\n\n      // &::before {\n      //   display: none;\n      // }\n    }\n  }\n\n  &__header {\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  &__nav {\n    display: flex;\n    align-items: center;\n\n    &.is-dropdowns {\n      gap: calc(#{space('xsmall')} + #{space('small')});\n      margin-left: space('small');\n    }\n  }\n\n  // &__prev,\n  // &__next {\n  //   align-items: center;\n  //   appearance: none;\n  //   font-family: inherit;\n  //   background: transparent;\n  //   border-radius: 50%;\n  //   color: $colorPrimary70;\n  //   cursor: pointer;\n  //   display: inline-flex;\n  //   flex-shrink: 0;\n  //   justify-content: center;\n  //   margin-left: space('xsmall');\n  //   padding: 0;\n  //   transition: background-color 300ms ease;\n  //   height: 32px;\n  //   width: 32px;\n\n  //   &:disabled {\n  //     cursor: default;\n  //     color: $colorGrey60;\n  //   }\n  // }\n\n  stzh-dropdown#{&}__dropdown {\n    --popover-width: 100%;\n    --popover-height: calc(100% - #{$formInputHeightSmall} - var(--padding-top));\n    --popover-max-height: initial;\n    position: static;\n  }\n\n  &__select-wrapper {\n    display: inline-flex;\n    position: relative;\n\n    span {\n      margin-right: 0px;\n    }\n  }\n\n  &__select {\n    @include fontSize('milli');\n    cursor: pointer;\n    height: 100%;\n    left: 0;\n    opacity: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n    z-index: 2;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__select-label {\n    @include fontSize('milli');\n    appearance: none;\n    border: none;\n    align-items: center;\n    border-radius: $formInputBorderRadius;\n    color: $colorPrimary70;\n    display: flex;\n    gap: space('xsmall');\n    padding: 0;\n    padding-left: space('small');\n    padding-right: space('xsmall');\n\n    position: relative;\n    width: 100%;\n    min-height: 40px;\n    z-index: 1;\n  }\n\n  &__select-icon {\n    --size: #{iconSize('xsmall')};\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n}\n","import {\n  Component,\n  ComponentInterface,\n  Host,\n  Prop,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch\n} from \"@stencil/core\"\n\nimport {\n  addDays,\n  startOfWeek,\n  endOfWeek,\n  setMonth,\n  setYear,\n  clamp,\n  inRange,\n  endOfMonth,\n  startOfMonth,\n  printISODate,\n  parseISODate,\n  DaysOfWeek,\n} from \"../../utils/date-utils\";\n\nimport { StzhCalendarChangeEvent, StzhDropdownChangeEvent } from \"../../index\";\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { StzhCalendarMonth } from \"./stzh-calendar-month\";\nimport { StzhCalendarLocalizedText } from \"./stzh-calendar.localization\";\n\nfunction range(from: number, to: number) {\n  var result: number[] = []\n  for (var i = from; i <= to; i++) {\n    result.push(i)\n  }\n  return result\n}\n\nconst keyCode = {\n  TAB: 9,\n  ESC: 27,\n  SPACE: 32,\n  PAGE_UP: 33,\n  PAGE_DOWN: 34,\n  END: 35,\n  HOME: 36,\n  LEFT: 37,\n  UP: 38,\n  RIGHT: 39,\n  DOWN: 40,\n}\n\nlet calendarCounter = 0;\n\n@Component({\n  tag: \"stzh-calendar\",\n  styleUrl: \"stzh-calendar.scss\",\n  scoped: true\n})\nexport class StzhCalendar implements ComponentInterface {\n  /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */\n  @Prop({ mutable: true }) value: string = \"\"\n\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() min: 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() max: string = \"\"\n\n  /**\n   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\n   * Default is Monday.\n   */\n  @Prop() firstDayOfWeek: DaysOfWeek = DaysOfWeek.Monday\n\n  /**  Day names, month names, etc, used for localization. */\n  @Prop() localization: StzhCalendarLocalizedText;\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() isDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the previous month button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() prevMonthAnalyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the next month button element.\n   * Default value will be taken from translations.\n   */\n  @Prop() nextMonthAnalyticsId: string;\n\n  @State() activeFocus = false\n  @State() focusedDay = new Date()\n\n  /** Event emitted when a date is selected. */\n  @Event() stzhChange: EventEmitter<StzhCalendarChangeEvent>\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatShort = new Intl.DateTimeFormat(this.localization.$locale, { day: \"numeric\", month: \"long\" })\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (newValue) {\n      this.setFocusedDay(parseISODate(this.value));\n    } else {\n      this.setFocusedDay(new Date());\n    }\n  }\n\n  /** Set focused day element by a JS Date object */\n  @Method()\n  async setFocusedDay(day: Date) {\n    this.focusedDay = clamp(day, parseISODate(this.min), parseISODate(this.max))\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = printISODate(date)\n  }\n\n  @Element() element: HTMLStzhCalendarElement\n\n  // private monthSelectId: string\n  // private yearSelectId: string\n  private dialogLabelId: string\n\n  // private focusedDayNode: HTMLButtonElement\n\n  private initialTouchX: number = null\n  private initialTouchY: number = null\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 dateFormatShort: Intl.DateTimeFormat\n\n  private enableActiveFocus = () => {\n    this.activeFocus = true\n  }\n\n  private disableActiveFocus = () => {\n    this.activeFocus = false\n  }\n\n  private addDays(days: number) {\n    this.setFocusedDay(addDays(this.focusedDay, days))\n  }\n\n  private addMonths(months: number) {\n    this.setMonth(this.focusedDay.getMonth() + months)\n  }\n\n  private addYears(years: number) {\n    this.setYear(this.focusedDay.getFullYear() + years)\n  }\n\n  private startOfWeek() {\n    this.setFocusedDay(startOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private endOfWeek() {\n    this.setFocusedDay(endOfWeek(this.focusedDay, this.firstDayOfWeek))\n  }\n\n  private setMonth(month: number) {\n    const min = setMonth(startOfMonth(this.focusedDay), month)\n    const max = endOfMonth(min)\n    const date = setMonth(this.focusedDay, month)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private setYear(year: number) {\n    const min = setYear(startOfMonth(this.focusedDay), year)\n    const max = endOfMonth(min)\n    const date = setYear(this.focusedDay, year)\n\n    this.setFocusedDay(clamp(date, min, max))\n  }\n\n  private handleTouchStart = (event: TouchEvent) => {\n    const touch = event.changedTouches[0]\n    this.initialTouchX = touch.pageX\n    this.initialTouchY = touch.pageY\n  }\n\n  // private handleTouchMove = (event: TouchEvent) => {\n  //   event.preventDefault()\n  // }\n\n  private handleTouchEnd = (event: TouchEvent) => {\n    const touch = event.changedTouches[0]\n    const distX = touch.pageX - this.initialTouchX // get horizontal dist traveled\n    const distY = touch.pageY - this.initialTouchY // get vertical dist traveled\n    const threshold = 70\n\n    const isHorizontalSwipe = Math.abs(distX) >= threshold && Math.abs(distY) <= threshold\n\n    if (isHorizontalSwipe) {\n      this.addMonths(distX < 0 ? 1 : -1)\n    }\n\n    this.initialTouchY = null\n    this.initialTouchX = null\n  }\n\n  private handleNextMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(1)\n  }\n\n  private handlePreviousMonthClick = (event: MouseEvent) => {\n    event.preventDefault()\n    this.addMonths(-1)\n  }\n\n  private handleKeyboardNavigation = (event: KeyboardEvent) => {\n    var handled = true\n\n    switch (event.keyCode) {\n      case keyCode.RIGHT:\n        this.addDays(1)\n        break\n      case keyCode.LEFT:\n        this.addDays(-1)\n        break\n      case keyCode.DOWN:\n        this.addDays(7)\n        break\n      case keyCode.UP:\n        this.addDays(-7)\n        break\n      case keyCode.PAGE_UP:\n        if (event.shiftKey) {\n          this.addYears(-1)\n        } else {\n          this.addMonths(-1)\n        }\n        break\n      case keyCode.PAGE_DOWN:\n        if (event.shiftKey) {\n          this.addYears(1)\n        } else {\n          this.addMonths(1)\n        }\n        break\n      case keyCode.HOME:\n        this.startOfWeek()\n        break\n      case keyCode.END:\n        this.endOfWeek()\n        break\n      default:\n        handled = false\n    }\n\n    if (handled) {\n      event.preventDefault()\n      this.enableActiveFocus()\n    }\n  }\n\n  private handleDaySelect = (_event: MouseEvent, day: Date) => {\n    const isInRange = inRange(day, parseISODate(this.min), parseISODate(this.max))\n    const isAllowed = !this.isDateDisabled(day)\n\n    if (isInRange && isAllowed) {\n      this.setDate(day)\n\n      this.stzhChange.emit({\n        component: \"stzh-calendar\",\n        value: this.value,\n        valueAsDate: day,\n      })\n    } else {\n      // for consistency we should set the focused day in cases where\n      // user has selected a day that has been specifically disallowed\n      this.setFocusedDay(day)\n    }\n  }\n\n  private handleMonthSelect = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n    this.setMonth(parseInt(value, 10))\n  }\n\n  private handleYearSelect = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    const value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n    this.setYear(parseInt(value, 10))\n  }\n\n  private processFocusedDayNode = (element: HTMLButtonElement) => {\n    // this.focusedDayNode = element\n\n    if (this.activeFocus) {\n      setTimeout(() => element.focus(), 0)\n    }\n  }\n\n  async componentWillLoad() {\n    // this.monthSelectId = `stzh-calendar-month-${calendarCounter}`;\n    // this.yearSelectId = `stzh-calendar-year-${calendarCounter}`;\n    this.dialogLabelId = `stzh-calendar-dialog-${calendarCounter}`;\n    calendarCounter++;\n\n    this.valueWatcher(this.value);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'calendar');\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters()\n  }\n\n  render() {\n    const valueAsDate = parseISODate(this.value)\n    const selectedYear = (valueAsDate || this.focusedDay).getFullYear()\n    const focusedMonth = this.focusedDay.getMonth()\n    const focusedYear = this.focusedDay.getFullYear()\n\n    const minDate = parseISODate(this.min)\n    const maxDate = parseISODate(this.max)\n    const prevMonthDisabled =\n      minDate != null && minDate.getMonth() === focusedMonth && minDate.getFullYear() === focusedYear\n    const nextMonthDisabled =\n      maxDate != null && maxDate.getMonth() === focusedMonth && maxDate.getFullYear() === focusedYear\n\n    const minYear = minDate ? minDate.getFullYear() : selectedYear - 10\n    const maxYear = maxDate ? maxDate.getFullYear() : selectedYear + 10\n\n    const monthDropdownOptions = this.localization.$globals.monthNames.map((month, i) => {\n      return {\n        value: i.toString(),\n        text: month,\n        disabled: !inRange(\n          new Date(focusedYear, i, 1),\n          minDate ? startOfMonth(minDate) : null,\n          maxDate ? endOfMonth(maxDate) : null\n        ),\n      }\n    });\n\n    const yearDropdownOptions = range(minYear, maxYear).map(year => {\n      return {\n        value: year.toString(),\n        text: year.toString(),\n      }\n    });\n\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-calendar\": true\n          }}\n          /* onTouchMove={this.handleTouchMove} */\n          onTouchStart={this.handleTouchStart}\n          onTouchEnd={this.handleTouchEnd}\n        >\n          <div class=\"stzh-calendar__wrapper\">\n            {/*\n            <div class=\"stzh-calendar__mobile\" onFocusin={this.disableActiveFocus}>\n              <label class=\"stzh-calendar__mobile-heading\">{this.localization.calendarHeading}</label>\n            </div>\n            */}\n            {/* @ts-ignore */}\n            <div class=\"stzh-calendar__header\" onFocusin={this.disableActiveFocus}>\n              <div class=\"stzh-calendar__nav is-dropdowns\">\n                <h2\n                  id={this.dialogLabelId}\n                  class=\"stzh-calendar__vhidden\"\n                  aria-live=\"polite\"\n                  aria-atomic=\"true\"\n                >\n                  {this.localization.$globals.monthNames[focusedMonth]}\n                  {this.focusedDay.getFullYear()}\n                </h2>\n\n                <stzh-dropdown\n                  class=\"stzh-calendar__dropdown\"\n                  variant=\"plain\"\n                  size=\"small\"\n                  inline\n                  popover-fullwidth=\"horizontal\"\n                  noSearch={true}\n                  openOnFocus={false}\n                  items={[focusedMonth.toString()]}\n                  options={monthDropdownOptions}\n                  label={this.localization.monthSelectLabel}\n                  labelHidden={true}\n                  onStzhChange={this.handleMonthSelect}\n                ></stzh-dropdown>\n\n                <stzh-dropdown\n                  class=\"stzh-calendar__dropdown\"\n                  variant=\"plain\"\n                  size=\"small\"\n                  inline\n                  popover-fullwidth=\"horizontal\"\n                  noSearch={true}\n                  openOnFocus={false}\n                  items={[focusedYear.toString()]}\n                  options={yearDropdownOptions}\n                  label={this.localization.yearSelectLabel}\n                  labelHidden={true}\n                  onStzhChange={this.handleYearSelect}\n                ></stzh-dropdown>\n\n                {/* alternative for dropdown with popover:\n                <stzh-popover>\n                  <button class=\"stzh-calendar__select-label\" aria-label={this.localization.monthSelectLabel}>\n                    <span>{this.localization.$globals.monthNamesShort[focusedMonth]}</span>\n                    <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n                  </button>\n                  <stzh-menu slot=\"content\">\n                    {this.localization.$globals.monthNames.map((month, i) => (\n                      <stzh-menu-item\n                        // onClick={this.handleMonthSelect(month)}\n                        active={i === focusedMonth}\n                        disabled={\n                          !inRange(\n                            new Date(focusedYear, i, 1),\n                            minDate ? startOfMonth(minDate) : null,\n                            maxDate ? endOfMonth(maxDate) : null\n                          )\n                        }\n                      >\n                        {month}\n                      </stzh-menu-item>\n                    ))}\n                  </stzh-menu>\n                </stzh-popover>\n                */}\n\n                {/* original implmentation with native select:\n                <label htmlFor={this.monthSelectId} class=\"stzh-calendar__vhidden\">\n                  {this.localization.monthSelectLabel}\n                </label>\n\n                <div class=\"stzh-calendar__select-wrapper\">\n                  <select\n                    id={this.monthSelectId}\n                    class=\"stzh-calendar__select stzh-calendar__select--month\"\n                    onChange={this.handleMonthSelect}\n                  >\n                    {this.localization.$globals.monthNames.map((month, i) => (\n                      <option\n                        key={month}\n                        value={i}\n                        selected={i === focusedMonth}\n                        disabled={\n                          !inRange(\n                            new Date(focusedYear, i, 1),\n                            minDate ? startOfMonth(minDate) : null,\n                            maxDate ? endOfMonth(maxDate) : null\n                          )\n                        }\n                      >\n                        {month}\n                      </option>\n                    ))}\n                  </select>\n                  <div class=\"stzh-calendar__select-label\" aria-hidden=\"true\">\n                    <span>{this.localization.$globals.monthNamesShort[focusedMonth]}</span>\n                    <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n                  </div>\n                </div>\n\n                <label htmlFor={this.yearSelectId} class=\"stzh-calendar__vhidden\">\n                  {this.localization.yearSelectLabel}\n                </label>\n\n                <div class=\"stzh-calendar__select-wrapper\">\n                  <select\n                    id={this.yearSelectId}\n                    class=\"stzh-calendar__select stzh-calendar__select--year\"\n                    onChange={this.handleYearSelect}\n                  >\n                    {range(minYear, maxYear).map(year => (\n                      <option key={year} selected={year === focusedYear}>\n                        {year}\n                      </option>\n                    ))}\n                  </select>\n                  <div class=\"stzh-calendar__select-label\" aria-hidden=\"true\">\n                    <span>{this.focusedDay.getFullYear()}</span>\n                    <stzh-icon class=\"stzh-calendar__select-icon\" name=\"angle-down\"></stzh-icon>\n                  </div>\n                </div>\n                */}\n\n              </div>\n\n              <div class=\"stzh-calendar__nav\">\n                <stzh-button\n                  class=\"stzh-calendar__prev\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"arrow-left\"\n                  iconOnly={true}\n                  onClick={this.handlePreviousMonthClick}\n                  disabled={prevMonthDisabled}\n                  type=\"button\"\n                  a11yLabel={this.localization.prevMonthLabel}\n                  analyticsId={this.prevMonthAnalyticsId || this.localization.prevMonthLabel}\n                ></stzh-button>\n                <stzh-button\n                  class=\"stzh-calendar__next\"\n                  variant=\"tertiary\"\n                  size=\"small\"\n                  icon=\"arrow-right\"\n                  iconOnly={true}\n                  onClick={this.handleNextMonthClick}\n                  disabled={nextMonthDisabled}\n                  type=\"button\"\n                  a11yLabel={this.localization.nextMonthLabel}\n                  analyticsId={this.nextMonthAnalyticsId || this.localization.nextMonthLabel}\n                ></stzh-button>\n              </div>\n            </div>\n\n            <StzhCalendarMonth\n              dateFormatter={this.dateFormatShort}\n              selectedDate={valueAsDate}\n              focusedDate={this.focusedDay}\n              onDateSelect={this.handleDaySelect}\n              onKeyboardNavigation={this.handleKeyboardNavigation}\n              labelledById={this.dialogLabelId}\n              localization={this.localization}\n              firstDayOfWeek={this.firstDayOfWeek}\n              focusedDayRef={this.processFocusedDayNode}\n              min={minDate}\n              max={maxDate}\n              isDateDisabled={this.isDateDisabled}\n            />\n          </div>\n        </div>\n      </Host>\n    )\n  }\n}\n"],"mappings":"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"}