@oiz/stzh-components 2.12.0-beta2 → 2.13.0-beta1

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 (233) hide show
  1. package/dist/cjs/{app-globals-b9d20033.js → app-globals-6831ae97.js} +2 -2
  2. package/dist/cjs/{app-globals-b9d20033.js.map → app-globals-6831ae97.js.map} +1 -1
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/stzh-actionset_4.cjs.entry.js +4 -2
  5. package/dist/cjs/stzh-actionset_4.cjs.entry.js.map +1 -1
  6. package/dist/cjs/stzh-badge_3.cjs.entry.js +2 -1
  7. package/dist/cjs/stzh-badge_3.cjs.entry.js.map +1 -1
  8. package/dist/cjs/stzh-chip_2.cjs.entry.js +2 -1
  9. package/dist/cjs/stzh-chip_2.cjs.entry.js.map +1 -1
  10. package/dist/cjs/stzh-components.cjs.js +2 -2
  11. package/dist/cjs/stzh-datalist_2.cjs.entry.js +1 -1
  12. package/dist/cjs/stzh-datalist_2.cjs.entry.js.map +1 -1
  13. package/dist/cjs/stzh-dropdown.cjs.entry.js +37 -4
  14. package/dist/cjs/stzh-dropdown.cjs.entry.js.map +1 -1
  15. package/dist/cjs/stzh-input.cjs.entry.js +2 -2
  16. package/dist/cjs/stzh-input.cjs.entry.js.map +1 -1
  17. package/dist/cjs/stzh-link.cjs.entry.js +2 -1
  18. package/dist/cjs/stzh-link.cjs.entry.js.map +1 -1
  19. package/dist/cjs/stzh-menu_2.cjs.entry.js +2 -1
  20. package/dist/cjs/stzh-menu_2.cjs.entry.js.map +1 -1
  21. package/dist/cjs/stzh-progressbar-item.cjs.entry.js +2 -1
  22. package/dist/cjs/stzh-progressbar-item.cjs.entry.js.map +1 -1
  23. package/dist/cjs/stzh-skiplink.cjs.entry.js +2 -1
  24. package/dist/cjs/stzh-skiplink.cjs.entry.js.map +1 -1
  25. package/dist/cjs/stzh-upload.cjs.entry.js +16 -2
  26. package/dist/cjs/stzh-upload.cjs.entry.js.map +1 -1
  27. package/dist/collection/components/stzh-actionset/stzh-actionset.js.map +1 -1
  28. package/dist/collection/components/stzh-button/stzh-button.js +2 -1
  29. package/dist/collection/components/stzh-button/stzh-button.js.map +1 -1
  30. package/dist/collection/components/stzh-card/stzh-card.css +3 -3
  31. package/dist/collection/components/stzh-card/stzh-card.js +3 -1
  32. package/dist/collection/components/stzh-card/stzh-card.js.map +1 -1
  33. package/dist/collection/components/stzh-chip/stzh-chip.js +2 -1
  34. package/dist/collection/components/stzh-chip/stzh-chip.js.map +1 -1
  35. package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css +1 -0
  36. package/dist/collection/components/stzh-dropdown/stzh-dropdown.js +53 -1
  37. package/dist/collection/components/stzh-dropdown/stzh-dropdown.js.map +1 -1
  38. package/dist/collection/components/stzh-input/stzh-input.css +6 -0
  39. package/dist/collection/components/stzh-input/stzh-input.js +4 -4
  40. package/dist/collection/components/stzh-input/stzh-input.js.map +1 -1
  41. package/dist/collection/components/stzh-link/stzh-link.js +2 -1
  42. package/dist/collection/components/stzh-link/stzh-link.js.map +1 -1
  43. package/dist/collection/components/stzh-menu-item/stzh-menu-item.js +2 -1
  44. package/dist/collection/components/stzh-menu-item/stzh-menu-item.js.map +1 -1
  45. package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.js +2 -1
  46. package/dist/collection/components/stzh-progressbar-item/stzh-progressbar-item.js.map +1 -1
  47. package/dist/collection/components/stzh-skiplink/stzh-skiplink.js +2 -1
  48. package/dist/collection/components/stzh-skiplink/stzh-skiplink.js.map +1 -1
  49. package/dist/collection/components/stzh-upload/stzh-upload.css +1 -1
  50. package/dist/collection/components/stzh-upload/stzh-upload.js +15 -3
  51. package/dist/collection/components/stzh-upload/stzh-upload.js.map +1 -1
  52. package/dist/collection/libraries/dropzone/dropzone-amd-module.js +7 -1
  53. package/dist/collection/libraries/dropzone/dropzone.js +7 -1
  54. package/dist/collection/libraries/dropzone/min/dropzone-amd-module.min.js +1 -1
  55. package/dist/collection/libraries/dropzone/min/dropzone.min.js +1 -1
  56. package/dist/collection/libraries/tom-select/cjs/tom-select.complete.js +8 -4
  57. package/dist/collection/libraries/tom-select/cjs/tom-select.js +8 -4
  58. package/dist/collection/libraries/tom-select/cjs/tom-select.popular.js +8 -4
  59. package/dist/collection/libraries/tom-select/esm/tom-select.complete.js +8 -4
  60. package/dist/collection/libraries/tom-select/esm/tom-select.js +8 -4
  61. package/dist/collection/libraries/tom-select/esm/tom-select.popular.js +8 -4
  62. package/dist/collection/libraries/tom-select/js/tom-select.base.js +8 -4
  63. package/dist/collection/libraries/tom-select/js/tom-select.base.min.js +34 -34
  64. package/dist/collection/libraries/tom-select/js/tom-select.complete.js +8 -4
  65. package/dist/collection/libraries/tom-select/js/tom-select.complete.min.js +19 -19
  66. package/dist/collection/libraries/tom-select/js/tom-select.popular.js +8 -4
  67. package/dist/collection/libraries/tom-select/js/tom-select.popular.min.js +31 -31
  68. package/dist/components/index.js +1 -1
  69. package/dist/components/stzh-actionset2.js.map +1 -1
  70. package/dist/components/stzh-button2.js +2 -1
  71. package/dist/components/stzh-button2.js.map +1 -1
  72. package/dist/components/stzh-card2.js +4 -2
  73. package/dist/components/stzh-card2.js.map +1 -1
  74. package/dist/components/stzh-chip2.js +2 -1
  75. package/dist/components/stzh-chip2.js.map +1 -1
  76. package/dist/components/stzh-datalist-item2.js +1 -1
  77. package/dist/components/stzh-datalist-item2.js.map +1 -1
  78. package/dist/components/stzh-dropdown2.js +39 -5
  79. package/dist/components/stzh-dropdown2.js.map +1 -1
  80. package/dist/components/stzh-input2.js +3 -3
  81. package/dist/components/stzh-input2.js.map +1 -1
  82. package/dist/components/stzh-link2.js +2 -1
  83. package/dist/components/stzh-link2.js.map +1 -1
  84. package/dist/components/stzh-menu-item2.js +2 -1
  85. package/dist/components/stzh-menu-item2.js.map +1 -1
  86. package/dist/components/stzh-progressbar-item2.js +2 -1
  87. package/dist/components/stzh-progressbar-item2.js.map +1 -1
  88. package/dist/components/stzh-skiplink.js +2 -1
  89. package/dist/components/stzh-skiplink.js.map +1 -1
  90. package/dist/components/stzh-upload.js +18 -2
  91. package/dist/components/stzh-upload.js.map +1 -1
  92. package/dist/esm/{app-globals-0cf2577d.js → app-globals-c1cfb228.js} +2 -2
  93. package/dist/esm/{app-globals-0cf2577d.js.map → app-globals-c1cfb228.js.map} +1 -1
  94. package/dist/esm/loader.js +2 -2
  95. package/dist/esm/stzh-actionset_4.entry.js +4 -2
  96. package/dist/esm/stzh-actionset_4.entry.js.map +1 -1
  97. package/dist/esm/stzh-badge_3.entry.js +2 -1
  98. package/dist/esm/stzh-badge_3.entry.js.map +1 -1
  99. package/dist/esm/stzh-chip_2.entry.js +2 -1
  100. package/dist/esm/stzh-chip_2.entry.js.map +1 -1
  101. package/dist/esm/stzh-components.js +2 -2
  102. package/dist/esm/stzh-datalist_2.entry.js +1 -1
  103. package/dist/esm/stzh-datalist_2.entry.js.map +1 -1
  104. package/dist/esm/stzh-dropdown.entry.js +37 -4
  105. package/dist/esm/stzh-dropdown.entry.js.map +1 -1
  106. package/dist/esm/stzh-input.entry.js +2 -2
  107. package/dist/esm/stzh-input.entry.js.map +1 -1
  108. package/dist/esm/stzh-link.entry.js +2 -1
  109. package/dist/esm/stzh-link.entry.js.map +1 -1
  110. package/dist/esm/stzh-menu_2.entry.js +2 -1
  111. package/dist/esm/stzh-menu_2.entry.js.map +1 -1
  112. package/dist/esm/stzh-progressbar-item.entry.js +2 -1
  113. package/dist/esm/stzh-progressbar-item.entry.js.map +1 -1
  114. package/dist/esm/stzh-skiplink.entry.js +2 -1
  115. package/dist/esm/stzh-skiplink.entry.js.map +1 -1
  116. package/dist/esm/stzh-upload.entry.js +16 -2
  117. package/dist/esm/stzh-upload.entry.js.map +1 -1
  118. package/dist/esm-es5/{app-globals-0cf2577d.js → app-globals-c1cfb228.js} +2 -2
  119. package/dist/esm-es5/loader.js +1 -1
  120. package/dist/esm-es5/loader.js.map +1 -1
  121. package/dist/esm-es5/stzh-actionset_4.entry.js +1 -1
  122. package/dist/esm-es5/stzh-actionset_4.entry.js.map +1 -1
  123. package/dist/esm-es5/stzh-badge_3.entry.js +1 -1
  124. package/dist/esm-es5/stzh-badge_3.entry.js.map +1 -1
  125. package/dist/esm-es5/stzh-chip_2.entry.js +1 -1
  126. package/dist/esm-es5/stzh-chip_2.entry.js.map +1 -1
  127. package/dist/esm-es5/stzh-components.js +1 -1
  128. package/dist/esm-es5/stzh-components.js.map +1 -1
  129. package/dist/esm-es5/stzh-datalist_2.entry.js +1 -1
  130. package/dist/esm-es5/stzh-datalist_2.entry.js.map +1 -1
  131. package/dist/esm-es5/stzh-dropdown.entry.js +3 -3
  132. package/dist/esm-es5/stzh-dropdown.entry.js.map +1 -1
  133. package/dist/esm-es5/stzh-input.entry.js +1 -1
  134. package/dist/esm-es5/stzh-input.entry.js.map +1 -1
  135. package/dist/esm-es5/stzh-link.entry.js +1 -1
  136. package/dist/esm-es5/stzh-link.entry.js.map +1 -1
  137. package/dist/esm-es5/stzh-menu_2.entry.js +1 -1
  138. package/dist/esm-es5/stzh-menu_2.entry.js.map +1 -1
  139. package/dist/esm-es5/stzh-progressbar-item.entry.js +1 -1
  140. package/dist/esm-es5/stzh-progressbar-item.entry.js.map +1 -1
  141. package/dist/esm-es5/stzh-skiplink.entry.js +1 -1
  142. package/dist/esm-es5/stzh-skiplink.entry.js.map +1 -1
  143. package/dist/esm-es5/stzh-upload.entry.js +1 -1
  144. package/dist/esm-es5/stzh-upload.entry.js.map +1 -1
  145. package/dist/stzh-components/{p-7873a639.entry.js → p-01e9b3b5.entry.js} +2 -2
  146. package/dist/stzh-components/p-01e9b3b5.entry.js.map +1 -0
  147. package/dist/stzh-components/{p-0db27707.entry.js → p-03fc4d3d.entry.js} +2 -2
  148. package/dist/stzh-components/p-03fc4d3d.entry.js.map +1 -0
  149. package/dist/stzh-components/{p-3ab3a5a7.system.entry.js → p-1a420f1c.system.entry.js} +2 -2
  150. package/dist/stzh-components/p-1a420f1c.system.entry.js.map +1 -0
  151. package/dist/stzh-components/{p-aa9975e6.entry.js → p-24d82258.entry.js} +2 -2
  152. package/dist/stzh-components/p-24d82258.entry.js.map +1 -0
  153. package/dist/stzh-components/p-2653562a.entry.js +9 -0
  154. package/dist/stzh-components/p-2653562a.entry.js.map +1 -0
  155. package/dist/stzh-components/{p-42e25ae1.system.entry.js → p-3048d3ea.system.entry.js} +2 -2
  156. package/dist/stzh-components/p-3048d3ea.system.entry.js.map +1 -0
  157. package/dist/stzh-components/p-376b64c8.system.entry.js +9 -0
  158. package/dist/stzh-components/p-376b64c8.system.entry.js.map +1 -0
  159. package/dist/stzh-components/{p-6233fc4f.system.js → p-50faf5a6.system.js} +2 -2
  160. package/dist/stzh-components/{p-9d0fedfe.system.entry.js → p-710d15c1.system.entry.js} +2 -2
  161. package/dist/stzh-components/p-710d15c1.system.entry.js.map +1 -0
  162. package/dist/stzh-components/p-8438088e.system.js +2 -0
  163. package/dist/stzh-components/{p-ae0e530e.system.js.map → p-8438088e.system.js.map} +1 -1
  164. package/dist/stzh-components/{p-b2b9d87e.js → p-8e02ecc8.js} +2 -2
  165. package/dist/stzh-components/{p-68feffea.entry.js → p-919e700b.entry.js} +2 -2
  166. package/dist/stzh-components/p-919e700b.entry.js.map +1 -0
  167. package/dist/stzh-components/p-990141f4.entry.js +2 -0
  168. package/dist/stzh-components/p-990141f4.entry.js.map +1 -0
  169. package/dist/stzh-components/{p-d5ee8b1a.entry.js → p-a0d3ec11.entry.js} +2 -2
  170. package/dist/stzh-components/p-a0d3ec11.entry.js.map +1 -0
  171. package/dist/stzh-components/{p-188dd49d.system.entry.js → p-aa0660d8.system.entry.js} +2 -2
  172. package/dist/stzh-components/p-aa0660d8.system.entry.js.map +1 -0
  173. package/dist/stzh-components/p-c1f89d5c.system.entry.js +2 -0
  174. package/dist/stzh-components/p-c1f89d5c.system.entry.js.map +1 -0
  175. package/dist/stzh-components/{p-f73af272.entry.js → p-c70b4f1b.entry.js} +2 -2
  176. package/dist/stzh-components/p-c70b4f1b.entry.js.map +1 -0
  177. package/dist/stzh-components/{p-af33b013.entry.js → p-c90cf7f4.entry.js} +2 -2
  178. package/dist/stzh-components/p-c90cf7f4.entry.js.map +1 -0
  179. package/dist/stzh-components/{p-54a1fdcc.system.entry.js → p-cf18eff2.system.entry.js} +2 -2
  180. package/dist/stzh-components/p-cf18eff2.system.entry.js.map +1 -0
  181. package/dist/stzh-components/{p-135d2e40.system.entry.js → p-d80b87dd.system.entry.js} +2 -2
  182. package/dist/stzh-components/p-d80b87dd.system.entry.js.map +1 -0
  183. package/dist/stzh-components/{p-b3d76f2a.system.entry.js → p-df045b3b.system.entry.js} +2 -2
  184. package/dist/stzh-components/p-df045b3b.system.entry.js.map +1 -0
  185. package/dist/stzh-components/{p-7c2aa5e8.entry.js → p-dfa8f780.entry.js} +2 -2
  186. package/dist/stzh-components/p-dfa8f780.entry.js.map +1 -0
  187. package/dist/stzh-components/{p-2d88c544.system.entry.js → p-e6444356.system.entry.js} +2 -2
  188. package/dist/stzh-components/p-e6444356.system.entry.js.map +1 -0
  189. package/dist/stzh-components/{p-509f90d0.system.entry.js → p-ee4f0a17.system.entry.js} +2 -2
  190. package/dist/stzh-components/p-ee4f0a17.system.entry.js.map +1 -0
  191. package/dist/stzh-components/{p-0164f9d1.entry.js → p-f63cc727.entry.js} +2 -2
  192. package/dist/stzh-components/p-f63cc727.entry.js.map +1 -0
  193. package/dist/stzh-components/stzh-components.esm.js +1 -1
  194. package/dist/stzh-components/stzh-components.esm.js.map +1 -1
  195. package/dist/stzh-components/stzh-components.js +1 -1
  196. package/dist/types/components/stzh-dropdown/stzh-dropdown.d.ts +4 -0
  197. package/dist/types/components/stzh-input/stzh-input.d.ts +1 -1
  198. package/dist/types/components/stzh-upload/stzh-upload.d.ts +7 -1
  199. package/dist/types/components.d.ts +18 -6
  200. package/dist/types/libraries/tom-select/types/defaults.d.ts +2 -0
  201. package/dist/types/libraries/tom-select/types/types/settings.d.ts +2 -0
  202. package/dist/vscode-data.json +7537 -0
  203. package/package.json +1 -1
  204. package/dist/stzh-components/p-0164f9d1.entry.js.map +0 -1
  205. package/dist/stzh-components/p-0db27707.entry.js.map +0 -1
  206. package/dist/stzh-components/p-135d2e40.system.entry.js.map +0 -1
  207. package/dist/stzh-components/p-188dd49d.system.entry.js.map +0 -1
  208. package/dist/stzh-components/p-2d88c544.system.entry.js.map +0 -1
  209. package/dist/stzh-components/p-3ab3a5a7.system.entry.js.map +0 -1
  210. package/dist/stzh-components/p-42e25ae1.system.entry.js.map +0 -1
  211. package/dist/stzh-components/p-4ad49ece.entry.js +0 -2
  212. package/dist/stzh-components/p-4ad49ece.entry.js.map +0 -1
  213. package/dist/stzh-components/p-509f90d0.system.entry.js.map +0 -1
  214. package/dist/stzh-components/p-54a1fdcc.system.entry.js.map +0 -1
  215. package/dist/stzh-components/p-68feffea.entry.js.map +0 -1
  216. package/dist/stzh-components/p-7873a639.entry.js.map +0 -1
  217. package/dist/stzh-components/p-7c2aa5e8.entry.js.map +0 -1
  218. package/dist/stzh-components/p-97704eb0.system.entry.js +0 -9
  219. package/dist/stzh-components/p-97704eb0.system.entry.js.map +0 -1
  220. package/dist/stzh-components/p-9d0fedfe.system.entry.js.map +0 -1
  221. package/dist/stzh-components/p-a0b350c2.system.entry.js +0 -2
  222. package/dist/stzh-components/p-a0b350c2.system.entry.js.map +0 -1
  223. package/dist/stzh-components/p-aa9975e6.entry.js.map +0 -1
  224. package/dist/stzh-components/p-ae0e530e.system.js +0 -2
  225. package/dist/stzh-components/p-af33b013.entry.js.map +0 -1
  226. package/dist/stzh-components/p-b3d76f2a.system.entry.js.map +0 -1
  227. package/dist/stzh-components/p-d5ee8b1a.entry.js.map +0 -1
  228. package/dist/stzh-components/p-f73af272.entry.js.map +0 -1
  229. package/dist/stzh-components/p-f91187c8.entry.js +0 -9
  230. package/dist/stzh-components/p-f91187c8.entry.js.map +0 -1
  231. /package/dist/esm-es5/{app-globals-0cf2577d.js.map → app-globals-c1cfb228.js.map} +0 -0
  232. /package/dist/stzh-components/{p-6233fc4f.system.js.map → p-50faf5a6.system.js.map} +0 -0
  233. /package/dist/stzh-components/{p-b2b9d87e.js.map → p-8e02ecc8.js.map} +0 -0
