npm - @oiz/stzh-components - Versions diffs - 3.0.0-beta3 → 3.0.0-beta4 - Mend

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

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

Files changed (258) hide show

package/dist/components/stzh-cspace.js.map CHANGED Viewed

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

package/dist/components/stzh-cta.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { h as hasSlot } from './utils.js';
 import { d as defineCustomElement$3 } from './stzh-icon2.js';
 import { d as defineCustomElement$2 } from './stzh-sticky2.js';
-const stzhCtaCss = ".sc-stzh-cta-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-cta-h{display:none}.sc-stzh-cta-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h *.sc-stzh-cta,.sc-stzh-cta-h *.sc-stzh-cta::before,.sc-stzh-cta-h *.sc-stzh-cta::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-cta-h .has-focus.sc-stzh-cta{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta{outline-style:none !important}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta::-moz-focus-inner{border:0 !important}.sc-stzh-cta-h{--stzh-flyingfocus-color:var(--stzh-color-white);--background-color:var(--stzh-cta-background-color);--heading-color:var(--stzh-color-primary70);--lead-color:var(--stzh-color-white);--sticky-background-color:var(--background-color);--button-color:var(--stzh-color-white);--button-background-color:var(--stzh-color-primary70);--button-border-radius:var(--stzh-button-border-radius);--hover-button-color:var(--stzh-color-white);--hover-button-background-color:var(--stzh-color-secondary60);--stuck-background-color:var(--stzh-color-grey10);--stuck-heading-color:var(--stzh-color-primary70);--stuck-lead-color:var(--stzh-base-color);--stuck-sticky-background-color:var(--background-color);--grid-template-areas:var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );--grid-template-columns:var(\n    --stzh-cta-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}[size=small].sc-stzh-cta-h{--button-background-color:transparent;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--stuck-background-color:var(--background-color)}@media screen and (min-width: 600px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta\"\n    )}}@media screen and (min-width: 900px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    )}}@keyframes stzh-cta-effect{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-cta.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-cta__wrapper.sc-stzh-cta{grid-area:cta;background-color:var(--background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])){background-color:var(--stuck-background-color)}.stzh-cta__heading.sc-stzh-cta,.stzh-cta__lead.sc-stzh-cta{transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xlarge);margin-right:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--heading-color)}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__heading.sc-stzh-cta{color:var(--stuck-heading-color)}.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height));color:var(--lead-color)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead.sc-stzh-cta{color:var(--stuck-lead-color)}.stzh-cta__button.sc-stzh-cta{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-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);width:100%;display:flex;align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;border-radius:var(--button-border-radius);color:var(--button-color);background-color:var(--button-background-color);gap:var(--stzh-space-xsmall);transition-property:width, height, min-height, color, background-color, font-size, padding;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-cta__button.sc-stzh-cta{width:auto}}.stzh-cta__button.sc-stzh-cta:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{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)}@media screen and (min-width: 900px){.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-cta__button-text.sc-stzh-cta{display:block}.stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-medium)}.stzh-cta__button.sc-stzh-cta:hover .stzh-cta__button-icon.sc-stzh-cta{animation:stzh-cta-effect 1s}.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--background-color:var(--sticky-background-color);--stuck-background-color:var(--stuck-sticky-background-color);--stuck-padding-left:0px;--stuck-padding-right:0px;display:block}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxxlarge)}}.stzh-cta__buttons.sc-stzh-cta{display:flex;gap:var(--stzh-space-medium)}.stzh-cta--has-lead.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta{margin-bottom:0}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);min-height:var(--stzh-form-input-height)}@media screen and (max-width: 599px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{display:none}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-height)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{margin-top:calc(var(--padding-top) / -1);margin-bottom:calc(var(--padding-bottom) / -1)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{width:100%;max-width:100%;gap:var(--stzh-space-medium)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.is-placeholder.sc-stzh-cta{width:auto;max-width:none;visibility:hidden;position:absolute;pointer-events:none}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta:not(.is-placeholder){width:var(--button-width, auto)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-large)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-cta--is-not-loaded.sc-stzh-cta{visibility:hidden}.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__lead.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{transition-duration:0ms}";
+const stzhCtaCss = ".sc-stzh-cta-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-cta-h{display:none}.sc-stzh-cta-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-cta-h *.sc-stzh-cta,.sc-stzh-cta-h *.sc-stzh-cta::before,.sc-stzh-cta-h *.sc-stzh-cta::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-cta-h .has-focus.sc-stzh-cta{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta{outline-style:none !important}.sc-stzh-cta-h .stzh-fylingfocus-focused.sc-stzh-cta::-moz-focus-inner{border:0 !important}.sc-stzh-cta-h{--stzh-flyingfocus-color:var(--stzh-color-white);--background-color:var(--stzh-cta-background-color);--heading-color:var(--stzh-color-primary70);--lead-color:var(--stzh-color-primary70);--sticky-background-color:var(--background-color);--button-color:var(--stzh-color-white);--button-background-color:var(--stzh-color-primary70);--button-border-radius:var(--stzh-button-border-radius);--hover-button-color:var(--stzh-color-white);--hover-button-background-color:var(--stzh-color-secondary60);--stuck-background-color:var(--stzh-color-grey10);--stuck-heading-color:var(--stzh-color-primary70);--stuck-lead-color:var(--stzh-base-color);--stuck-sticky-background-color:var(--background-color);--grid-template-areas:var(\n    --stzh-cta-grid-template-areas,\n    \"cta cta cta cta\"\n  );--grid-template-columns:var(\n    --stzh-cta-grid-template-columns,\n    repeat(4, minmax(0, 1fr))\n  )}@media screen and (min-width: 900px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    );--grid-template-columns:var(\n      --stzh-cta-grid-template-columns,\n      repeat(8, minmax(0, 1fr))\n    )}}[size=small].sc-stzh-cta-h{--button-background-color:transparent;--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--stuck-background-color:var(--background-color)}@media screen and (min-width: 600px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta\"\n    )}}@media screen and (min-width: 900px){[size=small].sc-stzh-cta-h{--grid-template-areas:var(\n      --stzh-cta-small-grid-template-areas,\n      \"cta cta cta cta cta cta cta cta\"\n    )}}@keyframes stzh-cta-effect{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-cta.sc-stzh-cta{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-cta.sc-stzh-cta{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-cta__wrapper.sc-stzh-cta{grid-area:cta;background-color:var(--background-color);transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])){background-color:var(--stuck-background-color)}.stzh-cta__heading.sc-stzh-cta,.stzh-cta__lead.sc-stzh-cta{transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xlarge);margin-right:var(--stzh-space-xlarge);margin-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__heading.sc-stzh-cta:not(:empty),.stzh-cta__lead.sc-stzh-cta:not(:empty){margin-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--heading-color)}@media screen and (min-width: 600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-cta__heading.sc-stzh-cta{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__heading.sc-stzh-cta{color:var(--stuck-heading-color)}.stzh-cta__lead.sc-stzh-cta{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);color:var(--lead-color)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta{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-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-cta__lead.sc-stzh-cta:not(:empty){padding-top:var(--stzh-space-large)}}.stzh-cta__wrapper.sc-stzh-cta:has(.stzh-cta__sticky[is-stuck]:not([is-stuck=false])) .stzh-cta__lead.sc-stzh-cta{color:var(--stuck-lead-color)}.stzh-cta__button.sc-stzh-cta{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-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);width:100%;display:flex;align-items:center;justify-content:space-between;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-decoration:none;border-radius:var(--button-border-radius);color:var(--button-color);background-color:var(--button-background-color);gap:var(--stzh-space-xsmall);transition-property:width, height, min-height, color, background-color, font-size, padding;transition-duration:var(--stzh-base-transition-animation-speed)}@media screen and (min-width: 600px){.stzh-cta__button.sc-stzh-cta{width:auto}}.stzh-cta__button.sc-stzh-cta:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{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)}@media screen and (min-width: 900px){.stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{font-size:var(--stzh-font-centi-font-size);line-height:var(--stzh-font-centi-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}.stzh-cta__button-text.sc-stzh-cta{display:block}.stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-medium)}.stzh-cta__button.sc-stzh-cta:hover .stzh-cta__button-icon.sc-stzh-cta{animation:stzh-cta-effect 1s}.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--padding-top:var(--stzh-space-large);--padding-bottom:var(--stzh-space-large);--background-color:var(--sticky-background-color);--stuck-background-color:var(--stuck-sticky-background-color);--stuck-padding-left:0px;--stuck-padding-right:0px;display:block}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta__sticky.sc-stzh-cta{--padding-right:var(--stzh-space-xxxlarge)}}.stzh-cta__buttons.sc-stzh-cta{display:flex;gap:var(--stzh-space-medium)}.stzh-cta--has-lead.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta{margin-bottom:0}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-large);padding-bottom:var(--stzh-space-large)}@media screen and (min-width: 600px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxlarge);padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px) and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px) and (min-width: 1260px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta{padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{padding:var(--stzh-space-xsmall) var(--stzh-space-xlarge);min-height:var(--stzh-form-input-height)}@media screen and (max-width: 599px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{display:none}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-small-height)}@media screen and (min-width: 900px){.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta{min-height:var(--stzh-form-input-height)}}.stzh-cta--size-default.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{margin-top:calc(var(--padding-top) / -1);margin-bottom:calc(var(--padding-bottom) / -1)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{width:100%;max-width:100%;gap:var(--stzh-space-medium)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button.is-placeholder.sc-stzh-cta{width:auto;max-width:none;visibility:hidden;position:absolute;pointer-events:none}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]) .stzh-cta__button.sc-stzh-cta:not(.is-placeholder){width:var(--button-width, auto)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__button-icon.sc-stzh-cta{--size:var(--stzh-icon-size-large)}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxlarge);--padding-bottom:var(--stzh-space-xxlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-top:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky.sc-stzh-cta{--padding-bottom:var(--stzh-space-xxxxlarge)}}.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-cta--size-small.sc-stzh-cta .stzh-cta__sticky[is-stuck].sc-stzh-cta:not([is-stuck=false]){--padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-cta--is-not-loaded.sc-stzh-cta{visibility:hidden}.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__wrapper.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__heading.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__lead.sc-stzh-cta,.stzh-cta--is-not-loaded.sc-stzh-cta .stzh-cta__button.sc-stzh-cta{transition-duration:0ms}";
 var counter = 0;
 const StzhCta$1 = /*@__PURE__*/ proxyCustomElement(class StzhCta extends HTMLElement {

package/dist/components/stzh-cta.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-cta.js","mappings":"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","names":["StzhCta"],"sources":["src/components/stzh-cta/stzh-cta.scss?tag=stzh-cta&encapsulation=scoped","src/components/stzh-cta/stzh-cta.tsx"],"sourcesContent":[":host {\n --stzh-flyingfocus-color: #{$colorWhite};\n\n --background-color: #{$ctaBackgroundColor};\n --heading-color: #{$colorPrimary70};\n --lead-color: #{$colorWhite};\n --sticky-background-color: var(--background-color);\n --button-color: #{$colorWhite};\n --button-background-color: #{$colorPrimary70};\n --button-border-radius: #{$buttonBorderRadius};\n\n --hover-button-color: #{$colorWhite};\n --hover-button-background-color: #{$colorSecondary60};\n\n --stuck-background-color: #{$colorGrey10};\n --stuck-heading-color: #{$colorPrimary70};\n --stuck-lead-color: #{$baseColor};\n --stuck-sticky-background-color: var(--background-color);\n\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n repeat(8, minmax(0, 1fr))\n );\n }\n\n &[size=\"small\"] {\n --button-background-color: transparent;\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(--button-background-color);\n\n --stuck-background-color: var(--background-color);\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-cta-small-grid-template-areas,\n \"cta cta cta cta\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-cta-small-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n }\n }\n}\n\n@keyframes stzh-cta-effect {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-cta {\n @include font('heavy');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: cta;\n background-color: var(--background-color);\n transition-property: background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) {\n background-color: var(--stuck-background-color);\n }\n\n &__heading,\n &__lead {\n transition-property: color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:not(:empty) {\n @include spaceCurve('margin-left', 'medium');\n @include spaceCurve('margin-right', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n\n @include mq($from: small) {\n margin-bottom: space('xxlarge');\n }\n\n @include mq($from: medium) {\n margin-bottom: space('xxxlarge');\n }\n\n @include mq($from: large) {\n margin-bottom: space('xxxxlarge');\n }\n }\n }\n\n &__heading {\n @include fontCurve('h2', 'heading');\n color: var(--heading-color);\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__heading {\n color: var(--stuck-heading-color);\n }\n\n &__lead {\n @include fontCurve('p2');\n color: var(--lead-color);\n\n &:not(:empty) {\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__lead {\n color: var(--stuck-lead-color);\n }\n\n &__button {\n @include font('heavy');\n @include fontSize('centi');\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n appearance: none;\n border: none;\n text-decoration: none;\n border-radius: var(--button-border-radius);\n color: var(--button-color);\n background-color: var(--button-background-color);\n gap: space('xsmall');\n transition-property: width, height, min-height, color, background-color, font-size, padding;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: auto;\n }\n\n &:hover {\n color: var(--hover-button-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n @include fontSize('milli');\n\n @include mq($from: medium) {\n @include fontSize('centi');\n }\n }\n\n &__button-text {\n display: block;\n }\n\n &__button-icon {\n --size: #{iconSize('medium')};\n }\n\n &__button:hover &__button-icon {\n\t\tanimation: stzh-cta-effect 1s;\n }\n\n &__sticky {\n @include spaceCurve('--padding-left', 'medium');\n @include spaceCurve('--padding-right', 'medium');\n --padding-top: #{space('large')};\n --padding-bottom: #{space('large')};\n --background-color: var(--sticky-background-color);\n --stuck-background-color: var(--stuck-sticky-background-color);\n --stuck-padding-left: 0px;\n --stuck-padding-right: 0px;\n\n display: block;\n }\n\n &__buttons {\n display: flex;\n gap: space('medium');\n }\n\n /* Has lead variant /\n\n &--has-lead &__heading {\n margin-bottom: 0;\n }\n\n / Default variant; has heading, lead or multiple buttons /\n\n &--size-default &__wrapper {\n @include spaceCurve('padding-top', 'large');\n @include spaceCurve('padding-bottom', 'large');\n }\n\n &--size-default &__button {\n padding: space('xsmall') space('xlarge');\n min-height: $formInputHeight;\n }\n\n &--size-default &__button-icon {\n @include mq($to: small) {\n display: none;\n }\n }\n\n &--size-default &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n min-height: $formInputHeightSmall;\n\n @include mq($from: medium) {\n min-height: $formInputHeight;\n }\n }\n\n &--size-default &__sticky {\n margin-top: calc(var(--padding-top) / -1);\n margin-bottom: calc(var(--padding-bottom) / -1);\n }\n\n / Small variant; has no heading, lead or multiple buttons /\n\n &--size-small &__button {\n width: 100%;\n max-width: 100%;\n gap: space('medium');\n\n &.is-placeholder {\n width: auto;\n max-width: none;\n visibility: hidden;\n position: absolute;\n pointer-events: none;\n }\n }\n\n &--size-small &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button:not(.is-placeholder) {\n width: var(--button-width, auto);\n }\n\n &--size-small &__button-icon {\n --size: #{iconSize('large')};\n }\n\n &--size-small &__sticky {\n @include spaceCurve('--padding-top', 'large');\n @include spaceCurve('--padding-bottom', 'large');\n\n &[is-stuck]:not([is-stuck=\"false\"]) {\n @include spaceCurve('--padding-top', 'medium');\n @include spaceCurve('--padding-bottom', 'medium');\n }\n }\n\n / Not loaded /\n\n &--is-not-loaded {\n visibility: hidden;\n }\n\n &--is-not-loaded &__wrapper,\n &--is-not-loaded &__heading,\n &--is-not-loaded &__lead,\n &--is-not-loaded &__button {\n transition-duration: 0ms;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhCtaFocusEvent,\n StzhCtaBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/\n @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n /\n@Component({\n tag: \"stzh-cta\",\n styleUrl: \"stzh-cta.scss\",\n scoped: true\n})\nexport class StzhCta {\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Lead /\n @Prop() lead: string = \"\";\n\n /* Button Label /\n @Prop() label: string = \"\";\n\n /* Button link /\n @Prop() href: string = \"\";\n\n /\n Whether sticky button is disabled.\n * Will be set to true automatically on,\n * when more than one cta is on the page.\n /\n @Prop() stickyDisabled: boolean = true;\n\n @State() loaded: boolean = false;\n\n @Element() element: HTMLStzhCtaElement;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement;\n private placeholderButton: HTMLElement;\n private debounceResize: number;\n private focusedByInput: boolean = false;\n private placeholderButtonResizeObserver: ResizeObserver;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-cta\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-cta\",\n originalEvent: event\n });\n }\n\n private handlePlaceholderButtonResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n }\n\n private updateButtonWidthByResize = () => {\n if (!this.placeholderButton) {\n return;\n }\n\n const { width } = this.placeholderButton.getBoundingClientRect();\n this.element.style.setProperty(\"--button-width\", `${width}px`);\n }\n\n componentDidLoad() {\n this.stickyDisabled = counter > 1;\n\n this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n if (this.placeholderButton) {\n this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n }\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.updateButtonWidthByResize();\n\n window.setTimeout(() => {\n this.loaded = true;\n }, 250);\n });\n });\n }\n\n componentDidRender() {\n if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n }\n }\n\n connectedCallback() {\n counter = counter + 1;\n }\n\n disconnectedCallback() {\n // current no way of sending events in disconnected callback, so we just decrease the counter now,\n // but the user has to set stickyDisabled=false by himself\n counter = counter - 1;\n\n this.placeholderButtonResizeObserver?.disconnect();\n }\n\n private renderButtons(size: \"default\" \| \"small\") {\n return (\n <div class=\"stzh-cta__buttons\">\n {size === \"small\" &&\n <div\n class=\"stzh-cta__button is-placeholder\"\n ref={(el) => (this.placeholderButton = el as HTMLElement)}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n }\n\n {this.href\n ?\n <a\n class=\"stzh-cta__button\"\n href={this.href}\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </a>\n :\n <button\n class=\"stzh-cta__button\"\n ref={(el) => (this.button = el as HTMLButtonElement)}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </button>\n }\n </div>\n );\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, 'heading');\n const leadSlotUsed = hasSlot(this.element, 'lead');\n\n const hasHeading = !!this.heading \|\| headingSlotUsed;\n const hasLead = !!this.lead \|\| leadSlotUsed;\n const hasHeadingOrLead = hasHeading \|\| hasLead;\n\n const size = !hasHeadingOrLead\n ? \"small\"\n : \"default\";\n\n const classes = {\n \"stzh-cta\": true,\n \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n \"stzh-cta--is-not-loaded\": !this.loaded,\n \"stzh-cta--has-heading\": hasHeading,\n \"stzh-cta--has-lead\": hasLead,\n [`stzh-cta--size-${size}`]: !!size,\n };\n\n return (\n <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n <article class={classes} data-stzh-sticky-width-container>\n <div class=\"stzh-cta__wrapper\">\n <div class=\"stzh-cta__heading\">\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n <div class=\"stzh-cta__lead\">\n {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n </div>\n <stzh-sticky\n name=\"cta\"\n class=\"stzh-cta__sticky\"\n position=\"fixed\"\n bleeding\n disableStickyBottom={this.stickyDisabled}\n disableStickyTop={true}\n >\n {this.renderButtons(size)}\n </stzh-sticky>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-cta.js","mappings":";;;;;AAAA,MAAM,UAAU,GAAG,+ufAA+uf;;ACkBlwf,IAAI,OAAO,GAAG,CAAC,CAAC;MAYHA,SAAO;;;;;;IAiCV,mBAAc,GAAY,KAAK,CAAC;IAGhC,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;OACrB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,UAAU;QACrB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,WAAM,GAAG,CAAC,KAAiB;MACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,UAAU;QACrB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,kCAA6B,GAAG;MACtC,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,yBAAyB,CAAC,CAAC;KAC7E,CAAA;IAEO,8BAAyB,GAAG;MAClC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;QAC3B,OAAO;OACR;MAED,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,iBAAiB,CAAC,qBAAqB,EAAE,CAAC;MACjE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;KAChE,CAAA;mBAvFyB,EAAE;gBAGL,EAAE;iBAGD,EAAE;gBAGH,EAAE;0BAOS,IAAI;kBAEX,KAAK;;EAuEhC,gBAAgB;IACd,IAAI,CAAC,cAAc,GAAG,OAAO,GAAG,CAAC,CAAC;IAElC,IAAI,CAAC,+BAA+B,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;IAC9F,IAAI,IAAI,CAAC,iBAAiB,EAAE;MAC1B,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACtE;IAED,qBAAqB,CAAC;MACpB,qBAAqB,CAAC;QACpB,IAAI,CAAC,yBAAyB,EAAE,CAAC;QAEjC,MAAM,CAAC,UAAU,CAAC;UAChB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;SACpB,EAAE,GAAG,CAAC,CAAC;OACT,CAAC,CAAC;KACJ,CAAC,CAAC;GACJ;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,+BAA+B,EAAE;MAClE,IAAI,CAAC,+BAA+B,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACtE;GACF;EAED,iBAAiB;IACf,OAAO,GAAG,OAAO,GAAG,CAAC,CAAC;GACvB;EAED,oBAAoB;;;;IAGlB,OAAO,GAAG,OAAO,GAAG,CAAC,CAAC;IAEtB,MAAA,IAAI,CAAC,+BAA+B,0CAAE,UAAU,EAAE,CAAC;GACpD;EAEO,aAAa,CAAC,IAAyB;IAC7C,QACE,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,KAAK,OAAO;MACf,WACE,KAAK,EAAC,iCAAiC,EACvC,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAiB,CAAC,IAEzD,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACvD,iBAAW,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,GAAa,CACpE,EAGP,IAAI,CAAC,IAAI;;QAER,SACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACvD,iBAAW,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,GAAa,CACtE;;QAEJ,cACE,KAAK,EAAC,kBAAkB,EACxB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAuB,CAAC,EACpD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,YAAM,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACvD,iBAAW,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,aAAa,GAAa,CACjE,CAEP,EACN;GACH;EAED,MAAM;IACJ,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAEnD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,eAAe,CAAC;IACrD,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC;IAC5C,MAAM,gBAAgB,GAAG,UAAU,IAAI,OAAO,CAAC;IAE/C,MAAM,IAAI,GAAG,CAAC,gBAAgB;QAC1B,OAAO;QACP,SAAS,CAAC;IAEd,MAAM,OAAO,GAAG;MACd,UAAU,EAAE,IAAI;MAChB,8BAA8B,EAAE,IAAI,CAAC,cAAc;MACnD,yBAAyB,EAAE,CAAC,IAAI,CAAC,MAAM;MACvC,uBAAuB,EAAE,UAAU;MACnC,oBAAoB,EAAE,OAAO;MAC7B,CAAC,kBAAkB,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI;KACnC,CAAC;IAEF,QACE,EAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACvD,eAAS,KAAK,EAAE,OAAO,8CACrB,WAAK,KAAK,EAAC,mBAAmB,IAC5B,WAAK,KAAK,EAAC,mBAAmB,IAC3B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,EACN,WAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,YAAM,IAAI,EAAC,MAAM,GAAQ,CAC9C,EACN,mBACE,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,kBAAkB,EACxB,QAAQ,EAAC,OAAO,EAChB,QAAQ,QACR,mBAAmB,EAAE,IAAI,CAAC,cAAc,EACxC,gBAAgB,EAAE,IAAI,IAErB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CACb,CACV,CACE,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhCta"],"sources":["src/components/stzh-cta/stzh-cta.scss?tag=stzh-cta&encapsulation=scoped","src/components/stzh-cta/stzh-cta.tsx"],"sourcesContent":[":host {\n --stzh-flyingfocus-color: #{$colorWhite};\n\n --background-color: #{$ctaBackgroundColor};\n --heading-color: #{$colorPrimary70};\n --lead-color: #{$colorPrimary70};\n --sticky-background-color: var(--background-color);\n --button-color: #{$colorWhite};\n --button-background-color: #{$colorPrimary70};\n --button-border-radius: #{$buttonBorderRadius};\n\n --hover-button-color: #{$colorWhite};\n --hover-button-background-color: #{$colorSecondary60};\n\n --stuck-background-color: #{$colorGrey10};\n --stuck-heading-color: #{$colorPrimary70};\n --stuck-lead-color: #{$baseColor};\n --stuck-sticky-background-color: var(--background-color);\n\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n @include mq($from: large) {\n --grid-template-areas: var(\n --stzh-cta-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n\n --grid-template-columns: var(\n --stzh-cta-grid-template-columns,\n repeat(8, minmax(0, 1fr))\n );\n }\n\n &[size=\"small\"] {\n --button-background-color: transparent;\n\n --hover-button-color: var(--button-color);\n --hover-button-background-color: var(--button-background-color);\n\n --stuck-background-color: var(--background-color);\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-cta-small-grid-template-areas,\n \"cta cta cta cta\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-cta-small-grid-template-areas,\n \"cta cta cta cta cta cta cta cta\"\n );\n }\n }\n}\n\n@keyframes stzh-cta-effect {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-cta {\n @include font('heavy');\n @include gridGutter;\n display: grid;\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n &__wrapper {\n grid-area: cta;\n background-color: var(--background-color);\n transition-property: background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) {\n background-color: var(--stuck-background-color);\n }\n\n &__heading,\n &__lead {\n transition-property: color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:not(:empty) {\n @include spaceCurve('margin-left', 'medium');\n @include spaceCurve('margin-right', 'medium');\n @include spaceCurve('margin-bottom', 'medium');\n\n @include mq($from: small) {\n margin-bottom: space('xxlarge');\n }\n\n @include mq($from: medium) {\n margin-bottom: space('xxxlarge');\n }\n\n @include mq($from: large) {\n margin-bottom: space('xxxxlarge');\n }\n }\n }\n\n &__heading {\n @include fontCurve('h2', 'heading');\n color: var(--heading-color);\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__heading {\n color: var(--stuck-heading-color);\n }\n\n &__lead {\n @include fontCurve('p1');\n color: var(--lead-color);\n\n &:not(:empty) {\n @include spaceCurve('padding-top', 'small');\n }\n }\n\n &__wrapper:has(#{&}__sticky[is-stuck]:not([is-stuck=\"false\"])) &__lead {\n color: var(--stuck-lead-color);\n }\n\n &__button {\n @include font('heavy');\n @include fontSize('centi');\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n appearance: none;\n border: none;\n text-decoration: none;\n border-radius: var(--button-border-radius);\n color: var(--button-color);\n background-color: var(--button-background-color);\n gap: space('xsmall');\n transition-property: width, height, min-height, color, background-color, font-size, padding;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: auto;\n }\n\n &:hover {\n color: var(--hover-button-color);\n background-color: var(--hover-button-background-color);\n }\n }\n\n &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n @include fontSize('milli');\n\n @include mq($from: medium) {\n @include fontSize('centi');\n }\n }\n\n &__button-text {\n display: block;\n }\n\n &__button-icon {\n --size: #{iconSize('medium')};\n }\n\n &__button:hover &__button-icon {\n\t\tanimation: stzh-cta-effect 1s;\n }\n\n &__sticky {\n @include spaceCurve('--padding-left', 'medium');\n @include spaceCurve('--padding-right', 'medium');\n --padding-top: #{space('large')};\n --padding-bottom: #{space('large')};\n --background-color: var(--sticky-background-color);\n --stuck-background-color: var(--stuck-sticky-background-color);\n --stuck-padding-left: 0px;\n --stuck-padding-right: 0px;\n\n display: block;\n }\n\n &__buttons {\n display: flex;\n gap: space('medium');\n }\n\n /* Has lead variant /\n\n &--has-lead &__heading {\n margin-bottom: 0;\n }\n\n / Default variant; has heading, lead or multiple buttons /\n\n &--size-default &__wrapper {\n padding-top: space('large');\n padding-bottom: space('large');\n\n @include mq($from: small) {\n @include spaceCurve('padding-top', 'large');\n @include spaceCurve('padding-bottom', 'large');\n }\n }\n\n &--size-default &__button {\n padding: space('xsmall') space('xlarge');\n min-height: $formInputHeight;\n }\n\n &--size-default &__button-icon {\n @include mq($to: small) {\n display: none;\n }\n }\n\n &--size-default &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button {\n min-height: $formInputHeightSmall;\n\n @include mq($from: medium) {\n min-height: $formInputHeight;\n }\n }\n\n &--size-default &__sticky {\n margin-top: calc(var(--padding-top) / -1);\n margin-bottom: calc(var(--padding-bottom) / -1);\n }\n\n / Small variant; has no heading, lead or multiple buttons /\n\n &--size-small &__button {\n width: 100%;\n max-width: 100%;\n gap: space('medium');\n\n &.is-placeholder {\n width: auto;\n max-width: none;\n visibility: hidden;\n position: absolute;\n pointer-events: none;\n }\n }\n\n &--size-small &__sticky[is-stuck]:not([is-stuck=\"false\"]) &__button:not(.is-placeholder) {\n width: var(--button-width, auto);\n }\n\n &--size-small &__button-icon {\n --size: #{iconSize('large')};\n }\n\n &--size-small &__sticky {\n @include spaceCurve('--padding-top', 'large');\n @include spaceCurve('--padding-bottom', 'large');\n\n &[is-stuck]:not([is-stuck=\"false\"]) {\n @include spaceCurve('--padding-top', 'medium');\n @include spaceCurve('--padding-bottom', 'medium');\n }\n }\n\n / Not loaded /\n\n &--is-not-loaded {\n visibility: hidden;\n }\n\n &--is-not-loaded &__wrapper,\n &--is-not-loaded &__heading,\n &--is-not-loaded &__lead,\n &--is-not-loaded &__button {\n transition-duration: 0ms;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhCtaFocusEvent,\n StzhCtaBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/\n @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n /\n@Component({\n tag: \"stzh-cta\",\n styleUrl: \"stzh-cta.scss\",\n scoped: true\n})\nexport class StzhCta {\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Lead /\n @Prop() lead: string = \"\";\n\n /* Button Label /\n @Prop() label: string = \"\";\n\n /* Button link /\n @Prop() href: string = \"\";\n\n /\n Whether sticky button is disabled.\n * Will be set to true automatically on,\n * when more than one cta is on the page.\n /\n @Prop() stickyDisabled: boolean = true;\n\n @State() loaded: boolean = false;\n\n @Element() element: HTMLStzhCtaElement;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n private button: HTMLButtonElement \| HTMLAnchorElement;\n private placeholderButton: HTMLElement;\n private debounceResize: number;\n private focusedByInput: boolean = false;\n private placeholderButtonResizeObserver: ResizeObserver;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-cta\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-cta\",\n originalEvent: event\n });\n }\n\n private handlePlaceholderButtonResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n }\n\n private updateButtonWidthByResize = () => {\n if (!this.placeholderButton) {\n return;\n }\n\n const { width } = this.placeholderButton.getBoundingClientRect();\n this.element.style.setProperty(\"--button-width\", `${width}px`);\n }\n\n componentDidLoad() {\n this.stickyDisabled = counter > 1;\n\n this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n if (this.placeholderButton) {\n this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n }\n\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n this.updateButtonWidthByResize();\n\n window.setTimeout(() => {\n this.loaded = true;\n }, 250);\n });\n });\n }\n\n componentDidRender() {\n if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n }\n }\n\n connectedCallback() {\n counter = counter + 1;\n }\n\n disconnectedCallback() {\n // current no way of sending events in disconnected callback, so we just decrease the counter now,\n // but the user has to set stickyDisabled=false by himself\n counter = counter - 1;\n\n this.placeholderButtonResizeObserver?.disconnect();\n }\n\n private renderButtons(size: \"default\" \| \"small\") {\n return (\n <div class=\"stzh-cta__buttons\">\n {size === \"small\" &&\n <div\n class=\"stzh-cta__button is-placeholder\"\n ref={(el) => (this.placeholderButton = el as HTMLElement)}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </div>\n }\n\n {this.href\n ?\n <a\n class=\"stzh-cta__button\"\n href={this.href}\n ref={(el) => (this.button = el as HTMLAnchorElement)}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </a>\n :\n <button\n class=\"stzh-cta__button\"\n ref={(el) => (this.button = el as HTMLButtonElement)}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <span class=\"stzh-cta__button-text\">{this.label}</span>\n <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n </button>\n }\n </div>\n );\n }\n\n render() {\n const headingSlotUsed = hasSlot(this.element, 'heading');\n const leadSlotUsed = hasSlot(this.element, 'lead');\n\n const hasHeading = !!this.heading \|\| headingSlotUsed;\n const hasLead = !!this.lead \|\| leadSlotUsed;\n const hasHeadingOrLead = hasHeading \|\| hasLead;\n\n const size = !hasHeadingOrLead\n ? \"small\"\n : \"default\";\n\n const classes = {\n \"stzh-cta\": true,\n \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n \"stzh-cta--is-not-loaded\": !this.loaded,\n \"stzh-cta--has-heading\": hasHeading,\n \"stzh-cta--has-lead\": hasLead,\n [`stzh-cta--size-${size}`]: !!size,\n };\n\n return (\n <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n <article class={classes} data-stzh-sticky-width-container>\n <div class=\"stzh-cta__wrapper\">\n <div class=\"stzh-cta__heading\">\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n <div class=\"stzh-cta__lead\">\n {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n </div>\n <stzh-sticky\n name=\"cta\"\n class=\"stzh-cta__sticky\"\n position=\"fixed\"\n bleeding\n disableStickyBottom={this.stickyDisabled}\n disableStickyTop={true}\n >\n {this.renderButtons(size)}\n </stzh-sticky>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-datamessagelist-item.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './stzh-menu-item2.js';
 import { d as defineCustomElement$3 } from './stzh-popover2.js';
 import { d as defineCustomElement$2 } from './stzh-status2.js';
-const stzhDatamessagelistItemCss = ".sc-stzh-datamessagelist-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datamessagelist-item-h{display:none}.sc-stzh-datamessagelist-item-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datamessagelist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::before,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datamessagelist-item-h .has-focus.sc-stzh-datamessagelist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datamessagelist-item-h .stzh-fylingfocus-focused.sc-stzh-datamessagelist-item{outline-style:none !important}.sc-stzh-datamessagelist-item-h .stzh-fylingfocus-focused.sc-stzh-datamessagelist-item::-moz-focus-inner{border:0 !important}.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium);display:flex;position:relative;padding:var(--stzh-space-medium);background-color:var(--stzh-color-white)}@media screen and (min-width: 900px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xxlarge)}}.stzh-datamessagelist-item.sc-stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action.is-non-interactive.sc-stzh-datamessagelist-item{color:var(--stzh-color-primary-hover)}.stzh-datamessagelist-item.sc-stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action-popover-button.sc-stzh-datamessagelist-item{--color:var(--stzh-color-primary-hover)}.stzh-datamessagelist-item__vhidden.sc-stzh-datamessagelist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{display:flex;flex-direction:column;flex-grow:1}@media screen and (min-width: 900px){.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{flex-direction:row;align-items:center}}.stzh-datamessagelist-item__text.sc-stzh-datamessagelist-item{flex-grow:1}.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--stzh-base-lead-color);margin:0}@media screen and (min-width: 600px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{transition:all var(--stzh-base-transition-animation-speed)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::after{z-index:1}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{background-color:var(--stzh-color-old-primary4)}.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{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);color:var(--stzh-base-lead-color)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-small)}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-xxsmall)}}.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:table;list-style:none;margin:0;padding:0}@media screen and (min-width: 900px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{display:flex;flex-wrap:wrap;margin:0 calc(var(--stzh-space-xsmall) / -1)}}.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:table-row}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:flex;margin:0 var(--stzh-space-xsmall)}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:table-cell}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:inline-block}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xsmall)}.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{color:var(--stzh-color-black)}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item{width:10rem}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:0;margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{flex-shrink:0}}.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{display:flex;flex-wrap:wrap;margin:calc(var(--stzh-space-xxsmall) / -1)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{flex-wrap:nowrap}}.stzh-datamessagelist-item__tag.sc-stzh-datamessagelist-item{margin:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__tag.sc-stzh-datamessagelist-item{flex-shrink:0}}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-xxlarge);justify-content:center}}.stzh-datamessagelist-item__action.is-non-interactive.sc-stzh-datamessagelist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height);color:var(--stzh-color-primary)}.stzh-datamessagelist-item__action-popover.sc-stzh-datamessagelist-item{--width:auto;--min-width:12.5rem}.stzh-datamessagelist-item__action-popover-button.sc-stzh-datamessagelist-item{position:relative;z-index:2}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:var(--stzh-color-primary)}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover)}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{border-left:0.3125rem solid var(--stzh-color-primary)}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{border-left-color:var(--stzh-color-primary-hover)}";
+const stzhDatamessagelistItemCss = ".sc-stzh-datamessagelist-item-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datamessagelist-item-h{display:none}.sc-stzh-datamessagelist-item-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datamessagelist-item-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::before,.sc-stzh-datamessagelist-item-h *.sc-stzh-datamessagelist-item::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datamessagelist-item-h .has-focus.sc-stzh-datamessagelist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datamessagelist-item-h .stzh-fylingfocus-focused.sc-stzh-datamessagelist-item{outline-style:none !important}.sc-stzh-datamessagelist-item-h .stzh-fylingfocus-focused.sc-stzh-datamessagelist-item::-moz-focus-inner{border:0 !important}.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xlarge);padding-right:var(--stzh-space-medium);display:flex;position:relative;padding:var(--stzh-space-medium);background-color:var(--stzh-color-white)}@media screen and (min-width: 900px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xxlarge)}}.stzh-datamessagelist-item__vhidden.sc-stzh-datamessagelist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{display:flex;flex-direction:column;flex-grow:1}@media screen and (min-width: 900px){.stzh-datamessagelist-item__content.sc-stzh-datamessagelist-item{flex-direction:row;align-items:center}}.stzh-datamessagelist-item__text.sc-stzh-datamessagelist-item{flex-grow:1}.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing);color:var(--stzh-base-lead-color);margin:0}@media screen and (min-width: 600px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-datamessagelist-item__heading.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);padding:0;border:none;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before,.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::after{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:100%}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{transition:all var(--stzh-base-transition-animation-speed)}.stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::after{z-index:1}.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{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);color:var(--stzh-base-lead-color)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__description.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-small)}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-xxsmall)}}.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));display:table;list-style:none;margin:0;padding:0}@media screen and (min-width: 900px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta.sc-stzh-datamessagelist-item{display:flex;flex-wrap:wrap;margin:0 calc(var(--stzh-space-xsmall) / -1)}}.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:table-row}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item.sc-stzh-datamessagelist-item{display:flex;margin:0 var(--stzh-space-xsmall)}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:table-cell}@media screen and (min-width: 600px){.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{display:inline-block}}.stzh-datamessagelist-item__meta-item-label.sc-stzh-datamessagelist-item{padding-right:var(--stzh-space-xsmall)}.stzh-datamessagelist-item__meta-item-value.sc-stzh-datamessagelist-item{color:var(--stzh-color-black)}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item{width:10rem}.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__status.sc-stzh-datamessagelist-item,.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{margin-top:0;margin-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 900px){.stzh-datamessagelist-item__tags-wrapper.sc-stzh-datamessagelist-item{flex-shrink:0}}.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{display:flex;flex-wrap:wrap;margin:calc(var(--stzh-space-xxsmall) / -1)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__tags.sc-stzh-datamessagelist-item{flex-wrap:nowrap}}.stzh-datamessagelist-item__tag.sc-stzh-datamessagelist-item{margin:var(--stzh-space-xxsmall)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__tag.sc-stzh-datamessagelist-item{flex-shrink:0}}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item{display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-datamessagelist-item__actions.sc-stzh-datamessagelist-item:not(:empty){margin-left:var(--stzh-space-xxlarge);justify-content:center}}.stzh-datamessagelist-item__action.is-non-interactive.sc-stzh-datamessagelist-item{display:flex;justify-content:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height);color:var(--stzh-color-primary)}.stzh-datamessagelist-item__action-popover.sc-stzh-datamessagelist-item{--width:auto;--min-width:12.5rem}.stzh-datamessagelist-item__action-popover-button.sc-stzh-datamessagelist-item{position:relative;z-index:2}.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action.is-non-interactive.sc-stzh-datamessagelist-item{color:var(--stzh-color-primary-hover)}.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item:hover .stzh-datamessagelist-item__action-popover-button.sc-stzh-datamessagelist-item{--color:var(--stzh-color-primary-hover)}.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover)}.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{background-color:var(--stzh-color-old-primary4)}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item{color:var(--stzh-color-primary)}.stzh-datamessagelist-item--is-unread.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item::before{border-left:0.3125rem solid var(--stzh-color-primary)}.stzh-datamessagelist-item--is-unread.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover,.stzh-datamessagelist-item--is-unread.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus{color:var(--stzh-color-primary-hover)}.stzh-datamessagelist-item--is-unread.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:hover::before,.stzh-datamessagelist-item--is-unread.stzh-datamessagelist-item--is-interactive.sc-stzh-datamessagelist-item .stzh-datamessagelist-item__heading-link.sc-stzh-datamessagelist-item:focus::before{border-left-color:var(--stzh-color-primary-hover)}";
 const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatamessagelistItem extends HTMLElement {
   constructor() {
@@ -39,6 +39,7 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class StzhDat
     this.target = undefined;
     this.description = "";
     this.icon = undefined;
+    this.nonInteractive = false;
     this.loadingStatus = undefined;
     this.meta = undefined;
     this.actions = undefined;
@@ -94,9 +95,12 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class StzhDat
   render() {
     const classes = {
       "stzh-datamessagelist-item": true,
-      "stzh-datamessagelist-item--is-unread": this.unread
+      "stzh-datamessagelist-item--is-unread": this.unread,
+      "stzh-datamessagelist-item--is-interactive": !this.nonInteractive,
     };
-    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h("a", { class: "stzh-datamessagelist-item__heading-link", href: this.href, rel: this.rel, target: this.target, onClick: this.itemClick, "s-object-id": this.analyticsId || this.heading }, this.unread &&
+    const HeadingLink = this.nonInteractive ? "div" :
+      this.href ? "a" : "button";
+    return (h(Host, { role: "listitem" }, h("article", { class: classes }, h("div", { class: "stzh-datamessagelist-item__content" }, h("div", { class: "stzh-datamessagelist-item__text" }, h("h3", { class: "stzh-datamessagelist-item__heading" }, h(HeadingLink, { class: "stzh-datamessagelist-item__heading-link", href: this.href, rel: this.rel, target: this.target, onClick: this.itemClick, "s-object-id": this.analyticsId || this.heading }, this.unread &&
       h("span", { class: "stzh-datamessagelist-item__vhidden" }, this.localization.unread, ","), this.heading)), this.description &&
       h("div", { class: "stzh-datamessagelist-item__description" }, h("stzh-clamp", { lines: 2, linesMedium: 1 }, this.description)), this._meta && this._meta.length > 0 &&
       h("div", { class: "stzh-datamessagelist-item__meta-wrapper" }, h("ul", { class: "stzh-datamessagelist-item__meta" }, this._meta.map((meta) => h("li", { class: "stzh-datamessagelist-item__meta-item" }, h("span", { class: "stzh-datamessagelist-item__meta-item-label" }, meta.label), h("span", { class: "stzh-datamessagelist-item__meta-item-value" }, meta.value)))))), this._loadingStatus &&
@@ -104,7 +108,8 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class StzhDat
       h("div", { class: "stzh-datamessagelist-item__tags-wrapper" }, h("div", { class: "stzh-datamessagelist-item__tags" }, this._tags.map((tag) => h("stzh-chip", { class: "stzh-datamessagelist-item__tag", variant: "tag", size: "small", nonInteractive: true, inverted: tag.inverted, type: tag.type, icon: tag.icon, label: tag.label }))))), h("div", { class: "stzh-datamessagelist-item__actions" }, (this._actions && this._actions.length > 0) ?
       h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: "stzh-datamessagelist-item__action-popover" }, h("stzh-button", { class: "stzh-datamessagelist-item__action-popover-button", variant: "tertiary", size: "tiny", icon: "more-horizontal", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._actions.map((action) => h("stzh-menu-item", { icon: action.icon, badge: action.badge, onClick: (event) => { this.actionClick(action, event); } }, action.label))))
       :
-        h("div", { class: "stzh-datamessagelist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datamessagelist-item__action-icon", name: this.icon ? this.icon : (this.external ? "external-link" : "arrow-right") }))))));
+        (!this.nonInteractive &&
+          h("div", { class: "stzh-datamessagelist-item__action is-non-interactive" }, h("stzh-icon", { class: "stzh-datamessagelist-item__action-icon", name: this.icon ? this.icon : (this.external ? "external-link" : "arrow-right") })))))));
   }
   get element() { return this; }
   static get watchers() { return {
@@ -124,6 +129,7 @@ const StzhDatamessagelistItem$1 = /*@__PURE__*/ proxyCustomElement(class StzhDat
     "target": [1],
     "description": [1],
     "icon": [1],
+    "nonInteractive": [516, "non-interactive"],
     "loadingStatus": [1, "loading-status"],
     "meta": [1],
     "actions": [1],

package/dist/components/stzh-datamessagelist-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datamessagelist-item.js","mappings":"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","names":["StzhDatamessagelistItem"],"sources":["src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.scss?tag=stzh-datamessagelist-item&encapsulation=scoped","src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-datamessagelist-item {\n @include spaceCurve('padding-left', 'medium');\n @include spaceCurve('padding-right', 'regular');\n display: flex;\n position: relative;\n padding: space('medium');\n background-color: $colorWhite;\n\n &:hover &__action {\n &.is-non-interactive {\n color: $colorPrimaryHover;\n }\n }\n\n &:hover &__action-popover-button {\n --color: #{$colorPrimaryHover};\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n @include mq($from: medium) {\n flex-direction: row;\n align-items: center;\n }\n }\n\n &__text {\n flex-grow: 1;\n }\n\n &__heading {\n @include font('title');\n @include fontCurve('h4', 'heading');\n color: $baseLeadColor;\n margin: 0;\n }\n\n &__heading-link {\n color: inherit;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\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 &:hover::before,\n &:focus::before {\n background-color: $colorOldPrimary4;\n }\n }\n\n &__description {\n @include fontCurve('p1');\n color: $baseLeadColor;\n }\n\n // Meta\n\n &__meta-wrapper {\n margin-top: space('small');\n\n @include mq($from: small) {\n margin-top: space('xxsmall');\n }\n }\n\n &__meta {\n @include fontCurve('caption');\n display: table;\n list-style: none;\n margin: 0;\n padding: 0;\n\n @include mq($from: small) {\n display: flex;\n flex-wrap: wrap;\n margin: 0 calc(#{space('xsmall')} / -1);\n }\n }\n\n &__meta-item {\n display: table-row;\n\n @include mq($from: small) {\n display: flex;\n margin: 0 space('xsmall');\n }\n }\n\n &__meta-item-label,\n &__meta-item-value {\n display: table-cell;\n\n @include mq($from: small) {\n display: inline-block;\n }\n }\n\n &__meta-item-label {\n padding-right: space('xsmall');\n }\n\n &__meta-item-value {\n color: $colorBlack;\n }\n\n // Status / Tags\n\n &__status {\n width: 160px;\n }\n\n &__status,\n &__tags-wrapper {\n margin-top: space('medium');\n\n @include mq($from: medium) {\n margin-top: 0;\n margin-left: space('xxlarge');\n }\n }\n\n &__tags-wrapper {\n @include mq($from: medium) {\n flex-shrink: 0;\n }\n }\n\n &__tags {\n display: flex;\n flex-wrap: wrap;\n margin: calc(#{space('xxsmall')} / -1);\n\n @include mq($from: medium) {\n flex-wrap: nowrap;\n }\n }\n\n &__tag {\n margin: space('xxsmall');\n\n @include mq($from: medium) {\n flex-shrink: 0;\n }\n }\n\n // Actions\n\n &__actions {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n\n &:not(:empty) {\n margin-left: space('medium');\n\n @include mq($from: medium) {\n margin-left: space('xxlarge');\n justify-content: center;\n }\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n color: $colorPrimary;\n }\n }\n\n &__action-popover {\n --width: auto;\n --min-width: 200px;\n }\n\n &__action-popover-button {\n position: relative;\n z-index: 2;\n }\n\n /* Unread variant /\n\n &--is-unread &__heading-link {\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n\n &::before {\n border-left: 5px solid $colorPrimary;\n }\n\n &:hover::before,\n &:focus::before {\n border-left-color: $colorPrimaryHover;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhDatamessagelistItemEntryLoadingStatus,\n StzhDatamessagelistItemEntryMeta,\n StzhDatamessagelistItemEntryAction,\n StzhDatamessagelistItemEntryTag,\n StzhDatamessagelistItemClickEvent,\n StzhDatamessagelistItemActionClickEvent\n} from \"../../index\";\n\nimport { StzhDatamessagelistItemLocalizedText } from './stzh-datamessagelist-item.localization';\n\n/\n /\n@Component({\n tag: \"stzh-datamessagelist-item\",\n styleUrl: \"stzh-datamessagelist-item.scss\",\n scoped: true\n})\nexport class StzhDatamessagelistItem {\n /** Translation strings /\n @Prop() localization: StzhDatamessagelistItemLocalizedText;\n\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Whether item should be displayed in unread state /\n @Prop() unread: boolean = false;\n\n /* URL the item should link to /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Icon (`arrow-right` by default or `external-link` if rel=\"external\" is used) /\n @Prop() icon: string;\n\n /* Loading status /\n @Prop() loadingStatus: StzhDatamessagelistItemEntryLoadingStatus \| string;\n private _loadingStatus: StzhDatamessagelistItemEntryLoadingStatus;\n\n /* Meta /\n @Prop() meta: StzhDatamessagelistItemEntryMeta[] \| string;\n private _meta: StzhDatamessagelistItemEntryMeta[];\n\n /* Actions /\n @Prop() actions: StzhDatamessagelistItemEntryAction[] \| string;\n private _actions: StzhDatamessagelistItemEntryAction[];\n\n /* Tags /\n @Prop() tags: StzhDatamessagelistItemEntryTag[] \| string;\n private _tags: StzhDatamessagelistItemEntryTag[];\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `heading` prop.\n /\n @Prop() analyticsId: string;\n\n /* Whether rel contains external /\n @State() external: boolean = false;\n\n @Element() element: HTMLStzhDatamessagelistItemElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhDatamessagelistItemClickEvent>;\n\n /* Action click event */\n @Event() stzhActionClick: EventEmitter<StzhDatamessagelistItemActionClickEvent>;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"loadingStatus\")\n loadingStatusWatcher(newValue: StzhDatamessagelistItemEntryLoadingStatus \| string) {\n if (typeof newValue === \"string\") {\n this._loadingStatus = JSON.parse(newValue);\n } else {\n this._loadingStatus = newValue;\n }\n }\n\n @Watch(\"meta\")\n metaWatcher(newValue: StzhDatamessagelistItemEntryMeta[] \| string) {\n if (typeof newValue === \"string\") {\n this._meta = JSON.parse(newValue);\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhDatamessagelistItemEntryAction[] \| string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @Watch(\"tags\")\n tagsWatcher(newValue: StzhDatamessagelistItemEntryTag[] \| string) {\n if (typeof newValue === \"string\") {\n this._tags = JSON.parse(newValue);\n } else {\n this._tags = newValue;\n }\n }\n\n private actionClick = (action: StzhDatamessagelistItemEntryAction, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-datamessagelist-item\",\n action,\n originalEvent\n });\n }\n\n private itemClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datamessagelist-item\",\n originalEvent\n });\n }\n\n async componentWillLoad() {\n this.loadingStatusWatcher(this.loadingStatus);\n this.metaWatcher(this.meta);\n this.actionsWatcher(this.actions);\n this.tagsWatcher(this.tags);\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datamessagelist-item\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-datamessagelist-item\": true,\n \"stzh-datamessagelist-item--is-unread\": this.unread\n };\n\n return (\n <Host role=\"listitem\">\n <article class={classes}>\n <div class=\"stzh-datamessagelist-item__content\">\n <div class=\"stzh-datamessagelist-item__text\">\n <h3 class=\"stzh-datamessagelist-item__heading\">\n <a\n class=\"stzh-datamessagelist-item__heading-link\"\n href={this.href}\n rel={this.rel}\n target={this.target}\n onClick={this.itemClick}\n s-object-id={this.analyticsId \|\| this.heading}\n >\n {this.unread &&\n <span class=\"stzh-datamessagelist-item__vhidden\">\n {this.localization.unread},\n </span>\n }\n {this.heading}\n </a>\n </h3>\n\n {this.description &&\n <div class=\"stzh-datamessagelist-item__description\">\n <stzh-clamp lines={2} linesMedium={1}>\n {this.description}\n </stzh-clamp>\n </div>\n }\n\n {this._meta && this._meta.length > 0 &&\n <div class=\"stzh-datamessagelist-item__meta-wrapper\">\n <ul class=\"stzh-datamessagelist-item__meta\">\n {this._meta.map((meta) =>\n <li class=\"stzh-datamessagelist-item__meta-item\">\n <span class=\"stzh-datamessagelist-item__meta-item-label\">{meta.label}</span>\n <span class=\"stzh-datamessagelist-item__meta-item-value\">{meta.value}</span>\n </li>\n )}\n </ul>\n </div>\n }\n </div>\n\n {this._loadingStatus &&\n <stzh-status\n class=\"stzh-datamessagelist-item__status\"\n label={this._loadingStatus.label}\n percent={this._loadingStatus.percent}\n type={this._loadingStatus.type}\n withLoadingbar={true}\n ></stzh-status>\n }\n\n {this._tags && this._tags.length > 0 &&\n <div class=\"stzh-datamessagelist-item__tags-wrapper\">\n <div class=\"stzh-datamessagelist-item__tags\">\n {this._tags.map((tag) =>\n <stzh-chip\n class=\"stzh-datamessagelist-item__tag\"\n variant=\"tag\"\n size=\"small\"\n nonInteractive={true}\n inverted={tag.inverted}\n type={tag.type}\n icon={tag.icon}\n label={tag.label}\n ></stzh-chip>\n )}\n </div>\n </div>\n }\n </div>\n\n <div class=\"stzh-datamessagelist-item__actions\">\n {(this._actions && this._actions.length > 0) ?\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class=\"stzh-datamessagelist-item__action-popover\"\n >\n <stzh-button\n class=\"stzh-datamessagelist-item__action-popover-button\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-horizontal\"\n iconOnly={true}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this._actions.map((action) =>\n <stzh-menu-item\n icon={action.icon}\n badge={action.badge}\n onClick={(event) => { this.actionClick(action, event) }}\n >\n {action.label}\n </stzh-menu-item>\n )}\n </stzh-menu>\n </stzh-popover>\n :\n <div class=\"stzh-datamessagelist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datamessagelist-item__action-icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n }\n </div>\n\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datamessagelist-item.js","mappings":";;;;;;;;;;;;AAAA,MAAM,0BAA0B,GAAG,89XAA89X;;MC8Bp/XA,yBAAuB;;;;;;IAuG1B,gBAAW,GAAG,CAAC,MAA0C,EAAE,aAAyB;MAC1F,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,2BAA2B;QACtC,MAAM;QACN,aAAa;OACd,CAAC,CAAC;KACJ,CAAA;IAEO,cAAS,GAAG,CAAC,aAAyB;MAC5C,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,2BAA2B;QACtC,aAAa;OACd,CAAC,CAAC;KACJ,CAAA;;mBA/GyB,EAAE;kBAGF,KAAK;gBAGR,EAAE;;;uBASK,EAAE;;0BAMmB,KAAK;;;;;;oBA0B3B,KAAK;;EAWlC,eAAe;IACb,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC;GAC3D;EAGD,oBAAoB,CAAC,QAA4D;IAC/E,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,WAAW,CAAC,QAAqD;IAC/D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACnC;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAGD,cAAc,CAAC,QAAuD;IACpE,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACtC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC1B;GACF;EAGD,WAAW,CAAC,QAAoD;IAC9D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACnC;SAAM;MACL,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;KACvB;GACF;EAiBD,MAAM,iBAAiB;IACrB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC9C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,eAAe,EAAE,CAAC;IAEvB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC;KAC/G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,2BAA2B,EAAE,IAAI;MACjC,sCAAsC,EAAE,IAAI,CAAC,MAAM;MACnD,2CAA2C,EAAE,CAAC,IAAI,CAAC,cAAc;KAClE,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,GAAG,KAAK;MAC7C,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IAE7B,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,eAAS,KAAK,EAAE,OAAO,IACrB,WAAK,KAAK,EAAC,oCAAoC,IAC7C,WAAK,KAAK,EAAC,iCAAiC,IAC1C,UAAI,KAAK,EAAC,oCAAoC,IAC5C,EAAC,WAAW,IACV,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,SAAS,iBACV,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,OAAO,IAE5C,IAAI,CAAC,MAAM;MACV,YAAM,KAAK,EAAC,oCAAoC,IAC7C,IAAI,CAAC,YAAY,CAAC,MAAM,MACpB,EAER,IAAI,CAAC,OAAO,CACD,CACX,EAEJ,IAAI,CAAC,WAAW;MACf,WAAK,KAAK,EAAC,wCAAwC,IACjD,kBAAY,KAAK,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,IACjC,IAAI,CAAC,WAAW,CACN,CACT,EAGP,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;MAClC,WAAK,KAAK,EAAC,yCAAyC,IAClD,UAAI,KAAK,EAAC,iCAAiC,IACxC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KACnB,UAAI,KAAK,EAAC,sCAAsC,IAC9C,YAAM,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5E,YAAM,KAAK,EAAC,4CAA4C,IAAE,IAAI,CAAC,KAAK,CAAQ,CACzE,CACN,CACE,CACD,CAEJ,EAEL,IAAI,CAAC,cAAc;MAClB,mBACE,KAAK,EAAC,mCAAmC,EACzC,KAAK,EAAE,IAAI,CAAC,cAAc,CAAC,KAAK,EAChC,OAAO,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,EACpC,IAAI,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,EAC9B,cAAc,EAAE,IAAI,GACP,EAGhB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;MAClC,WAAK,KAAK,EAAC,yCAAyC,IAClD,WAAK,KAAK,EAAC,iCAAiC,IACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,KAClB,iBACE,KAAK,EAAC,gCAAgC,EACtC,OAAO,EAAC,KAAK,EACb,IAAI,EAAC,OAAO,EACZ,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAE,GAAG,CAAC,QAAQ,EACtB,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,IAAI,EAAE,GAAG,CAAC,IAAI,EACd,KAAK,EAAE,GAAG,CAAC,KAAK,GACL,CACd,CACG,CACF,CAEJ,EAEN,WAAK,KAAK,EAAC,oCAAoC,IAC5C,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;MACzC,oBACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAC5C,SAAS,EAAC,YAAY,EACtB,KAAK,EAAC,2CAA2C,IAEjD,mBACE,KAAK,EAAC,kDAAkD,EACxD,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,iBAAiB,EACtB,QAAQ,EAAE,IAAI,GACD,EACf,iBAAW,IAAI,EAAC,SAAS,IACtB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,KACxB,sBACE,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,CAAC,KAAK,OAAO,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA,EAAE,IAEtD,MAAM,CAAC,KAAK,CACE,CAClB,CACS,CACC;;SAGb,CAAC,IAAI,CAAC,cAAc;UAClB,WAAK,KAAK,EAAC,sDAAsD,IAC/D,iBAAW,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,GAAG,eAAe,GAAG,aAAa,CAAC,GAAc,CACnJ,CACT,CAEC,CAEE,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhDatamessagelistItem"],"sources":["src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.scss?tag=stzh-datamessagelist-item&encapsulation=scoped","src/components/stzh-datamessagelist-item/stzh-datamessagelist-item.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-datamessagelist-item {\n @include spaceCurve('padding-left', 'medium');\n @include spaceCurve('padding-right', 'regular');\n display: flex;\n position: relative;\n padding: space('medium');\n background-color: $colorWhite;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__content {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n @include mq($from: medium) {\n flex-direction: row;\n align-items: center;\n }\n }\n\n &__text {\n flex-grow: 1;\n }\n\n &__heading {\n @include font('title');\n @include fontCurve('h4', 'heading');\n color: $baseLeadColor;\n margin: 0;\n }\n\n &__heading-link {\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n color: inherit;\n text-decoration-line: none;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n padding: 0;\n border: none;\n background-color: transparent;\n appearance: none;\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 &__description {\n @include fontCurve('p1');\n color: $baseLeadColor;\n }\n\n // Meta\n\n &__meta-wrapper {\n margin-top: space('small');\n\n @include mq($from: small) {\n margin-top: space('xxsmall');\n }\n }\n\n &__meta {\n @include fontCurve('caption');\n display: table;\n list-style: none;\n margin: 0;\n padding: 0;\n\n @include mq($from: small) {\n display: flex;\n flex-wrap: wrap;\n margin: 0 calc(#{space('xsmall')} / -1);\n }\n }\n\n &__meta-item {\n display: table-row;\n\n @include mq($from: small) {\n display: flex;\n margin: 0 space('xsmall');\n }\n }\n\n &__meta-item-label,\n &__meta-item-value {\n display: table-cell;\n\n @include mq($from: small) {\n display: inline-block;\n }\n }\n\n &__meta-item-label {\n padding-right: space('xsmall');\n }\n\n &__meta-item-value {\n color: $colorBlack;\n }\n\n // Status / Tags\n\n &__status {\n width: 160px;\n }\n\n &__status,\n &__tags-wrapper {\n margin-top: space('medium');\n\n @include mq($from: medium) {\n margin-top: 0;\n margin-left: space('xxlarge');\n }\n }\n\n &__tags-wrapper {\n @include mq($from: medium) {\n flex-shrink: 0;\n }\n }\n\n &__tags {\n display: flex;\n flex-wrap: wrap;\n margin: calc(#{space('xxsmall')} / -1);\n\n @include mq($from: medium) {\n flex-wrap: nowrap;\n }\n }\n\n &__tag {\n margin: space('xxsmall');\n\n @include mq($from: medium) {\n flex-shrink: 0;\n }\n }\n\n // Actions\n\n &__actions {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n\n &:not(:empty) {\n margin-left: space('medium');\n\n @include mq($from: medium) {\n margin-left: space('xxlarge');\n justify-content: center;\n }\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n color: $colorPrimary;\n }\n }\n\n &__action-popover {\n --width: auto;\n --min-width: 200px;\n }\n\n &__action-popover-button {\n position: relative;\n z-index: 2;\n }\n\n /* Is interactive variant /\n\n &--is-interactive:hover &__action {\n &.is-non-interactive {\n color: $colorPrimaryHover;\n }\n }\n\n &--is-interactive:hover &__action-popover-button {\n --color: #{$colorPrimaryHover};\n }\n\n &--is-interactive &__heading-link {\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n\n &:hover::before,\n &:focus::before {\n background-color: $colorOldPrimary4;\n }\n }\n\n / Unread variant /\n\n &--is-unread &__heading-link {\n color: $colorPrimary;\n\n &::before {\n border-left: 5px solid $colorPrimary;\n }\n }\n\n &--is-unread#{&}--is-interactive &__heading-link {\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n\n &:hover::before,\n &:focus::before {\n border-left-color: $colorPrimaryHover;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhDatamessagelistItemEntryLoadingStatus,\n StzhDatamessagelistItemEntryMeta,\n StzhDatamessagelistItemEntryAction,\n StzhDatamessagelistItemEntryTag,\n StzhDatamessagelistItemClickEvent,\n StzhDatamessagelistItemActionClickEvent\n} from \"../../index\";\n\nimport { StzhDatamessagelistItemLocalizedText } from './stzh-datamessagelist-item.localization';\n\n/\n /\n@Component({\n tag: \"stzh-datamessagelist-item\",\n styleUrl: \"stzh-datamessagelist-item.scss\",\n scoped: true\n})\nexport class StzhDatamessagelistItem {\n /** Translation strings /\n @Prop() localization: StzhDatamessagelistItemLocalizedText;\n\n /* Heading /\n @Prop() heading: string = \"\";\n\n /* Whether item should be displayed in unread state /\n @Prop() unread: boolean = false;\n\n /* URL the item should link to /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* Target (if href is used) /\n @Prop() target: string;\n\n /* Description /\n @Prop() description: string = \"\";\n\n /* Icon (`arrow-right` by default or `external-link` if rel=\"external\" is used) /\n @Prop() icon: string;\n\n /* Whether item is not interactive (arrow icon and hover effect will disappear) /\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /* Loading status /\n @Prop() loadingStatus: StzhDatamessagelistItemEntryLoadingStatus \| string;\n private _loadingStatus: StzhDatamessagelistItemEntryLoadingStatus;\n\n /* Meta /\n @Prop() meta: StzhDatamessagelistItemEntryMeta[] \| string;\n private _meta: StzhDatamessagelistItemEntryMeta[];\n\n /* Actions /\n @Prop() actions: StzhDatamessagelistItemEntryAction[] \| string;\n private _actions: StzhDatamessagelistItemEntryAction[];\n\n /* Tags /\n @Prop() tags: StzhDatamessagelistItemEntryTag[] \| string;\n private _tags: StzhDatamessagelistItemEntryTag[];\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `heading` prop.\n /\n @Prop() analyticsId: string;\n\n /* Whether rel contains external /\n @State() external: boolean = false;\n\n @Element() element: HTMLStzhDatamessagelistItemElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhDatamessagelistItemClickEvent>;\n\n /* Action click event */\n @Event() stzhActionClick: EventEmitter<StzhDatamessagelistItemActionClickEvent>;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n @Watch(\"loadingStatus\")\n loadingStatusWatcher(newValue: StzhDatamessagelistItemEntryLoadingStatus \| string) {\n if (typeof newValue === \"string\") {\n this._loadingStatus = JSON.parse(newValue);\n } else {\n this._loadingStatus = newValue;\n }\n }\n\n @Watch(\"meta\")\n metaWatcher(newValue: StzhDatamessagelistItemEntryMeta[] \| string) {\n if (typeof newValue === \"string\") {\n this._meta = JSON.parse(newValue);\n } else {\n this._meta = newValue;\n }\n }\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhDatamessagelistItemEntryAction[] \| string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @Watch(\"tags\")\n tagsWatcher(newValue: StzhDatamessagelistItemEntryTag[] \| string) {\n if (typeof newValue === \"string\") {\n this._tags = JSON.parse(newValue);\n } else {\n this._tags = newValue;\n }\n }\n\n private actionClick = (action: StzhDatamessagelistItemEntryAction, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-datamessagelist-item\",\n action,\n originalEvent\n });\n }\n\n private itemClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-datamessagelist-item\",\n originalEvent\n });\n }\n\n async componentWillLoad() {\n this.loadingStatusWatcher(this.loadingStatus);\n this.metaWatcher(this.meta);\n this.actionsWatcher(this.actions);\n this.tagsWatcher(this.tags);\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datamessagelist-item\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-datamessagelist-item\": true,\n \"stzh-datamessagelist-item--is-unread\": this.unread,\n \"stzh-datamessagelist-item--is-interactive\": !this.nonInteractive,\n };\n\n const HeadingLink = this.nonInteractive ? \"div\" :\n this.href ? \"a\" : \"button\";\n\n return (\n <Host role=\"listitem\">\n <article class={classes}>\n <div class=\"stzh-datamessagelist-item__content\">\n <div class=\"stzh-datamessagelist-item__text\">\n <h3 class=\"stzh-datamessagelist-item__heading\">\n <HeadingLink\n class=\"stzh-datamessagelist-item__heading-link\"\n href={this.href}\n rel={this.rel}\n target={this.target}\n onClick={this.itemClick}\n s-object-id={this.analyticsId \|\| this.heading}\n >\n {this.unread &&\n <span class=\"stzh-datamessagelist-item__vhidden\">\n {this.localization.unread},\n </span>\n }\n {this.heading}\n </HeadingLink>\n </h3>\n\n {this.description &&\n <div class=\"stzh-datamessagelist-item__description\">\n <stzh-clamp lines={2} linesMedium={1}>\n {this.description}\n </stzh-clamp>\n </div>\n }\n\n {this._meta && this._meta.length > 0 &&\n <div class=\"stzh-datamessagelist-item__meta-wrapper\">\n <ul class=\"stzh-datamessagelist-item__meta\">\n {this._meta.map((meta) =>\n <li class=\"stzh-datamessagelist-item__meta-item\">\n <span class=\"stzh-datamessagelist-item__meta-item-label\">{meta.label}</span>\n <span class=\"stzh-datamessagelist-item__meta-item-value\">{meta.value}</span>\n </li>\n )}\n </ul>\n </div>\n }\n </div>\n\n {this._loadingStatus &&\n <stzh-status\n class=\"stzh-datamessagelist-item__status\"\n label={this._loadingStatus.label}\n percent={this._loadingStatus.percent}\n type={this._loadingStatus.type}\n withLoadingbar={true}\n ></stzh-status>\n }\n\n {this._tags && this._tags.length > 0 &&\n <div class=\"stzh-datamessagelist-item__tags-wrapper\">\n <div class=\"stzh-datamessagelist-item__tags\">\n {this._tags.map((tag) =>\n <stzh-chip\n class=\"stzh-datamessagelist-item__tag\"\n variant=\"tag\"\n size=\"small\"\n nonInteractive={true}\n inverted={tag.inverted}\n type={tag.type}\n icon={tag.icon}\n label={tag.label}\n ></stzh-chip>\n )}\n </div>\n </div>\n }\n </div>\n\n <div class=\"stzh-datamessagelist-item__actions\">\n {(this._actions && this._actions.length > 0) ?\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class=\"stzh-datamessagelist-item__action-popover\"\n >\n <stzh-button\n class=\"stzh-datamessagelist-item__action-popover-button\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-horizontal\"\n iconOnly={true}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this._actions.map((action) =>\n <stzh-menu-item\n icon={action.icon}\n badge={action.badge}\n onClick={(event) => { this.actionClick(action, event) }}\n >\n {action.label}\n </stzh-menu-item>\n )}\n </stzh-menu>\n </stzh-popover>\n :\n (\n !this.nonInteractive &&\n <div class=\"stzh-datamessagelist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datamessagelist-item__action-icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n </div>\n\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-datamessagelist.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const stzhDatamessagelistCss = ".sc-stzh-datamessagelist-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datamessagelist-h{display:none}.sc-stzh-datamessagelist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datamessagelist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datamessagelist-h *.sc-stzh-datamessagelist,.sc-stzh-datamessagelist-h *.sc-stzh-datamessagelist::before,.sc-stzh-datamessagelist-h *.sc-stzh-datamessagelist::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datamessagelist-h .has-focus.sc-stzh-datamessagelist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datamessagelist-h .stzh-fylingfocus-focused.sc-stzh-datamessagelist{outline-style:none !important}.sc-stzh-datamessagelist-h .stzh-fylingfocus-focused.sc-stzh-datamessagelist::-moz-focus-inner{border:0 !important}.sc-stzh-datamessagelist-h .sc-stzh-datamessagelist-s>*:not(:last-child){border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (max-width: 599px){.stzh-datamessagelist.sc-stzh-datamessagelist{margin-left:calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2)}}@media screen and (min-width: 600px){.stzh-datamessagelist.sc-stzh-datamessagelist{border:0.0625rem solid var(--stzh-base-border-color)}}";
+const stzhDatamessagelistCss = ".sc-stzh-datamessagelist-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datamessagelist-h{display:none}.sc-stzh-datamessagelist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datamessagelist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datamessagelist-h *.sc-stzh-datamessagelist,.sc-stzh-datamessagelist-h *.sc-stzh-datamessagelist::before,.sc-stzh-datamessagelist-h *.sc-stzh-datamessagelist::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datamessagelist-h .has-focus.sc-stzh-datamessagelist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datamessagelist-h .stzh-fylingfocus-focused.sc-stzh-datamessagelist{outline-style:none !important}.sc-stzh-datamessagelist-h .stzh-fylingfocus-focused.sc-stzh-datamessagelist::-moz-focus-inner{border:0 !important}.sc-stzh-datamessagelist-h .sc-stzh-datamessagelist-s>*:not(:last-child){border-bottom:0.0625rem solid var(--stzh-base-border-color)}@media screen and (max-width: 599px){.stzh-datamessagelist.sc-stzh-datamessagelist{margin-left:calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);margin-right:calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2)}}";
 const StzhDatamessagelist$1 = /*@__PURE__*/ proxyCustomElement(class StzhDatamessagelist extends HTMLElement {
   constructor() {

package/dist/components/stzh-datamessagelist.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-datamessagelist.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,~~o0DAAo0D~~;;~~MCct1DA~~,qBAAmB;;;;;EAG9B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,IACjD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhDatamessagelist"],"sources":["src/components/stzh-datamessagelist/stzh-datamessagelist.scss?tag=stzh-datamessagelist&encapsulation=scoped","src/components/stzh-datamessagelist/stzh-datamessagelist.tsx"],"sourcesContent":[":host {\n ::slotted(:not(:last-child)) {\n border-bottom: 1px solid $baseBorderColor;\n }\n}\n\n.stzh-datamessagelist {\n @include mq($to: small) {\n margin-left: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n margin-right: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n }\n~~\n @include mq($from: small) {\n border: 1px solid $baseBorderColor;\n~~ }\n~~}\n~~","import {\n Component,\n Host,\n h,\n Element,\n} from \"@stencil/core\";\n\n/\n /\n@Component({\n tag: \"stzh-datamessagelist\",\n styleUrl: \"stzh-datamessagelist.scss\",\n scoped: true\n})\nexport class StzhDatamessagelist {\n @Element() element: HTMLStzhDatamessagelistElement;\n\n render() {\n const classes = {\n \"stzh-datamessagelist\": true\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-datamessagelist__list\" role=\"list\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-datamessagelist.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,2rDAA2rD;;MCc7sDA,qBAAmB;;;;;EAG9B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,MAAM,IACjD,eAAa,CACT,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhDatamessagelist"],"sources":["src/components/stzh-datamessagelist/stzh-datamessagelist.scss?tag=stzh-datamessagelist&encapsulation=scoped","src/components/stzh-datamessagelist/stzh-datamessagelist.tsx"],"sourcesContent":[":host {\n ::slotted(:not(:last-child)) {\n border-bottom: 1px solid $baseBorderColor;\n }\n}\n\n.stzh-datamessagelist {\n @include mq($to: small) {\n margin-left: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n margin-right: calc((100vw - 100% - var(--stzh-scrollbar-width, 0px)) / -2);\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n} from \"@stencil/core\";\n\n/\n /\n@Component({\n tag: \"stzh-datamessagelist\",\n styleUrl: \"stzh-datamessagelist.scss\",\n scoped: true\n})\nexport class StzhDatamessagelist {\n @Element() element: HTMLStzhDatamessagelistElement;\n\n render() {\n const classes = {\n \"stzh-datamessagelist\": true\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-datamessagelist__list\" role=\"list\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/stzh-datepicker2.js CHANGED Viewed

@@ -9,7 +9,7 @@ import { d as defineCustomElement$3 } from './stzh-input2.js';
 import { d as defineCustomElement$2 } from './stzh-popover2.js';
 import { d as defineCustomElement$1 } from './stzh-text2.js';
-const stzhDatepickerCss = ".sc-stzh-datepicker-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{width:100%}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--stzh-calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;justify-content:flex-end}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){margin-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";
+const stzhDatepickerCss = ".sc-stzh-datepicker-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{--calendar-width:var(--stzh-calendar-width);width:100%}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";
 const StzhDatepicker = /*@__PURE__*/ proxyCustomElement(class StzhDatepicker extends HTMLElement {
   constructor() {