npm - @oiz/stzh-components - Versions diffs - 3.4.0-beta1 → 3.4.0-beta2 - Mend

@oiz/stzh-components 3.4.0-beta1 → 3.4.0-beta2

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 (307) hide show

package/dist/stzh-components/p-7bb2eb4e.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,a as i}from"./p-c7bfac7a.js";const s='.sc-stzh-text-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-text-h{display:none}.sc-stzh-text-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-text-h .sc-stzh-text,.sc-stzh-text-h .sc-stzh-text::before,.sc-stzh-text-h .sc-stzh-text::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-text-h .has-focus.sc-stzh-text{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text{outline-style:none !important}.sc-stzh-text-h .stzh-fylingfocus-focused.sc-stzh-text::-moz-focus-inner{border:0 !important}.sc-stzh-text-h{--icon-size:1.25em;--icon-vertical-align:text-bottom;--color:var(--stzh-base-color);--display:var(--stzh-text-display, block);width:100%;color:var(--color);--grid-template-areas:var(\n --stzh-text-grid-template-areas,\n "text text text text"\n );--grid-template-columns:var(\n --stzh-text-grid-template-columns,\n repeat(4, minmax(0, 1fr))\n )}@media screen and (min-width: 600px){.sc-stzh-text-h{--grid-template-areas:var(\n --stzh-text-grid-template-areas,\n "text text text text"\n )}}@media screen and (min-width: 900px){.sc-stzh-text-h{--grid-template-areas:var(\n --stzh-text-grid-template-areas,\n "text text text text text text text text"\n );--grid-template-columns:var(\n --stzh-text-grid-template-columns,\n repeat(8, minmax(0, 1fr))\n )}}.sc-stzh-text-h .sc-stzh-text-s>:first-child{margin-top:0 !important}.sc-stzh-text-h .sc-stzh-text-s>*:last-child{margin-bottom:0 !important}.sc-stzh-text-h .sc-stzh-text-s>a,.sc-stzh-text-h .sc-stzh-text-s a{color:var(--stzh-link-color);transition:color var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-button-border-radius);text-underline-offset:var(--stzh-link-text-underline-offset);-webkit-text-decoration-line:var(--stzh-link-text-decoration-line);text-decoration-line:var(--stzh-link-text-decoration-line);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-text-h .sc-stzh-text-s>a:hover,.sc-stzh-text-h .sc-stzh-text-s a:hover{color:var(--stzh-link-hover-color);-webkit-text-decoration-line:var(--stzh-link-hover-text-decoration-line);text-decoration-line:var(--stzh-link-hover-text-decoration-line)}@media (hover: none){.sc-stzh-text-h .sc-stzh-text-s>a:hover,.sc-stzh-text-h .sc-stzh-text-s a:hover{color:inherit}}.sc-stzh-text-h .sc-stzh-text-s>b,.sc-stzh-text-h .sc-stzh-text-s>strong,.sc-stzh-text-h .sc-stzh-text-s b,.sc-stzh-text-h .sc-stzh-text-s strong{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.sc-stzh-text-h .sc-stzh-text-s>i,.sc-stzh-text-h .sc-stzh-text-s>em,.sc-stzh-text-h .sc-stzh-text-s i,.sc-stzh-text-h .sc-stzh-text-s em{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}[lead].sc-stzh-text-h:not([lead=false]){--color:var(--stzh-base-lead-color)}[color=primary].sc-stzh-text-h{--color:var(--stzh-color-primary70)}[color=secondary].sc-stzh-text-h{--color:var(--stzh-color-secondary60)}[color=info].sc-stzh-text-h{--color:var(--stzh-text-info-color)}[color=inherit].sc-stzh-text-h{--color:initial}.stzh-text.sc-stzh-text{--stzh-icon-size:var(--icon-size);--stzh-icon-vertical-align:var(--icon-vertical-align);--stzh-list-font-size:"";--stzh-list-line-height:"";--stzh-list-letter-spacing:"";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);-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:var(--display);grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns);color:var(--color)}@media screen and (min-width: 900px){.stzh-text.sc-stzh-text{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)}}@media screen and (min-width: 600px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-text.sc-stzh-text{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-text__text.sc-stzh-text{grid-area:text;display:flex}.stzh-text__icon.sc-stzh-text{flex-shrink:0}.stzh-text__icon.sc-stzh-text:not(:empty){margin-right:0.25em}.stzh-text__text-inner.sc-stzh-text{flex-grow:1}.stzh-text--is-lead.sc-stzh-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-lead-line-height, var(--stzh-font-milli-lead-line-height));letter-spacing:var(--stzh-font-curve-lead-default-lead-letter-spacing)}@media screen and (min-width: 1260px){.stzh-text--is-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-lead-line-height, var(--stzh-font-deci-lead-line-height));letter-spacing:var(--stzh-font-curve-lead-large-lead-letter-spacing)}}.stzh-text--font-light.sc-stzh-text{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:var(--stzh-font-style-light)}.stzh-text--font-regular.sc-stzh-text{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-text--font-medium.sc-stzh-text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-text--font-medium-italic.sc-stzh-text{font-family:var(--stzh-font-family-medium-italic);font-weight:var(--stzh-font-weight-medium-italic);font-style:var(--stzh-font-style-medium-italic)}.stzh-text--font-heavy.sc-stzh-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-text--font-title.sc-stzh-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title)}.stzh-text--curve-none.sc-stzh-text{font-size:inherit}.stzh-text--curve-caption.sc-stzh-text{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-text--curve-caption.sc-stzh-text{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-text--curve-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-lead-default-text-letter-spacing)}@media screen and (min-width: 1260px){.stzh-text--curve-lead.sc-stzh-text{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-lead-large-text-letter-spacing)}}.stzh-text--curve-p2.sc-stzh-text{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))}@media screen and (min-width: 900px){.stzh-text--curve-p2.sc-stzh-text{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-text--curve-p1.sc-stzh-text{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing)}@media screen and (min-width: 900px){.stzh-text--curve-p1.sc-stzh-text{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-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--curve-h4.sc-stzh-text{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h3-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h3-small-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h3.sc-stzh-text{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h2-default-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h2.sc-stzh-text{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-text-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-text-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h1.sc-stzh-text{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-default-text-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-text-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-hero-small-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-large-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-hero.sc-stzh-text{font-size:var(--stzh-font-curve-hero-ultra-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-ultra-text-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-ultra-text-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-default-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1home-default-text-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-default-text-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-small-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1home-small-text-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-small-text-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-medium-font-size, var(--stzh-font-peta-font-size));line-height:var(--stzh-font-curve-h1home-medium-text-line-height, var(--stzh-font-peta-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-medium-text-letter-spacing, var(--stzh-font-peta-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-large-font-size, var(--stzh-font-exa-font-size));line-height:var(--stzh-font-curve-h1home-large-text-line-height, var(--stzh-font-exa-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-large-text-letter-spacing, var(--stzh-font-exa-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-text--curve-h1home.sc-stzh-text{font-size:var(--stzh-font-curve-h1home-ultra-font-size, var(--stzh-font-zetta-font-size));line-height:var(--stzh-font-curve-h1home-ultra-text-line-height, var(--stzh-font-zetta-text-line-height));letter-spacing:var(--stzh-font-curve-h1home-ultra-text-letter-spacing, var(--stzh-font-zetta-text-letter-spacing))}}.stzh-text--size-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}.stzh-text--size-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-text--size-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-text--size-milli.sc-stzh-text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-centi.sc-stzh-text{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-text--size-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-text--size-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}.stzh-text--size-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}.stzh-text--size-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}.stzh-text--size-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}.stzh-text--size-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}.stzh-text--size-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}.stzh-text--size-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}.stzh-text--size-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}.stzh-text--size-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}@media screen and (min-width: 600px){.stzh-text--size-small-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 600px){.stzh-text--size-small-milli.sc-stzh-text{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: 600px){.stzh-text--size-small-centi.sc-stzh-text{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)}}@media screen and (min-width: 600px){.stzh-text--size-small-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-text--size-small-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 900px){.stzh-text--size-medium-milli.sc-stzh-text{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-text--size-medium-centi.sc-stzh-text{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)}}@media screen and (min-width: 900px){.stzh-text--size-medium-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}}@media screen and (min-width: 900px){.stzh-text--size-medium-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1260px){.stzh-text--size-large-milli.sc-stzh-text{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: 1260px){.stzh-text--size-large-centi.sc-stzh-text{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)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-text--size-large-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-femto.sc-stzh-text{font-size:var(--stzh-font-femto-font-size);line-height:var(--stzh-font-femto-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-pico.sc-stzh-text{font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-nano.sc-stzh-text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-micro.sc-stzh-text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-milli.sc-stzh-text{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: 1600px){.stzh-text--size-ultra-centi.sc-stzh-text{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)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-deci.sc-stzh-text{font-size:var(--stzh-font-deci-font-size);line-height:var(--stzh-font-deci-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-regular.sc-stzh-text{font-size:var(--stzh-font-regular-font-size);line-height:var(--stzh-font-regular-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-deca.sc-stzh-text{font-size:var(--stzh-font-deca-font-size);line-height:var(--stzh-font-deca-text-line-height);letter-spacing:var(--stzh-font-deca-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-hecto.sc-stzh-text{font-size:var(--stzh-font-hecto-font-size);line-height:var(--stzh-font-hecto-text-line-height);letter-spacing:var(--stzh-font-hecto-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-kilo.sc-stzh-text{font-size:var(--stzh-font-kilo-font-size);line-height:var(--stzh-font-kilo-text-line-height);letter-spacing:var(--stzh-font-kilo-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-mega.sc-stzh-text{font-size:var(--stzh-font-mega-font-size);line-height:var(--stzh-font-mega-text-line-height);letter-spacing:var(--stzh-font-mega-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-giga.sc-stzh-text{font-size:var(--stzh-font-giga-font-size);line-height:var(--stzh-font-giga-text-line-height);letter-spacing:var(--stzh-font-giga-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-hero.sc-stzh-text{font-size:var(--stzh-font-hero-font-size);line-height:var(--stzh-font-hero-text-line-height);letter-spacing:var(--stzh-font-hero-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-peta.sc-stzh-text{font-size:var(--stzh-font-peta-font-size);line-height:var(--stzh-font-peta-text-line-height);letter-spacing:var(--stzh-font-peta-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-exa.sc-stzh-text{font-size:var(--stzh-font-exa-font-size);line-height:var(--stzh-font-exa-text-line-height);letter-spacing:var(--stzh-font-exa-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-text--size-ultra-zetta.sc-stzh-text{font-size:var(--stzh-font-zetta-font-size);line-height:var(--stzh-font-zetta-text-line-height);letter-spacing:var(--stzh-font-zetta-text-letter-spacing)}}';const n=class{constructor(e){t(this,e);this.font="default";this.curve="default";this.lead=false;this.color="default";this.size="inherit";this.sizeSmall="inherit";this.sizeMedium="inherit";this.sizeLarge="inherit";this.sizeUltra="inherit"}render(){return e(i,null,e("div",{class:{"stzh-text":true,"stzh-text--is-lead":this.lead,[`stzh-text--font-${this.font}`]:!!this.font,[`stzh-text--curve-${this.curve}`]:!!this.curve,[`stzh-text--size-${this.size}`]:!!this.size,[`stzh-text--size-small-${this.sizeSmall}`]:!!this.sizeSmall,[`stzh-text--size-medium-${this.sizeMedium}`]:!!this.sizeMedium,[`stzh-text--size-large-${this.sizeLarge}`]:!!this.sizeLarge,[`stzh-text--size-ultra-${this.sizeUltra}`]:!!this.sizeUltra}},e("div",{class:"stzh-text__text"},e("div",{class:"stzh-text__icon"},e("slot",{name:"icon"})),e("div",{class:"stzh-text__text-inner"},e("slot",null)))))}};n.style=s;export{n as stzh_text};
2	+ //# sourceMappingURL=p-7bb2eb4e.entry.js.map

package/dist/stzh-components/p-7bb2eb4e.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhTextCss","StzhText","render","h","Host","class","this","lead","font","curve","size","sizeSmall","sizeMedium","sizeLarge","sizeUltra","name"],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/**\n * @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n *\n * @prop --stzh-base-color: **Global**: Text color\n * @prop --stzh-base-lead-color: **Global**: Lead text color\n */\n\n:host {\n --icon-size: 1.25em;\n --icon-vertical-align: text-bottom;\n --color: #{$baseColor};\n --display: var(--stzh-text-display, block);\n\n width: 100%;\n color: var(--color);\n\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n ::slotted(*:first-child) {\n margin-top: 0 !important;\n }\n\n ::slotted(*:last-child) {\n margin-bottom: 0 !important;\n }\n\n ::slotted(a),\n ::slotted(* a) {\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n &:hover {\n color: $linkHoverColor;\n text-decoration-line: $linkHoverTextDecorationLine;\n\n @media (hover: none) {\n color: inherit;\n }\n }\n\n }\n\n ::slotted(b),\n ::slotted(strong),\n ::slotted(* b),\n ::slotted(* strong) {\n @include font('heavy');\n }\n\n ::slotted(i),\n ::slotted(em),\n ::slotted(* i),\n ::slotted(* em) {\n @include font;\n }\n\n &[lead]:not([lead=\"false\"]) {\n --color: #{$baseLeadColor};\n }\n\n &[color=\"primary\"] {\n --color: #{$colorPrimary70};\n }\n\n &[color=\"secondary\"] {\n --color: #{$colorSecondary60};\n }\n\n &[color=\"info\"] {\n --color: #{$textInfoColor};\n }\n\n &[color=\"inherit\"] {\n --color: initial;\n }\n}\n\n.stzh-text {\n --stzh-icon-size: var(--icon-size);\n --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n --stzh-list-font-size: \"\";\n --stzh-list-line-height: \"\";\n --stzh-list-letter-spacing: \"\";\n\n // default font styling without attributes\n @include fontCurve($textFontCurveDefault);\n @include gridGutter;\n display: var(--display);\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n color: var(--color);\n\n &__text {\n grid-area: text;\n display: flex;\n }\n\n &__icon {\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: 0.25em;\n }\n }\n\n &__text-inner {\n flex-grow: 1;\n }\n\n /* Lead variant */\n\n &--is-lead {\n @include font('heavy');\n @include fontCurve('lead', 'lead');\n }\n\n /* Font variants */\n\n @each $font, $value in $fonts {\n &--font-#{$font} {\n @include font($font);\n }\n }\n\n /* Curve variants */\n\n &--curve-none {\n font-size: inherit;\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName);\n }\n }\n\n /* Size variants when consumer wants to overwrite predefined font curves */\n\n @each $size, $value in $fontSizes {\n &--size-#{$size} {\n @include fontSize($size);\n }\n }\n\n @each $breakpoint, $size in $breakpoints {\n @each $size, $value in $fontSizes {\n &--size-#{$breakpoint}-#{$size} {\n @include mq($from: $breakpoint) {\n @include fontSize($size);\n }\n }\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/**\n * @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n */\n@Component({\n tag: \"stzh-text\",\n styleUrl: \"stzh-text.scss\",\n scoped: true\n})\nexport class StzhText {\n /** Font used */\n @Prop() font: Font.Fonts = \"default\";\n\n /** Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n /** Whether if text is lead text */\n @Prop({ reflect: true }) lead: boolean = false;\n\n /** Color used */\n @Prop({ reflect: true }) color: \"default\" | \"primary\" | \"secondary\" | \"info\" | \"inherit\" = \"default\";\n\n /** Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() size: Font.Sizes | \"inherit\" = \"inherit\";\n /** Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeSmall: Font.Sizes | \"inherit\" = \"inherit\";\n /** Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeMedium: Font.Sizes | \"inherit\" = \"inherit\";\n /** Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeLarge: Font.Sizes | \"inherit\" = \"inherit\";\n /** Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeUltra: Font.Sizes | \"inherit\" = \"inherit\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-text\": true,\n \"stzh-text--is-lead\": this.lead,\n [`stzh-text--font-${this.font}`]: !!this.font,\n [`stzh-text--curve-${this.curve}`]: !!this.curve,\n [`stzh-text--size-${this.size}`]: !!this.size,\n [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n }}\n >\n <div class=\"stzh-text__text\">\n <div class=\"stzh-text__icon\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"stzh-text__text-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,07oC,MCkBPC,EAAQ,M,mCAEQ,U,WAGmB,U,UAGL,M,WAGkD,U,UAGpD,U,eAEK,U,gBAEC,U,eAED,U,eAEA,S,CAE5C,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,YAAa,KACb,qBAAsBC,KAAKC,KAC3B,CAAC,mBAAmBD,KAAKE,UAAWF,KAAKE,KACzC,CAAC,oBAAoBF,KAAKG,WAAYH,KAAKG,MAC3C,CAAC,mBAAmBH,KAAKI,UAAWJ,KAAKI,KACzC,CAAC,yBAAyBJ,KAAKK,eAAgBL,KAAKK,UACpD,CAAC,0BAA0BL,KAAKM,gBAAiBN,KAAKM,WACtD,CAAC,yBAAyBN,KAAKO,eAAgBP,KAAKO,UACpD,CAAC,yBAAyBP,KAAKQ,eAAgBR,KAAKQ,YAGtDX,EAAA,OAAKE,MAAM,mBACTF,EAAA,OAAKE,MAAM,mBACTF,EAAA,QAAMY,KAAK,UAEbZ,EAAA,OAAKE,MAAM,yBACTF,EAAA,gB"}