package/dist/esm/stzh-input.entry.js CHANGED
@@ -3,7 +3,7 @@ import { h as hasSlot } from './utils-8bb4c3c6.js';
3
3
  import { S as StzhInputDescription } from './stzh-input-description-100efe38.js';
4
4
  import './string-utils-e252977e.js';
5
5
 
6
- const stzhInputCss = ".sc-stzh-input-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--input-width:100%;--padding:var(--stzh-space-xsmall) var(--stzh-space-medium);width:100%}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0;right:0}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][variant=input],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-button[variant=input],.stzh-input__button-right[variant=input].sc-stzh-input{--border-color:transparent;--hover-border-color:transparent}.stzh-input.sc-stzh-input{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-input__marker-text.sc-stzh-input{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-input__description-wrapper.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-input__description-long.sc-stzh-input{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-popover[open].sc-stzh-input:not([open=false]) .stzh-input__description-long-button.sc-stzh-input{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input__description-long-button.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-input__description-long-button.sc-stzh-input:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxsmall)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:-ms-flexbox;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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);border:0.0625rem solid var(--stzh-color-grey61);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-form-input-border-radius);padding:var(--padding);margin:0;width:100%;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background:var(--stzh-color-white);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:hover,.stzh-input__input.sc-stzh-input:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__input.sc-stzh-input::-ms-clear{display:none}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-height);resize:vertical}.stzh-input__label.sc-stzh-input{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-color-grey61);width:auto;position:absolute;top:calc(var(--stzh-form-input-height) / 2);left:calc(var(--stzh-space-medium) + 0.0625rem);max-width:calc(100% - var(--stzh-space-medium) * 2);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__label.sc-stzh-input::before{content:\"\";display:none;background:var(--stzh-color-white);position:absolute;width:100%;z-index:-1;left:0;top:50%;margin-top:-0.5px;height:0.125rem}.stzh-input__input.sc-stzh-input:hover+.stzh-input__label.sc-stzh-input,.stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__button-right.sc-stzh-input{display:none}.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:transparent}.stzh-input--is-clearable.stzh-input--is-filled.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.sc-stzh-input .stzh-input__button-right.sc-stzh-input{display:block}.stzh-input--type-search.sc-stzh-input:not(.stzh-input--is-filled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--is-filled.sc-stzh-input .stzh-input__button-right.is-search.sc-stzh-input{pointer-events:initial}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{display:block;top:0;left:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));height:1.25rem;line-height:1.25rem;padding:0 var(--stzh-space-xxsmall);max-width:calc(100% - var(--stzh-space-small) * 2);pointer-events:all}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before{display:block}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-form-input-height))}.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-height))}.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xxsmall) - var(--stzh-form-input-height))}.stzh-input--size-small.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__label.sc-stzh-input{top:calc(var(--stzh-form-input-small-height) / 2)}.stzh-input--size-small.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{top:0}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xxsmall) + var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xsmall) - var(--stzh-form-input-small-height))}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{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-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input{border-color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input{color:var(--stzh-color-grey61);border-color:transparent;background-color:var(--stzh-color-black8);cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:focus,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:focus{border-color:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input::before{background:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input],.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-grey61)}";
6
+ const stzhInputCss = ".sc-stzh-input-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--input-width:100%;--padding:var(--stzh-space-xsmall) var(--stzh-space-medium);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0;right:0}.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][variant=input],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-button[variant=input],.stzh-input__button-right[variant=input].sc-stzh-input{--border-color:transparent;--hover-border-color:transparent}.stzh-input.sc-stzh-input{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-input__marker-text.sc-stzh-input{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-input__description-wrapper.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-input__description-long.sc-stzh-input{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-popover[open].sc-stzh-input:not([open=false]) .stzh-input__description-long-button.sc-stzh-input{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input__description-long-button.sc-stzh-input{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-input__description-long-button.sc-stzh-input:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxsmall)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:-ms-flexbox;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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);border:0.0625rem solid var(--stzh-color-grey61);-webkit-transition-property:color, border-color;transition-property:color, border-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--stzh-form-input-border-radius);padding:var(--padding);margin:0;width:100%;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));background:var(--stzh-color-white);-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input__input.sc-stzh-input:hover,.stzh-input__input.sc-stzh-input:focus{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__input.sc-stzh-input::-ms-clear{display:none}.stzh-input__input.sc-stzh-input:-webkit-autofill{-webkit-background-clip:text;background-clip:text}.stzh-input__input.sc-stzh-input:-moz-placeholder-shown{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{text-overflow:ellipsis}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-height);resize:vertical}.stzh-input__label.sc-stzh-input{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--stzh-color-grey61);width:auto;position:absolute;top:calc(var(--stzh-form-input-height) / 2);left:calc(var(--stzh-space-medium) + 0.0625rem);max-width:calc(100% - var(--stzh-space-medium) * 2);-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:all var(--stzh-base-transition-animation-speed);transition:all var(--stzh-base-transition-animation-speed);pointer-events:none}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__label.sc-stzh-input::before{content:\"\";display:none;background:var(--stzh-color-white);position:absolute;width:100%;z-index:-1;left:0;top:50%;margin-top:-0.5px;height:0.125rem}.stzh-input__input.sc-stzh-input:hover+.stzh-input__label.sc-stzh-input,.stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-input__button-right.sc-stzh-input{display:none}.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--background-color:transparent;--border-color:transparent;--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-background-color:transparent;--hover-border-color:transparent}.stzh-input--is-clearable.stzh-input--is-filled.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.sc-stzh-input .stzh-input__button-right.sc-stzh-input{display:block}.stzh-input--type-search.sc-stzh-input:not(.stzh-input--is-filled) .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--is-filled.sc-stzh-input .stzh-input__button-right.is-search.sc-stzh-input{pointer-events:initial}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{display:block;top:0;left:calc(var(--stzh-space-medium) - var(--stzh-space-xxsmall));height:1.25rem;line-height:1.25rem;padding:0 var(--stzh-space-xxsmall);max-width:calc(100% - var(--stzh-space-small) * 2);pointer-events:all}.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input:not(:empty)::before{display:block}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xsmall) + var(--stzh-form-input-height))}.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-height))}.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xxsmall) - var(--stzh-form-input-height))}.stzh-input--size-small.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--input.sc-stzh-input{height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input--textarea.sc-stzh-input{min-height:var(--stzh-form-input-small-height)}.stzh-input--size-small.sc-stzh-input .stzh-input__label.sc-stzh-input{top:calc(var(--stzh-form-input-small-height) / 2)}.stzh-input--size-small.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{top:0}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:calc(var(--stzh-space-xxsmall) + var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - (var(--stzh-space-medium) + 0.0625rem) * 2 - var(--stzh-form-input-small-height))}.stzh-input--size-small.stzh-input--has-button-right.stzh-input.sc-stzh-input:not(.stzh-input--is-readonly):not(.stzh-input--is-disabled) .stzh-input__input.sc-stzh-input:focus+.stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--has-fixed-label.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-filled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--size-small.stzh-input--has-button-right.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input{max-width:calc(100% - var(--stzh-space-medium) - var(--stzh-space-xxsmall) - 0.0625rem + var(--stzh-space-xsmall) - var(--stzh-form-input-small-height))}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{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-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input{border-color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-error)}.stzh-input--is-invalid.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-error)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input+.stzh-input__label.sc-stzh-input{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input{color:var(--stzh-color-grey61);border-color:transparent;background-color:var(--stzh-color-black8);cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--stzh-color-grey61)}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input:focus,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:hover,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input:focus{border-color:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input::before,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input::before{background:transparent}.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input],.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false])[variant=input]{--color:var(--stzh-color-grey61);--hover-color:var(--stzh-color-grey61)}";
7
7
 
