npm - @oiz/stzh-components - Versions diffs - 4.0.0-beta3 → 4.0.1-beta - Mend

@oiz/stzh-components 4.0.0-beta3 → 4.0.1-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (461) hide show

package/dist/components/{p-18ad2006.js → p-1e02d63c.js} RENAMED Viewed

@@ -1,16 +1,16 @@
 import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h, F as Fragment, d as Host } from './p-8f01554b.js';
 import { s as setPropsIfNull, h as hasSlot } from './p-d1f98854.js';
-import { d as defineCustomElement$9 } from './p-70aa77ed.js';
+import { d as defineCustomElement$9 } from './p-978466ee.js';
 import { d as defineCustomElement$8 } from './p-26f6521e.js';
 import { d as defineCustomElement$7 } from './p-f57f18a3.js';
 import { d as defineCustomElement$6 } from './p-8d12a95f.js';
 import { d as defineCustomElement$5 } from './p-18d44ffb.js';
 import { d as defineCustomElement$4 } from './p-0310b26a.js';
-import { d as defineCustomElement$3 } from './p-3d24141a.js';
-import { d as defineCustomElement$2 } from './p-adc06dc4.js';
-import { d as defineCustomElement$1 } from './p-da29e441.js';
+import { d as defineCustomElement$3 } from './p-7eced0db.js';
+import { d as defineCustomElement$2 } from './p-ae7adee7.js';
+import { d as defineCustomElement$1 } from './p-a518f263.js';
-const stzhCardCss = ".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,[stzh-hidden].sc-stzh-card-h{display:none}.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;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],.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],.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table th,.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,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.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-xxsmall)}@media screen and (min-width: 900px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}.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;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-xlarge);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-large)}}@media screen and (min-width: 900px) and (min-width: 600px){.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-xlarge);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-large);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@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;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)}.stzh-card--hyphens.sc-stzh-card .stzh-card__heading.sc-stzh-card,.stzh-card--hyphens.sc-stzh-card .stzh-card__title.sc-stzh-card{hyphens:auto}";
+const stzhCardCss = ".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,[stzh-hidden].sc-stzh-card-h{display:none}.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;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],.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],.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table th,.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,.sc-stzh-card-h.sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h.sc-stzh-card-s>table th,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h.sc-stzh-card-s>table,.sc-stzh-card-h.sc-stzh-card-s>table td,.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-grey10);border-radius:var(--border-radius)}.stzh-card--background-grey.sc-stzh-card{background-color:var(--stzh-color-grey10)}.stzh-card--background-white.sc-stzh-card{background-color:var(--stzh-color-white)}.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-xxsmall)}@media screen and (min-width: 900px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}.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;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.sc-stzh-card:hover,.stzh-card.sc-stzh-card:focus{background-color:var(--stzh-color-secondary10)}.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-xlarge);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-large)}}@media screen and (min-width: 900px) and (min-width: 600px){.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-xlarge);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-large);padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding-bottom:var(--stzh-space-xlarge)}}@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;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)}.stzh-card--hyphens.sc-stzh-card .stzh-card__heading.sc-stzh-card,.stzh-card--hyphens.sc-stzh-card .stzh-card__title.sc-stzh-card{hyphens:auto}";
 const StzhCardStyle0 = stzhCardCss;
 const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
@@ -160,6 +160,7 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
             });
         };
         this.localization = undefined;
+        this.backgroundColor = "grey";
         this.variant = "default";
         this.collapsed = false;
         this.starred = false;
@@ -320,6 +321,8 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
         const descriptionId = `stzh-card${uniqueId}`;
         const classes = {
             "stzh-card": true,
+            "stzh-card--background-grey": this.backgroundColor === "grey",
+            "stzh-card--background-white": this.backgroundColor === "white",
             "stzh-card--has-link": !!this.href,
             "stzh-card--has-image": imageUsed,
             "stzh-card--has-content": contentUsed,
@@ -336,23 +339,23 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
             [`stzh-card--${this.variant}`]: !!this.variant,
             "stzh-card--hyphens": this.hyphensEnabled,
         };
