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

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

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

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const stzhHeadingCss = ".sc-stzh-heading-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-heading-h{display:none}.sc-stzh-heading-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-heading-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-heading-h *.sc-stzh-heading,.sc-stzh-heading-h *.sc-stzh-heading::before,.sc-stzh-heading-h *.sc-stzh-heading::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-heading-h .has-focus.sc-stzh-heading{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-heading-h .stzh-fylingfocus-focused.sc-stzh-heading{outline-style:none !important}.sc-stzh-heading-h .stzh-fylingfocus-focused.sc-stzh-heading::-moz-focus-inner{border:0 !important}.sc-stzh-heading-h{width:100%;--color:var(--stzh-heading-color);color:var(--color)}.stzh-heading.sc-stzh-heading{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--color);margin:0}@media screen and (min-width: 600px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-heading--curve-caption.sc-stzh-heading{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-heading-line-height, var(--stzh-font-nano-heading-line-height));letter-spacing:var(--stzh-font-curve-caption-default-heading-letter-spacing, var(--stzh-font-nano-heading-letter-spacing))}@media screen and (min-width: 900px){.stzh-heading--curve-caption.sc-stzh-heading{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-heading-line-height, var(--stzh-font-micro-heading-line-height));letter-spacing:var(--stzh-font-curve-caption-medium-heading-letter-spacing, var(--stzh-font-micro-heading-letter-spacing))}}.stzh-heading--curve-lead.sc-stzh-heading{font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-lead-default-heading-letter-spacing)}@media screen and (min-width: 1260px){.stzh-heading--curve-lead.sc-stzh-heading{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-lead-large-heading-letter-spacing)}}.stzh-heading--curve-p2.sc-stzh-heading{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-heading-line-height, var(--stzh-font-micro-heading-line-height));letter-spacing:var(--stzh-font-curve-p2-default-heading-letter-spacing, var(--stzh-font-micro-heading-letter-spacing))}@media screen and (min-width: 900px){.stzh-heading--curve-p2.sc-stzh-heading{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-heading-letter-spacing)}}.stzh-heading--curve-p1.sc-stzh-heading{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-default-heading-letter-spacing)}@media screen and (min-width: 900px){.stzh-heading--curve-p1.sc-stzh-heading{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-heading-letter-spacing)}}.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-default-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-hero-small-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-large-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-ultra-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-ultra-heading-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-ultra-heading-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}";
+const stzhHeadingCss = ".sc-stzh-heading-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-heading-h{display:none}.sc-stzh-heading-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-heading-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-heading-h *.sc-stzh-heading,.sc-stzh-heading-h *.sc-stzh-heading::before,.sc-stzh-heading-h *.sc-stzh-heading::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-heading-h .has-focus.sc-stzh-heading{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-heading-h .stzh-fylingfocus-focused.sc-stzh-heading{outline-style:none !important}.sc-stzh-heading-h .stzh-fylingfocus-focused.sc-stzh-heading::-moz-focus-inner{border:0 !important}.sc-stzh-heading-h{width:100%;--color:var(--stzh-heading-color);color:var(--color)}.sc-stzh-heading-h .sc-stzh-heading-s>a,.sc-stzh-heading-h .sc-stzh-heading-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-heading-h .sc-stzh-heading-s>a:hover,.sc-stzh-heading-h .sc-stzh-heading-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)}.sc-stzh-heading-h .sc-stzh-heading-s>a:hover,.sc-stzh-heading-h .sc-stzh-heading-s a:hover{color:var(--stzh-link-hover-color)}.stzh-heading.sc-stzh-heading{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing);color:var(--color);margin:0}@media screen and (min-width: 600px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--level-3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-heading--level-4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-heading--curve-caption.sc-stzh-heading{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-heading-line-height, var(--stzh-font-nano-heading-line-height));letter-spacing:var(--stzh-font-curve-caption-default-heading-letter-spacing, var(--stzh-font-nano-heading-letter-spacing))}@media screen and (min-width: 900px){.stzh-heading--curve-caption.sc-stzh-heading{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-heading-line-height, var(--stzh-font-micro-heading-line-height));letter-spacing:var(--stzh-font-curve-caption-medium-heading-letter-spacing, var(--stzh-font-micro-heading-letter-spacing))}}.stzh-heading--curve-lead.sc-stzh-heading{font-size:var(--stzh-font-curve-lead-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-lead-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-lead-default-heading-letter-spacing)}@media screen and (min-width: 1260px){.stzh-heading--curve-lead.sc-stzh-heading{font-size:var(--stzh-font-curve-lead-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-lead-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-lead-large-heading-letter-spacing)}}.stzh-heading--curve-p2.sc-stzh-heading{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-heading-line-height, var(--stzh-font-micro-heading-line-height));letter-spacing:var(--stzh-font-curve-p2-default-heading-letter-spacing, var(--stzh-font-micro-heading-letter-spacing))}@media screen and (min-width: 900px){.stzh-heading--curve-p2.sc-stzh-heading{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-heading-letter-spacing)}}.stzh-heading--curve-p1.sc-stzh-heading{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-default-heading-letter-spacing)}@media screen and (min-width: 900px){.stzh-heading--curve-p1.sc-stzh-heading{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-heading-letter-spacing)}}.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-heading-line-height, var(--stzh-font-milli-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-small-heading-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h4-large-heading-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-heading--curve-h4.sc-stzh-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h3.sc-stzh-heading{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-default-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h2-default-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h2-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-small-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h2-small-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h2-small-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-medium-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h2-medium-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h2-medium-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h2.sc-stzh-heading{font-size:var(--stzh-font-curve-h2-ultra-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h2-ultra-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h2-ultra-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-default-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h1-default-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h1-default-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-small-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h1-small-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h1-small-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-medium-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-h1-medium-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-h1-medium-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-large-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-h1-large-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-h1-large-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-h1.sc-stzh-heading{font-size:var(--stzh-font-curve-h1-ultra-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-h1-ultra-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-h1-ultra-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-default-font-size, var(--stzh-font-kilo-font-size));line-height:var(--stzh-font-curve-hero-default-heading-line-height, var(--stzh-font-kilo-text-line-height));letter-spacing:var(--stzh-font-curve-hero-default-heading-letter-spacing, var(--stzh-font-kilo-text-letter-spacing))}@media screen and (min-width: 600px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-small-font-size, var(--stzh-font-mega-font-size));line-height:var(--stzh-font-curve-hero-small-heading-line-height, var(--stzh-font-mega-text-line-height));letter-spacing:var(--stzh-font-curve-hero-small-heading-letter-spacing, var(--stzh-font-mega-text-letter-spacing))}}@media screen and (min-width: 1260px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-large-font-size, var(--stzh-font-giga-font-size));line-height:var(--stzh-font-curve-hero-large-heading-line-height, var(--stzh-font-giga-text-line-height));letter-spacing:var(--stzh-font-curve-hero-large-heading-letter-spacing, var(--stzh-font-giga-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-heading--curve-hero.sc-stzh-heading{font-size:var(--stzh-font-curve-hero-ultra-font-size, var(--stzh-font-hero-font-size));line-height:var(--stzh-font-curve-hero-ultra-heading-line-height, var(--stzh-font-hero-text-line-height));letter-spacing:var(--stzh-font-curve-hero-ultra-heading-letter-spacing, var(--stzh-font-hero-text-letter-spacing))}}";
 const StzhHeading = /*@__PURE__*/ proxyCustomElement(class StzhHeading extends HTMLElement {
   constructor() {

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

	@@ -1 +1 @@
1	- {"file":"stzh-heading2.js","mappings":";;AAAA,MAAM,cAAc,GAAG~~,g/lBAAg/lB~~;;~~MCiB1/lB~~,WAAW;;;;iBAEkC,GAAG;iBAGJ,MAAM;;EAE7D,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;IACjC,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;MACnD,CAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;KACpD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,EAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IACrB,eAAa,CACL,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-heading/stzh-heading.scss?tag=stzh-heading&encapsulation=scoped","src/components/stzh-heading/stzh-heading.tsx"],"sourcesContent":["/*\n @prop --color: Color of heading\n \n @prop --stzh-heading-color: Global: Color of heading\n /\n\n:host {\n width: 100%;\n\n --color: #{$headingColor};\n color: var(--color);\n\n // &[level=\"4\"],\n // &[curve=\"h4\"] {\n // --color: #{$baseColor};\n // }\n}\n\n.stzh-heading {\n @include font('title');\n @include fontCurve('h2', 'heading'); // default\n color: var(--color);\n margin: 0;\n\n @for $i from 1 through 4 {\n &--level-#{$i} {\n @include fontCurve('h'+$i, 'heading');\n }\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName, 'heading');\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 - Text content\n /\n@Component({\n tag: \"stzh-heading\",\n styleUrl: \"stzh-heading.scss\",\n scoped: true\n})\nexport class StzhHeading {\n /* Heading level /\n @Prop({ reflect: true }) level: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n @Prop({ reflect: true }) curve: Font.Curves \| \"auto\" = \"auto\";\n\n render() {\n const Heading = `h${this.level}`;\n const classes = {\n \"stzh-heading\": true,\n [`stzh-heading--level-${this.level}`]: !!this.level,\n [`stzh-heading--curve-${this.curve}`]: !!this.curve\n };\n\n return (\n <Host>\n <Heading class={classes}>\n <slot></slot>\n </Heading>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-heading2.js","mappings":";;AAAA,MAAM,cAAc,GAAG,+9nBAA+9nB;;MCiBz+nB,WAAW;;;;iBAEkC,GAAG;iBAGJ,MAAM;;EAE7D,MAAM;IACJ,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;IACjC,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;MACnD,CAAC,uBAAuB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;KACpD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,EAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IACrB,eAAa,CACL,CACL,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-heading/stzh-heading.scss?tag=stzh-heading&encapsulation=scoped","src/components/stzh-heading/stzh-heading.tsx"],"sourcesContent":["/*\n @prop --color: Color of heading\n \n @prop --stzh-heading-color: Global: Color of heading\n /\n\n:host {\n width: 100%;\n\n --color: #{$headingColor};\n color: var(--color);\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\n &:hover {\n color: $linkHoverColor;\n }\n }\n\n // &[level=\"4\"],\n // &[curve=\"h4\"] {\n // --color: #{$baseColor};\n // }\n}\n\n.stzh-heading {\n @include font('title');\n @include fontCurve('h2', 'heading'); // default\n color: var(--color);\n margin: 0;\n\n @for $i from 1 through 4 {\n &--level-#{$i} {\n @include fontCurve('h'+$i, 'heading');\n }\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName, 'heading');\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 - Text content\n /\n@Component({\n tag: \"stzh-heading\",\n styleUrl: \"stzh-heading.scss\",\n scoped: true\n})\nexport class StzhHeading {\n /* Heading level /\n @Prop({ reflect: true }) level: \"1\" \| \"2\" \| \"3\" \| \"4\" = \"2\";\n\n /* Type of curve to overwrite the curve inherited from `level` attribute (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). */\n @Prop({ reflect: true }) curve: Font.Curves \| \"auto\" = \"auto\";\n\n render() {\n const Heading = `h${this.level}`;\n const classes = {\n \"stzh-heading\": true,\n [`stzh-heading--level-${this.level}`]: !!this.level,\n [`stzh-heading--curve-${this.curve}`]: !!this.curve\n };\n\n return (\n <Host>\n <Heading class={classes}>\n <slot></slot>\n </Heading>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -56,6 +56,14 @@ const StzhIframe = /*@__PURE__*/ proxyCustomElement(class StzhIframe extends HTM
       });
     };
     this.localization = undefined;
+    this.iframeId = undefined;
+    this.iframeErrorText = undefined;
+    this.name = undefined;
+    this.sandbox = undefined;
+    this.referrerpolicy = undefined;
+    this.allow = "autoplay; fullscreen";
+    this.width = undefined;
+    this.height = undefined;
     this.src = "";
     this.cookie = undefined;
     this.cookieExpires = 365;
@@ -82,7 +90,7 @@ const StzhIframe = /*@__PURE__*/ proxyCustomElement(class StzhIframe extends HTM
     }
   }
   async componentWillLoad() {
-    this.iframeId = `stzh-iframe-${iframeCounter++}`;
+    this.internalId = `stzh-iframe-${iframeCounter++}`;
     const cookieAccepted = js_cookie.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;
     if (((!this.cookie || cookieAccepted) && (this.skipPreviewIfCookieAccepted || this.skipPreview))
       || (!this.cookie && this.skipPreview)) {
@@ -117,7 +125,7 @@ const StzhIframe = /*@__PURE__*/ proxyCustomElement(class StzhIframe extends HTM
       "stzh-iframe": true,
     };
     return (h(Host, null, h("div", { class: classes }, this.view === "iframe" &&
-      h("iframe", { ref: (el) => (this.iframeElement = el), class: "stzh-iframe__iframe", src: this._src, allow: "autoplay; fullscreen", onLoad: this.handleIframeLoad }), h("button", { ref: (el) => (this.previewButtonElement = el), onClick: this.handlePreviewClick, "aria-label": this.previewLabel || this.localization.defaultPreviewLabel,
+      h("iframe", { id: this.iframeId, name: this.name, sandbox: this.sandbox, referrerPolicy: this.referrerpolicy, width: this.width, height: this.height, ref: (el) => (this.iframeElement = el), class: "stzh-iframe__iframe", src: this._src, allow: this.allow, onLoad: this.handleIframeLoad }, this.iframeErrorText), h("button", { ref: (el) => (this.previewButtonElement = el), onClick: this.handlePreviewClick, "aria-label": this.previewLabel || this.localization.defaultPreviewLabel,
       // disabled={this.view === "cookiewall"}
       class: {
         "stzh-iframe__preview": true,
@@ -130,7 +138,7 @@ const StzhIframe = /*@__PURE__*/ proxyCustomElement(class StzhIframe extends HTM
       h("div", { class: {
           "stzh-iframe__cookiewall": true,
           "is-visible": this.view === "cookiewall"
-        } }, h("div", { class: "stzh-iframe__cookiewall-content" }, h("div", { class: "stzh-iframe__cookiewall-text", id: `${this.iframeId}-cookiewall-text` }, this.cookieConfirmText ? this.cookieConfirmText : h("slot", { name: "cookiewall-text" })), h("stzh-button", { ref: (el) => (this.confirmButtonElement = el), class: "stzh-iframe__cookiewall-button", size: "small", a11yDescribedby: `${this.iframeId}-cookiewall-text`, icon: this.cookieConfirmIcon, label: this.cookieConfirmLabel || this.localization.defaultConfirmLabel, onClick: this.handleCookiewallConfirmClick })), !this.skipPreview &&
+        } }, h("div", { class: "stzh-iframe__cookiewall-content" }, h("div", { class: "stzh-iframe__cookiewall-text", id: `${this.internalId}-cookiewall-text` }, this.cookieConfirmText ? this.cookieConfirmText : h("slot", { name: "cookiewall-text" })), h("stzh-button", { ref: (el) => (this.confirmButtonElement = el), class: "stzh-iframe__cookiewall-button", size: "small", a11yDescribedby: `${this.internalId}-cookiewall-text`, icon: this.cookieConfirmIcon, label: this.cookieConfirmLabel || this.localization.defaultConfirmLabel, onClick: this.handleCookiewallConfirmClick })), !this.skipPreview &&
         h("button", { class: "stzh-iframe__cookiewall-close", onClick: this.handleCookiewallCloseClick, "aria-label": this.localization.confirmCloseLabel }, h("stzh-icon", { class: "stzh-iframe__cookiewall-close-icon", name: "close" }))))));
   }
   get element() { return this; }
@@ -141,6 +149,14 @@ const StzhIframe = /*@__PURE__*/ proxyCustomElement(class StzhIframe extends HTM
   static get style() { return stzhIframeCss; }
 }, [6, "stzh-iframe", {
     "localization": [16],
+    "iframeId": [1, "iframe-id"],
+    "iframeErrorText": [1, "iframe-error-text"],
+    "name": [1],
+    "sandbox": [1],
+    "referrerpolicy": [1],
+    "allow": [1],
+    "width": [1],
+    "height": [1],
     "src": [1],
     "cookie": [1],
     "cookieExpires": [2, "cookie-expires"],

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

	@@ -1 +1 @@
1	- {"file":"stzh-iframe2.js","mappings":"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","names":["Cookies"],"sources":["src/components/stzh-iframe/stzh-iframe.scss?tag=stzh-iframe&encapsulation=scoped","src/components/stzh-iframe/stzh-iframe.tsx"],"sourcesContent":[":host {\n position: relative;\n\n ::slotted([slot=\"preview-logo\"]) {\n width: 100%;\n }\n\n ::slotted([slot=\"preview-image\"]) {\n position: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n }\n\n ::slotted([slot=\"cookiewall-text\"]) {\n margin: 0;\n\n p {\n margin: 0;\n\n &:not(:last-child) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n }\n}\n\n.stzh-iframe {\n &__iframe,\n &__cookiewall,\n &__preview {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n &__iframe,\n &__preview {\n\t\tborder: none;\n }\n\n &__preview,\n &__cookiewall {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: space('medium');\n visibility: hidden;\n\n &.is-visible {\n visibility: visible;\n }\n }\n\n &__preview {\n z-index: 1;\n appearance: none;\n cursor: pointer;\n background-color: $colorGrey20;\n }\n\n &__preview-image-wrapper:not(:empty) + &__preview-logo-wrapper {\n display: none;\n }\n\n &__preview-logo-wrapper {\n @include spaceCurve('top', 'medium');\n @include spaceCurve('left', 'medium');\n\t\tposition: absolute;\n\t\twidth: 45%;\n\t}\n\n\t&__preview-run {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tbackground-color: $colorPrimary;\n color: $colorWhite;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: $formInputHeightSmall;\n\t\theight: $formInputHeightSmall;\n visibility: hidden;\n transition: background-color $baseTransitionAnimationSpeed;\n\n &.is-visible {\n visibility: visible;\n }\n\n\t\t@include mq($from: medium) {\n\t\t\twidth: $formInputHeight;\n\t\t\theight: $formInputHeight;\n\t\t}\n\t}\n\n &__preview:hover &__preview-run {\n background-color: $colorSecondary60;\n }\n\n &__preview-run-icon {\n @include mq($from: medium) {\n --size: #{iconSize('large')};\n }\n }\n\n\t&__cookiewall {\n @include spaceCurve('padding-left', 'regular');\n @include spaceCurve('padding-right', 'regular');\n z-index: 2;\n\t\ttext-align: center;\n background-color: $colorBlack60op;\n color: $colorWhite;\n\n @include mq($from: medium) {\n @include gridGutter;\n display: grid;\n grid-template-areas: \". content content content content content content .\";\n grid-template-columns: repeat(8, minmax(0, 1fr));\n padding-left: 0;\n padding-right: 0;\n }\n\t}\n\n &__cookiewall-content {\n @include mq($from: medium) {\n grid-area: content;\n }\n }\n\n &__cookiewall-text {\n @include fontSize('milli');\n @include spaceCurve('padding-top', 'small');\n @include spaceCurve('padding-bottom', 'small');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n\t&__cookiewall-close {\n top: 0;\n right: 0;\n\t\tposition: absolute;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: space('xsmall');\n background-color: transparent;\n color: $colorWhite;\n cursor: pointer;\n\t}\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhIframeView,\n StzhIframePreviewSkipEvent,\n StzhIframeViewChangeEvent,\n} from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/*\n @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n /\n@Component({\n tag: \"stzh-iframe\",\n styleUrl: \"stzh-iframe.scss\",\n scoped: true\n})\nexport class StzhIframe {\n /* Translation strings /\n @Prop() localization: StzhIframeLocalizedText;\n\n /* `src` of iframe /\n @Prop() src: string = \"\";\n private _src: string \| null = null;\n\n /\n Cookie name (if not empty, the user will be shown a cookie wall)\n * Will be prefixed with `stzh-components-iframe-confirm-`.\n /\n @Prop() cookie: string;\n\n /\n Number of days the cookie is valid for.\n * If omitted or set to null, the cookie expires when browser is closed.\n * Maximum is on year (365 days, is default).\n /\n @Prop() cookieExpires: number \| null = 365;\n\n /* Confirm button icon /\n @Prop() cookieConfirmIcon: string;\n\n /* Confirm button label /\n @Prop() cookieConfirmLabel: string;\n\n /* Confirm text (use instead of `cookiewall-text` slot) /\n @Prop() cookieConfirmText: string;\n\n /* Preview label /\n @Prop() previewLabel: string;\n\n /* Preview icon /\n @Prop() previewIcon: string = \"external-link\";\n\n /* Whether preview should be skipped, if user has passed the cookiewall before /\n @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n /* Whether preview should always be skipped /\n @Prop() skipPreview: boolean = false;\n\n @Element() element: HTMLStzhIframeElement;\n\n @State() view: StzhIframeView = \"preview\";\n\n /* Preview skip (only gets executed if it goes directly to iframe and not cookiewall) /\n @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n /* View change */\n @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n @Watch(\"src\")\n srcWatcher(newValue: string) {\n if (this.view === \"iframe\") {\n this._src = newValue;\n }\n }\n\n @Watch(\"view\")\n viewWatcher(newValue: StzhIframeView) {\n if (newValue === \"iframe\") {\n this._src = this.src;\n } else {\n this._src = null;\n }\n }\n\n private iframeId: string;\n private iframeElement: HTMLIFrameElement;\n private previewButtonElement: HTMLButtonElement;\n private confirmButtonElement: HTMLStzhButtonElement;\n private updateFocus: boolean = false;\n\n private handleIframeLoad = () => {\n if (this.updateFocus) {\n this.iframeElement.focus();\n this.updateFocus = false;\n }\n }\n\n private handleCookiewallCloseClick = () => {\n this.updateFocus = true;\n this.view = \"preview\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handleCookiewallConfirmClick = () => {\n Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n expires: this.cookieExpires \|\| null\n });\n\n this.updateFocus = true;\n this.view = \"iframe\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handlePreviewClick = () => {\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n this.updateFocus = true;\n\n if (!this.cookie \|\| cookieAccepted) {\n this.view = \"iframe\";\n } else {\n this.view = \"cookiewall\";\n }\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n async componentWillLoad() {\n this.iframeId = `stzh-iframe-${iframeCounter++}`;\n\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n\n if (\n ((!this.cookie \|\| cookieAccepted) && (this.skipPreviewIfCookieAccepted \|\| this.skipPreview))\n \|\| (!this.cookie && this.skipPreview)\n ) {\n this.stzhPreviewSkip.emit({\n component: \"stzh-iframe\"\n });\n\n this.view = \"iframe\";\n } else if (this.cookie && this.skipPreview) {\n this.view = \"cookiewall\";\n }\n\n this.viewWatcher(this.view);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n }\n }\n\n async componentDidRender() {\n if (this.updateFocus) {\n if (this.view === \"iframe\") {\n // wait for iframe load event (handleIframeLoad)\n } else if (this.view === \"preview\") {\n this.previewButtonElement.focus();\n this.updateFocus = false;\n } else if (this.view === \"cookiewall\") {\n this.confirmButtonElement.focus();\n this.updateFocus = false;\n }\n }\n }\n\n render() {\n const classes = {\n \"stzh-iframe\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.view === \"iframe\" &&\n <iframe\n ref={(el) => (this.iframeElement = el as HTMLIFrameElement)}\n class=\"stzh-iframe__iframe\"\n src={this._src}\n allow=\"autoplay; fullscreen\"\n onLoad={this.handleIframeLoad}\n ></iframe>\n }\n\n <button\n ref={(el) => (this.previewButtonElement = el as HTMLButtonElement)}\n onClick={this.handlePreviewClick}\n aria-label={this.previewLabel \|\| this.localization.defaultPreviewLabel}\n // disabled={this.view === \"cookiewall\"}\n class={{\n \"stzh-iframe__preview\": true,\n \"is-visible\": this.view === \"preview\" \|\| this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__preview-image-wrapper\">\n <slot name=\"preview-image\"></slot>\n </div>\n\n <div class=\"stzh-iframe__preview-logo-wrapper\">\n <slot name=\"preview-logo\"></slot>\n </div>\n\n {this.previewIcon &&\n <div class={{\n \"stzh-iframe__preview-run\": true,\n \"is-visible\": this.view === \"preview\"\n }}>\n <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n </div>\n }\n </button>\n\n {this.cookie &&\n <div\n class={{\n \"stzh-iframe__cookiewall\": true,\n \"is-visible\": this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__cookiewall-content\">\n <div\n class=\"stzh-iframe__cookiewall-text\"\n id={`${this.iframeId}-cookiewall-text`}\n >\n {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n </div>\n\n <stzh-button\n ref={(el) => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n class=\"stzh-iframe__cookiewall-button\"\n size=\"small\"\n a11yDescribedby={`${this.iframeId}-cookiewall-text`}\n icon={this.cookieConfirmIcon}\n label={this.cookieConfirmLabel \|\| this.localization.defaultConfirmLabel}\n onClick={this.handleCookiewallConfirmClick}\n ></stzh-button>\n </div>\n\n {!this.skipPreview &&\n <button\n class=\"stzh-iframe__cookiewall-close\"\n onClick={this.handleCookiewallCloseClick}\n aria-label={this.localization.confirmCloseLabel}\n >\n <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-iframe2.js","mappings":";;;;;;AAAA,MAAM,aAAa,GAAG,i2PAAi2P;;ACqBv3P,MAAM,qBAAqB,GAAG,gCAAgC,CAAC;AAE/D,IAAI,aAAa,GAAG,CAAC,CAAC;MAYT,UAAU;;;;;;IAiDb,SAAI,GAAkB,IAAI,CAAC;IAkE3B,gBAAW,GAAY,KAAK,CAAC;IAE7B,qBAAgB,GAAG;MACzB,IAAI,IAAI,CAAC,WAAW,EAAE;QACpB,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;QAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;OAC1B;KACF,CAAA;IAEO,+BAA0B,GAAG;MACnC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;MACxB,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;MAEtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACvB,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,IAAI,CAAC,IAAI;OACjB,CAAC,CAAC;KACJ,CAAA;IAEO,iCAA4B,GAAG;MACrCA,SAAO,CAAC,GAAG,CAAC,GAAG,qBAAqB,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE,GAAG,EAAE;QAC1D,OAAO,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI;OACpC,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;MACxB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;MAErB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACvB,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,IAAI,CAAC,IAAI;OACjB,CAAC,CAAC;KACJ,CAAA;IAEO,uBAAkB,GAAG;MAC7B,MAAM,cAAc,GAAGA,SAAO,CAAC,GAAG,CAAC,GAAG,qBAAqB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,CAAC;MACrF,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;MAExB,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,cAAc,EAAE;QAClC,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;OACtB;WAAM;QACL,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;OAC1B;MAED,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;QACvB,SAAS,EAAE,aAAa;QACxB,KAAK,EAAE,IAAI,CAAC,IAAI;OACjB,CAAC,CAAC;KACJ,CAAA;;;;;;;iBA3HuB,sBAAsB;;;eASxB,EAAE;;yBAce,GAAG;;;;;uBAeZ,eAAe;uCAGE,KAAK;uBAGrB,KAAK;gBAIJ,SAAS;;EASzC,UAAU,CAAC,QAAgB;IACzB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;MAC1B,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;KACtB;GACF;EAGD,WAAW,CAAC,QAAwB;IAClC,IAAI,QAAQ,KAAK,QAAQ,EAAE;MACzB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC;KACtB;SAAM;MACL,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;KAClB;GACF;EAuDD,MAAM,iBAAiB;IACrB,IAAI,CAAC,UAAU,GAAG,eAAe,aAAa,EAAE,EAAE,CAAC;IAErD,MAAM,cAAc,GAAGA,SAAO,CAAC,GAAG,CAAC,GAAG,qBAAqB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,IAAI,KAAK,CAAC;IAErF,IACE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,cAAc,MAAM,IAAI,CAAC,2BAA2B,IAAI,IAAI,CAAC,WAAW,CAAC;UACvF,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,CAAC,EACrC;MACA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QACxB,SAAS,EAAE,aAAa;OACzB,CAAC,CAAC;MAEH,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;KACtB;SAAM,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,WAAW,EAAE;MAC1C,IAAI,CAAC,IAAI,GAAG,YAAY,CAAC;KAC1B;IAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAE5B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;GACF;EAED,MAAM,kBAAkB;IACtB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAE3B;WAAM,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;QAClC,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,CAAC;QAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;OAC1B;WAAM,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY,EAAE;QACrC,IAAI,CAAC,oBAAoB,CAAC,KAAK,EAAE,CAAC;QAClC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;OAC1B;KACF;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,aAAa,EAAE,IAAI;KACpB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IAChB,IAAI,CAAC,IAAI,KAAK,QAAQ;MACrB,cACE,EAAE,EAAE,IAAI,CAAC,QAAQ,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,EAC3D,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,IAAI,CAAC,IAAI,EACd,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,gBAAgB,IAC7B,IAAI,CAAC,eAAe,CAAU,EAGlC,cACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,oBAAoB,GAAG,EAAuB,CAAC,EAClE,OAAO,EAAE,IAAI,CAAC,kBAAkB,gBACpB,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,mBAAmB;;MAEtE,KAAK,EAAE;QACL,sBAAsB,EAAE,IAAI;QAC5B,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,YAAY;OACpE,IAED,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,EAEN,WAAK,KAAK,EAAC,mCAAmC,IAC5C,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B,EAEL,IAAI,CAAC,WAAW;MACf,WAAK,KAAK,EAAE;UACV,0BAA0B,EAAE,IAAI;UAChC,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;SACtC,IACC,iBAAW,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAE,IAAI,CAAC,WAAW,GAAc,CACjF,CAED,EAER,IAAI,CAAC,MAAM;MACV,WACE,KAAK,EAAE;UACL,yBAAyB,EAAE,IAAI;UAC/B,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY;SACzC,IAED,WAAK,KAAK,EAAC,iCAAiC,IAC1C,WACE,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,IAEvC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,GAAG,YAAM,IAAI,EAAC,iBAAiB,GAAQ,CACnF,EAEN,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,oBAAoB,GAAG,EAA2B,CAAC,EACtE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAC,OAAO,EACZ,eAAe,EAAE,GAAG,IAAI,CAAC,UAAU,kBAAkB,EACrD,IAAI,EAAE,IAAI,CAAC,iBAAiB,EAC5B,KAAK,EAAE,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,YAAY,CAAC,mBAAmB,EACvE,OAAO,EAAE,IAAI,CAAC,4BAA4B,GAC7B,CACX,EAEL,CAAC,IAAI,CAAC,WAAW;QAChB,cACE,KAAK,EAAC,+BAA+B,EACrC,OAAO,EAAE,IAAI,CAAC,0BAA0B,gBAC5B,IAAI,CAAC,YAAY,CAAC,iBAAiB,IAE/C,iBAAW,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAC,OAAO,GAAa,CACxE,CAEP,CAEJ,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["Cookies"],"sources":["src/components/stzh-iframe/stzh-iframe.scss?tag=stzh-iframe&encapsulation=scoped","src/components/stzh-iframe/stzh-iframe.tsx"],"sourcesContent":[":host {\n position: relative;\n\n ::slotted([slot=\"preview-logo\"]) {\n width: 100%;\n }\n\n ::slotted([slot=\"preview-image\"]) {\n position: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n }\n\n ::slotted([slot=\"cookiewall-text\"]) {\n margin: 0;\n\n p {\n margin: 0;\n\n &:not(:last-child) {\n @include spaceCurve('margin-bottom', 'small');\n }\n }\n }\n}\n\n.stzh-iframe {\n &__iframe,\n &__cookiewall,\n &__preview {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n &__iframe,\n &__preview {\n\t\tborder: none;\n }\n\n &__preview,\n &__cookiewall {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: space('medium');\n visibility: hidden;\n\n &.is-visible {\n visibility: visible;\n }\n }\n\n &__preview {\n z-index: 1;\n appearance: none;\n cursor: pointer;\n background-color: $colorGrey20;\n }\n\n &__preview-image-wrapper:not(:empty) + &__preview-logo-wrapper {\n display: none;\n }\n\n &__preview-logo-wrapper {\n @include spaceCurve('top', 'medium');\n @include spaceCurve('left', 'medium');\n\t\tposition: absolute;\n\t\twidth: 45%;\n\t}\n\n\t&__preview-run {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tbackground-color: $colorPrimary;\n color: $colorWhite;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: $formInputHeightSmall;\n\t\theight: $formInputHeightSmall;\n visibility: hidden;\n transition: background-color $baseTransitionAnimationSpeed;\n\n &.is-visible {\n visibility: visible;\n }\n\n\t\t@include mq($from: medium) {\n\t\t\twidth: $formInputHeight;\n\t\t\theight: $formInputHeight;\n\t\t}\n\t}\n\n &__preview:hover &__preview-run {\n background-color: $colorSecondary60;\n }\n\n &__preview-run-icon {\n @include mq($from: medium) {\n --size: #{iconSize('large')};\n }\n }\n\n\t&__cookiewall {\n @include spaceCurve('padding-left', 'regular');\n @include spaceCurve('padding-right', 'regular');\n z-index: 2;\n\t\ttext-align: center;\n background-color: $colorBlack60op;\n color: $colorWhite;\n\n @include mq($from: medium) {\n @include gridGutter;\n display: grid;\n grid-template-areas: \". content content content content content content .\";\n grid-template-columns: repeat(8, minmax(0, 1fr));\n padding-left: 0;\n padding-right: 0;\n }\n\t}\n\n &__cookiewall-content {\n @include mq($from: medium) {\n grid-area: content;\n }\n }\n\n &__cookiewall-text {\n @include fontSize('milli');\n @include spaceCurve('padding-top', 'small');\n @include spaceCurve('padding-bottom', 'small');\n @include spaceCurve('margin-bottom', 'regular');\n }\n\n\t&__cookiewall-close {\n top: 0;\n right: 0;\n\t\tposition: absolute;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: space('xsmall');\n background-color: transparent;\n color: $colorWhite;\n cursor: pointer;\n\t}\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n State,\n Watch,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n StzhIframeView,\n StzhIframePreviewSkipEvent,\n StzhIframeViewChangeEvent,\n} from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/*\n @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n /\n@Component({\n tag: \"stzh-iframe\",\n styleUrl: \"stzh-iframe.scss\",\n scoped: true\n})\nexport class StzhIframe {\n /* Translation strings /\n @Prop() localization: StzhIframeLocalizedText;\n\n /* Id of iframe /\n @Prop() iframeId: string;\n\n /* Error text of iframe if couldn't be loaded /\n @Prop() iframeErrorText: string;\n\n /\n Name of iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#name\n /\n @Prop() name: string;\n\n /\n Sandbox of iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#sandbox\n /\n @Prop() sandbox: string;\n\n /\n ReferrerPolicy of Iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#referrerpolicy\n /\n @Prop() referrerpolicy: \"no-referrer\"\n \| \"no-referrer-when-downgrade\"\n \| \"origin\"\n \| \"origin-when-cross-origin\"\n \| \"same-origin\"\n \| \"strict-origin\"\n \| \"strict-origin-when-cross-origin\"\n \| \"unsafe-url\";\n\n /\n Allow of Iframe\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#allow\n /\n @Prop() allow: string = \"autoplay; fullscreen\";\n\n /* Width of iframe /\n @Prop() width: string;\n\n /* Width of iframe /\n @Prop() height: string;\n\n /* `src` of iframe /\n @Prop() src: string = \"\";\n private _src: string \| null = null;\n\n /\n Cookie name (if not empty, the user will be shown a cookie wall)\n * Will be prefixed with `stzh-components-iframe-confirm-`.\n /\n @Prop() cookie: string;\n\n /\n Number of days the cookie is valid for.\n * If omitted or set to null, the cookie expires when browser is closed.\n * Maximum is on year (365 days, is default).\n /\n @Prop() cookieExpires: number \| null = 365;\n\n /* Confirm button icon /\n @Prop() cookieConfirmIcon: string;\n\n /* Confirm button label /\n @Prop() cookieConfirmLabel: string;\n\n /* Confirm text (use instead of `cookiewall-text` slot) /\n @Prop() cookieConfirmText: string;\n\n /* Preview label /\n @Prop() previewLabel: string;\n\n /* Preview icon /\n @Prop() previewIcon: string = \"external-link\";\n\n /* Whether preview should be skipped, if user has passed the cookiewall before /\n @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n /* Whether preview should always be skipped /\n @Prop() skipPreview: boolean = false;\n\n @Element() element: HTMLStzhIframeElement;\n\n @State() view: StzhIframeView = \"preview\";\n\n /* Preview skip (only gets executed if it goes directly to iframe and not cookiewall) /\n @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n /* View change */\n @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n @Watch(\"src\")\n srcWatcher(newValue: string) {\n if (this.view === \"iframe\") {\n this._src = newValue;\n }\n }\n\n @Watch(\"view\")\n viewWatcher(newValue: StzhIframeView) {\n if (newValue === \"iframe\") {\n this._src = this.src;\n } else {\n this._src = null;\n }\n }\n\n private internalId: string;\n private iframeElement: HTMLIFrameElement;\n private previewButtonElement: HTMLButtonElement;\n private confirmButtonElement: HTMLStzhButtonElement;\n private updateFocus: boolean = false;\n\n private handleIframeLoad = () => {\n if (this.updateFocus) {\n this.iframeElement.focus();\n this.updateFocus = false;\n }\n }\n\n private handleCookiewallCloseClick = () => {\n this.updateFocus = true;\n this.view = \"preview\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handleCookiewallConfirmClick = () => {\n Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n expires: this.cookieExpires \|\| null\n });\n\n this.updateFocus = true;\n this.view = \"iframe\";\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n private handlePreviewClick = () => {\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n this.updateFocus = true;\n\n if (!this.cookie \|\| cookieAccepted) {\n this.view = \"iframe\";\n } else {\n this.view = \"cookiewall\";\n }\n\n this.stzhViewChange.emit({\n component: \"stzh-iframe\",\n value: this.view\n });\n }\n\n async componentWillLoad() {\n this.internalId = `stzh-iframe-${iframeCounter++}`;\n\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) \|\| false;\n\n if (\n ((!this.cookie \|\| cookieAccepted) && (this.skipPreviewIfCookieAccepted \|\| this.skipPreview))\n \|\| (!this.cookie && this.skipPreview)\n ) {\n this.stzhPreviewSkip.emit({\n component: \"stzh-iframe\"\n });\n\n this.view = \"iframe\";\n } else if (this.cookie && this.skipPreview) {\n this.view = \"cookiewall\";\n }\n\n this.viewWatcher(this.view);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n }\n }\n\n async componentDidRender() {\n if (this.updateFocus) {\n if (this.view === \"iframe\") {\n // wait for iframe load event (handleIframeLoad)\n } else if (this.view === \"preview\") {\n this.previewButtonElement.focus();\n this.updateFocus = false;\n } else if (this.view === \"cookiewall\") {\n this.confirmButtonElement.focus();\n this.updateFocus = false;\n }\n }\n }\n\n render() {\n const classes = {\n \"stzh-iframe\": true,\n };\n\n return (\n <Host>\n <div class={classes}>\n {this.view === \"iframe\" &&\n <iframe\n id={this.iframeId}\n name={this.name}\n sandbox={this.sandbox}\n referrerPolicy={this.referrerpolicy}\n width={this.width}\n height={this.height}\n ref={(el) => (this.iframeElement = el as HTMLIFrameElement)}\n class=\"stzh-iframe__iframe\"\n src={this._src}\n allow={this.allow}\n onLoad={this.handleIframeLoad}\n >{this.iframeErrorText}</iframe>\n }\n\n <button\n ref={(el) => (this.previewButtonElement = el as HTMLButtonElement)}\n onClick={this.handlePreviewClick}\n aria-label={this.previewLabel \|\| this.localization.defaultPreviewLabel}\n // disabled={this.view === \"cookiewall\"}\n class={{\n \"stzh-iframe__preview\": true,\n \"is-visible\": this.view === \"preview\" \|\| this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__preview-image-wrapper\">\n <slot name=\"preview-image\"></slot>\n </div>\n\n <div class=\"stzh-iframe__preview-logo-wrapper\">\n <slot name=\"preview-logo\"></slot>\n </div>\n\n {this.previewIcon &&\n <div class={{\n \"stzh-iframe__preview-run\": true,\n \"is-visible\": this.view === \"preview\"\n }}>\n <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n </div>\n }\n </button>\n\n {this.cookie &&\n <div\n class={{\n \"stzh-iframe__cookiewall\": true,\n \"is-visible\": this.view === \"cookiewall\"\n }}\n >\n <div class=\"stzh-iframe__cookiewall-content\">\n <div\n class=\"stzh-iframe__cookiewall-text\"\n id={`${this.internalId}-cookiewall-text`}\n >\n {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n </div>\n\n <stzh-button\n ref={(el) => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n class=\"stzh-iframe__cookiewall-button\"\n size=\"small\"\n a11yDescribedby={`${this.internalId}-cookiewall-text`}\n icon={this.cookieConfirmIcon}\n label={this.cookieConfirmLabel \|\| this.localization.defaultConfirmLabel}\n onClick={this.handleCookiewallConfirmClick}\n ></stzh-button>\n </div>\n\n {!this.skipPreview &&\n <button\n class=\"stzh-iframe__cookiewall-close\"\n onClick={this.handleCookiewallCloseClick}\n aria-label={this.localization.confirmCloseLabel}\n >\n <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n </button>\n }\n </div>\n }\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './stzh-icon2.js';
-const stzhImagecomparisonCss = ".sc-stzh-imagecomparison-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-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::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-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.1875rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-items:center;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:3rem;height:2rem;transform:translate(-50%, -50%);color:var(--stzh-color-primary);background-color:var(--stzh-color-white);border-radius:5rem;transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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-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));position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}@media screen and (min-width: 900px){.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison,.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary);color:var(--stzh-color-white)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";
+const stzhImagecomparisonCss = ".sc-stzh-imagecomparison-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-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::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-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.125rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-content:space-between;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:calc(2 * var(--stzh-icon-size) + var(--divider-width));height:var(--stzh-icon-size);transform:translate(-50%, -50%);color:var(--stzh-color-primary70);background-color:var(--stzh-color-white);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary70)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-secondary30)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";
 const StzhImageComparison = /*@__PURE__*/ proxyCustomElement(class StzhImageComparison extends HTMLElement {
   constructor() {
@@ -35,7 +35,7 @@ const StzhImageComparison = /*@__PURE__*/ proxyCustomElement(class StzhImageComp
     };
     return (h(Host, { "aria-roledescription": this.localization.label, style: {
         '--exposure': `${this.value.toString()}%`
-      } }, h("div", { class: classes }, h("div", { class: "stzh-imagecomparison__element" }, h("slot", { name: "image-before" }), h("slot", { name: "image-after" }), h("label", { class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { class: "stzh-imagecomparison__slider-line" }), h("div", { class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("input", { type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: (el) => (this.inputElement = el), onInput: this.handleInput })), h("div", { class: "stzh-imagecomparison__hint-wrapper" }, h("span", { class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
+      } }, h("div", { class: classes }, h("div", { class: "stzh-imagecomparison__element" }, h("slot", { name: "image-before" }), h("slot", { name: "image-after" }), h("label", { class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("div", { class: "stzh-imagecomparison__slider-line" }), h("input", { type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: (el) => (this.inputElement = el), onInput: this.handleInput })), h("div", { class: "stzh-imagecomparison__hint-wrapper" }, h("span", { class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
   }
   get element() { return this; }
   static get style() { return stzhImagecomparisonCss; }

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

	@@ -1 +1 @@
1	- {"file":"stzh-imagecomparison.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG~~,+/IAA+/I~~;;~~MC6BjhJ~~,mBAAmB;;;;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,YAAM,IAAI,EAAC,aAAa,GAAQ,EAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI,IAE9C,WAAK,KAAK,EAAC,~~mCAAmC,GAAO,EACrD,WAAK,KAAK,EAAC,~~2CAA2C,IACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP,EACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR,~~EAEN~~,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI,EAER,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D,EACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n --exposure: 50%;\n --divider-width: ~~3px~~;\n\n ::slotted() {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n ::slotted([slot=\"image-after\"]) {\n clip-path: polygon(\n calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n 100% 0,\n 100% 100%,\n calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n );\n }\n}\n\n.stzh-imagecomparison {\n display: flex;\n flex-direction: column;\n user-select: none;\n \n &__control {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n }\n \n &__slider-line {\n position: absolute;\n left: var(--exposure);\n height: 100%;\n width: var(--divider-width);\n background-color: $colorWhite;\n transform: translateX(-50%);\n transition: background-color $baseTransitionAnimationSpeed;\n }\n \n &__slider-icon-wrapper {\n display: flex;\n align-items: center;\n justify-~~items~~: ~~center~~;\n position: absolute;\n top: 50%;\n left: var(--exposure);\n overflow: hidden;\n width: ~~48px~~;\n height: ~~32px~~;\n transform: translate(-50%, -50%);\n color: $~~colorPrimary~~;\n background-color: $colorWhite;\n ~~border-radius: 80px;\n~~ transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n \n &__hint-wrapper {\n pointer-events: none;\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n }\n \n &__hint-left,\n &__hint-right {\n @include font('heavy');\n @include ~~fontCurve~~('~~caption~~');\n position: absolute;\n top: 0;\n display: flex;\n align-items: center;\n height: 24px;\n padding: 0 space('xsmall');\n background: $colorBlack50op;\n color: $colorWhite;\n }\n \n &__hint-left {\n left: 0;\n }\n \n &__hint-right {\n right: 0;\n }\n\n &__label:hover &__slider-line,\n &__label:hover &__slider-icon-wrapper {\n background-color: $~~colorPrimary~~;\n ~~color: $colorWhite;\n~~ }\n\n &__label:hover + &__hint-wrapper {\n opacity: 1;\n }\n}\n","import { \n Component~~, \~~n Host~~, \~~n Element~~, \~~n Prop~~, \~~n h,\n Event,\n EventEmitter\n} from '@stencil/core';\n\nimport { \n StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/\n @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n /\n\n@Component({\n tag: 'stzh-imagecomparison',\n styleUrl: 'stzh-imagecomparison.scss',\n scoped: true,\n})\n\nexport class StzhImageComparison {\n /* Translation strings. /\n @Prop() localization: StzhImagecomparisonLocalizedText;\n\n /* Hint left /\n @Prop() hintLeft: string = \"\";\n\n /* Hint right /\n @Prop() hintRight: string = \"\";\n\n /* Width of image before /\n @Prop({ mutable: true }) value: number = 50;\n\n /* Overwrite default label /\n @Prop() label: string;\n\n /* Id for element which describes the label /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @Element() element: HTMLStzhImagecomparisonElement;\n\n / Image comparison slider on change event */\n @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n \n private inputElement: HTMLInputElement;\n \n private handleInput = (event: InputEvent) => {\n let value = this.inputElement.value;\n this.value = Number(value);\n\n this.stzhChange.emit({ \n component: \"stzh-imagecomparison\",\n originalEvent: event,\n value: this.value\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n }\n } \n \n render() {\n const classes = {\n \"stzh-imagecomparison\": true,\n };\n\n return (\n <Host\n aria-roledescription={this.localization.label}\n style={{\n '--exposure': `${this.value.toString()}%`\n }}\n >\n <div class={classes}>\n <div class=\"stzh-imagecomparison__element\">\n <slot name=\"image-before\"></slot>\n <slot name=\"image-after\"></slot>\n\n <label\n class=\"stzh-imagecomparison__label\"\n aria-label={this.label \|\| this.localization.label}\n aria-describedby={this.a11yDescribedby \|\| null}\n >\n <div class=\"stzh-imagecomparison__slider-~~line\"></div>\n <div class=\"stzh-imagecomparison__slider-~~icon-wrapper\">\n <stzh-icon \n class=\"stzh-imagecomparison__slider-icon-left\" \n name=\"angle-left\">\n </stzh-icon>\n <stzh-icon \n class=\"stzh-imagecomparison__slider-icon-right\" \n name=\"angle-right\">\n </stzh-icon>\n </div>\n\n <input\n type=\"range\" \n class=\"stzh-imagecomparison__control\" \n min=\"0\" \n max=\"100\"\n ref={(el) => (this.inputElement = el as HTMLInputElement)}\n onInput={this.handleInput}\n />\n </label>\n\n <div class=\"stzh-imagecomparison__hint-wrapper\">\n <span class=\"stzh-imagecomparison__hint-left\">\n {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n </span>\n <span class=\"stzh-imagecomparison__hint-right\">\n {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n </span~~> \~~n </div>\n </div>\n </div~~> \~~n </Host>\n );\n }\n}\n\n"],"version":3}
1	+ {"file":"stzh-imagecomparison.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,koIAAkoI;;MC6BppI,mBAAmB;;;;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,YAAM,IAAI,EAAC,aAAa,GAAQ,EAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI,IAE9C,WAAK,KAAK,EAAC,2CAA2C,IACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP,EACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR,EACN,WAAK,KAAK,EAAC,mCAAmC,GAAO,EAErD,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI,EAER,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D,EACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n --exposure: 50%;\n --divider-width: 2px;\n\n ::slotted() {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n ::slotted([slot=\"image-after\"]) {\n clip-path: polygon(\n calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n 100% 0,\n 100% 100%,\n calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n );\n }\n}\n\n.stzh-imagecomparison {\n display: flex;\n flex-direction: column;\n user-select: none;\n\n &__control {\n position: absolute;\n inset: 0;\n opacity: 0;\n cursor: pointer;\n }\n\n &__slider-line {\n position: absolute;\n left: var(--exposure);\n height: 100%;\n width: var(--divider-width);\n background-color: $colorWhite;\n transform: translateX(-50%);\n transition: background-color $baseTransitionAnimationSpeed;\n }\n\n &__slider-icon-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n position: absolute;\n top: 50%;\n left: var(--exposure);\n overflow: hidden;\n width: calc(2 #{iconSize()} + var(--divider-width));\n height: #{iconSize()};\n transform: translate(-50%, -50%);\n color: $colorPrimary70;\n background-color: $colorWhite;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__hint-wrapper {\n pointer-events: none;\n opacity: 0;\n transition: opacity $baseTransitionAnimationSpeed;\n }\n\n &__hint-left,\n &__hint-right {\n @include font('heavy');\n @include fontSize('micro');\n position: absolute;\n top: 0;\n display: flex;\n align-items: center;\n height: 24px;\n padding: 0 space('xsmall');\n background: $colorBlack50op;\n color: $colorWhite;\n }\n\n &__hint-left {\n left: 0;\n }\n\n &__hint-right {\n right: 0;\n }\n\n &__label:hover &__slider-line {\n background-color: $colorPrimary70;\n }\n\n &__label:hover &__slider-icon-wrapper {\n background-color: $colorSecondary30;\n }\n\n &__label:hover + &__hint-wrapper {\n opacity: 1;\n }\n}\n","import {\n Component,\n Host,\n Element,\n Prop,\n h,\n Event,\n EventEmitter\n} from '@stencil/core';\n\nimport {\n StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/*\n @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n /\n\n@Component({\n tag: 'stzh-imagecomparison',\n styleUrl: 'stzh-imagecomparison.scss',\n scoped: true,\n})\n\nexport class StzhImageComparison {\n /* Translation strings. /\n @Prop() localization: StzhImagecomparisonLocalizedText;\n\n /* Hint left /\n @Prop() hintLeft: string = \"\";\n\n /* Hint right /\n @Prop() hintRight: string = \"\";\n\n /* Width of image before /\n @Prop({ mutable: true }) value: number = 50;\n\n /* Overwrite default label /\n @Prop() label: string;\n\n /* Id for element which describes the label /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n @Element() element: HTMLStzhImagecomparisonElement;\n\n / Image comparison slider on change event */\n @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n\n private inputElement: HTMLInputElement;\n\n private handleInput = (event: InputEvent) => {\n let value = this.inputElement.value;\n this.value = Number(value);\n\n this.stzhChange.emit({\n component: \"stzh-imagecomparison\",\n originalEvent: event,\n value: this.value\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-imagecomparison\": true,\n };\n\n return (\n <Host\n aria-roledescription={this.localization.label}\n style={{\n '--exposure': `${this.value.toString()}%`\n }}\n >\n <div class={classes}>\n <div class=\"stzh-imagecomparison__element\">\n <slot name=\"image-before\"></slot>\n <slot name=\"image-after\"></slot>\n\n <label\n class=\"stzh-imagecomparison__label\"\n aria-label={this.label \|\| this.localization.label}\n aria-describedby={this.a11yDescribedby \|\| null}\n >\n <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n <stzh-icon\n class=\"stzh-imagecomparison__slider-icon-left\"\n name=\"angle-left\">\n </stzh-icon>\n <stzh-icon\n class=\"stzh-imagecomparison__slider-icon-right\"\n name=\"angle-right\">\n </stzh-icon>\n </div>\n <div class=\"stzh-imagecomparison__slider-line\"></div>\n\n <input\n type=\"range\"\n class=\"stzh-imagecomparison__control\"\n min=\"0\"\n max=\"100\"\n ref={(el) => (this.inputElement = el as HTMLInputElement)}\n onInput={this.handleInput}\n />\n </label>\n\n <div class=\"stzh-imagecomparison__hint-wrapper\">\n <span class=\"stzh-imagecomparison__hint-left\">\n {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n </span>\n <span class=\"stzh-imagecomparison__hint-right\">\n {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n </span>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n\n"],"version":3}

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

	@@ -1 +1 @@
1	- {"file":"stzh-input2.js","mappings":"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","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/*\n @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n:host {\n --text-align: left;\n --color: #{$formColor};\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: #{$formLabelColor};\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: #{$formHoverColor};\n --hover-border-color: #{$formHoverBorderColor};\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n / Filled /\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n / Invalid /\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n / Internal (Hover / Focus) /\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize('medium')};\n}\n\n.stzh-input {\n\t@include input-description;\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\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 margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n / Normal inputs /\n\n &--input {\n height: var(--height);\n }\n\n / Textarea /\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space('xxxsmall');\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Clearable / Search input / Password /\n\n &--type-password#{&}--is-not-clearable &__button-right,\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n / Styles for floating label /\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant /\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants /\n\n &--size-small &__input {\n @include fontSize('micro');\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button /\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n / Hidden label /\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Readonly / Disabled /\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import {\n Component,\n Prop,\n Host,\n Event,\n EventEmitter,\n State,\n Element,\n h,\n Watch,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhInputChangedEvent,\n StzhInputFocusEvent,\n StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" = \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* The value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\n \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"\n ];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n }\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.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-input\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\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-input\",\n originalEvent: event\n });\n }\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={(el) => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n const descriptionUsed = hasSlot(this.element, 'description') \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\": buttonRightSlotUsed\n \|\| this.type === \"search\"\n \|\| (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {(this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\")\n ?\n ((!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled)\n && (this.type === \"search\" \|\| this.type === \"password\")\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n disabled={true}\n ></stzh-button>\n :\n this.filled\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n :\n <slot name=\"button-right\"></slot>\n )\n :\n <slot name=\"button-right\"></slot>\n }\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-input2.js","mappings":"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","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/*\n @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n \n @prop --stzh-form-input-height: Global: Height of fields & buttons\n * @prop --stzh-form-input-small-height: Global: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: Global: Height of fields & buttons when tiny variant is used\n /\n\n:host {\n --text-align: left;\n --color: #{$formColor};\n --border-color: #{$formBorderColor};\n --border-radius: #{$formInputBorderRadius};\n --background-color: #{$formBackgroundColor};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --height: #{$formInputHeight};\n --input-width: 100%;\n --label-color: #{$formLabelColor};\n --placeholder-color: #{$formInputPlaceholderColor};\n --button-right-color: #{$colorGrey80};\n\n --hover-color: #{$formHoverColor};\n --hover-border-color: #{$formHoverBorderColor};\n --hover-background-color: #{$formHoverBackgroundColor};\n --hover-button-right-color: #{$colorPrimary70};\n\n --focus-color: #{$formFocusColor};\n --focus-border-color: #{$formFocusBorderColor};\n --focus-background-color: #{$formFocusBackgroundColor};\n --focus-button-right-color: #{$colorPrimary70};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n\n &[size=\"small\"] {\n --height: #{$formInputHeightSmall};\n }\n\n / Filled /\n\n &[is-filled]:not([is-filled=\"false\"]) {\n --button-right-color: #{$colorPrimary70};\n --hover-button-right-color: #{$colorPrimary70};\n --focus-button-right-color: #{$formFocusColor};\n }\n\n / Invalid /\n\n &[is-invalid] {\n --color: #{$colorError60};\n --border-color: #{$colorError60};\n --background-color: #{$colorWhite};\n --label-color: #{$colorError60};\n --placeholder-color: #{$colorError60};\n --button-right-color: #{$colorError60};\n\n --hover-color: #{$colorError60};\n --hover-border-color: #{$colorError60};\n --hover-background-color: #{$colorWhite};\n --hover-button-right-color: #{$colorError60};\n\n --focus-color: #{$colorError60};\n --focus-border-color: #{$colorError60};\n --focus-background-color: #{$colorWhite};\n --focus-button-right-color: #{$colorError60};\n }\n\n &[readonly]:not([readonly=\"false\"]),\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$formDisabledColor};\n --border-color: #{$formDisabledBorderColor};\n --background-color: #{$formDisabledBackgroundColor};\n --label-color: #{$formDisabledColor};\n --placeholder-color: #{$formDisabledColor};\n --description-color: #{$formDisabledColor};\n --button-right-color: #{$colorGrey70};\n\n --hover-color: #{$formDisabledColor};\n --hover-border-color: #{$formDisabledBorderColor};\n --hover-background-color: #{$formDisabledBackgroundColor};\n --hover-button-right-color: #{$colorGrey70};\n\n --focus-color: #{$formDisabledColor};\n --focus-border-color: #{$formDisabledBorderColor};\n --focus-background-color: #{$formDisabledBackgroundColor};\n --focus-button-right-color: #{$colorGrey70};\n }\n\n / Internal (Hover / Focus) /\n\n &:is(:has(.stzh-input__input:hover)) {\n --button-right-color: var(--hover-button-right-color);\n }\n\n &:is(:has(.stzh-input__input:focus)) {\n --button-right-color: var(--focus-button-right-color);\n }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0px;\n right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button,\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button,\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n --color: var(--button-right-color);\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: var(--button-right-color);\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n// --hover-color: #{$colorGrey80};\n// }\n\n:host ::slotted(stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not([icon-only=\"false\"])),\n:host ::slotted(stzh-popover[slot=\"button-right\"]) .stzh-popover__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host ::slotted(stzh-tooltip[slot=\"button-right\"]) .stzh-tooltip__trigger stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n --icon-size: #{iconSize('medium')};\n}\n\n.stzh-input {\n\t@include input-description;\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 2px solid var(--border-color);\n transition-property: color, border-color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\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 margin: 0;\n width: 100%;\n color: var(--color);\n background-color: var(--background-color);\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: var(--placeholder-color);\n }\n\n &:hover {\n color: var(--hover-color);\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n }\n\n &:focus {\n color: var(--focus-color);\n border-color: var(--focus-border-color);\n background-color: var(--focus-background-color);\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n / Normal inputs /\n\n &--input {\n height: var(--height);\n }\n\n / Textarea /\n\n &--textarea {\n min-height: var(--height);\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('micro');\n @include truncate;\n display: block;\n color: var(--label-color);\n width: auto;\n max-width: 100%;\n margin-bottom: space('xxxsmall');\n // position: absolute;\n // top: calc(#{$formInputHeight} / 2);\n // // padding-left (medium) + border-left\n // left: calc(#{space('medium')} + 1px);\n // max-width: calc(100% - #{space('medium')} 2);\n // transform: translateY(-50%);\n // transition: all $baseTransitionAnimationSpeed;\n // pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n // &::before {\n // content: '';\n // display: none;\n // background: $colorWhite;\n // position: absolute;\n // width: 100%;\n // z-index: -1;\n // left: 0;\n // top: 50%;\n // // prevent white line not fully overlaping border of input\n // margin-top: -0.5px;\n // height: 2px;\n // }\n }\n\n &__marker {\n @include fontSize('nano');\n margin-left: calc(-0.25em + #{space('xsmall')});\n }\n\n /* Clearable / Search input / Password /\n\n &--type-password#{&}--is-not-clearable &__button-right,\n &--type-password#{&}--is-not-filled &__button-right,\n &--type-password#{&}--is-readonly &__button-right,\n &--type-password#{&}--is-disabled &__button-right,\n &--type-search#{&}--is-not-clearable &__button-right,\n &--type-search#{&}--is-not-filled &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n / Styles for floating label /\n\n // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-fixed-label &__label,\n // &--is-filled &__label,\n // &--is-readonly &__label,\n // &--is-disabled &__label,\n // &--is-invalid &__label {\n // display: block;\n // top: 0;\n // // padding-left (input field medium) - padding-left\n // left: calc(#{space('medium')} - #{space('xxsmall')});\n // height: 20px; // dividable by two (so before element is always positioned correctly)\n // line-height: 20px;\n // padding: 0 space('xxsmall');\n // max-width: calc(100% - #{space('small')} 2);\n // pointer-events: all;\n\n // &:not(:empty)::before {\n // display: block;\n // }\n // }\n\n /* Button Right Variant /\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: var(--height);\n }\n\n // &--has-button-right &__label {\n // // 100% - ((padding left of normal variant + border 1px) 2) - icon button width\n // max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n // }\n\n // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--has-button-right#{&}--has-fixed-label &__label,\n // &--has-button-right#{&}--is-filled &__label,\n // &--has-button-right#{&}--is-readonly &__label,\n // &--has-button-right#{&}--is-disabled &__label,\n // &--has-button-right#{&}--is-invalid &__label {\n // // 100% - left distance to text + 1px border + padding label right side - icon button width\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n // }\n\n /* Size variants /\n\n &--size-small &__input {\n @include fontSize('micro');\n }\n\n // &--size-small &__label {\n // top: calc(#{$formInputHeightSmall} / 2);\n // }\n\n // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-fixed-label &__label,\n // &--size-small#{&}--is-filled &__label,\n // &--size-small#{&}--is-readonly &__label,\n // &--size-small#{&}--is-disabled &__label,\n // &--size-small#{&}--is-invalid &__label {\n // top: 0;\n // }\n\n // &--size-small#{&}--has-button-right &__label {\n // max-width: calc(100% - (#{space('medium')} + 1px) 2 - #{$formInputHeightSmall});\n // }\n\n // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n // max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n // }\n\n /* Spin button /\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=\"number\"] {\n appearance: textfield;\n }\n }\n\n / Hidden label /\n\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n / Readonly / Disabled /\n\n &--is-readonly &__input,\n &--is-disabled &__input,\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n }\n\n // &--is-readonly &__label,\n // &--is-disabled &__label {\n // &::before {\n // background: transparent;\n // }\n // }\n}\n","import {\n Component,\n Prop,\n Host,\n Event,\n EventEmitter,\n State,\n Element,\n h,\n Watch,\n Listen,\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhInputChangedEvent,\n StzhInputFocusEvent,\n StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/\n @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n /\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true\n})\nexport class StzhInput {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Whether the input is a textarea or an input field /\n @Prop() multiline: boolean = false;\n\n /* Rows attribute if input element is textarea /\n @Prop() rows: number;\n\n /* If input field, this defines the type (if `search`, a search icon will be displayed) /\n @Prop({ reflect: true }) type: \"text\" \| \"search\" \| \"password\" \| \"email\" \| \"url\" \| \"tel\" \| \"number\" \| \"hidden\" = \"text\";\n\n /* If input type is number, this will be the step size /\n @Prop() step: number = 1;\n\n /* If input type is number, this will be the minimum step number /\n @Prop() min: number;\n\n /* If input type is number, this will be the maximum step number /\n @Prop() max: number;\n\n /* If input type is number and this property is true, this will show the spin buttons on hover/focus /\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /* Whether the element is readonly or not /\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /* Whether the element is disabled or not /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) /\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /* Hide `(optional)` label (or use `required` inside form to hide it) /\n @Prop({ reflect: true }) hideOptional: boolean = false;\n\n /* Minimum of characters /\n @Prop() minlength: number;\n\n /* Maxlength of characters /\n @Prop() maxlength: number;\n\n /* The name of the input element /\n @Prop({ reflect: true }) name: string;\n\n /* The value of the input element /\n @Prop({ mutable: true }) value: string = \"\";\n\n /* Default value (used by reset) /\n @Prop({ mutable: true }) defaultValue: string = \"\";\n\n /* Description message (use description slot as alternative) /\n @Prop() description: string;\n\n /* Long description message appearing in a popover (use description-long slot as alternative) /\n @Prop() descriptionLong: string;\n\n /* Long description title appearing in a popover (use description-long-title slot as or description property alternative) /\n @Prop() descriptionLongTitle: string;\n\n /* One or multiple error message (use error slot as alternative) /\n @Prop() error: string \| string[];\n private _error: string[];\n\n /* Invalid status /\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /* Required status /\n @Prop({ reflect: true }) required: boolean = false;\n\n /\n Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n /\n @Prop() inputmode: string;\n\n /\n Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n /\n @Prop() autocomplete: string = \"on\";\n\n /* Whether autocomplete should be turned off /\n @Prop() noAutocomplete: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Whether label should be visually hidden. /\n @Prop() labelHidden: boolean = false;\n\n /* Size variant /\n @Prop({ reflect: true }) size: \"default\" \| \"small\" = \"default\";\n\n /* Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Whether the input is filled or not /\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /* Input change event /\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /* Input changed event /\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /* Input focus event /\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Listen(\"reset\", { target: \"document\" })\n resetListener(event: Event) {\n if ((event.target as HTMLElement).contains(this.element)) {\n requestAnimationFrame(() => {\n this.handleReset();\n });\n }\n }\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string \| string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\n \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"\n ];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement \| HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private waitForNextRender() {\n return new Promise(resolve => this.renderPromiseResolve = resolve);\n }\n\n private onClearClick = async (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n await this.waitForNextRender();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private handleReset = async () => {\n this.value = this.defaultValue;\n // we also update value, since render doesn't get executed sometimes\n this.input.value = this.defaultValue;\n\n // TODO: check if we need own reset event or trigger the change event\n // (custom browser behaviour doesn't send change event, when reset is executed)\n // this.stzhChange.emit({\n // component: \"stzh-input\",\n // originalEvent: event,\n // value: this.value\n // });\n }\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.input.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-input\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\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-input\",\n originalEvent: event\n });\n }\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={(el) => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n defaultValue={this.defaultValue}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n this.defaultValue = this.defaultValue \|\| this.value;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n const descriptionUsed = hasSlot(this.element, 'description') \|\| !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') \|\| !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') \|\| this._error?.length > 0;\n\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\": buttonRightSlotUsed\n \|\| this.type === \"search\"\n \|\| (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid \|\| errorUsed,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-not-filled\": !this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--is-not-clearable\": !this.clearable,\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host\n is-invalid={this.invalid \|\| errorUsed}\n tabindex={this.disabled ? null : \"-1\"}\n onFocus={this.onRootFocus}\n is-filled={this.filled}\n >\n <div class={classes}>\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {!this.hideOptional &&\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n {(this.clearable \|\| this.type === \"search\" \|\| this.type === \"password\")\n ?\n ((!this.clearable \|\| this.disabled \|\| this.readonly \|\| !this.filled)\n && (this.type === \"search\" \|\| this.type === \"password\")\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.type === \"search\" ? \"search\" : \"view\"}\n size={this.size}\n iconOnly={true}\n disabled={true}\n ></stzh-button>\n :\n this.filled\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon=\"close\"\n size={this.size}\n iconOnly={true}\n onClick={this.onClearClick}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n :\n <slot name=\"button-right\"></slot>\n )\n :\n <slot name=\"button-right\"></slot>\n }\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongTitle={this.descriptionLongTitle}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}