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

@oiz/stzh-components 3.0.0-beta4 → 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 (590) hide show

package/dist/esm/stzh-heading.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, a as Host } from './index-e3050b18.js';
-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 = class {
   constructor(hostRef) {

package/dist/esm/stzh-heading.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-heading.entry.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-heading.entry.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/esm/stzh-input.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-input.entry.js","mappings":";;;;;AAAA,MAAM,YAAY,GAAG,mrZAAmrZ;;ACyBxsZ,IAAI,YAAY,GAAG,CAAC,CAAC;MAeR,SAAS;;;;;;;IAiKZ,mBAAc,GAAY,KAAK,CAAC;IAOhC,iBAAY,GAAG,OAAO,KAAiB;MAC7C,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;MAChB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;MAEnB,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;MAE/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;IAEO,gBAAW,GAAG;MACpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;;MAE/B,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;;;;;;;;KAStC,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAE9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;IAEO,aAAQ,GAAG,CAAC,KAAiB;MACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAE9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;QACpB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;IAEO,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;OACpB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;MAE3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;MACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,WAAM,GAAG,CAAC,KAAiB;;MAEjC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;MAEpC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,YAAY;QACvB,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;;qBA/P4B,KAAK;;gBAM8E,MAAM;gBAG/F,CAAC;;;oBASqB,KAAK;oBAGL,KAAK;oBAGL,KAAK;qBAGJ,KAAK;wBAGF,KAAK;;;;iBAYb,EAAE;wBAGK,EAAE;;;;;mBAgBN,KAAK;oBAGJ,KAAK;;wBAYnB,IAAI;0BAGD,KAAK;iBAGf,EAAE;uBAGK,KAAK;gBAGiB,SAAS;2BAGK,EAAE;;;EAoBrE,aAAa,CAAC,KAAY;IACxB,IAAK,KAAK,CAAC,MAAsB,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MACxD,qBAAqB,CAAC;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB,CAAC,CAAC;KACJ;GACF;EAGD,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,MAAM,GAAG,QAAQ,KAAK,EAAE,CAAC;GAC/B;EAGD,YAAY,CAAC,QAA2B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI;QACF,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;OACpC;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,QAAQ,EAAE;UACZ,IAAI,CAAC,MAAM,GAAG,CAAC,QAAQ,CAAC,CAAC;SAC1B;aAAM;UACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SAClB;OACF;KACF;SAAM,IAAI,QAAQ,EAAE;MACnB,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;KAClB;GACF;EAGD,WAAW,CAAC,QAAgB;IAC1B,MAAM,KAAK,GAAG;MACZ,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ;KACxE,CAAC;IAEF,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChD,MAAM,IAAI,KAAK,CAAC,QAAQ,QAAQ,gBAAgB,CAAC,CAAC;KACnD;GACF;EAOO,iBAAiB;IACvB,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,oBAAoB,GAAG,OAAO,CAAC,CAAC;GACpE;EAgGO,cAAc;IACpB,QACE,gBACE,KAAK,EAAC,+CAA+C,EACrD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAyB,CAAC,EACrD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,sBACP,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACT,EACZ;GACH;EAEO,WAAW;IACjB,QACE,aACE,KAAK,EAAC,4CAA4C,EAClD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAsB,CAAC,EAClD,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,cAAc,GAAG,KAAK,GAAG,IAAI,CAAC,YAAY,uBAC1C,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,SAAS,sBACzC,GAAG,IAAI,CAAC,OAAO,gBAAgB,IAAI,CAAC,eAAe,EAAE,mBACxD,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,kBACjC,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,GACnB,EACF;GACH;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,oBAAoB,EAAE;MAC7B,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC7B;GACF;EAED,MAAM,iBAAiB;IACrB,IAAI,CAAC,OAAO,GAAG,cAAc,YAAY,EAAE,EAAE,CAAC;IAC9C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,KAAK,CAAC;IAEpD,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KAChG;GACF;EAED,MAAM;;IACJ,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;IAClE,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC;IACnF,MAAM,mBAAmB,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAChG,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,IAAG,CAAC,CAAC;IAE5E,MAAM,OAAO,GAAG;MACd,YAAY,EAAE,IAAI;MAClB,8BAA8B,EAAE,mBAAmB;WAC9C,IAAI,CAAC,IAAI,KAAK,QAAQ;YACrB,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;MACxE,6BAA6B,EAAE,eAAe;MAC9C,kCAAkC,EAAE,mBAAmB;MACvD,uBAAuB,EAAE,SAAS;MAClC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;MACrC,wBAAwB,EAAE,IAAI,CAAC,OAAO,IAAI,SAAS;MACnD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,yBAAyB,EAAE,IAAI,CAAC,QAAQ;MACxC,uBAAuB,EAAE,IAAI,CAAC,MAAM;MACpC,2BAA2B,EAAE,CAAC,IAAI,CAAC,MAAM;MACzC,0BAA0B,EAAE,IAAI,CAAC,SAAS;MAC1C,8BAA8B,EAAE,CAAC,IAAI,CAAC,SAAS;MAC/C,8BAA8B,EAAE,IAAI,CAAC,WAAW;MAChD,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;MAC9C,CAAC,oBAAoB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;KAC/C,CAAC;IAEF,QACE,EAAC,IAAI,kBACS,IAAI,CAAC,OAAO,IAAI,SAAS,EACrC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI,EACrC,OAAO,EAAE,IAAI,CAAC,WAAW,eACd,IAAI,CAAC,MAAM,IAEtB,WAAK,KAAK,EAAE,OAAO,IACjB,aAAO,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,IACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,EACvC,CAAC,IAAI,CAAC,YAAY;MACjB,YAAM,KAAK,EAAC,oBAAoB,IAC9B,YAAM,KAAK,EAAC,2BAA2B,iBAAa,MAAM,IACvD,IAAI,CAAC,QAAQ;UACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB;UAC9C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,CAE7C,EACP,YAAM,KAAK,EAAC,yBAAyB,IAClC,IAAI,CAAC,QAAQ;UACV,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB;UAC5C,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,iBAAiB,CAE3C,CACF,CAEH,EACR,WAAK,KAAK,EAAC,2BAA2B,IACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,EAC3D,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU;;SAEnE,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM;cAC7D,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC;;YAEvD,mBACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG,MAAM,EAChD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,IAAI,GACD;;YAEf,IAAI,CAAC,MAAM;;gBAET,mBACE,KAAK,EAAC,0BAA0B,EAChC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,gBAAgB,mBACvC,IAAI,CAAC,OAAO,GACd;;gBAEf,YAAM,IAAI,EAAC,cAAc,GAAQ;;QAGrC,YAAM,IAAI,EAAC,cAAc,GAAQ,CAE/B,EACN,EAAC,oBAAoB,IACnB,WAAW,EAAC,YAAY,EACxB,EAAE,EAAE,GAAG,IAAI,CAAC,OAAO,cAAc,EACjC,KAAK,EAAE,IAAI,CAAC,MAAM,EAClB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,mBAAmB,EAAE,mBAAmB,EACxC,mBAAmB,EAAE,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,mBAAmB,GACnE,CACE,CACD,EACP;GACH;;;;;;;;;;;;","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-input.entry.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}

package/dist/esm/stzh-link.entry.js CHANGED Viewed

@@ -7,6 +7,7 @@ const stzhLinkCss = "@charset \"UTF-8\";.sc-stzh-link-h{font-family:var(--stzh-f
 const StzhLink = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.stzhClick = createEvent(this, "stzhClick", 7);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
     this.focusedByInput = false;
@@ -41,6 +42,13 @@ const StzhLink = class {
         originalEvent: event
       });
     };