-        return (h(Host, { key: '1587b18ba3da21978032c26f6ac482abe2144778', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: '8caafa7daef550eb646bb76477482d280a1620b2',
+        return (h(Host, { key: 'd0eef9062a29646a186d19da6255840694b8fd5c', role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { key: 'f743f96f9741c622226380bc2abb103e10bfd6b1',
             // ref={(el) => (this.mainElement = el as HTMLElement)}
-            class: classes }, h("a", { key: '17964c16658126657cb9dacd3c0f8b980631cd60', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.handleCardClick : null }, h("slot", { key: '8b14f902045f26f35c1e95262b8b9ad61418ca77', name: "image" })), h("div", { key: '94bb79a442e262909a10257671d5df6e2b318cff', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: '332a9e0985e2798aeea238f4d424e7810264b584', class: "stzh-card__dnd", name: "drag" }), h("header", { key: '3fbee678ec5d7fbfa79fd0a0d26cd2dfe0d1c161',
+            class: classes }, h("a", { key: '640483d5376e514c360855b6da8f691b2cdbc0cd', ref: el => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.handleCardClick : null }, h("slot", { key: '05d98dbc9b7f0853fc30f78fa864301feb84d7f7', name: "image" })), h("div", { key: '2d1bacb43c5393fbd4e10f8ccb9048162f09977b', class: "stzh-card__content-wrapper" }, h("stzh-icon", { key: '905ab068fdc01d0e501917fe46363bc735c24d63', class: "stzh-card__dnd", name: "drag" }), h("header", { key: 'b6b61a0f4c19d806ddb78e383c781333bdcd4cf2',
             // ref={(el) => (this.headerElement = el as HTMLElement)}
-            class: "stzh-card__header", onClick: this.headerClick }, h("div", { key: 'ba01cc5960df92d985519d3d4a66abc1d4335458', class: "stzh-card__header-top" }, h("div", { key: '47dd2bfcc201d908e3de80799f7f361515ffd0eb',
+            class: "stzh-card__header", onClick: this.headerClick }, h("div", { key: '75574a4c535d79cab3314216c2f1e5829a2d81e7', class: "stzh-card__header-top" }, h("div", { key: '48c9405b03de8683843188beb535afa4d37063a0',
             // ref={(el) => (this.headerLeftElement = el as HTMLElement)}
-            class: "stzh-card__header-left" }, h("div", { key: 'f3da8157dd758a6533191e0c7ef42baa0964a035', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: '75adac7f6a8b88d920823fb029589f519b0c01f5', class: "stzh-card__title" }, h("a", { key: '052d13b68c9742009e5440583044b816fb965472', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.handleCardClick : null, "aria-describedby": descriptionId }, h("div", { key: 'a380d0874b7065fe255403a897c17798cac4ff00', ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("span", { key: '3fb19ac7f0b63140e5dbb9e176f2a840bc426d7d', id: descriptionId, hidden: true }, (_d = this.localization) === null || _d === void 0 ? void 0 : _d.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: 'd8905cc49cf3318f0df41e6121510ec330e30c8a', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: '6e5c89ac84f6a4464980e9396b31438ae7c09422',
+            class: "stzh-card__header-left" }, h("div", { key: '288614966eee0d722dae1f145226959c078e9a18', class: "stzh-card__title-area" }, hasHeading && (h(Heading, { key: '07f172a2b0c38e0347f0b30ec72405f382394212', class: "stzh-card__title" }, h("a", { key: 'f8026dce8c08471ddde40fa11b8351c288fb477a', ref: el => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.handleCardClick : null, "aria-describedby": descriptionId }, h("div", { key: '962a2bc4fc049b38165c1c2fd3a7d6c54cc54751', ref: el => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" }))))), h("span", { key: 'dc437d07bf20f045657e2b16382900934f367f33', id: descriptionId, hidden: true }, (_d = this.localization) === null || _d === void 0 ? void 0 : _d.clickTitle), this._subtitles.length > 0 && (h(Subtitle, { key: '6505122f261569a949a5507f6eab27b914e6228a', class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle))))))), h("div", { key: 'e9581cd7f17f6f8e26592e5109829bb40a0a112d',
             // ref={(el) => (this.headerRightElement = el as HTMLElement)}
-            class: "stzh-card__header-right" }, h("div", { key: 'e91d30238a0a98a2c2dc6dea054224fff5ef6886', class: "stzh-card__card-actions" }, this.starrable && (h("stzh-tooltip", { key: '57c9c5fe99120b6d1f79bfcfd006731bc2afd16e' }, h("stzh-button", { key: '26da19edd0f7dc06b814c9b147cc27a38c1161fd', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: '59eba4c20ddef2345b477853dbedde844cd01e62', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: '6a061b2e61d39ddcd0775258421d148f7296db0a', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
+            class: "stzh-card__header-right" }, h("div", { key: 'e3d153139e2b181b525ee9266d350b77d21885f7', class: "stzh-card__card-actions" }, this.starrable && (h("stzh-tooltip", { key: 'ff738548e442b88f9dfc4388f47a6cb373b8731c' }, h("stzh-button", { key: '8be33c7951488e14ee77c16cbaeb7599d12cd594', class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { key: '89ba16bdb636ea98eb613535d5743932332dab39', slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd))), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) && (h("stzh-popover", { key: '866c206709fc68e75358245d949de2f94014731f', label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
                 "stzh-card__card-action-popover": true,
                 // "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
-            } }, h("stzh-button", { key: '41a7bb990ab59a7676ab18fd6f6434cc462fcc4e', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_e = headerActionsWithBadge[0]) === null || _e === void 0 ? void 0 : _e.badgeType) || "default" }), h("stzh-menu", { key: 'fed4bd3fa12ab1853510ef0cbd6f9819b9125f3d', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
+            } }, h("stzh-button", { key: 'bec38b589210b52cea9035638efd096e3a12bc97', class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true, badge: this.headerActionsBadge, badgeEmpty: headerActionsWithBadge.length > 0, badgePosition: "icon", badgeType: this.headerActionsBadgeType || ((_e = headerActionsWithBadge[0]) === null || _e === void 0 ? void 0 : _e.badgeType) || "default" }), h("stzh-menu", { key: '5dbdb078257355d6ef472f90268cb80ba27cc44a', slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
             // class="hide-medium show-when-collapsed"
             icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: (e) => {
                 this.actionClick(e, action);
             }
-        }, action.label))), sortableActionsEnabled && (h(Fragment, { key: 'b394328b2568c9d511689bb702cbc2fc35f47472' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: '771f877ab0dd3657942894dc698d50366cadbe2a', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: 'ff343131c4ff6a24193da4662625647730864c58', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: 'f3012e3345965ea3253f63097482d2c1fd3e83ea', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: 'a2b07fc0039dd4500d0300fe2dffe997eda93bc4', class: "stzh-card__header-meta" }, h("slot", { key: '4f74031fa6cdc4dae3376cde2acd5e650622a360', name: "meta" }))), h("div", { key: '7bb76513dea446a206be1788d5a663fd7ff055b4', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: '64452e7c5fa348a074c50743022fa827469fc738', name: "content" })), h("div", { key: '1f4a913a978305e5fd153b99d0810e89c8dba918', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: 'd59e50bd4f4a60d082dfba8be2b7923e8752148d', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: 'd3fe192ddb459b27e8de88cf8ceee79100e465df', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: '02c7dba7ecdc05b6351ee080473316d28fd221d7', 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 }))))))));
+        }, action.label))), sortableActionsEnabled && (h(Fragment, { key: 'a66b9cbb82680026665532df59b3d260bd567fad' }, !isFirstItemInSortable && (h("stzh-menu-item", { key: 'c5144ea3cd6e63c63aaaea5a954afaac2084e916', icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp)), !isLastItemInSortable && (h("stzh-menu-item", { key: 'd4d1b07661c7f9ba4a98035ffa6d07439050f097', icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)))), this.starrable && (h("stzh-menu-item", { key: '05237cd7773f63c8407c0c1f7ee7e007f14e678f', icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))))), h("div", { key: 'ef855363b7098083eea57776f1d6ec4e0cc29f02', class: "stzh-card__header-meta" }, h("slot", { key: 'e3d8c168e44f20c95756d11681ee747863dccda4', name: "meta" }))), h("div", { key: '9dfa797204fb876c34a66ca408c030fee42240dc', class: "stzh-card__content hide-when-collapsed" }, h("slot", { key: '553f663d65edcde3295744461b8bcc1c23981a1a', name: "content" })), h("div", { key: 'e3cc8d37b278309950eb26347d37346c597bcdff', class: "stzh-card__footer hide-when-collapsed" }, h("slot", { key: '96a790640048c359597721852832b4c323228549', name: "footer" }, this._footerActions.length > 0 && (h("stzh-actionset", { key: '3b3b2a1d65ea8c6f63ac6a4dc5f8663ea68c99d5', class: "stzh-card__footer-actionset", actions: this._footerActions })), this.selectable && (h("stzh-button", { key: 'bd560d5fcef2ff1a5a147e0af7a9e260927e7183', 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 this; }
     static get watchers() { return {
@@ -363,6 +366,7 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends H {
     static get style() { return StzhCardStyle0; }
 }, [6, "stzh-card", {
         "localization": [16],
+        "backgroundColor": [513, "background-color"],
         "variant": [513],
         "collapsed": [1540],
         "starred": [1540],
@@ -453,4 +457,4 @@ function defineCustomElement() {
 export { StzhCard as S, defineCustomElement as d };
-//# sourceMappingURL=p-18ad2006.js.map
+//# sourceMappingURL=p-1e02d63c.js.map

package/dist/components/p-1e02d63c.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"p-1e02d63c.js","mappings":"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","names":[],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.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 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 background-color: $colorGrey10;\n border-radius: var(--border-radius);\n // box-shadow: var(--box-shadow);\n // 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 &--background-grey {\n background-color: $colorGrey10; \n }\n\n &--background-white {\n background-color: $colorWhite; \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 &__dnd {\n --size: #{iconSize('xsmall')};\n position: 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 display: flex;\n visibility: var(--dnd-visibility);\n opacity: var(--dnd-opacity);\n transition: 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 }\n\n &__header-top {\n display: flex;\n justify-content: space-between;\n align-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 &__header-left,\n &__header-right {\n display: flex;\n }\n\n &__header-right {\n @include spaceCurve('padding-left', 'tiny');\n }\n\n &__left {\n align-self: center;\n }\n\n &__title-area {\n @include wordWrap;\n overflow: hidden;\n }\n\n &__title,\n &__subtitle {\n margin: 0;\n }\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 &__subtitle {\n @include fontSize('milli');\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n text-decoration-line: none;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n margin-left: -0.5625em;\n }\n\n &__subtitle-text {\n position: relative;\n display: inline-flex;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n padding-left: 0.5625em;\n\n &::after {\n content: ',';\n position: absolute;\n left: 0;\n }\n }\n\n &__content {\n @include fontSize('milli');\n flex-grow: 1;\n }\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 display: inline-flex;\n white-space: nowrap;\n }\n\n &__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 }\n\n &__card-action-popover {\n --width: auto;\n }\n\n &:hover,\n &:focus {\n background-color: $colorSecondary10;\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('xlarge');\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('xlarge');\n padding-right: space('medium');\n }\n\n &--has-header#{&}--has-content &__content {\n padding-top: space('xsmall');\n }\n\n &--has-header#{&}--service &__header {\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-left', 'regular');\n @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('xlarge');\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 @include spaceCurve('padding-bottom', 'regular');\n @include spaceCurve('padding-left', 'regular');\n @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 /* Hyphens */\n &--hyphens &__heading,\n &--hyphens &__title {\n hyphens: auto;\n }\n}\n","import { Component, Element, Event, EventEmitter, forceUpdate, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhButtonChangeEvent,\n StzhCardClickEvent,\n StzhCardCollapseEvent,\n StzhCardHeaderAction,\n StzhCardHeaderActionClickEvent,\n StzhCardStarClickEvent,\n StzhCardSubtitleClickEvent,\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\n// import { media } from '../../utils/media-utils';\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 /** Whether background should be grey (default) or white */\n @Prop({ reflect: true }) backgroundColor: \"grey\" | \"white\" = \"grey\";\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 /** Automatic Hyphens */\n @Prop({ reflect: true }) hyphensEnabled: 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 = [\n \"stzh-popover\",\n \"stzh-tooltip\",\n \"button\",\n \"a\",\n \"input\",\n \"select\",\n \"textarea\",\n \"iframe\",\n \"details\",\n \"label\",\n \"area\",\n ];\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('stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip');\n\n const texts = this.element.querySelectorAll('stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text');\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 =\n sortableChildElement?.parentElement &&\n Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable =\n sortableChildElement?.parentElement &&\n Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) ===\n 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 =\n 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 || this._footerActions.length > 0 || this.selectable;\n // || !!this.author\n // || !!this.date;\n\n const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge || action.badgeEmpty);\n\n const uniqueId = `--is-described-${Math.random().toString(36).slice(2, 9)}`;\n const descriptionId = `stzh-card${uniqueId}`;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--background-grey\": this.backgroundColor === \"grey\",\n \"stzh-card--background-white\": this.backgroundColor === \"white\",\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 \"stzh-card--hyphens\": this.hyphensEnabled,\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 aria-describedby={descriptionId}\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 <span id={descriptionId} hidden>\n {this.localization?.clickTitle}\n </span>\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) => {\n this.actionClick(e, action);\n }}\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 class=\"stzh-card__footer-actionset\" actions={this._footerActions}></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"],"version":3}

package/dist/components/{p-ef28cd34.js → p-1fe5af54.js} RENAMED Viewed

@@ -3,7 +3,7 @@ import { C as Cookie } from './p-979121a0.js';
 import { d as defineCustomElement$4 } from './p-26f6521e.js';
 import { d as defineCustomElement$3 } from './p-f57f18a3.js';
 import { d as defineCustomElement$2 } from './p-8d12a95f.js';
-import { d as defineCustomElement$1 } from './p-d8b73add.js';
+import { d as defineCustomElement$1 } from './p-a74ffd15.js';
 const stzhToastbarCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;left:1.25rem;right:1.25rem;bottom:calc(var(--stzh-pagetitle-disturber-stuck-height, 0px) + var(--stzh-sticky-cta-stuck-bottom-height, 0px))}@media screen and (min-width: 600px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:26.8125rem}}@media screen and (min-width: 900px){:host{left:2.5rem;max-width:27.5rem}}@media screen and (min-width: 1260px){:host{left:4rem;max-width:30.3125rem}}@media screen and (min-width: 1600px){:host{left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);max-width:34.625rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-small)}.stzh-toastbar{display:flex;flex-direction:column;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{align-items:flex-start}}";
 const StzhToastbarStyle0 = stzhToastbarCss;
@@ -136,7 +136,7 @@ const StzhToastbar = /*@__PURE__*/ proxyCustomElement(class StzhToastbar extends
         const classes = {
             "stzh-toastbar": true,
         };
-        return (h(Host, { key: '61474f23d193f01a9ac2e0f952db3f1384f68c61' }, h("div", { key: 'b0986bc204ffd8a54ed5d4c904fc56e301bb958f', class: classes }, h("slot", { key: 'c91fcaf716675d3e823d799d352348ce5b570413', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: 'b9e5edb980024fe6e80d4a7a5128f34c6accf678' }, h("div", { key: 'fb9f475c57e772fad3d64d50ee04131125fe370c', class: classes }, h("slot", { key: '9b812139373255f3f1a4220cca3f7dfcbb550b8b', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -187,4 +187,4 @@ function defineCustomElement() {
 export { StzhToastbar as S, defineCustomElement as d };
-//# sourceMappingURL=p-ef28cd34.js.map
+//# sourceMappingURL=p-1fe5af54.js.map

package/dist/components/{p-ef28cd34.js.map → p-1fe5af54.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-ef28cd34.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n @include spaceCurve('bottom', 'regular');\n z-index: $zIndexOverlay;\n position: fixed;\n pointer-events: none;\n left: $containerMargin;\n right: $containerMargin;\n bottom: calc(\n var(--stzh-pagetitle-disturber-stuck-height, 0px)\n + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n );\n\n @include mq($from: small) {\n left: $containerMarginSmall;\n right: auto;\n max-width: 429px;\n }\n\n @include mq($from: medium) {\n left: $containerMarginMedium;\n max-width: 440px;\n }\n\n @include mq($from: large) {\n left: $containerMarginLarge;\n max-width: 485px;\n }\n\n @include mq($from: ultra) {\n left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n max-width: 554px;\n }\n\n ::slotted(:not([hidden]):not([slot])) {\n margin-bottom: space('small');\n }\n}\n\n.stzh-toastbar {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n @include mq($from: small) {\n align-items: flex-start;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhToastbarInitialToast,\n StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/\n @slot - Slot for stzh-toast elements\n /\n@Component({\n tag: \"stzh-toastbar\",\n styleUrl: \"stzh-toastbar.scss\",\n shadow: true\n})\nexport class StzhToastbar {\n /\n Time after toasts are hidden (in seconds).\n * Toasts with type `error` will stay, until the user closes them manually.\n /\n @Prop() hideAfter: number = 30;\n\n /\n Maximum of toasts allowed to be shown.\n * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n /\n @Prop() max: number = 5;\n\n /\n Initial toasts.\n \n Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n \n If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n /\n @Prop() initialToasts: StzhToastbarInitialToast[] \| string = [];\n private _initialToasts: StzhToastbarInitialToast[] = [];\n\n @Element() element: HTMLStzhToastbarElement;\n\n /* Create new toast. /\n @Method()\n async toast(\n label: string,\n { type, link }: { type?: StzhToastType, link?: HTMLStzhButtonElement } = { type: \"info\" }\n ): Promise<HTMLStzhToastElement> {\n const toast = document.createElement(\"stzh-toast\");\n toast.hidden = true;\n toast.label = label;\n toast.role = \"alert\";\n toast.type = type \|\| \"info\";\n toast.initialOpenAnimation = true;\n\n if (link) {\n link.slot = \"link\";\n link.size = \"small\";\n toast.appendChild(link);\n }\n\n this.element.appendChild(toast);\n\n return toast;\n }\n\n @Watch(\"initialToasts\")\n initialToastsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._initialToasts = JSON.parse(newValue);\n } else {\n this._initialToasts = newValue;\n }\n }\n\n private toastAppended(toast: HTMLStzhToastElement) {\n if (toast.getAttribute('data-stzh-toastbar-managed')) {\n return;\n }\n\n toast.setAttribute('data-stzh-toastbar-managed', '');\n\n toast.addEventListener(\"stzhClosed\", () => {\n toast.remove();\n });\n\n if (toast.type !== \"error\") {\n let timeoutStarted = new Date().getTime();\n let restTime = this.hideAfter 1000;\n let currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n\n toast.addEventListener(\"pointerenter\", () => {\n if (currentTimeout) {\n window.clearTimeout(currentTimeout);\n const timePassed = new Date().getTime() - timeoutStarted;\n restTime = restTime - timePassed;\n }\n });\n\n toast.addEventListener(\"pointerleave\", () => {\n timeoutStarted = new Date().getTime();\n currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n });\n }\n }\n\n private toastsAppended() {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n this.toastAppended(toast);\n });\n }\n\n private hideOverflowingItems() {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n const childCount = host.children.length;\n\n Array.from(host.children)\n .splice(0, childCount - this.max)\n .forEach((toast: HTMLStzhToastElement) => {\n toast.hide();\n });\n }\n\n private handleSlotchange = () => {\n this.toastsAppended();\n this.hideOverflowingItems();\n }\n\n componentWillLoad() {\n this.initialToastsWatcher(this.initialToasts);\n }\n\n componentDidLoad() {\n this._initialToasts.forEach(async (data) => {\n if (data.cookie) {\n const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n if (alreadyClosedBefore) {\n return;\n }\n }\n\n let link = data.link;\n\n if (!(link instanceof HTMLElement)) {\n const generatedLink = document.createElement(\"stzh-button\");\n generatedLink.slot = \"link\";\n generatedLink.size = \"small\";\n\n Object.assign(generatedLink, data.link);\n link = generatedLink;\n }\n\n const toast = await this.toast(data.label, {\n type: data.type,\n link: link as HTMLStzhButtonElement\n })\n\n if (data.cookie) {\n let cookieExpires = 365;\n\n if (data.cookieExpires === 0) {\n cookieExpires = null;\n } else if (data.cookieExpires) {\n cookieExpires = data.cookieExpires;\n }\n\n toast.addEventListener(\"stzhClosed\", () => {\n Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n expires: cookieExpires\n });\n });\n }\n })\n }\n\n render() {\n const classes = {\n \"stzh-toastbar\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot onSlotchange={this.handleSlotchange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-1fe5af54.js","mappings":"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","names":["HTMLElement"],"sources":["src/components/stzh-toastbar/stzh-toastbar.scss?tag=stzh-toastbar&encapsulation=shadow","src/components/stzh-toastbar/stzh-toastbar.tsx"],"sourcesContent":[":host {\n @include spaceCurve('bottom', 'regular');\n z-index: $zIndexOverlay;\n position: fixed;\n pointer-events: none;\n left: $containerMargin;\n right: $containerMargin;\n bottom: calc(\n var(--stzh-pagetitle-disturber-stuck-height, 0px)\n + var(--stzh-sticky-cta-stuck-bottom-height, 0px)\n );\n\n @include mq($from: small) {\n left: $containerMarginSmall;\n right: auto;\n max-width: 429px;\n }\n\n @include mq($from: medium) {\n left: $containerMarginMedium;\n max-width: 440px;\n }\n\n @include mq($from: large) {\n left: $containerMarginLarge;\n max-width: 485px;\n }\n\n @include mq($from: ultra) {\n left: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n max-width: 554px;\n }\n\n ::slotted(:not([hidden]):not([slot])) {\n margin-bottom: space('small');\n }\n}\n\n.stzh-toastbar {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n\n @include mq($from: small) {\n align-items: flex-start;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Method,\n Watch,\n} from \"@stencil/core\";\n\nimport {\n StzhToastbarInitialToast,\n StzhToastType,\n} from \"../../index\";\n\nimport Cookie from \"js-cookie\";\n\nconst KEY_PREFIX_CLOSED = \"stzh-components-toastbar-closed\";\n\n/\n @slot - Slot for stzh-toast elements\n /\n@Component({\n tag: \"stzh-toastbar\",\n styleUrl: \"stzh-toastbar.scss\",\n shadow: true\n})\nexport class StzhToastbar {\n /\n Time after toasts are hidden (in seconds).\n * Toasts with type `error` will stay, until the user closes them manually.\n /\n @Prop() hideAfter: number = 30;\n\n /\n Maximum of toasts allowed to be shown.\n * If more are created, oldest will be hidden, even if timeout not ended yet or toast type is `error`.\n /\n @Prop() max: number = 5;\n\n /\n Initial toasts.\n \n Array of objects that at least includes `label` and optionally `type`, `link` (object with `href` and `label`) `cookie` and `cookieExpires`:\n * `[{\"label\": \"Lorem ipsum\", \"link\": { \"label\": \"More info\", \"href\": \"https://example.com\" }, \"cookie\": \"cookie-banner\", \"cookieExpires\": 365 }]`\n \n If `cookie` exists in an object, it will check for that cookie name first (prefixed with `stzh-components-toastbar-closed-`) and only show if cookie doesn't exist.\n * `cookieExpires` sets the cookie lifetime (default 365 days, set 0 for session cookie).\n /\n @Prop() initialToasts: StzhToastbarInitialToast[] \| string = [];\n private _initialToasts: StzhToastbarInitialToast[] = [];\n\n @Element() element: HTMLStzhToastbarElement;\n\n /* Create new toast. /\n @Method()\n async toast(\n label: string,\n { type, link }: { type?: StzhToastType, link?: HTMLStzhButtonElement } = { type: \"info\" }\n ): Promise<HTMLStzhToastElement> {\n const toast = document.createElement(\"stzh-toast\");\n toast.hidden = true;\n toast.label = label;\n toast.role = \"alert\";\n toast.type = type \|\| \"info\";\n toast.initialOpenAnimation = true;\n\n if (link) {\n link.slot = \"link\";\n link.size = \"small\";\n toast.appendChild(link);\n }\n\n this.element.appendChild(toast);\n\n return toast;\n }\n\n @Watch(\"initialToasts\")\n initialToastsWatcher(newValue: any[] \| string) {\n if (typeof newValue === \"string\") {\n this._initialToasts = JSON.parse(newValue);\n } else {\n this._initialToasts = newValue;\n }\n }\n\n private toastAppended(toast: HTMLStzhToastElement) {\n if (toast.getAttribute('data-stzh-toastbar-managed')) {\n return;\n }\n\n toast.setAttribute('data-stzh-toastbar-managed', '');\n\n toast.addEventListener(\"stzhClosed\", () => {\n toast.remove();\n });\n\n if (toast.type !== \"error\") {\n let timeoutStarted = new Date().getTime();\n let restTime = this.hideAfter 1000;\n let currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n\n toast.addEventListener(\"pointerenter\", () => {\n if (currentTimeout) {\n window.clearTimeout(currentTimeout);\n const timePassed = new Date().getTime() - timeoutStarted;\n restTime = restTime - timePassed;\n }\n });\n\n toast.addEventListener(\"pointerleave\", () => {\n timeoutStarted = new Date().getTime();\n currentTimeout = window.setTimeout(() => {\n toast.hide();\n }, restTime);\n });\n }\n }\n\n private toastsAppended() {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n Array.from(host.children).forEach((toast: HTMLStzhToastElement) => {\n this.toastAppended(toast);\n });\n }\n\n private hideOverflowingItems() {\n const host = (this.element.getRootNode() as ShadowRoot)?.host \|\| this.element;\n const childCount = host.children.length;\n\n Array.from(host.children)\n .splice(0, childCount - this.max)\n .forEach((toast: HTMLStzhToastElement) => {\n toast.hide();\n });\n }\n\n private handleSlotchange = () => {\n this.toastsAppended();\n this.hideOverflowingItems();\n }\n\n componentWillLoad() {\n this.initialToastsWatcher(this.initialToasts);\n }\n\n componentDidLoad() {\n this._initialToasts.forEach(async (data) => {\n if (data.cookie) {\n const alreadyClosedBefore = Cookie.get(`${KEY_PREFIX_CLOSED}-${data.cookie}`);\n\n if (alreadyClosedBefore) {\n return;\n }\n }\n\n let link = data.link;\n\n if (!(link instanceof HTMLElement)) {\n const generatedLink = document.createElement(\"stzh-button\");\n generatedLink.slot = \"link\";\n generatedLink.size = \"small\";\n\n Object.assign(generatedLink, data.link);\n link = generatedLink;\n }\n\n const toast = await this.toast(data.label, {\n type: data.type,\n link: link as HTMLStzhButtonElement\n })\n\n if (data.cookie) {\n let cookieExpires = 365;\n\n if (data.cookieExpires === 0) {\n cookieExpires = null;\n } else if (data.cookieExpires) {\n cookieExpires = data.cookieExpires;\n }\n\n toast.addEventListener(\"stzhClosed\", () => {\n Cookie.set(`${KEY_PREFIX_CLOSED}-${data.cookie}`, '1', {\n expires: cookieExpires\n });\n });\n }\n })\n }\n\n render() {\n const classes = {\n \"stzh-toastbar\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot onSlotchange={this.handleSlotchange}></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-0b0557e7.js → p-55042ae5.js} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { S as StzhSocialmediastreamItemActionVariant } from './p-f5779736.js';
 import { d as defineCustomElement$3 } from './p-8d12a95f.js';
-import { d as defineCustomElement$2 } from './p-a367fa4a.js';
-import { d as defineCustomElement$1 } from './p-adc06dc4.js';
+import { d as defineCustomElement$2 } from './p-b4ffee20.js';
+import { d as defineCustomElement$1 } from './p-ae7adee7.js';
 const stzhSocialmediastreamItemCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}.stzh-socialmediastream-item{display:block;background-color:var(--stzh-color-grey10);text-decoration:none;color:var(--stzh-color-grey80);}.stzh-socialmediastream-item:visited{color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover{background-color:var(--stzh-color-secondary10);color:var(--stzh-color-black)}.stzh-socialmediastream-item__image{position:relative}.stzh-socialmediastream-item__ratio{--background-color:var(--image-background-color)}.stzh-socialmediastream-item__image-inner-wrapper{background-color:var(--image-background-color);position:absolute;inset:0;height:100%}.stzh-socialmediastream-item__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.stzh-socialmediastream-item__content{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__content-head{display:flex;align-items:center}.stzh-socialmediastream-item__content-head stzh-icon{--color:var(--stzh-color-primary)}.stzh-socialmediastream-item__content-title{width:100%;--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item:hover .stzh-socialmediastream-item__content-title{--color:var(--stzh-color-black)}.stzh-socialmediastream-item__content-body{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);--color:var(--stzh-color-grey80)}.stzh-socialmediastream-item__content-body a{word-wrap:break-word;color:var(--stzh-link-color)}.stzh-socialmediastream-item__content-body a:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__content-body a+a{margin-left:var(--stzh-space-xxsmall)}.stzh-socialmediastream-item__content-footer{display:flex;align-items:center;gap:var(--stzh-space-small)}.stzh-socialmediastream-item__action{text-decoration:none;font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height);color:var(--stzh-link-color);display:flex;align-items:center;gap:var(--stzh-space-xxsmall);line-height:1}.stzh-socialmediastream-item__action:hover{color:var(--stzh-link-hover-color)}.stzh-socialmediastream-item__action stzh-icon{--size:1rem}";
 const StzhSocialmediastreamItemStyle0 = stzhSocialmediastreamItemCss;
@@ -81,7 +81,7 @@ const StzhSocialmediastreamItem = /*@__PURE__*/ proxyCustomElement(class StzhSoc
         const classes = {
             "stzh-socialmediastream-item": true,
         };
-        return (h(Host, { key: 'd0d38e82f0566ad1e5d7b1047337be0afc09ebf6' }, h("a", { key: 'bb3791833ad0e743227a9b6d80e478429e2c2198', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: 'dfbe111151965ee75e29fbaf2f421635ad8af625', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: '440d44f48a10091b3a03d08b7c36f83dd0fa41e2', ratio: "1:1" }), h("div", { key: 'b76f8dce5ade82b505d7785aa8f3e2ef148d7f58', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: '40b90b2e5f9eb29bb2945b2ce6c51459a9c94323', src: this._item.image, alt: this._item.account.title })))), h("div", { key: '4f7288d877bfa62853a4622f54bbe73dd7480773', class: "stzh-socialmediastream-item__content" }, h("div", { key: '387eef5ffe7e6f730d56af3dc37ec5dd71343ea8', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: '1e6cf71e83e3d11531e4394359a1ac7eb96c3570', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: '595260b9ab1b2d5fd3ffa5e4438a4707af791066' }, this._item.account.title), h("br", { key: '25270462d3b3fd4753d739d14ffc8fd9da3cf162' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: 'e8c9d3fa0469977581205be5cfc9df0a45fa3fec', name: this.getIconName(this._item) })), h("div", { key: 'ac7fe169099d966c7e38887a0cc5b63bdba9c33c', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: '40e91fb81d0b50cd2475e6f6cf6c9d987aeba809', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
+        return (h(Host, { key: 'e7f3fb9d2144bef2d5286859074f362f9fd69f80' }, h("a", { key: 'b25d73abbf4980e0d128a04512b0bf69f533b684', class: classes, href: this._item.link, target: "_blank" }, this._item.image && (h("div", { key: '82d1444277d3e2400a46b9a04a7515f68b5d0d29', class: "stzh-socialmediastream-item__image" }, h("stzh-ratio", { key: 'ef5f6241799c23e04401536d8f6cf205cc4ff464', ratio: "1:1" }), h("div", { key: '5ded83cee583fd0c68eaad813a6b9133acd58a79', class: "stzh-socialmediastream-item__image-inner-wrapper" }, h("img", { key: 'c825fc5d0c2fc32ae8310e09b115a5d66c38f52b', src: this._item.image, alt: this._item.account.title })))), h("div", { key: '325bbbec6db81cd162c202e1db3d081a0a9bc90a', class: "stzh-socialmediastream-item__content" }, h("div", { key: 'bb430c5d0d6da2b71ed5683c4ec95dff3a9afddb', class: "stzh-socialmediastream-item__content-head" }, h("stzh-text", { key: '7aa2374ae540a323a58a3e2981c77ea9f4d1953b', size: "nano", class: "stzh-socialmediastream-item__content-title" }, h("strong", { key: 'd6f8340db17ae3b8c5bb5eb694db94aac767b791' }, this._item.account.title), h("br", { key: 'b6f7af663bcda2f17bec69e016c0ef8568c19e88' }), this.dateAdapter.format(this.getParsedDate(this._item.date), "dateInput")), h("stzh-icon", { key: 'c3aad8d18ca03df7ce5944d5f70e54826415cfbf', name: this.getIconName(this._item) })), h("div", { key: '326a2cc358d734650d8f0b868b4cceff2f6de79a', class: "stzh-socialmediastream-item__content-body", innerHTML: this._item.text }), h("div", { key: '4b15cf37d4255fd2a5b2a0b65ac29b8376936f24', class: "stzh-socialmediastream-item__content-footer 1q23" }, this._item.actions &&
             this._item.actions.map(action => (h("a", { href: action.url, title: action.title, class: "stzh-socialmediastream-item__action", target: "_blank" }, h("stzh-icon", { name: this.getActionIconName(action.variant) }), action.count))))))));
     }
     get element() { return this; }
@@ -127,4 +127,4 @@ function defineCustomElement() {
 export { StzhSocialmediastreamItem as S, defineCustomElement as d };
-//# sourceMappingURL=p-0b0557e7.js.map
+//# sourceMappingURL=p-55042ae5.js.map

package/dist/components/{p-0b0557e7.js.map → p-55042ae5.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~0b0557e7~~.js","mappings":"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","names":[],"sources":["src/components/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n display: block;\n background-color: var(--stzh-color-grey10);\n text-decoration: none;\n color: var(--stzh-color-grey80);\n\n &:visited {\n color: var(--stzh-color-grey80);\n }\n\n &:hover {\n background-color: var(--stzh-color-secondary10);\n color: var(--stzh-color-black);\n }\n\n &__image {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n }\n\n &__image img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* Content /\n\n &__content {\n padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n display: flex;\n flex-direction: column;\n gap: var(--stzh-space-small);\n }\n\n / Content head /\n\n &__content-head {\n display: flex;\n align-items: center;\n }\n\n &__content-head stzh-icon {\n --color: var(--stzh-color-primary);\n }\n\n &__content-title {\n width: 100%;\n --color: var(--stzh-color-grey80);\n }\n\n &:hover &__content-title {\n --color: var(--stzh-color-black);\n }\n\n / Content Body /\n\n &__content-body {\n @include font(medium);\n @include fontSize(micro);\n --color: var(--stzh-color-grey80);\n }\n\n &__content-body a {\n word-wrap: break-word;\n color: var(--stzh-link-color);\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__content-body a + a {\n margin-left: space(xxsmall);\n }\n\n / Content Footer and Actions /\n\n &__content-footer {\n display: flex;\n align-items: center;\n gap: var(--stzh-space-small);\n }\n\n &__action {\n text-decoration: none;\n @include fontSize(pico);\n color: var(--stzh-link-color);\n display: flex;\n align-items: center;\n gap: var(--stzh-space-xxsmall);\n line-height: 1.0;\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__action stzh-icon {\n --size: 16px;\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n StzhLocaleAdapter,\n StzhLocaleComponent,\n StzhSocialmediastreamItemActionVariant,\n StzhSocialmediastreamItemData,\n} from \"../../index\";\n\n@Component({\n tag: \"stzh-socialmediastream-item\",\n styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n /* Socialmediastream item /\n @Prop() item: StzhSocialmediastreamItemData \| string = \"\";\n private _item: StzhSocialmediastreamItemData \| undefined;\n\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\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 @Watch(\"item\")\n itemWatcher(newValue: StzhSocialmediastreamItemData \| string) {\n if (!newValue) {\n this._item = undefined;\n } else if (typeof newValue === \"string\") {\n try {\n this._item = JSON.parse(newValue);\n } catch (e) {\n this._item = undefined;\n }\n } else {\n this._item = newValue;\n }\n }\n\n private init = () => {\n this.itemWatcher(this.item);\n };\n\n private getIconName(item: StzhSocialmediastreamItemData) {\n switch (item.channel) {\n case \"facebook\":\n return \"facebook\";\n case \"twitter\":\n case \"x\":\n return \"twitter\";\n case \"instagram\":\n return \"instagram\";\n case \"youtube\":\n return \"youtube\";\n default:\n return \"warning\";\n }\n }\n\n private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n switch (variant) {\n case StzhSocialmediastreamItemActionVariant.comments:\n return \"facebook-comment\";\n case StzhSocialmediastreamItemActionVariant.likes:\n return \"like-hand\";\n case StzhSocialmediastreamItemActionVariant.shares:\n return \"share\";\n }\n }\n\n private getParsedDate(dateStr: string): Date \| null {\n const parsedDate = new Date(dateStr);\n if (isNaN(parsedDate.getTime())) {\n return null;\n }\n return parsedDate;\n }\n\n connectedCallback() {\n this.init();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n }\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n render() {\n const classes = {\n \"stzh-socialmediastream-item\": true,\n };\n\n return (\n <Host>\n <a class={classes} href={this._item.link} target=\"_blank\">\n {this._item.image && (\n <div class=\"stzh-socialmediastream-item__image\">\n <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n <img src={this._item.image} alt={this._item.account.title} />\n </div>\n </div>\n )}\n <div class=\"stzh-socialmediastream-item__content\">\n <div class=\"stzh-socialmediastream-item__content-head\">\n <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n <strong>{this._item.account.title}</strong>\n <br />\n {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n </stzh-text>\n <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n </div>\n <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n {this._item.actions &&\n this._item.actions.map(action => (\n <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n {action.count}\n </a>\n ))}\n </div>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-55042ae5.js","mappings":"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","names":[],"sources":["src/components/stzh-socialmediastream-item/stzh-socialmediastream-item.scss?tag=stzh-socialmediastream-item","src/components/stzh-socialmediastream-item/stzh-socialmediastream-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-socialmediastream-item {\n display: block;\n background-color: var(--stzh-color-grey10);\n text-decoration: none;\n color: var(--stzh-color-grey80);\n\n &:visited {\n color: var(--stzh-color-grey80);\n }\n\n &:hover {\n background-color: var(--stzh-color-secondary10);\n color: var(--stzh-color-black);\n }\n\n &__image {\n position: relative;\n }\n\n &__ratio {\n --background-color: var(--image-background-color);\n }\n\n &__image-inner-wrapper {\n background-color: var(--image-background-color);\n position: absolute;\n inset: 0;\n height: 100%;\n }\n\n &__image img {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n /* Content /\n\n &__content {\n padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n display: flex;\n flex-direction: column;\n gap: var(--stzh-space-small);\n }\n\n / Content head /\n\n &__content-head {\n display: flex;\n align-items: center;\n }\n\n &__content-head stzh-icon {\n --color: var(--stzh-color-primary);\n }\n\n &__content-title {\n width: 100%;\n --color: var(--stzh-color-grey80);\n }\n\n &:hover &__content-title {\n --color: var(--stzh-color-black);\n }\n\n / Content Body /\n\n &__content-body {\n @include font(medium);\n @include fontSize(micro);\n --color: var(--stzh-color-grey80);\n }\n\n &__content-body a {\n word-wrap: break-word;\n color: var(--stzh-link-color);\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__content-body a + a {\n margin-left: space(xxsmall);\n }\n\n / Content Footer and Actions /\n\n &__content-footer {\n display: flex;\n align-items: center;\n gap: var(--stzh-space-small);\n }\n\n &__action {\n text-decoration: none;\n @include fontSize(pico);\n color: var(--stzh-link-color);\n display: flex;\n align-items: center;\n gap: var(--stzh-space-xxsmall);\n line-height: 1.0;\n\n &:hover {\n color: var(--stzh-link-hover-color);\n }\n }\n\n &__action stzh-icon {\n --size: 16px;\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport {\n StzhLocaleAdapter,\n StzhLocaleComponent,\n StzhSocialmediastreamItemActionVariant,\n StzhSocialmediastreamItemData,\n} from \"../../index\";\n\n@Component({\n tag: \"stzh-socialmediastream-item\",\n styleUrl: \"stzh-socialmediastream-item.scss\",\n})\nexport class StzhSocialmediastreamItem {\n @Element() element: HTMLStzhSocialmediastreamItemElement;\n\n /* Socialmediastream item /\n @Prop() item: StzhSocialmediastreamItemData \| string = \"\";\n private _item: StzhSocialmediastreamItemData \| undefined;\n\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\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 @Watch(\"item\")\n itemWatcher(newValue: StzhSocialmediastreamItemData \| string) {\n if (!newValue) {\n this._item = undefined;\n } else if (typeof newValue === \"string\") {\n try {\n this._item = JSON.parse(newValue);\n } catch (e) {\n this._item = undefined;\n }\n } else {\n this._item = newValue;\n }\n }\n\n private init = () => {\n this.itemWatcher(this.item);\n };\n\n private getIconName(item: StzhSocialmediastreamItemData) {\n switch (item.channel) {\n case \"facebook\":\n return \"facebook\";\n case \"twitter\":\n case \"x\":\n return \"twitter\";\n case \"instagram\":\n return \"instagram\";\n case \"youtube\":\n return \"youtube\";\n default:\n return \"warning\";\n }\n }\n\n private getActionIconName(variant: StzhSocialmediastreamItemActionVariant) {\n switch (variant) {\n case StzhSocialmediastreamItemActionVariant.comments:\n return \"facebook-comment\";\n case StzhSocialmediastreamItemActionVariant.likes:\n return \"like-hand\";\n case StzhSocialmediastreamItemActionVariant.shares:\n return \"share\";\n }\n }\n\n private getParsedDate(dateStr: string): Date \| null {\n const parsedDate = new Date(dateStr);\n if (isNaN(parsedDate.getTime())) {\n return null;\n }\n return parsedDate;\n }\n\n connectedCallback() {\n this.init();\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"socialmediastream-item\");\n }\n if (!this.dateAdapter) {\n this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n this.localization.$formats,\n this.localization.$globals\n );\n }\n }\n\n render() {\n const classes = {\n \"stzh-socialmediastream-item\": true,\n };\n\n return (\n <Host>\n <a class={classes} href={this._item.link} target=\"_blank\">\n {this._item.image && (\n <div class=\"stzh-socialmediastream-item__image\">\n <stzh-ratio ratio=\"1:1\"></stzh-ratio>\n <div class=\"stzh-socialmediastream-item__image-inner-wrapper\">\n <img src={this._item.image} alt={this._item.account.title} />\n </div>\n </div>\n )}\n <div class=\"stzh-socialmediastream-item__content\">\n <div class=\"stzh-socialmediastream-item__content-head\">\n <stzh-text size=\"nano\" class=\"stzh-socialmediastream-item__content-title\">\n <strong>{this._item.account.title}</strong>\n <br />\n {this.dateAdapter.format(this.getParsedDate(this._item.date), \"dateInput\")}\n </stzh-text>\n <stzh-icon name={this.getIconName(this._item)}></stzh-icon>\n </div>\n <div class=\"stzh-socialmediastream-item__content-body\" innerHTML={this._item.text}></div>\n <div class=\"stzh-socialmediastream-item__content-footer 1q23\">\n {this._item.actions &&\n this._item.actions.map(action => (\n <a href={action.url} title={action.title} class=\"stzh-socialmediastream-item__action\" target=\"_blank\">\n <stzh-icon name={this.getActionIconName(action.variant)}></stzh-icon>\n {action.count}\n </a>\n ))}\n </div>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-48a20e2d.js → p-6c821944.js} RENAMED Viewed

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