package/dist/stzh-components/p-8c4d543d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as r,h as e,a as i,g as o}from"./p-c7bfac7a.js";const h='.sc-stzh-chip-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-chip-h{display:none}.sc-stzh-chip-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chip-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chip-h .sc-stzh-chip,.sc-stzh-chip-h .sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::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-chip-h .has-focus.sc-stzh-chip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip{outline-style:none !important}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip::-moz-focus-inner{border:0 !important}.sc-stzh-chip-h{--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem;--color:var(--stzh-chip-color, var(--stzh-color-primary70));--remove-color:var(--color);--remove-border-radius:1.5rem;--background-color:var(--stzh-chip-background-color, var(--stzh-color-secondary30));--icon-size:var(--stzh-icon-size-xsmall);--icon-color:var(--color);--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--color);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-chip-hover-color, var(--stzh-color-primary70));--hover-background-color:var(--stzh-chip-hover-background-color, var(--stzh-color-secondary40));--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--stzh-color-primary30);--hover-icon-color:var(--hover-color);--hover-counter-color:var(--hover-color);display:inline-flex}@media screen and (min-width: 900px){.sc-stzh-chip-h{--outer-height:auto}}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-background-color:Canvas;--hover-remove-background-color:Canvas}}[variant=input].sc-stzh-chip-h{--background-color:var(--stzh-color-primary10);--hover-color:var(--stzh-color-primary90);--hover-background-color:var(--stzh-color-primary20)}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-color-grey90);--background-color:var(--stzh-color-grey20);--hover-color:var(--stzh-color-grey90);--hover-background-color:var(--stzh-color-grey20)}[variant=input].sc-stzh-chip-h:where([size="small"]){--icon-gap:var(--stzh-space-xxsmall)}[variant=tag].sc-stzh-chip-h:where([size="small"]){--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag].sc-stzh-chip-h:where([type="warning"]){--color:var(--stzh-color-warning90);--hover-color:var(--stzh-color-warning90)}[variant=tag].sc-stzh-chip-h:where([type="error"]){--color:var(--stzh-color-error70);--hover-color:var(--stzh-color-error70)}[variant=tag].sc-stzh-chip-h:where([type="success"]){--color:var(--stzh-color-success70);--hover-color:var(--stzh-color-success70)}[variant=tag].sc-stzh-chip-h:where([inverted]:not([inverted="false"])){--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);--hover-color:var(--stzh-color-white);--hover-background-color:var(--stzh-color-grey90)}[variant=tag].sc-stzh-chip-h:where([type="warning"][inverted]:not([inverted="false"])){--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60);--hover-color:var(--stzh-color-black);--hover-background-color:var(--stzh-color-warning60)}[variant=tag].sc-stzh-chip-h:where([type="error"][inverted]:not([inverted="false"])){--background-color:var(--stzh-color-error70);--hover-background-color:var(--stzh-color-error70)}[variant=tag].sc-stzh-chip-h:where([type="success"][inverted]:not([inverted="false"])){--background-color:var(--stzh-color-success70);--hover-background-color:var(--stzh-color-success70)}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-chip-active-color, var(--stzh-color-white));--background-color:var(--stzh-chip-active-background-color, var(--stzh-color-primary70));--hover-color:var(--stzh-chip-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-chip-active-hover-background-color, var(--stzh-color-primary90));--hover-remove-background-color:var(--stzh-color-primary90)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:Highlight;--background-color:Canvas;--hover-color:Highlight;--hover-background-color:Canvas;--hover-remove-background-color:Canvas}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-background-color:var(--background-color);--hover-remove-color:var(--remove-color);--hover-remove-background-color:transparent;--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-chip-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-chip-disabled-background-color, var(--stzh-color-grey20));--remove-color:var(--color);--icon-color:var(--color);--counter-color:var(--color);--hover-color:var(--color);--hover-background-color:var(--background-color);--hover-remove-color:var(--remove-color);--hover-remove-background-color:transparent;--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[variant=input][disabled].sc-stzh-chip-h:not([disabled=false]){--background-color:var(--stzh-color-grey10)}.sc-stzh-chip-h:where([size="small"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}.sc-stzh-chip-h:where([size="large"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.sc-stzh-chip-h:where([size-small="default"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 600px) and (min-width: 900px){.sc-stzh-chip-h:where([size-small="default"]){--outer-height:auto}}@media screen and (min-width: 600px){.sc-stzh-chip-h:where([size-small="small"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}}@media screen and (min-width: 600px){.sc-stzh-chip-h:where([size-small="large"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 900px){.sc-stzh-chip-h:where([size-medium="default"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 900px) and (min-width: 900px){.sc-stzh-chip-h:where([size-medium="default"]){--outer-height:auto}}@media screen and (min-width: 900px){.sc-stzh-chip-h:where([size-medium="small"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}}@media screen and (min-width: 900px){.sc-stzh-chip-h:where([size-medium="large"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.sc-stzh-chip-h:where([size-large="default"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 1260px) and (min-width: 900px){.sc-stzh-chip-h:where([size-large="default"]){--outer-height:auto}}@media screen and (min-width: 1260px){.sc-stzh-chip-h:where([size-large="small"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}}@media screen and (min-width: 1260px){.sc-stzh-chip-h:where([size-large="large"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1600px){.sc-stzh-chip-h:where([size-ultra="default"]){--font-size:var(--stzh-font-micro-font-size);--line-height:var(--stzh-font-micro-text-line-height);--letter-spacing:normal;--height:2rem;--outer-height:2.5rem;--padding-top:0;--padding-bottom:0;--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--border-radius:1rem}}@media screen and (min-width: 1600px) and (min-width: 900px){.sc-stzh-chip-h:where([size-ultra="default"]){--outer-height:auto}}@media screen and (min-width: 1600px){.sc-stzh-chip-h:where([size-ultra="small"]){--font-size:var(--stzh-font-nano-font-size);--line-height:var(--stzh-font-nano-text-line-height);--letter-spacing:normal;--height:1.5rem;--border-radius:0.75rem;--padding-left:var(--stzh-space-xsmall);--padding-right:var(--stzh-space-xsmall)}}@media screen and (min-width: 1600px){.sc-stzh-chip-h:where([size-ultra="large"]){--height:2.5rem;--border-radius:1.25rem;--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium)}}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{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-chip__button.sc-stzh-chip{font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);min-height:var(--outer-height);font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0px;border:none;background-color:transparent}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__button-inner.sc-stzh-chip{height:var(--height);display:flex;flex-direction:row;align-items:center;border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);color:var(--color);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{--stzh-icon-size:var(--icon-size);display:flex;color:var(--icon-color);transition:color var(--stzh-base-transition-animation-speed);flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:50%;transform:translateY(-50%);right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:flex;justify-content:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__button-inner.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__button-inner.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button-inner.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}';const s=class{constructor(e){t(this,e);this.stzhClick=r(this,"stzhClick",7);this.stzhRemove=r(this,"stzhRemove",7);this.stzhFocus=r(this,"stzhFocus",7);this.stzhBlur=r(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=()=>{if(!this.focusedByInput){this.chip.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const r=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(r);this.stzhFocus.emit({component:"stzh-chip",originalEvent:t})};this.onBlur=t=>{const r=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(r);this.stzhBlur.emit({component:"stzh-chip",originalEvent:t})};this.onClick=t=>{this.stzhClick.emit({component:"stzh-chip",originalEvent:t,href:this.href})};this.onRemoveClick=t=>{this.stzhRemove.emit({component:"stzh-chip",originalEvent:t})};this.label="";this.icon=undefined;this.href="";this.target="";this.nonInteractive=false;this.removable=false;this.inverted=false;this.variant="tag";this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.type="default";this.counter="";this.removeLabel="";this.active=false;this.disabled=false;this.a11yTabindex=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.analyticsId=undefined;this.removeAnalyticsId=undefined}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.chip)===null\|\|t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId\|\|this.text.innerText)}))}renderInner(){return e("div",{class:"stzh-chip__button-inner"},e("div",{class:"stzh-chip__icon-wrapper"},this.icon\|\|typeof this.icon==="undefined"&&this.variant==="tag"&&this.type!=="default"?e("stzh-icon",{class:"stzh-chip__icon",name:this.icon\|\|this.type==="info"&&"info-help"\|\|this.type==="warning"&&"important-warning"\|\|this.type==="error"&&"warning"\|\|this.type==="success"&&"checkmark-circle"}):e("slot",{name:"icon"})),e("stzh-clamp",{lines:1,class:"stzh-chip__label",ref:t=>this.text=t},this.label?this.label:e("slot",null),this.counter&&this.counter!=="undefined"&&this.counter!==undefined&&e("span",{class:"stzh-chip__vhidden"}," (",this.counter,")")),this.counter&&this.counter!=="undefined"&&this.counter!==undefined&&e("div",{class:"stzh-chip__counter","aria-hidden":"true"},this.counter))}render(){const t={"stzh-chip":true,"stzh-chip--is-active":this.active,"stzh-chip--is-disabled":this.disabled,"stzh-chip--is-removable":this.removable,"stzh-chip--is-inverted":this.inverted,"stzh-chip--has-counter":!!this.counter,[`stzh-chip--type-${this.type}`]:!!this.type,[`stzh-chip--size-${this.size}`]:!!this.size,[`stzh-chip--${this.variant}`]:!!this.variant};const r=this.nonInteractive?"div":this.href?"a":"button";return e(i,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},e("div",{class:t},this.removable&&e("button",{class:"stzh-chip__remove",onClick:this.onRemoveClick,disabled:this.disabled,"aria-label":this.removeLabel,type:"button","s-object-id":this.removeAnalyticsId\|\|this.removeLabel},e("stzh-icon",{class:"stzh-chip__remove-icon",name:"close-big"})),this.href?e(r,{ref:t=>this.chip=t,class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},href:this.disabled?null:this.href,target:this.target,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel\|\|null,"aria-describedby":this.a11yDescribedby\|\|null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner()):e(r,{ref:t=>this.chip=t,class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},disabled:this.disabled,type:"button",tabindex:this.a11yTabindex,"aria-label":this.a11yLabel\|\|null,"aria-describedby":this.a11yDescribedby\|\|null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner())))}get element(){return o(this)}};s.style=h;export{s as stzh_chip};
2	+ //# sourceMappingURL=p-8c4d543d.entry.js.map

