@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/stzh-components/p-c877d32c.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,f as a,h as c,F as r,a as i,g as e}from"./p-c7bfac7a.js";import{s as h,h as d}from"./p-7e304ea3.js";import"./p-9b063923.js";const n='.sc-stzh-card-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-card-h .has-focus.sc-stzh-card{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card{outline-style:none !important}.sc-stzh-card-h .stzh-fylingfocus-focused.sc-stzh-card::-moz-focus-inner{border:0 !important}.sc-stzh-card-h{--border-radius:0px;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:flex;flex-direction:column;position:relative;border-radius:var(--border-radius)}@media print{.sc-stzh-card-h{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{overflow:hidden}.is-drag.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-ghost.sc-stzh-card-h,.is-selected.sc-stzh-card-h,.is-drag .sc-stzh-card-h,.is-chosen .sc-stzh-card-h,.is-ghost .sc-stzh-card-h,.is-selected .sc-stzh-card-h,[is-sortable].sc-stzh-card-h:hover{--dnd-visibility:visible;--dnd-opacity:1}.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%}.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.stzh-card.sc-stzh-card{flex-grow:1;display:flex;flex-direction:column;background-color:var(--stzh-color-white);border-radius:var(--border-radius)}.stzh-card__content-wrapper.sc-stzh-card{position:relative;flex-grow:1;display:flex;flex-direction:column;min-height:var(--content-min-height)}.stzh-card__dnd.sc-stzh-card{--size:var(--stzh-icon-size-xsmall);position:absolute;left:0.1875rem;top:1.4375rem;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 900px){.stzh-card__dnd.sc-stzh-card{display:block}}@media screen and (min-width: 1260px){.stzh-card__dnd.sc-stzh-card{left:0.25rem;top:1.6875rem}}.stzh-card__header-top.sc-stzh-card{display:flex;justify-content:space-between;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:inline-flex;margin-top:var(--stzh-space-xsmall);gap:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-medium)}}.stzh-card__left.sc-stzh-card{align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-card__image-link.sc-stzh-card{display:block}.stzh-card__subtitle.sc-stzh-card{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);display:flex;align-items:center;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}.stzh-card__subtitle-text.sc-stzh-card{position:relative;display:inline-flex;padding-left:0.5625em}.stzh-card__subtitle-text.sc-stzh-card::after{content:",";position:absolute;left:0}.stzh-card__content.sc-stzh-card{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);flex-grow:1}.stzh-card__card-actions.sc-stzh-card{display:inline-flex;white-space:nowrap}@media screen and (max-width: 899px){.stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}}.stzh-card__card-action[variant=tertiary].sc-stzh-card{--color:var(--stzh-base-color)}.stzh-card__card-action.is-button.sc-stzh-card{--icon-size:var(--stzh-icon-size-small)}.stzh-card__card-action.is-placeholder.sc-stzh-card{width:var(--stzh-space-xxlarge);height:var(--stzh-space-xxlarge)}.stzh-card__card-action-popover.sc-stzh-card{--width:auto}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{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)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{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)}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-card--service.sc-stzh-card .stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge);padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 900px) and (min-width: 900px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px) and (min-width: 1260px){.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding:var(--stzh-space-xxlarge)}}.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}.stzh-card--has-header.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xsmall)}.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-header.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-top:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-card--has-footer.stzh-card--has-content.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-medium);padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--service.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-right:var(--stzh-space-xxlarge)}}.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.stzh-card--has-content.stzh-card--service.sc-stzh-card .stzh-card__content.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--has-tag.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-top:var(--stzh-space-xxxlarge)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__content.sc-stzh-card{transition:color var(--stzh-base-transition-animation-speed)}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary);-webkit-text-decoration-line:none;text-decoration-line:none;border-radius:var(--stzh-button-border-radius);cursor:pointer}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::before,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card::after{z-index:1}.stzh-card--has-link.sc-stzh-card .stzh-card__card-actions.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__header-meta.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-actionset.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__footer-select-button.sc-stzh-card{position:relative;z-index:2}.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__image-link:hover) .stzh-card__content.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card:has(.stzh-card__title-link:hover) .stzh-card__content.sc-stzh-card{color:var(--stzh-color-secondary60)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary)}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:hover,.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .hide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .hide-when-collapsed.sc-stzh-card{display:none}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-card--is-collapsed.stzh-card--service.sc-stzh-card .stzh-card__header.sc-stzh-card{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__card-action.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__card-action.sc-stzh-card{--icon-text-margin:0px;--badge-icon-text-margin:0px}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card{color:var(--stzh-color-primary)}.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:hover,.stzh-card--is-starred.sc-stzh-card .stzh-card__card-action.is-star.sc-stzh-card:focus{color:var(--stzh-color-primary-hover)}';const l=class{constructor(c){t(this,c);this.stzhClick=s(this,"stzhClick",7);this.stzhCollapse=s(this,"stzhCollapse",7);this.stzhSubtitleClick=s(this,"stzhSubtitleClick",7);this.stzhStarClick=s(this,"stzhStarClick",7);this.stzhHeaderActionClick=s(this,"stzhHeaderActionClick",7);this._subtitles=[];this.nodeChange=t=>{let s=false;t.forEach((t=>{if(t.target.closest("[slot]")||t.target.hasAttribute("slot")){s=true}}));if(s){a(this.element)}};this.headerClick=t=>{if(!this.collapsible){return}const s=["stzh-popover","stzh-tooltip","button","a","input","select","textarea","iframe","details","label","area"];const a=t.composedPath().map((t=>{var s;return(s=t.tagName)===null||s===void 0?void 0:s.toLowerCase()}));const c=a.some((t=>s.includes(t)));if(!c){this.collapsed=!this.collapsed;this.stzhCollapse.emit({component:"stzh-card",collapsed:this.collapsed})}};this.subtitleClick=t=>{if(this.subtitleInteractive){this.stzhSubtitleClick.emit({component:"stzh-card",originalEvent:t})}};this.starToggleClick=t=>{this.stzhStarClick.emit({component:"stzh-card",starred:this.starred,originalEvent:t})};this.actionClick=(t,s)=>{this.stzhHeaderActionClick.emit({component:"stzh-card",action:s,originalEvent:t})};this.arrowUpClick=()=>{const t=this.element.closest("stzh-sortable");if(t){const s=this.findSortableChildElement();t.moveItem(s,"up")}};this.arrowDownClick=()=>{const t=this.element.closest("stzh-sortable");if(t){const s=this.findSortableChildElement();t.moveItem(s,"down")}};this.updateElementInsideSortable=()=>{const t=this.element.closest("stzh-sortable");if(!t){this.sortable.removeEventListener("stzhUpdate",this.updateElementInsideSortable);this.sortable.removeEventListener("stzhDisable",this.updateElementInsideSortable);return}if(this.element){a(this.element)}};this.init=()=>{const t=this.element.querySelectorAll('stzh-chip[slot="meta"], [slot="meta"] stzh-chip');const s=this.element.querySelectorAll('stzh-text[slot="content"], [slot="meta"] stzh-text');t.forEach((t=>{h(t,{size:"small"})}));s.forEach((t=>{h(t,{size:"inherit"})}))};this.handleMutation=t=>{this.init();this.nodeChange(t)};this.handleSelectionChange=t=>{this.checked=t.detail.checked};this.handleCardClick=t=>{this.stzhClick.emit({component:"stzh-card",originalEvent:t,href:this.href})};this.localization=undefined;this.variant="default";this.collapsed=false;this.starred=false;this.starrable=false;this.selectable=false;this.checked=false;this.name="";this.href=undefined;this.target=undefined;this.value="";this.disabled=false;this.heading="";this.headingLevel="3";this.subtitle="";this.headerActions=[];this.headerActionsBadge=undefined;this.headerActionsBadgeType=undefined;this.footerActions=[];this.subtitleInteractive=false;this.sortableDisabled=false;this.collapsible=false;this.hideMovementActions=false;this.analyticsId=undefined}subtitleWatcher(t){if(typeof t==="string"){if(t===""){this._subtitles=[]}else{try{this._subtitles=JSON.parse(t)}catch(s){this._subtitles=[t]}}}else{this._subtitles=t}}headerActionsWatcher(t){if(typeof t==="string"){this._headerActions=JSON.parse(t)}else{this._headerActions=t}}footerActionsWatcher(t){if(typeof t==="string"){this._footerActions=JSON.parse(t)}else{this._footerActions=t}}findSortableChildElement(){const t=this.element.closest("stzh-sortable");if(t){let s=this.element;let a=null;if(typeof t.container==="function"){a=t.container()}else{a=t.container}while(s.parentElement&&s.parentElement!==a){s=s.parentElement}return s}}async componentWillLoad(){this.subtitleWatcher(this.subtitle);this.headerActionsWatcher(this.headerActions);this.footerActionsWatcher(this.footerActions);if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"card")}}componentDidLoad(){this.sortable=this.element.closest("stzh-sortable");if(this.sortable){this.sortable.addEventListener("stzhUpdate",this.updateElementInsideSortable);this.sortable.addEventListener("stzhDisable",this.updateElementInsideSortable)}}componentDidRender(){requestAnimationFrame((()=>{var t,s,a;const c=this.analyticsId||((t=this.headingTextElement)===null||t===void 0?void 0:t.innerText);if(c){(s=this.imageLinkElement)===null||s===void 0?void 0:s.setAttribute("s-object-id",c);(a=this.titleLinkElement)===null||a===void 0?void 0:a.setAttribute("s-object-id",c)}}))}connectedCallback(){this.init();this.observer=new MutationObserver(this.handleMutation);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){var t,s,a,e;const h=d(this.element,"image");const n=d(this.element,"heading");const l=d(this.element,"footer");const z=d(this.element,"content");const o=`h${this.headingLevel}`;const p=`${this.subtitleInteractive?"button":"span"}`;const m=this.findSortableChildElement();const g=(m===null||m===void 0?void 0:m.parentElement)&&Array.from((t=m===null||m===void 0?void 0:m.parentElement)===null||t===void 0?void 0:t.children).indexOf(m)===0;const _=(m===null||m===void 0?void 0:m.parentElement)&&Array.from((s=m===null||m===void 0?void 0:m.parentElement)===null||s===void 0?void 0:s.children).indexOf(m)===((a=m===null||m===void 0?void 0:m.parentElement)===null||a===void 0?void 0:a.children.length)-1;const v=!this.sortableDisabled&&this.sortable&&!this.sortable.disabled;const f=v&&!this.hideMovementActions;const u=!!this.heading||n;const x=u||this._subtitles.length>0||this._headerActions.length>0||this.starrable||f;const b=l||this._footerActions.length>0||this.selectable;const w=this._headerActions.filter((t=>!!t.badge||t.badgeEmpty));const y={"stzh-card":true,"stzh-card--has-link":!!this.href,"stzh-card--has-image":h,"stzh-card--has-content":z,"stzh-card--has-subtitle":!!this.subtitle,"stzh-card--has-subtitle-interactive":!!this.subtitle&&this.subtitleInteractive,"stzh-card--has-header":x,"stzh-card--has-footer":b,"stzh-card--is-collapsible":this.collapsible,"stzh-card--is-collapsed":this.collapsed,"stzh-card--is-starred":this.starred,"stzh-card--is-checked":this.checked,"stzh-card--is-sortable":v,[`stzh-card--${this.variant}`]:!!this.variant};return c(i,{role:"listitem","aria-label":this.heading,"is-sortable":v},c("article",{class:y},c("a",{ref:t=>this.imageLinkElement=t,"aria-hidden":"true",tabindex:"-1",class:"stzh-card__image-link",href:this.href,target:this.target,onClick:this.href?this.handleCardClick:null},c("slot",{name:"image"})),c("div",{class:"stzh-card__content-wrapper"},c("stzh-icon",{class:"stzh-card__dnd",name:"drag"}),c("header",{class:"stzh-card__header",onClick:this.headerClick},c("div",{class:"stzh-card__header-top"},c("div",{class:"stzh-card__header-left"},c("div",{class:"stzh-card__title-area"},u&&c(o,{class:"stzh-card__title"},c("a",{ref:t=>this.titleLinkElement=t,class:"stzh-card__title-link",href:this.href,target:this.target,onClick:this.href?this.handleCardClick:null},c("div",{ref:t=>this.headingTextElement=t},this.heading?this.heading:c("slot",{name:"heading"})))),this._subtitles.length>0&&c(p,{class:"stzh-card__subtitle",onClick:this.subtitleClick},this._subtitles.map((t=>c("span",{class:"stzh-card__subtitle-text"},t)))))),c("div",{class:"stzh-card__header-right"},c("div",{class:"stzh-card__card-actions"},this.starrable&&c("stzh-tooltip",null,c("stzh-button",{class:"stzh-card__card-action is-star",icon:this.starred?"star-filled":"star",variant:"tertiary",size:"tiny",iconOnly:true,onClick:this.starToggleClick}),c("div",{slot:"content"},this.starred?this.localization.actionRemove:this.localization.actionAdd)),(this._headerActions.length>0||this.starrable||f)&&c("stzh-popover",{label:this.localization.actionsPopoverLabel,placement:"bottom-end",class:{"stzh-card__card-action-popover":true}},c("stzh-button",{class:"stzh-card__card-action is-further",variant:"tertiary",size:"tiny",icon:"more-vertical",iconOnly:true,badge:this.headerActionsBadge,badgeEmpty:w.length>0,badgePosition:"icon",badgeType:this.headerActionsBadgeType||((e=w[0])===null||e===void 0?void 0:e.badgeType)||"default"}),c("stzh-menu",{slot:"content"},this._headerActions.map((t=>c("stzh-menu-item",{icon:t.icon,badge:t.badge,badgeEmpty:t.badgeEmpty,badgeType:t.badgeType,onClick:s=>{this.actionClick(s,t)}},t.label))),f&&c(r,null,!g&&c("stzh-menu-item",{icon:"arrow-up",onClick:this.arrowUpClick},this.localization.actionMoveUp),!_&&c("stzh-menu-item",{icon:"arrow-down",onClick:this.arrowDownClick},this.localization.actionMoveDown)),this.starrable&&c("stzh-menu-item",{icon:this.starred?"star-filled":"star",onClick:this.starToggleClick},this.starred?this.localization.actionRemove:this.localization.actionAdd)))))),c("div",{class:"stzh-card__header-meta"},c("slot",{name:"meta"}))),c("div",{class:"stzh-card__content hide-when-collapsed"},c("slot",{name:"content"})),c("div",{class:"stzh-card__footer hide-when-collapsed"},c("slot",{name:"footer"},this._footerActions.length>0&&c("stzh-actionset",{class:"stzh-card__footer-actionset",actions:this._footerActions}),this.selectable&&c("stzh-button",{class:"stzh-card__footer-select-button",fullwidth:true,type:"radio",variant:"secondary",name:this.name,value:this.value,checked:this.checked,disabled:this.disabled,label:this.localization.select,onStzhChange:this.handleSelectionChange}))))))}get element(){return e(this)}static get watchers(){return{subtitle:["subtitleWatcher"],headerActions:["headerActionsWatcher"],footerActions:["footerActionsWatcher"]}}};l.style=n;const z=".sc-stzh-cardlist-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-cardlist-h{display:none}.sc-stzh-cardlist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cardlist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cardlist-h *.sc-stzh-cardlist,.sc-stzh-cardlist-h *.sc-stzh-cardlist::before,.sc-stzh-cardlist-h *.sc-stzh-cardlist::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-cardlist-h .has-focus.sc-stzh-cardlist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cardlist-h .stzh-fylingfocus-focused.sc-stzh-cardlist{outline-style:none !important}.sc-stzh-cardlist-h .stzh-fylingfocus-focused.sc-stzh-cardlist::-moz-focus-inner{border:0 !important}.sc-stzh-cardlist-h{--description-color:var(--stzh-cardlist-description-color, inherit);--background-color:var(--stzh-cardlist-background-color, inherit)}.stzh-cardlist__cards.sc-stzh-cardlist{display:grid;gap:var(--stzh-grid-gutter)}@media screen and (min-width: 600px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-grid-gutter-ultra)}}.stzh-cardlist__header.sc-stzh-cardlist{display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start}@media screen and (min-width: 900px){.stzh-cardlist__header.sc-stzh-cardlist{flex-direction:row}}.stzh-cardlist__description.sc-stzh-cardlist{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);--stzh-icon-color:var(--stzh-color-primary70)}@media screen and (min-width: 900px){.stzh-cardlist__description.sc-stzh-cardlist{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-cardlist__description.sc-stzh-cardlist:not(:empty){margin-bottom:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-cardlist__description.sc-stzh-cardlist:not(:empty){margin-bottom:0}}.stzh-cardlist__description.sc-stzh-cardlist-s>stzh-heading,.stzh-cardlist__description .sc-stzh-cardlist-s>stzh-heading{--color:var(--description-color)}.stzh-cardlist__switch.sc-stzh-cardlist{--color:inherit;align-self:end}.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist.sc-stzh-cardlist:has(.stzh-cardlist__description:not(:empty)) .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--has-toggle-link.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){row-gap:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){row-gap:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){row-gap:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){padding-left:calc(((100% - (var(--stzh-grid-gutter-small) * 3)) / 4) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation:not([has-lead])),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation:not([has-lead])){grid-template-columns:repeat(2, minmax(0, 1fr));padding-left:0}}.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){row-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){grid-template-columns:repeat(2, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-card-navigation[has-lead]),.stzh-cardlist--layout-subpages.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist:has(stzh-pi-content-navigation[has-lead]){grid-template-columns:repeat(3, minmax(0, 1fr))}}.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{row-gap:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media screen and (min-width: 900px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{grid-template-columns:repeat(4, minmax(0, 1fr))}}.stzh-cardlist--layout-searchresults.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xlarge)}.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-fullwidth.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{gap:var(--stzh-space-xxlarge)}}.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{background-color:var(--background-color);position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width));padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 600px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-top:var(--stzh-space-xbig)}}@media screen and (min-width: 600px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist{padding-bottom:var(--stzh-space-xbig)}}.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__header.sc-stzh-cardlist,.stzh-cardlist--layout-pi-teasers.sc-stzh-cardlist .stzh-cardlist__cards.sc-stzh-cardlist{margin-left:auto;margin-right:auto;max-width:84.25rem}}";const o=class{constructor(a){t(this,a);this.stzhCollapseAll=s(this,"stzhCollapseAll",7);this.collapseClick=()=>{const t=Array.from(this.element.querySelectorAll("stzh-card"));t.forEach((t=>{if(t.collapsible){t.collapsed=!this.allCollapsed}}));this.allCollapsed=!this.allCollapsed;this.stzhCollapseAll.emit({component:"stzh-cardlist",allCollapsed:this.allCollapsed})};this.updateCollapsedState=()=>{const t=Array.from(this.element.querySelectorAll("stzh-card"));this.allCollapsed=!t.some((t=>!t.collapsed))};this.sortableGhostClone=t=>{const s=t.tagName.toLowerCase()==="stzh-card"?t:t.querySelector("stzh-card");if(s){const s=t;const a=t.cloneNode(true);a.heading=s.heading;a.subtitle=s.subtitle;a.headerActions=s.headerActions;a.footerActions=s.footerActions;a.hideMovementActions=s.hideMovementActions;return a}};this.localization=undefined;this.layout="fullwidth";this.description=undefined;this.showToggleLink=false;this.sortableEnabled=false;this.sortableDataIdAttribute="data-id";this.allCollapsed=false}collapseListener(){this.updateCollapsedState()}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"cardlist")}}componentDidLoad(){this.updateCollapsedState()}render(){const t={"stzh-cardlist":true,"stzh-cardlist--has-toggle-link":this.showToggleLink,[`stzh-cardlist--layout-${this.layout}`]:!!this.layout};return c(i,null,c("div",{class:t},c("div",{class:"stzh-cardlist__header"},c("div",{class:"stzh-cardlist__description"},this.description?this.description:c("slot",{name:"description"})),this.showToggleLink&&c("stzh-link",{class:"stzh-cardlist__switch",icon:this.allCollapsed?"list-expanded":"list-shrinked",label:this.allCollapsed?this.localization.expandAll:this.localization.collapseAll,onClick:this.collapseClick})),c("stzh-sortable",{disabled:!this.sortableEnabled,dataIdAttribute:this.sortableDataIdAttribute,ghostClone:this.sortableGhostClone},c("div",{class:"stzh-cardlist__cards",role:"list"},c("slot",null)))))}get element(){return e(this)}};o.style=z;export{l as stzh_card,o as stzh_cardlist};
+//# sourceMappingURL=p-c877d32c.entry.js.map

