@oiz/stzh-components 3.3.0-beta1 → 3.3.0-beta4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (118) hide show
  1. package/dist/cjs/{app-globals-c314a0a4.js → app-globals-add1c2c1.js} +2 -2
  2. package/dist/cjs/{app-globals-c314a0a4.js.map → app-globals-add1c2c1.js.map} +1 -1
  3. package/dist/cjs/index-92254d32.js +4 -0
  4. package/dist/cjs/index.cjs.js.map +1 -1
  5. package/dist/cjs/loader.cjs.js +2 -2
  6. package/dist/cjs/stzh-app-nav.cjs.entry.js +32 -0
  7. package/dist/cjs/stzh-app-nav.cjs.entry.js.map +1 -0
  8. package/dist/cjs/stzh-badge_3.cjs.entry.js +38 -17
  9. package/dist/cjs/stzh-badge_3.cjs.entry.js.map +1 -1
  10. package/dist/cjs/stzh-components.cjs.js +2 -2
  11. package/dist/cjs/stzh-datepicker_3.cjs.entry.js +2 -0
  12. package/dist/cjs/stzh-datepicker_3.cjs.entry.js.map +1 -1
  13. package/dist/cjs/stzh-header.cjs.entry.js +57 -17
  14. package/dist/cjs/stzh-header.cjs.entry.js.map +1 -1
  15. package/dist/cjs/stzh-olmap.cjs.entry.js.map +1 -1
  16. package/dist/cjs/stzh-pagetitle.cjs.entry.js +1 -1
  17. package/dist/cjs/stzh-pagetitle.cjs.entry.js.map +1 -1
  18. package/dist/cjs/stzh-row.cjs.entry.js +1 -1
  19. package/dist/cjs/stzh-row.cjs.entry.js.map +1 -1
  20. package/dist/collection/assets/i18n/de.json +3 -0
  21. package/dist/collection/assets/i18n/en.json +3 -0
  22. package/dist/collection/collection-manifest.json +1 -0
  23. package/dist/collection/components/stzh-app-nav/stzh-app-nav.css +247 -0
  24. package/dist/collection/components/stzh-app-nav/stzh-app-nav.e2e.js +16 -0
  25. package/dist/collection/components/stzh-app-nav/stzh-app-nav.e2e.js.map +1 -0
  26. package/dist/collection/components/stzh-app-nav/stzh-app-nav.js +79 -0
  27. package/dist/collection/components/stzh-app-nav/stzh-app-nav.js.map +1 -0
  28. package/dist/collection/components/stzh-app-nav/stzh-app-nav.localization.js +2 -0
  29. package/dist/collection/components/stzh-app-nav/stzh-app-nav.localization.js.map +1 -0
  30. package/dist/collection/components/stzh-app-nav/stzh-app-nav.stories.js +68 -0
  31. package/dist/collection/components/stzh-datepicker/stzh-datepicker.js +2 -0
  32. package/dist/collection/components/stzh-datepicker/stzh-datepicker.js.map +1 -1
  33. package/dist/collection/components/stzh-header/stzh-header.css +31 -2
  34. package/dist/collection/components/stzh-header/stzh-header.js +144 -21
  35. package/dist/collection/components/stzh-header/stzh-header.js.map +1 -1
  36. package/dist/collection/components/stzh-header/stzh-header.stories.js +72 -62
  37. package/dist/collection/components/stzh-icon/stzh-icon.js +38 -17
  38. package/dist/collection/components/stzh-icon/stzh-icon.js.map +1 -1
  39. package/dist/collection/components/stzh-olmap/stzh-olmap.js +1 -1
  40. package/dist/collection/components/stzh-olmap/stzh-olmap.js.map +1 -1
  41. package/dist/collection/components/stzh-pagetitle/stzh-pagetitle.css +0 -1
  42. package/dist/collection/components/stzh-row/stzh-row.css +184 -240
  43. package/dist/collection/index.js.map +1 -1
  44. package/dist/components/index.js +1 -1
  45. package/dist/components/index2.js.map +1 -1
  46. package/dist/components/stzh-app-nav.d.ts +11 -0
  47. package/dist/components/stzh-app-nav.js +8 -0
  48. package/dist/components/stzh-app-nav.js.map +1 -0
  49. package/dist/components/stzh-app-nav2.js +64 -0
  50. package/dist/components/stzh-app-nav2.js.map +1 -0
  51. package/dist/components/stzh-datepicker2.js +2 -0
  52. package/dist/components/stzh-datepicker2.js.map +1 -1
  53. package/dist/components/stzh-header.js +84 -25
  54. package/dist/components/stzh-header.js.map +1 -1
  55. package/dist/components/stzh-icon2.js +38 -17
  56. package/dist/components/stzh-icon2.js.map +1 -1
  57. package/dist/components/stzh-olmap.js.map +1 -1
  58. package/dist/components/stzh-pagetitle.js +1 -1
  59. package/dist/components/stzh-pagetitle.js.map +1 -1
  60. package/dist/components/stzh-row.js +1 -1
  61. package/dist/components/stzh-row.js.map +1 -1
  62. package/dist/esm/{app-globals-b82e4e9d.js → app-globals-7f5414ca.js} +2 -2
  63. package/dist/esm/{app-globals-b82e4e9d.js.map → app-globals-7f5414ca.js.map} +1 -1
  64. package/dist/esm/index-e3050b18.js +4 -0
  65. package/dist/esm/index.js.map +1 -1
  66. package/dist/esm/loader.js +2 -2
  67. package/dist/esm/stzh-app-nav.entry.js +28 -0
  68. package/dist/esm/stzh-app-nav.entry.js.map +1 -0
  69. package/dist/esm/stzh-badge_3.entry.js +38 -17
  70. package/dist/esm/stzh-badge_3.entry.js.map +1 -1
  71. package/dist/esm/stzh-components.js +2 -2
  72. package/dist/esm/stzh-datepicker_3.entry.js +2 -0
  73. package/dist/esm/stzh-datepicker_3.entry.js.map +1 -1
  74. package/dist/esm/stzh-header.entry.js +57 -17
  75. package/dist/esm/stzh-header.entry.js.map +1 -1
  76. package/dist/esm/stzh-olmap.entry.js.map +1 -1
  77. package/dist/esm/stzh-pagetitle.entry.js +1 -1
  78. package/dist/esm/stzh-pagetitle.entry.js.map +1 -1
  79. package/dist/esm/stzh-row.entry.js +1 -1
  80. package/dist/esm/stzh-row.entry.js.map +1 -1
  81. package/dist/stzh-components/assets/i18n/de.json +3 -0
  82. package/dist/stzh-components/assets/i18n/en.json +3 -0
  83. package/dist/stzh-components/index.esm.js.map +1 -1
  84. package/dist/stzh-components/p-10dc377b.entry.js +2 -0
  85. package/dist/stzh-components/p-10dc377b.entry.js.map +1 -0
  86. package/dist/stzh-components/p-487b6e52.entry.js +2 -0
  87. package/dist/stzh-components/p-487b6e52.entry.js.map +1 -0
  88. package/dist/stzh-components/p-4f7f4362.entry.js +2 -0
  89. package/dist/stzh-components/p-4f7f4362.entry.js.map +1 -0
  90. package/dist/stzh-components/{p-d869745a.js → p-6009632f.js} +2 -2
  91. package/dist/stzh-components/p-6a1d65ce.entry.js +2 -0
  92. package/dist/stzh-components/p-6a1d65ce.entry.js.map +1 -0
  93. package/dist/stzh-components/p-b4f5d152.entry.js.map +1 -1
  94. package/dist/stzh-components/{p-c9265a65.entry.js → p-f0887c02.entry.js} +2 -2
  95. package/dist/stzh-components/p-f0887c02.entry.js.map +1 -0
  96. package/dist/stzh-components/p-f42f6787.entry.js +2 -0
  97. package/dist/stzh-components/p-f42f6787.entry.js.map +1 -0
  98. package/dist/stzh-components/stzh-components.esm.js +1 -1
  99. package/dist/stzh-components/stzh-components.esm.js.map +1 -1
  100. package/dist/types/components/stzh-app-nav/stzh-app-nav.d.ts +11 -0
  101. package/dist/types/components/stzh-app-nav/stzh-app-nav.localization.d.ts +4 -0
  102. package/dist/types/components/stzh-header/stzh-header.d.ts +18 -5
  103. package/dist/types/components/stzh-icon/stzh-icon.d.ts +3 -1
  104. package/dist/types/components/stzh-olmap/stzh-olmap.d.ts +1 -1
  105. package/dist/types/components.d.ts +75 -12
  106. package/dist/types/index.d.ts +10 -0
  107. package/dist/vscode-data.json +22 -6
  108. package/package.json +1 -1
  109. package/dist/stzh-components/p-6e29bc61.entry.js +0 -2
  110. package/dist/stzh-components/p-6e29bc61.entry.js.map +0 -1
  111. package/dist/stzh-components/p-b047262a.entry.js +0 -2
  112. package/dist/stzh-components/p-b047262a.entry.js.map +0 -1
  113. package/dist/stzh-components/p-b608bf1a.entry.js +0 -2
  114. package/dist/stzh-components/p-b608bf1a.entry.js.map +0 -1
  115. package/dist/stzh-components/p-b62c870a.entry.js +0 -2
  116. package/dist/stzh-components/p-b62c870a.entry.js.map +0 -1
  117. package/dist/stzh-components/p-c9265a65.entry.js.map +0 -1
  118. /package/dist/stzh-components/{p-d869745a.js.map → p-6009632f.js.map} +0 -0