package/dist/stzh-components/p-8c4d543d.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhChipCss","StzhChip","this","focusedByInput","onRootFocus","chip","focus","onFocus","event","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","emit","component","originalEvent","onBlur","blurEvent","stzhBlur","onClick","stzhClick","href","onRemoveClick","stzhRemove","componentDidRender","requestAnimationFrame","_a","setAttribute","analyticsId","text","innerText","renderInner","h","class","icon","variant","type","name","lines","ref","el","label","counter","undefined","render","classes","active","disabled","removable","inverted","size","Chip","nonInteractive","Host","tabindex","removeLabel","removeAnalyticsId","target","a11yTabindex","a11yLabel","a11yDescribedby"],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":["@mixin chip--size-default() {\n --font-size: var(--stzh-font-micro-font-size);\n --line-height: var(--stzh-font-micro-text-line-height);\n --letter-spacing: normal;\n\n --height: 32px;\n --outer-height: 40px;\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: #{space('small')};\n --padding-right: #{space('small')};\n --border-radius: 16px;\n\n @include mq($from: medium) {\n --outer-height: auto;\n }\n}\n\n@mixin chip--size-large() {\n --height: 40px;\n --border-radius: 20px;\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n}\n\n@mixin chip--size-small() {\n --font-size: var(--stzh-font-nano-font-size);\n --line-height: var(--stzh-font-nano-text-line-height);\n --letter-spacing: normal;\n\n --height: 24px;\n --border-radius: 12px;\n --padding-left: #{space('xsmall')};\n --padding-right: #{space('xsmall')};\n}\n\n:host {\n @include chip--size-default;\n --color: var(--stzh-chip-color, #{$colorPrimary70});\n --remove-color: var(--color);\n --remove-border-radius: 24px;\n --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n --icon-size: #{iconSize('xsmall')};\n --icon-color: var(--color);\n --icon-gap: #{space('xsmall')};\n --counter-color: var(--color);\n --counter-gap: #{space('xsmall')};\n\n --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n --hover-background-color: var(--stzh-chip-hover-background-color, #{$colorSecondary40});\n --hover-remove-color: var(--hover-color);\n --hover-remove-background-color: #{$colorPrimary30};\n --hover-icon-color: var(--hover-color);\n --hover-counter-color: var(--hover-color);\n\n display: inline-flex;\n\n @include highContrast() {\n --hover-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-background-color: Canvas;\n }\n\n &[variant=\"input\"] {\n --background-color: #{$colorPrimary10};\n\n --hover-color: #{$colorPrimary90};\n --hover-background-color: #{$colorPrimary20};\n }\n\n &[variant=\"tag\"] {\n --color: #{$colorGrey90};\n --background-color: #{$colorGrey20};\n\n --hover-color: #{$colorGrey90};\n --hover-background-color: #{$colorGrey20};\n }\n\n &[variant=\"input\"]:where([size=\"small\"]) {\n --icon-gap: #{space('xxsmall')};\n }\n\n &[variant=\"tag\"]:where([size=\"small\"]) {\n --padding-left: #{space('xsmall')};\n --padding-right: #{space('xsmall')};\n --icon-gap: #{space('xxsmall')};\n }\n\n &[variant=\"tag\"]:where([type=\"warning\"]) {\n --color: #{$colorWarning90};\n\n --hover-color: #{$colorWarning90};\n }\n\n &[variant=\"tag\"]:where([type=\"error\"]) {\n --color: #{$colorError70};\n\n --hover-color: #{$colorError70};\n }\n\n &[variant=\"tag\"]:where([type=\"success\"]) {\n --color: #{$colorSuccess70};\n\n --hover-color: #{$colorSuccess70};\n }\n\n &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey90};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorGrey90};\n }\n\n &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n --color: #{$colorBlack};\n --background-color: #{$colorWarning60};\n\n --hover-color: #{$colorBlack};\n --hover-background-color: #{$colorWarning60};\n }\n\n &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n --background-color: #{$colorError70};\n\n --hover-background-color: #{$colorError70};\n }\n\n &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n --background-color: #{$colorSuccess70};\n\n --hover-background-color: #{$colorSuccess70};\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--stzh-chip-active-color, #{$colorWhite});\n --background-color: var(--stzh-chip-active-background-color, #{$colorPrimary70});\n\n --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-chip-active-hover-background-color, #{$colorPrimary90});\n --hover-remove-background-color: #{$colorPrimary90};\n\n @include highContrast() {\n --color: Highlight;\n --background-color: Canvas;\n\n --hover-color: Highlight;\n --hover-background-color: Canvas;\n --hover-remove-background-color: Canvas;\n }\n }\n\n &[non-interactive]:not([non-interactive=\"false\"]) {\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n --hover-remove-color: var(--remove-color);\n --hover-remove-background-color: transparent;\n --hover-icon-color: var(--icon-color);\n --hover-counter-color: var(--counter-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: var(--stzh-chip-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-chip-disabled-background-color, #{$colorGrey20});\n --remove-color: var(--color);\n --icon-color: var(--color);\n --counter-color: var(--color);\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n --hover-remove-color: var(--remove-color);\n --hover-remove-background-color: transparent;\n --hover-icon-color: var(--icon-color);\n --hover-counter-color: var(--counter-color);\n }\n\n &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n --background-color: #{$colorGrey10};\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include chip--size-small;\n}\n\n:host(:where([size=\"large\"])) {\n @include chip--size-large;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include chip--size-default;\n }\n\n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include chip--size-small;\n }\n\n :host(:where([size-#{$breakpoint}=\"large\"])) {\n @include chip--size-large;\n }\n }\n}\n\n.stzh-chip {\n position: relative;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__button {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n min-height: var(--outer-height);\n font-family: inherit;\n appearance: none;\n padding: 0px;\n border: none;\n background-color: transparent;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__button-inner {\n height: var(--height);\n display: flex;\n flex-direction: row;\n align-items: center;\n border-radius: var(--border-radius);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color;\n text-decoration-line: none;\n }\n\n &__label {\n text-align: left;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n\n display: flex;\n color: var(--icon-color);\n transition: color $baseTransitionAnimationSpeed;\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: var(--icon-gap);\n }\n }\n\n &__counter {\n display: flex;\n font-variant-numeric: tabular-nums;\n margin-left: var(--counter-gap);\n color: var(--counter-color);\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__remove {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 0;\n appearance: none;\n font-family: inherit;\n border: none;\n background: none;\n padding: 0;\n width: var(--height);\n height: var(--height);\n border-radius: var(--remove-border-radius);\n display: flex;\n justify-content: center;\n align-items: center;\n margin-left: space('xxsmall');\n color: var(--remove-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-remove-color);\n background-color: var(--hover-remove-background-color);\n }\n }\n\n &__remove-icon {\n --size: #{iconSize('xxsmall')};\n }\n\n &__button:hover &__button-inner,\n &__remove:hover + &__button &__button-inner {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n &__button:hover &__counter,\n &__remove:hover + &__button &__counter {\n color: var(--hover-counter-color);\n }\n\n &__button:hover &__icon-wrapper,\n &__remove:hover + &__button &__icon-wrapper {\n color: var(--hover-icon-color);\n }\n\n /* Removeable */\n\n &--is-removable &__button-inner {\n padding-right: calc(var(--height) + #{space('xxsmall')});\n }\n\n /* Disabled */\n\n &--is-disabled &__button,\n &--is-disabled &__remove {\n cursor: not-allowed;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\n\nimport {\n StzhChipBlurEvent,\n StzhChipClickEvent,\n StzhChipFocusEvent,\n StzhChipRemoveEvent,\n StzhChipSize,\n StzhChipType,\n StzhChipVariant,\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n tag: \"stzh-chip\",\n styleUrl: \"stzh-chip.scss\",\n scoped: true,\n})\nexport class StzhChip {\n /** Label */\n @Prop() label: string = \"\";\n\n /** Icon (use instead of icon slot) */\n @Prop() icon: string;\n\n /** `href` if the chip should be used as link */\n @Prop() href: string = \"\";\n\n /** Target if the button is used as link (if `href` used) */\n @Prop() target: string = \"\";\n\n /** Whether chip is not interactive */\n @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n /** Whether remove button should be shown */\n @Prop({ reflect: true }) removable: boolean = false;\n\n /** Whether inverted style is shown (only available for `tag` variant) */\n @Prop({ reflect: true }) inverted: boolean = false;\n\n /** Variant */\n @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n /** Size */\n @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n /** Size variant (above small breakpoint) */\n @Prop({ reflect: true }) sizeSmall: StzhChipSize;\n\n /** Size variant (above medium breakpoint) */\n @Prop({ reflect: true }) sizeMedium: StzhChipSize;\n\n /** Size variant (above large breakpoint) */\n @Prop({ reflect: true }) sizeLarge: StzhChipSize;\n\n /** Size variant (above ultra breakpoint) */\n @Prop({ reflect: true }) sizeUltra: StzhChipSize;\n\n /** Type */\n @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n /** Counter */\n @Prop() counter: string = \"\";\n\n /** Label of remove button for screenreaders */\n @Prop() removeLabel: string = \"\";\n\n /** Active */\n @Prop({ reflect: true }) active: boolean = false;\n\n /** Disabled */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Tabindex of link/button */\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /** Accessible label for screen readers to replace visible text */\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /** Id for element which describes the link/button */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the remove button element.\n * Default value will be taken from `removeLabel` prop.\n */\n @Prop() removeAnalyticsId: string;\n\n @Element() element: HTMLStzhChipElement;\n\n /** Chip click event */\n @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n /** Chip remove event */\n @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n private chip: HTMLButtonElement | HTMLAnchorElement;\n private text: HTMLElement;\n private focusedByInput: boolean = false;\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n private renderInner(): DocumentFragment {\n return (\n <div class=\"stzh-chip__button-inner\">\n <div class=\"stzh-chip__icon-wrapper\">\n {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ? (\n <stzh-icon\n class=\"stzh-chip__icon\"\n name={\n this.icon ||\n (this.type === \"info\" && \"info-help\") ||\n (this.type === \"warning\" && \"important-warning\") ||\n (this.type === \"error\" && \"warning\") ||\n (this.type === \"success\" && \"checkmark-circle\")\n }\n ></stzh-icon>\n ) : (\n <slot name=\"icon\"></slot>\n )}\n </div>\n\n <stzh-clamp lines={1} class=\"stzh-chip__label\" ref={el => (this.text = el as HTMLElement)}>\n {this.label ? this.label : <slot></slot>}\n {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n <span class=\"stzh-chip__vhidden\"> ({this.counter})</span>\n )}\n </stzh-clamp>\n\n {this.counter && this.counter !== \"undefined\" && this.counter !== undefined && (\n <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n {this.counter}\n </div>\n )}\n </div>\n );\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.chip.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-chip\",\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-chip\",\n originalEvent: event,\n });\n };\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-chip\",\n originalEvent: event,\n href: this.href,\n });\n };\n\n private onRemoveClick = (event: MouseEvent) => {\n this.stzhRemove.emit({\n component: \"stzh-chip\",\n originalEvent: event,\n });\n };\n\n render() {\n const classes = {\n \"stzh-chip\": true,\n \"stzh-chip--is-active\": this.active,\n \"stzh-chip--is-disabled\": this.disabled,\n \"stzh-chip--is-removable\": this.removable,\n \"stzh-chip--is-inverted\": this.inverted,\n \"stzh-chip--has-counter\": !!this.counter,\n [`stzh-chip--type-${this.type}`]: !!this.type,\n [`stzh-chip--size-${this.size}`]: !!this.size,\n [`stzh-chip--${this.variant}`]: !!this.variant,\n };\n\n const Chip = this.nonInteractive ? \"div\" : this.href ? \"a\" : \"button\";\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n {this.removable && (\n <button\n class=\"stzh-chip__remove\"\n onClick={this.onRemoveClick}\n disabled={this.disabled}\n aria-label={this.removeLabel}\n type=\"button\"\n s-object-id={this.removeAnalyticsId || this.removeLabel}\n >\n <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n </button>\n )}\n\n {this.href ? (\n <Chip\n ref={el => (this.chip = el as HTMLAnchorElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href,\n }}\n href={this.disabled ? null : this.href}\n target={this.target}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n ) : (\n <Chip\n ref={el => (this.chip = el as HTMLButtonElement)}\n class={{\n \"stzh-chip__button\": true,\n \"is-button\": !this.nonInteractive && !this.href,\n \"is-link\": !this.nonInteractive && !!this.href,\n }}\n disabled={this.disabled}\n type=\"button\"\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner()}\n </Chip>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-9506f599.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as a,F as s,a as i,g as r}from"./p-c7bfac7a.js";import{f as n}from"./p-c7f2564a.js";import{m as h,a as d,r as o}from"./p-10e2901a.js";import"./p-7183ba4d.js";const l=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host ,:host ::before,:host ::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--meta-grid-template-areas:"filters" "search" "resultstoggle";--results-grid-template-areas:"map" "list"}@media screen and (min-width: 1260px){:host{--meta-grid-template-areas:"filters filters filters filters filters filters filters filters search search search search";--results-grid-template-areas:"map map map map map map map map list list list list"}}.stzh-geo-ref-data{position:fixed;top:0;right:0;bottom:0;left:0;z-index:899;flex-direction:column;transition:opacity ease 0.2s;background-color:var(--stzh-color-white);display:none;opacity:0;visibility:hidden;pointer-events:none;}.stzh-geo-ref-data--is-open{display:flex;opacity:1;visibility:visible;pointer-events:inherit}.stzh-geo-ref-data__content{overflow:hidden;height:100%}.stzh-geo-ref-data--content-padding{padding-left:1.25rem;padding-right:1.25rem}@media screen and (min-width: 600px){.stzh-geo-ref-data--content-padding{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-geo-ref-data--content-padding{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-geo-ref-data--content-padding{padding-left:2rem;padding-right:2rem}}.stzh-geo-ref-data__heading{display:flex;background-color:var(--stzh-color-secondary20);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-geo-ref-data__heading{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-geo-ref-data__heading{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__heading{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-geo-ref-data__heading{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-geo-ref-data__heading{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__heading{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-geo-ref-data__meta-wrapper{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--stzh-space-large);padding-top:var(--stzh-space-small);padding-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){.stzh-geo-ref-data__meta-wrapper{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-geo-ref-data__meta-wrapper{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--meta-grid-template-areas);grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1260px) and (min-width: 1600px){.stzh-geo-ref-data__meta-wrapper{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-geo-ref-data__meta-wrapper{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-geo-ref-data__meta-wrapper{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-geo-ref-data__filters{grid-area:filters;flex:none;margin-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 1260px){.stzh-geo-ref-data__filters-toggle{display:none}}@media screen and (max-width: 899px){.stzh-geo-ref-data__filters-toggle stzh-chip{--icon-gap:0}}.stzh-geo-ref-data__filters-content{display:none}@media screen and (min-width: 1260px){.stzh-geo-ref-data__filters-content{display:block}}.stzh-geo-ref-data__search{grid-area:search;width:100%}@media screen and (min-width: 1260px){.stzh-geo-ref-data__search{padding-left:0.75rem}}.stzh-geo-ref-data__results-toggle{grid-area:resultstoggle;flex:none;margin-bottom:var(--stzh-space-xxsmall)}@media screen and (min-width: 1260px){.stzh-geo-ref-data__results-toggle{display:none}}.stzh-geo-ref-data__results-wrapper{height:100%}@media screen and (min-width: 1260px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--results-grid-template-areas);--grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1260px) and (min-width: 1600px){.stzh-geo-ref-data__results-wrapper{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-geo-ref-data__results-wrapper{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-geo-ref-data__results-wrapper{grid-template-columns:repeat(12, minmax(0, 1fr))}}@media screen and (max-width: 1259px){.stzh-geo-ref-data__results-wrapper .inactive{visibility:hidden;height:0;position:absolute;overflow:hidden}}.stzh-geo-ref-data__results-map{grid-area:map;position:relative;height:100%}.stzh-geo-ref-data__map-controls{position:absolute;top:var(--stzh-space-small);left:var(--stzh-space-small);background-color:var(--stzh-color-white);padding:var(--stzh-space-xsmall)}.stzh-geo-ref-data__results-list{grid-area:list;padding-left:1.25rem;padding-right:1.25rem;padding-bottom:var(--stzh-space-large);overflow:auto}@media screen and (min-width: 600px){.stzh-geo-ref-data__results-list{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 900px){.stzh-geo-ref-data__results-list{padding-left:2.5rem;padding-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__results-list{padding-left:0;padding-right:2rem;overflow:auto}}.stzh-geo-ref-data__results-list-heading{margin-bottom:var(--stzh-space-medium)}.stzh-geo-ref-data__teaser-list{display:grid;gap:var(--stzh-space-medium);grid-template-columns:1fr}@media screen and (min-width: 600px){.stzh-geo-ref-data__teaser-list{grid-template-columns:1fr 1fr}}@media screen and (min-width: 1260px){.stzh-geo-ref-data__teaser-list{grid-template-columns:1fr}}.stzh-geo-ref-data__teaser-load-more{display:flex;justify-content:center;margin-top:var(--stzh-space-medium)}.stzh-poi-teaser{display:grid;grid-template-columns:minmax(0, 1fr) 11.25rem;height:11.25rem;background-color:var(--stzh-color-grey10);position:relative}.stzh-poi-teaser:hover{cursor:pointer;background-color:var(--stzh-color-secondary10)}.stzh-poi-teaser-content{padding:var(--stzh-space-medium);-webkit-hyphens:auto;hyphens:auto}.stzh-poi-teaser-content stzh-heading{margin-bottom:var(--stzh-space-xsmall)}.stzh-poi-teaser-content stzh-text{--color:var(--stzh-color-grey80)}.stzh-poi-teaser-link{position:absolute;top:0;right:0;bottom:0;left:0}.stzh-poi-teaser-image{position:relative;overflow:hidden}.stzh-poi-teaser-image-inner{position:absolute;inset:0;height:100%}.stzh-poi-teaser-image-inner img{height:11.25rem}.stzh-poi-teaser-list-item{display:flex;gap:var(--stzh-space-small);margin-top:var(--stzh-space-xxsmall)}.stzh-poi-teaser-list-item stzh-icon,.stzh-poi-teaser-list-item stzh-text{--color:var(--stzh-color-grey80)}';const c="stzh-overlay-open";const p=class{constructor(a){t(this,a);this.stzhOverlayCloseClick=e(this,"stzhOverlayCloseClick",7);this._availableTags=[];this.filterResults=[];this.handleOverlayCloseClick=()=>{document.body.classList.remove(c);this.isOpen=false};this.handleResize=async()=>{if(this.metaWrapperElement&&this.metaWrapperElement.clientHeight){this.mapElement.style.height=`calc(100% - ${this.metaWrapperElement.clientHeight}px)`;this.resultsListElement.style.height=`calc(100% - ${this.metaWrapperElement.clientHeight}px)`;const t=await this.mapElement.getMap();t.updateSize()}};this.mediaChangeHandler=()=>{this.isViewportLarge=h("large").matches;this.isViewportMedium=h("medium").matches};this.handleFilterChange=async t=>{if(t.detail.value.length!==0){this.filterResults=this.combinedData.filter((e=>e.tags&&e.tags.some((e=>t.detail.value.includes(e)))));this.filterActive=true}else{this.filterActive=false}await this.combineFilterAndSearchResults()};this.handleExtentVisibilityChange=t=>{this.showOnlyResultsForCurrentExtent=t.detail.checked};this.handleSearchChange=async t=>{if(t.detail.value!==""){if(!this.searchIndex){return}const e=this.searchIndex.search(t.detail.value);const a=e.flatMap((t=>t.result));this.searchResults=new Set(a);this.searchActive=true}else{this.searchActive=false}await this.combineFilterAndSearchResults()};this.toggleViewMode=()=>{if(this.viewmode==="map"){this.viewmode="list"}else{this.viewmode="map"}};this.heading="";this.mapDataUrl="";this.poiDataUrl="";this.baseUrlOverride="https://www.stadt-zuerich.ch";this.availableTags=[];this.resetTag=undefined;this.searchIndexFields=["title","poiname","street","zip","description"];this.searchIndexIdField="poiid";this.filterActive=false;this.searchActive=false;this.showOnlyResultsForCurrentExtent=true;this.finalResults=[];this.finalResultsPaginatedList=[];this.finalResultsPaginationOffset=0;this.viewmode="map";this.isViewportLarge=undefined;this.isViewportMedium=undefined;this.isInitialized=undefined;this.isOpen=undefined;this.isLoading=undefined;this.numberOfItemsToLoad=20;this.canLoadMore=undefined}availableTagsWatcher(t){if(!t){this._availableTags=[]}else if(typeof t==="string"){try{this._availableTags=JSON.parse(t)}catch(t){this._availableTags=[]}}else{this._availableTags=t}}resetTagWatcher(t){if(!t){this._resetTag=undefined}else if(typeof t==="string"){try{this._resetTag=JSON.parse(t)}catch(t){this._resetTag=undefined}}else{this._resetTag=t}}async loadMapData(){if(!this.mapDataUrl){console.log("No map data URL provided");return[]}try{const t=await fetch(this.mapDataUrl);const e=await t.text();const a=(new DOMParser).parseFromString(e,"text/xml");return Array.from(a.querySelectorAll("featureMember")).map((t=>{var e,a;const s=(e=t.querySelector("pos"))===null\|\|e===void 0?void 0:e.textContent;const i=(a=t.querySelector("poi_id"))===null\|\|a===void 0?void 0:a.textContent;const[r,n]=(s===null\|\|s===void 0?void 0:s.split(" "))\|\|[];return{poiid:i,lat:r,lon:n}}))}catch(t){console.error("Error fetching map data:",t)}}async loadPoiData(){if(!this.poiDataUrl){console.error("No POI data URL provided");return[]}try{const t=await fetch(this.poiDataUrl,{credentials:"include"});const e=await t.json();console.log("POI data:",e);return e.items}catch(t){console.error("Error fetching POI data:",t)}}combineData(t,e){if(!t.length\|\|!e.length){console.error("Missing data to combine");return[]}let a;let s;if(t.length<e.length){a=t;s=e}else{a=e;s=t}return a.map((t=>{const e=s.find((e=>e.poiid===t.poiid));return Object.assign(Object.assign({},t),e)})).sort(((t,e)=>{try{return t.title.localeCompare(e.title)}catch(t){return 1}}))}enhanceTags(t,e){return t.sort(((t,e)=>{try{t.label.localeCompare(e.label)}catch(t){return 1}})).map((t=>{const a=e.filter((e=>{try{return e.tags.includes(t.value)}catch(t){return false}})).length.toString();return Object.assign(Object.assign({},t),{counter:a,variant:"filter"})}))}buildSearchIndex(t){if(!t.length){return}this.searchIndex=new n.Document({tokenize:"forward",matcher:{"[äà]":"a","[öó]":"o","[üûúù]":"u","[éè]":"e"},document:{id:this.searchIndexIdField,index:this.searchIndexFields}});t.forEach((t=>{this.searchIndex.add(t)}))}async mapMovedPannedOrZoomed(){if(this.showOnlyResultsForCurrentExtent){const t=await this.mapElement.getVisibleMarkers();console.log("visibleMarkers",t)}}connectedCallback(){this.mediaChangeHandler();d(this.mediaChangeHandler);this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element);this.availableTagsWatcher(this.availableTags);this.resetTagWatcher(this.resetTag)}disconnectedCallback(){o(this.mediaChangeHandler);if(this.resizeObserver){this.resizeObserver.disconnect()}}async initializeAndOpenMap(){document.body.classList.add(c);this.isLoading=true;this.isOpen=true;try{this.combinedData=this.combineData(await this.loadMapData(),await this.loadPoiData());this.enhancedTags=this.enhanceTags(this._availableTags,this.combinedData);this.buildSearchIndex(this.combinedData);const t=Object.assign(Object.assign({},this._resetTag),{counter:this.combinedData.length.toString()});if(this._resetTag){this.enhancedTags.unshift(t)}this.finalResults=this.combinedData;this.finalResultsPaginatedList=this.finalResults.slice(0,this.numberOfItemsToLoad);this.canLoadMore=this.finalResults.length>this.numberOfItemsToLoad;await this.combineFilterAndSearchResults();await this.handleResize();await this.mapElement.updateViewToFitMarkers();await this.handleResize();this.isInitialized=true}catch(t){console.error("mapException",t)}setTimeout((()=>{this.isLoading=false}),500)}async combineFilterAndSearchResults(){if(this.filterActive&&!this.searchActive){this.finalResults=this.filterResults}else if(!this.filterActive&&this.searchActive){this.finalResults=Array.from(this.searchResults).map((t=>this.combinedData.find((e=>e.poiid===t))))}else if(this.filterActive&&this.searchActive){this.finalResults=this.filterResults.filter((t=>this.searchResults.has(t.poiid)))}else{this.finalResults=this.combinedData}this.finalResultsPaginatedList=this.finalResults.slice(0,this.numberOfItemsToLoad);await this.replaceMapMarkers(this.finalResults)}loadMore(){this.finalResultsPaginationOffset++;const t=this.finalResults.slice(this.finalResultsPaginationOffsetthis.numberOfItemsToLoad,this.finalResultsPaginationOffset*this.numberOfItemsToLoad+this.numberOfItemsToLoad);if(!t\|\|!t.length\|\|t.length<this.numberOfItemsToLoad){this.canLoadMore=false}this.finalResultsPaginatedList=this.finalResultsPaginatedList.concat(t)}async replaceMapMarkers(t){await this.mapElement.removeAllIconMarkers();t.filter((t=>!!t.lat&&!!t.lon)).forEach((t=>{this.mapElement.addIconMarker([parseFloat(t.lat),parseFloat(t.lon)],{id:t.poiid,title:t.title,text:t.description,data:t.data,imageUri:`${this.baseUrlOverride}${t.image}`,href:`${this.baseUrlOverride}${t.path}`}).catch()}));if(!this.showOnlyResultsForCurrentExtent){this.mapElement.updateViewToFitMarkers().catch()}}async handlePoiTeaserMouseEnter(t){const e=await this.mapElement.findMarkerById(t.poiid);if(e){await this.mapElement.setIconMarkerActive(e)}}async handlePoiTeaserMouseLeave(t){const e=await this.mapElement.findMarkerById(t.poiid);if(e){await this.mapElement.setIconMarkerInactive(e)}}render(){const t={"stzh-geo-ref-data":true,"stzh-geo-ref-data--is-loading":this.isLoading,"stzh-geo-ref-data--is-open":this.isOpen};return a(i,null,a("div",{class:"stzh-geo-ref-data__trigger",onClick:()=>this.initializeAndOpenMap()},a("slot",{name:"trigger"})),a("stzh-overlay",{open:this.isLoading},a("stzh-loader",{label:"Daten werden geladen..."})),a("div",{class:t},a("div",{class:"stzh-geo-ref-data__header-wrapper"},a("stzh-header",{"hide-metabar":true,sticky:"disabled"},a("slot",{name:"logo",slot:"logo"})),a("div",{class:"stzh-geo-ref-data__heading stzh-geo-ref-data--content-padding"},a("stzh-heading",{class:"stzh-geo-ref-data__heading-heading",curve:"h2"},this.heading),a("stzh-button",{class:"stzh-geo-ref-data__overlay-close",icon:"close",iconOnly:true,size:"small",variant:"tertiary",onClick:this.handleOverlayCloseClick}))),a("div",{class:"stzh-geo-ref-data__content"},a("div",{class:"stzh-geo-ref-data__meta-wrapper stzh-geo-ref-data--content-padding",ref:t=>this.metaWrapperElement=t},a("div",{class:"stzh-geo-ref-data__filters"},a("div",{class:"stzh-geo-ref-data__filters-toggle"},a("stzh-chip",{label:this.isViewportMedium?"Filter":"",variant:"filter",icon:"filtering"})),a("div",{class:"stzh-geo-ref-data__filters-content"},a("stzh-chipselect",{"label-hidden":true,label:"Tags",data:this.enhancedTags,onStzhChange:this.handleFilterChange,multiple:true,defaultValue:[""]}))),a("div",{class:"stzh-geo-ref-data__search"},a("stzh-input",{size:"small",name:"stzh-datatable-search",onStzhChange:this.handleSearchChange,hideOptional:true,label:"Suche",type:"search"})),a("div",{class:"stzh-geo-ref-data__results-toggle"},a("stzh-chip",{onStzhClick:this.toggleViewMode,label:this.viewmode==="map"?"Liste":"Karte",icon:this.viewmode==="map"?"bulleted-list":"map",variant:"filter"}))),a("div",{class:"stzh-geo-ref-data__results-wrapper"},a("div",{class:`stzh-geo-ref-data__results-map ${this.viewmode==="map"?"active":"inactive"}`},a("stzh-olmap",{class:"stzh-geo-ref-data__ol-map",centerMarker:false,ref:t=>this.mapElement=t}),a("div",{class:"stzh-geo-ref-data__map-controls"},a("stzh-checkbox",{label:"Treffer an Kartenaussicht anpassen",checked:this.showOnlyResultsForCurrentExtent,hideOptional:true,onStzhChange:this.handleExtentVisibilityChange}))),a("div",{class:`stzh-geo-ref-data__results-list ${this.viewmode==="list"?"active":"inactive"}`,ref:t=>this.resultsListElement=t},this.finalResults&&a(s,null,a("stzh-text",{class:"stzh-geo-ref-data__results-list-heading"},this.finalResults.length," Treffer"),a("div",{class:"stzh-geo-ref-data__teaser-list"},this.finalResultsPaginatedList.map((t=>a("div",{class:"stzh-poi-teaser",onMouseEnter:()=>this.handlePoiTeaserMouseEnter(t),onMouseLeave:()=>this.handlePoiTeaserMouseLeave(t)},a("a",{class:"stzh-poi-teaser-link",href:this.baseUrlOverride+t.path}),a("div",{class:"stzh-poi-teaser-content"},a("stzh-heading",{curve:"lead"},t.poiname),t.description&&a("stzh-text",{size:"micro"},t.description),t.data&&t.data.length>0&&t.data.map((t=>a("div",{class:"stzh-poi-teaser-list-item"},a("stzh-icon",{name:t.icon}),a("stzh-text",{size:"micro"},t.text))))),a("div",{class:"stzh-poi-teaser-image"},a("stzh-ratio",{ratio:"1:1"}),a("div",{class:"stzh-poi-teaser-image-inner"},a("img",{src:this.baseUrlOverride+t.image,alt:"Foto von "+t.poiname}))))))),this.canLoadMore&&a("div",{class:"stzh-geo-ref-data__teaser-load-more"},a("stzh-button",{onStzhClick:()=>this.loadMore()},"Weitere laden"))))))))}get element(){return r(this)}static get watchers(){return{availableTags:["availableTagsWatcher"],resetTag:["resetTagWatcher"]}}};p.style=l;export{p as stzh_geo_ref_data};
2	+ //# sourceMappingURL=p-9506f599.entry.js.map

package/dist/stzh-components/p-9506f599.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhGeoRefDataCss","CLASS_BODY_OPEN","GeoRefData","this","_availableTags","filterResults","handleOverlayCloseClick","document","body","classList","remove","isOpen","handleResize","async","metaWrapperElement","clientHeight","mapElement","style","height","resultsListElement","map","getMap","updateSize","mediaChangeHandler","isViewportLarge","media","matches","isViewportMedium","handleFilterChange","e","detail","value","length","combinedData","filter","item","tags","some","tag","includes","filterActive","combineFilterAndSearchResults","handleExtentVisibilityChange","showOnlyResultsForCurrentExtent","checked","handleSearchChange","searchIndex","searchResults","search","flatSearchResults","flatMap","field","result","Set","searchActive","toggleViewMode","viewmode","availableTagsWatcher","newValue","JSON","parse","resetTagWatcher","_resetTag","undefined","loadMapData","mapDataUrl","console","log","response","fetch","rawMapData","text","parsedData","DOMParser","parseFromString","Array","from","querySelectorAll","pos","_a","querySelector","textContent","poiid","_b","lat","lon","split","error","loadPoiData","poiDataUrl","credentials","poiData","json","items","combineData","firstArray","secondArray","smallerArray","largerArray","matchingItem","find","largerArrayItem","Object","assign","sort","a","b","title","localeCompare","noTitleException","enhanceTags","availableTags","label","noLabelException","counter","noTagsException","toString","variant","buildSearchIndex","data","Document","tokenize","matcher","id","searchIndexIdField","index","searchIndexFields","forEach","add","mapMovedPannedOrZoomed","visibleMarkers","getVisibleMarkers","connectedCallback","addMediaChangeListener","resizeObserver","ResizeObserver","observe","element","resetTag","disconnectedCallback","removeMediaChangeListener","disconnect","initializeAndOpenMap","isLoading","enhancedTags","enhancedResetTag","unshift","finalResults","finalResultsPaginatedList","slice","numberOfItemsToLoad","canLoadMore","updateViewToFitMarkers","isInitialized","mapException","setTimeout","has","replaceMapMarkers","loadMore","finalResultsPaginationOffset","sliced","concat","removeAllIconMarkers","addIconMarker","parseFloat","description","imageUri","baseUrlOverride","image","href","path","catch","handlePoiTeaserMouseEnter","marker","findMarkerById","setIconMarkerActive","handlePoiTeaserMouseLeave","setIconMarkerInactive","render","classes","h","Host","class","onClick","name","open","sticky","slot","curve","heading","icon","iconOnly","size","ref","el","onStzhChange","multiple","defaultValue","hideOptional","type","onStzhClick","centerMarker","Fragment","onMouseEnter","onMouseLeave","poiname","ratio","src","alt"],"sources":["src/components/stzh-geo-ref-data/stzh-geo-ref-data.scss?tag=stzh-geo-ref-data&encapsulation=shadow","src/components/stzh-geo-ref-data/stzh-geo-ref-data.tsx"],"sourcesContent":[":host {\n --meta-grid-template-areas: \"filters\" \"search\" \"resultstoggle\";\n --results-grid-template-areas: \"map\" \"list\";\n\n @include mq($from: large) {\n --meta-grid-template-areas: \"filters filters filters filters filters filters filters filters search search search search\";\n --results-grid-template-areas: \"map map map map map map map map list list list list\";\n }\n\n}\n\n.stzh-geo-ref-data {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: 899;\n flex-direction: column;\n transition: opacity ease 0.2s;\n background-color: var(--stzh-color-white);\n\n // initially hidden\n display: none;\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n\n &--is-open {\n display: flex;\n opacity: 1;\n visibility: visible;\n pointer-events: inherit;\n }\n\n &__content {\n overflow: hidden;\n height: 100%;\n }\n\n &--content-padding {\n padding-left: $containerMargin;\n padding-right: $containerMargin;\n\n @include mq($from: small) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n\n @include mq($from: medium) {\n padding-left: $containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n }\n\n &__heading {\n display: flex;\n background-color: var(--stzh-color-secondary20);\n @include spaceCurve('padding-top', 'regular');\n @include spaceCurve('padding-bottom', 'regular');\n }\n\n /** Everything meta wrapper like search, filters etc. */\n\n &__meta-wrapper {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: space(large);\n\n @include spaceCurve('padding-top', 'small');\n @include spaceCurve('padding-bottom', 'small');\n\n @include mq($from: large) {\n @include grid;\n grid-template-areas: var(--meta-grid-template-areas);\n grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n }\n\n &__filters {\n grid-area: filters;\n flex: none;\n margin-bottom: space(xxsmall);\n }\n\n &__filters-toggle {\n @include mq($from: large) {\n display: none;\n }\n }\n\n &__filters-toggle stzh-chip {\n @include mq($to: medium) {\n --icon-gap: 0;\n }\n }\n\n &__filters-content {\n display: none;\n\n @include mq($from: large) {\n display: block;\n }\n }\n\n &__search {\n grid-area: search;\n width: 100%;\n\n @include mq($from: large) {\n padding-left: 12px;\n }\n }\n\n &__results-toggle {\n grid-area: resultstoggle;\n flex: none;\n margin-bottom: space(xxsmall);\n\n @include mq($from: large) {\n display: none;\n }\n }\n\n /** Everything with results */\n\n &__results-wrapper {\n height: 100%;\n\n @include mq($from: large) {\n @include grid;\n grid-template-areas: var(--results-grid-template-areas);\n --grid-template-columns: repeat(12, minmax(0, 1fr));\n }\n }\n\n &__results-wrapper .inactive {\n @include mq($to: large) {\n visibility: hidden;\n height: 0;\n position: absolute;\n overflow: hidden;\n }\n }\n\n &__results-map {\n grid-area: map;\n position: relative;\n height: 100%;\n }\n\n &__map-controls {\n position: absolute;\n top: space(small);\n left: space(small);\n background-color: var(--stzh-color-white);\n padding: space(xsmall);\n }\n\n &__results-list {\n grid-area: list;\n padding-left: $containerMargin;\n padding-right: $containerMargin;\n padding-bottom: space(large);\n overflow: auto;\n\n @include mq($from: small) {\n padding-left: $containerMarginSmall;\n padding-right: $containerMarginSmall;\n }\n\n @include mq($from: medium) {\n padding-left: $containerMarginMedium;\n padding-right: $containerMarginMedium;\n }\n\n @include mq($from: large) {\n padding-left: 0;\n padding-right: $containerMarginSmall;\n overflow: auto;\n }\n }\n\n &__results-list-heading {\n margin-bottom: var(--stzh-space-medium);\n }\n\n &__ol-map {\n }\n\n &__teaser-list {\n display: grid;\n gap: var(--stzh-space-medium);\n grid-template-columns: 1fr;\n\n @include mq($from: small) {\n grid-template-columns: 1fr 1fr;\n }\n\n @include mq($from: large) {\n grid-template-columns: 1fr;\n }\n }\n\n &__teaser-load-more {\n display: flex;\n justify-content: center;\n margin-top: space(medium);\n }\n}\n\n/** TEMP - MOVE TO COMPONENT **/\n\n.stzh-poi-teaser {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 180px;\n height: 180px;\n background-color: var(--stzh-color-grey10);\n position: relative;\n\n &:hover {\n cursor: pointer;\n background-color: var(--stzh-color-secondary10);\n }\n\n &-content {\n padding: var(--stzh-space-medium);\n hyphens: auto;\n\n stzh-heading {\n margin-bottom: space(xsmall);\n }\n\n stzh-text {\n --color: var(--stzh-color-grey80);\n }\n }\n\n &-link {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n\n &-image {\n position: relative;\n overflow: hidden;\n }\n\n &-image-inner {\n position: absolute;\n inset: 0;\n height: 100%;\n }\n\n &-image-inner img {\n height: 180px;\n }\n\n &-list-item {\n display: flex;\n gap: space(small);\n margin-top: space(xxsmall);\n\n stzh-icon, stzh-text {\n --color: var(--stzh-color-grey80);\n }\n }\n}\n","import { Component, Element, Event, EventEmitter, Fragment, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport {\n StzhAvailableTag,\n StzhChipselectChangeEvent,\n StzhChipselectItem,\n StzhCombinedGeoRefData,\n StzhGeoRefDataOverlayCloseClickEvent,\n StzhMapGeoRefData,\n StzhPoiGeoRefData,\n} from \"../../index\";\nimport { Document } from \"flexsearch/dist/flexsearch.bundle.min.js\";\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\nconst CLASS_BODY_OPEN = \"stzh-overlay-open\";\n\n/**\n * @slot logo - Slot for brand logo\n */\n@Component({\n tag: \"stzh-geo-ref-data\",\n styleUrl: \"stzh-geo-ref-data.scss\",\n shadow: true,\n})\nexport class GeoRefData {\n /** Heading for the overlay. */\n @Prop({ reflect: true }) heading: string = \"\";\n\n /** The URL for fetching the card data */\n @Prop({ reflect: true }) mapDataUrl: string = \"\";\n\n /** The URL used for fetching the POI data. */\n @Prop({ reflect: true }) poiDataUrl: string = \"\";\n\n /** Base URL used for all external requests (map, card). */\n @Prop() baseUrlOverride: string = \"https://www.stadt-zuerich.ch\";\n\n /** To make sure all tags are mapped to their identificator, only these will be available. */\n @Prop() availableTags: StzhAvailableTag[] | string = [];\n private _availableTags: StzhAvailableTag[] = [];\n\n /** Reset tag (the first one). */\n @Prop() resetTag: StzhChipselectItem | string;\n private _resetTag: StzhChipselectItem;\n\n /** Fields for building the search index. */\n @Prop() searchIndexFields: string[] = [\"title\", \"poiname\", \"street\", \"zip\", \"description\"];\n\n /** Fields for building the search index. */\n @Prop() searchIndexIdField: string = \"poiid\";\n\n @Watch(\"availableTags\")\n availableTagsWatcher(newValue: StzhAvailableTag[] | string) {\n if (!newValue) {\n this._availableTags = [];\n } else if (typeof newValue === \"string\") {\n try {\n this._availableTags = JSON.parse(newValue);\n } catch (e) {\n this._availableTags = [];\n }\n } else {\n this._availableTags = newValue;\n }\n }\n\n @Watch(\"resetTag\")\n resetTagWatcher(newValue: StzhChipselectItem | string) {\n if (!newValue) {\n this._resetTag = undefined;\n } else if (typeof newValue === \"string\") {\n try {\n this._resetTag = JSON.parse(newValue);\n } catch (e) {\n this._resetTag = undefined;\n }\n } else {\n this._resetTag = newValue;\n }\n }\n\n @State() filterActive: boolean = false;\n @State() searchActive: boolean = false;\n @State() showOnlyResultsForCurrentExtent: boolean = true;\n @State() finalResults: StzhCombinedGeoRefData[] = [];\n @State() finalResultsPaginatedList: StzhCombinedGeoRefData[] = [];\n @State() finalResultsPaginationOffset = 0;\n\n @State() viewmode: \"map\" | \"list\" = \"map\";\n @State() isViewportLarge: boolean;\n @State() isViewportMedium: boolean;\n @State() isInitialized: boolean;\n @State() isOpen: boolean;\n @State() isLoading: boolean;\n @State() numberOfItemsToLoad: number = 20;\n @State() canLoadMore: boolean;\n\n /** Overlay close click event */\n @Event()\n stzhOverlayCloseClick: EventEmitter<StzhGeoRefDataOverlayCloseClickEvent>;\n\n private combinedData: StzhCombinedGeoRefData[];\n private enhancedTags: StzhChipselectItem[];\n private searchIndex: Document;\n\n private filterResults: StzhCombinedGeoRefData[] = [];\n private searchResults: Set<string>;\n\n @Element() element: HTMLStzhGeoRefDataElement;\n private mapElement: HTMLStzhOlmapElement;\n private metaWrapperElement: HTMLDivElement;\n private resultsListElement: HTMLDivElement;\n private resizeObserver: ResizeObserver;\n\n private handleOverlayCloseClick = () => {\n document.body.classList.remove(CLASS_BODY_OPEN);\n this.isOpen = false;\n };\n\n private handleResize = async () => {\n if (this.metaWrapperElement && this.metaWrapperElement.clientHeight) {\n this.mapElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n this.resultsListElement.style.height = `calc(100% - ${this.metaWrapperElement.clientHeight}px)`;\n const map = await this.mapElement.getMap();\n map.updateSize();\n }\n };\n\n private mediaChangeHandler = () => {\n this.isViewportLarge = media(\"large\").matches;\n this.isViewportMedium = media(\"medium\").matches;\n };\n\n private async loadMapData(): Promise<StzhMapGeoRefData[]> {\n if (!this.mapDataUrl) {\n console.log(\"No map data URL provided\");\n return [];\n }\n try {\n const response = await fetch(this.mapDataUrl);\n const rawMapData = await response.text();\n const parsedData = new DOMParser().parseFromString(rawMapData, \"text/xml\");\n return Array.from(parsedData.querySelectorAll(\"featureMember\")).map(item => {\n const pos = item.querySelector(\"pos\")?.textContent;\n const poiid = item.querySelector(\"poi_id\")?.textContent;\n const [lat, lon] = pos?.split(\" \") || [];\n\n return { poiid, lat, lon } as StzhMapGeoRefData;\n });\n } catch (error) {\n console.error(\"Error fetching map data:\", error);\n // TODO: add user error (toast)\n }\n }\n\n private async loadPoiData() {\n if (!this.poiDataUrl) {\n console.error(\"No POI data URL provided\");\n return [];\n }\n try {\n const response = await fetch(this.poiDataUrl, { credentials: \"include\" });\n const poiData = await response.json();\n console.log(\"POI data:\", poiData);\n return poiData.items;\n } catch (error) {\n console.error(\"Error fetching POI data:\", error);\n }\n }\n\n private combineData(\n firstArray: StzhMapGeoRefData[] | StzhPoiGeoRefData[],\n secondArray: StzhMapGeoRefData[] | StzhPoiGeoRefData[]\n ): StzhCombinedGeoRefData[] {\n if (!firstArray.length || !secondArray.length) {\n console.error(\"Missing data to combine\");\n return [];\n }\n // determine which array is smaller for performance\n let smallerArray: any[];\n let largerArray: any[];\n\n if (firstArray.length < secondArray.length) {\n smallerArray = firstArray;\n largerArray = secondArray;\n } else {\n smallerArray = secondArray;\n largerArray = firstArray;\n }\n // combine arrays based on poiid\n return smallerArray\n .map(item => {\n const matchingItem = largerArray.find(largerArrayItem => largerArrayItem.poiid === item.poiid);\n return { ...item, ...matchingItem };\n })\n .sort((a, b) => {\n try {\n return a.title.localeCompare(b.title); // Sorts alphabetically by the 'name' property\n } catch (noTitleException) {\n return 1;\n }\n });\n }\n\n private enhanceTags(availableTags: StzhAvailableTag[], combinedData: StzhCombinedGeoRefData[]): StzhChipselectItem[] {\n return availableTags\n .sort((a, b) => {\n try {\n a.label.localeCompare(b.label);\n } catch (noLabelException) {\n return 1;\n }\n })\n .map(tag => {\n const counter = combinedData\n .filter(item => {\n try {\n return item.tags.includes(tag.value);\n } catch (noTagsException) {\n return false;\n }\n })\n .length.toString();\n return { ...tag, counter, variant: \"filter\" };\n });\n }\n\n private buildSearchIndex(data: StzhCombinedGeoRefData[]) {\n if (!data.length) {\n return;\n }\n this.searchIndex = new Document({\n tokenize: \"forward\",\n matcher: {\n \"[äà]\": \"a\",\n \"[öó]\": \"o\",\n \"[üûúù]\": \"u\",\n \"[éè]\": \"e\",\n },\n document: {\n id: this.searchIndexIdField,\n index: this.searchIndexFields,\n },\n });\n data.forEach(item => {\n this.searchIndex.add(item);\n });\n }\n\n @Listen(\"stzhMovePanZoom\")\n async mapMovedPannedOrZoomed() {\n if (this.showOnlyResultsForCurrentExtent) {\n const visibleMarkers = await this.mapElement.getVisibleMarkers();\n console.log(\"visibleMarkers\", visibleMarkers);\n }\n }\n\n connectedCallback() {\n this.mediaChangeHandler();\n addMediaChangeListener(this.mediaChangeHandler);\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n this.availableTagsWatcher(this.availableTags);\n this.resetTagWatcher(this.resetTag);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n private async initializeAndOpenMap() {\n document.body.classList.add(CLASS_BODY_OPEN);\n this.isLoading = true;\n this.isOpen = true;\n\n try {\n this.combinedData = this.combineData(await this.loadMapData(), await this.loadPoiData());\n this.enhancedTags = this.enhanceTags(this._availableTags, this.combinedData);\n this.buildSearchIndex(this.combinedData);\n const enhancedResetTag = {\n ...this._resetTag,\n counter: this.combinedData.length.toString(),\n };\n if (this._resetTag) {\n this.enhancedTags.unshift(enhancedResetTag);\n }\n this.finalResults = this.combinedData;\n this.finalResultsPaginatedList = this.finalResults.slice(0, this.numberOfItemsToLoad);\n this.canLoadMore = this.finalResults.length > this.numberOfItemsToLoad;\n await this.combineFilterAndSearchResults();\n await this.handleResize();\n await this.mapElement.updateViewToFitMarkers();\n await this.handleResize();\n this.isInitialized = true;\n } catch (mapException) {\n console.error(\"mapException\", mapException);\n }\n\n setTimeout(() => {\n this.isLoading = false;\n }, 500);\n }\n\n private handleFilterChange = async (e: CustomEvent<StzhChipselectChangeEvent>) => {\n if (e.detail.value.length !== 0) {\n this.filterResults = this.combinedData.filter(\n item => item.tags && item.tags.some(tag => e.detail.value.includes(tag))\n );\n this.filterActive = true;\n } else {\n this.filterActive = false;\n }\n await this.combineFilterAndSearchResults();\n };\n\n private handleExtentVisibilityChange = e => {\n this.showOnlyResultsForCurrentExtent = e.detail.checked;\n };\n\n private handleSearchChange = async (e: CustomEvent) => {\n if (e.detail.value !== \"\") {\n if (!this.searchIndex) {\n return;\n }\n const searchResults = this.searchIndex.search(e.detail.value);\n const flatSearchResults = searchResults.flatMap(field => field.result);\n this.searchResults = new Set(flatSearchResults);\n this.searchActive = true;\n } else {\n this.searchActive = false;\n }\n await this.combineFilterAndSearchResults();\n };\n\n private async combineFilterAndSearchResults() {\n if (this.filterActive && !this.searchActive) {\n this.finalResults = this.filterResults;\n } else if (!this.filterActive && this.searchActive) {\n this.finalResults = Array.from(this.searchResults).map(id => this.combinedData.find(item => item.poiid === id));\n } else if (this.filterActive && this.searchActive) {\n this.finalResults = this.filterResults.filter(item => this.searchResults.has(item.poiid));\n } else {\n this.finalResults = this.combinedData;\n }\n\n this.finalResultsPaginatedList = this.finalResults.slice(0, this.numberOfItemsToLoad);\n\n await this.replaceMapMarkers(this.finalResults);\n }\n\n private loadMore() {\n this.finalResultsPaginationOffset++;\n const sliced = this.finalResults.slice(\n this.finalResultsPaginationOffset * this.numberOfItemsToLoad,\n this.finalResultsPaginationOffset * this.numberOfItemsToLoad + this.numberOfItemsToLoad\n );\n if (!sliced || !sliced.length || sliced.length < this.numberOfItemsToLoad) {\n this.canLoadMore = false;\n }\n this.finalResultsPaginatedList = this.finalResultsPaginatedList.concat(sliced);\n }\n\n // private async handleExtendVisibility() {\n // if (this.showOnlyResultsForCurrentExtent) {\n // const visibleMarkers = await this.mapElement.getVisibleMarkers();\n // console.log(\"visibleMarkers\", visibleMarkers);\n // }\n // }\n\n private async replaceMapMarkers(items: StzhCombinedGeoRefData[]) {\n await this.mapElement.removeAllIconMarkers();\n items\n .filter(item => !!item.lat && !!item.lon)\n .forEach(item => {\n this.mapElement\n .addIconMarker([parseFloat(item.lat), parseFloat(item.lon)], {\n id: item.poiid,\n title: item.title,\n text: item.description,\n data: item.data,\n imageUri: `${this.baseUrlOverride}${item.image}`,\n href: `${this.baseUrlOverride}${item.path}`,\n })\n .catch();\n });\n if (!this.showOnlyResultsForCurrentExtent) {\n this.mapElement.updateViewToFitMarkers().catch();\n }\n }\n\n private toggleViewMode = () => {\n if (this.viewmode === \"map\") {\n this.viewmode = \"list\";\n } else {\n this.viewmode = \"map\";\n }\n };\n\n private async handlePoiTeaserMouseEnter(item: StzhCombinedGeoRefData) {\n const marker = await this.mapElement.findMarkerById(item.poiid);\n if (marker) {\n await this.mapElement.setIconMarkerActive(marker);\n }\n }\n\n private async handlePoiTeaserMouseLeave(item: StzhCombinedGeoRefData) {\n const marker = await this.mapElement.findMarkerById(item.poiid);\n if (marker) {\n await this.mapElement.setIconMarkerInactive(marker);\n }\n }\n\n // render chipselect\n\n render() {\n const classes = {\n \"stzh-geo-ref-data\": true,\n \"stzh-geo-ref-data--is-loading\": this.isLoading,\n \"stzh-geo-ref-data--is-open\": this.isOpen,\n };\n return (\n <Host>\n <div class=\"stzh-geo-ref-data__trigger\" onClick={() => this.initializeAndOpenMap()}>\n <slot name=\"trigger\"></slot>\n </div>\n <stzh-overlay open={this.isLoading}>\n <stzh-loader label=\"Daten werden geladen...\"></stzh-loader>\n </stzh-overlay>\n <div class={classes}>\n <div class=\"stzh-geo-ref-data__header-wrapper\">\n <stzh-header hide-metabar={true} sticky=\"disabled\">\n <slot name=\"logo\" slot=\"logo\"></slot>\n </stzh-header>\n <div class=\"stzh-geo-ref-data__heading stzh-geo-ref-data--content-padding\">\n <stzh-heading class=\"stzh-geo-ref-data__heading-heading\" curve=\"h2\">\n {this.heading}\n </stzh-heading>\n <stzh-button\n class=\"stzh-geo-ref-data__overlay-close\"\n icon=\"close\"\n iconOnly={true}\n size=\"small\"\n variant=\"tertiary\"\n onClick={this.handleOverlayCloseClick}\n ></stzh-button>\n </div>\n </div>\n\n <div class=\"stzh-geo-ref-data__content\">\n <div\n class=\"stzh-geo-ref-data__meta-wrapper stzh-geo-ref-data--content-padding\"\n ref={el => (this.metaWrapperElement = el as HTMLDivElement)}\n >\n <div class=\"stzh-geo-ref-data__filters\">\n <div class=\"stzh-geo-ref-data__filters-toggle\">\n <stzh-chip\n label={this.isViewportMedium ? \"Filter\" : \"\"}\n variant=\"filter\"\n icon=\"filtering\"\n ></stzh-chip>\n </div>\n <div class=\"stzh-geo-ref-data__filters-content\">\n <stzh-chipselect\n label-hidden={true}\n label=\"Tags\"\n data={this.enhancedTags}\n onStzhChange={this.handleFilterChange}\n multiple={true}\n defaultValue={[\"\"]}\n ></stzh-chipselect>\n </div>\n </div>\n <div class=\"stzh-geo-ref-data__search\">\n <stzh-input\n size=\"small\"\n name=\"stzh-datatable-search\"\n onStzhChange={this.handleSearchChange}\n hideOptional={true}\n label=\"Suche\"\n type=\"search\"\n ></stzh-input>\n </div>\n <div class=\"stzh-geo-ref-data__results-toggle\">\n <stzh-chip\n onStzhClick={this.toggleViewMode}\n label={this.viewmode === \"map\" ? \"Liste\" : \"Karte\"}\n icon={this.viewmode === \"map\" ? \"bulleted-list\" : \"map\"}\n variant=\"filter\"\n ></stzh-chip>\n </div>\n </div>\n <div class=\"stzh-geo-ref-data__results-wrapper\">\n <div class={`stzh-geo-ref-data__results-map ${this.viewmode === \"map\" ? \"active\" : \"inactive\"}`}>\n <stzh-olmap\n class=\"stzh-geo-ref-data__ol-map\"\n centerMarker={false}\n ref={el => (this.mapElement = el as HTMLStzhOlmapElement)}\n ></stzh-olmap>\n <div class=\"stzh-geo-ref-data__map-controls\">\n <stzh-checkbox\n label=\"Treffer an Kartenaussicht anpassen\"\n checked={this.showOnlyResultsForCurrentExtent}\n hideOptional={true}\n onStzhChange={this.handleExtentVisibilityChange}\n ></stzh-checkbox>\n </div>\n </div>\n <div\n class={`stzh-geo-ref-data__results-list ${this.viewmode === \"list\" ? \"active\" : \"inactive\"}`}\n ref={el => (this.resultsListElement = el as HTMLDivElement)}\n >\n {this.finalResults && (\n <Fragment>\n <stzh-text class=\"stzh-geo-ref-data__results-list-heading\">\n {this.finalResults.length} Treffer\n </stzh-text>\n <div class=\"stzh-geo-ref-data__teaser-list\">\n {this.finalResultsPaginatedList.map(item => (\n <div\n class=\"stzh-poi-teaser\"\n onMouseEnter={() => this.handlePoiTeaserMouseEnter(item)}\n onMouseLeave={() => this.handlePoiTeaserMouseLeave(item)}\n >\n <a class=\"stzh-poi-teaser-link\" href={this.baseUrlOverride + item.path}></a>\n <div class=\"stzh-poi-teaser-content\">\n <stzh-heading curve=\"lead\">{item.poiname}</stzh-heading>\n {item.description && <stzh-text size=\"micro\">{item.description}</stzh-text>}\n {item.data &&\n item.data.length > 0 &&\n item.data.map(item => (\n <div class=\"stzh-poi-teaser-list-item\">\n <stzh-icon name={item.icon}></stzh-icon>\n <stzh-text size=\"micro\">{item.text}</stzh-text>\n </div>\n ))}\n </div>\n <div class=\"stzh-poi-teaser-image\">\n <stzh-ratio ratio={\"1:1\"}></stzh-ratio>\n <div class=\"stzh-poi-teaser-image-inner\">\n <img src={this.baseUrlOverride + item.image} alt={\"Foto von \" + item.poiname} />\n </div>\n </div>\n </div>\n ))}\n </div>\n {this.canLoadMore && (\n <div class=\"stzh-geo-ref-data__teaser-load-more\">\n <stzh-button onStzhClick={() => this.loadMore()}>Weitere laden</stzh-button>\n </div>\n )}\n </Fragment>\n )}\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-9b1267a6.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as s,h as t,a as c,g as i}from"./p-c7bfac7a.js";import{s as o}from"./p-d789f265.js";import"./p-9b063923.js";const n=".sc-stzh-actions-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-actions-h{display:none}.sc-stzh-actions-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actions-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-actions-h .sc-stzh-actions,.sc-stzh-actions-h .sc-stzh-actions::before,.sc-stzh-actions-h *.sc-stzh-actions::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-actions-h .has-focus.sc-stzh-actions{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-actions-h .stzh-fylingfocus-focused.sc-stzh-actions{outline-style:none !important}.sc-stzh-actions-h .stzh-fylingfocus-focused.sc-stzh-actions::-moz-focus-inner{border:0 !important}.sc-stzh-actions-h .sc-stzh-actions-s>[slot=primary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=secondary],.sc-stzh-actions-h .sc-stzh-actions-s>[slot=tertiary]{flex-grow:1;margin:calc(var(--stzh-space-medium) / 2)}@media screen and (min-width: 600px){.sc-stzh-actions-h[space-between=true] .sc-stzh-actions-s>[slot=tertiary]{flex-grow:inherit}}.stzh-actions__actions.sc-stzh-actions{display:flex;flex-direction:column-reverse;margin:calc(var(--stzh-space-medium) / -2)}@media screen and (min-width: 600px){.stzh-actions__actions.sc-stzh-actions{flex-direction:row}}.stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions__secondary-actions.sc-stzh-actions,.stzh-actions__tertiary-actions.sc-stzh-actions{display:flex}.stzh-actions__wrapper.sc-stzh-actions{display:contents}@media screen and (max-width: 599px){.stzh-actions--process.sc-stzh-actions .stzh-actions__wrapper.sc-stzh-actions{display:flex;flex-wrap:wrap}}.stzh-actions--process.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{justify-content:flex-end}@media screen and (max-width: 599px){.stzh-actions--process.sc-stzh-actions .stzh-actions__primary-actions.sc-stzh-actions,.stzh-actions--process.sc-stzh-actions .stzh-actions__secondary-actions.sc-stzh-actions{flex-grow:1}}@media screen and (min-width: 600px){.stzh-actions--process.sc-stzh-actions .stzh-actions__tertiary-actions.sc-stzh-actions{margin-right:auto}}.stzh-actions--search.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{justify-content:flex-end}.stzh-actions--space-between.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{justify-content:space-between}@media screen and (min-width: 600px){.stzh-actions--space-between.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{flex-direction:column}}@media screen and (min-width: 900px){.stzh-actions--space-between.sc-stzh-actions .stzh-actions__actions.sc-stzh-actions{flex-direction:row}}@media screen and (min-width: 600px){.stzh-actions--space-between.sc-stzh-actions .stzh-actions__wrapper.sc-stzh-actions{display:flex;justify-content:flex-end}}";const a=class{constructor(t){s(this,t);this.init=()=>{const s=this.element.querySelectorAll('stzh-button[slot="secondary"], [slot="secondary"] stzh-button');const t=this.element.querySelectorAll('stzh-button[slot="tertiary"], [slot="tertiary"] stzh-button');s.forEach((s=>{o(s,{variant:"secondary"})}));t.forEach((s=>{o(s,{variant:"tertiary"})}))};this.variant="form";this.spaceBetween=false}connectedCallback(){this.init();this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){const s={"stzh-actions":true,"stzh-actions--space-between":this.spaceBetween,[`stzh-actions--${this.variant}`]:!!this.variant};return t(c,{"space-between":this.spaceBetween},t("div",{class:s},t("div",{class:"stzh-actions__actions",role:"group"},t("div",{class:"stzh-actions__tertiary-actions"},t("slot",{name:"tertiary"})),t("div",{class:"stzh-actions__wrapper"},t("div",{class:"stzh-actions__secondary-actions"},t("slot",{name:"secondary"})),t("div",{class:"stzh-actions__primary-actions"},t("slot",{name:"primary"}))))))}get element(){return i(this)}};a.style=n;export{a as stzh_actions};
2	+ //# sourceMappingURL=p-9b1267a6.entry.js.map

package/dist/stzh-components/p-9b1267a6.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhActionsCss","StzhActions","this","init","secondaryButtons","element","querySelectorAll","tertiaryButtons","forEach","button","setPropsIfNull","variant","connectedCallback","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","classes","spaceBetween","h","Host","class","role","name"],"sources":["src/components/stzh-actions/stzh-actions.scss?tag=stzh-actions&encapsulation=scoped","src/components/stzh-actions/stzh-actions.tsx"],"sourcesContent":[":host {\n ::slotted([slot=\"primary\"]),\n ::slotted([slot=\"secondary\"]),\n ::slotted([slot=\"tertiary\"]) {\n flex-grow: 1;\n margin: calc(#{space('medium')} / 2);\n }\n\n &[space-between=\"true\"] ::slotted([slot=\"tertiary\"]) {\n @include mq($from: small) {\n flex-grow: inherit;\n }\n }\n}\n\n.stzh-actions {\n &__actions {\n display: flex;\n flex-direction: column-reverse;\n margin: calc(#{space('medium')} / -2);\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n &__primary-actions,\n &__secondary-actions,\n &__tertiary-actions {\n display: flex;\n }\n\n &__wrapper {\n display: contents;\n }\n\n // &--dialog &__actions {\n // justify-content: flex-end;\n // }\n\n &--process &__wrapper {\n @include mq($to: small) {\n display: flex;\n flex-wrap: wrap;\n }\n }\n\n &--process &__actions {\n justify-content: flex-end;\n }\n\n &--process &__primary-actions,\n &--process &__secondary-actions {\n @include mq($to: small) {\n flex-grow: 1;\n }\n }\n\n &--process &__tertiary-actions {\n @include mq($from: small) {\n margin-right: auto;\n }\n }\n\n &--search &__actions {\n justify-content: flex-end;\n }\n\n /* space between */\n &--space-between &__actions {\n justify-content: space-between;\n\n @include mq($from: small) {\n flex-direction: column;\n }\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n &--space-between &__wrapper {\n @include mq($from: small) {\n display: flex;\n justify-content: flex-end;\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/**\n * @slot primary - Slot for primary button\n * @slot secondary - Slot for secondary button\n * @slot tertiary - Slot for tertiary button\n */\n@Component({\n tag: \"stzh-actions\",\n styleUrl: \"stzh-actions.scss\",\n scoped: true,\n})\nexport class StzhActions {\n /** Variant determining what position the action buttons are */\n @Prop({ reflect: true }) variant: \"form\" | \"dialog\" | \"process\" | \"search\" = \"form\";\n\n /** Whether to split tertiary and primary/secondary from each other (left and right). */\n @Prop({ reflect: true }) spaceBetween: boolean = false;\n\n @Element() element: HTMLStzhActionsElement;\n\n private observer: MutationObserver;\n\n private init = () => {\n const secondaryButtons = this.element.querySelectorAll(\n 'stzh-button[slot=\"secondary\"], [slot=\"secondary\"] stzh-button'\n );\n\n const tertiaryButtons = this.element.querySelectorAll(\n 'stzh-button[slot=\"tertiary\"], [slot=\"tertiary\"] stzh-button'\n );\n\n secondaryButtons.forEach(button => {\n setPropsIfNull(button, {\n variant: \"secondary\",\n } as HTMLStzhButtonElement);\n });\n\n tertiaryButtons.forEach(button => {\n setPropsIfNull(button, {\n variant: \"tertiary\",\n } as HTMLStzhButtonElement);\n });\n };\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true,\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-actions\": true,\n \"stzh-actions--space-between\": this.spaceBetween,\n [`stzh-actions--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host space-between={this.spaceBetween}>\n <div class={classes}>\n <div class=\"stzh-actions__actions\" role=\"group\">\n <div class=\"stzh-actions__tertiary-actions\">\n <slot name=\"tertiary\"></slot>\n </div>\n <div class=\"stzh-actions__wrapper\">\n <div class=\"stzh-actions__secondary-actions\">\n <slot name=\"secondary\"></slot>\n </div>\n <div class=\"stzh-actions__primary-actions\">\n <slot name=\"primary\"></slot>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"qHAAA,MAAMA,EAAiB,utG,MCcVC,EAAW,M,yBAWdC,KAAAC,KAAO,KACb,MAAMC,EAAmBF,KAAKG,QAAQC,iBACpC,iEAGF,MAAMC,EAAkBL,KAAKG,QAAQC,iBACnC,+DAGFF,EAAiBI,SAAQC,IACvBC,EAAeD,EAAQ,CACrBE,QAAS,aACgB,IAG7BJ,EAAgBC,SAAQC,IACtBC,EAAeD,EAAQ,CACrBE,QAAS,YACgB,GAC3B,E,aA5ByE,O,kBAG5B,K,CA4BjD,iBAAAC,GACEV,KAAKC,OAELD,KAAKW,SAAW,IAAIC,iBAAiBZ,KAAKC,MAC1CD,KAAKW,SAASE,QAAQb,KAAKG,QAAS,CAClCW,UAAW,KACXC,QAAS,M,CAIb,oBAAAC,GACE,GAAIhB,KAAKW,SAAU,CACjBX,KAAKW,SAASM,Y,EAIlB,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,KAChB,8BAA+BnB,KAAKoB,aACpC,CAAC,iBAAiBpB,KAAKS,aAAcT,KAAKS,SAG5C,OACEY,EAACC,EAAI,iBAAgBtB,KAAKoB,cACxBC,EAAA,OAAKE,MAAOJ,GACVE,EAAA,OAAKE,MAAM,wBAAwBC,KAAK,SACtCH,EAAA,OAAKE,MAAM,kCACTF,EAAA,QAAMI,KAAK,cAEbJ,EAAA,OAAKE,MAAM,yBACTF,EAAA,OAAKE,MAAM,mCACTF,EAAA,QAAMI,KAAK,eAEbJ,EAAA,OAAKE,MAAM,iCACTF,EAAA,QAAMI,KAAK,gB"}

package/dist/stzh-components/p-a9216459.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as o,a as s,g as c}from"./p-c7bfac7a.js";const r=".sc-stzh-poicard-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-poicard-h{display:none}.sc-stzh-poicard-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poicard-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poicard-h .sc-stzh-poicard,.sc-stzh-poicard-h .sc-stzh-poicard::before,.sc-stzh-poicard-h *.sc-stzh-poicard::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-poicard-h .has-focus.sc-stzh-poicard{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard{outline-style:none !important}.sc-stzh-poicard-h .stzh-fylingfocus-focused.sc-stzh-poicard::-moz-focus-inner{border:0 !important}.sc-stzh-poicard-h{--background-color:var(--stzh-color-grey10);--hover-background-color:var(--stzh-color-grey20);--title-color:var(--stzh-color-primary70);--title-hover-color:var(--stzh-color-primary80);--title-background-color:var(--stzh-color-secondary20);--title-hover-background-color:var(--stzh-color-secondary30)}.stzh-poicard.sc-stzh-poicard{display:block;background-color:var(--background-color);text-decoration:none;height:100%}.stzh-poicard.sc-stzh-poicard:hover{--title-color:var(--title-hover-color);--title-background-color:var(--title-hover-background-color);--background-color:var(--hover-background-color)}.stzh-poicard__content.sc-stzh-poicard{display:flex;flex-direction:column;gap:var(--stzh-space-small)}.stzh-poicard__content-with-icon.sc-stzh-poicard,.stzh-poicard__content-with-badge.sc-stzh-poicard{display:flex;align-items:center;gap:var(--stzh-space-xxsmall)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-icon.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary70)}.stzh-poicard__content-with-badge.sc-stzh-poicard stzh-text.sc-stzh-poicard{width:auto;--color:var(--stzh-color-grey80)}.stzh-poicard__content-head.sc-stzh-poicard{display:flex;align-items:center;padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);--color:var(--title-color);background-color:var(--title-background-color)}.stzh-poicard__content-head.sc-stzh-poicard stzh-icon.sc-stzh-poicard{--color:var(--stzh-color-primary)}.stzh-poicard__content-title.sc-stzh-poicard{width:100%;--color:var(--stzh-color-grey80)}.stzh-poicard.sc-stzh-poicard:hover .stzh-poicard__content-title.sc-stzh-poicard{--color:var(--stzh-color-black)}.stzh-poicard__content-body.sc-stzh-poicard{padding:var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);display:flex;flex-direction:column;gap:var(--stzh-space-xsmall)}";const i=class{constructor(o){t(this,o);this.init=()=>{this.itemWatcher(this.item)};this.item=""}itemWatcher(t){if(!t){this._item=undefined}else if(typeof t==="string"){try{this._item=JSON.parse(t)}catch(t){this._item=undefined}}else{this._item=t}}connectedCallback(){this.init()}render(){const t={"stzh-poicard":true};return o(s,null,o("a",{class:t,href:this._item.url,target:"_blank"},o("div",{class:"stzh-poicard__content"},o("div",{class:"stzh-poicard__content-head"},o("stzh-heading",null,this._item.title)),o("div",{class:"stzh-poicard__content-body"},this._item.distance&&o("div",{class:"stzh-poicard__content-with-icon"},o("stzh-icon",{name:"pin"}),o("stzh-text",null,this._item.distance)),this._item.temp&&o("div",{class:"stzh-poicard__content-with-icon"},o("stzh-icon",{name:"thermometer"}),o("stzh-text",null,this._item.temp)),(this._item.statusMessageContent\|\|this._item.statusMessage)&&o("div",{class:"stzh-poicard__content-with-badge"},this._item.statusMessage&&o("stzh-text",{size:"milli"},this._item.statusMessage),this._item.statusMessageContent&&o("stzh-chip",{variant:"tag",size:"small",inverted:true,icon:"",type:this._item.success?"default":"error",label:this._item.statusMessageContent}))))))}get element(){return c(this)}static get watchers(){return{item:["itemWatcher"]}}};i.style=r;export{i as stzh_poicard};
2	+ //# sourceMappingURL=p-a9216459.entry.js.map

package/dist/stzh-components/p-a9216459.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhPoicardCss","StzhPoicard","this","init","itemWatcher","item","newValue","_item","undefined","JSON","parse","e","connectedCallback","render","classes","h","Host","class","href","url","target","title","distance","name","temp","statusMessageContent","statusMessage","size","variant","inverted","icon","type","success","label"],"sources":["src/components/stzh-poicard/stzh-poicard.scss?tag=stzh-poicard&encapsulation=scoped","src/components/stzh-poicard/stzh-poicard.tsx"],"sourcesContent":[":host {\n --background-color: var(--stzh-color-grey10);\n --hover-background-color: var(--stzh-color-grey20);\n --title-color: var(--stzh-color-primary70);\n --title-hover-color: var(--stzh-color-primary80);\n --title-background-color: var(--stzh-color-secondary20);\n --title-hover-background-color: var(--stzh-color-secondary30);\n}\n\n.stzh-poicard {\n display: block;\n background-color: var(--background-color);\n text-decoration: none;\n height: 100%;\n\n &:hover {\n --title-color: var(--title-hover-color);\n --title-background-color: var(--title-hover-background-color);\n --background-color: var(--hover-background-color);\n }\n\n /* Content */\n\n &__content {\n display: flex;\n flex-direction: column;\n gap: var(--stzh-space-small);\n }\n\n &__content-with-icon,\n &__content-with-badge {\n display: flex;\n align-items: center;\n gap: var(--stzh-space-xxsmall);\n }\n\n &__content-with-icon stzh-text {\n width: auto;\n --color: var(--stzh-color-primary70);\n }\n\n &__content-with-icon stzh-icon {\n --color: var(--stzh-color-primary70);\n }\n\n &__content-with-badge stzh-text {\n width: auto;\n --color: var(--stzh-color-grey80);\n }\n\n /* Content head */\n\n &__content-head {\n display: flex;\n align-items: center;\n padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-small);\n --color: var(--title-color);\n background-color: var(--title-background-color);\n }\n\n &__content-head stzh-icon {\n --color: var(--stzh-color-primary);\n }\n\n &__content-title {\n width: 100%;\n --color: var(--stzh-color-grey80);\n }\n\n &:hover &__content-title {\n --color: var(--stzh-color-black);\n }\n\n /* Content Body */\n\n &__content-body {\n padding: var(--stzh-space-xsmall) var(--stzh-space-medium) var(--stzh-space-medium);\n display: flex;\n flex-direction: column;\n gap: var(--stzh-space-xsmall);\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\nimport { StzhPoiCardItemData } from \"../../index\";\n\n/**\n *\n */\n@Component({\n tag: \"stzh-poicard\",\n styleUrl: \"stzh-poicard.scss\",\n scoped: true,\n})\nexport class StzhPoicard {\n @Element() element: HTMLStzhPoicardElement;\n\n /** Socialmediastream item */\n @Prop() item: StzhPoiCardItemData | string = \"\";\n private _item: StzhPoiCardItemData | undefined;\n\n @Watch(\"item\")\n itemWatcher(newValue: StzhPoiCardItemData | string) {\n if (!newValue) {\n this._item = undefined;\n } else if (typeof newValue === \"string\") {\n try {\n this._item = JSON.parse(newValue);\n } catch (e) {\n this._item = undefined;\n }\n } else {\n this._item = newValue;\n }\n }\n\n private init = () => {\n this.itemWatcher(this.item);\n };\n\n connectedCallback() {\n this.init();\n }\n\n render() {\n const classes = {\n \"stzh-poicard\": true,\n };\n\n return (\n <Host>\n <a class={classes} href={this._item.url} target=\"_blank\">\n <div class=\"stzh-poicard__content\">\n <div class=\"stzh-poicard__content-head\">\n <stzh-heading>{this._item.title}</stzh-heading>\n </div>\n <div class=\"stzh-poicard__content-body\">\n {this._item.distance && (\n <div class=\"stzh-poicard__content-with-icon\">\n <stzh-icon name=\"pin\"></stzh-icon>\n <stzh-text>{this._item.distance}</stzh-text>\n </div>\n )}\n\n {this._item.temp && (\n <div class=\"stzh-poicard__content-with-icon\">\n <stzh-icon name=\"thermometer\"></stzh-icon>\n <stzh-text>{this._item.temp}</stzh-text>\n </div>\n )}\n\n {(this._item.statusMessageContent ||\n this._item.statusMessage) && (\n <div class=\"stzh-poicard__content-with-badge\">\n {this._item.statusMessage && (\n <stzh-text size=\"milli\">\n {this._item.statusMessage}\n </stzh-text>\n )}\n {this._item.statusMessageContent && (\n <stzh-chip\n variant=\"tag\"\n size=\"small\"\n inverted={true}\n icon=\"\"\n type={this._item.success ? \"default\" : \"error\"}\n label={this._item.statusMessageContent}\n ></stzh-chip>\n )}\n </div>\n )}\n </div>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,+nG,MCWVC,EAAW,M,yBAsBdC,KAAAC,KAAO,KACbD,KAAKE,YAAYF,KAAKG,KAAK,E,UAnBgB,E,CAI7C,WAAAD,CAAYE,GACV,IAAKA,EAAU,CACbJ,KAAKK,MAAQC,S,MACR,UAAWF,IAAa,SAAU,CACvC,IACEJ,KAAKK,MAAQE,KAAKC,MAAMJ,E,CACxB,MAAOK,GACPT,KAAKK,MAAQC,S,MAEV,CACLN,KAAKK,MAAQD,C,EAQjB,iBAAAM,GACEV,KAAKC,M,CAGP,MAAAU,GACE,MAAMC,EAAU,CACd,eAAgB,MAGlB,OACEC,EAACC,EAAI,KACHD,EAAA,KAAGE,MAAOH,EAASI,KAAMhB,KAAKK,MAAMY,IAAKC,OAAO,UAC9CL,EAAA,OAAKE,MAAM,yBACTF,EAAA,OAAKE,MAAM,8BACTF,EAAA,oBAAeb,KAAKK,MAAMc,QAE5BN,EAAA,OAAKE,MAAM,8BACRf,KAAKK,MAAMe,UACVP,EAAA,OAAKE,MAAM,mCACTF,EAAA,aAAWQ,KAAK,QAChBR,EAAA,iBAAYb,KAAKK,MAAMe,WAI1BpB,KAAKK,MAAMiB,MACVT,EAAA,OAAKE,MAAM,mCACTF,EAAA,aAAWQ,KAAK,gBAChBR,EAAA,iBAAYb,KAAKK,MAAMiB,QAIzBtB,KAAKK,MAAMkB,sBACXvB,KAAKK,MAAMmB,gBACXX,EAAA,OAAKE,MAAM,oCACRf,KAAKK,MAAMmB,eACVX,EAAA,aAAWY,KAAK,SACbzB,KAAKK,MAAMmB,eAGfxB,KAAKK,MAAMkB,sBACVV,EAAA,aACEa,QAAQ,MACRD,KAAK,QACLE,SAAU,KACVC,KAAK,GACLC,KAAM7B,KAAKK,MAAMyB,QAAU,UAAY,QACvCC,MAAO/B,KAAKK,MAAMkB,2B"}

package/dist/stzh-components/p-b2920d7f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,h as s,a as t,g as c}from"./p-c7bfac7a.js";const r=".sc-stzh-chipgroup-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-chipgroup-h{display:none}.sc-stzh-chipgroup-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipgroup-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-chipgroup-h .sc-stzh-chipgroup,.sc-stzh-chipgroup-h .sc-stzh-chipgroup::before,.sc-stzh-chipgroup-h *.sc-stzh-chipgroup::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-chipgroup-h .has-focus.sc-stzh-chipgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-chipgroup-h .stzh-fylingfocus-focused.sc-stzh-chipgroup{outline-style:none !important}.sc-stzh-chipgroup-h .stzh-fylingfocus-focused.sc-stzh-chipgroup::-moz-focus-inner{border:0 !important}.stzh-chipgroup.sc-stzh-chipgroup{display:flex;gap:var(--stzh-space-medium)}";const i=class{constructor(s){o(this,s)}render(){const o={"stzh-chipgroup":true};return s(t,null,s("div",{class:o},s("slot",null)))}get element(){return c(this)}};i.style=r;export{i as stzh_chipgroup};
2	+ //# sourceMappingURL=p-b2920d7f.entry.js.map

package/dist/stzh-components/p-b2920d7f.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhChipgroupCss","StzhChipgroup","render","classes","h","Host","class"],"sources":["src/components/stzh-chipgroup/stzh-chipgroup.scss?tag=stzh-chipgroup&encapsulation=scoped","src/components/stzh-chipgroup/stzh-chipgroup.tsx"],"sourcesContent":[":host {\n\n}\n\n.stzh-chipgroup {\n display: flex;\n gap: space('medium');\n}\n","import {\n Component,\n Host,\n h,\n Element\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for chips\n */\n@Component({\n tag: \"stzh-chipgroup\",\n styleUrl: \"stzh-chipgroup.scss\",\n scoped: true\n})\nexport class StzhChipgroup {\n @Element() element: HTMLStzhChipgroupElement;\n\n render() {\n const classes = {\n \"stzh-chipgroup\": true\n };\n\n return (\n <Host>\n <div class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,4zC,MCeZC,EAAa,M,yBAGxB,MAAAC,GACE,MAAMC,EAAU,CACd,iBAAkB,MAGpB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAOH,GACVC,EAAA,c"}

package/dist/stzh-components/p-b6f19446.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as s,F as i,a as o,g as e}from"./p-c7bfac7a.js";import{a as h}from"./p-a771013b.js";const r=".sc-stzh-poilist-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-poilist-h{display:none}.sc-stzh-poilist-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poilist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-poilist-h .sc-stzh-poilist,.sc-stzh-poilist-h .sc-stzh-poilist::before,.sc-stzh-poilist-h .sc-stzh-poilist::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-poilist-h .has-focus.sc-stzh-poilist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist{outline-style:none !important}.sc-stzh-poilist-h .stzh-fylingfocus-focused.sc-stzh-poilist::-moz-focus-inner{border:0 !important}.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-small);display:flex;justify-content:space-between;align-items:center}@media screen and (min-width: 900px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-poilist__header.sc-stzh-poilist{margin-bottom:var(--stzh-space-large)}}.stzh-poilist__header.sc-stzh-poilist stzh-text.sc-stzh-poilist{--color:var(--stzh-color-grey80);font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xlarge);display:grid}@media screen and (min-width: 900px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-poilist__show-more.sc-stzh-poilist{margin-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 600px){.stzh-poilist__show-more.sc-stzh-poilist{justify-content:center}}.stzh-poilist.sc-stzh-poilist stzh-dropdown.sc-stzh-poilist{--color:var(--stzh-color-primary90);--icon-color:var(--stzh-color-primary90);--icon-angle-color:var(--stzh-color-primary90)}";const a=class{constructor(s){t(this,s);this.handleMoreClick=async()=>{this.loadingText=this.localization.dataLoading;this.isLoading=true;this.currentOffset++;const{data:t}=await h.get(this.getCurrentApiUrl());this.meta=t.meta;this.items=this.items.concat(t.items);this.isLoading=false};this.onSortChange=async t=>{this.activeSorting=t.detail.value;this.currentOffset=0;this.items=[];await this.apiWatcher(this.api)};this.localization=undefined;this.api=undefined;this.currentOffset=0;this.meta=undefined;this.items=[];this.isLoading=true;this.dropdownOptions=[];this.activeSorting=undefined;this.latitude=47.3714332;this.longitude=8.542093;this.geopositionError="";this.loadingText=""}async apiWatcher(t){this.loadingText=this.localization.dataLoading;if(!t){return}const{data:s}=await h.get(this.getCurrentApiUrl());this.meta=s.meta;this.items=s.items;this.isLoading=false}getCurrentApiUrl(){return`${this.api}?offset=${this.currentOffset}&sort=${this.activeSorting}:DESC&latitude=${this.latitude}&longitude=${this.longitude}`}getNumberOfLoadedItems(){if(this.meta.currentPage!==this.meta.totalPages){return this.meta.itemsPerPagethis.meta.currentPage}else{return this.meta.totalItems}}async getUserPosition(){this.loadingText=this.localization.geopositionLoading;try{const t=await this.getPositionAsync();this.latitude=t.coords.latitude;this.longitude=t.coords.longitude}catch(t){console.error("geopositionNotFoundException",t);this.geopositionError=this.localization.geopositionError}}getPositionAsync(){return new Promise(((t,s)=>{if(navigator.geolocation){navigator.geolocation.getCurrentPosition((s=>t(s)),(t=>s(t)))}else{s(new Error("Geolocation is not supported by this browser."))}}))}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"poilist")}this.dropdownOptions=[{text:this.localization.sortByDistance,value:"distance"},{text:this.localization.sortByName,value:"name"}];this.activeSorting=this.dropdownOptions[0].value}async componentDidLoad(){await this.getUserPosition();await this.apiWatcher(this.api)}render(){const t={"stzh-poilist":true};return s(o,null,s("div",{class:t},s("stzh-overlay",{open:this.isLoading},s("stzh-loader",{label:this.loadingText})),this.geopositionError&&s("stzh-message",{type:"error",label:this.geopositionError}),(this.items.length>0\|\|this.meta)&&s(i,null,s("div",{class:"stzh-poilist__header"},s("stzh-text",{size:"micro"},this.getNumberOfLoadedItems()," ",this.localization.of," ",this.meta.totalItems),s("stzh-dropdown",{label:"Sortierung","hide-optional":true,variant:"plain",noSearch:true,inline:true,noWrap:true,onStzhChange:this.onSortChange,items:Array.isArray(this.activeSorting)?this.activeSorting:[this.activeSorting],options:this.dropdownOptions})),s("stzh-cardlist",{layout:"teasers"},this.items.map((t=>s("stzh-poicard",{item:t})))),this.meta.currentPage!==this.meta.totalPages&&s("div",{class:"stzh-poilist__show-more"},s("stzh-button",{variant:"secondary",label:this.localization.showMore,onClick:this.handleMoreClick})))))}get element(){return e(this)}static get watchers(){return{api:["apiWatcher"]}}};a.style=r;export{a as stzh_poilist};
2	+ //# sourceMappingURL=p-b6f19446.entry.js.map

package/dist/stzh-components/p-b6f19446.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhPoilistCss","StzhPoilist","this","handleMoreClick","async","loadingText","localization","dataLoading","isLoading","currentOffset","data","axios","get","getCurrentApiUrl","meta","items","concat","onSortChange","e","activeSorting","detail","value","apiWatcher","api","newValue","latitude","longitude","getNumberOfLoadedItems","currentPage","totalPages","itemsPerPage","totalItems","getUserPosition","geopositionLoading","position","getPositionAsync","coords","geopositionNotFoundException","console","error","geopositionError","Promise","resolve","reject","navigator","geolocation","getCurrentPosition","Error","componentWillLoad","window","stzhComponents","utils","fetchTranslations","element","dropdownOptions","text","sortByDistance","sortByName","componentDidLoad","render","classes","h","Host","class","open","label","type","length","Fragment","size","of","variant","noSearch","inline","noWrap","onStzhChange","Array","isArray","options","layout","map","item","showMore","onClick"],"sources":["src/components/stzh-poilist/stzh-poilist.scss?tag=stzh-poilist&encapsulation=scoped","src/components/stzh-poilist/stzh-poilist.tsx"],"sourcesContent":[":host {\n}\n\n.stzh-poilist {\n &__header {\n @include spaceCurve('margin-bottom', 'small');\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n &__header stzh-text {\n --color: var(--stzh-color-grey80);\n @include font(heavy);\n }\n\n &__show-more {\n @include spaceCurve('margin-top', 'medium');\n display: grid;\n\n @include mq($from: small) {\n justify-content: center;\n }\n }\n\n stzh-dropdown {\n --color: var(--stzh-color-primary90);\n --icon-color: var(--stzh-color-primary90);\n --icon-angle-color: var(--stzh-color-primary90);\n }\n}\n","import {\n Component,\n Element,\n Fragment,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from \"@stencil/core\";\n\nimport axios from \"axios\";\n\nimport {\n StzhDropdownChangeEvent,\n StzhDropdownCustomEvent,\n StzhDropdownOption,\n StzhPoiCardItemData,\n StzhPoiListData,\n StzhPoiListMetaData,\n} from \"../../index\";\nimport { StzhPoilistLocalizedText } from \"./stzh-poilist.localization\"; // export type StzhPoiListMetaData = {\n\n@Component({\n tag: \"stzh-poilist\",\n styleUrl: \"stzh-poilist.scss\",\n scoped: true,\n})\nexport class StzhPoilist {\n /** Translation strings */\n @Prop() localization: StzhPoilistLocalizedText;\n\n /** API URL (`{lang}` is replaced in the URL) */\n @Prop() api: string;\n\n @Element() element: HTMLStzhPoilistElement;\n\n @State() currentOffset: number = 0;\n @State() meta: StzhPoiListMetaData;\n @State() items: StzhPoiCardItemData[] = [];\n @State() isLoading: boolean = true;\n\n /** Sorting */\n @State() dropdownOptions: StzhDropdownOption[] = [];\n @State() activeSorting: string | string[];\n\n /** Geoposition (STZH Rathaus by default) */\n @State() latitude: number = 47.3714332;\n @State() longitude: number = 8.542093;\n @State() geopositionError: string = \"\";\n\n @State() loadingText: string = \"\";\n\n @Watch(\"api\")\n async apiWatcher(newValue: string) {\n this.loadingText = this.localization.dataLoading;\n if (!newValue) {\n return;\n }\n\n // load data from API\n const { data } = await axios.get<StzhPoiListData>(this.getCurrentApiUrl());\n this.meta = data.meta;\n this.items = data.items;\n this.isLoading = false;\n }\n\n private getCurrentApiUrl() {\n return `${this.api}?offset=${this.currentOffset}&sort=${this.activeSorting}:DESC&latitude=${this.latitude}&longitude=${this.longitude}`;\n }\n\n private handleMoreClick = async () => {\n this.loadingText = this.localization.dataLoading;\n this.isLoading = true;\n this.currentOffset++;\n const { data } = await axios.get<StzhPoiListData>(this.getCurrentApiUrl());\n this.meta = data.meta;\n this.items = this.items.concat(data.items);\n this.isLoading = false;\n };\n\n private getNumberOfLoadedItems(): number {\n if (this.meta.currentPage !== this.meta.totalPages) {\n return this.meta.itemsPerPage * this.meta.currentPage;\n } else {\n return this.meta.totalItems;\n }\n }\n\n private onSortChange = async (\n e: StzhDropdownCustomEvent<StzhDropdownChangeEvent>\n ) => {\n this.activeSorting = e.detail.value;\n this.currentOffset = 0;\n this.items = [];\n await this.apiWatcher(this.api);\n };\n\n private async getUserPosition() {\n this.loadingText = this.localization.geopositionLoading;\n try {\n const position = await this.getPositionAsync();\n this.latitude = position.coords.latitude;\n this.longitude = position.coords.longitude;\n } catch (geopositionNotFoundException) {\n console.error(\n \"geopositionNotFoundException\",\n geopositionNotFoundException\n );\n this.geopositionError = this.localization.geopositionError;\n }\n }\n\n private getPositionAsync(): Promise<GeolocationPosition> {\n return new Promise((resolve, reject) => {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n (position) => resolve(position),\n (error) => reject(error)\n );\n } else {\n reject(new Error(\"Geolocation is not supported by this browser.\"));\n }\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(\n this.element,\n \"poilist\"\n );\n }\n this.dropdownOptions = [\n {\n text: this.localization.sortByDistance,\n value: \"distance\",\n },\n {\n text: this.localization.sortByName,\n value: \"name\",\n },\n ];\n this.activeSorting = this.dropdownOptions[0].value;\n }\n\n async componentDidLoad() {\n await this.getUserPosition();\n await this.apiWatcher(this.api);\n }\n\n render() {\n const classes = {\n \"stzh-poilist\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n <stzh-overlay open={this.isLoading}>\n <stzh-loader label={this.loadingText}></stzh-loader>\n </stzh-overlay>\n\n {this.geopositionError && (\n <stzh-message\n type=\"error\"\n label={this.geopositionError}\n ></stzh-message>\n )}\n\n {(this.items.length > 0 || this.meta) && (\n <Fragment>\n <div class=\"stzh-poilist__header\">\n <stzh-text size=\"micro\">\n {this.getNumberOfLoadedItems()} {this.localization.of}{\" \"}\n {this.meta.totalItems}\n </stzh-text>\n <stzh-dropdown\n label=\"Sortierung\"\n hide-optional={true}\n variant=\"plain\"\n noSearch={true}\n inline={true}\n noWrap={true}\n onStzhChange={this.onSortChange}\n items={\n Array.isArray(this.activeSorting)\n ? this.activeSorting\n : [this.activeSorting]\n }\n options={this.dropdownOptions}\n ></stzh-dropdown>\n </div>\n\n <stzh-cardlist layout=\"teasers\">\n {this.items.map((item) => (\n <stzh-poicard item={item}></stzh-poicard>\n ))}\n </stzh-cardlist>\n\n {this.meta.currentPage !== this.meta.totalPages && (\n <div class=\"stzh-poilist__show-more\">\n <stzh-button\n variant=\"secondary\"\n label={this.localization.showMore}\n onClick={this.handleMoreClick}\n ></stzh-button>\n </div>\n )}\n </Fragment>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/stzh-components/p-b75800da.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as a,h as t,a as i}from"./p-c7bfac7a.js";const e=':host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host ,:host ::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--color:var(--stzh-color-black);--background-color:transparent;--heading-background-color:transparent;--padding-left:var(--stzh-section-padding-left, 0px);--padding-right:var(--stzh-section-padding-right, 0px);--padding-top:var(--stzh-section-padding-top, var(--stzh-space-large));--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-large));--margin-top:var(--stzh-section-margin-top, 0px);--margin-bottom:var(--stzh-section-margin-bottom, 0px);--margin-top:var(--stzh-section-margin-top, var(--stzh-space-large));--margin-bottom:var(--stzh-section-margin-bottom, var(--stzh-space-large))}@media screen and (min-width: 600px){:host{--padding-top:var(--stzh-section-padding-top, var(--stzh-space-xlarge));--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xlarge))}}@media screen and (min-width: 1260px){:host{--padding-top:var(--stzh-section-padding-top, var(--stzh-space-xxxlarge));--padding-bottom:var(--stzh-section-padding-bottom, var(--stzh-space-xxxlarge));--margin-top:var(--stzh-section-margin-top, var(--stzh-space-xxxlarge));--margin-bottom:var(--stzh-section-margin-bottom, var(--stzh-space-xxxlarge))}}:host ::slotted(stzh-heading){margin-top:var(--stzh-space-xsmall);margin-bottom:var(--stzh-space-small)}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-top:var(--stzh-space-medium)}}@media screen and (min-width: 900px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host ::slotted(stzh-heading){margin-bottom:var(--stzh-space-large)}}:host(:where([breakout]:not([breakout="default"]))){position:relative;left:50%;right:50%;margin-left:calc(-50vw + var(--stzh-scrollbar-width) / 2);margin-right:calc(-50vw + var(--stzh-scrollbar-width) / 2);width:calc(100vw - var(--stzh-scrollbar-width));max-width:calc(100vw - var(--stzh-scrollbar-width))}:host(:where([background]:not([background="default"]))){--padding-top:var(--stzh-section-background-padding-top, var(--stzh-space-xlarge));--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-xlarge));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-xlarge))}@media screen and (min-width: 600px){:host(:where([background]:not([background="default"]))){--padding-top:var(--stzh-section-background-padding-top, var(--stzh-space-xxlarge));--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxlarge))}}@media screen and (min-width: 1260px){:host(:where([background]:not([background="default"]))){--padding-top:var(--stzh-section-background-padding-top, var(--stzh-space-xxxxlarge));--padding-bottom:var(--stzh-section-background-padding-bottom, var(--stzh-space-xxxxlarge));--margin-top:var(--stzh-section-background-margin-top, var(--stzh-space-xxxxlarge));--margin-bottom:var(--stzh-section-background-margin-bottom, var(--stzh-space-xxxxlarge))}}:host([background=secondary]){--background-color:var(--stzh-color-secondary20)}:host([background=primary]){--background-color:var(--stzh-color-primary70)}:host([variant=highlight]){--padding-left:var(--stzh-space-small);--padding-right:var(--stzh-space-small);--padding-top:var(--stzh-space-xlarge);--padding-bottom:var(--stzh-space-xlarge);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-left:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-right:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){:host([variant=highlight]){--padding-bottom:var(--stzh-space-xxxlarge)}}:host([variant=contextbox]){--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium);--color:var(--stzh-section-highlight-color);--background-color:var(--stzh-section-highlight-background-color);--heading-background-color:var(--stzh-color-secondary40);--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=contextbox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=contextbox]):last-child{margin-bottom:0}:host([variant=greybox]){--background-color:var(--stzh-color-grey10);--padding-left:var(--stzh-space-xxlarge);--padding-right:var(--stzh-space-xxlarge);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-left:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-left:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-right:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-right:var(--stzh-space-xxxxlarge)}}@media screen and (min-width: 600px){:host([variant=greybox]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=greybox]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=greybox]):last-child{margin-bottom:0}:host([variant=poimax]){--background-color:var(--stzh-color-grey10);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:var(--stzh-space-medium);--padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-right:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host([variant=poimax]){--padding-bottom:var(--stzh-space-xxlarge)}}:host([variant=poimax]):last-child{margin-bottom:0}:host([margin-top=none]){--margin-top:0px}:host([margin-bottom=none]){--margin-bottom:0px}:host([padding-top=none]){--padding-top:0px}:host([padding-bottom=none]){--padding-bottom:0px}.stzh-section{background-color:var(--background-color)}.stzh-section__heading{display:flex;flex-direction:column;background-color:var(--heading-background-color);padding-left:var(--padding-left);padding-right:var(--padding-right)}.stzh-section__wrapper{padding-left:var(--padding-left);padding-right:var(--padding-right);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);margin-top:var(--margin-top);margin-bottom:var(--margin-bottom);--stzh-base-color:var(--color)}.stzh-section--is-breakout .stzh-section__outer{margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2rem;margin-right:2rem}}@media screen and (min-width: 900px){.stzh-section--is-breakout .stzh-section__outer{margin-left:2.5rem;margin-right:2.5rem}}@media screen and (min-width: 1260px){.stzh-section--is-breakout .stzh-section__outer{margin-left:4rem;margin-right:4rem}}@media screen and (min-width: 1600px){.stzh-section--is-breakout .stzh-section__outer{margin-left:auto;margin-right:auto;max-width:84.25rem}}';const o=class{constructor(t){a(this,t);this.variant="default";this.background="default";this.marginTop="default";this.marginBottom="default";this.paddingTop="default";this.paddingBottom="default";this.breakout=false}render(){return t(i,null,t("section",{class:{"stzh-section":true,[`stzh-section--is-breakout`]:this.breakout,[`stzh-section--${this.variant}`]:!!this.variant,[`stzh-section--margin-bottom-${this.marginBottom}`]:!!this.marginBottom}},t("div",{class:"stzh-section__outer"},t("div",{class:"stzh-section__heading"},t("slot",{name:"heading"})),t("div",{class:"stzh-section__wrapper"},t("slot",null)))))}};o.style=e;export{o as stzh_section};
2	+ //# sourceMappingURL=p-b75800da.entry.js.map

package/dist/stzh-components/p-b75800da.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["stzhSectionCss","StzhSection","render","h","Host","class","this","breakout","variant","marginBottom","name"],"sources":["src/components/stzh-section/stzh-section.scss?tag=stzh-section&encapsulation=shadow","src/components/stzh-section/stzh-section.tsx"],"sourcesContent":["/**\n * @prop --color: Color of section\n * @prop --background-color: Background color of section\n * @prop --padding-left: Left padding of section\n * @prop --padding-right: Right padding of section\n * @prop --padding-top: Top padding of section\n * @prop --padding-bottom: Bottom padding section\n *\n * @prop --stzh-section-highlight-color: **Global**: Color of section when highlight variant is used\n * @prop --stzh-section-highlight-background-color: **Global**: Background color of section when highlight variant is used\n */\n\n :host {\n --color: #{$colorBlack};\n --background-color: transparent;\n --heading-background-color: transparent;\n\n --padding-left: var(--stzh-section-padding-left, 0px);\n --padding-right: var(--stzh-section-padding-right, 0px);\n --padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner')});\n --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner')});\n\n --margin-top: var(--stzh-section-margin-top, 0px);\n --margin-bottom: var(--stzh-section-margin-bottom, 0px);\n\n --margin-top: var(--stzh-section-margin-top, #{spaceCurveValue('section-inner')});\n --margin-bottom: var(--stzh-section-margin-bottom, #{spaceCurveValue('section-inner')});\n \n @include mq($from: small) {\n --padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'small')});\n --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'small')});\n }\n\n @include mq($from: large) {\n --padding-top: var(--stzh-section-padding-top, #{spaceCurveValue('section-inner', 'large')});\n --padding-bottom: var(--stzh-section-padding-bottom, #{spaceCurveValue('section-inner', 'large')});\n\n --margin-top: var(--stzh-section-margin-top, #{spaceCurveValue('section-inner', 'large')});\n --margin-bottom: var(--stzh-section-margin-bottom, #{spaceCurveValue('section-inner', 'large')});\n }\n\n ::slotted(stzh-heading) {\n @include spaceCurve('margin-top', 'tiny');\n @include spaceCurve('margin-bottom', 'small');\n }\n}\n\n/* Breakout */\n\n:host(:where([breakout]:not([breakout=\"default\"]))) {\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n margin-right: calc(-50vw + var(--stzh-scrollbar-width) / 2);\n width: calc(100vw - var(--stzh-scrollbar-width));\n max-width: calc(100vw - var(--stzh-scrollbar-width));\n}\n\n/* Background variants */\n\n:host(:where([background]:not([background=\"default\"]))) {\n --padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner')});\n --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner')});\n\n --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-inner')});\n --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-inner')});\n\n @include mq($from: small) {\n --padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'small')});\n --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'small')});\n }\n\n @include mq($from: large) {\n --padding-top: var(--stzh-section-background-padding-top, #{spaceCurveValue('background-section-inner', 'large')});\n --padding-bottom: var(--stzh-section-background-padding-bottom, #{spaceCurveValue('background-section-inner', 'large')});\n\n --margin-top: var(--stzh-section-background-margin-top, #{spaceCurveValue('background-section-inner', 'large')});\n --margin-bottom: var(--stzh-section-background-margin-bottom, #{spaceCurveValue('background-section-inner', 'large')});\n }\n}\n\n:host([background=\"secondary\"]) {\n --background-color: #{$colorSecondary20};\n}\n\n:host([background=\"primary\"]) {\n --background-color: #{$colorPrimary70};\n}\n\n/* Highlight variant */\n\n:host([variant=\"highlight\"]) {\n @include spaceCurve('--padding-left', 'small');\n @include spaceCurve('--padding-right', 'small');\n @include spaceCurve('--padding-top', 'medium');\n @include spaceCurve('--padding-bottom', 'medium');\n\n --color: #{$sectionHighlightColor};\n --background-color: #{$sectionHighlightBackgroundColor};\n --heading-background-color: #{$colorSecondary40};\n\n // disable nested section paddings and margins\n --stzh-section-padding-top: 0px;\n --stzh-section-padding-bottom: 0px;\n --stzh-section-margin-top: 0px;\n --stzh-section-margin-bottom: 0px;\n}\n\n/* Contextbox variant */\n\n:host([variant=\"contextbox\"]) {\n @include spaceCurve('--padding-left', 'regular');\n @include spaceCurve('--padding-right', 'regular');\n @include spaceCurve('--padding-top', 'regular');\n @include spaceCurve('--padding-bottom', 'regular');\n\n --color: #{$sectionHighlightColor};\n --background-color: #{$sectionHighlightBackgroundColor};\n --heading-background-color: #{$colorSecondary40};\n\n // disable nested section paddings and margins\n --stzh-section-padding-top: 0px;\n --stzh-section-padding-bottom: 0px;\n --stzh-section-margin-top: 0px;\n --stzh-section-margin-bottom: 0px;\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Greybox variant */\n\n:host([variant=\"greybox\"]) {\n --background-color: #{$colorGrey10};\n @include spaceCurve('--padding-left', 'large');\n @include spaceCurve('--padding-right', 'large');\n @include spaceCurve('--padding-top', 'regular');\n @include spaceCurve('--padding-bottom', 'regular');\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n:host([variant=\"poimax\"]) {\n --background-color: #{$colorGrey10};\n @include spaceCurve('--padding-left', 'regular');\n @include spaceCurve('--padding-right', 'regular');\n @include spaceCurve('--padding-top', 'regular');\n @include spaceCurve('--padding-bottom', 'regular');\n\n &:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Margin variants */\n\n:host([margin-top=\"none\"]) {\n --margin-top: 0px;\n}\n\n:host([margin-bottom=\"none\"]) {\n --margin-bottom: 0px;\n}\n\n/* Padding variants */\n\n:host([padding-top=\"none\"]) {\n --padding-top: 0px;\n}\n\n:host([padding-bottom=\"none\"]) {\n --padding-bottom: 0px;\n}\n\n.stzh-section {\n background-color: var(--background-color);\n\n &__heading {\n display: flex;\n flex-direction: column;\n background-color: var(--heading-background-color);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n }\n\n &__wrapper {\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n\n margin-top: var(--margin-top);\n margin-bottom: var(--margin-bottom);\n\n --stzh-base-color: var(--color);\n }\n\n &--is-breakout &__outer {\n @include container;\n }\n}\n","import { Component, Host, Prop, h } from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n * @slot heading - Slot for `stzh-heading` element\n */\n@Component({\n tag: \"stzh-section\",\n styleUrl: \"stzh-section.scss\",\n shadow: true,\n})\nexport class StzhSection {\n /** Variant */\n @Prop({ reflect: true }) variant: \"default\" | \"highlight\" | \"contextbox\" | \"greybox\" | \"poimax\" = \"default\";\n\n /** Background color */\n @Prop({ reflect: true }) background: \"default\" | \"secondary\" = \"default\";\n\n /** Margin top spacing */\n @Prop({ reflect: true }) marginTop: \"default\" | \"none\" = \"default\";\n\n /** Margin bottom spacing */\n @Prop({ reflect: true }) marginBottom: \"default\" | \"none\" = \"default\";\n\n /** Padding top spacing */\n @Prop({ reflect: true }) paddingTop: \"default\" | \"none\" = \"default\";\n\n /** Padding bottom spacing */\n @Prop({ reflect: true }) paddingBottom: \"default\" | \"none\" = \"default\";\n\n /** Whether to breakout container */\n @Prop({ reflect: true }) breakout: boolean = false;\n\n render() {\n return (\n <Host>\n <section\n class={{\n \"stzh-section\": true,\n [`stzh-section--is-breakout`]: this.breakout,\n [`stzh-section--${this.variant}`]: !!this.variant,\n [`stzh-section--margin-bottom-${this.marginBottom}`]: !!this.marginBottom,\n }}\n >\n <div class=\"stzh-section__outer\">\n <div class=\"stzh-section__heading\">\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"stzh-section__wrapper\">\n <slot></slot>\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,0wW,MCWVC,EAAW,M,sCAE4E,U,gBAGnC,U,eAGN,U,kBAGG,U,gBAGF,U,mBAGG,U,cAGhB,K,CAE7C,MAAAC,GACE,OACEC,EAACC,EAAI,KACHD,EAAA,WACEE,MAAO,CACL,eAAgB,KAChB,CAAC,6BAA8BC,KAAKC,SACpC,CAAC,iBAAiBD,KAAKE,aAAcF,KAAKE,QAC1C,CAAC,+BAA+BF,KAAKG,kBAAmBH,KAAKG,eAG/DN,EAAA,OAAKE,MAAM,uBACTF,EAAA,OAAKE,MAAM,yBACTF,EAAA,QAAMO,KAAK,aAEbP,EAAA,OAAKE,MAAM,yBACTF,EAAA,gB"}