package/dist/stzh-components/{p-6f87ad6e.entry.js.map → p-c877d32c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhCardCss","StzhCard","this","_subtitles","nodeChange","entries","changeInSlot","forEach","entry","target","closest","hasAttribute","forceUpdate","element","headerClick","event","collapsible","filterTags","composedPathTags","composedPath","map","_a","tagName","toLowerCase","found","some","r","includes","collapsed","stzhCollapse","emit","component","subtitleClick","subtitleInteractive","stzhSubtitleClick","originalEvent","starToggleClick","stzhStarClick","starred","actionClick","action","stzhHeaderActionClick","arrowUpClick","sortable","findSortableChildElement","moveItem","arrowDownClick","updateElementInsideSortable","currentSortable","removeEventListener","init","chips","querySelectorAll","texts","chip","setPropsIfNull","size","text","handleMutation","handleSelectionChange","checked","detail","handleCardClick","stzhClick","href","subtitleWatcher","newValue","JSON","parse","err","headerActionsWatcher","_headerActions","footerActionsWatcher","_footerActions","sortableContainer","container","parentElement","componentWillLoad","subtitle","headerActions","footerActions","localization","window","stzhComponents","utils","fetchTranslations","componentDidLoad","addEventListener","componentDidRender","requestAnimationFrame","objectId","analyticsId","headingTextElement","innerText","_b","imageLinkElement","setAttribute","_c","titleLinkElement","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageUsed","hasSlot","headingUsed","footerUsed","contentUsed","Heading","headingLevel","Subtitle","sortableChildElement","isFirstItemInSortable","Array","from","children","indexOf","isLastItemInSortable","length","sortableEnabled","sortableDisabled","disabled","sortableActionsEnabled","hideMovementActions","hasHeading","heading","hasHeader","starrable","hasFooter","selectable","headerActionsWithBadge","filter","badge","badgeEmpty","classes","variant","h","Host","role","class","ref","el","tabindex","onClick","name","icon","iconOnly","slot","actionRemove","actionAdd","label","actionsPopoverLabel","placement","headerActionsBadge","badgePosition","badgeType","headerActionsBadgeType","_d","e","Fragment","actionMoveUp","actionMoveDown","actions","fullwidth","type","value","select","onStzhChange","stzhCardlistCss","StzhCardlist","collapseClick","cards","card","allCollapsed","stzhCollapseAll","updateCollapsedState","sortableGhostClone","dragElement","querySelector","originalElement","clonedElement","cloneNode","collapseListener","showToggleLink","layout","description","expandAll","collapseAll","dataIdAttribute","sortableDataIdAttribute","ghostClone","stzhChipselectCss","chipselectCounter","StzhChipselect","_data","_value","handleReset","async","defaultValue","handleChipClick","data","index","multiple","activeFocusOptionIndex","waitForNextRender","stzhChange","handleKeydown","newActiveIndex","activeOptionIndex","key","preventDefault","resetListener","contains","valueWatcher","ex","dataWatcher","errorWatcher","_error","Promise","resolve","renderPromiseResolve","id","error","descriptionUsed","descriptionLongUsed","descriptionLong","errorUsed","invalid","required","labelHidden","htmlFor","hideOptional","$globals","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","a11yDescribedby","onKeyDown","counter","inverted","active","a11yTabindex","StzhInputDescription","classPrefix","descriptionLongTitle","moreInfoButtonLabel"],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx","src/components/stzh-cardlist/stzh-cardlist.scss?tag=stzh-cardlist&encapsulation=scoped","src/components/stzh-cardlist/stzh-cardlist.tsx","src/components/stzh-chipselect/stzh-chipselect.scss?tag=stzh-chipselect&encapsulation=scoped","src/components/stzh-chipselect/stzh-chipselect.tsx"],"sourcesContent":["/**\n * @prop --content-min-height: Min height of content\n */\n\n:host {\n  // --box-shadow: none;\n  --border-radius: 0px;\n\n  --content-min-height: 120px;\n\n  --dnd-visibility: hidden;\n  --dnd-opacity: 0;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-radius: var(--border-radius);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  &[collapsed]:not([collapsed=\"false\"]) {\n    --content-min-height: none;\n  }\n\n  &[checked]:not([checked=\"false\"]) {\n    outline: 3px solid $colorPrimary;\n  }\n\n  &.is-ghost::after,\n  .is-ghost &::after {\n    border-radius: var(--border-radius);\n  }\n\n  &[href]:hover,\n  &[href]:focus-within,\n  &.is-selected,\n  &.is-chosen,\n  .is-selected &,\n  .is-chosen & {\n    // --box-shadow: #{$boxShadowOverlay};\n  }\n\n  &.is-ghost,\n  .is-ghost & {\n    // --box-shadow: none;\n\n    overflow: hidden;\n  }\n\n  &.is-drag,\n  &.is-chosen,\n  &.is-ghost,\n  &.is-selected,\n  .is-drag &,\n  .is-chosen &,\n  .is-ghost &,\n  .is-selected &,\n  &[is-sortable]:hover {\n    --dnd-visibility: visible;\n    --dnd-opacity: 1;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  ::slotted(img[slot=\"image\"]) {\n    display: block;\n  }\n\n  ::slotted(table) {\n    border: 0;\n    border-spacing: 0;\n\n    th {\n      @include font;\n    }\n\n    td, th {\n      padding: 0;\n    }\n\n    td {\n      color: $colorBlack;\n      padding-left: space('xsmall');\n    }\n  }\n}\n\n.stzh-card {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\t// box-shadow: var(--box-shadow);\n\t// transition: box-shadow $baseTransitionAnimationSpeed;\n\n  // .vshow-medium {\n  //   @include mq($to: medium) {\n  //     @include visuallyhidden;\n  //   }\n  // }\n\n  // .show-medium {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  // .hide-medium {\n  //   @include mq($from: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  &__content-wrapper {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: var(--content-min-height);\n  }\n\n\t&__dnd {\n    --size: #{iconSize('xsmall')};\n\t\tposition: absolute;\n    // INFO: we don't use space() values here, because we want this element to align with the heading\n    left: 3px;\n    top: 23px;\n\t\tdisplay: flex;\n\t\tvisibility: var(--dnd-visibility);\n\t\topacity: var(--dnd-opacity);\n\t\ttransition: all $baseTransitionAnimationSpeed;\n    display: none;\n\n    @include mq($from: medium) {\n      display: block;\n    }\n\n    @include mq($from: large) {\n      // INFO: we don't use space() values here, because we want this element to align with the heading\n      left: 4px;\n      top: 27px;\n    }\n\t}\n\n  &__header-top {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n  }\n\n  &__header-meta {\n    &:not(:empty) {\n      display: inline-flex;\n      margin-top: space('xsmall');\n      gap: space('xsmall');\n    }\n  }\n\n\t&__header-left,\n\t&__header-right {\n\t\tdisplay: flex;\n\t}\n\n\t&__header-right {\n    @include spaceCurve('padding-left', 'tiny');\n\t}\n\n\t&__left {\n\t\talign-self: center;\n\t}\n\n\t&__title-area {\n\t\t@include wordWrap;\n\t\toverflow: hidden;\n\t}\n\n\t&__title,\n\t&__subtitle {\n\t\tmargin: 0;\n\t}\n\n  &__title-link {\n    color: inherit;\n    text-decoration-line: none;\n  }\n\n  &__title {\n    @include font('title');\n    @include fontSize('milli');\n  }\n\n  &__image-link {\n    display: block;\n  }\n\n\t&__subtitle {\n    @include fontSize('milli');\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\ttext-decoration-line: none;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tmargin-left: -0.5625em;\n\t}\n\n\t&__subtitle-text {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tpadding-left: 0.5625em;\n\n\t\t&::after {\n\t\t\tcontent: ',';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t}\n\t}\n\n\t&__content {\n    @include fontSize('milli');\n    flex-grow: 1;\n\t}\n\n  // &__footer-meta {\n  //   @include fontSize('micro');\n  //   display: flex;\n  //   flex-wrap: wrap;\n  //   gap: space('xsmall');\n  //   color: $colorGrey80;\n  // }\n\n  // &__footer-meta-separator {\n  //   width: 1px;\n  //   background-color: currentColor;\n  //   flex-shrink: 0;\n  // }\n\n  &__card-actions {\n\t\tdisplay: inline-flex;\n    white-space: nowrap;\n\t}\n\n\t&__card-action {\n    @include mq($to: medium) {\n      --icon-text-margin: 0px;\n      --badge-icon-text-margin: 0px;\n    }\n\n    &[variant=\"tertiary\"] {\n      --color: #{$baseColor};\n    }\n\n    &.is-button {\n      --icon-size: #{iconSize('small')};\n    }\n\n    &.is-placeholder {\n      width: space('xxlarge');\n      height: space('xxlarge');\n    }\n\n    &.is-star {\n    }\n\t}\n\n  &__card-action-popover {\n    --width: auto;\n  }\n\n  /* Service */\n\n  &--service &__subtitle {\n    @include fontCurve('p1');\n  }\n\n  &--service &__subtitle {\n    @include fontCurve('p1');\n  }\n\n  &--service &__title {\n    @include fontCurve('h3', 'heading');\n  }\n\n  /* Has content */\n\n  &--has-content &__content {\n    @include spaceCurve('padding-bottom', 'large');\n    padding-top: space('xlarge');\n    padding-left: space('medium');\n    padding-right: space('medium');\n\n    @include mq($from: medium) {\n      @include spaceCurve('padding-bottom', 'medium');\n    }\n  }\n\n  &--has-content#{&}--service &__content {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  /* Has header */\n\n  &--has-header &__header {\n    padding-top: space('xlarge');\n    padding-left: space('medium');\n    padding-right: space('medium');\n\t}\n\n  &--has-header#{&}--has-content &__content {\n    padding-top: space('xsmall');\n  }\n\n  &--has-header#{&}--service &__header {\n\t\t@include spaceCurve('padding-top', 'regular');\n\t\t@include spaceCurve('padding-left', 'regular');\n\t\t@include spaceCurve('padding-right', 'regular');\n  }\n\n  &--has-header#{&}--has-content#{&}--service &__content {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has footer */\n\n  &--has-footer &__footer {\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-left: space('medium');\n    padding-right: space('medium');\n  }\n\n  &--has-footer#{&}--has-content &__content {\n    padding-bottom: space('medium');\n  }\n\n  &--has-footer#{&}--service &__footer {\n\t\t@include spaceCurve('padding-bottom', 'regular');\n\t\t@include spaceCurve('padding-left', 'regular');\n\t\t@include spaceCurve('padding-right', 'regular');\n  }\n\n  &--has-footer#{&}--has-content#{&}--service &__content {\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag#{&}--has-header &__header {\n    padding-top: space('xxxlarge');\n  }\n\n  /* Has Link */\n\n  &--has-link &__title-link,\n  &--has-link &__content {\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &--has-link &__title-link {\n    color: $colorPrimary;\n    text-decoration-line: none;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    // &::before {\n    //   transition: all $baseTransitionAnimationSpeed;\n    // }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &--has-link &__card-actions,\n  &--has-link &__header-meta,\n  &--has-link &__footer-actionset,\n  &--has-link &__footer-select-button {\n    position: relative;\n    z-index: 2;\n  }\n\n  &--has-link:has(#{&}__image-link:hover) &__title-link,\n  &--has-link:has(#{&}__image-link:hover) &__content,\n  &--has-link:has(#{&}__title-link:hover) &__title-link,\n  &--has-link:has(#{&}__title-link:hover) &__content {\n    color: $colorSecondary60;\n\n  //   &::before,\n  //   &::before {\n  //     background-color: $colorPrimary20;\n  //   }\n  }\n\n  // &__footer-arrow {\n  //   color: $colorPrimary;\n  // }\n\n  // &--has-link:hover &__footer-arrow {\n  //   color: $colorSecondary60;\n  // }\n\n  /* Interactive Subtitle */\n\n  &--has-subtitle-interactive &__subtitle {\n    cursor: pointer;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background: none;\n    border: none;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /* Is collapsible */\n\n  &--is-collapsible &__header {\n    cursor: pointer;\n  }\n\n  /* Collapsed (Header) */\n\n  &--is-collapsed,\n  &--has-collapsed-header &__header {\n    // .vhide-when-collapsed {\n    //   @include visuallyhidden;\n    // }\n\n    .hide-when-collapsed {\n      display: none;\n    }\n\n    // .show-when-collapsed {\n    //   display: block;\n    // }\n  }\n\n  &--is-collapsed &__header {\n    // border-bottom: none;\n    padding-bottom: space('xlarge');\n  }\n\n  &--is-collapsed#{&}--service &__header {\n    // border-bottom: none;\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &--is-collapsed &__card-action,\n  &--has-collapsed-header &__card-action {\n    --icon-text-margin: 0px;\n    --badge-icon-text-margin: 0px;\n  }\n\n  /* Starred */\n\n  &--is-starred &__card-action.is-star {\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  Fragment,\n  forceUpdate\n} from \"@stencil/core\";\n\nimport {\n  StzhCardHeaderAction,\n  StzhActionsetItem,\n  StzhCardCollapseEvent,\n  StzhCardSubtitleClickEvent,\n  StzhCardStarClickEvent,\n  StzhCardClickEvent,\n  StzhCardHeaderActionClickEvent,\n  StzhButtonChangeEvent,\n  // StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n// import { media } from '../../utils/media-utils';\n\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions` and `selectable` button are not shown anymore)\n */\n@Component({\n  tag: \"stzh-card\",\n  styleUrl: \"stzh-card.scss\",\n  scoped: true\n})\nexport class StzhCard {\n  /** Translation strings */\n  @Prop() localization: StzhCardLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"service\" = \"default\";\n\n  /** Whether card is collapsed or not */\n  @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n  /** Whether card was starred */\n  @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n  /**\n   * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n   * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n   */\n  @Prop({ reflect: true }) starrable: boolean = false;\n\n  /** Whether card is selectable */\n  @Prop({ reflect: true }) selectable: boolean = false;\n\n  /** Whether card is checked (if card is selectable) */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if card is selectable) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /** The value of the input element (if card is selectable) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Whether the element is disabled or not (if card is selectable) */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Heading (or use heading slot instead) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Subtitle */\n  @Prop() subtitle: string | string[] = \"\";\n  private _subtitles = [];\n\n  /** Author name */\n  // @Prop() author: string;\n\n  /** Date to display */\n  // @Prop() date: Date | string;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  // @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /** Tag name */\n  // @Prop() tag: string;\n\n  /** Card header actions */\n  @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n  private _headerActions: StzhCardHeaderAction[];\n\n  /**\n   * Set a badge text if header action badge exists (see headerActionsBadgeType for more info).\n   */\n  @Prop() headerActionsBadge: string;\n\n  /**\n   * If a header action with a badge exists inside `headerActions`, the more actions popover will automatically have a empty badge.\n   * By default, it takes the badge type from the first one. With this property you can overwrite it.\n   */\n  @Prop() headerActionsBadgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n  /**\n   * Card footer actions.\n   * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n   * You can listen to clicks with the `stzhActionClick` event.\n   */\n  @Prop() footerActions: string | StzhActionsetItem[] = [];\n  private _footerActions: StzhActionsetItem[];\n\n  /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n  @Prop() subtitleInteractive: boolean = false;\n\n  /**\n   * Whether sorting should be disabled.\n   * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n  /** Whether card is collapsible */\n  @Prop({ reflect: true }) collapsible: boolean = false;\n\n  /**\n   * Whether movement menu items should be shown.\n   * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop() hideMovementActions: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhCardElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n  /** Collapse event */\n  @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n  /** Subtitle click event */\n  @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n  /** Star click event */\n  @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n  /** Header action click event */\n  @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n  @Watch(\"subtitle\")\n  subtitleWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      if (newValue === \"\") {\n        this._subtitles = [];\n      } else {\n        try {\n          this._subtitles = JSON.parse(newValue);\n        } catch(err) {\n          this._subtitles = [newValue];\n        }\n      }\n    } else {\n      this._subtitles = newValue;\n    }\n  }\n\n  @Watch(\"headerActions\")\n  headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n    if (typeof newValue === \"string\") {\n      this._headerActions = JSON.parse(newValue);\n    } else {\n      this._headerActions = newValue;\n    }\n  }\n\n  @Watch(\"footerActions\")\n  footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._footerActions = JSON.parse(newValue);\n    } else {\n      this._footerActions = newValue;\n    }\n  }\n\n  // @Watch(\"collapsed\")\n  // collapsedWatcher() {\n  //   this.handleResize();\n  // }\n\n  private observer: MutationObserver;\n\n  private nodeChange = (entries) => {\n    let changeInSlot = false;\n\n    entries.forEach((entry) => {\n      if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {\n        changeInSlot = true;\n      }\n    });\n\n    if (changeInSlot) {\n      forceUpdate(this.element);\n    }\n  };\n\n  // private mainElement: HTMLElement;\n  // private headerElement: HTMLElement;\n  // private headerLeftElement: HTMLElement;\n  // private headerRightElement: HTMLElement;\n  private imageLinkElement: HTMLAnchorElement;\n  private titleLinkElement: HTMLAnchorElement;\n  private headingTextElement: HTMLDivElement;\n  private sortable: HTMLStzhSortableElement;\n\n  // private debounceResize: number;\n  // private resizeObserver: ResizeObserver;\n\n  // private update = () => {\n  //   if (!this.mainElement) {\n  //     return;\n  //   }\n\n  //   this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n  //   if (media('medium').matches) {\n  //     const headerWidth = this.headerElement.clientWidth;\n  //     const leftWidth = this.headerLeftElement.clientWidth;\n  //     const rightWidth = this.headerRightElement.clientWidth;\n\n  //     if (headerWidth - leftWidth <= rightWidth) {\n  //       this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n  //     }\n  //   }\n  // }\n\n  private headerClick = (event: MouseEvent) => {\n    if (!this.collapsible) {\n      return;\n    }\n\n    const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n    const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n    const found = composedPathTags.some(r => filterTags.includes(r))\n\n    if (!found) {\n      this.collapsed = !this.collapsed;\n\n      this.stzhCollapse.emit({\n        component: \"stzh-card\",\n        collapsed: this.collapsed\n      });\n    }\n  }\n\n  private subtitleClick = (event: MouseEvent) => {\n    if (this.subtitleInteractive) {\n      this.stzhSubtitleClick.emit({\n        component: \"stzh-card\",\n        originalEvent: event\n      });\n    }\n  }\n\n  private starToggleClick = (event: MouseEvent) => {\n    this.stzhStarClick.emit({\n      component: \"stzh-card\",\n      starred: this.starred,\n      originalEvent: event\n    });\n  }\n\n  private actionClick = (event: MouseEvent, action: StzhCardHeaderAction) => {\n    this.stzhHeaderActionClick.emit({\n      component: \"stzh-card\",\n      action,\n      originalEvent: event\n    });\n  }\n\n  private arrowUpClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"up\");\n    }\n  }\n\n  private arrowDownClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"down\");\n    }\n  }\n\n  private updateElementInsideSortable = () => {\n    const currentSortable = this.element.closest(\"stzh-sortable\");\n\n    // check if element is still inside sortable\n    if (!currentSortable) {\n      this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n      return;\n    }\n\n    if (this.element) {\n      forceUpdate(this.element);\n    }\n  }\n\n  private init = () => {\n    const chips = this.element.querySelectorAll(\n      'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n    );\n\n    const texts = this.element.querySelectorAll(\n      'stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text'\n    );\n\n    chips.forEach((chip) => {\n      setPropsIfNull(chip, {\n        size: \"small\"\n      } as HTMLStzhChipElement)\n    });\n\n    texts.forEach((text) => {\n      setPropsIfNull(text, {\n        size: \"inherit\"\n      } as HTMLStzhTextElement)\n    });\n  }\n\n  // private handleResize = () => {\n  //   if (this.debounceResize) {\n  //     window.cancelAnimationFrame(this.debounceResize);\n  //   }\n\n  //   this.debounceResize = requestAnimationFrame(this.update);\n  // }\n\n  private handleMutation = (entries) => {\n    this.init();\n    this.nodeChange(entries);\n  }\n\n  private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n    this.checked = event.detail.checked;\n  }\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card\",\n      originalEvent,\n      href: this.href\n    });\n  }\n\n  private findSortableChildElement(): HTMLElement | undefined {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      let element: HTMLElement = this.element;\n      let sortableContainer = null;\n\n      if (typeof sortable.container === \"function\") {\n        sortableContainer = sortable.container();\n      } else {\n        sortableContainer = sortable.container;\n      }\n\n      while (element.parentElement && element.parentElement !== sortableContainer) {\n        element = element.parentElement;\n      }\n\n      return element;\n    }\n  }\n\n  async componentWillLoad() {\n    this.subtitleWatcher(this.subtitle);\n    this.headerActionsWatcher(this.headerActions);\n    this.footerActionsWatcher(this.footerActions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n    }\n\n    // if (!this.dateAdapter) {\n    //   this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n    //     this.localization.$formats,\n    //     this.localization.$globals\n    //   );\n    // }\n  }\n\n  componentDidLoad() {\n    this.sortable = this.element.closest(\"stzh-sortable\");\n\n    if (this.sortable) {\n      this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.handleMutation);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n\n    // this.resizeObserver = new ResizeObserver(this.handleResize);\n    // this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    // if (this.resizeObserver) {\n    //   this.resizeObserver.disconnect();\n    // }\n  }\n\n  render() {\n    const imageUsed: boolean = hasSlot(this.element, \"image\");\n    const headingUsed: boolean = hasSlot(this.element, \"heading\");\n    const footerUsed: boolean = hasSlot(this.element, \"footer\");\n    const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n    const Heading = `h${this.headingLevel}`;\n    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n    const sortableChildElement = this.findSortableChildElement();\n\n    const isFirstItemInSortable = sortableChildElement?.parentElement\n      && Array.from(sortableChildElement?.parentElement?.children)\n        .indexOf(sortableChildElement) === 0;\n\n    const isLastItemInSortable = sortableChildElement?.parentElement\n      && Array.from(sortableChildElement?.parentElement?.children)\n        .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n    const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n    const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n    // const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n    // const headerActions = [\n    //   ...this._headerActions\n    // ];\n\n    const hasHeading = !!this.heading || headingUsed;\n\n    const hasHeader = hasHeading\n      || this._subtitles.length > 0\n      || this._headerActions.length > 0\n      // || nonCollapsingTextHeaderActions.length > 0\n      || this.starrable\n      || sortableActionsEnabled;\n\n    const hasFooter = footerUsed\n      || this._footerActions.length > 0\n      || this.selectable\n      // || !!this.author\n      // || !!this.date;\n\n    const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);\n\n    const classes = {\n      \"stzh-card\": true,\n      \"stzh-card--has-link\": !!this.href,\n      \"stzh-card--has-image\": imageUsed,\n      \"stzh-card--has-content\": contentUsed,\n      \"stzh-card--has-subtitle\": !!this.subtitle,\n      \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n      \"stzh-card--has-header\": hasHeader,\n      \"stzh-card--has-footer\": hasFooter,\n      // \"stzh-card--has-tag\": !!this.tag,\n      \"stzh-card--is-collapsible\": this.collapsible,\n      \"stzh-card--is-collapsed\": this.collapsed,\n      \"stzh-card--is-starred\": this.starred,\n      \"stzh-card--is-checked\": this.checked,\n      \"stzh-card--is-sortable\": sortableEnabled,\n      [`stzh-card--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n        <article\n          // ref={(el) => (this.mainElement = el as HTMLElement)}\n          class={classes}\n        >\n          <a\n            ref={(el) => (this.imageLinkElement = el as HTMLAnchorElement)}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            class=\"stzh-card__image-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.href ? this.handleCardClick : null}\n          >\n            <slot name=\"image\"></slot>\n          </a>\n          <div class=\"stzh-card__content-wrapper\">\n            <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n            {/* {this.tag && <div class=\"stzh-card__tag\">{this.tag}</div>} */}\n\n            <header\n              // ref={(el) => (this.headerElement = el as HTMLElement)}\n              class=\"stzh-card__header\"\n              onClick={this.headerClick}\n            >\n              <div class=\"stzh-card__header-top\">\n                <div\n                  // ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n                  class=\"stzh-card__header-left\"\n                >\n                  <div class=\"stzh-card__title-area\">\n                    {hasHeading &&\n                      <Heading class=\"stzh-card__title\">\n                        <a\n                          ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement)}\n                          class=\"stzh-card__title-link\"\n                          href={this.href}\n                          target={this.target}\n                          onClick={this.href ? this.handleCardClick : null}\n                        >\n                          <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n                            {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                          </div>\n                        </a>\n                      </Heading>\n                    }\n                    {this._subtitles.length > 0 &&\n                      <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n                        {this._subtitles.map(subtitle => (\n                          <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n                        ))}\n                      </Subtitle>\n                    }\n                  </div>\n                </div>\n                <div\n                  // ref={(el) => (this.headerRightElement = el as HTMLElement)}\n                  class=\"stzh-card__header-right\"\n                >\n                  <div class=\"stzh-card__card-actions\">\n                    {/* {this._headerActions.map(action => (\n                      <stzh-button\n                        class={{\n                          \"stzh-card__card-action\": true,\n                          \"is-button\": true,\n                          \"show-medium\": !action.onlyCollapseText,\n                          \"hide-when-collapsed\": !action.onlyCollapseText,\n                          \"hide-text-when-collapsed\": action.onlyCollapseText\n                        }}\n                        icon={action.icon}\n                        badge={action.badge}\n                        badgeEmpty={action.badgeEmpty}\n                        badgeType={action.badgeType}\n                        variant=\"tertiary\"\n                        size=\"tiny\"\n                        badgePosition=\"icon\"\n                        onClick={(e: MouseEvent) => { this.actionClick(e, action) }}\n                      >\n                        <span\n                          class={{\n                            \"vshow-medium\": action.onlyCollapseText,\n                            \"vhide-when-collapsed\": action.onlyCollapseText\n                          }}\n                        >\n                          {action.label}\n                        </span>\n                      </stzh-button>\n                    ))} */}\n\n                    {this.starrable &&\n                      <stzh-tooltip>\n                        <stzh-button\n                          class=\"stzh-card__card-action is-star\"\n                          icon={this.starred ? \"star-filled\" : \"star\"}\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          iconOnly={true}\n                          onClick={this.starToggleClick}\n                        ></stzh-button>\n                        <div slot=\"content\">\n                          {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                        </div>\n                      </stzh-tooltip>\n                    }\n\n                    {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n                    {/* {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) && */}\n                    {(this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) &&\n                      <stzh-popover\n                        label={this.localization.actionsPopoverLabel}\n                        placement=\"bottom-end\"\n                        class={{\n                          \"stzh-card__card-action-popover\": true,\n                          // \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n                        }}\n                      >\n                        <stzh-button\n                          class=\"stzh-card__card-action is-further\"\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          icon=\"more-vertical\"\n                          iconOnly={true}\n                          badge={this.headerActionsBadge}\n                          badgeEmpty={headerActionsWithBadge.length > 0}\n                          badgePosition=\"icon\"\n                          badgeType={this.headerActionsBadgeType || headerActionsWithBadge[0]?.badgeType || \"default\"}\n                        ></stzh-button>\n                        <stzh-menu slot=\"content\">\n                          {/* {nonCollapsingTextHeaderActions.map(action => ( */}\n                          {this._headerActions.map(action => (\n                            <stzh-menu-item\n                              // class=\"hide-medium show-when-collapsed\"\n                              icon={action.icon}\n                              badge={action.badge}\n                              badgeEmpty={action.badgeEmpty}\n                              badgeType={action.badgeType}\n                              onClick={(e: MouseEvent) => { this.actionClick(e, action) }}\n                            >\n                              {action.label}\n                            </stzh-menu-item>\n                          ))}\n\n                          {sortableActionsEnabled &&\n                            <Fragment>\n                              {!isFirstItemInSortable &&\n                                <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n                                  {this.localization.actionMoveUp}\n                                </stzh-menu-item>\n                              }\n                              {!isLastItemInSortable &&\n                                <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n                                  {this.localization.actionMoveDown}\n                                </stzh-menu-item>\n                              }\n                            </Fragment>\n                          }\n\n                          {this.starrable &&\n                            <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n                              {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                            </stzh-menu-item>\n                          }\n                        </stzh-menu>\n                      </stzh-popover>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"stzh-card__header-meta\">\n                <slot name=\"meta\"></slot>\n              </div>\n            </header>\n\n            <div class=\"stzh-card__content hide-when-collapsed\">\n              <slot name=\"content\"></slot>\n            </div>\n\n            <div class=\"stzh-card__footer hide-when-collapsed\">\n              {/* {(this.author || this.date) &&\n                <div class=\"stzh-card__footer-meta\">\n                  {this.author &&\n                    <div class=\"stzh-card__footer-author\">{this.author}</div>\n                  }\n                  {this.author && this.date &&\n                    <div class=\"stzh-card__footer-meta-separator\"></div>\n                  }\n                  {this.date &&\n                    <div class=\"stzh-card__footer-date\">\n                      {this.dateAdapter.format(new Date(this.date), \"dateInput\")}\n                    </div>\n                  }\n                </div>\n              } */}\n\n              <slot name=\"footer\">\n                {this._footerActions.length > 0 &&\n                  <stzh-actionset\n                    class=\"stzh-card__footer-actionset\"\n                    actions={this._footerActions}\n                  ></stzh-actionset>\n                }\n\n                {this.selectable &&\n                  <stzh-button\n                    class=\"stzh-card__footer-select-button\"\n                    fullwidth\n                    type=\"radio\"\n                    variant=\"secondary\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    label={this.localization.select}\n                    onStzhChange={this.handleSelectionChange}\n                  ></stzh-button>\n                }\n              </slot>\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n",".stzh-cardlist {\n  &__cards {\n    display: grid;\n    gap: $gridGutter;\n\n    @include mq($from: small) {\n      gap: $gridGutterSmall;\n    }\n\n    @include mq($from: medium) {\n      gap: $gridGutterMedium;\n    }\n\n    @include mq($from: large) {\n      gap: $gridGutterLarge;\n    }\n\n    @include mq($from: ultra) {\n      gap: $gridGutterUltra;\n    }\n  }\n\n  &__header {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: medium) { // was smallheader before\n      flex-direction: row;\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    --stzh-icon-color: #{$colorPrimary70};\n\n    &:not(:empty) {\n      margin-bottom: space('xsmall');\n\n      @include mq($from: medium) { // was smallheader before\n        margin-bottom: 0;\n      }\n    }\n  }\n\n  &__switch {\n    --color: inherit;\n    align-self: end;\n  }\n\n  /* Has content inside header */\n\n  &:has(#{&}__description:not(:empty)) &__header,\n  &--has-toggle-link &__header {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  /* Subpages layout variant */\n\n  &--layout-subpages &__cards:has(stzh-card-navigation:not([has-lead])) {\n    @include spaceCurve('row-gap', 'tiny');\n\n    @include mq($from: small) {\n      padding-left: calc(((100% - (#{$gridGutterSmall} * 3)) / 4) + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: 0;\n    }\n  }\n\n  &--layout-subpages &__cards:has(stzh-card-navigation[has-lead]) {\n    @include spaceCurve('row-gap', 'regular');\n\n    @include mq($from: small) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  /* Teasers layout variant */\n\n  &--layout-teasers &__cards {\n    @include spaceCurve('row-gap', 'medium');\n\n    @include mq($from: small) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    @include mq($from: medium) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n\n  /* Searchresults layout variant */\n\n  &--layout-searchresults &__cards {\n    gap: space('xlarge');\n  }\n\n  /* Fullwidth layout variant (e.g. for MeinKonto dashboard) */\n\n  &--layout-fullwidth &__cards {\n    @include spaceCurve('gap', 'regular');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  State,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport { StzhCardlistCollapseAllEvent } from \"../../index\";\nimport { StzhCardlistLocalizedText } from './stzh-cardlist.localization';\n\n/**\n * @slot - Slot for `stzh-card` elements\n * @slot description - Slot for description\n */\n@Component({\n  tag: \"stzh-cardlist\",\n  styleUrl: \"stzh-cardlist.scss\",\n  scoped: true\n})\nexport class StzhCardlist {\n  /** Translation strings */\n  @Prop() localization: StzhCardlistLocalizedText;\n\n  @Prop({ reflect: true }) layout: \"fullwidth\" | \"searchresults\" | \"subpages\" | \"teasers\" = \"fullwidth\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Whether collapse/expand toggle link */\n  @Prop({ reflect: true }) showToggleLink: boolean = false;\n\n  /** Whether sorting should be enabled */\n  @Prop() sortableEnabled: boolean = false;\n\n  /** HTML attribute that is used by the `toArray()` of sortable method */\n  @Prop() sortableDataIdAttribute: string = \"data-id\";\n\n  @Element() element: HTMLStzhCardlistElement;\n\n  /** Collapse all event */\n  @Event() stzhCollapseAll: EventEmitter<StzhCardlistCollapseAllEvent>;\n\n  @Listen(\"stzhCollapse\")\n  collapseListener() {\n    this.updateCollapsedState();\n  }\n\n  @State() allCollapsed: boolean = false;\n\n  private collapseClick = () => {\n    const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n    cards.forEach(card => {\n      if (card.collapsible) {\n        card.collapsed = !this.allCollapsed\n      }\n    });\n\n    this.allCollapsed = !this.allCollapsed;\n\n    this.stzhCollapseAll.emit({\n      component: \"stzh-cardlist\",\n      allCollapsed: this.allCollapsed\n    });\n  }\n\n  private updateCollapsedState = () => {\n    const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n    this.allCollapsed = !cards.some(card => !card.collapsed);\n  }\n\n  private sortableGhostClone: Function = (dragElement: HTMLElement) => {\n    // const [clonedElement, clonedStzhElement, originalStzhElement] = cloneWrappedStzhElement(dragElement);\n\n    // if (\n    //   clonedStzhElement\n    //   && originalStzhElement\n    //   && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n    // ) {\n    //   const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n    //   const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n    //   // copy every property that is not reflected to its attribute\n    //   clonedStzhElementCard.heading = originalStzhElementCard.heading;\n    //   clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n    //   clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n    //   clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n    //   clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    // }\n\n    // return clonedElement;\n\n    const card = dragElement.tagName.toLowerCase() === \"stzh-card\"\n      ? dragElement : dragElement.querySelector(\"stzh-card\");\n\n    if (card) {\n      const originalElement = dragElement as HTMLStzhCardElement;\n      const clonedElement = dragElement.cloneNode(true) as HTMLStzhCardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedElement.heading = originalElement.heading;\n      clonedElement.subtitle = originalElement.subtitle;\n      clonedElement.headerActions = originalElement.headerActions;\n      clonedElement.footerActions = originalElement.footerActions;\n      clonedElement.hideMovementActions = originalElement.hideMovementActions;\n\n      return clonedElement;\n    }\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"cardlist\");\n    }\n  }\n\n  componentDidLoad() {\n    this.updateCollapsedState();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-cardlist\": true,\n      \"stzh-cardlist--has-toggle-link\": this.showToggleLink,\n      [`stzh-cardlist--layout-${this.layout}`]: !!this.layout\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-cardlist__header\">\n            <div class=\"stzh-cardlist__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n            {this.showToggleLink &&\n              <stzh-link\n                class=\"stzh-cardlist__switch\"\n                icon={this.allCollapsed ? \"list-expanded\" : \"list-shrinked\"}\n                label={this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll}\n                onClick={this.collapseClick}\n              ></stzh-link>\n            }\n          </div>\n\n          <stzh-sortable\n            disabled={!this.sortableEnabled}\n            dataIdAttribute={this.sortableDataIdAttribute}\n            ghostClone={this.sortableGhostClone}\n          >\n            <div class=\"stzh-cardlist__cards\" role=\"list\">\n              <slot></slot>\n            </div>\n          </stzh-sortable>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-chipselect {\n\t@include input-description;\n\n  &__label {\n    @include font('heavy');\n    @include fontSize('micro');\n    @include truncate;\n    color: $headingColor;\n    display: block;\n    margin-bottom: space('xsmall');\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('nano');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  &__chips {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    border-radius: $buttonBorderRadius;\n    column-gap: space('medium');\n\n    @include mq($from: medium) {\n      row-gap: space('medium');\n    }\n\n    // @include mq($to: medium) {\n    //   display: none;\n    // }\n  }\n\n  &__chip {\n    &.is-focused,\n    &.is-focused[active]:not([active=false]) {\n      --background-color: #{$colorSecondary40};\n\n      @include highContrast() {\n        --background-color: Highlight;\n      }\n    }\n\n    &.is-focused[active]:not([active=false]) {\n      --background-color: #{$colorPrimary90};\n\n      @include highContrast() {\n        --background-color: Canvas;\n      }\n    }\n  }\n\n  // &__dropdown {\n  //   @include mq($from: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  // &__description-wrapper {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  &--has-error &__error,\n  &--has-description &__description {\n    margin-top: space('xsmall');\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__chips,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  State,\n  Fragment,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhChipselectItem,\n  StzhChipselectChangeEvent,\n  // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  // private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = 0;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._value = JSON.parse(newValue);\n      } catch(ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    // this._dataDropdown = this._data.map((data) => {\n    //   return {\n    //     text: data.counter\n    //       ? `${data.label} (${data.counter})`\n    //       : data.label,\n    //     value: data.value\n    //   }\n    // });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  }\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = [data.value]\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value[0] : this._value\n    })\n  }\n\n  // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n  //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n  //   this.activeFocusOptionIndex = this._data.findIndex(data => {\n  //     return data.value === this.value;\n  //   });\n\n  //   await this.waitForNextRender();\n\n  //   this.stzhChange.emit({\n  //     component: \"stzh-chipselect\",\n  //     value: this.value\n  //   })\n  // }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      this.value = this._data[activeOptionIndex].value;\n\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {this.multiple\n            ?\n            <Fragment>\n              {this._value.map((value) =>\n                <input type=\"hidden\" name={this.name} value={value} />\n              )}\n            </Fragment>\n            :\n            <input\n              type=\"hidden\"\n              name={this.name}\n              value={this.value}\n            />\n          }\n\n          <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional &&\n              <span class=\"stzh-chipselect__marker\">\n                <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker\n                  }\n                </span>\n                <span class=\"stzh-chipselect__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText\n                  }\n                </span>\n              </span>\n            }\n          </label>\n\n          {this._data.length > 0 &&\n            <Fragment>\n              <div\n                id={this.id}\n                class=\"stzh-chipselect__chips\"\n                role=\"listbox\"\n                tabindex=\"0\"\n                aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n                aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                onKeyDown={this.handleKeydown}\n              >\n                {this._data.map((data, index) => (\n                  <stzh-chip\n                    role=\"option\"\n                    class={{\n                      \"stzh-chipselect__chip\": true,\n                      \"is-focused\": this.activeFocusOptionIndex === index\n                    }}\n                    label={data.label}\n                    counter={data.counter}\n                    icon={data.icon}\n                    type={data.type}\n                    inverted={data.inverted}\n                    variant={data.variant}\n                    size={data.size || \"small\"}\n                    disabled={this.disabled || data.disabled}\n                    active={\n                      this._value.includes(data.value)\n                      || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\"))\n                      || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                    }\n                    aria-selected={\n                      this._value.includes(data.value)\n                      || (!this.multiple && !data.value && (this._value.length === 0 || this._value[0] === \"\"))\n                      || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        ? \"true\" : \"false\"\n                    }\n                    id={`${this.id}-option-${index}`}\n                    a11yTabindex=\"-1\"\n                    onClick={() => this.handleChipClick(data, index)}\n                  ></stzh-chip>\n                ))}\n              </div>\n\n              <StzhInputDescription\n                classPrefix=\"stzh-chipselect\"\n                id={`${this.id}-description`}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                descriptionLongTitle={this.descriptionLongTitle}\n                descriptionLongUsed={descriptionLongUsed}\n                moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n              />\n\n              {/* <stzh-dropdown\n                class=\"stzh-chipselect__dropdown\"\n                multiple={this.multiple}\n                disabled={this.disabled}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                required={this.required}\n                invalid={this.invalid}\n                items={[this.value]}\n                label={this.label}\n                labelHidden={this.labelHidden}\n                options={this._dataDropdown}\n                hideOptional={this.hideOptional}\n                onStzhChange={this.handleDropdownChange}\n              ></stzh-dropdown> */}\n            </Fragment>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhCardCss","StzhCard","this","_subtitles","nodeChange","entries","changeInSlot","forEach","entry","target","closest","hasAttribute","forceUpdate","element","headerClick","event","collapsible","filterTags","composedPathTags","composedPath","map","_a","tagName","toLowerCase","found","some","r","includes","collapsed","stzhCollapse","emit","component","subtitleClick","subtitleInteractive","stzhSubtitleClick","originalEvent","starToggleClick","stzhStarClick","starred","actionClick","action","stzhHeaderActionClick","arrowUpClick","sortable","findSortableChildElement","moveItem","arrowDownClick","updateElementInsideSortable","currentSortable","removeEventListener","init","chips","querySelectorAll","texts","chip","setPropsIfNull","size","text","handleMutation","handleSelectionChange","checked","detail","handleCardClick","stzhClick","href","subtitleWatcher","newValue","JSON","parse","err","headerActionsWatcher","_headerActions","footerActionsWatcher","_footerActions","sortableContainer","container","parentElement","componentWillLoad","subtitle","headerActions","footerActions","localization","window","stzhComponents","utils","fetchTranslations","componentDidLoad","addEventListener","componentDidRender","requestAnimationFrame","objectId","analyticsId","headingTextElement","innerText","_b","imageLinkElement","setAttribute","_c","titleLinkElement","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","imageUsed","hasSlot","headingUsed","footerUsed","contentUsed","Heading","headingLevel","Subtitle","sortableChildElement","isFirstItemInSortable","Array","from","children","indexOf","isLastItemInSortable","length","sortableEnabled","sortableDisabled","disabled","sortableActionsEnabled","hideMovementActions","hasHeading","heading","hasHeader","starrable","hasFooter","selectable","headerActionsWithBadge","filter","badge","badgeEmpty","classes","variant","h","Host","role","class","ref","el","tabindex","onClick","name","icon","iconOnly","slot","actionRemove","actionAdd","label","actionsPopoverLabel","placement","headerActionsBadge","badgePosition","badgeType","headerActionsBadgeType","_d","e","Fragment","actionMoveUp","actionMoveDown","actions","fullwidth","type","value","select","onStzhChange","stzhCardlistCss","StzhCardlist","collapseClick","cards","card","allCollapsed","stzhCollapseAll","updateCollapsedState","sortableGhostClone","dragElement","querySelector","originalElement","clonedElement","cloneNode","collapseListener","showToggleLink","layout","description","expandAll","collapseAll","dataIdAttribute","sortableDataIdAttribute","ghostClone"],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx","src/components/stzh-cardlist/stzh-cardlist.scss?tag=stzh-cardlist&encapsulation=scoped","src/components/stzh-cardlist/stzh-cardlist.tsx"],"sourcesContent":["/**\n * @prop --content-min-height: Min height of content\n */\n\n:host {\n  // --box-shadow: none;\n  --border-radius: 0px;\n\n  --content-min-height: 120px;\n\n  --dnd-visibility: hidden;\n  --dnd-opacity: 0;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  border-radius: var(--border-radius);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  &[collapsed]:not([collapsed=\"false\"]) {\n    --content-min-height: none;\n  }\n\n  &[checked]:not([checked=\"false\"]) {\n    outline: 3px solid $colorPrimary;\n  }\n\n  &.is-ghost::after,\n  .is-ghost &::after {\n    border-radius: var(--border-radius);\n  }\n\n  &[href]:hover,\n  &[href]:focus-within,\n  &.is-selected,\n  &.is-chosen,\n  .is-selected &,\n  .is-chosen & {\n    // --box-shadow: #{$boxShadowOverlay};\n  }\n\n  &.is-ghost,\n  .is-ghost & {\n    // --box-shadow: none;\n\n    overflow: hidden;\n  }\n\n  &.is-drag,\n  &.is-chosen,\n  &.is-ghost,\n  &.is-selected,\n  .is-drag &,\n  .is-chosen &,\n  .is-ghost &,\n  .is-selected &,\n  &[is-sortable]:hover {\n    --dnd-visibility: visible;\n    --dnd-opacity: 1;\n  }\n\n  ::slotted([slot=\"image\"]) {\n    width: 100%;\n    max-width: 100%;\n  }\n\n  ::slotted(img[slot=\"image\"]) {\n    display: block;\n  }\n\n  ::slotted(table) {\n    border: 0;\n    border-spacing: 0;\n\n    th {\n      @include font;\n    }\n\n    td, th {\n      padding: 0;\n    }\n\n    td {\n      color: $colorBlack;\n      padding-left: space('xsmall');\n    }\n  }\n}\n\n.stzh-card {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\t// box-shadow: var(--box-shadow);\n\t// transition: box-shadow $baseTransitionAnimationSpeed;\n\n  // .vshow-medium {\n  //   @include mq($to: medium) {\n  //     @include visuallyhidden;\n  //   }\n  // }\n\n  // .show-medium {\n  //   @include mq($to: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  // .hide-medium {\n  //   @include mq($from: medium) {\n  //     display: none;\n  //   }\n  // }\n\n  &__content-wrapper {\n    position: relative;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: var(--content-min-height);\n  }\n\n\t&__dnd {\n    --size: #{iconSize('xsmall')};\n\t\tposition: absolute;\n    // INFO: we don't use space() values here, because we want this element to align with the heading\n    left: 3px;\n    top: 23px;\n\t\tdisplay: flex;\n\t\tvisibility: var(--dnd-visibility);\n\t\topacity: var(--dnd-opacity);\n\t\ttransition: all $baseTransitionAnimationSpeed;\n    display: none;\n\n    @include mq($from: medium) {\n      display: block;\n    }\n\n    @include mq($from: large) {\n      // INFO: we don't use space() values here, because we want this element to align with the heading\n      left: 4px;\n      top: 27px;\n    }\n\t}\n\n  &__header-top {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n  }\n\n  &__header-meta {\n    &:not(:empty) {\n      display: inline-flex;\n      margin-top: space('xsmall');\n      gap: space('xsmall');\n    }\n  }\n\n\t&__header-left,\n\t&__header-right {\n\t\tdisplay: flex;\n\t}\n\n\t&__header-right {\n    @include spaceCurve('padding-left', 'tiny');\n\t}\n\n\t&__left {\n\t\talign-self: center;\n\t}\n\n\t&__title-area {\n\t\t@include wordWrap;\n\t\toverflow: hidden;\n\t}\n\n\t&__title,\n\t&__subtitle {\n\t\tmargin: 0;\n\t}\n\n  &__title-link {\n    color: inherit;\n    text-decoration-line: none;\n  }\n\n  &__title {\n    @include font('title');\n    @include fontSize('milli');\n  }\n\n  &__image-link {\n    display: block;\n  }\n\n\t&__subtitle {\n    @include fontSize('milli');\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\ttext-decoration-line: none;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tmargin-left: -0.5625em;\n\t}\n\n\t&__subtitle-text {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n    // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tpadding-left: 0.5625em;\n\n\t\t&::after {\n\t\t\tcontent: ',';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t}\n\t}\n\n\t&__content {\n    @include fontSize('milli');\n    flex-grow: 1;\n\t}\n\n  // &__footer-meta {\n  //   @include fontSize('micro');\n  //   display: flex;\n  //   flex-wrap: wrap;\n  //   gap: space('xsmall');\n  //   color: $colorGrey80;\n  // }\n\n  // &__footer-meta-separator {\n  //   width: 1px;\n  //   background-color: currentColor;\n  //   flex-shrink: 0;\n  // }\n\n  &__card-actions {\n\t\tdisplay: inline-flex;\n    white-space: nowrap;\n\t}\n\n\t&__card-action {\n    @include mq($to: medium) {\n      --icon-text-margin: 0px;\n      --badge-icon-text-margin: 0px;\n    }\n\n    &[variant=\"tertiary\"] {\n      --color: #{$baseColor};\n    }\n\n    &.is-button {\n      --icon-size: #{iconSize('small')};\n    }\n\n    &.is-placeholder {\n      width: space('xxlarge');\n      height: space('xxlarge');\n    }\n\n    &.is-star {\n    }\n\t}\n\n  &__card-action-popover {\n    --width: auto;\n  }\n\n  /* Service */\n\n  &--service &__subtitle {\n    @include fontCurve('p1');\n  }\n\n  &--service &__subtitle {\n    @include fontCurve('p1');\n  }\n\n  &--service &__title {\n    @include fontCurve('h3', 'heading');\n  }\n\n  /* Has content */\n\n  &--has-content &__content {\n    @include spaceCurve('padding-bottom', 'large');\n    padding-top: space('xlarge');\n    padding-left: space('medium');\n    padding-right: space('medium');\n\n    @include mq($from: medium) {\n      @include spaceCurve('padding-bottom', 'medium');\n    }\n  }\n\n  &--has-content#{&}--service &__content {\n    @include spaceCurve('padding', 'regular');\n  }\n\n  /* Has header */\n\n  &--has-header &__header {\n    padding-top: space('xlarge');\n    padding-left: space('medium');\n    padding-right: space('medium');\n\t}\n\n  &--has-header#{&}--has-content &__content {\n    padding-top: space('xsmall');\n  }\n\n  &--has-header#{&}--service &__header {\n\t\t@include spaceCurve('padding-top', 'regular');\n\t\t@include spaceCurve('padding-left', 'regular');\n\t\t@include spaceCurve('padding-right', 'regular');\n  }\n\n  &--has-header#{&}--has-content#{&}--service &__content {\n    @include spaceCurve('padding-top', 'regular');\n  }\n\n  /* Has footer */\n\n  &--has-footer &__footer {\n    @include spaceCurve('padding-bottom', 'medium');\n    padding-left: space('medium');\n    padding-right: space('medium');\n  }\n\n  &--has-footer#{&}--has-content &__content {\n    padding-bottom: space('medium');\n  }\n\n  &--has-footer#{&}--service &__footer {\n\t\t@include spaceCurve('padding-bottom', 'regular');\n\t\t@include spaceCurve('padding-left', 'regular');\n\t\t@include spaceCurve('padding-right', 'regular');\n  }\n\n  &--has-footer#{&}--has-content#{&}--service &__content {\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  /* Has tag */\n\n  &--has-tag#{&}--has-header &__header {\n    padding-top: space('xxxlarge');\n  }\n\n  /* Has Link */\n\n  &--has-link &__title-link,\n  &--has-link &__content {\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &--has-link &__title-link {\n    color: $colorPrimary;\n    text-decoration-line: none;\n    border-radius: $buttonBorderRadius;\n    cursor: pointer;\n\n    &::before,\n    &::after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n\n    // &::before {\n    //   transition: all $baseTransitionAnimationSpeed;\n    // }\n\n    &::after {\n      z-index: 1;\n    }\n  }\n\n  &--has-link &__card-actions,\n  &--has-link &__header-meta,\n  &--has-link &__footer-actionset,\n  &--has-link &__footer-select-button {\n    position: relative;\n    z-index: 2;\n  }\n\n  &--has-link:has(#{&}__image-link:hover) &__title-link,\n  &--has-link:has(#{&}__image-link:hover) &__content,\n  &--has-link:has(#{&}__title-link:hover) &__title-link,\n  &--has-link:has(#{&}__title-link:hover) &__content {\n    color: $colorSecondary60;\n\n  //   &::before,\n  //   &::before {\n  //     background-color: $colorPrimary20;\n  //   }\n  }\n\n  // &__footer-arrow {\n  //   color: $colorPrimary;\n  // }\n\n  // &--has-link:hover &__footer-arrow {\n  //   color: $colorSecondary60;\n  // }\n\n  /* Interactive Subtitle */\n\n  &--has-subtitle-interactive &__subtitle {\n    cursor: pointer;\n    font-family: inherit;\n    padding: 0;\n    appearance: none;\n    background: none;\n    border: none;\n    transition: color $baseTransitionAnimationSpeed;\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n\n  /* Is collapsible */\n\n  &--is-collapsible &__header {\n    cursor: pointer;\n  }\n\n  /* Collapsed (Header) */\n\n  &--is-collapsed,\n  &--has-collapsed-header &__header {\n    // .vhide-when-collapsed {\n    //   @include visuallyhidden;\n    // }\n\n    .hide-when-collapsed {\n      display: none;\n    }\n\n    // .show-when-collapsed {\n    //   display: block;\n    // }\n  }\n\n  &--is-collapsed &__header {\n    // border-bottom: none;\n    padding-bottom: space('xlarge');\n  }\n\n  &--is-collapsed#{&}--service &__header {\n    // border-bottom: none;\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &--is-collapsed &__card-action,\n  &--has-collapsed-header &__card-action {\n    --icon-text-margin: 0px;\n    --badge-icon-text-margin: 0px;\n  }\n\n  /* Starred */\n\n  &--is-starred &__card-action.is-star {\n    color: $colorPrimary;\n\n    &:hover,\n    &:focus {\n      color: $colorPrimaryHover;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  Fragment,\n  forceUpdate\n} from \"@stencil/core\";\n\nimport {\n  StzhCardHeaderAction,\n  StzhActionsetItem,\n  StzhCardCollapseEvent,\n  StzhCardSubtitleClickEvent,\n  StzhCardStarClickEvent,\n  StzhCardClickEvent,\n  StzhCardHeaderActionClickEvent,\n  StzhButtonChangeEvent,\n  // StzhLocaleAdapter\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n// import { media } from '../../utils/media-utils';\n\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions` and `selectable` button are not shown anymore)\n */\n@Component({\n  tag: \"stzh-card\",\n  styleUrl: \"stzh-card.scss\",\n  scoped: true\n})\nexport class StzhCard {\n  /** Translation strings */\n  @Prop() localization: StzhCardLocalizedText;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"service\" = \"default\";\n\n  /** Whether card is collapsed or not */\n  @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n  /** Whether card was starred */\n  @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n  /**\n   * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n   * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n   */\n  @Prop({ reflect: true }) starrable: boolean = false;\n\n  /** Whether card is selectable */\n  @Prop({ reflect: true }) selectable: boolean = false;\n\n  /** Whether card is checked (if card is selectable) */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if card is selectable) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Href of card */\n  @Prop({ reflect: true }) href: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string;\n\n  /** The value of the input element (if card is selectable) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Whether the element is disabled or not (if card is selectable) */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Heading (or use heading slot instead) */\n  @Prop() heading: string = \"\";\n\n  /** Heading level */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Subtitle */\n  @Prop() subtitle: string | string[] = \"\";\n  private _subtitles = [];\n\n  /** Author name */\n  // @Prop() author: string;\n\n  /** Date to display */\n  // @Prop() date: Date | string;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  // @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /** Tag name */\n  // @Prop() tag: string;\n\n  /** Card header actions */\n  @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n  private _headerActions: StzhCardHeaderAction[];\n\n  /**\n   * Set a badge text if header action badge exists (see headerActionsBadgeType for more info).\n   */\n  @Prop() headerActionsBadge: string;\n\n  /**\n   * If a header action with a badge exists inside `headerActions`, the more actions popover will automatically have a empty badge.\n   * By default, it takes the badge type from the first one. With this property you can overwrite it.\n   */\n  @Prop() headerActionsBadgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\n  /**\n   * Card footer actions.\n   * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n   * You can listen to clicks with the `stzhActionClick` event.\n   */\n  @Prop() footerActions: string | StzhActionsetItem[] = [];\n  private _footerActions: StzhActionsetItem[];\n\n  /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n  @Prop() subtitleInteractive: boolean = false;\n\n  /**\n   * Whether sorting should be disabled.\n   * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n  /** Whether card is collapsible */\n  @Prop({ reflect: true }) collapsible: boolean = false;\n\n  /**\n   * Whether movement menu items should be shown.\n   * Has no effect if card is not inside a `cardlist` element, which has `sortableEnabled` property set to true.\n   */\n  @Prop() hideMovementActions: boolean = false;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link elements.\n   * Default value will be taken from `heading` prop/slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhCardElement;\n\n  /** Click event (if href is used) */\n  @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n  /** Collapse event */\n  @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n  /** Subtitle click event */\n  @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n  /** Star click event */\n  @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n  /** Header action click event */\n  @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n  @Watch(\"subtitle\")\n  subtitleWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      if (newValue === \"\") {\n        this._subtitles = [];\n      } else {\n        try {\n          this._subtitles = JSON.parse(newValue);\n        } catch(err) {\n          this._subtitles = [newValue];\n        }\n      }\n    } else {\n      this._subtitles = newValue;\n    }\n  }\n\n  @Watch(\"headerActions\")\n  headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n    if (typeof newValue === \"string\") {\n      this._headerActions = JSON.parse(newValue);\n    } else {\n      this._headerActions = newValue;\n    }\n  }\n\n  @Watch(\"footerActions\")\n  footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._footerActions = JSON.parse(newValue);\n    } else {\n      this._footerActions = newValue;\n    }\n  }\n\n  // @Watch(\"collapsed\")\n  // collapsedWatcher() {\n  //   this.handleResize();\n  // }\n\n  private observer: MutationObserver;\n\n  private nodeChange = (entries) => {\n    let changeInSlot = false;\n\n    entries.forEach((entry) => {\n      if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {\n        changeInSlot = true;\n      }\n    });\n\n    if (changeInSlot) {\n      forceUpdate(this.element);\n    }\n  };\n\n  // private mainElement: HTMLElement;\n  // private headerElement: HTMLElement;\n  // private headerLeftElement: HTMLElement;\n  // private headerRightElement: HTMLElement;\n  private imageLinkElement: HTMLAnchorElement;\n  private titleLinkElement: HTMLAnchorElement;\n  private headingTextElement: HTMLDivElement;\n  private sortable: HTMLStzhSortableElement;\n\n  // private debounceResize: number;\n  // private resizeObserver: ResizeObserver;\n\n  // private update = () => {\n  //   if (!this.mainElement) {\n  //     return;\n  //   }\n\n  //   this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n  //   if (media('medium').matches) {\n  //     const headerWidth = this.headerElement.clientWidth;\n  //     const leftWidth = this.headerLeftElement.clientWidth;\n  //     const rightWidth = this.headerRightElement.clientWidth;\n\n  //     if (headerWidth - leftWidth <= rightWidth) {\n  //       this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n  //     }\n  //   }\n  // }\n\n  private headerClick = (event: MouseEvent) => {\n    if (!this.collapsible) {\n      return;\n    }\n\n    const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n    const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n    const found = composedPathTags.some(r => filterTags.includes(r))\n\n    if (!found) {\n      this.collapsed = !this.collapsed;\n\n      this.stzhCollapse.emit({\n        component: \"stzh-card\",\n        collapsed: this.collapsed\n      });\n    }\n  }\n\n  private subtitleClick = (event: MouseEvent) => {\n    if (this.subtitleInteractive) {\n      this.stzhSubtitleClick.emit({\n        component: \"stzh-card\",\n        originalEvent: event\n      });\n    }\n  }\n\n  private starToggleClick = (event: MouseEvent) => {\n    this.stzhStarClick.emit({\n      component: \"stzh-card\",\n      starred: this.starred,\n      originalEvent: event\n    });\n  }\n\n  private actionClick = (event: MouseEvent, action: StzhCardHeaderAction) => {\n    this.stzhHeaderActionClick.emit({\n      component: \"stzh-card\",\n      action,\n      originalEvent: event\n    });\n  }\n\n  private arrowUpClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"up\");\n    }\n  }\n\n  private arrowDownClick = () => {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      const element = this.findSortableChildElement();\n      sortable.moveItem(element, \"down\");\n    }\n  }\n\n  private updateElementInsideSortable = () => {\n    const currentSortable = this.element.closest(\"stzh-sortable\");\n\n    // check if element is still inside sortable\n    if (!currentSortable) {\n      this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n      return;\n    }\n\n    if (this.element) {\n      forceUpdate(this.element);\n    }\n  }\n\n  private init = () => {\n    const chips = this.element.querySelectorAll(\n      'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n    );\n\n    const texts = this.element.querySelectorAll(\n      'stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text'\n    );\n\n    chips.forEach((chip) => {\n      setPropsIfNull(chip, {\n        size: \"small\"\n      } as HTMLStzhChipElement)\n    });\n\n    texts.forEach((text) => {\n      setPropsIfNull(text, {\n        size: \"inherit\"\n      } as HTMLStzhTextElement)\n    });\n  }\n\n  // private handleResize = () => {\n  //   if (this.debounceResize) {\n  //     window.cancelAnimationFrame(this.debounceResize);\n  //   }\n\n  //   this.debounceResize = requestAnimationFrame(this.update);\n  // }\n\n  private handleMutation = (entries) => {\n    this.init();\n    this.nodeChange(entries);\n  }\n\n  private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n    this.checked = event.detail.checked;\n  }\n\n  private handleCardClick = (originalEvent: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-card\",\n      originalEvent,\n      href: this.href\n    });\n  }\n\n  private findSortableChildElement(): HTMLElement | undefined {\n    const sortable = this.element.closest(\"stzh-sortable\");\n\n    if (sortable) {\n      let element: HTMLElement = this.element;\n      let sortableContainer = null;\n\n      if (typeof sortable.container === \"function\") {\n        sortableContainer = sortable.container();\n      } else {\n        sortableContainer = sortable.container;\n      }\n\n      while (element.parentElement && element.parentElement !== sortableContainer) {\n        element = element.parentElement;\n      }\n\n      return element;\n    }\n  }\n\n  async componentWillLoad() {\n    this.subtitleWatcher(this.subtitle);\n    this.headerActionsWatcher(this.headerActions);\n    this.footerActionsWatcher(this.footerActions);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n    }\n\n    // if (!this.dateAdapter) {\n    //   this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n    //     this.localization.$formats,\n    //     this.localization.$globals\n    //   );\n    // }\n  }\n\n  componentDidLoad() {\n    this.sortable = this.element.closest(\"stzh-sortable\");\n\n    if (this.sortable) {\n      this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n      this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n      if (objectId) {\n        this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n        this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n      }\n    });\n  }\n\n  connectedCallback() {\n    this.init();\n\n    this.observer = new MutationObserver(this.handleMutation);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n\n    // this.resizeObserver = new ResizeObserver(this.handleResize);\n    // this.resizeObserver.observe(this.element);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    // if (this.resizeObserver) {\n    //   this.resizeObserver.disconnect();\n    // }\n  }\n\n  render() {\n    const imageUsed: boolean = hasSlot(this.element, \"image\");\n    const headingUsed: boolean = hasSlot(this.element, \"heading\");\n    const footerUsed: boolean = hasSlot(this.element, \"footer\");\n    const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n    const Heading = `h${this.headingLevel}`;\n    const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n    const sortableChildElement = this.findSortableChildElement();\n\n    const isFirstItemInSortable = sortableChildElement?.parentElement\n      && Array.from(sortableChildElement?.parentElement?.children)\n        .indexOf(sortableChildElement) === 0;\n\n    const isLastItemInSortable = sortableChildElement?.parentElement\n      && Array.from(sortableChildElement?.parentElement?.children)\n        .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n    const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n    const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n    // const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n    // const headerActions = [\n    //   ...this._headerActions\n    // ];\n\n    const hasHeading = !!this.heading || headingUsed;\n\n    const hasHeader = hasHeading\n      || this._subtitles.length > 0\n      || this._headerActions.length > 0\n      // || nonCollapsingTextHeaderActions.length > 0\n      || this.starrable\n      || sortableActionsEnabled;\n\n    const hasFooter = footerUsed\n      || this._footerActions.length > 0\n      || this.selectable\n      // || !!this.author\n      // || !!this.date;\n\n    const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);\n\n    const classes = {\n      \"stzh-card\": true,\n      \"stzh-card--has-link\": !!this.href,\n      \"stzh-card--has-image\": imageUsed,\n      \"stzh-card--has-content\": contentUsed,\n      \"stzh-card--has-subtitle\": !!this.subtitle,\n      \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n      \"stzh-card--has-header\": hasHeader,\n      \"stzh-card--has-footer\": hasFooter,\n      // \"stzh-card--has-tag\": !!this.tag,\n      \"stzh-card--is-collapsible\": this.collapsible,\n      \"stzh-card--is-collapsed\": this.collapsed,\n      \"stzh-card--is-starred\": this.starred,\n      \"stzh-card--is-checked\": this.checked,\n      \"stzh-card--is-sortable\": sortableEnabled,\n      [`stzh-card--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n        <article\n          // ref={(el) => (this.mainElement = el as HTMLElement)}\n          class={classes}\n        >\n          <a\n            ref={(el) => (this.imageLinkElement = el as HTMLAnchorElement)}\n            aria-hidden=\"true\"\n            tabindex=\"-1\"\n            class=\"stzh-card__image-link\"\n            href={this.href}\n            target={this.target}\n            onClick={this.href ? this.handleCardClick : null}\n          >\n            <slot name=\"image\"></slot>\n          </a>\n          <div class=\"stzh-card__content-wrapper\">\n            <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n            {/* {this.tag && <div class=\"stzh-card__tag\">{this.tag}</div>} */}\n\n            <header\n              // ref={(el) => (this.headerElement = el as HTMLElement)}\n              class=\"stzh-card__header\"\n              onClick={this.headerClick}\n            >\n              <div class=\"stzh-card__header-top\">\n                <div\n                  // ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n                  class=\"stzh-card__header-left\"\n                >\n                  <div class=\"stzh-card__title-area\">\n                    {hasHeading &&\n                      <Heading class=\"stzh-card__title\">\n                        <a\n                          ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement)}\n                          class=\"stzh-card__title-link\"\n                          href={this.href}\n                          target={this.target}\n                          onClick={this.href ? this.handleCardClick : null}\n                        >\n                          <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n                            {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n                          </div>\n                        </a>\n                      </Heading>\n                    }\n                    {this._subtitles.length > 0 &&\n                      <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n                        {this._subtitles.map(subtitle => (\n                          <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n                        ))}\n                      </Subtitle>\n                    }\n                  </div>\n                </div>\n                <div\n                  // ref={(el) => (this.headerRightElement = el as HTMLElement)}\n                  class=\"stzh-card__header-right\"\n                >\n                  <div class=\"stzh-card__card-actions\">\n                    {/* {this._headerActions.map(action => (\n                      <stzh-button\n                        class={{\n                          \"stzh-card__card-action\": true,\n                          \"is-button\": true,\n                          \"show-medium\": !action.onlyCollapseText,\n                          \"hide-when-collapsed\": !action.onlyCollapseText,\n                          \"hide-text-when-collapsed\": action.onlyCollapseText\n                        }}\n                        icon={action.icon}\n                        badge={action.badge}\n                        badgeEmpty={action.badgeEmpty}\n                        badgeType={action.badgeType}\n                        variant=\"tertiary\"\n                        size=\"tiny\"\n                        badgePosition=\"icon\"\n                        onClick={(e: MouseEvent) => { this.actionClick(e, action) }}\n                      >\n                        <span\n                          class={{\n                            \"vshow-medium\": action.onlyCollapseText,\n                            \"vhide-when-collapsed\": action.onlyCollapseText\n                          }}\n                        >\n                          {action.label}\n                        </span>\n                      </stzh-button>\n                    ))} */}\n\n                    {this.starrable &&\n                      <stzh-tooltip>\n                        <stzh-button\n                          class=\"stzh-card__card-action is-star\"\n                          icon={this.starred ? \"star-filled\" : \"star\"}\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          iconOnly={true}\n                          onClick={this.starToggleClick}\n                        ></stzh-button>\n                        <div slot=\"content\">\n                          {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                        </div>\n                      </stzh-tooltip>\n                    }\n\n                    {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n                    {/* {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) && */}\n                    {(this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) &&\n                      <stzh-popover\n                        label={this.localization.actionsPopoverLabel}\n                        placement=\"bottom-end\"\n                        class={{\n                          \"stzh-card__card-action-popover\": true,\n                          // \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n                        }}\n                      >\n                        <stzh-button\n                          class=\"stzh-card__card-action is-further\"\n                          variant=\"tertiary\"\n                          size=\"tiny\"\n                          icon=\"more-vertical\"\n                          iconOnly={true}\n                          badge={this.headerActionsBadge}\n                          badgeEmpty={headerActionsWithBadge.length > 0}\n                          badgePosition=\"icon\"\n                          badgeType={this.headerActionsBadgeType || headerActionsWithBadge[0]?.badgeType || \"default\"}\n                        ></stzh-button>\n                        <stzh-menu slot=\"content\">\n                          {/* {nonCollapsingTextHeaderActions.map(action => ( */}\n                          {this._headerActions.map(action => (\n                            <stzh-menu-item\n                              // class=\"hide-medium show-when-collapsed\"\n                              icon={action.icon}\n                              badge={action.badge}\n                              badgeEmpty={action.badgeEmpty}\n                              badgeType={action.badgeType}\n                              onClick={(e: MouseEvent) => { this.actionClick(e, action) }}\n                            >\n                              {action.label}\n                            </stzh-menu-item>\n                          ))}\n\n                          {sortableActionsEnabled &&\n                            <Fragment>\n                              {!isFirstItemInSortable &&\n                                <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n                                  {this.localization.actionMoveUp}\n                                </stzh-menu-item>\n                              }\n                              {!isLastItemInSortable &&\n                                <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n                                  {this.localization.actionMoveDown}\n                                </stzh-menu-item>\n                              }\n                            </Fragment>\n                          }\n\n                          {this.starrable &&\n                            <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n                              {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n                            </stzh-menu-item>\n                          }\n                        </stzh-menu>\n                      </stzh-popover>\n                    }\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"stzh-card__header-meta\">\n                <slot name=\"meta\"></slot>\n              </div>\n            </header>\n\n            <div class=\"stzh-card__content hide-when-collapsed\">\n              <slot name=\"content\"></slot>\n            </div>\n\n            <div class=\"stzh-card__footer hide-when-collapsed\">\n              {/* {(this.author || this.date) &&\n                <div class=\"stzh-card__footer-meta\">\n                  {this.author &&\n                    <div class=\"stzh-card__footer-author\">{this.author}</div>\n                  }\n                  {this.author && this.date &&\n                    <div class=\"stzh-card__footer-meta-separator\"></div>\n                  }\n                  {this.date &&\n                    <div class=\"stzh-card__footer-date\">\n                      {this.dateAdapter.format(new Date(this.date), \"dateInput\")}\n                    </div>\n                  }\n                </div>\n              } */}\n\n              <slot name=\"footer\">\n                {this._footerActions.length > 0 &&\n                  <stzh-actionset\n                    class=\"stzh-card__footer-actionset\"\n                    actions={this._footerActions}\n                  ></stzh-actionset>\n                }\n\n                {this.selectable &&\n                  <stzh-button\n                    class=\"stzh-card__footer-select-button\"\n                    fullwidth\n                    type=\"radio\"\n                    variant=\"secondary\"\n                    name={this.name}\n                    value={this.value}\n                    checked={this.checked}\n                    disabled={this.disabled}\n                    label={this.localization.select}\n                    onStzhChange={this.handleSelectionChange}\n                  ></stzh-button>\n                }\n              </slot>\n            </div>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n",":host {\n  --description-color: var(--stzh-cardlist-description-color, inherit);\n  --background-color: var(--stzh-cardlist-background-color, inherit);\n}\n\n.stzh-cardlist {\n  &__cards {\n    display: grid;\n    gap: $gridGutter;\n\n    @include mq($from: small) {\n      gap: $gridGutterSmall;\n    }\n\n    @include mq($from: medium) {\n      gap: $gridGutterMedium;\n    }\n\n    @include mq($from: large) {\n      gap: $gridGutterLarge;\n    }\n\n    @include mq($from: ultra) {\n      gap: $gridGutterUltra;\n    }\n  }\n\n  &__header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n    align-items: flex-start;\n\n    @include mq($from: medium) { // was smallheader before\n      flex-direction: row;\n    }\n  }\n\n  &__description {\n    @include fontCurve('p1');\n    --stzh-icon-color: #{$colorPrimary70};\n\n    &:not(:empty) {\n      margin-bottom: space('xsmall');\n\n      @include mq($from: medium) { // was smallheader before\n        margin-bottom: 0;\n      }\n    }\n\n    ::slotted(stzh-heading) {\n      --color: var(--description-color);\n    }\n  }\n\n  &__switch {\n    --color: inherit;\n    align-self: end;\n  }\n\n  /* Has content inside header */\n\n  &:has(#{&}__description:not(:empty)) &__header,\n  &--has-toggle-link &__header {\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n  /* Subpages layout variant */\n\n  &--layout-subpages &__cards:has(stzh-card-navigation:not([has-lead])),\n  &--layout-subpages &__cards:has(stzh-pi-content-navigation:not([has-lead])) {\n    @include spaceCurve('row-gap', 'tiny');\n\n    @include mq($from: small) {\n      padding-left: calc(((100% - (#{$gridGutterSmall} * 3)) / 4) + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      padding-left: 0;\n    }\n  }\n\n  &--layout-subpages &__cards:has(stzh-card-navigation[has-lead]),\n  &--layout-subpages &__cards:has(stzh-pi-content-navigation[has-lead]) {\n    @include spaceCurve('row-gap', 'regular');\n\n    @include mq($from: small) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n  }\n\n  /* Teasers and Pi Teasers layout variant */\n\n  &--layout-teasers &__cards,\n  &--layout-pi-teasers &__cards {\n    @include spaceCurve('row-gap', 'medium');\n\n    @include mq($from: small) {\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n    }\n\n    @include mq($from: medium) {\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n    }\n\n    @include mq($from: large) {\n      grid-template-columns: repeat(4, minmax(0, 1fr));\n    }\n  }\n\n  /* Searchresults layout variant */\n\n  &--layout-searchresults &__cards {\n    gap: space('xlarge');\n  }\n\n  /* Fullwidth layout variant (e.g. for MeinKonto dashboard) */\n\n  &--layout-fullwidth &__cards {\n    @include spaceCurve('gap', 'regular');\n  }\n\n  /* Pi Teasers variant */\n  &--layout-pi-teasers {\n    background-color: var(--background-color);\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n    width: calc(100vw - var(--stzh-scrollbar-width));\n    max-width: calc(100vw - var(--stzh-scrollbar-width));\n    @include spaceCurve('padding-top', 'big');\n    @include spaceCurve('padding-bottom', 'big');\n  }\n\n  &--layout-pi-teasers &__header,\n  &--layout-pi-teasers &__cards {\n    @include container();\n  }\n}\n","import { Component, Host, h, Element, Prop, Listen, State, Event, EventEmitter } from \"@stencil/core\";\n\nimport { StzhCardlistCollapseAllEvent } from \"../../index\";\nimport { StzhCardlistLocalizedText } from \"./stzh-cardlist.localization\";\n\n/**\n * @slot - Slot for `stzh-card` elements\n * @slot description - Slot for description\n */\n@Component({\n  tag: \"stzh-cardlist\",\n  styleUrl: \"stzh-cardlist.scss\",\n  scoped: true,\n})\nexport class StzhCardlist {\n  /** Translation strings */\n  @Prop() localization: StzhCardlistLocalizedText;\n\n  @Prop({ reflect: true }) layout: \"fullwidth\" | \"searchresults\" | \"subpages\" | \"teasers\" | \"pi-teasers\" = \"fullwidth\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Whether collapse/expand toggle link */\n  @Prop({ reflect: true }) showToggleLink: boolean = false;\n\n  /** Whether sorting should be enabled */\n  @Prop() sortableEnabled: boolean = false;\n\n  /** HTML attribute that is used by the `toArray()` of sortable method */\n  @Prop() sortableDataIdAttribute: string = \"data-id\";\n\n  @Element() element: HTMLStzhCardlistElement;\n\n  /** Collapse all event */\n  @Event() stzhCollapseAll: EventEmitter<StzhCardlistCollapseAllEvent>;\n\n  @Listen(\"stzhCollapse\")\n  collapseListener() {\n    this.updateCollapsedState();\n  }\n\n  @State() allCollapsed: boolean = false;\n\n  private collapseClick = () => {\n    const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n    cards.forEach(card => {\n      if (card.collapsible) {\n        card.collapsed = !this.allCollapsed;\n      }\n    });\n\n    this.allCollapsed = !this.allCollapsed;\n\n    this.stzhCollapseAll.emit({\n      component: \"stzh-cardlist\",\n      allCollapsed: this.allCollapsed,\n    });\n  };\n\n  private updateCollapsedState = () => {\n    const cards = Array.from(this.element.querySelectorAll(\"stzh-card\"));\n    this.allCollapsed = !cards.some(card => !card.collapsed);\n  };\n\n  private sortableGhostClone: Function = (dragElement: HTMLElement) => {\n    // const [clonedElement, clonedStzhElement, originalStzhElement] = cloneWrappedStzhElement(dragElement);\n\n    // if (\n    //   clonedStzhElement\n    //   && originalStzhElement\n    //   && clonedStzhElement.tagName.toLowerCase() === \"stzh-card\"\n    // ) {\n    //   const clonedStzhElementCard: HTMLStzhCardElement = clonedStzhElement as HTMLStzhCardElement;\n    //   const originalStzhElementCard: HTMLStzhCardElement = originalStzhElement as HTMLStzhCardElement;\n\n    //   // copy every property that is not reflected to its attribute\n    //   clonedStzhElementCard.heading = originalStzhElementCard.heading;\n    //   clonedStzhElementCard.subtitle = originalStzhElementCard.subtitle;\n    //   clonedStzhElementCard.headerActions = originalStzhElementCard.headerActions;\n    //   clonedStzhElementCard.footerActions = originalStzhElementCard.footerActions;\n    //   clonedStzhElementCard.hideMovementActions = originalStzhElementCard.hideMovementActions;\n    // }\n\n    // return clonedElement;\n\n    const card =\n      dragElement.tagName.toLowerCase() === \"stzh-card\" ? dragElement : dragElement.querySelector(\"stzh-card\");\n\n    if (card) {\n      const originalElement = dragElement as HTMLStzhCardElement;\n      const clonedElement = dragElement.cloneNode(true) as HTMLStzhCardElement;\n\n      // copy every property that is not reflected to its attribute\n      clonedElement.heading = originalElement.heading;\n      clonedElement.subtitle = originalElement.subtitle;\n      clonedElement.headerActions = originalElement.headerActions;\n      clonedElement.footerActions = originalElement.footerActions;\n      clonedElement.hideMovementActions = originalElement.hideMovementActions;\n\n      return clonedElement;\n    }\n  };\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"cardlist\");\n    }\n  }\n\n  componentDidLoad() {\n    this.updateCollapsedState();\n  }\n\n  render() {\n    const classes = {\n      \"stzh-cardlist\": true,\n      \"stzh-cardlist--has-toggle-link\": this.showToggleLink,\n      [`stzh-cardlist--layout-${this.layout}`]: !!this.layout,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-cardlist__header\">\n            <div class=\"stzh-cardlist__description\">\n              {this.description ? this.description : <slot name=\"description\"></slot>}\n            </div>\n            {this.showToggleLink && (\n              <stzh-link\n                class=\"stzh-cardlist__switch\"\n                icon={this.allCollapsed ? \"list-expanded\" : \"list-shrinked\"}\n                label={this.allCollapsed ? this.localization.expandAll : this.localization.collapseAll}\n                onClick={this.collapseClick}\n              ></stzh-link>\n            )}\n          </div>\n\n          <stzh-sortable\n            disabled={!this.sortableEnabled}\n            dataIdAttribute={this.sortableDataIdAttribute}\n            ghostClone={this.sortableGhostClone}\n          >\n            <div class=\"stzh-cardlist__cards\" role=\"list\">\n              <slot></slot>\n            </div>\n          </stzh-sortable>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-c8ead7fc.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,a as n,g as s}from"./p-c7bfac7a.js";const o='.sc-stzh-content-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-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::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-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "content content content content")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "content content content content content content content content")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content aside-right aside-right")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, "aside-left aside-left content content content content content content content content content aside-right"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, "content content content content content content content content content content content content"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:"cta cta cta ."}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:"cta cta cta cta cta . . .";--stzh-cta-small-grid-template-areas:"cta cta cta cta . . . ."}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:"text text text .";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:"text text text ."}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:"text text text text text text . .";--stzh-richtext-grid-template-areas:"text text text text text text . ."}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:"list list list .";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:"list list list list list . . .";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-eventdata{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:"cta cta cta cta"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:"cta cta cta cta cta cta cta cta";--stzh-cta-small-grid-template-areas:"cta cta cta cta cta cta cta cta"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:"list list list list";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:"list list list list list list list list";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-section[variant=contextbox],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout="false"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:"content content content content content content content content content content content content";--stzh-content-shifted-grid-template-areas:"content content content content content content content content content content content content";--stzh-content-full-grid-template-areas:"content content content content content content content content content content content content";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}';const a=class{constructor(e){t(this,e);this.variant="default";this.preventElementLayout=false}render(){const t={"stzh-content":true,[`stzh-content--${this.variant}`]:!!this.variant};return e(n,null,e("div",{class:t},e("slot",null)))}get element(){return s(this)}};a.style=o;export{a as stzh_content};
+//# sourceMappingURL=p-c8ead7fc.entry.js.map

package/dist/stzh-components/{p-f7979f2a.entry.js.map → p-c8ead7fc.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["stzhContentCss","StzhContent","render","classes","this","variant","h","Host","class"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n  }\n\n  &[variant=\"shifted\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n    }\n  }\n\n  &[variant=\"full\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n    }\n  }\n\n  ::slotted(*) {\n    grid-area: content;\n  }\n\n  &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted(*) {\n    /* CTA Layout */\n\n    @include mq($from: small) {\n      --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n      --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n    }\n\n    /* Text / Richtext Layout */\n\n    @include mq($from: small) {\n      --stzh-text-display: grid;\n      --stzh-text-grid-template-areas: \"text text text .\";\n\n      --stzh-richtext-display: grid;\n      --stzh-richtext-grid-template-areas: \"text text text .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-text-grid-template-areas: \"text text text text text text . .\";\n      --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n    }\n\n    /* Datalist Layout */\n\n    @include mq($from: small) {\n      --stzh-datalist-grid-template-areas: \"list list list .\";\n      // breakout with details element inside datalist-item\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n    }\n\n    @include mq($from: large) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n    }\n\n    @include mq($from: ultra) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n    }\n\n    /* Reset layout inside certain components */\n\n    stzh-datalist,\n    stzh-eventdata {\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n    }\n\n    stzh-section[variant=\"highlight\"],\n    stzh-ghettobox,\n    stzh-message,\n    stzh-toast,\n    stzh-tooltip,\n    stzh-popover,\n    stzh-accordion,\n    stzh-timeline,\n    stzh-twocolumns,\n    stzh-textandimage,\n    stzh-datalist stzh-datalist,\n    stzh-dialog,\n    stzh-overlay {\n      /* CTA Layout */\n\n      @include mq($from: small) {\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n      }\n\n      @include mq($from: medium) {\n        --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n      }\n\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n\n      /* Datalist Layout */\n\n      @include mq($from: small) {\n        --stzh-datalist-grid-template-areas: \"list list list list\";\n        // breakout with details element inside datalist-item\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n      }\n\n      @include mq($from: medium) {\n        --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n      }\n\n      @include mq($from: large) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n      }\n\n      @include mq($from: ultra) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n      }\n    }\n  }\n}\n\n.stzh-content {\n  // set nested content elements to be fullwidth\n  --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-content\",\n  styleUrl: \"stzh-content.scss\",\n  scoped: true\n})\nexport class StzhContent {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"shifted\" | \"full\" = \"default\";\n\n  /** Prevent changing layout of elements within this content element */\n  @Prop({ reflect: true }) preventElementLayout = false;\n\n  @Element() element: HTMLStzhContentElement;\n\n  render() {\n    const classes = {\n      \"stzh-content\": true,\n      [`stzh-content--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,ssnB,MCgBVC,EAAW,M,sCAE6C,U,0BAGnB,K,CAIhD,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,CAAC,iBAAiBC,KAAKC,aAAcD,KAAKC,SAG5C,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOL,GACVG,EAAA,c"}
+{"version":3,"names":["stzhContentCss","StzhContent","render","classes","this","variant","h","Host","class"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n  }\n\n  &[variant=\"shifted\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n    }\n  }\n\n  &[variant=\"full\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n    }\n  }\n\n  ::slotted(*) {\n    grid-area: content;\n  }\n\n  &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted(*) {\n    /* CTA Layout */\n\n    @include mq($from: small) {\n      --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n      --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n    }\n\n    /* Text / Richtext Layout */\n\n    @include mq($from: small) {\n      --stzh-text-display: grid;\n      --stzh-text-grid-template-areas: \"text text text .\";\n\n      --stzh-richtext-display: grid;\n      --stzh-richtext-grid-template-areas: \"text text text .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-text-grid-template-areas: \"text text text text text text . .\";\n      --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n    }\n\n    /* Datalist Layout */\n\n    @include mq($from: small) {\n      --stzh-datalist-grid-template-areas: \"list list list .\";\n      // breakout with details element inside datalist-item\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n    }\n\n    @include mq($from: large) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n    }\n\n    @include mq($from: ultra) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n    }\n\n    /* Reset layout inside certain components */\n\n    stzh-datalist,\n    stzh-eventdata {\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n    }\n\n    stzh-section[variant=\"highlight\"],\n    stzh-section[variant=\"contextbox\"],\n    stzh-ghettobox,\n    stzh-message,\n    stzh-toast,\n    stzh-tooltip,\n    stzh-popover,\n    stzh-accordion,\n    stzh-timeline,\n    stzh-twocolumns,\n    stzh-textandimage,\n    stzh-datalist stzh-datalist,\n    stzh-dialog,\n    stzh-overlay {\n      /* CTA Layout */\n\n      @include mq($from: small) {\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n      }\n\n      @include mq($from: medium) {\n        --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n      }\n\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n\n      /* Datalist Layout */\n\n      @include mq($from: small) {\n        --stzh-datalist-grid-template-areas: \"list list list list\";\n        // breakout with details element inside datalist-item\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n      }\n\n      @include mq($from: medium) {\n        --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n      }\n\n      @include mq($from: large) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n      }\n\n      @include mq($from: ultra) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n      }\n    }\n  }\n}\n\n.stzh-content {\n  // set nested content elements to be fullwidth\n  --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-content\",\n  styleUrl: \"stzh-content.scss\",\n  scoped: true\n})\nexport class StzhContent {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"shifted\" | \"full\" = \"default\";\n\n  /** Prevent changing layout of elements within this content element */\n  @Prop({ reflect: true }) preventElementLayout = false;\n\n  @Element() element: HTMLStzhContentElement;\n\n  render() {\n    const classes = {\n      \"stzh-content\": true,\n      [`stzh-content--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,2spB,MCgBVC,EAAW,M,sCAE6C,U,0BAGnB,K,CAIhD,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,CAAC,iBAAiBC,KAAKC,aAAcD,KAAKC,SAG5C,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOL,GACVG,EAAA,c"}