8
8
  let inputCounter = 0;
9
9
  const StzhInput = class {
@@ -138,7 +138,7 @@ const StzhInput = class {
138
138
  }
139
139
  typeWatcher(newValue) {
140
140
  const types = [
141
- "text", "search", "password", "email", "url", "tel", "number"
141
+ "text", "search", "password", "email", "url", "tel", "number", "hidden"
142
142
  ];
143
143
  if (!this.multiline && !types.includes(newValue)) {
144
144
  throw new Error(`Type ${newValue} not supported`);
package/dist/esm/stzh-input.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"stzh-input.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding: Padding of field\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n:host {\n --text-align: left;\n --input-width: 100%;\n --padding: #{space('xsmall')} #{space('medium')};\n\n width: 100%;\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0;\n right: 0;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"][variant=\"input\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-button[variant=\"input\"],\n.stzh-input__button-right[variant=\"input\"] {\n --border-color: transparent;\n --hover-border-color: transparent;\n}\n\n.stzh-input {\n\t@include input-description;\n\t@include fontSize('milli');\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 1px solid $formBorderColor;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: $formInputBorderRadius;\n padding: var(--padding);\n margin: 0;\n width: 100%;\n color: $colorPrimary;\n background: $colorWhite;\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: $formInputPlaceholderColor;\n }\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n }\n\n // remove clear button for IE11\n &::-ms-clear {\n display: none;\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n /* Normal inputs */\n\n &--input {\n height: $formInputHeight;\n }\n\n /* Textarea */\n\n &--textarea {\n min-height: $formInputHeight;\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('nano');\n @include truncate;\n color: $formColor;\n width: auto;\n position: absolute;\n top: calc(#{$formInputHeight} / 2);\n // padding-left (medium) + border-left\n left: calc(#{space('medium')} + 1px);\n max-width: calc(100% - #{space('medium')} * 2);\n transform: translateY(-50%);\n transition: all $baseTransitionAnimationSpeed;\n pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n &::before {\n content: '';\n display: none;\n background: $colorWhite;\n position: absolute;\n width: 100%;\n z-index: -1;\n left: 0;\n top: 50%;\n // prevent white line not fully overlaping border of input\n margin-top: -0.5px;\n height: 2px;\n }\n }\n\n &__input:hover + &__label,\n &__input:focus + &__label {\n color: $colorPrimaryHover;\n }\n\n &__button-right {\n display: none;\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n }\n }\n\n /* Clearable / Search input */\n\n &--is-clearable#{&}--is-filled:not(#{&}--is-readonly):not(#{&}--is-disabled) &__button-right,\n &--type-search &__button-right {\n display: block;\n }\n\n &--type-search:not(#{&}--is-filled) &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n /* Filled variant */\n\n &--is-filled &__button-right {\n &.is-search {\n pointer-events: initial;\n }\n }\n\n /* Styles for floating label */\n\n &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--has-fixed-label &__label,\n &--is-filled &__label,\n &--is-readonly &__label,\n &--is-disabled &__label,\n &--is-invalid &__label {\n display: block;\n top: 0;\n // padding-left (input field medium) - padding-left\n left: calc(#{space('medium')} - #{space('xxsmall')});\n height: 20px; // dividable by two (so before element is always positioned correctly)\n line-height: 20px;\n padding: 0 space('xxsmall');\n max-width: calc(100% - #{space('small')} * 2);\n pointer-events: all;\n\n &:not(:empty)::before {\n display: block;\n }\n }\n\n /* Button Right Variant */\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: calc(#{space('xsmall')} + #{$formInputHeight});\n }\n\n &--has-button-right &__label {\n // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n }\n\n &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--has-button-right#{&}--has-fixed-label &__label,\n &--has-button-right#{&}--is-filled &__label,\n &--has-button-right#{&}--is-readonly &__label,\n &--has-button-right#{&}--is-disabled &__label,\n &--has-button-right#{&}--is-invalid &__label {\n // 100% - left distance to text + 1px border + padding label right side - icon button width\n max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n }\n\n /* Size variants */\n\n &--size-small {\n @include fontSize('micro');\n }\n\n &--size-small &__input {\n @include fontSize('micro');\n\n &--input {\n height: $formInputHeightSmall;\n }\n\n &--textarea {\n min-height: $formInputHeightSmall;\n }\n }\n\n &--size-small &__label {\n top: calc(#{$formInputHeightSmall} / 2);\n }\n\n &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--size-small#{&}--has-fixed-label &__label,\n &--size-small#{&}--is-filled &__label,\n &--size-small#{&}--is-readonly &__label,\n &--size-small#{&}--is-disabled &__label,\n &--size-small#{&}--is-invalid &__label {\n top: 0;\n }\n\n &--size-small#{&}--has-button-right &__input {\n padding-right: calc(#{space('xxsmall')} + #{$formInputHeightSmall});\n }\n\n &--size-small#{&}--has-button-right &__label {\n max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n }\n\n &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n }\n\n /* Spin button */\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=number] {\n appearance: textfield;\n }\n }\n\n /* Hidden label */\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n /* Invalid */\n\n &--is-invalid &__input,\n &--is-invalid &__label,\n &--is-invalid &__input + &__label {\n color: $colorError;\n }\n\n &--is-invalid &__input {\n border-color: $colorError;\n\n @include placeholder {\n color: $colorError;\n }\n }\n\n /* Readonly / Disabled */\n\n &--is-readonly &__input,\n &--is-readonly &__input + &__label,\n &--is-disabled &__input,\n &--is-disabled &__input + &__label {\n color: $formDisabledColor;\n }\n\n &--is-readonly &__input,\n &--is-disabled &__input {\n color: $formDisabledColor;\n border-color: $formDisabledBorderColor;\n background-color: $formDisabledBackgroundColor;\n cursor: not-allowed;\n\n @include placeholder {\n color: $formDisabledColor;\n }\n\n &:hover,\n &:focus {\n border-color: $formDisabledBorderColor;\n }\n }\n\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n\n &::before {\n background: transparent;\n }\n }\n\n &--is-readonly &__button-right,\n &--is-disabled &__button-right {\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n --color: #{$formDisabledColor};\n --hover-color: #{$formDisabledColor};\n }\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Event,\n EventEmitter,\n State,\n Method,\n Element,\n h,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhInputChangedEvent,\n StzhInputFocusEvent,\n StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true\n})\nexport class StzhInput {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the input is a textarea or an input field */\n @Prop() multiline: boolean = false;\n\n /** Rows attribute if input element is textarea */\n @Prop() rows: number;\n\n /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n @Prop() type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" = \"text\";\n\n /** If input type is number, this will be the step size */\n @Prop() step: number = 1;\n\n /** If input type is number, this will be the minimum step number */\n @Prop() min: number;\n\n /** If input type is number, this will be the maximum step number */\n @Prop() max: number;\n\n /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /** Whether the element is readonly or not */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n @Prop({ reflect: true }) showMarker: boolean = false;\n\n /** Minimum of characters */\n @Prop() minlength: number;\n\n /** Maxlength of characters */\n @Prop() maxlength: number;\n\n /** The name of the input element */\n @Prop({ reflect: true }) name: string;\n\n /** The value of the input element */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** Description message (use description slot as alternative) */\n @Prop() description: string;\n\n /** Long description message appearing in a popover (use description-long slot as alternative) */\n @Prop() descriptionLong: string;\n\n /** One or multiple error message (use error slot as alternative) */\n @Prop() error: string | string[];\n private _error: string[];\n\n /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n */\n @Prop() inputmode: string;\n\n /**\n * Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n */\n @Prop() autocomplete: string = \"on\";\n\n /** Whether autocomplete should be turned off */\n @Prop() noAutocomplete: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Whether label should be visually hidden. */\n @Prop() labelHidden: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Whether the input is filled or not */\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /** Focus input field */\n @Method()\n async setFocus() {\n this.input.focus();\n }\n\n /** Input change event */\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /** Input changed event */\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string | string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n\n this.invalid = this._error.length > 0;\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\n \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\"\n ];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement | HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private onClearClick = (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent('focus', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent('blur', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={(el) => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\": buttonRightSlotUsed\n || this.type === \"search\"\n || (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {this.showMarker &&\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n {this.clearable || this.type === \"search\"\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n icon-only\n variant=\"input\"\n onClick={this.onClearClick}\n disabled={this.disabled || this.readonly || !this.filled}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n :\n <slot name=\"button-right\"></slot>\n }\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"stzh-input.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding: Padding of field\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n:host {\n --text-align: left;\n --input-width: 100%;\n --padding: #{space('xsmall')} #{space('medium')};\n\n &[type=\"hidden\"] {\n position: absolute;\n top: -9999px;\n left: -9999px;\n visibility: hidden;\n }\n\n width: 100%;\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n position: absolute;\n top: 0;\n right: 0;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"][variant=\"input\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-button[variant=\"input\"],\n.stzh-input__button-right[variant=\"input\"] {\n --border-color: transparent;\n --hover-border-color: transparent;\n}\n\n.stzh-input {\n\t@include input-description;\n\t@include fontSize('milli');\n\n &__field-wrapper {\n position: relative;\n display: flex;\n width: var(--input-width);\n }\n\n &__input {\n @include font;\n @include fontSize('milli');\n border: 1px solid $formBorderColor;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n border-radius: $formInputBorderRadius;\n padding: var(--padding);\n margin: 0;\n width: 100%;\n color: $colorPrimary;\n background: $colorWhite;\n appearance: none;\n text-align: var(--text-align);\n\n @include placeholder {\n color: $formInputPlaceholderColor;\n }\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n }\n\n // remove clear button for IE11\n &::-ms-clear {\n display: none;\n }\n\n // prevent ugly autofill background color in chrome\n &:-webkit-autofill {\n background-clip: text;\n }\n\n // show ellipsis for placeholders that are too long\n &:placeholder-shown {\n text-overflow: ellipsis;\n }\n\n // hide search clear icon on chrome\n &[type=\"search\"]::-webkit-search-decoration,\n &[type=\"search\"]::-webkit-search-cancel-button,\n &[type=\"search\"]::-webkit-search-results-button,\n &[type=\"search\"]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n /* Normal inputs */\n\n &--input {\n height: $formInputHeight;\n }\n\n /* Textarea */\n\n &--textarea {\n min-height: $formInputHeight;\n resize: vertical;\n }\n }\n\n &__label {\n @include font('heavy');\n @include fontSize('nano');\n @include truncate;\n color: $formColor;\n width: auto;\n position: absolute;\n top: calc(#{$formInputHeight} / 2);\n // padding-left (medium) + border-left\n left: calc(#{space('medium')} + 1px);\n max-width: calc(100% - #{space('medium')} * 2);\n transform: translateY(-50%);\n transition: all $baseTransitionAnimationSpeed;\n pointer-events: none;\n\n &:empty {\n display: none;\n }\n\n &::before {\n content: '';\n display: none;\n background: $colorWhite;\n position: absolute;\n width: 100%;\n z-index: -1;\n left: 0;\n top: 50%;\n // prevent white line not fully overlaping border of input\n margin-top: -0.5px;\n height: 2px;\n }\n }\n\n &__input:hover + &__label,\n &__input:focus + &__label {\n color: $colorPrimaryHover;\n }\n\n &__button-right {\n display: none;\n\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n --color: #{$formColor};\n --background-color: transparent;\n --border-color: transparent;\n\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: transparent;\n --hover-border-color: transparent;\n }\n }\n\n /* Clearable / Search input */\n\n &--is-clearable#{&}--is-filled:not(#{&}--is-readonly):not(#{&}--is-disabled) &__button-right,\n &--type-search &__button-right {\n display: block;\n }\n\n &--type-search:not(#{&}--is-filled) &__button-right,\n &--type-search#{&}--is-readonly &__button-right,\n &--type-search#{&}--is-disabled &__button-right {\n pointer-events: none;\n }\n\n /* Filled variant */\n\n &--is-filled &__button-right {\n &.is-search {\n pointer-events: initial;\n }\n }\n\n /* Styles for floating label */\n\n &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--has-fixed-label &__label,\n &--is-filled &__label,\n &--is-readonly &__label,\n &--is-disabled &__label,\n &--is-invalid &__label {\n display: block;\n top: 0;\n // padding-left (input field medium) - padding-left\n left: calc(#{space('medium')} - #{space('xxsmall')});\n height: 20px; // dividable by two (so before element is always positioned correctly)\n line-height: 20px;\n padding: 0 space('xxsmall');\n max-width: calc(100% - #{space('small')} * 2);\n pointer-events: all;\n\n &:not(:empty)::before {\n display: block;\n }\n }\n\n /* Button Right Variant */\n\n &--has-button-right &__input {\n // distance to icon + icon button width\n padding-right: calc(#{space('xsmall')} + #{$formInputHeight});\n }\n\n &--has-button-right &__label {\n // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n }\n\n &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--has-button-right#{&}--has-fixed-label &__label,\n &--has-button-right#{&}--is-filled &__label,\n &--has-button-right#{&}--is-readonly &__label,\n &--has-button-right#{&}--is-disabled &__label,\n &--has-button-right#{&}--is-invalid &__label {\n // 100% - left distance to text + 1px border + padding label right side - icon button width\n max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n }\n\n /* Size variants */\n\n &--size-small {\n @include fontSize('micro');\n }\n\n &--size-small &__input {\n @include fontSize('micro');\n\n &--input {\n height: $formInputHeightSmall;\n }\n\n &--textarea {\n min-height: $formInputHeightSmall;\n }\n }\n\n &--size-small &__label {\n top: calc(#{$formInputHeightSmall} / 2);\n }\n\n &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--size-small#{&}--has-fixed-label &__label,\n &--size-small#{&}--is-filled &__label,\n &--size-small#{&}--is-readonly &__label,\n &--size-small#{&}--is-disabled &__label,\n &--size-small#{&}--is-invalid &__label {\n top: 0;\n }\n\n &--size-small#{&}--has-button-right &__input {\n padding-right: calc(#{space('xxsmall')} + #{$formInputHeightSmall});\n }\n\n &--size-small#{&}--has-button-right &__label {\n max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n }\n\n &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n }\n\n /* Spin button */\n\n &:not(#{&}--has-spin) &__input {\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n }\n\n &[type=number] {\n appearance: textfield;\n }\n }\n\n /* Hidden label */\n &--has-label-hidden &__label {\n @include visuallyhidden;\n }\n\n /* Invalid */\n\n &--is-invalid &__input,\n &--is-invalid &__label,\n &--is-invalid &__input + &__label {\n color: $colorError;\n }\n\n &--is-invalid &__input {\n border-color: $colorError;\n\n @include placeholder {\n color: $colorError;\n }\n }\n\n /* Readonly / Disabled */\n\n &--is-readonly &__input,\n &--is-readonly &__input + &__label,\n &--is-disabled &__input,\n &--is-disabled &__input + &__label {\n color: $formDisabledColor;\n }\n\n &--is-readonly &__input,\n &--is-disabled &__input {\n color: $formDisabledColor;\n border-color: $formDisabledBorderColor;\n background-color: $formDisabledBackgroundColor;\n cursor: not-allowed;\n\n @include placeholder {\n color: $formDisabledColor;\n }\n\n &:hover,\n &:focus {\n border-color: $formDisabledBorderColor;\n }\n }\n\n &--is-readonly &__label,\n &--is-disabled &__label {\n cursor: not-allowed;\n\n &::before {\n background: transparent;\n }\n }\n\n &--is-readonly &__button-right,\n &--is-disabled &__button-right {\n &[disabled]:not([disabled=\"false\"])[variant=\"input\"] {\n --color: #{$formDisabledColor};\n --hover-color: #{$formDisabledColor};\n }\n }\n}\n","import {\n Component,\n Prop,\n Host,\n Event,\n EventEmitter,\n State,\n Method,\n Element,\n h,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhInputChangeEvent,\n StzhInputChangedEvent,\n StzhInputFocusEvent,\n StzhInputBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n tag: \"stzh-input\",\n styleUrl: \"stzh-input.scss\",\n scoped: true\n})\nexport class StzhInput {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Whether the input is a textarea or an input field */\n @Prop() multiline: boolean = false;\n\n /** Rows attribute if input element is textarea */\n @Prop() rows: number;\n\n /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n @Prop({ reflect: true }) type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" | \"hidden\" = \"text\";\n\n /** If input type is number, this will be the step size */\n @Prop() step: number = 1;\n\n /** If input type is number, this will be the minimum step number */\n @Prop() min: number;\n\n /** If input type is number, this will be the maximum step number */\n @Prop() max: number;\n\n /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n @Prop({ reflect: true }) showSpin: boolean = false;\n\n /** Whether the element is readonly or not */\n @Prop({ reflect: true }) readonly: boolean = false;\n\n /** Whether the element is disabled or not */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n @Prop({ reflect: true }) clearable: boolean = false;\n\n /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n @Prop({ reflect: true }) showMarker: boolean = false;\n\n /** Minimum of characters */\n @Prop() minlength: number;\n\n /** Maxlength of characters */\n @Prop() maxlength: number;\n\n /** The name of the input element */\n @Prop({ reflect: true }) name: string;\n\n /** The value of the input element */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** Description message (use description slot as alternative) */\n @Prop() description: string;\n\n /** Long description message appearing in a popover (use description-long slot as alternative) */\n @Prop() descriptionLong: string;\n\n /** One or multiple error message (use error slot as alternative) */\n @Prop() error: string | string[];\n private _error: string[];\n\n /** Invalid status */\n @Prop({ reflect: true }) invalid: boolean = false;\n\n /** Required status */\n @Prop({ reflect: true }) required: boolean = false;\n\n /**\n * Specify inputmode.\n * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n */\n @Prop() inputmode: string;\n\n /**\n * Specify what the user agent has to provide as automated assistance.\n * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n */\n @Prop() autocomplete: string = \"on\";\n\n /** Whether autocomplete should be turned off */\n @Prop() noAutocomplete: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Whether label should be visually hidden. */\n @Prop() labelHidden: boolean = false;\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Whether the input is filled or not */\n @State() filled: boolean;\n\n @Element() element: HTMLStzhInputElement;\n\n /** Focus input field */\n @Method()\n async setFocus() {\n this.input.focus();\n }\n\n /** Input change event */\n @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n /** Input changed event */\n @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n /** Input focus event */\n @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n @Watch(\"value\")\n valueWatcher(newValue: string) {\n this.filled = newValue !== \"\";\n }\n\n @Watch(\"error\")\n errorWatcher(newValue: string | string[]) {\n if (typeof newValue === \"string\") {\n try {\n this._error = JSON.parse(newValue);\n } catch (e) {\n if (newValue) {\n this._error = [newValue];\n } else {\n this._error = [];\n }\n }\n } else if (newValue) {\n this._error = newValue;\n } else {\n this._error = [];\n }\n\n this.invalid = this._error.length > 0;\n }\n\n @Watch(\"type\")\n typeWatcher(newValue: string) {\n const types = [\n \"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"\n ];\n\n if (!this.multiline && !types.includes(newValue)) {\n throw new Error(`Type ${newValue} not supported`);\n }\n }\n\n private input: HTMLInputElement | HTMLTextAreaElement;\n private inputId: string;\n private focusedByInput: boolean = false;\n\n private onClearClick = (event: MouseEvent) => {\n this.value = \"\";\n this.input.focus();\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onInput = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChange.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onChange = (event: InputEvent) => {\n this.value = this.input.value;\n\n this.stzhChanged.emit({\n component: \"stzh-input\",\n originalEvent: event,\n value: this.value\n });\n }\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent('focus', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n // fixes weird bug where autofill selection doesn't get removed\n this.input.value = this.input.value;\n\n const blurEvent = new FocusEvent('blur', {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-input\",\n originalEvent: event\n });\n }\n\n private renderTextarea(): HTMLTextAreaElement {\n return (\n <textarea\n class=\"stzh-input__input stzh-input__input--textarea\"\n ref={(el) => (this.input = el as HTMLTextAreaElement)}\n id={this.inputId}\n name={this.name}\n value={this.value}\n rows={this.rows}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n ></textarea>\n );\n }\n\n private renderInput(): HTMLInputElement {\n return (\n <input\n class=\"stzh-input__input stzh-input__input--input\"\n ref={(el) => (this.input = el as HTMLInputElement)}\n id={this.inputId}\n type={this.type}\n name={this.name}\n value={this.value}\n min={this.min}\n max={this.max}\n step={this.step}\n inputmode={this.inputmode}\n disabled={this.disabled}\n readonly={this.readonly}\n minlength={this.minlength}\n maxlength={this.maxlength}\n autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n aria-required={this.required ? \"true\" : \"false\"}\n aria-invalid={this.invalid ? \"true\" : \"false\"}\n onChange={this.onChange}\n onInput={this.onInput}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n />\n );\n }\n\n async componentWillLoad() {\n this.inputId = `stzh-input-${inputCounter++}`;\n this.typeWatcher(this.type);\n this.valueWatcher(this.value);\n this.errorWatcher(this.error);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n }\n }\n\n render() {\n const buttonRightSlotUsed = hasSlot(this.element, 'button-right');\n const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n const classes = {\n \"stzh-input\": true,\n \"stzh-input--has-button-right\": buttonRightSlotUsed\n || this.type === \"search\"\n || (this.clearable && this.filled && !this.readonly && !this.disabled),\n \"stzh-input--has-description\": descriptionUsed,\n \"stzh-input--has-description-long\": descriptionLongUsed,\n \"stzh-input--has-error\": errorUsed,\n \"stzh-input--has-spin\": this.showSpin,\n \"stzh-input--is-invalid\": this.invalid,\n \"stzh-input--is-disabled\": this.disabled,\n \"stzh-input--is-readonly\": this.readonly,\n \"stzh-input--is-required\": this.required,\n \"stzh-input--is-filled\": this.filled,\n \"stzh-input--is-clearable\": this.clearable,\n \"stzh-input--has-fixed-label\": window?.stzhComponents?.labels === \"fixed\",\n \"stzh-input--has-label-hidden\": this.labelHidden,\n [`stzh-input--size-${this.size}`]: !!this.size,\n [`stzh-input--type-${this.type}`]: !!this.type,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n <div class={classes}>\n <div class=\"stzh-input__field-wrapper\">\n {this.multiline ? this.renderTextarea() : this.renderInput()}\n <label class=\"stzh-input__label\" htmlFor={this.inputId}>\n {this.label ? this.label : <slot></slot>}\n {this.showMarker &&\n <span class=\"stzh-input__marker\">\n <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n {this.required\n ? this.localization.$globals.requiredFieldMarker\n : this.localization.$globals.optionalFieldMarker\n }\n </span>\n <span class=\"stzh-input__marker-text\">\n {this.required\n ? this.localization.$globals.requiredFieldText\n : this.localization.$globals.optionalFieldText\n }\n </span>\n </span>\n }\n </label>\n {this.clearable || this.type === \"search\"\n ?\n <stzh-button\n class=\"stzh-input__button-right\"\n icon={this.disabled || this.readonly || !this.filled ? \"search\" : \"close-circle\"}\n icon-only\n variant=\"input\"\n onClick={this.onClearClick}\n disabled={this.disabled || this.readonly || !this.filled}\n a11yLabel={this.localization.$globals.clearButtonLabel}\n aria-controls={this.inputId}\n ></stzh-button>\n :\n <slot name=\"button-right\"></slot>\n }\n </div>\n <StzhInputDescription\n classPrefix=\"stzh-input\"\n id={`${this.inputId}-description`}\n error={this._error}\n description={this.description}\n descriptionLong={this.descriptionLong}\n descriptionLongUsed={descriptionLongUsed}\n moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/stzh-link.entry.js CHANGED
@@ -95,7 +95,8 @@ const StzhLink = class {
95
95
  }
96
96
  componentDidRender() {
97
97
  requestAnimationFrame(() => {
98
- this.link.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
98
+ var _a;
99
+ (_a = this.link) === null || _a === void 0 ? void 0 : _a.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
99
100
  });
100
101
  }
101
102
  render() {
package/dist/esm/stzh-link.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"stzh-link.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --icon-size: Size of icon next to link\n * @prop --text-decoration: Text decoration of link\n * @prop --hover-text-decoration: Hover text decoration of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n */\n\n:host {\n --color: #{$linkColor};\n --text-decoration-line: underline;\n --icon-size: #{iconSize('medium')};\n --icon-wrapper-height: #{$linkIconWrapperHeight};\n\n --hover-color: #{$linkHoverColor};\n --hover-text-decoration-line: underline;\n\n color: var(--color);\n display: inline-block;\n\n ::slotted(stzh-text) {\n --color: initial;\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: block;\n }\n\n &[size=\"small\"] {\n --icon-size: #{iconSize('small')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$baseColor};\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--hover-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey25};\n --hover-color: #{$colorGrey25};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-link__icon {\n --size: var(--icon-size);\n}\n\n.stzh-link {\n @include fontCurve('p1');\n font-family: inherit;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n border: none;\n color: var(--color);\n transition: color $baseTransitionAnimationSpeed;\n cursor: pointer;\n width: 100%;\n text-decoration-line: none;\n background-color: transparent;\n padding: 0;\n border-radius: $buttonBorderRadius;\n text-align: left;\n\n &:hover {\n color: var(--hover-color);\n }\n\n &:hover &__text {\n text-decoration-line: var(--hover-text-decoration-line);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: var(--icon-wrapper-height);\n }\n\n &__text {\n text-decoration-line: var(--text-decoration-line);\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: space('xxsmall');\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n /* Variant if link only has icon */\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n /* Badge positioning variants */\n\n &--badge-position-link &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-link &__badge {\n top: calc(#{space('xxsmall')} * -1);\n right: calc(#{space('large')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);;\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n margin-left: space('small');\n }\n\n /* Size variants */\n\n &--size-small {\n @include fontSize('micro');\n }\n\n &--size-inherit {\n font-size: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n }\n\n /* Alignment variants */\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n /* Disabled variant */\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Method,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Icon (use instead of icon slot) */\n @Prop() icon: string = \"\";\n\n /** Icon Position */\n @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" | \"inherit\" = \"default\";\n\n /** href attribute of the link */\n @Prop() href: string = \"\";\n\n /** Rel (if href is used) */\n @Prop() rel: string;\n\n /** target if the button is used as link (if href used) */\n @Prop() target: string = \"\";\n\n /** Download attribute of link (if `href` used) */\n @Prop() download: string;\n\n /** type of the button, if used as button (if no href used) */\n @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n /** Variant style */\n @Prop({ reflect: true }) variant: \"default\" | \"secondary\" = \"default\";\n\n /** Whether the link is full width */\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /** Text alignment */\n @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n /** Badge text */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Badge position */\n @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n /** Disabled status */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Active status */\n @Prop({ reflect: true }) active: boolean = false;\n\n /** Whether only an icon is used inside the link */\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Access key of link (usually a number e.g. 1) */\n @Prop() linkAccesskey: string;\n\n /** Accessible label for screen readers to replace visible text */\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Aria expanded of link/button */\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /** Aria disabled of link/button */\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /** Aria controls of link/button */\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /** Tabindex of link/button */\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhLinkElement;\n\n /** Focus link */\n @Method()\n async setFocus() {\n this.link.focus();\n }\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n private link: HTMLButtonElement | HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge || this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--size-${this.size}`]: !!this.size,\n [`stzh-link--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n download={this.download}\n rel={this.rel}\n target={this.target}\n class={classes}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.link = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"stzh-link.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --icon-size: Size of icon next to link\n * @prop --text-decoration: Text decoration of link\n * @prop --hover-text-decoration: Hover text decoration of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n */\n\n:host {\n --color: #{$linkColor};\n --text-decoration-line: underline;\n --icon-size: #{iconSize('medium')};\n --icon-wrapper-height: #{$linkIconWrapperHeight};\n\n --hover-color: #{$linkHoverColor};\n --hover-text-decoration-line: underline;\n\n color: var(--color);\n display: inline-block;\n\n ::slotted(stzh-text) {\n --color: initial;\n }\n\n &[fullwidth]:not([fullwidth=\"false\"]) {\n width: 100%;\n display: block;\n }\n\n &[size=\"small\"] {\n --icon-size: #{iconSize('small')};\n }\n\n &[variant=\"secondary\"] {\n --color: #{$baseColor};\n }\n\n &[active]:not([active=\"false\"]) {\n --color: var(--hover-color);\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorGrey25};\n --hover-color: #{$colorGrey25};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-link__icon {\n --size: var(--icon-size);\n}\n\n.stzh-link {\n @include fontCurve('p1');\n font-family: inherit;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n border: none;\n color: var(--color);\n transition: color $baseTransitionAnimationSpeed;\n cursor: pointer;\n width: 100%;\n text-decoration-line: none;\n background-color: transparent;\n padding: 0;\n border-radius: $buttonBorderRadius;\n text-align: left;\n\n &:hover {\n color: var(--hover-color);\n }\n\n &:hover &__text {\n text-decoration-line: var(--hover-text-decoration-line);\n }\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n }\n\n &__icon-wrapper {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: var(--icon-wrapper-height);\n }\n\n &__text {\n text-decoration-line: var(--text-decoration-line);\n }\n\n &__icon-wrapper:not(:empty) + &__text:not(:empty),\n &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n margin-left: space('xxsmall');\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n }\n\n /* Variant if link only has icon */\n\n &--has-icon-only &__text {\n @include visuallyhidden;\n }\n\n /* Badge positioning variants */\n\n &--badge-position-link &__icon-wrapper {\n position: static;\n }\n\n &__badge,\n &--badge-position-link &__badge {\n top: calc(#{space('xxsmall')} * -1);\n right: calc(#{space('large')} * -1);\n }\n\n &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n position: relative;\n }\n\n &--badge-position-icon#{&}--has-icon &__badge {\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('small')} * -1);;\n }\n\n &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n margin-left: space('small');\n }\n\n /* Size variants */\n\n &--size-small {\n @include fontSize('micro');\n }\n\n &--size-inherit {\n font-size: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n }\n\n /* Alignment variants */\n\n &--align-left &__inner {\n justify-content: flex-start;\n }\n\n &--align-right &__inner {\n justify-content: flex-end;\n }\n\n &--align-center &__inner {\n justify-content: center;\n }\n\n &--align-space-between &__inner {\n justify-content: space-between;\n }\n\n /* Disabled variant */\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n Fragment,\n Element,\n h,\n Prop,\n Method,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhLinkFocusEvent,\n StzhLinkBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n tag: \"stzh-link\",\n styleUrl: \"stzh-link.scss\",\n scoped: true\n})\nexport class StzhLink {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Icon (use instead of icon slot) */\n @Prop() icon: string = \"\";\n\n /** Icon Position */\n @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n /** Size variant */\n @Prop({ reflect: true }) size: \"default\" | \"small\" | \"inherit\" = \"default\";\n\n /** href attribute of the link */\n @Prop() href: string = \"\";\n\n /** Rel (if href is used) */\n @Prop() rel: string;\n\n /** target if the button is used as link (if href used) */\n @Prop() target: string = \"\";\n\n /** Download attribute of link (if `href` used) */\n @Prop() download: string;\n\n /** type of the button, if used as button (if no href used) */\n @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n /** Variant style */\n @Prop({ reflect: true }) variant: \"default\" | \"secondary\" = \"default\";\n\n /** Whether the link is full width */\n @Prop({ reflect: true }) fullwidth: boolean = false;\n\n /** Text alignment */\n @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n /** Badge text */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Badge position */\n @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n /** Disabled status */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Active status */\n @Prop({ reflect: true }) active: boolean = false;\n\n /** Whether only an icon is used inside the link */\n @Prop({ reflect: true }) iconOnly: boolean = false;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Access key of link (usually a number e.g. 1) */\n @Prop() linkAccesskey: string;\n\n /** Accessible label for screen readers to replace visible text */\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n /** Aria expanded of link/button */\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /** Aria disabled of link/button */\n @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n /** Aria controls of link/button */\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /** Tabindex of link/button */\n @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhLinkElement;\n\n /** Focus link */\n @Method()\n async setFocus() {\n this.link.focus();\n }\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n private link: HTMLButtonElement | HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-link\",\n originalEvent: event\n });\n }\n\n private renderIcon(): HTMLInputElement {\n return (\n <div class=\"stzh-link__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n );\n }\n\n private renderContent(): HTMLDivElement {\n return (\n <div class=\"stzh-link__text\">\n {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n </div>\n );\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n <div class=\"stzh-link__inner\">\n {this.iconPosition === \"left\" && this.renderIcon()}\n {this.renderContent()}\n {this.iconPosition === \"right\" && this.renderIcon()}\n </div>\n {(this.badge || this.badgeEmpty) && !iconUsed &&\n <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </Fragment>\n );\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n render() {\n const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n const classes = {\n \"stzh-link\": true,\n \"stzh-link--has-icon\": iconUsed,\n \"stzh-link--has-icon-only\": this.iconOnly,\n \"stzh-link--has-badge\": !!this.badge,\n \"stzh-link--is-fullwidth\": this.fullwidth,\n \"stzh-link--is-disabled\": this.disabled,\n \"stzh-link--is-active\": this.active,\n [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n [`stzh-link--size-${this.size}`]: !!this.size,\n [`stzh-link--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n download={this.download}\n rel={this.rel}\n target={this.target}\n class={classes}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.link = el as HTMLButtonElement)}\n class={classes}\n type={this.type}\n disabled={this.disabled}\n accessKey={this.linkAccesskey}\n tabindex={this.a11yTabindex}\n aria-label={this.a11yLabel || null}\n aria-describedby={this.a11yDescribedby || null}\n aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n aria-controls={this.a11yControls || null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/stzh-menu_2.entry.js CHANGED
@@ -71,7 +71,8 @@ const StzhMenuItem = class {
71
71
  }
72
72
  componentDidRender() {
73
73
  requestAnimationFrame(() => {
74
- this.menuItem.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
74
+ var _a;
75
+ (_a = this.menuItem) === null || _a === void 0 ? void 0 : _a.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
75
76
  });
76
77
  }
77
78
  renderInner(iconUsed) {
package/dist/esm/stzh-menu_2.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"stzh-menu.stzh-menu-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n ::slotted(stzh-hr) {\n margin-top: space('xsmall');\n margin-bottom: space('xsmall');\n }\n}\n\n.stzh-menu {\n display: flex;\n flex-direction: column;\n}\n","import {\n Component,\n Host,\n h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n tag: \"stzh-menu\",\n styleUrl: \"stzh-menu.scss\",\n scoped: true\n})\nexport class StzhMenu {\n render() {\n return (\n <Host role=\"menu\">\n <div class=\"stzh-menu\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n --height: #{$menuItemHeight};\n --color: #{$colorGrey70};\n --background-color: transparent;\n --icon-size: #{iconSize('small')};\n\n --hover-color: #{$colorGrey70};\n --hover-background-color: #{$colorGrey5};\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorPrimary};\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: #{$colorPrimary8};\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey13};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorGrey13};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-menu-item__icon {\n --size: var(--icon-size);\n}\n\n.stzh-menu-item {\n @include fontSize('micro');\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n text-decoration-line: none;\n border: none;\n padding: space('xsmall') space('medium');\n padding-left: space('large');\n color: var(--color);\n background-color: var(--background-color);\n width: 100%;\n height: var(--height);\n line-height: var(--height);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n &__icon-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &__icon-wrapper + &__text:not(:empty) {\n margin-left: space('xsmall');\n }\n\n &__text {\n @include truncate;\n }\n\n /* Disabled variant */\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhMenuItemFocusEvent,\n StzhMenuItemBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n tag: \"stzh-menu-item\",\n styleUrl: \"stzh-menu-item.scss\",\n scoped: true\n})\nexport class StzhMenuItem {\n /** Badge (only displayed if `icon` property or icon slot is used) */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Whether the button is disabled */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether the button is active */\n @Prop({ reflect: true }) active: boolean = false;\n\n /** Icon (use instead of icon slot) */\n @Prop() icon: string = \"\";\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** `href` if the button should be used as link */\n @Prop() href: string = \"\";\n\n /** Target if the button is used as link (if `href` used) */\n @Prop() target: string = \"\";\n\n /** Accessible label for screen readers to replace visible text */\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhMenuItemElement;\n\n /** Focus menu item */\n @Method()\n async setFocus() {\n this.menuItem.focus();\n }\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n private menuItem: HTMLButtonElement | HTMLAnchorElement;\n private text: HTMLDivElement;\n\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-menu-item\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-menu-item\",\n originalEvent: event\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.menuItem.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n {iconUsed &&\n <div class=\"stzh-menu-item__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) &&\n <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n }\n <div\n ref={(el) => (this.text = el as HTMLDivElement)}\n class=\"stzh-menu-item__text\"\n >\n {this.label ? this.label : <slot></slot>}\n </div>\n </Fragment>\n );\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n const classes = {\n \"stzh-menu-item\": true,\n \"stzh-menu-item--has-icon\": iconUsed,\n \"stzh-menu-item--has-badge\": !!this.badge,\n \"stzh-menu-item--is-disabled\": this.disabled,\n \"stzh-menu-item--is-active\": this.active\n };\n\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel || null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n class={classes}\n type=\"button\"\n disabled={this.disabled}\n aria-label={this.a11yLabel || null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"stzh-menu.stzh-menu-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-menu/stzh-menu.scss?tag=stzh-menu&encapsulation=scoped","src/components/stzh-menu/stzh-menu.tsx","src/components/stzh-menu-item/stzh-menu-item.scss?tag=stzh-menu-item&encapsulation=scoped","src/components/stzh-menu-item/stzh-menu-item.tsx"],"sourcesContent":[":host {\n ::slotted(stzh-hr) {\n margin-top: space('xsmall');\n margin-bottom: space('xsmall');\n }\n}\n\n.stzh-menu {\n display: flex;\n flex-direction: column;\n}\n","import {\n Component,\n Host,\n h,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for `stzh-menu-item` elements\n */\n@Component({\n tag: \"stzh-menu\",\n styleUrl: \"stzh-menu.scss\",\n scoped: true\n})\nexport class StzhMenu {\n render() {\n return (\n <Host role=\"menu\">\n <div class=\"stzh-menu\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n","/**\n * @prop --height: Height of item\n * @prop --icon-size: Size of icon next to item\n * @prop --color: Color of item\n * @prop --background-color: Background color of item\n * @prop --hover-color: Hover color of item\n * @prop --hover-background-color: Hover background color of item\n *\n * @prop --stzh-menu-item-height: **Global**: Height of items\n */\n\n:host {\n --height: #{$menuItemHeight};\n --color: #{$colorGrey70};\n --background-color: transparent;\n --icon-size: #{iconSize('small')};\n\n --hover-color: #{$colorGrey70};\n --hover-background-color: #{$colorGrey5};\n\n &[active]:not([active=\"false\"]) {\n --color: #{$colorPrimary};\n --hover-color: #{$colorPrimaryHover};\n --hover-background-color: #{$colorPrimary8};\n }\n\n &[disabled]:not([disabled=\"false\"]) {\n --color: #{$colorWhite};\n --background-color: #{$colorGrey13};\n\n --hover-color: #{$colorWhite};\n --hover-background-color: #{$colorGrey13};\n }\n}\n\n:host ::slotted(stzh-icon),\n.stzh-menu-item__icon {\n --size: var(--icon-size);\n}\n\n.stzh-menu-item {\n @include fontSize('micro');\n font-family: inherit;\n display: flex;\n align-items: center;\n justify-content: stretch;\n appearance: none;\n text-decoration-line: none;\n border: none;\n padding: space('xsmall') space('medium');\n padding-left: space('large');\n color: var(--color);\n background-color: var(--background-color);\n width: 100%;\n height: var(--height);\n line-height: var(--height);\n transition-duration: $baseTransitionAnimationSpeed;\n transition-property: color, background-color, border-color;\n cursor: pointer;\n\n &:hover {\n color: var(--hover-color);\n background-color: var(--hover-background-color);\n }\n\n &__icon-wrapper {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: auto;\n height: 1em;\n }\n\n &__badge {\n position: absolute;\n z-index: 1;\n top: calc(#{space('xsmall')} * -1);\n right: calc(#{space('xsmall')} * -1);\n }\n\n &__icon-wrapper + &__text:not(:empty) {\n margin-left: space('xsmall');\n }\n\n &__text {\n @include truncate;\n }\n\n /* Disabled variant */\n\n &--is-disabled {\n cursor: not-allowed;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Method,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhMenuItemFocusEvent,\n StzhMenuItemBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for `stzh-icon` element\n */\n@Component({\n tag: \"stzh-menu-item\",\n styleUrl: \"stzh-menu-item.scss\",\n scoped: true\n})\nexport class StzhMenuItem {\n /** Badge (only displayed if `icon` property or icon slot is used) */\n @Prop() badge: string = \"\";\n\n /** Badge type */\n @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n /** Whether badge should be displayed empty */\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n /** Whether the button is disabled */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether the button is active */\n @Prop({ reflect: true }) active: boolean = false;\n\n /** Icon (use instead of icon slot) */\n @Prop() icon: string = \"\";\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** `href` if the button should be used as link */\n @Prop() href: string = \"\";\n\n /** Target if the button is used as link (if `href` used) */\n @Prop() target: string = \"\";\n\n /** Accessible label for screen readers to replace visible text */\n @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link/button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhMenuItemElement;\n\n /** Focus menu item */\n @Method()\n async setFocus() {\n this.menuItem.focus();\n }\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;\n\n /** Input blur event */\n @Event() stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;\n\n private menuItem: HTMLButtonElement | HTMLAnchorElement;\n private text: HTMLDivElement;\n\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.setFocus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n this.stzhFocus.emit({\n component: \"stzh-menu-item\",\n originalEvent: event\n });\n }\n\n private onBlur = (event: FocusEvent) => {\n const blurEvent = new FocusEvent(\"blur\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(blurEvent);\n this.stzhBlur.emit({\n component: \"stzh-menu-item\",\n originalEvent: event\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.menuItem?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n });\n }\n\n private renderInner(iconUsed: boolean): DocumentFragment {\n return (\n <Fragment>\n {iconUsed &&\n <div class=\"stzh-menu-item__icon-wrapper\">\n {this.icon ?\n <stzh-icon class=\"stzh-menu-item__icon\" name={this.icon}></stzh-icon>\n :\n <slot name=\"icon\"></slot>\n }\n {(this.badge || this.badgeEmpty) &&\n <stzh-badge class=\"stzh-menu-item__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n }\n </div>\n }\n <div\n ref={(el) => (this.text = el as HTMLDivElement)}\n class=\"stzh-menu-item__text\"\n >\n {this.label ? this.label : <slot></slot>}\n </div>\n </Fragment>\n );\n }\n\n render() {\n const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n const classes = {\n \"stzh-menu-item\": true,\n \"stzh-menu-item--has-icon\": iconUsed,\n \"stzh-menu-item--has-badge\": !!this.badge,\n \"stzh-menu-item--is-disabled\": this.disabled,\n \"stzh-menu-item--is-active\": this.active\n };\n\n return (\n <Host role=\"menuitem\" tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n {this.href ?\n <a\n ref={(el) => (this.menuItem = el as HTMLAnchorElement)}\n href={this.disabled ? null : this.href}\n target={this.target}\n class={classes}\n aria-label={this.a11yLabel || null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </a>\n :\n <button\n ref={(el) => (this.menuItem = el as HTMLButtonElement)}\n class={classes}\n type=\"button\"\n disabled={this.disabled}\n aria-label={this.a11yLabel || null}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n {this.renderInner(iconUsed)}\n </button>\n }\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/stzh-progressbar-item.entry.js CHANGED
@@ -35,7 +35,8 @@ const StzhProgressbarItem = class {
35
35
  }
36
36
  componentDidRender() {
37
37
  requestAnimationFrame(() => {
38
- this.button.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
38
+ var _a;
39
+ (_a = this.button) === null || _a === void 0 ? void 0 : _a.setAttribute("s-object-id", this.analyticsId || this.text.innerText);
39
40
  });
40
41
  }
41
42
  render() {
package/dist/esm/stzh-progressbar-item.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"stzh-progressbar-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n text-align: center;\n\n &__button {\n appearance: none;\n font-family: inherit;\n background-color: transparent;\n border: none;\n cursor: pointer;\n border-radius: $formInputBorderRadius;\n }\n\n &__button:hover &__number-block,\n &__button:focus &__number-block {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n border-color: Highlight;\n }\n\n &::after {\n background-color: $colorPrimary8;\n }\n }\n\n &__button:hover &__label-block,\n &__button:focus &__label-block {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* what we do here is:\n add a gray line on the last element, which strikes through all previous ones,\n add a blue line on the current step which covers all previous elements relative to itself\n and add a white line on the first element, which gives you the illusion that it stopped. */\n\n &__number-block {\n @include font('heavy');\n @include fontCurve('p1');\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: $progressbarItemSize;\n height: $progressbarItemSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: $progressbarItemSmallUp / 2;\n text-align: center;\n box-sizing: border-box;\n color: $colorGrey55;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: $progressbarItemSmallUp;\n height: $progressbarItemSmallUp;\n margin-bottom: space('large');\n }\n\n\t\t// set a line on every element, but hide it by default\n &::before {\n display: none;\n content: '';\n position: absolute;\n top: 16px;\n right: $progressbarItemSize - 1px;\n width: 100vw;\n height: 1px;\n background-color: $baseBorderColor;\n z-index: -2;\n overflow: hidden;\n\n @include mq($from: small) {\n top: 20px;\n right: $progressbarItemSmallUp - 1px;\n }\n }\n }\n\n &__number-block,\n &__dotted {\n &::after {\n content: '';\n z-index: 0;\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: $progressbarItemSmallUp / 2;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n }\n\n &__label-block {\n display: block;\n font-size: 14px;\n line-height: 1.28;\n color: $colorGrey55;\n padding: space('xxsmall') space('small');\n letter-spacing: 0.01em;\n transition: color $baseTransitionAnimationSpeed;\n\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__number,\n &__icon,\n &__user-icon,\n &__dotted-icon {\n z-index: 1;\n }\n\n &__icon,\n &__user-icon,\n &__dotted-icon {\n --size: #{iconSize('xsmall')};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: $colorPrimary;\n\n @include highContrast() {\n color: CanvasText;\n }\n }\n\n &__user-icon {\n --size: #{iconSize('small')};\n color: currentColor;\n }\n\n &__dotted {\n z-index: 1;\n appearance: none;\n font-family: inherit;\n position: absolute;\n top: 3px;\n width: $progressbarItemDottedSize;\n height: $progressbarItemDottedSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: 50%;\n cursor: pointer;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:hover,\n &:focus {\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &:hover::after,\n &:focus::after {\n background-color: $colorPrimary8;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n\n @include mq($from: small) {\n top: 5px;\n width: $progressbarItemDottedSizeSmallUp;\n height: $progressbarItemDottedSizeSmallUp;\n }\n }\n\n &__dotted:hover &__dotted-icon,\n &__dotted:focus &__dotted-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* First and Last */\n\n &--first &__number-block,\n &--last &__number-block {\n &::before {\n display: block\n }\n }\n\n /* First */\n\n &--first {\n position: relative;\n }\n\n &--first &__dotted {\n left: 50%;\n transform: translateX(-50%);\n }\n\n /* Last */\n\n &--last &__dotted {\n // position the dots based on the width divided by the elements minus half of itself\n right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n @include mq($from: small) {\n right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n }\n }\n\n /* Passed */\n\n &--passed &__label-block {\n\t\t@include font('heavy');\n color: $colorPrimary;\n }\n\n &--passed &__number-block {\n background-color: $colorWhite;\n border: solid 1px $colorPrimary;\n\n @include highContrast() {\n background-color: Canvas;\n border-color: CanvasText;\n }\n }\n\n &--passed &__button:hover &__number-block,\n &--passed &__button:focus &__number-block {\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &--passed &__number-block,\n &--passed &__button:hover &__number-block,\n &--passed &__button:focus &__number-block {\n color: transparent;\n\n @include highContrast() {\n color: Canvas;\n }\n }\n\n &--passed &__user-icon {\n color: $colorPrimary;\n }\n\n &--passed &__button:hover &__user-icon,\n &--passed &__button:focus &__user-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* Current */\n\n &--current &__label-block {\n @include font('heavy');\n color: $colorPrimary;\n\n @include highContrast() {\n color: SelectedItem;\n }\n\n &:hover {\n text-decoration-line: none;\n }\n }\n\n &--current &__number-block {\n background-color: $colorPrimary;\n border: solid 1px $colorPrimary;\n color: $colorWhite;\n\n @include highContrast() {\n color: SelectedItem;\n border-color: SelectedItem;\n background-color: Canvas;\n }\n\n // make line blue (see desc)\n &::before {\n display: block;\n background-color: $colorPrimary;\n z-index: -1;\n\n @include highContrast() {\n background-color: CanvasText;\n }\n }\n }\n\n &--current &__button:hover &__number-block,\n &--current &__button:focus &__number-block {\n color: $colorWhite;\n\n @include highContrast() {\n color: Highlight;\n }\n\n &::after {\n background-color: $colorPrimaryHover;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n &--current &__user-icon {\n @include highContrast() {\n color: SelectedItem;\n }\n }\n\n &--current &__button:hover &__icon,\n &--current &__button:focus &__icon,\n &--current &__button:hover &__user-icon,\n &--current &__button:focus &__user-icon {\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* Dotted */\n\n &--dotted#{&}--first &__number-block {\n margin-bottom: 0;\n\n &::after {\n display: none;\n }\n }\n\n &--dotted#{&}--first &__button {\n padding-left: 0;\n padding-right: 0;\n }\n\n // hide number block behind dotted element\n &--dotted#{&}--first &__number-block {\n position: relative;\n z-index: 0;\n top: 5px;\n width: $progressbarItemDottedSize;\n height: $progressbarItemDottedSize;\n border: none;\n background-color: transparent;\n\n // change dimensions to be still hidden\n @include mq($from: small) {\n top: 8px;\n width: $progressbarItemDottedSizeSmallUp;\n height: $progressbarItemDottedSizeSmallUp;\n }\n\n // realign white line\n &::before {\n top: 12px;\n right: 26px;\n\n @include mq($from: small) {\n top: 13px;\n right: 30px;\n }\n }\n }\n\n &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n }\n\n // first child overwrite white line (see desc) */\n &--first &__number-block {\n &::before {\n background-color: $colorWhite;\n z-index: 1;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n /* Disabled */\n\n // &--is-disabled &__number-block {\n // background-color: $baseBorderColor;\n // }\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n\n &--is-disabled &__button:hover &__number-block,\n &--is-disabled &__button:focus &__number-block {\n color: $colorGrey55;\n border-color: $baseBorderColor;\n\n @include highContrast() {\n color: GrayText;\n border-color: GrayText;\n }\n\n &::after {\n display: none;\n }\n }\n\n &--is-disabled &__button:hover &__label-block,\n &--is-disabled &__button:focus &__label-block {\n color: $colorGrey55;\n\n @include highContrast() {\n color: GrayText;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarItemClickEvent,\n StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n tag: \"stzh-progressbar-item\",\n styleUrl: \"stzh-progressbar-item.scss\",\n scoped: true\n})\nexport class StzhProgressbarItem {\n @Prop({ reflect: true }) label: string;\n\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @Prop({ reflect: true }) first: boolean = false;\n\n @Prop({ reflect: true }) last: boolean = false;\n\n @Prop({ reflect: true }) passed: boolean = false;\n\n @Prop({ reflect: true }) current: boolean = false;\n\n @Prop({ reflect: true }) hide: boolean = false;\n\n @Prop({ reflect: true }) dotted: boolean = false;\n\n @Prop({ reflect: true }) step: number = 1;\n\n @Prop({ reflect: true }) icon: string = \"\";\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n /** Click event */\n @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n /** Dotted click event */\n @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n @Element() element: HTMLStzhProgressbarItemElement;\n\n private button: HTMLButtonElement;\n private text: HTMLElement;\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-progressbar-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n private onDottedClick = (event: MouseEvent) => {\n this.stzhDottedClick.emit({\n component: \"stzh-progressbar-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\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 classes = {\n \"stzh-progressbar-item\": true,\n \"stzh-progressbar-item--first\": this.first,\n \"stzh-progressbar-item--last\": this.last,\n \"stzh-progressbar-item--passed\": this.passed,\n \"stzh-progressbar-item--current\": this.current,\n \"stzh-progressbar-item--hide\": this.hide,\n \"stzh-progressbar-item--dotted\": this.dotted,\n \"stzh-progressbar-item--has-icon\": !!this.icon,\n \"stzh-progressbar-item--is-disabled\": this.disabled\n };\n\n const dotted = (\n <button\n class=\"stzh-progressbar-item__dotted\"\n onClick={this.onDottedClick}\n >\n <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </button>\n );\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.last && this.dotted && dotted}\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class=\"stzh-progressbar-item__button\"\n aria-pressed={this.current ? \"true\" : \"false\"}\n disabled={(this.dotted && this.first) || this.disabled}\n onClick={this.onClick}\n >\n <span class=\"stzh-progressbar-item__number-block\">\n {this.icon\n ?\n <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n :\n <Fragment>\n <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n {this.passed &&\n <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n }\n </Fragment>\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-progressbar-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </button>\n {this.first && this.dotted && dotted}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"stzh-progressbar-item.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n text-align: center;\n\n &__button {\n appearance: none;\n font-family: inherit;\n background-color: transparent;\n border: none;\n cursor: pointer;\n border-radius: $formInputBorderRadius;\n }\n\n &__button:hover &__number-block,\n &__button:focus &__number-block {\n color: $colorPrimaryHover;\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n border-color: Highlight;\n }\n\n &::after {\n background-color: $colorPrimary8;\n }\n }\n\n &__button:hover &__label-block,\n &__button:focus &__label-block {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* what we do here is:\n add a gray line on the last element, which strikes through all previous ones,\n add a blue line on the current step which covers all previous elements relative to itself\n and add a white line on the first element, which gives you the illusion that it stopped. */\n\n &__number-block {\n @include font('heavy');\n @include fontCurve('p1');\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: $progressbarItemSize;\n height: $progressbarItemSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: $progressbarItemSmallUp / 2;\n text-align: center;\n box-sizing: border-box;\n color: $colorGrey55;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n @include mq($from: small) {\n width: $progressbarItemSmallUp;\n height: $progressbarItemSmallUp;\n margin-bottom: space('large');\n }\n\n\t\t// set a line on every element, but hide it by default\n &::before {\n display: none;\n content: '';\n position: absolute;\n top: 16px;\n right: $progressbarItemSize - 1px;\n width: 100vw;\n height: 1px;\n background-color: $baseBorderColor;\n z-index: -2;\n overflow: hidden;\n\n @include mq($from: small) {\n top: 20px;\n right: $progressbarItemSmallUp - 1px;\n }\n }\n }\n\n &__number-block,\n &__dotted {\n &::after {\n content: '';\n z-index: 0;\n position: absolute;\n display: block;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n border-radius: $progressbarItemSmallUp / 2;\n transition: background-color $baseTransitionAnimationSpeed;\n }\n }\n\n &__label-block {\n display: block;\n font-size: 14px;\n line-height: 1.28;\n color: $colorGrey55;\n padding: space('xxsmall') space('small');\n letter-spacing: 0.01em;\n transition: color $baseTransitionAnimationSpeed;\n\n @include mq($to: small) {\n @include visuallyhidden;\n }\n }\n\n &__number,\n &__icon,\n &__user-icon,\n &__dotted-icon {\n z-index: 1;\n }\n\n &__icon,\n &__user-icon,\n &__dotted-icon {\n --size: #{iconSize('xsmall')};\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: $colorPrimary;\n\n @include highContrast() {\n color: CanvasText;\n }\n }\n\n &__user-icon {\n --size: #{iconSize('small')};\n color: currentColor;\n }\n\n &__dotted {\n z-index: 1;\n appearance: none;\n font-family: inherit;\n position: absolute;\n top: 3px;\n width: $progressbarItemDottedSize;\n height: $progressbarItemDottedSize;\n background-color: $colorWhite;\n border: solid 1px $baseBorderColor;\n border-radius: 50%;\n cursor: pointer;\n transition-property: color, border-color;\n transition-duration: $baseTransitionAnimationSpeed;\n\n &:hover,\n &:focus {\n border-color: $colorPrimaryHover;\n\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &:hover::after,\n &:focus::after {\n background-color: $colorPrimary8;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n\n @include mq($from: small) {\n top: 5px;\n width: $progressbarItemDottedSizeSmallUp;\n height: $progressbarItemDottedSizeSmallUp;\n }\n }\n\n &__dotted:hover &__dotted-icon,\n &__dotted:focus &__dotted-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* First and Last */\n\n &--first &__number-block,\n &--last &__number-block {\n &::before {\n display: block\n }\n }\n\n /* First */\n\n &--first {\n position: relative;\n }\n\n &--first &__dotted {\n left: 50%;\n transform: translateX(-50%);\n }\n\n /* Last */\n\n &--last &__dotted {\n // position the dots based on the width divided by the elements minus half of itself\n right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n @include mq($from: small) {\n right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n }\n }\n\n /* Passed */\n\n &--passed &__label-block {\n\t\t@include font('heavy');\n color: $colorPrimary;\n }\n\n &--passed &__number-block {\n background-color: $colorWhite;\n border: solid 1px $colorPrimary;\n\n @include highContrast() {\n background-color: Canvas;\n border-color: CanvasText;\n }\n }\n\n &--passed &__button:hover &__number-block,\n &--passed &__button:focus &__number-block {\n @include highContrast() {\n border-color: Highlight;\n }\n }\n\n &--passed &__number-block,\n &--passed &__button:hover &__number-block,\n &--passed &__button:focus &__number-block {\n color: transparent;\n\n @include highContrast() {\n color: Canvas;\n }\n }\n\n &--passed &__user-icon {\n color: $colorPrimary;\n }\n\n &--passed &__button:hover &__user-icon,\n &--passed &__button:focus &__user-icon {\n color: $colorPrimaryHover;\n\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* Current */\n\n &--current &__label-block {\n @include font('heavy');\n color: $colorPrimary;\n\n @include highContrast() {\n color: SelectedItem;\n }\n\n &:hover {\n text-decoration-line: none;\n }\n }\n\n &--current &__number-block {\n background-color: $colorPrimary;\n border: solid 1px $colorPrimary;\n color: $colorWhite;\n\n @include highContrast() {\n color: SelectedItem;\n border-color: SelectedItem;\n background-color: Canvas;\n }\n\n // make line blue (see desc)\n &::before {\n display: block;\n background-color: $colorPrimary;\n z-index: -1;\n\n @include highContrast() {\n background-color: CanvasText;\n }\n }\n }\n\n &--current &__button:hover &__number-block,\n &--current &__button:focus &__number-block {\n color: $colorWhite;\n\n @include highContrast() {\n color: Highlight;\n }\n\n &::after {\n background-color: $colorPrimaryHover;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n &--current &__user-icon {\n @include highContrast() {\n color: SelectedItem;\n }\n }\n\n &--current &__button:hover &__icon,\n &--current &__button:focus &__icon,\n &--current &__button:hover &__user-icon,\n &--current &__button:focus &__user-icon {\n @include highContrast() {\n color: Highlight;\n }\n }\n\n /* Dotted */\n\n &--dotted#{&}--first &__number-block {\n margin-bottom: 0;\n\n &::after {\n display: none;\n }\n }\n\n &--dotted#{&}--first &__button {\n padding-left: 0;\n padding-right: 0;\n }\n\n // hide number block behind dotted element\n &--dotted#{&}--first &__number-block {\n position: relative;\n z-index: 0;\n top: 5px;\n width: $progressbarItemDottedSize;\n height: $progressbarItemDottedSize;\n border: none;\n background-color: transparent;\n\n // change dimensions to be still hidden\n @include mq($from: small) {\n top: 8px;\n width: $progressbarItemDottedSizeSmallUp;\n height: $progressbarItemDottedSizeSmallUp;\n }\n\n // realign white line\n &::before {\n top: 12px;\n right: 26px;\n\n @include mq($from: small) {\n top: 13px;\n right: 30px;\n }\n }\n }\n\n &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n }\n\n // first child overwrite white line (see desc) */\n &--first &__number-block {\n &::before {\n background-color: $colorWhite;\n z-index: 1;\n\n @include highContrast() {\n background-color: Canvas;\n }\n }\n }\n\n /* Disabled */\n\n // &--is-disabled &__number-block {\n // background-color: $baseBorderColor;\n // }\n\n &--is-disabled &__button {\n cursor: not-allowed;\n }\n\n &--is-disabled &__button:hover &__number-block,\n &--is-disabled &__button:focus &__number-block {\n color: $colorGrey55;\n border-color: $baseBorderColor;\n\n @include highContrast() {\n color: GrayText;\n border-color: GrayText;\n }\n\n &::after {\n display: none;\n }\n }\n\n &--is-disabled &__button:hover &__label-block,\n &--is-disabled &__button:focus &__label-block {\n color: $colorGrey55;\n\n @include highContrast() {\n color: GrayText;\n }\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Fragment,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhProgressbarItemClickEvent,\n StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n tag: \"stzh-progressbar-item\",\n styleUrl: \"stzh-progressbar-item.scss\",\n scoped: true\n})\nexport class StzhProgressbarItem {\n @Prop({ reflect: true }) label: string;\n\n @Prop({ reflect: true }) disabled: boolean = false;\n\n @Prop({ reflect: true }) first: boolean = false;\n\n @Prop({ reflect: true }) last: boolean = false;\n\n @Prop({ reflect: true }) passed: boolean = false;\n\n @Prop({ reflect: true }) current: boolean = false;\n\n @Prop({ reflect: true }) hide: boolean = false;\n\n @Prop({ reflect: true }) dotted: boolean = false;\n\n @Prop({ reflect: true }) step: number = 1;\n\n @Prop({ reflect: true }) icon: string = \"\";\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the button element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n /** Click event */\n @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n /** Dotted click event */\n @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n @Element() element: HTMLStzhProgressbarItemElement;\n\n private button: HTMLButtonElement;\n private text: HTMLElement;\n\n private onClick = (event: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-progressbar-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n });\n }\n\n private onDottedClick = (event: MouseEvent) => {\n this.stzhDottedClick.emit({\n component: \"stzh-progressbar-item\",\n originalEvent: event,\n index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\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 classes = {\n \"stzh-progressbar-item\": true,\n \"stzh-progressbar-item--first\": this.first,\n \"stzh-progressbar-item--last\": this.last,\n \"stzh-progressbar-item--passed\": this.passed,\n \"stzh-progressbar-item--current\": this.current,\n \"stzh-progressbar-item--hide\": this.hide,\n \"stzh-progressbar-item--dotted\": this.dotted,\n \"stzh-progressbar-item--has-icon\": !!this.icon,\n \"stzh-progressbar-item--is-disabled\": this.disabled\n };\n\n const dotted = (\n <button\n class=\"stzh-progressbar-item__dotted\"\n onClick={this.onDottedClick}\n >\n <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n </button>\n );\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.last && this.dotted && dotted}\n <button\n ref={(el) => (this.button = el as HTMLButtonElement)}\n class=\"stzh-progressbar-item__button\"\n aria-pressed={this.current ? \"true\" : \"false\"}\n disabled={(this.dotted && this.first) || this.disabled}\n onClick={this.onClick}\n >\n <span class=\"stzh-progressbar-item__number-block\">\n {this.icon\n ?\n <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n :\n <Fragment>\n <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n {this.passed &&\n <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n }\n </Fragment>\n }\n </span>\n <span\n ref={(el) => (this.text = el as HTMLElement)}\n class=\"stzh-progressbar-item__label-block\"\n >\n {this.label ? this.label : <slot></slot>}\n </span>\n </button>\n {this.first && this.dotted && dotted}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/esm/stzh-skiplink.entry.js CHANGED
@@ -56,7 +56,8 @@ const StzhSkiplink = class {
56
56
  }
57
57
  componentDidRender() {
58
58
  requestAnimationFrame(() => {
59
- this.link.setAttribute("s-object-id", this.analyticsId || this.label || this.text.innerText);
59
+ var _a;
60
+ (_a = this.link) === null || _a === void 0 ? void 0 : _a.setAttribute("s-object-id", this.analyticsId || this.label || this.text.innerText);
60
61
  });
61
62
  }
62
63
  render() {
package/dist/esm/stzh-skiplink.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"stzh-skiplink.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8xDAA8xD;;MCyBzyD,YAAY;;;;;IA2Cf,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;OACnB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;;MAG3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;;MAGvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,eAAe;QAC1B,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,WAAM,GAAG,CAAC,KAAiB;MACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MAEtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,eAAe;QAC1B,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;iBAnFuB,EAAE;;;;;mBAmBE,KAAK;;EAWjC,cAAc;IACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;EAGD,eAAe;IACb,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAgDD,kBAAkB;IAChB,qBAAqB,CAAC;MACpB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC9F,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAClE,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAClD,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAoB,CAAC,IACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,CACJ,CACC,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n // so the host element won't take up any space when link inside is not focuseds\n padding: 0 !important;\n margin: 0 !important;\n}\n\n.stzh-skiplink {\n @include visuallyhiddenFocusable;\n display: inline-block;\n right: 0;\n top: 0;\n white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n Component,\n Host,\n Listen,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n} from \"@stencil/core\";\n\nimport {\n StzhSkiplinkFocusEvent,\n StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n tag: \"stzh-skiplink\",\n styleUrl: \"stzh-skiplink.scss\",\n scoped: true\n})\nexport class StzhSkiplink {\n /** Label */\n @Prop() label: string = \"\";\n\n /** href for linking to e.g. id of an element to skip to */\n @Prop() href: string;\n\n /** Access key of link (usually a number e.g. 1) */\n @Prop() linkAccesskey: string;\n\n /** Link title for description e.g. how to use skiplink with access key ([ALT + 1]) */\n @Prop() linkTitle: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n /** Whether the skiplink is currently focused */\n @State() focused: boolean = false;\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n /** Blur event */\n @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n @Element() element: HTMLStzhSkiplinkElement;\n\n @Listen('focusin')\n focusinHandler() {\n this.focused = true;\n }\n\n @Listen('focusout')\n focusoutHandler() {\n this.focused = false;\n }\n\n private link: HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n // dispatch native focus event\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n\n // dispatch own focus event for updating flyingfocus position correctly\n this.stzhFocus.emit({\n component: \"stzh-skiplink\",\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\n this.stzhBlur.emit({\n component: \"stzh-skiplink\",\n originalEvent: event\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link.setAttribute(\"s-object-id\", this.analyticsId || this.label || this.text.innerText);\n });\n }\n\n render() {\n return (\n <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n class=\"stzh-skiplink\"\n href={this.href}\n accessKey={this.linkAccesskey}\n title={this.linkTitle}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <div ref={(el) => (this.text = el as HTMLDivElement)}>\n {this.label ? this.label : <slot></slot>}\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"stzh-skiplink.entry.js","mappings":";;AAAA,MAAM,eAAe,GAAG,8xDAA8xD;;MCyBzyD,YAAY;;;;;IA2Cf,mBAAc,GAAY,KAAK,CAAC;IAEhC,gBAAW,GAAG;MACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE;QACxB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;OACnB;MAED,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAA;IAEO,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;;MAG3B,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,EAAE;QACzC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;;MAGvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QAClB,SAAS,EAAE,eAAe;QAC1B,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;IAEO,WAAM,GAAG,CAAC,KAAiB;MACjC,MAAM,SAAS,GAAG,IAAI,UAAU,CAAC,MAAM,EAAE;QACvC,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;OAClB,CAAC,CAAC;MAEH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;MAEtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;QACjB,SAAS,EAAE,eAAe;QAC1B,aAAa,EAAE,KAAK;OACrB,CAAC,CAAC;KACJ,CAAA;iBAnFuB,EAAE;;;;;mBAmBE,KAAK;;EAWjC,cAAc;IACZ,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;EAGD,eAAe;IACb,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAgDD,kBAAkB;IAChB,qBAAqB,CAAC;;MACpB,MAAA,IAAI,CAAC,IAAI,0CAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC/F,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAClE,SACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAuB,CAAC,EAClD,KAAK,EAAC,eAAe,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,WAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,IAAI,GAAG,EAAoB,CAAC,IACjD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,eAAa,CACpC,CACJ,CACC,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-skiplink/stzh-skiplink.scss?tag=stzh-skiplink&encapsulation=scoped","src/components/stzh-skiplink/stzh-skiplink.tsx"],"sourcesContent":[":host(:not([focused])) {\n // reset any margin or padding (e.g. from stzh-vspace/hspace components)\n // so the host element won't take up any space when link inside is not focuseds\n padding: 0 !important;\n margin: 0 !important;\n}\n\n.stzh-skiplink {\n @include visuallyhiddenFocusable;\n display: inline-block;\n right: 0;\n top: 0;\n white-space: nowrap;\n\tpadding: space('large') space('xxlarge');\n\tborder: solid 1px $colorGrey40;\n\tborder-radius: 2px;\n\tbackground: $colorWhite;\n color: $colorPrimary;\n\ttransition: color $baseTransitionAnimationSpeed;\n text-decoration-line: none;\n\n\t&:hover {\n\t\tcolor: $colorPrimaryHover;\n\t}\n}\n","import {\n Component,\n Host,\n Listen,\n h,\n Prop,\n State,\n Event,\n EventEmitter,\n Element,\n} from \"@stencil/core\";\n\nimport {\n StzhSkiplinkFocusEvent,\n StzhSkiplinkBlurEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot for any text content\n */\n@Component({\n tag: \"stzh-skiplink\",\n styleUrl: \"stzh-skiplink.scss\",\n scoped: true\n})\nexport class StzhSkiplink {\n /** Label */\n @Prop() label: string = \"\";\n\n /** href for linking to e.g. id of an element to skip to */\n @Prop() href: string;\n\n /** Access key of link (usually a number e.g. 1) */\n @Prop() linkAccesskey: string;\n\n /** Link title for description e.g. how to use skiplink with access key ([ALT + 1]) */\n @Prop() linkTitle: string;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link element.\n * Default value will be taken from `label` prop or default slot.\n */\n @Prop() analyticsId: string;\n\n /** Whether the skiplink is currently focused */\n @State() focused: boolean = false;\n\n /** Focus event */\n @Event() stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;\n\n /** Blur event */\n @Event() stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;\n\n @Element() element: HTMLStzhSkiplinkElement;\n\n @Listen('focusin')\n focusinHandler() {\n this.focused = true;\n }\n\n @Listen('focusout')\n focusoutHandler() {\n this.focused = false;\n }\n\n private link: HTMLAnchorElement;\n private text: HTMLDivElement;\n private focusedByInput: boolean = false;\n\n private onRootFocus = () => {\n if (!this.focusedByInput) {\n this.link.focus();\n }\n\n this.focusedByInput = false;\n }\n\n private onFocus = (event: FocusEvent) => {\n this.focusedByInput = true;\n\n // dispatch native focus event\n const focusEvent = new FocusEvent(\"focus\", {\n view: window,\n bubbles: false,\n cancelable: false\n });\n\n this.element.dispatchEvent(focusEvent);\n\n // dispatch own focus event for updating flyingfocus position correctly\n this.stzhFocus.emit({\n component: \"stzh-skiplink\",\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\n this.stzhBlur.emit({\n component: \"stzh-skiplink\",\n originalEvent: event\n });\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.label || this.text.innerText);\n });\n }\n\n render() {\n return (\n <Host focused={this.focused} tabindex=\"-1\" onFocus={this.onRootFocus}>\n <a\n ref={(el) => (this.link = el as HTMLAnchorElement)}\n class=\"stzh-skiplink\"\n href={this.href}\n accessKey={this.linkAccesskey}\n title={this.linkTitle}\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n >\n <div ref={(el) => (this.text = el as HTMLDivElement)}>\n {this.label ? this.label : <slot></slot>}\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}