+    this.onClick = (event) => {
+      this.stzhClick.emit({
+        component: "stzh-link",
+        originalEvent: event,
+        href: this.href
+      });
+    };
     this.localization = undefined;
     this.icon = "";
     this.iconPosition = "left";
@@ -119,11 +127,11 @@ const StzhLink = class {
     return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ?
       h("a", { ref: (el) => (this.link = el), href: this.disabled ? null : this.href, download: this.download, rel: this.rel, target: this.target, class: classes, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined"
           ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
       :
         h("button", { ref: (el) => (this.link = el), class: classes, type: this.type, disabled: this.disabled, id: this.linkId, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined"
             ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-            ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
+            ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, "aria-current": this.a11yCurrent || null, onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/stzh-link.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-link.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/*\n @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n \n @prop --stzh-link-color: Global: Color of link\n * @prop --stzh-link-hover-color: Global: Hover color of link\n * @prop --stzh-link-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-icon-size: Global: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: Global: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: Global: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: Global: Text underline offset\n /\n\n@mixin link--size-default() {\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --letter-spacing: normal;\n\n @include mq($from: medium) {\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n }\n}\n\n@mixin link--size-small() {\n --font-size: var(--stzh-font-micro-font-size);\n --line-height: var(--stzh-font-micro-text-line-height);\n --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n --font-size: inherit;\n --line-height: inherit;\n --letter-spacing: inherit;\n}\n\n:host {\n @include link--size-default;\n --color: #{$linkColor};\n --text-decoration-line: #{$linkTextDecorationLine};\n --icon-wrapper-height: #{$linkIconWrapperHeight};\n --icon-size: #{$linkIconSize};\n --height: var(--stzh-link-height, 40px);\n\n --hover-color: #{$linkHoverColor};\n --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n @include mq($from: medium) {\n --height: var(--stzh-link-height, auto);\n }\n\n color: var(--color);\n display: inline-grid;\n width: auto;\n min-height: var(--height);\n pointer-events: var(--stzh-link-pointer-events, auto);\n\n &[height=\"auto\"] {\n --height: var(--stzh-link-auto-height, auto);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[variant=\"secondary\"] {\n --color: #{$linkSecondaryColor};\n --hover-color: #{$linkSecondaryHoverColor};\n }\n\n &[variant=\"back\"] {\n --text-decoration-line: none;\n --hover-color: var(--color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--hover-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey60};\n --hover-color: #{$colorGrey60};\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n @include link--size-inherit;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include link--size-default;\n }\n \n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include link--size-small;\n }\n \n :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n @include link--size-inherit;\n }\n }\n}\n\n.stzh-link {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n font-family: inherit;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n border: none;\n color: var(--color);\n transition: color $baseTransitionAnimationSpeed;\n cursor: pointer;\n width: 100%;\n text-decoration-line: none;\n background-color: transparent;\n padding: 0;\n border-radius: $buttonBorderRadius;\n text-align: left;\n\n &:hover {\n color: var(--hover-color);\n }\n\n &:hover &__text {\n text-decoration-line: var(--hover-text-decoration-line);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: var(--icon-wrapper-height);\n }\n\n &__text {\n --stzh-base-color: initial;\n\n text-decoration-line: var(--text-decoration-line);\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: space('xxsmall');\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n / Variant if link only has icon /\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Badge positioning variants /\n\n &--badge-position-link &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-link &__badge {\n top: calc(#{space('xxsmall')} -1);\n right: calc(#{space('large')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);;\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n margin-left: space('small');\n }\n\n /* Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent,\n StzhLinkSize,\n StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot - Slot for text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Height variant (none prevent setting min-height for mikro and small breakpoint) /\n @Prop({ reflect: true }) height: \"default\" \| \"auto\" = \"default\";\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n /* Size variant (abobe small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n /* Size variant (abobe medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n /* Size variant (abobe large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n /* Size variant (abobe ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n /* href attribute of the link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* type of the button, if used as button (if no href used) /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"back\" = \"default\";\n\n /* Whether the link is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Badge text /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"link\" = \"icon\";\n\n /* Disabled status /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Active status /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Whether only an icon is used inside the link /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* ID of link element /\n @Prop() linkId: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhLinkElement;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n private link: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.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-link\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge \|\| this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n download={this.download}\n rel={this.rel}\n target={this.target}\n class={classes}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.link = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-link.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/*\n @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n \n @prop --stzh-link-color: Global: Color of link\n * @prop --stzh-link-hover-color: Global: Hover color of link\n * @prop --stzh-link-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: Global: Text decoration of link\n * @prop --stzh-link-icon-size: Global: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: Global: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: Global: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: Global: Text underline offset\n /\n\n@mixin link--size-default() {\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --letter-spacing: normal;\n\n @include mq($from: medium) {\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n }\n}\n\n@mixin link--size-small() {\n --font-size: var(--stzh-font-micro-font-size);\n --line-height: var(--stzh-font-micro-text-line-height);\n --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n --font-size: inherit;\n --line-height: inherit;\n --letter-spacing: inherit;\n}\n\n:host {\n @include link--size-default;\n --color: #{$linkColor};\n --text-decoration-line: #{$linkTextDecorationLine};\n --icon-wrapper-height: #{$linkIconWrapperHeight};\n --icon-size: #{$linkIconSize};\n --height: var(--stzh-link-height, 40px);\n\n --hover-color: #{$linkHoverColor};\n --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n @include mq($from: medium) {\n --height: var(--stzh-link-height, auto);\n }\n\n color: var(--color);\n display: inline-grid;\n width: auto;\n min-height: var(--height);\n pointer-events: var(--stzh-link-pointer-events, auto);\n\n &[height=\"auto\"] {\n --height: var(--stzh-link-auto-height, auto);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[variant=\"secondary\"] {\n --color: #{$linkSecondaryColor};\n --hover-color: #{$linkSecondaryHoverColor};\n }\n\n &[variant=\"back\"] {\n --text-decoration-line: none;\n --hover-color: var(--color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--hover-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey60};\n --hover-color: #{$colorGrey60};\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n @include link--size-inherit;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include link--size-default;\n }\n \n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include link--size-small;\n }\n \n :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n @include link--size-inherit;\n }\n }\n}\n\n.stzh-link {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n font-family: inherit;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n border: none;\n color: var(--color);\n transition: color $baseTransitionAnimationSpeed;\n cursor: pointer;\n width: 100%;\n text-decoration-line: none;\n background-color: transparent;\n padding: 0;\n border-radius: $buttonBorderRadius;\n text-align: left;\n\n &:hover {\n color: var(--hover-color);\n }\n\n &:hover &__text {\n text-decoration-line: var(--hover-text-decoration-line);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: var(--icon-wrapper-height);\n }\n\n &__text {\n --stzh-base-color: initial;\n\n text-decoration-line: var(--text-decoration-line);\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: space('xxsmall');\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n / Variant if link only has icon /\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n / Badge positioning variants /\n\n &--badge-position-link &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-link &__badge {\n top: calc(#{space('xxsmall')} -1);\n right: calc(#{space('large')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);;\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n margin-left: space('small');\n }\n\n /* Alignment variants /\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent,\n StzhLinkSize,\n StzhBadgeType,\n StzhLinkClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/\n @slot - Slot for text content\n * @slot icon - Slot for icon element\n /\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /* Translation strings /\n @Prop() localization: StzhLocaleComponent;\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Icon Position /\n @Prop({ reflect: true }) iconPosition: \"left\" \| \"right\" = \"left\";\n\n /* Height variant (none prevent setting min-height for mikro and small breakpoint) /\n @Prop({ reflect: true }) height: \"default\" \| \"auto\" = \"default\";\n\n /* Size variant /\n @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n /* Size variant (above small breakpoint) /\n @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n /* Size variant (above medium breakpoint) /\n @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n /* Size variant (above large breakpoint) /\n @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n /* Size variant (above ultra breakpoint) /\n @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n /* href attribute of the link /\n @Prop() href: string = \"\";\n\n /* Rel (if href is used) /\n @Prop() rel: string;\n\n /* target if the button is used as link (if href used) /\n @Prop() target: string = \"\";\n\n /* Download attribute of link (if `href` used) /\n @Prop() download: string;\n\n /* type of the button, if used as button (if no href used) /\n @Prop() type: \"button\" \| \"submit\" \| \"reset\" = \"button\";\n\n /* Variant style /\n @Prop({ reflect: true }) variant: \"default\" \| \"secondary\" \| \"back\" = \"default\";\n\n /* Whether the link is full width /\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /* Text alignment /\n @Prop({ reflect: true }) textAlign: \"left\" \| \"center\" \| \"right\" \| \"space-between\" \| \"default\" = \"default\";\n\n /* Badge text /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Badge position /\n @Prop({ reflect: true }) badgePosition: \"icon\" \| \"link\" = \"icon\";\n\n /* Disabled status /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Active status /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Whether only an icon is used inside the link /\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* Access key of link (usually a number e.g. 1) /\n @Prop() linkAccesskey: string;\n\n /* ID of link element /\n @Prop() linkId: string;\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /* Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) /\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /* Aria expanded of link/button /\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /* Aria disabled of link/button /\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /* Aria controls of link/button /\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /* Tabindex of link/button /\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /* Aria current of link/button /\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhLinkElement;\n\n /* Click event /\n @Event() stzhClick: EventEmitter<StzhLinkClickEvent>;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n private link: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.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-link\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-link\",\n originalEvent: event,\n href: this.href\n });\n }\n\n private renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge \|\| this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n download={this.download}\n rel={this.rel}\n target={this.target}\n class={classes}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.link = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n id={this.linkId}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel \|\| null}\n aria-describedby={this.a11yDescribedby \|\| null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls \|\| null}\n aria-current={this.a11yCurrent \|\| null}\n onClick={this.onClick}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-menu_2.entry.js CHANGED Viewed

@@ -21,6 +21,7 @@ const StzhMenuItem = class {
     registerInstance(this, hostRef);
     this.stzhFocus = createEvent(this, "stzhFocus", 7);
     this.stzhBlur = createEvent(this, "stzhBlur", 7);
+    this.stzhClick = createEvent(this, "stzhClick", 7);
     this.focusedByInput = false;
     this.onRootFocus = () => {
       if (!this.focusedByInput) {
@@ -53,6 +54,13 @@ const StzhMenuItem = class {
         originalEvent: event
       });
     };
+    this.onClick = (event) => {
+      this.stzhClick.emit({
+        component: "stzh-menu-item",
+        originalEvent: event,
+        href: this.href
+      });
+    };
     this.variant = "default";
     this.size = "default";
     this.counter = undefined;
@@ -95,9 +103,9 @@ const StzhMenuItem = class {
       [`stzh-menu-item--${this.variant}`]: !!this.variant
     };
     return (h(Host, { role: "menuitem", tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ?
-      h("a", { ref: (el) => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))
+      h("a", { ref: (el) => (this.menuItem = el), href: this.disabled ? null : this.href, target: this.target, class: classes, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
       :
-        h("button", { ref: (el) => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur }, this.renderInner(iconUsed))));
+        h("button", { ref: (el) => (this.menuItem = el), class: classes, type: "button", disabled: this.disabled, "aria-label": this.a11yLabel || null, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/stzh-menu_2.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"stzh-menu.stzh-menu-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n ::slotted(stzh-hr) {\n margin-top: space('xsmall');\n margin-bottom: space('xsmall');\n }\n}\n\n.stzh-menu {\n display: flex;\n flex-direction: column;\n}\n","import {\n Component,\n Host,\n h,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot for `stzh-menu-item` elements\n /\n@Component({\n tag: \"stzh-menu\",\n styleUrl: \"stzh-menu.scss\",\n scoped: true\n})\nexport class StzhMenu {\n render() {\n return (\n <Host role=\"menu\">\n <div class=\"stzh-menu\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","/\n @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n \n @prop --stzh-menu-item-height: Global: Height of items\n /\n\n:host {\n --height: var(--stzh-menu-item-height);\n --color: #{$colorBlack};\n --background-color: transparent;\n --icon-size: #{iconSize('small')};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('large')};\n --padding-right: #{space('large')};\n\n --hover-color: #{$colorBlack};\n --hover-background-color: #{$colorGrey20};\n\n &[size=\"large\"] {\n --icon-size: #{iconSize()};\n --height: var(--stzh-menu-large-item-height);\n --padding-left: #{space('xlarge')};\n --padding-right: #{space('xlarge')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$colorPrimary70};\n\n --hover-color: #{$colorPrimary70};\n --hover-background-color: #{$colorSecondary30};\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorPrimary70};\n --hover-color: #{$colorPrimary70};\n --hover-background-color: #{$colorGrey20};\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey70};\n --background-color: #{$colorGrey10};\n\n --hover-color: #{$colorGrey70};\n --hover-background-color: #{$colorGrey10};\n }\n}\n\n.stzh-menu-item {\n @include fontSize('micro');\n font-family: inherit;\n display: flex;\n gap: space('small');\n align-items: center;\n justify-content: stretch;\n appearance: none;\n text-decoration-line: none;\n border: none;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n background-color: var(--background-color);\n width: 100%;\n height: var(--height);\n line-height: var(--height);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: calc(#{space('xsmall')} -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &__text-wrapper {\n display: flex;\n gap: space('xsmall');\n }\n\n &__counter {\n @include font;\n }\n\n &__text {\n @include truncate;\n }\n\n /* Large variant /\n\n &--size-large {\n @include fontSize('milli');\n gap: space('medium');\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhMenuItemFocusEvent,\n StzhMenuItemBlurEvent,\n StzhBadgeType,\n StzhMenuSize,\n StzhMenuVariant\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n /\n@Component({\n tag: \"stzh-menu-item\",\n styleUrl: \"stzh-menu-item.scss\",\n scoped: true\n})\nexport class StzhMenuItem {\n /* Variant /\n @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n /* Counter /\n @Prop() counter: number;\n\n /* Badge (only displayed if `icon` property or icon slot is used) /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Whether the button is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the button is active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the button should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhMenuItemElement;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n /* Input blur event */\n @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n private menuItem: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLDivElement;\n\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.menuItem.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-menu-item\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-menu-item\",\n originalEvent: event\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n {iconUsed &&\n <div class=\"stzh-menu-item__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n }\n <div class=\"stzh-menu-item__text-wrapper\">\n <div\n ref={(el) => (this.text = el as HTMLDivElement)}\n class=\"stzh-menu-item__text\"\n >\n {this.label ? this.label : <slot></slot>}\n </div>\n {this.counter &&\n <div class=\"stzh-menu-item__counter\">\n ({this.counter})\n </div>\n }\n </div>\n </Fragment>\n );\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-menu-item\": true,\n \"stzh-menu-item--has-icon\": iconUsed,\n \"stzh-menu-item--has-badge\": !!this.badge,\n \"stzh-menu-item--is-disabled\": this.disabled,\n \"stzh-menu-item--is-active\": this.active,\n [`stzh-menu-item--size-${this.size}`]: !!this.size,\n [`stzh-menu-item--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n class={classes}\n type=\"button\"\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"stzh-menu.stzh-menu-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n ::slotted(stzh-hr) {\n margin-top: space('xsmall');\n margin-bottom: space('xsmall');\n }\n}\n\n.stzh-menu {\n display: flex;\n flex-direction: column;\n}\n","import {\n Component,\n Host,\n h,\n} from \"@stencil/core\";\n\n/*\n @slot - Slot for `stzh-menu-item` elements\n /\n@Component({\n tag: \"stzh-menu\",\n styleUrl: \"stzh-menu.scss\",\n scoped: true\n})\nexport class StzhMenu {\n render() {\n return (\n <Host role=\"menu\">\n <div class=\"stzh-menu\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","/\n @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n \n @prop --stzh-menu-item-height: Global: Height of items\n /\n\n:host {\n --height: var(--stzh-menu-item-height);\n --color: #{$colorBlack};\n --background-color: transparent;\n --icon-size: #{iconSize('small')};\n --padding-top: #{space('xsmall')};\n --padding-bottom: #{space('xsmall')};\n --padding-left: #{space('large')};\n --padding-right: #{space('large')};\n\n --hover-color: #{$colorBlack};\n --hover-background-color: #{$colorGrey20};\n\n &[size=\"large\"] {\n --icon-size: #{iconSize()};\n --height: var(--stzh-menu-large-item-height);\n --padding-left: #{space('xlarge')};\n --padding-right: #{space('xlarge')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$colorPrimary70};\n\n --hover-color: #{$colorPrimary70};\n --hover-background-color: #{$colorSecondary30};\n }\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorPrimary70};\n --hover-color: #{$colorPrimary70};\n --hover-background-color: #{$colorGrey20};\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey70};\n --background-color: #{$colorGrey10};\n\n --hover-color: #{$colorGrey70};\n --hover-background-color: #{$colorGrey10};\n }\n}\n\n.stzh-menu-item {\n @include fontSize('micro');\n font-family: inherit;\n display: flex;\n gap: space('small');\n align-items: center;\n justify-content: stretch;\n appearance: none;\n text-decoration-line: none;\n border: none;\n padding-top: var(--padding-top);\n padding-bottom: var(--padding-bottom);\n padding-left: var(--padding-left);\n padding-right: var(--padding-right);\n color: var(--color);\n background-color: var(--background-color);\n width: 100%;\n height: var(--height);\n line-height: var(--height);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: calc(#{space('xsmall')} -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &__text-wrapper {\n display: flex;\n gap: space('xsmall');\n }\n\n &__counter {\n @include font;\n }\n\n &__text {\n @include truncate;\n }\n\n /* Large variant /\n\n &--size-large {\n @include fontSize('milli');\n gap: space('medium');\n }\n\n / Disabled variant /\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhMenuItemFocusEvent,\n StzhMenuItemBlurEvent,\n StzhMenuItemClickEvent,\n StzhBadgeType,\n StzhMenuSize,\n StzhMenuVariant\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/\n @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n /\n@Component({\n tag: \"stzh-menu-item\",\n styleUrl: \"stzh-menu-item.scss\",\n scoped: true\n})\nexport class StzhMenuItem {\n /* Variant /\n @Prop({ reflect: true }) variant: StzhMenuVariant = \"default\";\n\n /* Size /\n @Prop({ reflect: true }) size: StzhMenuSize = \"default\";\n\n /* Counter /\n @Prop() counter: number;\n\n /* Badge (only displayed if `icon` property or icon slot is used) /\n @Prop() badge: string = \"\";\n\n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /* Whether the button is disabled /\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /* Whether the button is active /\n @Prop({ reflect: true }) active: boolean = false;\n\n /* Icon (use instead of icon slot) /\n @Prop() icon: string = \"\";\n\n /* Label /\n @Prop() label: string = \"\";\n\n /* `href` if the button should be used as link /\n @Prop() href: string = \"\";\n\n /* Target if the button is used as link (if `href` used) /\n @Prop() target: string = \"\";\n\n /* Accessible label for screen readers to replace visible text /\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /\n For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n /\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhMenuItemElement;\n\n /* Focus event /\n @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n /* Blur event /\n @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n /* Click event */\n @Event() stzhClick: EventEmitter<StzhMenuItemClickEvent>;\n\n private menuItem: HTMLButtonElement \| HTMLAnchorElement;\n private text: HTMLDivElement;\n\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.menuItem.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-menu-item\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-menu-item\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-menu-item\",\n originalEvent: event,\n href: this.href\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId \|\| this.text.innerText);\n });\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n {iconUsed &&\n <div class=\"stzh-menu-item__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge \|\| this.badgeEmpty) &&\n <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n }\n <div class=\"stzh-menu-item__text-wrapper\">\n <div\n ref={(el) => (this.text = el as HTMLDivElement)}\n class=\"stzh-menu-item__text\"\n >\n {this.label ? this.label : <slot></slot>}\n </div>\n {this.counter &&\n <div class=\"stzh-menu-item__counter\">\n ({this.counter})\n </div>\n }\n </div>\n </Fragment>\n );\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") \|\| !!this.icon;\n const classes = {\n \"stzh-menu-item\": true,\n \"stzh-menu-item--has-icon\": iconUsed,\n \"stzh-menu-item--has-badge\": !!this.badge,\n \"stzh-menu-item--is-disabled\": this.disabled,\n \"stzh-menu-item--is-active\": this.active,\n [`stzh-menu-item--size-${this.size}`]: !!this.size,\n [`stzh-menu-item--${this.variant}`]: !!this.variant\n };\n\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n class={classes}\n type=\"button\"\n disabled={this.disabled}\n aria-label={this.a11yLabel \|\| null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/stzh-microsite-teaserlist.entry.js CHANGED Viewed

@@ -13,7 +13,7 @@ const StzhMicrositeTeaserlist = class {
     this._showMoreLink = false;
     this.handleChange = (event) => {
       this.showItems = this._initialShowItems;
-      this.activeFilter = event.detail.value;
+      this.activeFilter = typeof event.detail.value === "string" ? event.detail.value : event.detail.value[0] || "";
     };
     this.handleMoreClick = () => {
       this.showItems = this.showItems + this.stepItems;
@@ -74,7 +74,7 @@ const StzhMicrositeTeaserlist = class {
       "stzh-microsite-teaserlist": true,
     };
     return (h(Host, null, h("div", { class: classes }, this._tagChips.length > 0 &&
-      h("stzh-chipselect", { "hide-optional": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-cardlist", { layout: "teasers" }, this._filteredSlicedItems.map((item) => h("stzh-card", { href: item.link }, item.image &&
+      h("stzh-chipselect", { "hide-optional": true, "label-hidden": true, class: "stzh-microsite-teaserlist__filter", label: this.localization.tagsLabel, data: this._tagChips, onStzhChange: this.handleChange }), h("stzh-cardlist", { layout: "teasers" }, this._filteredSlicedItems.map((item) => h("stzh-card", { href: item.link }, item.image &&
       h("stzh-ratio", { slot: "image" }, h("img", { src: item.image })), item.title &&
       h("div", { slot: "heading" }, item.title), item.description &&
       h("div", { slot: "content" }, item.description)))), this._showMoreLink &&