@oiz/stzh-components 2.14.1 → 2.14.2
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.
- package/dist/cjs/{app-globals-8d05cb28.js → app-globals-856f268a.js} +2 -2
- package/dist/cjs/{app-globals-8d05cb28.js.map → app-globals-856f268a.js.map} +1 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/stzh-actionset_4.cjs.entry.js +15 -27
- package/dist/cjs/stzh-actionset_4.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-appnav.cjs.entry.js +1 -1
- package/dist/cjs/stzh-appnav.cjs.entry.js.map +1 -1
- package/dist/cjs/stzh-components.cjs.js +1 -1
- package/dist/collection/components/stzh-actionset/stzh-actionset.js +3 -9
- package/dist/collection/components/stzh-actionset/stzh-actionset.js.map +1 -1
- package/dist/collection/components/stzh-appnav/stzh-appnav.css +0 -3
- package/dist/collection/components/stzh-card/stzh-card.css +0 -37
- package/dist/collection/components/stzh-card/stzh-card.js +11 -17
- package/dist/collection/components/stzh-card/stzh-card.js.map +1 -1
- package/dist/collection/components/stzh-card/stzh-card.stories.js +1 -2
- package/dist/collection/components/stzh-card-list/stzh-card-list.stories.js +0 -2
- package/dist/collection/index.js.map +1 -1
- package/dist/components/index.js +1 -1
- package/dist/components/index2.js.map +1 -1
- package/dist/components/stzh-actionset2.js +3 -9
- package/dist/components/stzh-actionset2.js.map +1 -1
- package/dist/components/stzh-appnav.js +1 -1
- package/dist/components/stzh-appnav.js.map +1 -1
- package/dist/components/stzh-card2.js +12 -18
- package/dist/components/stzh-card2.js.map +1 -1
- package/dist/esm/{app-globals-fb258145.js → app-globals-8a09d78c.js} +2 -2
- package/dist/esm/{app-globals-fb258145.js.map → app-globals-8a09d78c.js.map} +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/stzh-actionset_4.entry.js +15 -27
- package/dist/esm/stzh-actionset_4.entry.js.map +1 -1
- package/dist/esm/stzh-appnav.entry.js +1 -1
- package/dist/esm/stzh-appnav.entry.js.map +1 -1
- package/dist/esm/stzh-components.js +1 -1
- package/dist/esm-es5/{app-globals-fb258145.js → app-globals-8a09d78c.js} +2 -2
- package/dist/esm-es5/index.js.map +1 -1
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/stzh-actionset_4.entry.js +2 -2
- package/dist/esm-es5/stzh-actionset_4.entry.js.map +1 -1
- package/dist/esm-es5/stzh-appnav.entry.js +1 -1
- package/dist/esm-es5/stzh-appnav.entry.js.map +1 -1
- package/dist/esm-es5/stzh-components.js +1 -1
- package/dist/stzh-components/index.esm.js.map +1 -1
- package/dist/stzh-components/p-0bb08043.system.js.map +1 -1
- package/dist/stzh-components/{p-90df75de.system.entry.js → p-5733dcff.system.entry.js} +2 -2
- package/dist/stzh-components/p-5733dcff.system.entry.js.map +1 -0
- package/dist/stzh-components/{p-61209b86.system.js → p-6af6b8ac.system.js} +2 -2
- package/dist/stzh-components/{p-592a0a81.system.js → p-6c7cc671.system.js} +2 -2
- package/dist/stzh-components/{p-4926cc0e.entry.js → p-964e87a2.entry.js} +3 -3
- package/dist/stzh-components/p-964e87a2.entry.js.map +1 -0
- package/dist/stzh-components/{p-6a2947fe.system.entry.js → p-a14e154a.system.entry.js} +3 -3
- package/dist/stzh-components/p-a14e154a.system.entry.js.map +1 -0
- package/dist/stzh-components/{p-ae0889eb.js → p-bd52acfe.js} +2 -2
- package/dist/stzh-components/{p-c53ea563.entry.js → p-de184696.entry.js} +2 -2
- package/dist/stzh-components/p-de184696.entry.js.map +1 -0
- package/dist/stzh-components/stzh-components.esm.js +1 -1
- package/dist/stzh-components/stzh-components.js +1 -1
- package/dist/types/index.d.ts +0 -1
- package/package.json +1 -1
- package/dist/stzh-components/p-4926cc0e.entry.js.map +0 -1
- package/dist/stzh-components/p-6a2947fe.system.entry.js.map +0 -1
- package/dist/stzh-components/p-90df75de.system.entry.js.map +0 -1
- package/dist/stzh-components/p-c53ea563.entry.js.map +0 -1
- /package/dist/esm-es5/{app-globals-fb258145.js.map → app-globals-8a09d78c.js.map} +0 -0
- /package/dist/stzh-components/{p-61209b86.system.js.map → p-6af6b8ac.system.js.map} +0 -0
- /package/dist/stzh-components/{p-592a0a81.system.js.map → p-6c7cc671.system.js.map} +0 -0
- /package/dist/stzh-components/{p-ae0889eb.js.map → p-bd52acfe.js.map} +0 -0
|
@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './stzh-menu-item2.js';
|
|
|
10
10
|
import { d as defineCustomElement$2 } from './stzh-popover2.js';
|
|
11
11
|
import { d as defineCustomElement$1 } from './stzh-tooltip2.js';
|
|
12
12
|
|
|
13
|
-
const stzhCardCss = ".sc-stzh-card-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-card-h .has-focus.sc-stzh-card{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.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{--box-shadow:var(--stzh-box-shadow-popover);--border-color:var(--stzh-base-border-color);--border-radius:0.1875rem;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;border-radius:var(--border-radius)}@media print{.sc-stzh-card-h{page-break-inside:avoid;-moz-column-break-inside:avoid;-webkit-column-break-inside:avoid;break-inside:avoid}}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]){--box-shadow:none}[hide-elevation].sc-stzh-card-h:not([hide-elevation=false])[href]:hover,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false])[href]:focus-within,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]).is-selected,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]).is-chosen,.is-selected [hide-elevation].sc-stzh-card-h:not([hide-elevation=false]),.is-chosen [hide-elevation].sc-stzh-card-h:not([hide-elevation=false]){--box-shadow:var(--stzh-box-shadow-popover)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}[href].sc-stzh-card-h:hover,[href].sc-stzh-card-h:focus-within,.is-selected.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-selected .sc-stzh-card-h,.is-chosen .sc-stzh-card-h{--box-shadow:var(--stzh-box-shadow-overlay)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{--box-shadow:none;--border-color:transparent;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>*{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)}.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%;background-color:var(--stzh-color-grey13)}.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h .sc-stzh-card-s>[slot=meta]:not(:last-child){margin-right:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-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){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.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: 1024px){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.stzh-card.sc-stzh-card{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--stzh-color-white);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border-width:0.0625rem;border-style:solid;border-color:var(--border-color);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .vshow-medium.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}}@media screen and (max-width: 1023px){.stzh-card.sc-stzh-card .show-medium.sc-stzh-card{display:none}}@media screen and (min-width: 1024px){.stzh-card.sc-stzh-card .hide-medium.sc-stzh-card{display:none}}.stzh-card__content-wrapper.sc-stzh-card{position:relative;-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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:-ms-flexbox;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 1024px){.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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:-ms-inline-flexbox;display:inline-flex;margin-top:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:-ms-flexbox;display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-medium)}}.stzh-card__left.sc-stzh-card{-ms-flex-item-align:center;align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__image-link.sc-stzh-card{display:block}.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);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}@media screen and (min-width: 1024px){.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__subtitle-text.sc-stzh-card{position:relative;display:-ms-inline-flexbox;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{-ms-flex-positive:1;flex-grow:1}.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer-arrow.sc-stzh-card{--size:var(--stzh-icon-size-medium);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card__card-actions.sc-stzh-card{display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}@media screen and (max-width: 1023px){.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-color-grey70)}.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--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-xlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding:var(--stzh-space-xlarge)}}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.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 .stzh-card__image-link.sc-stzh-card:hover+.stzh-card__content-wrapper.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card:hover,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-link.sc-stzh-card:hover .stzh-card__footer-arrow.sc-stzh-card{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.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, var(--stzh-color-zueribluedark))}.stzh-card--is-collapsible.sc-stzh-card .stzh-card__header.sc-stzh-card{cursor:pointer}.stzh-card--is-collapsed.sc-stzh-card .vhide-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .vhide-when-collapsed.sc-stzh-card{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-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 .show-when-collapsed.sc-stzh-card,.stzh-card--has-collapsed-header.sc-stzh-card .stzh-card__header.sc-stzh-card .show-when-collapsed.sc-stzh-card{display:block}.stzh-card--is-collapsed.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none}.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, var(--stzh-color-zueriblue))}.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, var(--stzh-color-zueribluedark))}.stzh-card--has-hidden-header-border.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none;padding-bottom:0}.stzh-card--has-hidden-footer-border.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding-top:0;border-top:none}";
|
|
13
|
+
const stzhCardCss = ".sc-stzh-card-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-card-h{display:none}.sc-stzh-card-h *.sc-stzh-card,.sc-stzh-card-h *.sc-stzh-card::before,.sc-stzh-card-h *.sc-stzh-card::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-card-h .has-focus.sc-stzh-card{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.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{--box-shadow:var(--stzh-box-shadow-popover);--border-color:var(--stzh-base-border-color);--border-radius:0.1875rem;--content-min-height:7.5rem;--dnd-visibility:hidden;--dnd-opacity:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative;border-radius:var(--border-radius)}@media print{.sc-stzh-card-h{page-break-inside:avoid;-moz-column-break-inside:avoid;-webkit-column-break-inside:avoid;break-inside:avoid}}[collapsed].sc-stzh-card-h:not([collapsed=false]){--content-min-height:none}[checked].sc-stzh-card-h:not([checked=false]){outline:0.1875rem solid var(--stzh-color-primary, var(--stzh-color-zueriblue))}[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]){--box-shadow:none}[hide-elevation].sc-stzh-card-h:not([hide-elevation=false])[href]:hover,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false])[href]:focus-within,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]).is-selected,[hide-elevation].sc-stzh-card-h:not([hide-elevation=false]).is-chosen,.is-selected [hide-elevation].sc-stzh-card-h:not([hide-elevation=false]),.is-chosen [hide-elevation].sc-stzh-card-h:not([hide-elevation=false]){--box-shadow:var(--stzh-box-shadow-popover)}.is-ghost.sc-stzh-card-h::after,.is-ghost .sc-stzh-card-h::after{border-radius:var(--border-radius)}[href].sc-stzh-card-h:hover,[href].sc-stzh-card-h:focus-within,.is-selected.sc-stzh-card-h,.is-chosen.sc-stzh-card-h,.is-selected .sc-stzh-card-h,.is-chosen .sc-stzh-card-h{--box-shadow:var(--stzh-box-shadow-overlay)}.is-ghost.sc-stzh-card-h,.is-ghost .sc-stzh-card-h{--box-shadow:none;--border-color:transparent;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>*{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)}.sc-stzh-card-h .sc-stzh-card-s>[slot=image]{width:100%;max-width:100%;background-color:var(--stzh-color-grey13)}.sc-stzh-card-h .sc-stzh-card-s>img[slot=image]{display:block}.sc-stzh-card-h .sc-stzh-card-s>[slot=meta]:not(:last-child){margin-right:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>table{border:0;border-spacing:0}.sc-stzh-card-h .sc-stzh-card-s>table th{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.sc-stzh-card-h .sc-stzh-card-s>table td,.sc-stzh-card-h .sc-stzh-card-s>table th{padding:0}.sc-stzh-card-h .sc-stzh-card-s>table td{color:var(--stzh-color-black);padding-left:var(--stzh-space-xsmall)}.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-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){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.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: 1024px){.sc-stzh-card-h .sc-stzh-card-s>[slot=heading],.stzh-card__title.sc-stzh-card{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-regular-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-regular-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing)}}.stzh-card.sc-stzh-card{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:var(--stzh-color-white);border-radius:var(--border-radius);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);border-width:0.0625rem;border-style:solid;border-color:var(--border-color);-webkit-transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:-webkit-box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed);transition:box-shadow var(--stzh-base-transition-animation-speed), -webkit-box-shadow var(--stzh-base-transition-animation-speed)}.stzh-card__content-wrapper.sc-stzh-card{position:relative;-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;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:-ms-flexbox;display:flex;visibility:var(--dnd-visibility);opacity:var(--dnd-opacity);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);display:none}@media screen and (min-width: 1024px){.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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}.stzh-card__header-meta.sc-stzh-card:not(:empty){display:-ms-inline-flexbox;display:inline-flex;margin-top:var(--stzh-space-xsmall)}.stzh-card__header-left.sc-stzh-card,.stzh-card__header-right.sc-stzh-card{display:-ms-flexbox;display:flex}.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-xsmall)}@media screen and (min-width: 1024px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-card__header-right.sc-stzh-card{padding-left:var(--stzh-space-medium)}}.stzh-card__left.sc-stzh-card{-ms-flex-item-align:center;align-self:center}.stzh-card__title-area.sc-stzh-card{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden}.stzh-card__title.sc-stzh-card,.stzh-card__subtitle.sc-stzh-card{margin:0}.stzh-card__title-link.sc-stzh-card{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-card__image-link.sc-stzh-card{display:block}.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);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-text-decoration-line:none;text-decoration-line:none;margin-left:-0.5625em}@media screen and (min-width: 1024px){.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__subtitle-text.sc-stzh-card{position:relative;display:-ms-inline-flexbox;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{-ms-flex-positive:1;flex-grow:1}.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-medium)}@media screen and (min-width: 1024px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card__content.sc-stzh-card:not(:empty){padding:var(--stzh-space-xlarge)}}.stzh-card__footer-arrow.sc-stzh-card{--size:var(--stzh-icon-size-medium);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-card__card-actions.sc-stzh-card{display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}@media screen and (max-width: 1023px){.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-color-grey70)}.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--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-medium);border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card--has-header.sc-stzh-card .stzh-card__header.sc-stzh-card{padding:var(--stzh-space-xlarge)}}.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding:var(--stzh-space-medium);border-top:0.0625rem solid var(--stzh-base-border-color)}@media screen and (min-width: 1024px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-card--has-footer.sc-stzh-card .stzh-card__footer.sc-stzh-card{padding:var(--stzh-space-xlarge)}}.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card{color:var(--stzh-color-primary, var(--stzh-color-zueriblue));-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.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 .stzh-card__image-link.sc-stzh-card:hover+.stzh-card__content-wrapper.sc-stzh-card .stzh-card__title-link.sc-stzh-card,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card:hover,.stzh-card--has-link.sc-stzh-card .stzh-card__title-link.sc-stzh-card:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-link.sc-stzh-card:hover .stzh-card__footer-arrow.sc-stzh-card{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-card--has-subtitle-interactive.sc-stzh-card .stzh-card__subtitle.sc-stzh-card{cursor:pointer;font-family:inherit;padding:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.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, var(--stzh-color-zueribluedark))}.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{border-bottom:none}.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, var(--stzh-color-zueriblue))}.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, var(--stzh-color-zueribluedark))}.stzh-card--has-hidden-header-border.sc-stzh-card .stzh-card__header.sc-stzh-card{border-bottom:none;padding-bottom:0}.stzh-card--has-hidden-footer-border.sc-stzh-card .stzh-card__footer.sc-stzh-card:not(:empty){padding-top:0;border-top:none}";
|
|
14
14
|
|
|
15
15
|
const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLElement {
|
|
16
16
|
constructor() {
|
|
@@ -274,7 +274,7 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLEle
|
|
|
274
274
|
.indexOf(sortableChildElement) === ((_c = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _c === void 0 ? void 0 : _c.children.length) - 1;
|
|
275
275
|
const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;
|
|
276
276
|
const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;
|
|
277
|
-
const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
|
|
277
|
+
// const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
|
|
278
278
|
// const headerActions = [
|
|
279
279
|
// ...this._headerActions
|
|
280
280
|
// ];
|
|
@@ -282,7 +282,7 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLEle
|
|
|
282
282
|
const hasHeader = hasHeading
|
|
283
283
|
|| this._subtitles.length > 0
|
|
284
284
|
|| this._headerActions.length > 0
|
|
285
|
-
|| nonCollapsingTextHeaderActions.length > 0
|
|
285
|
+
// || nonCollapsingTextHeaderActions.length > 0
|
|
286
286
|
|| this.starrable
|
|
287
287
|
|| sortableActionsEnabled;
|
|
288
288
|
const hasFooter = footerUsed
|
|
@@ -308,25 +308,19 @@ const StzhCard = /*@__PURE__*/ proxyCustomElement(class StzhCard extends HTMLEle
|
|
|
308
308
|
};
|
|
309
309
|
return (h(Host, { role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { 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.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, hasHeading &&
|
|
310
310
|
h(Heading, { class: "stzh-card__title" }, h("a", { ref: (el) => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("div", { ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))), this._subtitles.length > 0 &&
|
|
311
|
-
h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this.
|
|
312
|
-
|
|
313
|
-
"is-button": true,
|
|
314
|
-
"show-medium": !action.onlyCollapseText,
|
|
315
|
-
"hide-when-collapsed": !action.onlyCollapseText,
|
|
316
|
-
"hide-text-when-collapsed": action.onlyCollapseText
|
|
317
|
-
}, icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
|
|
318
|
-
"vshow-medium": action.onlyCollapseText,
|
|
319
|
-
"vhide-when-collapsed": action.onlyCollapseText
|
|
320
|
-
} }, action.label)))), this.starrable &&
|
|
321
|
-
h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&
|
|
311
|
+
h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this.starrable &&
|
|
312
|
+
h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) &&
|
|
322
313
|
h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
|
|
323
314
|
"stzh-card__card-action-popover": true,
|
|
324
|
-
"hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
|
|
325
|
-
} }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this.
|
|
326
|
-
|
|
315
|
+
// "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
|
|
316
|
+
} }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
|
|
317
|
+
// class="hide-medium show-when-collapsed"
|
|
318
|
+
icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); }
|
|
319
|
+
}, action.label))), sortableActionsEnabled &&
|
|
327
320
|
h(Fragment, null, !isFirstItemInSortable &&
|
|
328
321
|
h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
|
|
329
|
-
h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))
|
|
322
|
+
h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)), this.starrable &&
|
|
323
|
+
h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
|
|
330
324
|
h("stzh-actionset", { class: "stzh-card__footer-actionset", actions: this._footerActions }), this.selectable &&
|
|
331
325
|
h("stzh-button", { class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
|
|
332
326
|
h("stzh-icon", { class: "stzh-card__footer-arrow", name: "arrow-right-long" })))))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"stzh-card2.js","mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,modAAmod;;MCyC1od,QAAQ;;;;;;;;;IAgDX,eAAU,GAAG,EAAE,CAAC;IA2GhB,eAAU,GAAG,CAAC,OAAO;MAC3B,IAAI,YAAY,GAAG,KAAK,CAAC;MAEzB,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK;QACpB,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;UACvE,YAAY,GAAG,IAAI,CAAC;SACrB;OACF,CAAC,CAAC;MAEH,IAAI,YAAY,EAAE;QAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;OAC3B;KACF,CAAC;IAcM,WAAM,GAAG;MACf,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,iCAAiC,CAAC,CAAC;MAErE,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC;QACnD,MAAM,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,WAAW,CAAC;QACrD,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC;QAEvD,IAAI,WAAW,GAAG,SAAS,IAAI,UAAU,EAAE;UACzC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,iCAAiC,CAAC,CAAC;SACnE;OACF;KACF,CAAA;IAEO,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;QACrB,OAAO;OACR;MAED,MAAM,UAAU,GAAG,CAAC,cAAc,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;MACxI,MAAM,gBAAgB,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,OAAO,cAAI,OAAA,MAAC,OAAuB,CAAC,OAAO,0CAAE,WAAW,EAAE,CAAA,EAAA,CAAC,CAAC;MAC9G,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;MAEhE,IAAI,CAAC,KAAK,EAAE;QACV,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QAEjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;UACrB,SAAS,EAAE,WAAW;UACtB,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CAAC;OACJ;KACF,CAAA;IAEO,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,mBAAmB,EAAE;QAC5B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;UAC1B,SAAS,EAAE,WAAW;SACvB,CAAC,CAAC;OACJ;KACF,CAAA;IAEO,oBAAe,GAAG;MACxB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;QACtB,SAAS,EAAE,WAAW;QACtB,OAAO,EAAE,IAAI,CAAC,OAAO;OACtB,CAAC,CAAC;KACJ,CAAA;IAEO,gBAAW,GAAG,CAAC,MAA4B;MACjD,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;QAC9B,SAAS,EAAE,WAAW;QACtB,MAAM;OACP,CAAC,CAAC;KACJ,CAAA;IAEO,iBAAY,GAAG;MACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;MAEvD,IAAI,QAAQ,EAAE;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChD,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;OAClC;KACF,CAAA;IAEO,mBAAc,GAAG;MACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;MAEvD,IAAI,QAAQ,EAAE;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChD,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;OACpC;KACF,CAAA;IAEO,gCAA2B,GAAG;MACpC,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;;MAG9D,IAAI,CAAC,eAAe,EAAE;QACpB,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;QAClF,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAA;QAClF,OAAO;OACR;MAED,IAAI,IAAI,CAAC,OAAO,EAAE;QAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;OAC3B;KACF,CAAA;IAEO,SAAI,GAAG;MACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CACzC,iDAAiD,CAClD,CAAC;MAEF,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjB,cAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,OAAO;SACS,CAAC,CAAA;OAC1B,CAAC,CAAC;KACJ,CAAA;IAEO,iBAAY,GAAG;MACrB,IAAI,IAAI,CAAC,cAAc,EAAE;QACvB,MAAM,CAAC,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;OAClD;MAED,IAAI,CAAC,cAAc,GAAG,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAC1D,CAAA;IAEO,mBAAc,GAAG,CAAC,OAAO;MAC/B,IAAI,CAAC,IAAI,EAAE,CAAC;MACZ,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;KAC1B,CAAA;IAEO,0BAAqB,GAAG,CAAC,KAAyC;MACxE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;KACrC,CAAA;IAEO,cAAS,GAAG,CAAC,aAAyB;MAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,WAAW;QACtB,aAAa;OACd,CAAC,CAAC;KACJ,CAAA;;qBA9S4D,KAAK;mBAGP,KAAK;qBAMlB,KAAK;sBAGJ,KAAK;mBAGR,KAAK;gBAGT,EAAE;;;iBASD,EAAE;oBAGE,KAAK;qBAGJ,KAAK;mBAGzB,EAAE;wBAGmC,GAAG;oBAG5B,EAAE;yBAIiB,EAAE;yBAQL,EAAE;+BAIjB,KAAK;4BAMS,KAAK;uBAGV,KAAK;4BAGA,KAAK;4BAGL,KAAK;yBAGR,KAAK;+BAMhB,KAAK;;;EA2B5C,eAAe,CAAC,QAA2B;IACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,QAAQ,KAAK,EAAE,EAAE;QACnB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;OACtB;WAAM;QACL,IAAI;UACF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SACxC;QAAC,OAAM,GAAG,EAAE;UACX,IAAI,CAAC,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC9B;OACF;KACF;SAAM;MACL,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;KAC5B;GACF;EAGD,oBAAoB,CAAC,QAAyC;IAC5D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC5C;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;GACF;EAGD,oBAAoB,CAAC,QAAsC;IACzD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC5C;SAAM;MACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;KAChC;GACF;EAGD,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;GACrB;EA8JO,wBAAwB;IAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAEvD,IAAI,QAAQ,EAAE;MACZ,IAAI,OAAO,GAAgB,IAAI,CAAC,OAAO,CAAC;MACxC,IAAI,iBAAiB,GAAG,IAAI,CAAC;MAE7B,IAAI,OAAO,QAAQ,CAAC,SAAS,KAAK,UAAU,EAAE;QAC5C,iBAAiB,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;OAC1C;WAAM;QACL,iBAAiB,GAAG,QAAQ,CAAC,SAAS,CAAC;OACxC;MAED,OAAO,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,aAAa,KAAK,iBAAiB,EAAE;QAC3E,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;OACjC;MAED,OAAO,OAAO,CAAC;KAChB;GACF;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAE9C,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;KAC/F;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IAEtD,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;MAC/E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAA;KAChF;GACF;EAED,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;MAExE,IAAI,QAAQ,EAAE;QACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAC7D,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;OAC9D;KACF,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC1D,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC5D,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;GAC3C;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;IAED,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;GACF;EAED,MAAM;;IACJ,MAAM,SAAS,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC1D,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC9D,MAAM,UAAU,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAC5D,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAE9D,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IACxC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,mBAAmB,GAAG,QAAQ,GAAG,MAAM,EAAE,CAAC;IAEnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAE7D,MAAM,qBAAqB,GAAG,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa;SAC5D,KAAK,CAAC,IAAI,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC;SACzD,OAAO,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEzC,MAAM,oBAAoB,GAAG,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa;SAC3D,KAAK,CAAC,IAAI,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC;SACzD,OAAO,CAAC,oBAAoB,CAAC,KAAK,CAAA,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,MAAM,IAAG,CAAC,CAAC;IAEhG,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAC3F,MAAM,sBAAsB,GAAG,eAAe,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC;IAE5E,MAAM,8BAA8B,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;;;;IAMtG,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC;IAEjD,MAAM,SAAS,GAAG,UAAU;SACvB,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;SAC1B,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;SAC9B,8BAA8B,CAAC,MAAM,GAAG,CAAC;SACzC,IAAI,CAAC,SAAS;SACd,sBAAsB,CAAC;IAE5B,MAAM,SAAS,GAAG,UAAU;SACvB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;SAC9B,IAAI,CAAC,UAAU;SACf,IAAI,CAAC,SAAS,CAAC;IAEpB,MAAM,OAAO,GAAG;MACd,WAAW,EAAE,IAAI;MACjB,qBAAqB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;MAClC,sBAAsB,EAAE,SAAS;MACjC,wBAAwB,EAAE,WAAW;MACrC,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;MAC1C,qCAAqC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB;MAClF,qCAAqC,EAAE,IAAI,CAAC,gBAAgB;MAC5D,qCAAqC,EAAE,IAAI,CAAC,gBAAgB;MAC5D,uBAAuB,EAAE,SAAS;MAClC,uBAAuB,EAAE,SAAS;MAClC,2BAA2B,EAAE,IAAI,CAAC,WAAW;MAC7C,yBAAyB,EAAE,IAAI,CAAC,SAAS;MACzC,uBAAuB,EAAE,IAAI,CAAC,OAAO;MACrC,uBAAuB,EAAE,IAAI,CAAC,OAAO;MACrC,wBAAwB,EAAE,eAAe;KAC1C,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,OAAO,iBAAe,eAAe,IAC1E,eACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EACnD,KAAK,EAAE,OAAO,IAEd,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAuB,CAAC,iBAClD,MAAM,EAClB,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,IAE1C,YAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,EACJ,WAAK,KAAK,EAAC,4BAA4B,IACrC,iBAAW,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,GAAa,EAE1D,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAiB,CAAC,EACrD,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,IAEzB,WAAK,KAAK,EAAC,uBAAuB,IAChC,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAiB,CAAC,EACzD,KAAK,EAAC,wBAAwB,IAE9B,WAAK,KAAK,EAAC,uBAAuB,IAC/B,UAAU;MACT,EAAC,OAAO,IAAC,KAAK,EAAC,kBAAkB,IAC/B,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,gBAAgB,GAAG,EAAuB,CAAC,EAC9D,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,IAE1C,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC/D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACJ,CACI,EAEX,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;MACzB,EAAC,QAAQ,IAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC9D,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,KAC3B,YAAM,KAAK,EAAC,0BAA0B,IAAE,QAAQ,CAAQ,CACzD,CAAC,CACO,CAET,CACF,EACN,WACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAiB,CAAC,EAC1D,KAAK,EAAC,yBAAyB,IAE/B,WAAK,KAAK,EAAC,yBAAyB,IACjC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,KAC7B,mBACE,KAAK,EAAE;QACL,wBAAwB,EAAE,IAAI;QAC9B,WAAW,EAAE,IAAI;QACjB,aAAa,EAAE,CAAC,MAAM,CAAC,gBAAgB;QACvC,qBAAqB,EAAE,CAAC,MAAM,CAAC,gBAAgB;QAC/C,0BAA0B,EAAE,MAAM,CAAC,gBAAgB;OACpD,EACD,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,aAAa,EAAC,MAAM,EACpB,OAAO,EAAE,QAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA,EAAE,IAE3C,YACE,KAAK,EAAE;QACL,cAAc,EAAE,MAAM,CAAC,gBAAgB;QACvC,sBAAsB,EAAE,MAAM,CAAC,gBAAgB;OAChD,IAEA,MAAM,CAAC,KAAK,CACR,CACK,CACf,CAAC,EAED,IAAI,CAAC,SAAS;MACb,wBACE,mBACE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,MAAM,EAC3C,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,eAAe,GAChB,EACf,WAAK,IAAI,EAAC,SAAS,IAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CACxE,CACO,EAKhB,CAAC,8BAA8B,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,sBAAsB;MACrF,oBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAC5C,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;UACL,gCAAgC,EAAE,IAAI;UACtC,iCAAiC,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,sBAAsB;SAC9E,IAED,mBACE,KAAK,EAAC,mCAAmC,EACzC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,eAAe,EACpB,QAAQ,EAAE,IAAI,GACD,EACf,iBAAW,IAAI,EAAC,SAAS,IACtB,IAAI,CAAC,SAAS;QACb,sBAAgB,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACvF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAC7D,EAGlB,8BAA8B,CAAC,GAAG,CAAC,MAAM,KACxC,sBACE,KAAK,EAAC,iCAAiC,EACvC,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,QAAQ,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA,EAAE,IAE1C,MAAM,CAAC,KAAK,CACE,CAClB,CAAC,EAED,sBAAsB;QACrB,EAAC,QAAQ,QACN,CAAC,qBAAqB;UACrB,sBAAgB,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACvD,IAAI,CAAC,YAAY,CAAC,YAAY,CAChB,EAElB,CAAC,oBAAoB;UACpB,sBAAgB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC3D,IAAI,CAAC,YAAY,CAAC,cAAc,CAClB,CAEV,CAEH,CACC,CAEb,CACF,CACF,EAEN,WAAK,KAAK,EAAC,wBAAwB,IACjC,YAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACC,EAET,WAAK,KAAK,EAAC,wCAAwC,IACjD,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EAEN,WAAK,KAAK,EAAC,uCAAuC,IAChD,YAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;MAC7B,sBACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,IAAI,CAAC,cAAc,GACZ,EAGnB,IAAI,CAAC,UAAU;MACd,mBACE,KAAK,EAAC,iCAAiC,EACvC,SAAS,QACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAC/B,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAC3B,EAGhB,IAAI,CAAC,SAAS;MACb,iBACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,kBAAkB,GACZ,CACV,CACH,CACF,CACE,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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: #{$boxShadowPopover};\n --border-color: #{$baseBorderColor};\n --border-radius: 3px;\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 &[hide-elevation]:not([hide-elevation=\"false\"]) {\n --box-shadow: none;\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n --box-shadow: #{$boxShadowPopover};\n }\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 --border-color: transparent;\n\n overflow: hidden;\n }\n\n &.is-drag,\n &.is-chosen,\n &.is-ghost,\n &.is-selected,\n .is-drag &,\n .is-chosen &,\n .is-ghost &,\n .is-selected &,\n &[is-sortable]:hover {\n --dnd-visibility: visible;\n --dnd-opacity: 1;\n }\n\n ::slotted(*) {\n @include fontSize('milli');\n }\n\n ::slotted([slot=\"image\"]) {\n width: 100%;\n max-width: 100%;\n background-color: $colorGrey13;\n }\n\n ::slotted(img[slot=\"image\"]) {\n display: block;\n }\n\n ::slotted([slot=\"meta\"]:not(:last-child)) {\n margin-right: space('xsmall');\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:host ::slotted([slot=\"heading\"]),\n.stzh-card__title {\n @include font('heavy');\n @include fontCurve('h3', 'heading');\n}\n\n.stzh-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\tbox-shadow: var(--box-shadow);\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n\ttransition: box-shadow $baseTransitionAnimationSpeed;\n\n .vshow-medium {\n @include mq($to: medium) {\n @include visuallyhidden;\n }\n }\n\n .show-medium {\n @include mq($to: medium) {\n display: none;\n }\n }\n\n .hide-medium {\n @include mq($from: medium) {\n display: none;\n }\n }\n\n &__content-wrapper {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: var(--content-min-height);\n }\n\n\t&__dnd {\n --size: #{iconSize('xsmall')};\n\t\tposition: absolute;\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 3px;\n top: 23px;\n\t\tdisplay: flex;\n\t\tvisibility: var(--dnd-visibility);\n\t\topacity: var(--dnd-opacity);\n\t\ttransition: all $baseTransitionAnimationSpeed;\n display: none;\n\n @include mq($from: medium) {\n display: block;\n }\n\n @include mq($from: large) {\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 4px;\n top: 27px;\n }\n\t}\n\n &__header-top {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n }\n\n &__header-meta {\n &:not(:empty) {\n display: inline-flex;\n margin-top: space('xsmall');\n }\n }\n\n\t&__header-left,\n\t&__header-right {\n\t\tdisplay: flex;\n\t}\n\n\t&__header-right {\n @include spaceCurve('padding-left', 'tiny');\n\t}\n\n\t&__left {\n\t\talign-self: center;\n\t}\n\n\t&__title-area {\n\t\t@include wordWrap;\n\t\toverflow: hidden;\n\t}\n\n\t&__title,\n\t&__subtitle {\n\t\tmargin: 0;\n\t}\n\n &__title-link {\n color: inherit;\n text-decoration-line: none;\n }\n\n &__image-link {\n display: block;\n }\n\n\t&__subtitle {\n @include fontCurve('p1');\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\ttext-decoration-line: none;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tmargin-left: -0.5625em;\n\t}\n\n\t&__subtitle-text {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tpadding-left: 0.5625em;\n\n\t\t&::after {\n\t\t\tcontent: ',';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t}\n\t}\n\n\t&__content {\n flex-grow: 1;\n\n &:not(:empty) {\n @include spaceCurve('padding', 'regular');\n }\n\t}\n\n &__footer-arrow {\n --size: #{iconSize('medium')};\n color: $colorPrimary;\n }\n\n &__card-actions {\n\t\tdisplay: inline-flex;\n white-space: nowrap;\n\t}\n\n\t&__card-action {\n @include mq($to: medium) {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorGrey70};\n }\n\n &.is-button {\n --icon-size: #{iconSize('small')};\n }\n\n &.is-placeholder {\n width: space('xxlarge');\n height: space('xxlarge');\n }\n\n &.is-star {\n }\n\t}\n\n &__card-action-popover {\n --width: auto;\n }\n\n /* Has header */\n\n &--has-header &__header {\n\t\t@include spaceCurve('padding', 'regular');\n\t\tborder-bottom: 1px solid $baseBorderColor;\n\t}\n\n /* Has footer */\n\n &--has-footer &__footer {\n @include spaceCurve('padding', 'regular');\n border-top: 1px solid $baseBorderColor;\n }\n\n /* Has Link */\n\n &--has-link &__title-link {\n color: $colorPrimary;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\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 &__image-link:hover + &__content-wrapper &__title-link,\n &--has-link &__title-link:hover,\n &--has-link &__title-link:focus {\n color: $colorPrimaryHover;\n\n // &::before,\n // &::before {\n // background-color: $colorPrimary4;\n // }\n }\n\n &--has-link:hover &__footer-arrow {\n color: $colorPrimaryHover;\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 }\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 /** Hidden header / footer border */\n\n &--has-hidden-header-border &__header {\n\t\tborder-bottom: none;\n padding-bottom: 0;\n }\n\n &--has-hidden-footer-border &__footer {\n &:not(:empty) {\n padding-top: 0;\n border-top: none;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n Fragment,\n forceUpdate\n} from \"@stencil/core\";\n\nimport {\n StzhCardHeaderAction,\n StzhActionsetItem,\n StzhCardCollapseEvent,\n StzhCardSubtitleClickEvent,\n StzhCardStarClickEvent,\n StzhCardClickEvent,\n StzhCardHeaderActionClickEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from '../../utils/media-utils';\n\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, 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 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 /** Whether card arrow is shown in footer area */\n @Prop({ reflect: true }) withArrow: 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 /** Card header actions */\n @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n private _headerActions: StzhCardHeaderAction[];\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 `card-list` 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 /** Whether to hide header separation border */\n @Prop({ reflect: true }) hideHeaderBorder: boolean = false;\n\n /** Whether to hide footer separation border */\n @Prop({ reflect: true }) hideFooterBorder: boolean = false;\n\n /** Whether card elevation should be hidden */\n @Prop({ reflect: true }) hideElevation: boolean = false;\n\n /**\n * Whether movement menu items should be shown.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n */\n @Prop() hideMovementActions: boolean = false;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhCardElement;\n\n /** Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n /** Collapse event */\n @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n /** Subtitle click event */\n @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n /** Star click event */\n @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n /** Header action click event */\n @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n @Watch(\"subtitle\")\n subtitleWatcher(newValue: string[] | string) {\n if (typeof newValue === \"string\") {\n if (newValue === \"\") {\n this._subtitles = [];\n } else {\n try {\n this._subtitles = JSON.parse(newValue);\n } catch(err) {\n this._subtitles = [newValue];\n }\n }\n } else {\n this._subtitles = newValue;\n }\n }\n\n @Watch(\"headerActions\")\n headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n if (typeof newValue === \"string\") {\n this._headerActions = JSON.parse(newValue);\n } else {\n this._headerActions = newValue;\n }\n }\n\n @Watch(\"footerActions\")\n footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._footerActions = JSON.parse(newValue);\n } else {\n this._footerActions = newValue;\n }\n }\n\n @Watch(\"collapsed\")\n collapsedWatcher() {\n this.handleResize();\n }\n\n private observer: MutationObserver;\n\n private nodeChange = (entries) => {\n let changeInSlot = false;\n\n entries.forEach((entry) => {\n if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {\n changeInSlot = true;\n }\n });\n\n if (changeInSlot) {\n forceUpdate(this.element);\n }\n };\n\n private mainElement: HTMLElement;\n private headerElement: HTMLElement;\n private headerLeftElement: HTMLElement;\n private headerRightElement: HTMLElement;\n private imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private update = () => {\n if (!this.mainElement) {\n return;\n }\n\n this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n if (media('medium').matches) {\n const headerWidth = this.headerElement.clientWidth;\n const leftWidth = this.headerLeftElement.clientWidth;\n const rightWidth = this.headerRightElement.clientWidth;\n\n if (headerWidth - leftWidth <= rightWidth) {\n this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n }\n }\n }\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n const found = composedPathTags.some(r => filterTags.includes(r))\n\n if (!found) {\n this.collapsed = !this.collapsed;\n\n this.stzhCollapse.emit({\n component: \"stzh-card\",\n collapsed: this.collapsed\n });\n }\n }\n\n private subtitleClick = () => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\"\n });\n }\n }\n\n private starToggleClick = () => {\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred\n });\n }\n\n private actionClick = (action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action\n });\n }\n\n private arrowUpClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"up\");\n }\n }\n\n private arrowDownClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"down\");\n }\n }\n\n private updateElementInsideSortable = () => {\n const currentSortable = this.element.closest(\"stzh-sortable\");\n\n // check if element is still inside sortable\n if (!currentSortable) {\n this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n return;\n }\n\n if (this.element) {\n forceUpdate(this.element);\n }\n }\n\n private init = () => {\n const chips = this.element.querySelectorAll(\n 'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n );\n\n chips.forEach((chip) => {\n setPropsIfNull(chip, {\n size: \"small\"\n } as HTMLStzhChipElement)\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 cardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent\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\n componentDidLoad() {\n this.sortable = this.element.closest(\"stzh-sortable\");\n\n if (this.sortable) {\n this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n if (objectId) {\n this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.handleMutation);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const imageUsed: boolean = hasSlot(this.element, \"image\");\n const headingUsed: boolean = hasSlot(this.element, \"heading\");\n const footerUsed: boolean = hasSlot(this.element, \"footer\");\n const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n const Heading = `h${this.headingLevel}`;\n const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n const sortableChildElement = this.findSortableChildElement();\n\n const isFirstItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n // const headerActions = [\n // ...this._headerActions\n // ];\n\n const hasHeading = !!this.heading || headingUsed;\n\n const hasHeader = hasHeading\n || this._subtitles.length > 0\n || this._headerActions.length > 0\n || nonCollapsingTextHeaderActions.length > 0\n || this.starrable\n || sortableActionsEnabled;\n\n const hasFooter = footerUsed\n || this._footerActions.length > 0\n || this.selectable\n || this.withArrow;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--has-link\": !!this.href,\n \"stzh-card--has-image\": imageUsed,\n \"stzh-card--has-content\": contentUsed,\n \"stzh-card--has-subtitle\": !!this.subtitle,\n \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n \"stzh-card--has-hidden-header-border\": this.hideHeaderBorder,\n \"stzh-card--has-hidden-footer-border\": this.hideFooterBorder,\n \"stzh-card--has-header\": hasHeader,\n \"stzh-card--has-footer\": hasFooter,\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 };\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.cardClick : 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\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.cardClick : null}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </a>\n </Heading>\n }\n {this._subtitles.length > 0 &&\n <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n {this._subtitles.map(subtitle => (\n <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n ))}\n </Subtitle>\n }\n </div>\n </div>\n <div\n ref={(el) => (this.headerRightElement = el as HTMLElement)}\n class=\"stzh-card__header-right\"\n >\n <div class=\"stzh-card__card-actions\">\n {this._headerActions.map(action => (\n <stzh-button\n class={{\n \"stzh-card__card-action\": true,\n \"is-button\": true,\n \"show-medium\": !action.onlyCollapseText,\n \"hide-when-collapsed\": !action.onlyCollapseText,\n \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n variant=\"tertiary\"\n size=\"tiny\"\n badgePosition=\"icon\"\n onClick={() => { this.actionClick(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\n {(nonCollapsingTextHeaderActions.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 ></stzh-button>\n <stzh-menu slot=\"content\">\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\n {nonCollapsingTextHeaderActions.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={() => { this.actionClick(action) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n\n {sortableActionsEnabled &&\n <Fragment>\n {!isFirstItemInSortable &&\n <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n {this.localization.actionMoveUp}\n </stzh-menu-item>\n }\n {!isLastItemInSortable &&\n <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n {this.localization.actionMoveDown}\n </stzh-menu-item>\n }\n </Fragment>\n }\n </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 <slot name=\"footer\">\n {this._footerActions.length > 0 &&\n <stzh-actionset\n class=\"stzh-card__footer-actionset\"\n actions={this._footerActions}\n ></stzh-actionset>\n }\n\n {this.selectable &&\n <stzh-button\n class=\"stzh-card__footer-select-button\"\n fullwidth\n type=\"radio\"\n variant=\"secondary\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n label={this.localization.select}\n onStzhChange={this.handleSelectionChange}\n ></stzh-button>\n }\n\n {this.withArrow &&\n <stzh-icon\n class=\"stzh-card__footer-arrow\"\n name=\"arrow-right-long\"\n ></stzh-icon>}\n </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"stzh-card2.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: #{$boxShadowPopover};\n --border-color: #{$baseBorderColor};\n --border-radius: 3px;\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 &[hide-elevation]:not([hide-elevation=\"false\"]) {\n --box-shadow: none;\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n --box-shadow: #{$boxShadowPopover};\n }\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 --border-color: transparent;\n\n overflow: hidden;\n }\n\n &.is-drag,\n &.is-chosen,\n &.is-ghost,\n &.is-selected,\n .is-drag &,\n .is-chosen &,\n .is-ghost &,\n .is-selected &,\n &[is-sortable]:hover {\n --dnd-visibility: visible;\n --dnd-opacity: 1;\n }\n\n ::slotted(*) {\n @include fontSize('milli');\n }\n\n ::slotted([slot=\"image\"]) {\n width: 100%;\n max-width: 100%;\n background-color: $colorGrey13;\n }\n\n ::slotted(img[slot=\"image\"]) {\n display: block;\n }\n\n ::slotted([slot=\"meta\"]:not(:last-child)) {\n margin-right: space('xsmall');\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:host ::slotted([slot=\"heading\"]),\n.stzh-card__title {\n @include font('heavy');\n @include fontCurve('h3', 'heading');\n}\n\n.stzh-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n\tbackground-color: $colorWhite;\n\tborder-radius: var(--border-radius);\n\tbox-shadow: var(--box-shadow);\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n\ttransition: box-shadow $baseTransitionAnimationSpeed;\n\n // .vshow-medium {\n // @include mq($to: medium) {\n // @include visuallyhidden;\n // }\n // }\n\n // .show-medium {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n // .hide-medium {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n &__content-wrapper {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: var(--content-min-height);\n }\n\n\t&__dnd {\n --size: #{iconSize('xsmall')};\n\t\tposition: absolute;\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 3px;\n top: 23px;\n\t\tdisplay: flex;\n\t\tvisibility: var(--dnd-visibility);\n\t\topacity: var(--dnd-opacity);\n\t\ttransition: all $baseTransitionAnimationSpeed;\n display: none;\n\n @include mq($from: medium) {\n display: block;\n }\n\n @include mq($from: large) {\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 4px;\n top: 27px;\n }\n\t}\n\n &__header-top {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: flex-start;\n }\n\n &__header-meta {\n &:not(:empty) {\n display: inline-flex;\n margin-top: space('xsmall');\n }\n }\n\n\t&__header-left,\n\t&__header-right {\n\t\tdisplay: flex;\n\t}\n\n\t&__header-right {\n @include spaceCurve('padding-left', 'tiny');\n\t}\n\n\t&__left {\n\t\talign-self: center;\n\t}\n\n\t&__title-area {\n\t\t@include wordWrap;\n\t\toverflow: hidden;\n\t}\n\n\t&__title,\n\t&__subtitle {\n\t\tmargin: 0;\n\t}\n\n &__title-link {\n color: inherit;\n text-decoration-line: none;\n }\n\n &__image-link {\n display: block;\n }\n\n\t&__subtitle {\n @include fontCurve('p1');\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex-wrap: wrap;\n\t\ttext-decoration-line: none;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tmargin-left: -0.5625em;\n\t}\n\n\t&__subtitle-text {\n\t\tposition: relative;\n\t\tdisplay: inline-flex;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n\t\tpadding-left: 0.5625em;\n\n\t\t&::after {\n\t\t\tcontent: ',';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t}\n\t}\n\n\t&__content {\n flex-grow: 1;\n\n &:not(:empty) {\n @include spaceCurve('padding', 'regular');\n }\n\t}\n\n &__footer-arrow {\n --size: #{iconSize('medium')};\n color: $colorPrimary;\n }\n\n &__card-actions {\n\t\tdisplay: inline-flex;\n white-space: nowrap;\n\t}\n\n\t&__card-action {\n @include mq($to: medium) {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$colorGrey70};\n }\n\n &.is-button {\n --icon-size: #{iconSize('small')};\n }\n\n &.is-placeholder {\n width: space('xxlarge');\n height: space('xxlarge');\n }\n\n &.is-star {\n }\n\t}\n\n &__card-action-popover {\n --width: auto;\n }\n\n /* Has header */\n\n &--has-header &__header {\n\t\t@include spaceCurve('padding', 'regular');\n\t\tborder-bottom: 1px solid $baseBorderColor;\n\t}\n\n /* Has footer */\n\n &--has-footer &__footer {\n @include spaceCurve('padding', 'regular');\n border-top: 1px solid $baseBorderColor;\n }\n\n /* Has Link */\n\n &--has-link &__title-link {\n color: $colorPrimary;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\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 &__image-link:hover + &__content-wrapper &__title-link,\n &--has-link &__title-link:hover,\n &--has-link &__title-link:focus {\n color: $colorPrimaryHover;\n\n // &::before,\n // &::before {\n // background-color: $colorPrimary4;\n // }\n }\n\n &--has-link:hover &__footer-arrow {\n color: $colorPrimaryHover;\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 }\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 /** Hidden header / footer border */\n\n &--has-hidden-header-border &__header {\n\t\tborder-bottom: none;\n padding-bottom: 0;\n }\n\n &--has-hidden-footer-border &__footer {\n &:not(:empty) {\n padding-top: 0;\n border-top: none;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n Fragment,\n forceUpdate\n} from \"@stencil/core\";\n\nimport {\n StzhCardHeaderAction,\n StzhActionsetItem,\n StzhCardCollapseEvent,\n StzhCardSubtitleClickEvent,\n StzhCardStarClickEvent,\n StzhCardClickEvent,\n StzhCardHeaderActionClickEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from '../../utils/media-utils';\n\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, 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 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 /** Whether card arrow is shown in footer area */\n @Prop({ reflect: true }) withArrow: 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 /** Card header actions */\n @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n private _headerActions: StzhCardHeaderAction[];\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 `card-list` 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 /** Whether to hide header separation border */\n @Prop({ reflect: true }) hideHeaderBorder: boolean = false;\n\n /** Whether to hide footer separation border */\n @Prop({ reflect: true }) hideFooterBorder: boolean = false;\n\n /** Whether card elevation should be hidden */\n @Prop({ reflect: true }) hideElevation: boolean = false;\n\n /**\n * Whether movement menu items should be shown.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n */\n @Prop() hideMovementActions: boolean = false;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhCardElement;\n\n /** Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n /** Collapse event */\n @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n /** Subtitle click event */\n @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n /** Star click event */\n @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n /** Header action click event */\n @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n @Watch(\"subtitle\")\n subtitleWatcher(newValue: string[] | string) {\n if (typeof newValue === \"string\") {\n if (newValue === \"\") {\n this._subtitles = [];\n } else {\n try {\n this._subtitles = JSON.parse(newValue);\n } catch(err) {\n this._subtitles = [newValue];\n }\n }\n } else {\n this._subtitles = newValue;\n }\n }\n\n @Watch(\"headerActions\")\n headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n if (typeof newValue === \"string\") {\n this._headerActions = JSON.parse(newValue);\n } else {\n this._headerActions = newValue;\n }\n }\n\n @Watch(\"footerActions\")\n footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._footerActions = JSON.parse(newValue);\n } else {\n this._footerActions = newValue;\n }\n }\n\n @Watch(\"collapsed\")\n collapsedWatcher() {\n this.handleResize();\n }\n\n private observer: MutationObserver;\n\n private nodeChange = (entries) => {\n let changeInSlot = false;\n\n entries.forEach((entry) => {\n if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {\n changeInSlot = true;\n }\n });\n\n if (changeInSlot) {\n forceUpdate(this.element);\n }\n };\n\n private mainElement: HTMLElement;\n private headerElement: HTMLElement;\n private headerLeftElement: HTMLElement;\n private headerRightElement: HTMLElement;\n private imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private update = () => {\n if (!this.mainElement) {\n return;\n }\n\n this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n if (media('medium').matches) {\n const headerWidth = this.headerElement.clientWidth;\n const leftWidth = this.headerLeftElement.clientWidth;\n const rightWidth = this.headerRightElement.clientWidth;\n\n if (headerWidth - leftWidth <= rightWidth) {\n this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n }\n }\n }\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n const found = composedPathTags.some(r => filterTags.includes(r))\n\n if (!found) {\n this.collapsed = !this.collapsed;\n\n this.stzhCollapse.emit({\n component: \"stzh-card\",\n collapsed: this.collapsed\n });\n }\n }\n\n private subtitleClick = () => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\"\n });\n }\n }\n\n private starToggleClick = () => {\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred\n });\n }\n\n private actionClick = (action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action\n });\n }\n\n private arrowUpClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"up\");\n }\n }\n\n private arrowDownClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"down\");\n }\n }\n\n private updateElementInsideSortable = () => {\n const currentSortable = this.element.closest(\"stzh-sortable\");\n\n // check if element is still inside sortable\n if (!currentSortable) {\n this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n return;\n }\n\n if (this.element) {\n forceUpdate(this.element);\n }\n }\n\n private init = () => {\n const chips = this.element.querySelectorAll(\n 'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n );\n\n chips.forEach((chip) => {\n setPropsIfNull(chip, {\n size: \"small\"\n } as HTMLStzhChipElement)\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 cardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent\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\n componentDidLoad() {\n this.sortable = this.element.closest(\"stzh-sortable\");\n\n if (this.sortable) {\n this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n if (objectId) {\n this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.handleMutation);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const imageUsed: boolean = hasSlot(this.element, \"image\");\n const headingUsed: boolean = hasSlot(this.element, \"heading\");\n const footerUsed: boolean = hasSlot(this.element, \"footer\");\n const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n const Heading = `h${this.headingLevel}`;\n const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n const sortableChildElement = this.findSortableChildElement();\n\n const isFirstItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n // const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n // const headerActions = [\n // ...this._headerActions\n // ];\n\n const hasHeading = !!this.heading || headingUsed;\n\n const hasHeader = hasHeading\n || this._subtitles.length > 0\n || this._headerActions.length > 0\n // || nonCollapsingTextHeaderActions.length > 0\n || this.starrable\n || sortableActionsEnabled;\n\n const hasFooter = footerUsed\n || this._footerActions.length > 0\n || this.selectable\n || this.withArrow;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--has-link\": !!this.href,\n \"stzh-card--has-image\": imageUsed,\n \"stzh-card--has-content\": contentUsed,\n \"stzh-card--has-subtitle\": !!this.subtitle,\n \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n \"stzh-card--has-hidden-header-border\": this.hideHeaderBorder,\n \"stzh-card--has-hidden-footer-border\": this.hideFooterBorder,\n \"stzh-card--has-header\": hasHeader,\n \"stzh-card--has-footer\": hasFooter,\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 };\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.cardClick : 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\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.cardClick : null}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </a>\n </Heading>\n }\n {this._subtitles.length > 0 &&\n <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n {this._subtitles.map(subtitle => (\n <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n ))}\n </Subtitle>\n }\n </div>\n </div>\n <div\n ref={(el) => (this.headerRightElement = el as HTMLElement)}\n class=\"stzh-card__header-right\"\n >\n <div class=\"stzh-card__card-actions\">\n {/* {this._headerActions.map(action => (\n <stzh-button\n class={{\n \"stzh-card__card-action\": true,\n \"is-button\": true,\n \"show-medium\": !action.onlyCollapseText,\n \"hide-when-collapsed\": !action.onlyCollapseText,\n \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n variant=\"tertiary\"\n size=\"tiny\"\n badgePosition=\"icon\"\n onClick={() => { this.actionClick(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 ></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={() => { this.actionClick(action) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n\n {sortableActionsEnabled &&\n <Fragment>\n {!isFirstItemInSortable &&\n <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n {this.localization.actionMoveUp}\n </stzh-menu-item>\n }\n {!isLastItemInSortable &&\n <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n {this.localization.actionMoveDown}\n </stzh-menu-item>\n }\n </Fragment>\n }\n\n {this.starrable &&\n <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </stzh-menu-item>\n }\n </stzh-menu>\n </stzh-popover>\n }\n </div>\n </div>\n </div>\n\n <div class=\"stzh-card__header-meta\">\n <slot name=\"meta\"></slot>\n </div>\n </header>\n\n <div class=\"stzh-card__content hide-when-collapsed\">\n <slot name=\"content\"></slot>\n </div>\n\n <div class=\"stzh-card__footer hide-when-collapsed\">\n <slot name=\"footer\">\n {this._footerActions.length > 0 &&\n <stzh-actionset\n class=\"stzh-card__footer-actionset\"\n actions={this._footerActions}\n ></stzh-actionset>\n }\n\n {this.selectable &&\n <stzh-button\n class=\"stzh-card__footer-select-button\"\n fullwidth\n type=\"radio\"\n variant=\"secondary\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n label={this.localization.select}\n onStzhChange={this.handleSelectionChange}\n ></stzh-button>\n }\n\n {this.withArrow &&\n <stzh-icon\n class=\"stzh-card__footer-arrow\"\n name=\"arrow-right-long\"\n ></stzh-icon>}\n </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -832,7 +832,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
|
|
|
832
832
|
})();
|
|
833
833
|
|
|
834
834
|
const name = "@oiz/stzh-components";
|
|
835
|
-
const version = "2.14.
|
|
835
|
+
const version = "2.14.2";
|
|
836
836
|
|
|
837
837
|
const packageName = name.substring(name.indexOf('/')+1);
|
|
838
838
|
|
|
@@ -1174,4 +1174,4 @@ const globalScripts = appGlobalScript;
|
|
|
1174
1174
|
|
|
1175
1175
|
export { globalScripts as g };
|
|
1176
1176
|
|
|
1177
|
-
//# sourceMappingURL=app-globals-
|
|
1177
|
+
//# sourceMappingURL=app-globals-8a09d78c.js.map
|