@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/cjs/stzh-cspace.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-cspace.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,solGAAsolG;;MCkB/olG,UAAU;;;IAoBb,SAAI,GAAG;MACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;QAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAC/B,4BAA4B;YAC5B,sKAAsK,CAC3K,CAAC;QAEF,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB;UAC9CA,oBAAc,CAAC,gBAAgB,EAAE;YAC/B,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;WAC2B,CAAC,CAAA;SACtD,CAAC,CAAC;OACJ;KACF,CAAA;;;+BA/B8E,QAAQ;;EAKvF,0BAA0B;IACxB,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EA0BD,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAGD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACEC,QAACC,UAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjGD,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEdA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;;;;","names":["setPropsIfNull","h","Host"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n  @include host;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  // Remove edge margin\n\n  &[has-hidden-first-margin] > .stzh-cspace {\n    & > :first-child {\n      margin-top: 0 !important;\n    }\n\n    & > .section:first-child > *:first-child {\n      margin-top: 0 !important;\n    }\n  }\n\n  &[has-hidden-last-margin] > .stzh-cspace {\n    & > :last-child {\n      margin-bottom: 0 !important;\n    }\n\n    & > .section:last-child > *:last-child {\n      margin-bottom: 0 !important;\n    }\n  }\n}\n\nstzh-cspace > .stzh-cspace {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  // display: flex;\n  // flex-direction: column;\n  // align-items: flex-start;\n\n  & > .section > h1,\n  & > h1,\n  & > .section > :where(stzh-heading[level=\"1\"]),\n  & > :where(stzh-heading[level=\"1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > h2,\n  & > h2,\n  & > .section > :where(stzh-heading[level=\"2\"]),\n  & > :where(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > h3,\n  & > h3,\n  & > .section > :where(stzh-heading[level=\"3\"]),\n  & > :where(stzh-heading[level=\"3\"]) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    @include mq($from: large) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  & > .section > h4,\n  & > h4,\n  & > .section > :where(stzh-heading[level=\"4\"]),\n  & > :where(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > p,\n  & > p,\n  & > .section > stzh-text,\n  & > stzh-text,\n  & > .section > ul,\n  & > ul,\n  & > .section > ol,\n  & > ol,\n  & > .section > dl,\n  & > dl,\n  & > .section > stzh-list,\n  & > stzh-list {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"hero\"]),\n  & > :where(stzh-text[curve=\"hero\"]),\n  & > .section > :where(stzh-heading[curve=\"hero\"]),\n  & > :where(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"h1\"]),\n  & > :where(stzh-text[curve=\"h1\"]),\n  & > .section > :where(stzh-heading[curve=\"h1\"]),\n  & > :where(stzh-heading[curve=\"h1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h2\"]),\n  & > :where(stzh-text[curve=\"h2\"]),\n  & > .section > :where(stzh-heading[curve=\"h2\"]),\n  & > :where(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h3\"]),\n  & > :where(stzh-text[curve=\"h3\"]),\n  & > .section > :where(stzh-heading[curve=\"h3\"]),\n  & > :where(stzh-heading[curve=\"h3\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h4\"]),\n  & > :where(stzh-text[curve=\"h4\"]),\n  & > .section > :where(stzh-heading[curve=\"h4\"]),\n  & > :where(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"p1\"]),\n  & > :where(stzh-text[curve=\"p1\"]),\n  & > .section > :where(stzh-heading[curve=\"p1\"]),\n  & > :where(stzh-heading[curve=\"p1\"]) {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"p2\"]),\n  & > :where(stzh-text[curve=\"p2\"]),\n  & > .section > :where(stzh-heading[curve=\"p2\"]),\n  & > :where(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > stzh-input, // DONE\n  & > stzh-input, // DONE\n  & > .section > stzh-datepicker, // DONE\n  & > stzh-datepicker, // DONE\n  & > .section > stzh-daterange, // DONE\n  & > stzh-daterange, // DONE\n  & > .section > stzh-dropdown, // DONE\n  & > stzh-dropdown, // DONE\n  & > .section > stzh-upload, // DONE\n  & > stzh-upload, // DONE\n  & > .section > stzh-checkbox, // DONE\n  & > stzh-checkbox, // DONE\n  & > .section > stzh-checkboxgroup, // DONE\n  & > stzh-checkboxgroup, // DONE\n  & > .section > stzh-radio, // DONE\n  & > stzh-radio, // DONE\n  & > .section > stzh-radiogroup, // DONE\n  & > stzh-radiogroup { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > stzh-chipgroup, // DONE\n  & > stzh-chipgroup, // DONE\n  & > .section > stzh-chipselect, // DONE\n  & > stzh-chipselect { // DONE\n    margin-bottom: space('xlarge');\n  }\n\n  & > .section > stzh-message, // DONE\n  & > stzh-message { // DONE\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-contact, // DONE\n  & > stzh-contact, // DONE\n  & > .section > stzh-accordion, // DONE\n  & > stzh-accordion, // DONE\n  & > .section > stzh-anchornav, // DONE\n  & > stzh-anchornav, // DONE\n  & > .section > stzh-audio, // DONE\n  & > stzh-audio, // DONE\n  & > .section > stzh-microsite-teaserlist,\n  & > stzh-microsite-teaserlist,\n  & > .section > stzh-gallery, // DONE\n  & > stzh-gallery, // DONE\n  & > .section > stzh-panorama,\n  & > stzh-panorama,\n  & > .section > stzh-chart,\n  & > stzh-chart,\n  & > .section > stzh-sitemap,\n  & > stzh-sitemap,\n  & > .section > stzh-hr,\n  & > stzh-hr,\n  & > .section > stzh-archivelist,\n  & > stzh-archivelist,\n  & > .section > stzh-figure, // DONE\n  & > stzh-figure, // DONE\n  & > stzh-iframe, // DONE\n  & > .section > stzh-youtube, // DONE\n  & > stzh-youtube, // DONE\n  & > .section > stzh-vbz-ticker,\n  & > stzh-vbz-ticker {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-eventinfo, // DONE\n  & > stzh-eventinfo, // DONE\n  & > .section > stzh-eventdata, // DONE\n  & > stzh-eventdata, // DONE\n  & > .section > stzh-datalist, // DONE\n  & > stzh-datalist, // DONE\n  & > .section > stzh-textandimage, // DONE\n  & > stzh-textandimage { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-section[variant=\"highlight\"], // DONE\n  & > stzh-section[variant=\"highlight\"] { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-pagetitle[background=\"default\"], // DONE\n  & > stzh-pagetitle[background=\"default\"] { // DONE\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n  & > stzh-richtext[has-hidden-last-margin] { // DONE\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-cta, // DONE\n  & > stzh-cta { // DONE\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-olmap,\n  & > stzh-olmap {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-breadcrumb, // DONE\n  & > stzh-breadcrumb { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-card,\n  & > stzh-card {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-appointments,\n  & > stzh-appointments {\n    @include spaceCurve('margin-bottom', 'big');\n\n    &[has-heading] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  & > .section > stzh-table, // DONE\n  & > stzh-table, // DONE\n  & > .section > stzh-datatable, // DONE\n  & > stzh-datatable { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-pagebottom,\n  & > stzh-pagebottom {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-progressbar,\n  & > stzh-progressbar {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  & > .section > stzh-pagination, // DONE\n  & > stzh-pagination { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-actions, // DONE\n  & > stzh-actions { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-saptcha, // DONE\n  & > stzh-saptcha { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-fieldset, // DONE\n  & > stzh-fieldset { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    &[legend] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  // & > stzh-heading[level=\"4\"] + stzh-datalist,\n  // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n  //   margin-top: 0;\n  // }\n\n  /* Utility classes for applying spacing curves */\n\n  @each $spaceCurve, $value in $spaceCurves {\n    $defaultSize: map-get($value, 'size');\n    $breakpointSizes: map-get($value, 'sizes');\n\n    & > .section > .cspace-y-curve-#{$spaceCurve},\n    & > .cspace-y-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    & > .section > .cspace-t-curve-#{$spaceCurve},\n    & > .cspace-t-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    & > .section > .cspace-b-curve-#{$spaceCurve},\n    & > .cspace-b-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n  }\n\n  /* Utility classes for applying spacing values */\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $space, $value in $spaceSizes {\n      @if $breakpoint {\n        & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n        & > .#{$breakpoint}\\:cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n        & > .#{$breakpoint}\\:cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n        & > .#{$breakpoint}\\:cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        & > .section > .cspace-y-#{$space},\n        & > .cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .cspace-t-#{$space},\n        & > .cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .cspace-b-#{$space},\n        & > .cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  & > .section > .cspace-y-0,\n  & > .cspace-y-0 {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  & > .section > .cspace-t-0,\n  & > .cspace-t-0 {\n    margin-top: 0;\n  }\n\n  & > .section > .cspace-b-0,\n  & > .cspace-b-0 {\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    & > .section > .#{$breakpoint}\\:cspace-y-0,\n    & > .#{$breakpoint}\\:cspace-y-0 {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-t-0,\n    & > .#{$breakpoint}\\:cspace-t-0 {\n      margin-top: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-b-0,\n    & > .#{$breakpoint}\\:cspace-b-0 {\n      margin-bottom: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\"\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n  @Prop({ reflect: true }) preventRemoveNested: \"direct\" | \"deep\" | \"disabled\" = \"direct\";\n\n  @Element() element: HTMLStzhCspaceElement;\n\n  @Watch(\"preventRemoveNested\")\n  preventRemoveNestedWatcher() {\n    this.init();\n  }\n\n  private observer: MutationObserver;\n  private rootElement: HTMLElement;\n\n  private init = () => {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (this.preventRemoveNested !== \"disabled\") {\n      const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n        this.preventRemoveNested === \"deep\"\n          ? \"stzh-cspace, stzh-richtext\"\n          : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\"\n      );\n\n      nestedCspaceOrRichtext.forEach((cspaceOrRichtext) => {  \n        setPropsIfNull(cspaceOrRichtext, {\n          removeFirstMargin: false,\n          removeLastMargin: false,\n        } as HTMLStzhCspaceElement | HTMLStzhRichtextElement)\n      });\n    }\n  }\n\n  componentDidRender() {\n    this.init();\n\n    this.observer.observe(this.rootElement, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  connectedCallback() {\n    this.observer = new MutationObserver(this.init);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-cspace.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,k+tGAAk+tG;;MCkB3+tG,UAAU;;;IAoBb,SAAI,GAAG;MACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;QAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;YAC/B,4BAA4B;YAC5B,sKAAsK,CAC3K,CAAC;QAEF,sBAAsB,CAAC,OAAO,CAAC,CAAC,gBAAgB;UAC9CA,oBAAc,CAAC,gBAAgB,EAAE;YAC/B,iBAAiB,EAAE,KAAK;YACxB,gBAAgB,EAAE,KAAK;WAC2B,CAAC,CAAA;SACtD,CAAC,CAAC;OACJ;KACF,CAAA;;;+BA/B8E,QAAQ;;EAKvF,0BAA0B;IACxB,IAAI,CAAC,IAAI,EAAE,CAAC;GACb;EA0BD,kBAAkB;IAChB,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;MACtC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACjD;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAGD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACEC,QAACC,UAAI,+BACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjGD,iBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEdA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;;;;","names":["setPropsIfNull","h","Host"],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n  @include host;\n  color: inherit;\n  font-weight: inherit;\n  font-family: inherit;\n  letter-spacing: inherit;\n\n  // Remove edge margin\n\n  &[has-hidden-first-margin] > .stzh-cspace {\n    & > :first-child {\n      margin-top: 0 !important;\n    }\n\n    & > .section:first-child > *:first-child {\n      margin-top: 0 !important;\n    }\n  }\n\n  &[has-hidden-last-margin] > .stzh-cspace {\n    & > :last-child {\n      margin-bottom: 0 !important;\n    }\n\n    & > .section:last-child > *:last-child {\n      margin-bottom: 0 !important;\n    }\n  }\n}\n\nstzh-cspace > .stzh-cspace {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  // display: flex;\n  // flex-direction: column;\n  // align-items: flex-start;\n\n  & > .section > h1,\n  & > h1,\n  & > .section > :where(stzh-heading[level=\"1\"]),\n  & > :where(stzh-heading[level=\"1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > h2,\n  & > h2,\n  & > .section > :where(stzh-heading[level=\"2\"]),\n  & > :where(stzh-heading[level=\"2\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > h3,\n  & > h3,\n  & > .section > :where(stzh-heading[level=\"3\"]),\n  & > :where(stzh-heading[level=\"3\"]) {\n    @include spaceCurve('margin-top', 'tiny');\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    @include mq($from: large) {\n      margin-top: space('xsmall');\n    }\n  }\n\n  & > .section > h4,\n  & > h4,\n  & > .section > :where(stzh-heading[level=\"4\"]),\n  & > :where(stzh-heading[level=\"4\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > p,\n  & > p,\n  & > .section > stzh-text,\n  & > stzh-text,\n  & > .section > ul,\n  & > ul,\n  & > .section > ol,\n  & > ol,\n  & > .section > dl,\n  & > dl,\n  & > .section > stzh-list,\n  & > stzh-list {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"hero\"]),\n  & > :where(stzh-text[curve=\"hero\"]),\n  & > .section > :where(stzh-heading[curve=\"hero\"]),\n  & > :where(stzh-heading[curve=\"hero\"]) {\n    @include spaceCurve('margin-bottom', 'medium');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"h1\"]),\n  & > :where(stzh-text[curve=\"h1\"]),\n  & > .section > :where(stzh-heading[curve=\"h1\"]),\n  & > :where(stzh-heading[curve=\"h1\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h2\"]),\n  & > :where(stzh-text[curve=\"h2\"]),\n  & > .section > :where(stzh-heading[curve=\"h2\"]),\n  & > :where(stzh-heading[curve=\"h2\"]) {\n    @include spaceCurve('margin-top', 'large');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h3\"]),\n  & > :where(stzh-text[curve=\"h3\"]),\n  & > .section > :where(stzh-heading[curve=\"h3\"]),\n  & > :where(stzh-heading[curve=\"h3\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"h4\"]),\n  & > :where(stzh-text[curve=\"h4\"]),\n  & > .section > :where(stzh-heading[curve=\"h4\"]),\n  & > :where(stzh-heading[curve=\"h4\"]) {\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > :where(stzh-text[curve=\"p1\"]),\n  & > :where(stzh-text[curve=\"p1\"]),\n  & > .section > :where(stzh-heading[curve=\"p1\"]),\n  & > :where(stzh-heading[curve=\"p1\"]) {\n    @include spaceCurve('margin-bottom', 'regular');\n    margin-top: 0;\n  }\n\n  & > .section > :where(stzh-text[curve=\"p2\"]),\n  & > :where(stzh-text[curve=\"p2\"]),\n  & > .section > :where(stzh-heading[curve=\"p2\"]),\n  & > :where(stzh-heading[curve=\"p2\"]) {\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'small');\n  }\n\n  & > .section > stzh-input, // DONE\n  & > stzh-input, // DONE\n  & > .section > stzh-datepicker, // DONE\n  & > stzh-datepicker, // DONE\n  & > .section > stzh-daterange, // DONE\n  & > stzh-daterange, // DONE\n  & > .section > stzh-dropdown, // DONE\n  & > stzh-dropdown, // DONE\n  & > .section > stzh-upload, // DONE\n  & > stzh-upload, // DONE\n  & > .section > stzh-checkbox, // DONE\n  & > stzh-checkbox, // DONE\n  & > .section > stzh-checkboxgroup, // DONE\n  & > stzh-checkboxgroup, // DONE\n  & > .section > stzh-radio, // DONE\n  & > stzh-radio, // DONE\n  & > .section > stzh-radiogroup, // DONE\n  & > stzh-radiogroup { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n  }\n\n  & > .section > stzh-chipgroup, // DONE\n  & > stzh-chipgroup, // DONE\n  & > .section > stzh-chipselect, // DONE\n  & > stzh-chipselect { // DONE\n    margin-bottom: space('xlarge');\n  }\n\n  & > .section > stzh-message, // DONE\n  & > stzh-message { // DONE\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-cardlist, // DONE\n  & > stzh-cardlist, // DONE\n  & > .section > stzh-contact, // DONE\n  & > stzh-contact, // DONE\n  & > .section > stzh-accordion, // DONE\n  & > stzh-accordion, // DONE\n  & > .section > stzh-anchornav, // DONE\n  & > stzh-anchornav, // DONE\n  & > .section > stzh-audio, // DONE\n  & > stzh-audio, // DONE\n  & > .section > stzh-microsite-teaserlist,\n  & > stzh-microsite-teaserlist,\n  & > .section > stzh-gallery, // DONE\n  & > stzh-gallery, // DONE\n  & > .section > stzh-panorama,\n  & > stzh-panorama,\n  & > .section > stzh-chart,\n  & > stzh-chart,\n  & > .section > stzh-sitemap,\n  & > stzh-sitemap,\n  & > .section > stzh-hr,\n  & > stzh-hr,\n  & > .section > stzh-archivelist,\n  & > stzh-archivelist,\n  & > .section > stzh-figure, // DONE\n  & > stzh-figure, // DONE\n  & > stzh-iframe, // DONE\n  & > .section > stzh-youtube, // DONE\n  & > stzh-youtube, // DONE\n  & > .section > stzh-vbz-ticker,\n  & > stzh-vbz-ticker {\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-eventinfo, // DONE\n  & > stzh-eventinfo, // DONE\n  & > .section > stzh-eventdata, // DONE\n  & > stzh-eventdata, // DONE\n  & > .section > stzh-datalist, // DONE\n  & > stzh-datalist, // DONE\n  & > .section > stzh-textandimage, // DONE\n  & > stzh-textandimage { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-section[variant=\"highlight\"], // DONE\n  & > stzh-section[variant=\"highlight\"] { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-section[variant=\"contextbox\"], // DONE\n  & > stzh-section[variant=\"contextbox\"] { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-section[variant=\"default\"], // DONE\n  & > stzh-section[variant=\"default\"] { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-pagetitle[background=\"default\"], // DONE\n  & > stzh-pagetitle[background=\"default\"] { // DONE\n    @include spaceCurve('margin-bottom', 'section-inner');\n  }\n\n  & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n  & > stzh-richtext[has-hidden-last-margin] { // DONE\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-cta, // DONE\n  & > stzh-cta { // DONE\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-olmap,\n  & > stzh-olmap {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-breadcrumb, // DONE\n  & > stzh-breadcrumb { // DONE\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-card,\n  & > stzh-card {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  & > .section > stzh-appointments,\n  & > stzh-appointments {\n    @include spaceCurve('margin-bottom', 'big');\n\n    &[has-heading] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  & > .section > stzh-table, // DONE\n  & > stzh-table, // DONE\n  & > .section > stzh-datatable, // DONE\n  & > stzh-datatable { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-pagebottom,\n  & > stzh-pagebottom {\n    @include spaceCurve('margin-top', 'medium');\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-progressbar,\n  & > stzh-progressbar {\n    @include spaceCurve('margin-top', 'big');\n  }\n\n  & > .section > stzh-pagination, // DONE\n  & > stzh-pagination { // DONE\n    @include spaceCurve('margin-top', 'regular');\n    @include spaceCurve('margin-bottom', 'large');\n  }\n\n  & > .section > stzh-actions, // DONE\n  & > stzh-actions { // DONE\n    @include spaceCurve('margin-top', 'small');\n    @include spaceCurve('margin-bottom', 'big');\n  }\n\n  & > .section > stzh-saptcha, // DONE\n  & > stzh-saptcha { // DONE\n    @include spaceCurve('margin-bottom', 'medium');\n  }\n\n  & > .section > stzh-fieldset, // DONE\n  & > stzh-fieldset { // DONE\n    @include spaceCurve('margin-bottom', 'tiny');\n\n    &[legend] {\n      @include spaceCurve('margin-top', 'regular');\n    }\n  }\n\n  // & > stzh-heading[level=\"4\"] + stzh-datalist,\n  // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n  //   margin-top: 0;\n  // }\n\n  /* Utility classes for applying spacing curves */\n\n  @each $spaceCurve, $value in $spaceCurves {\n    $defaultSize: map-get($value, 'size');\n    $breakpointSizes: map-get($value, 'sizes');\n\n    & > .section > .cspace-y-curve-#{$spaceCurve},\n    & > .cspace-y-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n\n    & > .section > .cspace-t-curve-#{$spaceCurve},\n    & > .cspace-t-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-top', $spaceCurve);\n    }\n\n    & > .section > .cspace-b-curve-#{$spaceCurve},\n    & > .cspace-b-curve-#{$spaceCurve} {\n      @include spaceCurve('margin-bottom', $spaceCurve);\n    }\n  }\n\n  /* Utility classes for applying spacing values */\n\n  @each $breakpoint, $size in $breakpoints {\n    @each $space, $value in $spaceSizes {\n      @if $breakpoint {\n        & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n        & > .#{$breakpoint}\\:cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n        & > .#{$breakpoint}\\:cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n        & > .#{$breakpoint}\\:cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      } @else {\n        & > .section > .cspace-y-#{$space},\n        & > .cspace-y-#{$space} {\n          margin-top: #{$value};\n          margin-bottom: #{$value};\n        }\n\n        & > .section > .cspace-t-#{$space},\n        & > .cspace-t-#{$space} {\n          margin-top: #{$value};\n        }\n\n        & > .section > .cspace-b-#{$space},\n        & > .cspace-b-#{$space} {\n          margin-bottom: #{$value};\n        }\n      }\n    }\n  }\n\n  & > .section > .cspace-y-0,\n  & > .cspace-y-0 {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  & > .section > .cspace-t-0,\n  & > .cspace-t-0 {\n    margin-top: 0;\n  }\n\n  & > .section > .cspace-b-0,\n  & > .cspace-b-0 {\n    margin-bottom: 0;\n  }\n\n  @each $breakpoint, $size in $breakpoints {\n    & > .section > .#{$breakpoint}\\:cspace-y-0,\n    & > .#{$breakpoint}\\:cspace-y-0 {\n      margin-top: 0;\n      margin-bottom: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-t-0,\n    & > .#{$breakpoint}\\:cspace-t-0 {\n      margin-top: 0;\n    }\n\n    & > .section > .#{$breakpoint}\\:cspace-b-0,\n    & > .#{$breakpoint}\\:cspace-b-0 {\n      margin-bottom: 0;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Watch,\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any elements that should be vertically spaced\n */\n@Component({\n  tag: \"stzh-cspace\",\n  styleUrl: \"stzh-cspace.scss\"\n})\nexport class StzhCspace {\n  /** Whether first top margin of first child component should be set to 0. */\n  @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n  /** Whether last bottom margin of last child component should be set to 0. */\n  @Prop({ reflect: true }) removeLastMargin: boolean;\n\n  /** Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n  @Prop({ reflect: true }) preventRemoveNested: \"direct\" | \"deep\" | \"disabled\" = \"direct\";\n\n  @Element() element: HTMLStzhCspaceElement;\n\n  @Watch(\"preventRemoveNested\")\n  preventRemoveNestedWatcher() {\n    this.init();\n  }\n\n  private observer: MutationObserver;\n  private rootElement: HTMLElement;\n\n  private init = () => {\n    if (!this.rootElement) {\n      return;\n    }\n\n    if (this.preventRemoveNested !== \"disabled\") {\n      const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n        this.preventRemoveNested === \"deep\"\n          ? \"stzh-cspace, stzh-richtext\"\n          : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\"\n      );\n\n      nestedCspaceOrRichtext.forEach((cspaceOrRichtext) => {  \n        setPropsIfNull(cspaceOrRichtext, {\n          removeFirstMargin: false,\n          removeLastMargin: false,\n        } as HTMLStzhCspaceElement | HTMLStzhRichtextElement)\n      });\n    }\n  }\n\n  componentDidRender() {\n    this.init();\n\n    this.observer.observe(this.rootElement, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  connectedCallback() {\n    this.observer = new MutationObserver(this.init);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n\n  render() {\n    const classes = {\n      \"stzh-cspace\": true\n    };\n\n    return (\n      <Host\n        has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n        has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n      >\n        <div\n          ref={(el) => (this.rootElement = el as HTMLElement)}\n          class={classes}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-datalist_2.cjs.entry.js