package/dist/stzh-components/{p-c9265a65.entry.js → p-f0887c02.entry.js} RENAMED
@@ -1,2 +1,2 @@
1
- import{r as t,h as s,a as o,c as e,F as i,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-d789f265.js";import"./p-9b063923.js";const h=".sc-stzh-badge-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-badge-h{display:none}.sc-stzh-badge-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h .has-focus.sc-stzh-badge{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge{outline-style:none !important}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge::-moz-focus-inner{border:0 !important}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-success70)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error60)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-primary70)}[filled][type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error70)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);box-sizing:content-box;display:inline-flex;justify-content:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.625rem;height:0.625rem;padding:0}";const a=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,{filled:!!this.label},s("div",{class:t},this.label||s("slot",null)))}};a.style=h;const c='@charset "UTF-8";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}';const l=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.stzhClick=e(this,"stzhClick",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}else{this.stzhClick.emit({component:"stzh-button",originalEvent:t,href:this.href})}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.defaultChecked=undefined;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.buttonAccesskey=undefined;this.buttonId=undefined;this.showToggleIcon=false;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yCurrent=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon&&s("stzh-icon",{class:"stzh-button__icon",name:this.icon}),!this.icon&&this.showToggleIcon&&s("div",{class:"stzh-button__toggle-icon-wrapper"},s("div",{class:"stzh-button__toggle-icon"})),!this.icon&&!this.showToggleIcon&&s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text",ref:t=>this.text=t},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),this.label?this.label:s("slot",null))}renderInner(t){return s(i,null,s("div",{class:"stzh-button__inner"},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}async componentWillLoad(){this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.button)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=r(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,"stzh-button--is-expanded":this.a11yExpanded,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"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,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,defaultChecked:this.defaultChecked,checked:this.checked,disabled:this.disabled,"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,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,name:this.name,value:this.value,disabled:this.disabled,"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,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};l.style=c;const d=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){const t=await fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`);if(t.status===200){const s=await t.text();const o=new DOMParser;const e=o.parseFromString(s,"image/svg+xml");this.svgElement=e.documentElement;this.svgElement.classList.add("stzh-icon__svg");window.setTimeout((()=>{this.iconDisplay="contents"}),0);this.a11yTitleWatcher(this.a11yTitle)}else{this.svgElement=null;this.svgHtml=""}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){this.svgElement.setAttribute("aria-hidden",t?"false":"true");this.svgElement.setAttribute("focusable",t?"true":"false");this.svgElement.setAttribute("aria-labelledby",t?`${this.iconId}-title`:null);let s=this.svgElement.querySelector("title");if(!s){s=document.createElement("title");s.id=`${this.iconId}-title`;this.svgElement.appendChild(s)}s.innerHTML=t;this.svgHtml=this.svgElement.outerHTML}async componentWillLoad(){this.iconId=`stzh-icon-${z++}`;this.nameWatcher(this.name)}render(){return s(o,null,s("div",{class:"stzh-icon",style:{display:this.iconDisplay},innerHTML:this.svgHtml}))}get element(){return n(this)}static get watchers(){return{name:["nameWatcher"],a11yTitle:["a11yTitleWatcher"]}}};u.style=d;export{a as stzh_badge,l as stzh_button,u as stzh_icon};
2
- //# sourceMappingURL=p-c9265a65.entry.js.map
1
+ import{r as t,h as s,a as o,c as e,F as i,g as n}from"./p-c7bfac7a.js";import{h as r}from"./p-d789f265.js";import"./p-9b063923.js";const h=".sc-stzh-badge-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-badge-h{display:none}.sc-stzh-badge-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-badge-h *.sc-stzh-badge,.sc-stzh-badge-h *.sc-stzh-badge::before,.sc-stzh-badge-h *.sc-stzh-badge::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-badge-h .has-focus.sc-stzh-badge{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge{outline-style:none !important}.sc-stzh-badge-h .stzh-fylingfocus-focused.sc-stzh-badge::-moz-focus-inner{border:0 !important}.sc-stzh-badge-h{--color:var(--stzh-color-white);--background-color:var(--stzh-color-grey90);display:inline-flex}[type=success].sc-stzh-badge-h{--background-color:var(--stzh-color-success70)}[type=warning].sc-stzh-badge-h{--color:var(--stzh-color-black);--background-color:var(--stzh-color-warning60)}[type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error60)}[type=info].sc-stzh-badge-h{--background-color:var(--stzh-color-primary70)}[filled][type=error].sc-stzh-badge-h{--background-color:var(--stzh-color-error70)}.stzh-badge.sc-stzh-badge{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);box-sizing:content-box;display:inline-flex;justify-content:center;align-items:center;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;background-color:var(--background-color);color:var(--color);text-transform:uppercase}.stzh-badge.sc-stzh-badge:empty{width:0.625rem;height:0.625rem;padding:0}";const a=class{constructor(s){t(this,s);this.label="";this.type="default"}render(){const t={"stzh-badge":true,[`stzh-badge--type-${this.type}`]:!!this.type};return s(o,{filled:!!this.label},s("div",{class:t},this.label||s("slot",null)))}};a.style=h;const c='@charset "UTF-8";.sc-stzh-button-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-button-h{display:none}.sc-stzh-button-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-button-h *.sc-stzh-button,.sc-stzh-button-h *.sc-stzh-button::before,.sc-stzh-button-h *.sc-stzh-button::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-button-h .has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button{outline-style:none !important}.sc-stzh-button-h .stzh-fylingfocus-focused.sc-stzh-button::-moz-focus-inner{border:0 !important}.sc-stzh-button-h{--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem;--color:var(--stzh-button-color, var(--stzh-color-white));--background-color:var(--stzh-button-background-color, var(--stzh-color-primary70));--border-width:0px;--border-color:transparent;--border-radius:0px;--icon-text-margin:var(--stzh-space-xsmall);--icon-toggle-color:currentColor;--badge-icon-text-margin:calc(var(--icon-text-margin) + var(--stzh-space-xxsmall));--white-space:var(--stzh-button-white-space, normal);--box-shadow:none;--cursor:pointer;--hover-color:var(--stzh-button-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-hover-background-color, var(--stzh-color-secondary60));--hover-border-color:transparent;display:inline-grid;width:auto;min-width:var(--height);min-height:var(--height);pointer-events:var(--stzh-button-pointer-events, auto)}.sc-stzh-button-h:where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}@media print{.sc-stzh-button-h{-webkit-print-color-adjust:exact;print-color-adjust:exact}}[icon-only].sc-stzh-button-h:not([icon-only=false]){--padding-top:0;--padding-bottom:0;--padding-left:0;--padding-right:0;width:var(--height);height:var(--height)}[fullwidth].sc-stzh-button-h:not([fullwidth=false]){width:100%;display:grid}[rounded].sc-stzh-button-h:not([rounded=false]){--border-radius:var(--height)}[no-padding-left].sc-stzh-button-h:not([no-padding-left=false]){--padding-left:0px}[no-padding-right].sc-stzh-button-h:not([no-padding-right=false]){--padding-right:0px}[variant=secondary].sc-stzh-button-h{--color:var(--stzh-button-secondary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-secondary-background-color, var(--stzh-color-secondary30));--hover-color:var(--stzh-button-secondary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-secondary-hover-background-color, var(--stzh-color-secondary40))}[variant=tertiary].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:var(--stzh-button-tertiary-background-color, transparent);--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--stzh-button-tertiary-hover-background-color, var(--stzh-color-secondary20))}[variant=tertiary-plain].sc-stzh-button-h{--color:var(--stzh-button-tertiary-color, var(--stzh-color-primary70));--background-color:transparent;--hover-color:var(--stzh-button-tertiary-hover-color, var(--stzh-color-primary80));--hover-background-color:var(--background-color)}[active].sc-stzh-button-h:not([active=false]){--color:var(--stzh-button-active-color, var(--stzh-color-white));--background-color:var(--stzh-button-active-background-color, var(--stzh-color-secondary60));--hover-color:var(--stzh-button-active-hover-color, var(--stzh-color-white));--hover-background-color:var(--stzh-button-active-hover-background-color, var(--stzh-color-secondary60))}[disabled].sc-stzh-button-h:not([disabled=false]),[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false]){--color:var(--stzh-button-disabled-color, var(--stzh-color-white));--background-color:var(--stzh-button-disabled-background-color, var(--stzh-color-grey70));--hover-color:var(--color);--hover-background-color:var(--background-color)}[disabled].sc-stzh-button-h:not([disabled=false])[variant=secondary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=secondary]{--color:var(--stzh-button-secondary-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-secondary-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=input],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=input]{--color:var(--stzh-button-input-disabled-color, var(--stzh-color-grey80));--background-color:var(--stzh-button-input-disabled-background-color, var(--stzh-color-grey20))}[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary],[disabled].sc-stzh-button-h:not([disabled=false])[variant=tertiary-plain],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary],[a11y-disabled].sc-stzh-button-h:not([a11y-disabled=false])[variant=tertiary-plain]{--color:var(--stzh-button-tertiary-disabled-color, var(--stzh-color-grey70));--background-color:var(--stzh-button-tertiary-disabled-background-color, transparent)}.sc-stzh-button-h:where([size="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}@media screen and (min-width: 600px){.sc-stzh-button-h:where([size-small="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-small="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-small="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-small="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 900px){.sc-stzh-button-h:where([size-medium="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-medium="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-medium="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-medium="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1260px){.sc-stzh-button-h:where([size-large="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-large="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-large="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-large="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@media screen and (min-width: 1600px){.sc-stzh-button-h:where([size-ultra="default"]){--height:var(--stzh-form-input-height);--padding-top:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xsmall) - var(--border-width));--padding-left:var(--stzh-space-xlarge);--padding-right:var(--stzh-space-xlarge);--font-size:var(--stzh-font-centi-font-size);--line-height:var(--stzh-font-centi-text-line-height);--letter-spacing:normal;--icon-size:var(--stzh-icon-size-medium);--icon-toggle-size:0.90625rem}.sc-stzh-button-h:where([size-ultra="default"]):where([icon-only]:not([icon-only="false"])){--icon-size:var(--stzh-icon-size-large)}.sc-stzh-button-h:where([size-ultra="small"]){--height:var(--stzh-form-input-small-height);--padding-left:var(--stzh-space-large);--padding-right:var(--stzh-space-large);--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}.sc-stzh-button-h:where([size-ultra="tiny"]){--height:var(--stzh-form-input-tiny-height);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--padding-top:calc(var(--stzh-space-xxsmall) - var(--border-width));--padding-bottom:calc(var(--stzh-space-xxsmall) - var(--border-width));--font-size:var(--stzh-font-milli-font-size);--line-height:var(--stzh-font-milli-text-line-height);--icon-size:var(--stzh-icon-size-medium)}}@keyframes stzh-button-effect-cta{0%,20%,50%,80%,100%{transform:translateX(0)}40%{transform:translateX(-0.5rem)}60%{transform:translateX(-0.25rem)}}.stzh-button.sc-stzh-button{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--font-size);line-height:var(--line-height);letter-spacing:var(--letter-spacing);position:relative;z-index:0;overflow:visible;display:flex;align-items:center;justify-content:stretch;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--color);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);background-color:var(--background-color);transition-duration:var(--stzh-base-transition-animation-speed);transition-property:color, background-color, border-color;border-style:solid;border-width:var(--border-width);border-color:var(--border-color);cursor:var(--cursor);-webkit-text-decoration-line:none;text-decoration-line:none;width:100%;height:100%;border-radius:var(--border-radius);text-align:left;box-shadow:var(--box-shadow)}.stzh-button.sc-stzh-button:hover{border-color:var(--hover-border-color);background-color:var(--hover-background-color);color:var(--hover-color)}.stzh-button__vhidden.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button__inner.sc-stzh-button{display:flex;align-items:center;justify-content:center;flex-grow:1}.stzh-button__icon-wrapper.sc-stzh-button,.stzh-button__toggle-icon-wrapper.sc-stzh-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.stzh-button__icon-wrapper.sc-stzh-button{--stzh-icon-size:var(--icon-size);width:auto;height:1em}.stzh-button__toggle-icon-wrapper.sc-stzh-button{width:var(--icon-size);height:var(--icon-size)}.stzh-button__toggle-icon.sc-stzh-button{position:relative;display:block;width:var(--icon-toggle-size);height:var(--icon-toggle-size)}.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--icon-toggle-size);height:0.125rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--icon-toggle-color)}@media (prefers-reduced-motion: reduce){.stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button__toggle-icon.sc-stzh-button::after{transition:none}}.stzh-button__toggle-icon.sc-stzh-button::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-button__text.sc-stzh-button{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;hyphens:auto;white-space:var(--white-space);text-align:center}.stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--icon-text-margin)}.stzh-button__badge.sc-stzh-button{position:absolute;z-index:1;top:0;right:0}.stzh-button__input.sc-stzh-button{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.stzh-button__mark.sc-stzh-button{border:0.125rem solid var(--stzh-color-black);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;flex-shrink:0;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;transition:border-color var(--stzh-base-transition-animation-speed);width:1.25rem;height:1.25rem;margin-right:var(--stzh-space-xsmall);border-color:currentColor}.stzh-button__mark.sc-stzh-button::before{content:""}.stzh-button__check.sc-stzh-button{background-color:currentColor;color:var(--stzh-color-primary70);width:1rem;height:1rem;border-radius:50%;opacity:0;transition-property:color;transition-duration:var(--stzh-base-transition-animation-speed)}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-button__check.sc-stzh-button{background-color:ButtonText}}.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-secondary60)}.stzh-button.sc-stzh-button:hover .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:focus:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:hover~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-secondary60)}.stzh-button__input.sc-stzh-button:focus~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button,.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-primary)}.stzh-button__input.sc-stzh-button:checked~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{opacity:1}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button .stzh-button__check.sc-stzh-button{color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__input.sc-stzh-button~.stzh-button__inner.sc-stzh-button .stzh-button__mark.sc-stzh-button{border-color:var(--stzh-color-grey70)}.stzh-button--is-disabled.sc-stzh-button .stzh-button__mark.sc-stzh-button{background-color:var(--stzh-color-grey10)}.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::before,.stzh-button--is-expanded.sc-stzh-button .stzh-button__toggle-icon.sc-stzh-button::after{transform:rotate(0) translate(-50%, -50%)}.stzh-button--badge-position-button.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:static}.stzh-button__badge.sc-stzh-button,.stzh-button--badge-position-button.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-xsmall) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button{position:relative}.stzh-button--badge-position-icon.stzh-button--has-icon.sc-stzh-button .stzh-button__badge.sc-stzh-button{top:calc(var(--stzh-space-xsmall) * -1);right:calc(var(--stzh-space-small) * -1)}.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__icon-wrapper.sc-stzh-button:not(:empty)+.stzh-button__text.sc-stzh-button:not(:empty),.stzh-button--badge-position-icon.stzh-button--has-icon.stzh-button--has-badge.sc-stzh-button .stzh-button__text.sc-stzh-button:not(:empty)+.stzh-button__icon-wrapper.sc-stzh-button:not(:empty){margin-left:var(--badge-icon-text-margin)}.stzh-button--has-icon-only.sc-stzh-button .stzh-button__text.sc-stzh-button{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-button--effect-cta.sc-stzh-button:hover .stzh-button__icon-wrapper.sc-stzh-button{animation:stzh-button-effect-cta 1s}.stzh-button--align-left.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-start}.stzh-button--align-right.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:flex-end}.stzh-button--align-center.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:center}.stzh-button--align-space-between.sc-stzh-button .stzh-button__inner.sc-stzh-button{justify-content:space-between}.stzh-button--is-disabled.sc-stzh-button{cursor:not-allowed}.stzh-button--default.has-focus.sc-stzh-button{outline:var(--stzh-flyingfocus-color) solid 0.1875rem}';const l=class{constructor(s){t(this,s);this.stzhFocus=e(this,"stzhFocus",7);this.stzhBlur=e(this,"stzhBlur",7);this.stzhChange=e(this,"stzhChange",7);this.stzhClick=e(this,"stzhClick",7);this.focusedByInput=false;this.handleReset=async()=>{this.checked=this.defaultChecked};this.onInput=t=>{this.checked=this.input.checked;this.stzhChange.emit({component:"stzh-button",originalEvent:t,value:this.value,checked:this.checked})};this.onRootFocus=()=>{if(!this.focusedByInput){this.button.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;const s=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhFocus.emit({component:"stzh-button",originalEvent:t})};this.onBlur=t=>{const s=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});this.element.dispatchEvent(s);this.stzhBlur.emit({component:"stzh-button",originalEvent:t})};this.onClick=t=>{if(this.disabled){t.stopPropagation();t.preventDefault()}else{this.stzhClick.emit({component:"stzh-button",originalEvent:t,href:this.href})}};this.localization=undefined;this.badge="";this.badgeType="default";this.badgePosition="button";this.badgeEmpty=false;this.fullwidth=false;this.rounded=false;this.size="default";this.sizeSmall=undefined;this.sizeMedium=undefined;this.sizeLarge=undefined;this.sizeUltra=undefined;this.textAlign="default";this.variant="default";this.icon="";this.iconPosition="left";this.checked=false;this.defaultChecked=undefined;this.name="";this.value="";this.href="";this.rel=undefined;this.target="";this.download=undefined;this.type="button";this.disabled=false;this.active=false;this.label="";this.effect="default";this.iconOnly=false;this.noPaddingLeft=false;this.noPaddingRight=false;this.buttonAccesskey=undefined;this.buttonId=undefined;this.showToggleIcon=false;this.a11yLabel=undefined;this.a11yDescribedby="";this.a11yExpanded=undefined;this.a11yDisabled=undefined;this.a11yControls=undefined;this.a11yCurrent=undefined;this.a11yTabindex=undefined;this.analyticsId=undefined}resetListener(t){if(t.target.contains(this.element)){requestAnimationFrame((()=>{this.handleReset()}))}}renderIcon(t){return s("div",{class:"stzh-button__icon-wrapper"},this.icon&&s("stzh-icon",{class:"stzh-button__icon",name:this.icon}),!this.icon&&this.showToggleIcon&&s("div",{class:"stzh-button__toggle-icon-wrapper"},s("div",{class:"stzh-button__toggle-icon"})),!this.icon&&!this.showToggleIcon&&s("slot",{name:"icon"}),(this.badge||this.badgeEmpty)&&this.badgePosition==="icon"&&t&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}renderContent(){return s("div",{class:"stzh-button__text",ref:t=>this.text=t},this.rel&&this.rel.includes("external")&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.externalLinkLabel),this.download&&s("div",{class:"stzh-button__vhidden"},this.localization.$globals.downloadLinkLabel),this.label?this.label:s("slot",null))}renderInner(t){return s(i,null,s("div",{class:"stzh-button__inner"},this.type==="radio"&&s("div",{class:"stzh-button__mark"},s("div",{class:"stzh-button__check"})),this.iconPosition==="left"&&this.renderIcon(t),this.renderContent(),this.iconPosition==="right"&&this.renderIcon(t)),(this.badge||this.badgeEmpty)&&(this.badgePosition==="button"||!t)&&s("stzh-badge",{class:"stzh-button__badge",label:this.badge,type:this.badgeType}))}async componentWillLoad(){this.defaultChecked=typeof this.defaultChecked==="boolean"?this.defaultChecked:this.checked;if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"button")}}componentDidRender(){requestAnimationFrame((()=>{var t;(t=this.button)===null||t===void 0?void 0:t.setAttribute("s-object-id",this.analyticsId||this.text.innerText)}))}render(){const t=r(this.element,"icon")||!!this.icon;const e={"stzh-button":true,"stzh-button--has-icon":t,"stzh-button--has-icon-only":this.iconOnly,"stzh-button--has-badge":!!this.badge,"stzh-button--is-rounded":this.rounded,"stzh-button--is-fullwidth":this.fullwidth,"stzh-button--is-disabled":this.disabled||this.a11yDisabled,"stzh-button--is-active":this.active,"stzh-button--is-expanded":this.a11yExpanded,[`stzh-button--effect-${this.effect}`]:!!this.effect,[`stzh-button--badge-position-${this.badgePosition}`]:!!this.badgePosition,[`stzh-button--align-${this.textAlign}`]:!!this.textAlign,[`stzh-button--type-${this.type}`]:!!this.type,[`stzh-button--${this.variant}`]:!!this.variant};return s(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},this.href?s("a",{ref:t=>this.button=t,href:this.disabled?null:this.href,rel:this.rel,download:this.download,target:this.target,class:e,"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,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)):this.type==="radio"?s("label",{ref:t=>this.button=t,class:e,onClick:this.onClick},s("input",{ref:t=>this.input=t,type:"radio",class:"stzh-button__input",name:this.name,value:this.value,defaultChecked:this.defaultChecked,checked:this.checked,disabled:this.disabled,"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,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick,onInput:this.onInput}),this.renderInner(t)):s("button",{ref:t=>this.button=t,class:e,type:this.type,name:this.name,value:this.value,disabled:this.disabled,"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,id:this.buttonId,accessKey:this.buttonAccesskey,tabindex:this.a11yTabindex,onFocus:this.onFocus,onBlur:this.onBlur,onClick:this.onClick},this.renderInner(t)))}get element(){return n(this)}};l.style=c;const d=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--size:var(--stzh-icon-size);--color:var(--stzh-icon-color);--vertical-align:var(--stzh-icon-vertical-align);display:inline-flex;justify-content:center;align-items:center;color:var(--color);vertical-align:var(--vertical-align);width:var(--size);height:var(--size)}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}.stzh-icon{display:none}.stzh-icon__svg{width:var(--size);height:var(--size)}";let z=0;const u=new Map;const b=class{constructor(s){t(this,s);this.name="";this.a11yTitle="";this.svgHtml="";this.iconDisplay="none"}async nameWatcher(t){this.iconDisplay="none";if(t){if(u.has(t)){this.svgHtml=await u.get(t);this.updateAccessibilityAttributes();this.showIcon()}else{const s=fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`).then((t=>{if(t.status===200){return t.text()}throw new Error("Failed to fetch icon")})).then((t=>{const s=new DOMParser;const o=s.parseFromString(t,"image/svg+xml");const e=o.documentElement;e.classList.add("stzh-icon__svg");return e.outerHTML}));u.set(t,s);this.svgHtml=await s;this.updateAccessibilityAttributes();this.showIcon()}}else{this.svgElement=null;this.svgHtml=""}}a11yTitleWatcher(t){if(!this.svgElement)return;this.svgElement.setAttribute("aria-hidden",t?"false":"true");this.svgElement.setAttribute("focusable",t?"true":"false");this.svgElement.setAttribute("aria-labelledby",t?`${this.iconId}-title`:null);let s=this.svgElement.querySelector("title");if(!s){s=document.createElement("title");s.id=`${this.iconId}-title`;this.svgElement.appendChild(s)}s.innerHTML=t;this.svgHtml=this.svgElement.outerHTML}async componentWillLoad(){this.iconId=`stzh-icon-${z++}`;await this.nameWatcher(this.name)}updateAccessibilityAttributes(){this.a11yTitleWatcher(this.a11yTitle)}showIcon(){window.setTimeout((()=>{this.iconDisplay="contents"}),0)}render(){return s(o,null,s("div",{class:"stzh-icon",style:{display:this.iconDisplay},innerHTML:this.svgHtml}))}get element(){return n(this)}static get watchers(){return{name:["nameWatcher"],a11yTitle:["a11yTitleWatcher"]}}};b.style=d;export{a as stzh_badge,l as stzh_button,b as stzh_icon};
2
+ //# sourceMappingURL=p-f0887c02.entry.js.map
package/dist/stzh-components/p-f0887c02.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["stzhBadgeCss","StzhBadge","render","classes","this","type","h","Host","filled","label","class","stzhButtonCss","StzhButton","focusedByInput","handleReset","async","checked","defaultChecked","onInput","event","input","stzhChange","emit","component","originalEvent","value","onRootFocus","button","focus","onFocus","focusEvent","FocusEvent","view","window","bubbles","cancelable","element","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","onClick","disabled","stopPropagation","preventDefault","stzhClick","href","resetListener","target","contains","requestAnimationFrame","renderIcon","iconUsed","icon","name","showToggleIcon","badge","badgeEmpty","badgePosition","badgeType","renderContent","ref","el","text","rel","includes","localization","$globals","externalLinkLabel","download","downloadLinkLabel","renderInner","Fragment","iconPosition","componentWillLoad","stzhComponents","utils","fetchTranslations","componentDidRender","_a","setAttribute","analyticsId","innerText","hasSlot","iconOnly","rounded","fullwidth","a11yDisabled","active","a11yExpanded","effect","textAlign","variant","tabindex","a11yLabel","a11yDescribedby","a11yControls","a11yCurrent","id","buttonId","accessKey","buttonAccesskey","a11yTabindex","stzhIconCss","iconCounter","iconCache","Map","StzhIcon","nameWatcher","iconDisplay","has","svgHtml","get","updateAccessibilityAttributes","showIcon","fetchSvgPromise","fetch","pathMedia","then","response","status","Error","svgString","parser","DOMParser","svgDoc","parseFromString","svgElement","documentElement","classList","add","outerHTML","set","a11yTitleWatcher","a11yTitle","iconId","title","querySelector","document","createElement","appendChild","innerHTML","setTimeout","style","display"],"sources":["src/components/stzh-badge/stzh-badge.scss?tag=stzh-badge&encapsulation=scoped","src/components/stzh-badge/stzh-badge.tsx","src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","src/components/stzh-button/stzh-button.tsx","src/components/stzh-icon/stzh-icon.scss?tag=stzh-icon&encapsulation=shadow","src/components/stzh-icon/stzh-icon.tsx"],"sourcesContent":[":host {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey90};\n display: inline-flex;\n\n &[type=\"success\"] {\n --background-color: #{$colorSuccess70};\n }\n\n &[type=\"warning\"] {\n --color: #{$colorBlack};\n --background-color: #{$colorWarning60};\n }\n\n &[type=\"error\"] {\n --background-color: #{$colorError60};\n }\n\n &[type=\"info\"] {\n --background-color: #{$colorPrimary70};\n }\n\n &[filled][type=\"error\"] {\n --background-color: #{$colorError70};\n }\n}\n\n.stzh-badge {\n @include badge;\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n} from \"@stencil/core\";\n\nimport { StzhBadgeType } from \"../../index\";\n\n/**\n * @slot - Slot badge content\n */\n@Component({\n tag: \"stzh-badge\",\n styleUrl: \"stzh-badge.scss\",\n scoped: true\n})\nexport class StzhBadge {\n /** Text content of the badge */\n @Prop() label: string = \"\";\n\n /** Type */\n @Prop({ reflect: true }) type: StzhBadgeType = \"default\";\n\n render() {\n const classes = {\n \"stzh-badge\": true,\n [`stzh-badge--type-${this.type}`]: !!this.type\n };\n\n return (\n <Host filled={!!this.label}>\n <div class={classes}>\n {this.label || <slot></slot>}\n </div>\n </Host>\n );\n }\n}\n","/**\n * @prop --height: Height of button\n * @prop --padding-top: Padding top of button\n * @prop --padding-bottom: Padding bottom of button\n * @prop --padding-left: Padding left of button\n * @prop --padding-right: Padding right of button\n * @prop --border-radius: Border radius of button\n * @prop --color: Color of button\n * @prop --background-color: Background color of button\n * @prop --border-color: Border color of button\n * @prop --icon-size: Size of icon next to button\n * @prop --hover-color: Hover color of button\n * @prop --hover-background-color: Hover background color of button\n * @prop --hover-border-color: Hover border color of button\n * @prop --white-space: White space behaviour of button\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@mixin button--size-default() {\n --height: #{$formInputHeight};\n --padding-top: calc(#{space('xsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xsmall')} - var(--border-width));\n --padding-left: #{space('xlarge')};\n --padding-right: #{space('xlarge')};\n --font-size: var(--stzh-font-centi-font-size);\n --line-height: var(--stzh-font-centi-text-line-height);\n --letter-spacing: normal;\n --icon-size: #{iconSize('medium')};\n --icon-toggle-size: 14.5px;\n\n &:where([icon-only]:not([icon-only=\"false\"])) {\n --icon-size: #{iconSize('large')};\n }\n}\n\n@mixin button--size-small() {\n --height: #{$formInputHeightSmall};\n --padding-left: #{space('large')};\n --padding-right: #{space('large')};\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n@mixin button--size-tiny() {\n --height: #{$formInputHeightTiny};\n --padding-left: #{space('medium')};\n --padding-right: #{space('medium')};\n --padding-top: calc(#{space('xxsmall')} - var(--border-width));\n --padding-bottom: calc(#{space('xxsmall')} - var(--border-width));\n --font-size: var(--stzh-font-milli-font-size);\n --line-height: var(--stzh-font-milli-text-line-height);\n --icon-size: #{iconSize('medium')};\n}\n\n:host {\n @include button--size-default;\n --color: var(--stzh-button-color, #{$colorWhite});\n --background-color: var(--stzh-button-background-color, #{$colorPrimary70});\n --border-width: 0px;\n --border-color: transparent;\n --border-radius: 0px;\n --icon-text-margin: #{space('xsmall')};\n --icon-toggle-color: currentColor;\n --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n --white-space: var(--stzh-button-white-space, normal);\n --box-shadow: none;\n --cursor: pointer;\n\n --hover-color: var(--stzh-button-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-hover-background-color, #{$colorSecondary60});\n --hover-border-color: transparent;\n\n display: inline-grid;\n width: auto;\n min-width: var(--height);\n min-height: var(--height);\n pointer-events: var(--stzh-button-pointer-events, auto);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n\n &[icon-only]:not([icon-only=\"false\"]) {\n --padding-top: 0;\n --padding-bottom: 0;\n --padding-left: 0;\n --padding-right: 0;\n\n width: var(--height);\n height: var(--height);\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: grid;\n }\n\n &[rounded]:not([rounded=\"false\"]) {\n --border-radius: var(--height);\n }\n\n &[no-padding-left]:not([no-padding-left=\"false\"]) {\n --padding-left: 0px;\n }\n\n &[no-padding-right]:not([no-padding-right=\"false\"]) {\n --padding-right: 0px;\n }\n\n &[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-secondary-background-color, #{$colorSecondary30});\n\n --hover-color: var(--stzh-button-secondary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-secondary-hover-background-color, #{$colorSecondary40});\n }\n\n &[variant=\"tertiary\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: var(--stzh-button-tertiary-background-color, transparent);\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--stzh-button-tertiary-hover-background-color, #{$colorSecondary20});\n }\n\n &[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-color, #{$colorPrimary70});\n --background-color: transparent;\n\n --hover-color: var(--stzh-button-tertiary-hover-color, #{$colorPrimary80});\n --hover-background-color: var(--background-color);\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--stzh-button-active-color, #{$colorWhite});\n --background-color: var(--stzh-button-active-background-color, #{$colorSecondary60});\n\n --hover-color: var(--stzh-button-active-hover-color, #{$colorWhite});\n --hover-background-color: var(--stzh-button-active-hover-background-color, #{$colorSecondary60});\n }\n\n &[disabled]:not([disabled=\"false\"]),\n &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n --color: var(--stzh-button-disabled-color, #{$colorWhite});\n --background-color: var(--stzh-button-disabled-background-color, #{$colorGrey70});\n\n --hover-color: var(--color);\n --hover-background-color: var(--background-color);\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"] {\n --color: var(--stzh-button-secondary-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-secondary-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"] {\n --color: var(--stzh-button-input-disabled-color, #{$colorGrey80});\n --background-color: var(--stzh-button-input-disabled-background-color, #{$colorGrey20});\n }\n\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n &[disabled]:not([disabled=\"false\"])[variant=\"tertiary-plain\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"],\n &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary-plain\"] {\n --color: var(--stzh-button-tertiary-disabled-color, #{$colorGrey70});\n --background-color: var(--stzh-button-tertiary-disabled-background-color, transparent);\n }\n}\n\n:host(:where([size=\"small\"])) {\n @include button--size-small;\n}\n\n:host(:where([size=\"tiny\"])) {\n @include button--size-tiny;\n}\n\n@each $breakpoint, $size in $breakpoints {\n @include mq($from: $breakpoint) {\n :host(:where([size-#{$breakpoint}=\"default\"])) {\n @include button--size-default;\n }\n\n :host(:where([size-#{$breakpoint}=\"small\"])) {\n @include button--size-small;\n }\n\n :host(:where([size-#{$breakpoint}=\"tiny\"])) {\n @include button--size-tiny;\n }\n }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n.stzh-button {\n @include font('heavy');\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n position: relative;\n z-index: 0;\n overflow: visible;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n color: var(--color);\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 background-color: var(--background-color);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--border-color);\n cursor: var(--cursor);\n text-decoration-line: none;\n width: 100%;\n height: 100%;\n border-radius: var(--border-radius);\n text-align: left;\n box-shadow: var(--box-shadow);\n\n &:hover {\n border-color: var(--hover-border-color);\n background-color: var(--hover-background-color);\n color: var(--hover-color);\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 &__toggle-icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n &__icon-wrapper {\n --stzh-icon-size: var(--icon-size);\n width: auto;\n height: 1em;\n }\n\n &__toggle-icon-wrapper {\n width: var(--icon-size);\n height: var(--icon-size);\n }\n\n &__toggle-icon {\n position: relative;\n display: block;\n width: var(--icon-toggle-size);\n height: var(--icon-toggle-size);\n\n &::before,\n &::after {\n position: absolute;\n top: 50%;\n left: 50%;\n content: '';\n display: block;\n width: var(--icon-toggle-size);\n height: 2px;\n transition-property: transform, background-color;\n transition-duration: 500ms;\n transform-origin: top left;\n background-color: var(--icon-toggle-color);\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n }\n\n &::before {\n transform: rotate(180deg) translate(-50%, -50%);\n }\n\n &::after {\n transform: rotate(90deg) translate(-50%, -50%);\n }\n }\n\n &__text {\n @include wordWrap;\n white-space: var(--white-space);\n text-align: center;\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--icon-text-margin);\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n &__input {\n @include visuallyhiddenInput;\n }\n\n &__mark {\n @include radio__mark();\n width: 20px;\n height: 20px;\n margin-right: space('xsmall');\n border-color: currentColor;\n }\n\n &__check {\n @include radio__check();\n }\n\n /* Hover / Focus / Checked / Disabled of Radio Type */\n\n &__input:checked:hover ~ &__inner &__mark &__check,\n &__input:checked:focus ~ &__inner &__mark &__check {\n color: $colorSecondary60;\n }\n\n &:hover &__mark,\n &__input:focus:hover ~ &__inner &__mark,\n &__input:checked:hover ~ &__inner &__mark,\n &__input:checked:focus ~ &__inner &__mark {\n border-color: $colorSecondary60;\n }\n\n &__input:focus ~ &__inner &__mark,\n &__input:checked ~ &__inner &__mark {\n border-color: $colorPrimary;\n }\n\n &__input:checked ~ &__inner &__mark &__check {\n opacity: 1;\n }\n\n &--is-disabled &__input ~ &__inner &__mark &__check {\n color: $formDisabledColor;\n }\n\n &--is-disabled &__input ~ &__inner &__mark {\n border-color: $formDisabledBorderColor;\n }\n\n &--is-disabled &__mark {\n background-color: $formDisabledBackgroundColor;\n }\n\n /* Is expanded */\n\n &--is-expanded &__toggle-icon {\n &::before,\n &::after {\n transform: rotate(0) translate(-50%, -50%);\n }\n }\n\n /* Badge positioning variants */\n\n &--badge-position-button &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-button &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('xsmall')} * -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:not(:empty) + &__text:not(:empty),\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: var(--badge-icon-text-margin);\n }\n\n /* Variant if button only has icon */\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n /* Effect */\n\n &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\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 /* Default */\n\n &--default.has-focus {\n outline: var(--stzh-flyingfocus-color) solid 3px;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen\n} from \"@stencil/core\";\n\nimport {\n StzhButtonFocusEvent,\n StzhButtonBlurEvent,\n StzhButtonChangeEvent,\n StzhButtonSize,\n StzhButtonVariant,\n StzhBadgeType,\n StzhButtonClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n tag: \"stzh-button\",\n styleUrl: \"stzh-button.scss\",\n scoped: true\n})\nexport class StzhButton {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Display a badge aligned to button or icons */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n /** Badge position */\n @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Whether the button is full width */\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /** Whether the button is rounded */\n @Prop({ reflect: true }) rounded: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: StzhButtonSize = \"default\";\n\n /** Size variant (above small breakpoint) */\n @Prop({ reflect: true }) sizeSmall: StzhButtonSize;\n\n /** Size variant (above medium breakpoint) */\n @Prop({ reflect: true }) sizeMedium: StzhButtonSize;\n\n /** Size variant (above large breakpoint) */\n @Prop({ reflect: true }) sizeLarge: StzhButtonSize;\n\n /** Size variant (above ultra breakpoint) */\n @Prop({ reflect: true }) sizeUltra: StzhButtonSize;\n\n /** Text alignment */\n @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n /** Variant style */\n @Prop({ reflect: true }) variant: StzhButtonVariant = \"default\";\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 /** Checked status (if type is radio) */\n @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n /** Default checked (used by reset, if type is radio) */\n @Prop({ mutable: true }) defaultChecked: boolean;\n\n /** The name of the input element (if type is button or radio) */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** The value of the input element (if type is button or radio) */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** `href` if the button should be used as 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 */\n @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\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 /** Label */\n @Prop() label: string = \"\";\n\n /** Effect/Animation used */\n @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n /** Whether only an icon is used inside the button */\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /** Whether padding left should be removed */\n @Prop({ reflect: true }) noPaddingLeft: boolean = false;\n\n /** Whether padding right should be removed */\n @Prop({ reflect: true }) noPaddingRight: boolean = false;\n\n /** Access key of button (usually a number e.g. 1) */\n @Prop() buttonAccesskey: string;\n\n /** ID of button element */\n @Prop() buttonId: string;\n\n /** Whether to show toggle icon (show minus when a11yExpanded=true, otherwise plus) */\n @Prop({ reflect: true }) showToggleIcon: boolean = false;\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 /** Aria current of link/button */\n @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n /** Tabindex of link/button */\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: 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: HTMLStzhButtonElement;\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 /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n /** Blur event */\n @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n /** Change event (only called if type is radio) */\n @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n /** Click event */\n @Event() stzhClick: EventEmitter<StzhButtonClickEvent>;\n\n private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n private input: HTMLInputElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private handleReset = async () => {\n this.checked = this.defaultChecked;\n }\n\n private onInput = (event: InputEvent) => {\n this.checked = this.input.checked;\n this.stzhChange.emit({\n component: \"stzh-button\",\n originalEvent: event,\n value: this.value,\n checked: this.checked\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.button.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-button\",\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-button\",\n originalEvent: event\n });\n }\n\n private onClick = (event: MouseEvent) => {\n if (this.disabled) {\n event.stopPropagation();\n event.preventDefault();\n }\n else {\n this.stzhClick.emit({\n component: \"stzh-button\",\n originalEvent: event,\n href: this.href\n });\n }\n }\n\n private renderIcon(iconUsed: boolean): HTMLInputElement {\n return (\n <div class=\"stzh-button__icon-wrapper\">\n {this.icon &&\n <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n }\n {!this.icon && this.showToggleIcon &&\n <div class=\"stzh-button__toggle-icon-wrapper\">\n <div class=\"stzh-button__toggle-icon\"></div>\n </div>\n }\n {!this.icon && !this.showToggleIcon &&\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div\n class=\"stzh-button__text\"\n ref={(el) => (this.text = el as HTMLDivElement)}\n >\n {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n {this.label ? this.label : <slot></slot>}\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-button__inner\">\n {this.type === \"radio\" &&\n <div class=\"stzh-button__mark\">\n <div class=\"stzh-button__check\"></div>\n </div>\n }\n {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n </div>\n {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n <stzh-badge\n class=\"stzh-button__badge\"\n label={this.badge}\n type={this.badgeType}\n ></stzh-badge>\n }\n </Fragment>\n );\n }\n async componentWillLoad() {\n this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"button\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n const classes = {\n \"stzh-button\": true,\n \"stzh-button--has-icon\": iconUsed,\n \"stzh-button--has-icon-only\": this.iconOnly,\n \"stzh-button--has-badge\": !!this.badge,\n \"stzh-button--is-rounded\": this.rounded,\n \"stzh-button--is-fullwidth\": this.fullwidth,\n \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n \"stzh-button--is-active\": this.active,\n \"stzh-button--is-expanded\": this.a11yExpanded,\n [`stzh-button--effect-${this.effect}`]: !!this.effect,\n [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-button--type-${this.type}`]: !!this.type,\n [`stzh-button--${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.button = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n rel={this.rel}\n download={this.download}\n target={this.target}\n class={classes}\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 id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n this.type === \"radio\" ?\n <label\n ref={(el) => (this.button = el as HTMLLabelElement)}\n class={classes}\n onClick={this.onClick}\n >\n <input\n ref={(el) => (this.input = el as HTMLInputElement)}\n type=\"radio\"\n class=\"stzh-button__input\"\n name={this.name}\n value={this.value}\n defaultChecked={this.defaultChecked}\n checked={this.checked}\n disabled={this.disabled}\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 id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n onClick={this.onClick}\n onInput={this.onInput}\n />\n {this.renderInner(iconUsed)}\n </label>\n :\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n name={this.name}\n value={this.value}\n disabled={this.disabled}\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 id={this.buttonId}\n accessKey={this.buttonAccesskey}\n tabindex={this.a11yTabindex}\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","/**\n * @prop --size: Icon size\n * @prop --color: Icon color\n *\n * @prop --stzh-icon-size: **Global**: Default icon size. [See available icon sizes here](/docs/tokens-icons--docs#sizes).\n * @prop --stzh-icon-color: **Global**: Icon color\n * @prop --stzh-icon-vertical-align: **Global**: Icon vertical alignment\n */\n\n:host {\n --size: #{iconSize()};\n --color: #{$iconColor};\n --vertical-align: #{$iconVerticalAlign};\n\n display: inline-flex;\n justify-content: center;\n align-items: center;\n color: var(--color);\n vertical-align: var(--vertical-align);\n width: var(--size);\n height: var(--size);\n\n @media print {\n -webkit-print-color-adjust: exact;\n print-color-adjust: exact;\n }\n}\n\n.stzh-icon {\n display: none;\n\n &__svg {\n width: var(--size);\n height: var(--size);\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Watch,\n State,\n Element\n} from \"@stencil/core\";\n\nlet iconCounter = 0;\n\n// Shared cache for all instances to store fetched SVG icons\nconst iconCache = new Map<string, Promise<string>>();\n\n@Component({\n tag: \"stzh-icon\",\n styleUrl: \"stzh-icon.scss\",\n shadow: true\n})\nexport class StzhIcon {\n /**\n * Icon which should be displayed\n * See the [icon overview](stzh-components/assets/svgsprites/symbol/sprite.symbol.html) for a list of all available icons.\n */\n @Prop() name: string = \"\";\n\n /**\n * Hidden icon title for screenreader\n * (usually not needed when e.g. inside links or buttons that have text)\n */\n @Prop({ attribute: 'a11y-title' }) a11yTitle: string = \"\";\n\n @Element() element: HTMLStzhIconElement;\n\n @State() svgHtml: string = \"\";\n @State() iconDisplay: string = \"none\";\n\n @Watch(\"name\")\n async nameWatcher(name: string) {\n this.iconDisplay = \"none\";\n\n if (name) {\n if (iconCache.has(name)) {\n this.svgHtml = await iconCache.get(name)!;\n this.updateAccessibilityAttributes();\n this.showIcon();\n } else {\n const fetchSvgPromise = fetch(`${window.stzhComponents.pathMedia}/icons/mono/${this.name}.svg`)\n .then(response => {\n if (response.status === 200) {\n return response.text();\n }\n throw new Error('Failed to fetch icon');\n })\n .then(svgString => {\n const parser = new DOMParser();\n const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');\n const svgElement = svgDoc.documentElement as unknown as SVGElement;\n svgElement.classList.add('stzh-icon__svg');\n\n return svgElement.outerHTML;\n });\n\n iconCache.set(name, fetchSvgPromise);\n\n this.svgHtml = await fetchSvgPromise;\n this.updateAccessibilityAttributes();\n this.showIcon();\n }\n } else {\n this.svgElement = null;\n this.svgHtml = '';\n }\n }\n\n @Watch(\"a11yTitle\")\n a11yTitleWatcher(a11yTitle: string) {\n if (!this.svgElement) return;\n\n this.svgElement.setAttribute(\"aria-hidden\", a11yTitle ? \"false\" : \"true\");\n this.svgElement.setAttribute(\"focusable\", a11yTitle ? \"true\" : \"false\");\n this.svgElement.setAttribute(\"aria-labelledby\", a11yTitle ? `${this.iconId}-title` : null);\n\n let title = this.svgElement.querySelector('title');\n\n if (!title) {\n title = document.createElement('title');\n title.id = `${this.iconId}-title`;\n this.svgElement.appendChild(title);\n }\n\n title.innerHTML = a11yTitle;\n this.svgHtml = this.svgElement.outerHTML;\n }\n\n private svgElement: SVGElement | null;\n private iconId: string;\n\n async componentWillLoad() {\n this.iconId = `stzh-icon-${iconCounter++}`;\n await this.nameWatcher(this.name);\n }\n\n private updateAccessibilityAttributes() {\n this.a11yTitleWatcher(this.a11yTitle);\n }\n\n private showIcon() {\n // for some obscure reason we need to delay showing the icon in safari,\n // otherwise the icon doesn't show up randomly\n // TODO: sometimes the icon still randomely disappears when clicked on page (check on newer safari if problems still occur)\n window.setTimeout(() => {\n this.iconDisplay = \"contents\";\n }, 0);\n }\n\n render() {\n return (\n <Host>\n <div class=\"stzh-icon\" style={{ display: this.iconDisplay }} innerHTML={this.svgHtml}></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}
package/dist/stzh-components/p-f42f6787.entry.js ADDED
@@ -0,0 +1,2 @@
1
+ import{r as t,h as n,a as e,g as s}from"./p-c7bfac7a.js";const i=":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--stzh-app-nav-background-color:var(--stzh-color-coolgrey10);--stzh-app-nav-color:var(--stzh-color-coolgrey90);--stzh-app-nav-color-active:var(--stzh-color-primary70)}.stzh-app-nav{background-color:var(--stzh-app-nav-background-color)}.stzh-app-nav__links{display:flex;flex-direction:row;justify-content:space-between;padding:var(--stzh-space-medium) var(--stzh-space-large) var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-app-nav__links{padding:0;align-items:center}}.stzh-app-nav__link{--text-decoration-line:none;--hover-text-decoration-line:none;--color:var(--stzh-app-nav-color)}@media screen and (min-width: 900px){.stzh-app-nav__link{margin-right:var(--stzh-space-xlarge)}}.stzh-app-nav__link::last-child{margin-right:0}.stzh-app-nav .stzh-link--is-active{text-decoration:none;--color:var(--stzh-app-nav-color-active)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link--is-active{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}}.stzh-app-nav .stzh-link__inner{flex-direction:column}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__inner{flex-direction:row}}.stzh-app-nav .stzh-link__text{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-pico-font-size);line-height:var(--stzh-font-pico-text-line-height)}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__text{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);font-weight:var(--stzh-font-weight-medium)}}.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-top:var(--stzh-space-xxsmall);margin-left:0}@media screen and (min-width: 900px){.stzh-app-nav .stzh-link__icon-wrapper.sc-stzh-link:not(:empty)+.stzh-link__text.sc-stzh-link:not(:empty),.stzh-app-nav .stzh-link__text.sc-stzh-link:not(:empty)+.stzh-link__icon-wrapper.sc-stzh-link:not(:empty){margin-left:var(--stzh-space-xsmall);margin-top:0}}";const a=class{constructor(n){t(this,n);this.localization=undefined;this.items=[]}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"appnav")}}render(){const t={"stzh-app-nav":true};return n(e,null,n("nav",{role:"navigation",class:t,"aria-label":this.localization.title},n("div",{class:"stzh-app-nav__links",role:"list"},this.items.map((t=>n("stzh-link",{class:"stzh-app-nav__link",active:t.active,role:"listitem","a11y-current":t.a11yCurrent,href:t.href,badge:t.badge,badgeType:t.badgeType,icon:t.icon},t.text))))))}get element(){return s(this)}};a.style=i;export{a as stzh_app_nav};
2
+ //# sourceMappingURL=p-f42f6787.entry.js.map
package/dist/stzh-components/p-f42f6787.entry.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"names":["stzhAppNavCss","StzhAppNav","componentWillLoad","this","localization","window","stzhComponents","utils","fetchTranslations","element","render","classes","h","Host","role","class","title","items","map","item","active","a11yCurrent","href","badge","badgeType","icon","text"],"sources":["src/components/stzh-app-nav/stzh-app-nav.scss?tag=stzh-app-nav&encapsulation=shadow","src/components/stzh-app-nav/stzh-app-nav.tsx"],"sourcesContent":["/**\n * @prop --stzh-app-nav-background-color: Background color of app nav links.\n * @prop --stzh-app-nav-color: Text and icon color of app nav links.\n * @prop --stzh-app-nav-color-active: Text and icon color of active app nav links.\n */\n\n:host {\n --stzh-app-nav-background-color: var(--stzh-color-coolgrey10);\n --stzh-app-nav-color: var(--stzh-color-coolgrey90);\n --stzh-app-nav-color-active: var(--stzh-color-primary70);\n}\n\n.stzh-app-nav {\n background-color: var(--stzh-app-nav-background-color);\n\n &__links {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n padding: space('medium') space('large') space('xlarge');\n\n @include mq($from: medium) {\n padding: 0;\n align-items: center;\n }\n }\n\n &__link {\n --text-decoration-line: none;\n --hover-text-decoration-line: none;\n --color: var(--stzh-app-nav-color);\n\n @include mq($from: medium) {\n margin-right: space('xlarge');\n }\n\n &::last-child {\n margin-right: 0;\n }\n }\n\n .stzh-link--is-active {\n text-decoration: none;\n --color: var(--stzh-app-nav-color-active);\n\n @include mq($from: medium) {\n @include font('heavy');\n }\n }\n\n .stzh-link__inner {\n flex-direction: column;\n\n @include mq($from: medium) {\n flex-direction: row;\n }\n }\n\n .stzh-link__text {\n @include font('medium');\n @include fontSize('pico');\n\n @include mq($from: medium) {\n @include fontSize('milli');\n font-weight: var(--stzh-font-weight-medium);\n }\n }\n\n .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) + .stzh-link__text.sc-stzh-link:not(:empty), .stzh-link__text.sc-stzh-link:not(:empty) + .stzh-link__icon-wrapper.sc-stzh-link:not(:empty) {\n margin-top: space('xxsmall');\n margin-left: 0;\n\n @include mq($from: medium) {\n margin-left: space('xsmall');\n margin-top: 0;\n }\n }\n}\n","import { Component, Prop, h, Host, Element } from \"@stencil/core\";\n\nimport { StzhAppNavLocalizedText } from \"./stzh-app-nav.localization\";\n\nimport { StzhAppNavItem } from \"../../index\";\n\n@Component({\n tag: \"stzh-app-nav\",\n styleUrl: \"stzh-app-nav.scss\",\n shadow: true,\n})\n\nexport class StzhAppNav {\n /** Translation strings */\n @Prop() localization: StzhAppNavLocalizedText;\n\n /** App-nav items */\n @Prop() items: StzhAppNavItem[] = [];\n\n @Element() element: HTMLStzhAppNavElement;\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n }\n }\n\n render() {\n const classes = {\n \"stzh-app-nav\": true,\n };\n\n return (\n <Host>\n <nav role=\"navigation\" class={classes} aria-label={this.localization.title}>\n <div class=\"stzh-app-nav__links\" role=\"list\">\n {this.items.map((item) => (\n <stzh-link\n class=\"stzh-app-nav__link\"\n active={item.active}\n role=\"listitem\"\n a11y-current={item.a11yCurrent}\n href={item.href}\n badge={item.badge}\n badgeType={item.badgeType}\n icon={item.icon}\n >{item.text}\n </stzh-link>\n ))}\n </div>\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAgB,gtG,MCYTC,EAAU,M,gEAKa,E,CAIlC,uBAAMC,GACJ,IAAKC,KAAKC,aAAc,CACtBD,KAAKC,mBAAqBC,OAAOC,eAAeC,MAAMC,kBAAkBL,KAAKM,QAAS,S,EAI1F,MAAAC,GACE,MAAMC,EAAU,CACd,eAAgB,MAGlB,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,KAAK,aAAaC,MAAOJ,EAAO,aAAcR,KAAKC,aAAaY,OACnEJ,EAAA,OAAKG,MAAM,sBAAsBD,KAAK,QACrCX,KAAKc,MAAMC,KAAKC,GACfP,EAAA,aACEG,MAAM,qBACNK,OAAQD,EAAKC,OACbN,KAAK,WAAU,eACDK,EAAKE,YACnBC,KAAMH,EAAKG,KACXC,MAAOJ,EAAKI,MACZC,UAAWL,EAAKK,UAChBC,KAAMN,EAAKM,MACTN,EAAKO,U"}