@@ -137,7 +137,7 @@ const StzhDatalist = class {
 };
 StzhDatalist.style = stzhDatalistCss;
 
-const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:var(--wrapper-display);align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;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);font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{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-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{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)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}";
+const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--value-font-family:var(--stzh-font-family-medium);--value-font-weight:var(--stzh-font-weight-medium);--value-color:inherit;--action-display:flex;--leading-icon-color:var(--stzh-color-grey90);--nested-display:var(--stzh-datalist-item-nested-display, block);--wrapper-display:var(--stzh-datalist-item-wrapper-display, contents);display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--value-color:var(--stzh-link-color);--value-hover-color:var(--stzh-link-hover-color)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none;display:var(--wrapper-display);align-items:center}.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item__nested-inner.sc-stzh-datalist-item{display:var(--nested-display);grid-column:var(--full-grid-column)}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{flex-grow:1;display:grid}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:flex;text-align:left;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{display:flex;align-items:center;gap:var(--stzh-space-xsmall);color:var(--value-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{flex-grow:1;flex-direction:column}.stzh-datalist-item__value-text.sc-stzh-datalist-item{--color:initial;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);font-family:var(--value-font-family);font-weight:var(--value-font-weight);width:auto}@media screen and (min-width: 900px){.stzh-datalist-item__value-text.sc-stzh-datalist-item{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-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{justify-content:flex-end}.stzh-datalist-item__meta-text.sc-stzh-datalist-item{display:flex;gap:var(--stzh-space-xsmall);color:var(--stzh-color-grey70)}.stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey90)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-small-height);height:var(--stzh-form-input-small-height)}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value-wrapper.sc-stzh-datalist-item{color:var(--value-hover-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__wrapper.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{flex-direction:column;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xxsmall);padding-bottom:var(--stzh-space-xxsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-bottom:var(--stzh-space-xxsmall);padding-top:calc(var(--stzh-space-xxsmall) + 0.75rem)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item{color:var(--stzh-color-grey70)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value-text.sc-stzh-datalist-item{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)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty),.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-small)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty)+.stzh-datalist-item__value.sc-stzh-datalist-item{padding-left:var(--stzh-space-medium)}.stzh-datalist-item--table.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-medium)}";
 
 let datalistItemCounter = 0;
 const StzhDatalistItem = class {

package/dist/cjs/stzh-datalist_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-datalist.stzh-datalist-item.entry.cjs.js","mappings":"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","names":["media","addMediaChangeListener","removeMediaChangeListener","h","Host","Fragment","index"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  // @prop --item-label-min-width: Min width of label\n  // --item-label-min-width: 120px;\n  --columns: 1;\n  --columns-gap: #{$gridGutter};\n  --list-display: grid;\n  --list-margin-right: calc(var(--columns-gap) / -1);\n  --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n  --full-grid-column: 1 / 5;\n  --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n  --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n  --grid-template-areas: var(\n    --stzh-datalist-grid-template-areas,\n    \"list list list list\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-datalist-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  margin-left: var(--nested-margin-left);\n\n  @include mq($from: small) {\n    --columns-gap: #{$gridGutterSmall};\n\n    --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --columns-gap: #{$gridGutterMedium};\n\n    --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list list list list list\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-datalist-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --columns-gap: #{$gridGutterLarge};\n  }\n\n  @include mq($from: ultra) {\n    --columns-gap: #{$gridGutterUltra};\n  }\n\n  // @include mq($from: medium) { // was smallheader before\n  //   --item-label-min-width: 144px;\n  // }\n\n  // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n  //   --item-label-min-width: none;\n  // }\n\n  // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n  // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n  ::slotted(.layout_column) > *:not([class*=\"cq-\"]),\n  ::slotted(*:not([class*=\"cq-\"])) {\n    display: contents;\n  }\n\n  // ::slotted(.layout_column) {\n  //   display: contents;\n\n  //   .section {\n  //     display: contents;\n  //   }\n  // }\n\n  &[is-direction=\"horizontal\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 6;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n\n  &[variant=\"table\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 7;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks */\n\n:host(:has([class*=\"cq-\"])) {\n  --stzh-datalist-item-wrapper-display: flex;\n\n  --list-display: block;\n  --list-margin-right: 0;\n}\n\n.stzh-datalist {\n  // offset margin of nested datalist\n  --stzh-datalist-nested-margin-left: #{space('large')};\n  // details grid columns\n  --stzh-details-content-grid-column: var(--full-grid-column);\n  --stzh-details-content-padding-right: var(--columns-gap);\n  --stzh-details-content-width: var(--details-content-width);\n\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: list;\n    overflow: visible;\n  }\n\n  &__list {\n    display: var(--list-display);\n    border-collapse: collapse;\n    grid-template-columns: var(--list-grid-template-columns);\n    align-items: stretch;\n    margin-right: var(--list-margin-right);\n  }\n\n  /* Multiple Columns */\n\n  &--has-multiple-columns {\n    // display of nested datalist\n    --stzh-datalist-item-nested-display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemEntry,\n  StzhDatalistDirection,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true\n})\nexport class StzhDatalist {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n \n  /** Columns */\n  @Prop({ reflect: true }) columns: number = 1;\n\n  /** Columns above small breakpoint */\n  @Prop({ reflect: true }) columnsSmall: number;\n\n  /** Columns above medium breakpoint  */\n  @Prop({ reflect: true }) columnsMedium: number;\n\n  /** Columns above large breakpoint  */\n  @Prop({ reflect: true }) columnsLarge: number;\n\n  /** Columns above ultra breakpoint  */\n  @Prop({ reflect: true }) columnsUltra: number;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n  /**\n   * Whether to disable min-width of datalist item label for the `horizontal` variant.\n   *\n   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n   *\n   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n   */\n  // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n  /**\n   * Items in datalist\n   * Array of objects that must at least include `value` attribute.\n   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n   * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n   */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n  private _items: StzhDatalistItemEntry[] = [];\n\n  /** Variant attribute change event */\n  @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.setCurrentDirection();\n  }\n\n  @Watch(\"columns\")\n  @Watch(\"columnsSmall\")\n  @Watch(\"columnsMedium\")\n  @Watch(\"columnsLarge\")\n  @Watch(\"columnsUltra\")\n  columnsWatcher() {\n    this.setCurrentColumns();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: StzhDatalistDirection) {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhDatalistVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  /** Get current direction */\n  @Method()\n  async getCurrentDirection() {\n    return this.currentDirection;\n  }\n\n  @State() currentColumns: number = 1;\n  @State() currentDirection: StzhDatalistDirection;\n\n  private setCurrentDirection = () => {\n    if (media(\"ultra\").matches && this.directionUltra) {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge) {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium) {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall) {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  }\n\n  private setCurrentColumns = () => {\n    if (media(\"ultra\").matches && this.columnsUltra) {\n      this.currentColumns = this.columnsUltra;\n    } else if (media(\"large\").matches && this.columnsLarge) {\n      this.currentColumns = this.columnsLarge;\n    } else if (media(\"medium\").matches && this.columnsMedium) {\n      this.currentColumns = this.columnsMedium;\n    } else if (media(\"small\").matches && this.columnsSmall) {\n      this.currentColumns = this.columnsSmall;\n    } else {\n      this.currentColumns = this.columns;\n    }\n  }\n\n  resizeHandler = () => {\n    this.setCurrentDirection();\n    this.setCurrentColumns();\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.resizeHandler();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.resizeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.resizeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datalist\": true,\n      \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n      [`stzh-datalist--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host\n        is-direction={this.currentDirection}\n        style={{\n          '--columns': this.currentColumns ? this.currentColumns.toString() : null\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-datalist__wrapper\">\n            <div class=\"stzh-datalist__list\" role=\"list\">\n              {this._items.map((item) =>\n                <stzh-datalist-item {...item}>\n                  {item.items && item.items.length > 0 &&\n                    <stzh-datalist items={item.items}></stzh-datalist>\n                  }\n                </stzh-datalist-item>\n              )}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --value-font-family: var(--stzh-font-family-medium);\n  --value-font-weight: var(--stzh-font-weight-medium);\n  --value-color: inherit;\n  --action-display: flex;\n  // --label-min-width: var(--item-label-min-width, none);\n  // --leading-icon-background-color: transparent;\n  --leading-icon-color: #{$colorGrey90};\n  --nested-display: var(--stzh-datalist-item-nested-display, block);\n  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n  // --hover-leading-icon-background-color: var(--leading-icon-background-color);\n  // --hover-leading-icon-color: var(--leading-icon-color);\n\n  // --horizontal-min-height: 48px;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --value-color: #{$linkColor};\n    --value-hover-color: #{$linkHoverColor};\n  }\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n  display: var(--wrapper-display);\n  align-items: center;\n\n  &__nested {\n    display: contents;\n  }\n\n  &__nested-inner {\n    display: var(--nested-display);\n    grid-column: var(--full-grid-column);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: grid;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    text-align: left;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space('xsmall');\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    // background-color: var(--leading-icon-background-color);\n    // display: flex;\n    // justify-content: center;\n    // align-items: center;\n    // border-radius: 50%;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space('xsmall');\n    color: var(--value-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    flex-grow: 1;\n    flex-direction: column;\n  }\n\n  &__value-text {\n    --color: initial;\n\n    @include fontCurve('p1');\n    font-family: var(--value-font-family);\n    font-weight: var(--value-font-weight);\n    width: auto;\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve('caption');\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__meta-text {\n    display: flex;\n    gap: space('xsmall');\n    color: $colorGrey70;\n  }\n\n  &__label {\n    color: $colorGrey90;\n  }\n\n  &__label-icon {\n\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightSmall;\n      height: $formInputHeightSmall;\n    }\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive &__value-text {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__value-wrapper {\n    color: var(--value-hover-color);\n  }\n\n  // &--is-interactive:hover &__leading-icon-container,\n  // &--is-interactive:focus-within &__leading-icon-container {\n  //   color: var(--hover-leading-icon-color);\n  //   background-color: var(--hover-leading-icon-background-color);\n  // }\n\n  /* Vertical Variant */\n\n  &--direction-vertical &__leading,\n  &--direction-vertical &__wrapper,\n  &--direction-vertical &__action-list {\n    &:not(:empty) {\n      // @include spaceCurve('padding-top', 'tiny');\n      // @include spaceCurve('padding-bottom', 'tiny');\n      padding-top: space('xxsmall');\n      padding-bottom: space('xxsmall');\n    }\n  }\n\n  // &--direction-vertical &__leading-icon-container {\n  //   width: 40px;\n  //   height: 40px;\n  // }\n\n  // &--direction-vertical &__leading-icon {\n  //   --size: #{iconSize('medium')};\n  // }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  /* Horizontal / Table Variant */\n\n  // &--direction-horizontal &__leading,\n  // &--direction-horizontal &__value,\n  // // &--direction-horizontal &__label,\n  // &--direction-horizontal &__meta,\n  // &--direction-horizontal &__action-list {\n  //   min-height: var(--horizontal-min-height);\n  // }\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  // &--direction-horizontal &__label,\n  &--direction-horizontal &__action-list {\n    &:not(:empty) {\n      // @include spaceCurve('padding-top', 'tiny');\n      // @include spaceCurve('padding-bottom', 'tiny');\n      padding-top: space('xxsmall');\n      padding-bottom: space('xxsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    // @include spaceCurve('padding-bottom', 'tiny');\n    padding-bottom: space('xxsmall');\n    padding-top: calc(#{space('xxsmall')} + 12px);\n    // padding-top: calc(#{spaceCurveValue('tiny')} + 12px);\n\n    // @include mq($from: medium) {\n    //   padding-top: calc(#{spaceCurveValue('tiny', 'medium')} + 12px);\n    // }\n\n    // @include mq($from: large) {\n    //   padding-top: calc(#{spaceCurveValue('tiny', 'large')} + 12px);\n    // }\n  }\n\n  // &--direction-horizontal &__label {\n  //   &:not(:empty) {\n  //     min-width: var(--label-min-width);\n  //     padding-right: space('xsmall');\n  //   }\n  // }\n\n  // &--direction-horizontal &__label:not(:empty) + &__value {\n  //   &:not(:empty) {\n  //     padding-left: space('xsmall');\n  //   }\n  // }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  // &--direction-horizontal &__leading-icon-container {\n  //   width: 24px;\n  //   height: 24px;\n  // }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space('xsmall');\n  }\n\n  /** Table Variant */\n\n  &--table &__label,\n  &--table &__meta {\n    @include fontSize('nano');\n  }\n\n  &--table &__label {\n    color: $colorGrey70;\n  }\n\n  &--table &__value-text {\n    @include fontSize('milli');\n  }\n\n  &--table &__leading,\n  &--table &__value,\n  &--table &__label,\n  &--table &__meta,\n  &--table &__action-list {\n    &:not(:empty) {\n      padding-top: space('xsmall');\n      padding-bottom: space('small');\n    }\n  }\n\n  &--table &__label:not(:empty) + &__value {\n    padding-left: space('medium');\n  }\n\n  &--table &__meta {\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistVariant,\n  StzhDatalistDirection,\n  StzhStatusType,\n  StzhDatalistItemClickEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton &&\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n              ? this.icon\n              : (this.isPhone\n                ? \"phone\"\n                : (this.external && \"external-link\")\n              )}\n            ></stzh-icon>\n          </div>\n        }\n\n        {isButton &&\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        }\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" &&\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        }\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" &&\n            <div class=\"stzh-datalist-item__label\">{this.label}</div>\n          }\n\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value\n              ?\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n              :\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            }\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel &&\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          }\n          {this._meta.length > 0 &&\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) =>\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length &&\n                    <span class=\"stzh-datalist-item__meta-separator\">|</span>\n                  }\n                </Fragment>\n              )}\n            </span>\n          }\n        </Item>\n      </Fragment>\n    )\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon &&\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        }\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant\n    };\n\n    let ActionItem = isButton\n      ? \"button\"\n      : (hasActionButton\n        ? \"div\"\n        : \"a\"\n        );\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton, hasActionButton)}\n              </div>\n            </Fragment>\n          }\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {/* {this.href && !this.iconHref &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            } */}\n\n            {/* {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            } */}\n\n            {hasActionButton &&\n              (\n                this.iconTooltip\n                ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton()\n              )\n            }\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-datalist.stzh-datalist-item.entry.cjs.js","mappings":"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","names":["media","addMediaChangeListener","removeMediaChangeListener","h","Host","Fragment","index"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":[":host {\n  // @prop --item-label-min-width: Min width of label\n  // --item-label-min-width: 120px;\n  --columns: 1;\n  --columns-gap: #{$gridGutter};\n  --list-display: grid;\n  --list-margin-right: calc(var(--columns-gap) / -1);\n  --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n  --full-grid-column: 1 / 5;\n  --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n  --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n  --grid-template-areas: var(\n    --stzh-datalist-grid-template-areas,\n    \"list list list list\"\n  );\n\n  --grid-template-columns: var(\n    --stzh-datalist-grid-template-columns,\n    #{$gridColumns}\n  );\n\n  margin-left: var(--nested-margin-left);\n\n  @include mq($from: small) {\n    --columns-gap: #{$gridGutterSmall};\n\n    --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --columns-gap: #{$gridGutterMedium};\n\n    --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list list list list list\"\n    );\n\n    --grid-template-columns: var(\n      --stzh-datalist-grid-template-columns,\n      #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --columns-gap: #{$gridGutterLarge};\n  }\n\n  @include mq($from: ultra) {\n    --columns-gap: #{$gridGutterUltra};\n  }\n\n  // @include mq($from: medium) { // was smallheader before\n  //   --item-label-min-width: 144px;\n  // }\n\n  // &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n  //   --item-label-min-width: none;\n  // }\n\n  // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n  // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n  ::slotted(.layout_column) > *:not([class*=\"cq-\"]),\n  ::slotted(*:not([class*=\"cq-\"])) {\n    display: contents;\n  }\n\n  // ::slotted(.layout_column) {\n  //   display: contents;\n\n  //   .section {\n  //     display: contents;\n  //   }\n  // }\n\n  &[is-direction=\"horizontal\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 6;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n\n  &[variant=\"table\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 7;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks */\n\n:host(:has([class*=\"cq-\"])) {\n  --stzh-datalist-item-wrapper-display: flex;\n\n  --list-display: block;\n  --list-margin-right: 0;\n}\n\n.stzh-datalist {\n  // offset margin of nested datalist\n  --stzh-datalist-nested-margin-left: #{space('large')};\n  // details grid columns\n  --stzh-details-content-grid-column: var(--full-grid-column);\n  --stzh-details-content-padding-right: var(--columns-gap);\n  --stzh-details-content-width: var(--details-content-width);\n\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: list;\n    overflow: visible;\n  }\n\n  &__list {\n    display: var(--list-display);\n    border-collapse: collapse;\n    grid-template-columns: var(--list-grid-template-columns);\n    align-items: stretch;\n    margin-right: var(--list-margin-right);\n  }\n\n  /* Multiple Columns */\n\n  &--has-multiple-columns {\n    // display of nested datalist\n    --stzh-datalist-item-nested-display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter,\n  State,\n  Method\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemEntry,\n  StzhDatalistDirection,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistDirectionChangeEvent\n} from \"../../index\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true\n})\nexport class StzhDatalist {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n \n  /** Columns */\n  @Prop({ reflect: true }) columns: number = 1;\n\n  /** Columns above small breakpoint */\n  @Prop({ reflect: true }) columnsSmall: number;\n\n  /** Columns above medium breakpoint  */\n  @Prop({ reflect: true }) columnsMedium: number;\n\n  /** Columns above large breakpoint  */\n  @Prop({ reflect: true }) columnsLarge: number;\n\n  /** Columns above ultra breakpoint  */\n  @Prop({ reflect: true }) columnsUltra: number;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\n\n  /**\n   * Whether to disable min-width of datalist item label for the `horizontal` variant.\n   *\n   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n   *\n   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n   */\n  // @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n  /**\n   * Items in datalist\n   * Array of objects that must at least include `value` attribute.\n   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n   * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n   */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n  private _items: StzhDatalistItemEntry[] = [];\n\n  /** Variant attribute change event */\n  @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.setCurrentDirection();\n  }\n\n  @Watch(\"columns\")\n  @Watch(\"columnsSmall\")\n  @Watch(\"columnsMedium\")\n  @Watch(\"columnsLarge\")\n  @Watch(\"columnsUltra\")\n  columnsWatcher() {\n    this.setCurrentColumns();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: StzhDatalistDirection) {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhDatalistVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  /** Get current direction */\n  @Method()\n  async getCurrentDirection() {\n    return this.currentDirection;\n  }\n\n  @State() currentColumns: number = 1;\n  @State() currentDirection: StzhDatalistDirection;\n\n  private setCurrentDirection = () => {\n    if (media(\"ultra\").matches && this.directionUltra) {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge) {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium) {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall) {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  }\n\n  private setCurrentColumns = () => {\n    if (media(\"ultra\").matches && this.columnsUltra) {\n      this.currentColumns = this.columnsUltra;\n    } else if (media(\"large\").matches && this.columnsLarge) {\n      this.currentColumns = this.columnsLarge;\n    } else if (media(\"medium\").matches && this.columnsMedium) {\n      this.currentColumns = this.columnsMedium;\n    } else if (media(\"small\").matches && this.columnsSmall) {\n      this.currentColumns = this.columnsSmall;\n    } else {\n      this.currentColumns = this.columns;\n    }\n  }\n\n  resizeHandler = () => {\n    this.setCurrentDirection();\n    this.setCurrentColumns();\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.resizeHandler();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.resizeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.resizeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datalist\": true,\n      \"stzh-datalist--has-multiple-columns\": this.currentColumns > 1,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n      [`stzh-datalist--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host\n        is-direction={this.currentDirection}\n        style={{\n          '--columns': this.currentColumns ? this.currentColumns.toString() : null\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-datalist__wrapper\">\n            <div class=\"stzh-datalist__list\" role=\"list\">\n              {this._items.map((item) =>\n                <stzh-datalist-item {...item}>\n                  {item.items && item.items.length > 0 &&\n                    <stzh-datalist items={item.items}></stzh-datalist>\n                  }\n                </stzh-datalist-item>\n              )}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --value-font-family: var(--stzh-font-family-medium);\n  --value-font-weight: var(--stzh-font-weight-medium);\n  --value-color: inherit;\n  --action-display: flex;\n  // --label-min-width: var(--item-label-min-width, none);\n  // --leading-icon-background-color: transparent;\n  --leading-icon-color: #{$colorGrey90};\n  --nested-display: var(--stzh-datalist-item-nested-display, block);\n  --wrapper-display: var(--stzh-datalist-item-wrapper-display, contents);\n\n  // --hover-leading-icon-background-color: var(--leading-icon-background-color);\n  // --hover-leading-icon-color: var(--leading-icon-color);\n\n  // --horizontal-min-height: 48px;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --value-color: #{$linkColor};\n    --value-hover-color: #{$linkHoverColor};\n  }\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n  display: var(--wrapper-display);\n  align-items: center;\n\n  &__nested {\n    display: contents;\n  }\n\n  &__nested-inner {\n    display: var(--nested-display);\n    grid-column: var(--full-grid-column);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: grid;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    text-align: left;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space('xsmall');\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    // background-color: var(--leading-icon-background-color);\n    // display: flex;\n    // justify-content: center;\n    // align-items: center;\n    // border-radius: 50%;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value-wrapper {\n    display: flex;\n    align-items: center;\n    gap: space('xsmall');\n    color: var(--value-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    flex-grow: 1;\n    flex-direction: column;\n  }\n\n  &__value-text {\n    --color: initial;\n\n    @include fontCurve('p1');\n    font-family: var(--value-font-family);\n    font-weight: var(--value-font-weight);\n    width: auto;\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve('caption');\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__meta-text {\n    display: flex;\n    gap: space('xsmall');\n    color: $colorGrey70;\n  }\n\n  &__label {\n    color: $colorGrey90;\n  }\n\n  &__label-icon {\n\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightSmall;\n      height: $formInputHeightSmall;\n    }\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive &__value-text {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__value-wrapper {\n    color: var(--value-hover-color);\n  }\n\n  // &--is-interactive:hover &__leading-icon-container,\n  // &--is-interactive:focus-within &__leading-icon-container {\n  //   color: var(--hover-leading-icon-color);\n  //   background-color: var(--hover-leading-icon-background-color);\n  // }\n\n  /* Vertical Variant */\n\n  &--direction-vertical &__leading,\n  &--direction-vertical &__wrapper,\n  &--direction-vertical &__action-list {\n    &:not(:empty) {\n      padding-top: space('xsmall');\n      padding-bottom: space('xsmall');\n    }\n  }\n\n  // &--direction-vertical &__leading-icon-container {\n  //   width: 40px;\n  //   height: 40px;\n  // }\n\n  // &--direction-vertical &__leading-icon {\n  //   --size: #{iconSize('medium')};\n  // }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  /* Horizontal / Table Variant */\n\n  // &--direction-horizontal &__leading,\n  // &--direction-horizontal &__value,\n  // // &--direction-horizontal &__label,\n  // &--direction-horizontal &__meta,\n  // &--direction-horizontal &__action-list {\n  //   min-height: var(--horizontal-min-height);\n  // }\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n    // &--direction-horizontal &__label,\n  &--direction-horizontal &__action-list {\n    &:not(:empty) {\n      // @include spaceCurve('padding-top', 'tiny');\n      // @include spaceCurve('padding-bottom', 'tiny');\n      padding-top: space('xxsmall');\n      padding-bottom: space('xxsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    // @include spaceCurve('padding-bottom', 'tiny');\n    padding-bottom: space('xxsmall');\n    padding-top: calc(#{space('xxsmall')} + 12px);\n    // padding-top: calc(#{spaceCurveValue('tiny')} + 12px);\n\n    // @include mq($from: medium) {\n    //   padding-top: calc(#{spaceCurveValue('tiny', 'medium')} + 12px);\n    // }\n\n    // @include mq($from: large) {\n    //   padding-top: calc(#{spaceCurveValue('tiny', 'large')} + 12px);\n    // }\n  }\n\n  // &--direction-horizontal &__label {\n  //   &:not(:empty) {\n  //     min-width: var(--label-min-width);\n  //     padding-right: space('xsmall');\n  //   }\n  // }\n\n  // &--direction-horizontal &__label:not(:empty) + &__value {\n  //   &:not(:empty) {\n  //     padding-left: space('xsmall');\n  //   }\n  // }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  // &--direction-horizontal &__leading-icon-container {\n  //   width: 24px;\n  //   height: 24px;\n  // }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space('xsmall');\n  }\n\n  /** Table Variant */\n\n  &--table &__label,\n  &--table &__meta {\n    @include fontSize('nano');\n  }\n\n  &--table &__label {\n    color: $colorGrey70;\n  }\n\n  &--table &__value-text {\n    @include fontSize('milli');\n  }\n\n  &--table &__leading,\n  &--table &__value,\n  &--table &__label,\n  &--table &__meta,\n  &--table &__action-list {\n    &:not(:empty) {\n      padding-top: space('xsmall');\n      padding-bottom: space('small');\n    }\n  }\n\n  &--table &__label:not(:empty) + &__value {\n    padding-left: space('medium');\n  }\n\n  &--table &__meta {\n    &:not(:empty) {\n      padding-left: space('medium');\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistVariantChangeEvent,\n  StzhDatalistVariant,\n  StzhDatalistDirection,\n  StzhStatusType,\n  StzhDatalistItemClickEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation) */\n  @Prop() icon: string;\n\n  /** Icon position */\n  @Prop() iconPosition: \"left\" | \"right\" = \"right\";\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Href of action button */\n  @Prop() iconHref: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop({ reflect: true }) meta: string | string[] = \"\";\n  private _meta: string[] = [];\n\n  /** Status Label */\n  @Prop({ reflect: true }) statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: StzhStatusType = \"default\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  /** Item click event */\n  @Event() stzhClick: EventEmitter<StzhDatalistItemClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"meta\")\n  metaWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._meta = JSON.parse(newValue);\n      } catch (ex) {\n        this._meta = newValue === \"\" ? [] : [newValue];\n      }\n    } else {\n      this._meta = newValue;\n    }\n  }\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  @Watch(\"href\")\n  hrefWatcher() {\n    this.isPhone = this.href && (this.href.startsWith(\"tel:\") || this.href.startsWith(\"fax:\"));\n  }\n\n  @State() direction: StzhDatalistDirection = \"vertical\";\n  @State() variant: StzhDatalistVariant = \"default\";\n\n  private external: boolean = false;\n  private isPhone: boolean = false;\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private onActionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleVariantChange = (event: CustomEvent<StzhDatalistVariantChangeEvent>) => {\n    this.variant = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean, hasActionButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    const Icon = () => (\n      <Fragment>\n        {(this.href || this.icon) && !hasActionButton && !isButton &&\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon\n              ? this.icon\n              : (this.isPhone\n                ? \"phone\"\n                : (this.external && \"external-link\")\n              )}\n            ></stzh-icon>\n          </div>\n        }\n\n        {isButton &&\n          <div class=\"stzh-datalist-item__label-icon\">\n            <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n            <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n          </div>\n        }\n      </Fragment>\n    );\n\n    return (\n      <Fragment>\n        {this.variant === \"table\" &&\n          <Item\n            aria-hidden={this.label ? null : \"true\"}\n            tabindex=\"-1\"\n            id={`${this.datalistItemId}-label`}\n            class={{\n              \"stzh-datalist-item__label\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n            onClick={this.onClick}\n          >\n            {this.label}\n          </Item>\n        }\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          // aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-labelledby={Item !== 'div' ? `${this.variant === \"table\" ? `${this.datalistItemId}-label` : ''} ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n          onClick={this.onClick}\n        >\n          {this.variant === \"default\" &&\n            <div class=\"stzh-datalist-item__label\">{this.label}</div>\n          }\n\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n\n          <div class=\"stzh-datalist-item__value-wrapper\">\n            {this.iconPosition === \"left\" && <Icon></Icon>}\n            {this.value\n              ?\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\" innerHTML={this.value}></stzh-text>\n              :\n              <stzh-text curve=\"none\" class=\"stzh-datalist-item__value-text\">\n                <slot name=\"value\"></slot>\n              </stzh-text>\n            }\n            {this.iconPosition === \"right\" && <Icon></Icon>}\n          </div>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this._meta.length > 0 ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          onClick={this.onClick}\n        >\n          {this.statusLabel &&\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          }\n          {this._meta.length > 0 &&\n            <span class=\"stzh-datalist-item__meta-text\">\n              {this._meta.map((meta, index) =>\n                <Fragment>\n                  <span class=\"stzh-datalist-item__meta-text-inner\">{meta}</span>\n                  {index + 1 !== this._meta.length &&\n                    <span class=\"stzh-datalist-item__meta-separator\">|</span>\n                  }\n                </Fragment>\n              )}\n            </span>\n          }\n        </Item>\n      </Fragment>\n    )\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n        onClick={this.onClick}\n      >\n        {this.leadingIcon &&\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        }\n      </Item>\n    );\n  }\n\n  async componentDidLoad() {\n    // execute connectedCallbck again, because sometimes has problem rendering\n    this.connectedCallback();\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.metaWatcher(this.meta);\n    this.externalWatcher();\n    this.hrefWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.variant = this.datalist.variant;\n      this.direction = await this.datalist.getCurrentDirection();\n\n      this.datalist?.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist?.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist?.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.datalist = null;\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !!((!this.href || this.iconHref || this.iconTooltip) && this.icon);\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction && this.variant === \"default\",\n      [`stzh-datalist-item--${this.variant}`]: !!this.variant\n    };\n\n    let ActionItem = isButton\n      ? \"button\"\n      : (hasActionButton\n        ? \"div\"\n        : \"a\"\n        );\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true\n          }}\n          variant=\"tertiary\"\n          size=\"small\"\n          aria-label={this.iconLabel}\n          iconOnly={true}\n          href={this.iconHref}\n          icon={this.icon}\n          onClick={this.onActionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" || this.variant === \"table\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton, hasActionButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton, hasActionButton)}\n              </div>\n            </Fragment>\n          }\n          <ActionItem\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href && !this.iconHref\n            }}\n            href={!this.iconHref ? this.href : null}\n            rel={!this.iconHref ? this.rel : null}\n            target={!this.iconHref ? this.target : null}\n            download={!this.iconHref ? this.download : null}\n          >\n            {/* {this.href && !this.iconHref &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            } */}\n\n            {/* {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            } */}\n\n            {hasActionButton &&\n              (\n                this.iconTooltip\n                ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton()\n              )\n            }\n          </ActionItem>\n\n          <div class=\"stzh-datalist-item__spacer\"></div>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/stzh-datepicker_3.cjs.entry.js

@@ -200,7 +200,7 @@ const StzhRadio = class {
         component: "stzh-radio",
         originalEvent: event,
         value: this.value,
-        checked: this.checked
+        checked: this.checked,
       });
     };
     this.onRootFocus = () => {
@@ -211,27 +211,27 @@ const StzhRadio = class {
     };
     this.onFocus = (event) => {
       this.focusedByInput = true;
-      const focusEvent = new FocusEvent('focus', {
+      const focusEvent = new FocusEvent("focus", {
         view: window,
         bubbles: false,
-        cancelable: false
+        cancelable: false,
       });
       this.element.dispatchEvent(focusEvent);
       this.stzhFocus.emit({
         component: "stzh-radio",
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.onBlur = (event) => {
-      const blurEvent = new FocusEvent('blur', {
+      const blurEvent = new FocusEvent("blur", {
         view: window,
         bubbles: false,
-        cancelable: false
+        cancelable: false,
       });
       this.element.dispatchEvent(blurEvent);
       this.stzhBlur.emit({
         component: "stzh-radio",
-        originalEvent: event
+        originalEvent: event,
       });
     };
     this.localization = undefined;
@@ -283,14 +283,14 @@ const StzhRadio = class {
     this.errorWatcher(this.error);
     this.defaultChecked = typeof this.defaultChecked === "boolean" ? this.defaultChecked : this.checked;
     if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "radio");
     }
   }
   render() {
-    var _a;
-    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
-    const errorUsed = utils.hasSlot(this.element, 'error') || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    var _a, _b;
+    const descriptionUsed = utils.hasSlot(this.element, "description") || !!this.description;
+    const descriptionLongUsed = utils.hasSlot(this.element, "description-long") || !!this.descriptionLong;
+    const errorUsed = utils.hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
     const classes = {
       "stzh-radio": true,
       "stzh-radio--has-description": descriptionUsed,
@@ -298,14 +298,13 @@ const StzhRadio = class {
       "stzh-radio--has-error": errorUsed,
       "stzh-radio--is-required": this.required,
       "stzh-radio--is-invalid": this.invalid || errorUsed,
-      "stzh-radio--is-disabled": this.disabled
+      "stzh-radio--is-disabled": this.disabled,
     };
-    return (index.h(index.Host, { "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { class: classes }, index.h("label", { class: "stzh-radio__field-wrapper" }, index.h("input", { class: "stzh-radio__input", ref: (el) => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("div", { class: "stzh-radio__mark" }, index.h("div", { class: "stzh-radio__check" })), index.h("div", { class: "stzh-radio__label" }, this.label ? this.label : index.h("slot", null), !this.hideOptional &&
-      index.h("span", { class: "stzh-radio__marker" }, index.h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
-        ? this.localization.$globals.requiredFieldMarker
-        : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-radio__marker-text" }, this.required
-        ? this.localization.$globals.requiredFieldText
-        : this.localization.$globals.optionalFieldText)))), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+    return (index.h(index.Host, { "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, index.h("div", { class: classes }, index.h("label", { class: "stzh-radio__field-wrapper" }, index.h("input", { class: "stzh-radio__input", ref: el => (this.input = el), type: "radio", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("div", { class: "stzh-radio__mark" }, index.h("div", { class: "stzh-radio__check" })), index.h("div", { class: "stzh-radio__label" }, this.label ? this.label : index.h("slot", null), !this.hideOptional && (index.h("span", { class: "stzh-radio__marker" }, index.h("span", { class: "stzh-radio__marker-symbol", "aria-hidden": "true" }, this.required
+      ? this.localization.$globals.requiredFieldMarker
+      : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-radio__marker-text" }, this.required
+      ? this.localization.$globals.requiredFieldText
+      : this.localization.$globals.optionalFieldText))))), (((_b = this._error) === null || _b === void 0 ? void 0 : _b.length) > 0 || this.description) && (index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-radio", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {
@@ -316,7 +315,7 @@ StzhRadio.style = stzhRadioCss;
 
 const stzhRadiogroupCss = ".sc-stzh-radiogroup-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-radiogroup-h{display:none}.sc-stzh-radiogroup-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::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-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}[disabled].sc-stzh-radiogroup-h:not([disabled=false]){--description-color:var(--stzh-color-grey70)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error60)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-top:0}}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:flex;justify-content:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:flex;align-items:flex-start;flex-direction:column;gap:var(--stzh-space-medium)}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-heading-color);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup__marker.sc-stzh-radiogroup{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{flex-wrap:wrap;flex-direction:row;row-gap:var(--stzh-space-medium);-moz-column-gap:var(--stzh-space-xxlarge);column-gap:var(--stzh-space-xxlarge)}";
 
-const SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';
+const SELECTOR_RADIO = "stzh-radio, stzh-button[type=radio], stzh-card";
 let radiogroupCounter = 0;
 const StzhRadiogroup = class {
   constructor(hostRef) {
@@ -407,14 +406,14 @@ const StzhRadiogroup = class {
   }
   updateRadiosProperty(prop, value) {
     this.radios.forEach((radio) => {
-      if (prop === "name" || (this._preventUpdateProperties.indexOf(prop) === -1)) {
+      if (prop === "name" || this._preventUpdateProperties.indexOf(prop) === -1) {
         radio[stringUtils.camelCase(prop)] = value;
       }
     });
   }
   get errorUsed() {
     var _a;
-    return utils.hasSlot(this.element, 'error') || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    return utils.hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
   }
   updateCheckedRadioByValue(value) {
     this.checkedRadio = this.radios.find(radio => radio.value === value);
@@ -439,7 +438,7 @@ const StzhRadiogroup = class {
     this.errorWatcher(this.error);
     this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);
     if (!this.localization) {
-      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radiogroup');
+      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "radiogroup");
     }
   }
   componentShouldUpdate(_newValue, _oldValue, prop) {
@@ -469,8 +468,9 @@ const StzhRadiogroup = class {
     }
   }
   render() {
-    const descriptionUsed = utils.hasSlot(this.element, 'description') || !!this.description;
-    const descriptionLongUsed = utils.hasSlot(this.element, 'description-long') || !!this.descriptionLong;
+    var _a;
+    const descriptionUsed = utils.hasSlot(this.element, "description") || !!this.description;
+    const descriptionLongUsed = utils.hasSlot(this.element, "description-long") || !!this.descriptionLong;
     const classes = {
       "stzh-radiogroup": true,
       "stzh-radiogroup--has-description": descriptionUsed,
@@ -480,15 +480,13 @@ const StzhRadiogroup = class {
       "stzh-radiogroup--is-disabled": this.disabled,
       "stzh-radiogroup--is-invalid": this.invalid || this.errorUsed,
       "stzh-radiogroup--hide-legend": this.hideLegend,
-      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction
+      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction,
     };
-    return (index.h(index.Host, { "is-invalid": this.invalid || this.errorUsed }, index.h("fieldset", { class: classes }, this.legend &&
-      index.h("legend", { class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional &&
-        index.h("span", { class: "stzh-radiogroup__marker" }, index.h("span", { class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
-          ? this.localization.$globals.requiredFieldMarker
-          : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-radiogroup__marker-text" }, this.required
-          ? this.localization.$globals.requiredFieldText
-          : this.localization.$globals.optionalFieldText))), index.h("div", { class: "stzh-radiogroup__fields" }, index.h("slot", null)), index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel }))));
+    return (index.h(index.Host, { "is-invalid": this.invalid || this.errorUsed }, index.h("fieldset", { class: classes }, this.legend && (index.h("legend", { class: "stzh-radiogroup__legend" }, this.legend, !this.hideOptional && (index.h("span", { class: "stzh-radiogroup__marker" }, index.h("span", { class: "stzh-radiogroup__marker-symbol", "aria-hidden": "true" }, this.required
+      ? this.localization.$globals.requiredFieldMarker
+      : this.localization.$globals.optionalFieldMarker), index.h("span", { class: "stzh-radiogroup__marker-text" }, this.required
+      ? this.localization.$globals.requiredFieldText
+      : this.localization.$globals.optionalFieldText))))), index.h("div", { class: "stzh-radiogroup__fields" }, index.h("slot", null)), (((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0 || this.description) && (index.h(stzhInputDescription.StzhInputDescription, { classPrefix: "stzh-radiogroup", id: `${this.radiogroupId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
   }
   get element() { return index.getElement(this); }
   static get watchers() { return {