kemet-ui 3.0.1 → 3.1.0

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 (251) hide show
  1. package/custom-elements.json +995 -220
  2. package/dist/components/kemet-accordion/docs/stories.d.ts +12 -0
  3. package/dist/components/kemet-accordion/docs/stories.js +99 -0
  4. package/dist/components/kemet-accordion/docs/stories.js.map +1 -0
  5. package/dist/components/kemet-accordion/kemet-accordion-panel.js.map +1 -1
  6. package/dist/components/kemet-accordion/kemet-accordion.js.map +1 -1
  7. package/dist/components/kemet-accordion/spec.d.ts +2 -0
  8. package/dist/components/kemet-accordion/spec.js +132 -0
  9. package/dist/components/kemet-accordion/spec.js.map +1 -0
  10. package/dist/components/kemet-alert/docs/stories.d.ts +1 -1
  11. package/dist/components/kemet-alert/docs/stories.js +20 -19
  12. package/dist/components/kemet-alert/docs/stories.js.map +1 -1
  13. package/dist/components/kemet-alert/kemet-alert.js.map +1 -1
  14. package/dist/components/kemet-alert/spec.d.ts +1 -0
  15. package/dist/components/kemet-alert/spec.js +35 -0
  16. package/dist/components/kemet-alert/spec.js.map +1 -0
  17. package/dist/components/kemet-alert/types.d.ts +1 -1
  18. package/dist/components/kemet-avatar/docs/stories.d.ts +1 -1
  19. package/dist/components/kemet-avatar/docs/stories.js.map +1 -1
  20. package/dist/components/kemet-avatar/kemet-avatar.js.map +1 -1
  21. package/dist/components/kemet-avatar/kemet-avatars.js.map +1 -1
  22. package/dist/components/kemet-avatar/spec.d.ts +1 -0
  23. package/dist/components/kemet-avatar/spec.js +26 -0
  24. package/dist/components/kemet-avatar/spec.js.map +1 -0
  25. package/dist/components/kemet-badge/docs/stories.d.ts +1 -1
  26. package/dist/components/kemet-badge/kemet-badge.js.map +1 -1
  27. package/dist/components/kemet-badge/spec.d.ts +1 -0
  28. package/dist/components/kemet-badge/spec.js +21 -0
  29. package/dist/components/kemet-badge/spec.js.map +1 -0
  30. package/dist/components/kemet-badge/types.d.ts +1 -1
  31. package/dist/components/kemet-button/docs/stories.d.ts +1 -1
  32. package/dist/components/kemet-button/kemet-button.js +9 -7
  33. package/dist/components/kemet-button/kemet-button.js.map +1 -1
  34. package/dist/components/kemet-button/spec.d.ts +1 -0
  35. package/dist/components/kemet-button/spec.js +49 -0
  36. package/dist/components/kemet-button/spec.js.map +1 -0
  37. package/dist/components/kemet-button/types.d.ts +1 -1
  38. package/dist/components/kemet-card/docs/stories.d.ts +1 -1
  39. package/dist/components/kemet-card/docs/stories.js.map +1 -1
  40. package/dist/components/kemet-card/kemet-card.js.map +1 -1
  41. package/dist/components/kemet-card/spec.d.ts +1 -0
  42. package/dist/components/kemet-card/spec.js +31 -0
  43. package/dist/components/kemet-card/spec.js.map +1 -0
  44. package/dist/components/kemet-carousel/docs/stories.d.ts +1 -1
  45. package/dist/components/kemet-carousel/docs/stories.js.map +1 -1
  46. package/dist/components/kemet-carousel/kemet-carousel-current.js.map +1 -1
  47. package/dist/components/kemet-carousel/kemet-carousel-first.d.ts +1 -0
  48. package/dist/components/kemet-carousel/kemet-carousel-first.js +11 -4
  49. package/dist/components/kemet-carousel/kemet-carousel-first.js.map +1 -1
  50. package/dist/components/kemet-carousel/kemet-carousel-last.d.ts +1 -0
  51. package/dist/components/kemet-carousel/kemet-carousel-last.js +11 -4
  52. package/dist/components/kemet-carousel/kemet-carousel-last.js.map +1 -1
  53. package/dist/components/kemet-carousel/kemet-carousel-link.d.ts +1 -0
  54. package/dist/components/kemet-carousel/kemet-carousel-link.js +14 -4
  55. package/dist/components/kemet-carousel/kemet-carousel-link.js.map +1 -1
  56. package/dist/components/kemet-carousel/kemet-carousel-next.d.ts +1 -0
  57. package/dist/components/kemet-carousel/kemet-carousel-next.js +11 -4
  58. package/dist/components/kemet-carousel/kemet-carousel-next.js.map +1 -1
  59. package/dist/components/kemet-carousel/kemet-carousel-prev.d.ts +1 -0
  60. package/dist/components/kemet-carousel/kemet-carousel-prev.js +11 -4
  61. package/dist/components/kemet-carousel/kemet-carousel-prev.js.map +1 -1
  62. package/dist/components/kemet-carousel/kemet-carousel-slide.js +5 -5
  63. package/dist/components/kemet-carousel/kemet-carousel-slide.js.map +1 -1
  64. package/dist/components/kemet-carousel/kemet-carousel-total.js.map +1 -1
  65. package/dist/components/kemet-carousel/kemet-carousel.js.map +1 -1
  66. package/dist/components/kemet-carousel/spec.d.ts +10 -0
  67. package/dist/components/kemet-carousel/spec.js +168 -0
  68. package/dist/components/kemet-carousel/spec.js.map +1 -0
  69. package/dist/components/kemet-checkbox/docs/stories.d.ts +1 -1
  70. package/dist/components/kemet-checkbox/kemet-checkbox.js.map +1 -1
  71. package/dist/components/kemet-checkbox/spec.d.ts +1 -0
  72. package/dist/components/kemet-checkbox/spec.js +33 -0
  73. package/dist/components/kemet-checkbox/spec.js.map +1 -0
  74. package/dist/components/kemet-checkbox/types.d.ts +1 -1
  75. package/dist/components/kemet-combo/docs/stories.d.ts +1 -1
  76. package/dist/components/kemet-combo/kemet-combo.d.ts +1 -0
  77. package/dist/components/kemet-combo/kemet-combo.js +5 -0
  78. package/dist/components/kemet-combo/kemet-combo.js.map +1 -1
  79. package/dist/components/kemet-combo/spec.d.ts +3 -0
  80. package/dist/components/kemet-combo/spec.js +46 -0
  81. package/dist/components/kemet-combo/spec.js.map +1 -0
  82. package/dist/components/kemet-count/docs/stories.d.ts +1 -1
  83. package/dist/components/kemet-count/kemet-count.js.map +1 -1
  84. package/dist/components/kemet-count/spec.d.ts +4 -0
  85. package/dist/components/kemet-count/spec.js +45 -0
  86. package/dist/components/kemet-count/spec.js.map +1 -0
  87. package/dist/components/kemet-draggable/docs/stories.d.ts +1 -1
  88. package/dist/components/kemet-draggable/kemet-draggable.js.map +1 -1
  89. package/dist/components/kemet-draggable/spec.d.ts +1 -0
  90. package/dist/components/kemet-draggable/spec.js +30 -0
  91. package/dist/components/kemet-draggable/spec.js.map +1 -0
  92. package/dist/components/kemet-drawer/docs/stories.d.ts +1 -1
  93. package/dist/components/kemet-drawer/kemet-drawer.js.map +1 -1
  94. package/dist/components/kemet-drawer/spec.d.ts +1 -0
  95. package/dist/components/kemet-drawer/spec.js +21 -0
  96. package/dist/components/kemet-drawer/spec.js.map +1 -0
  97. package/dist/components/kemet-drawer/types.d.ts +2 -2
  98. package/dist/components/kemet-fab/docs/stories.d.ts +1 -1
  99. package/dist/components/kemet-fab/kemet-fab.js +3 -9
  100. package/dist/components/kemet-fab/kemet-fab.js.map +1 -1
  101. package/dist/components/kemet-fab/spec.d.ts +2 -0
  102. package/dist/components/kemet-fab/spec.js +43 -0
  103. package/dist/components/kemet-fab/spec.js.map +1 -0
  104. package/dist/components/kemet-field/docs/stories.d.ts +1 -1
  105. package/dist/components/kemet-field/kemet-field.js.map +1 -1
  106. package/dist/components/kemet-field/spec.d.ts +2 -0
  107. package/dist/components/kemet-field/spec.js +38 -0
  108. package/dist/components/kemet-field/spec.js.map +1 -0
  109. package/dist/components/kemet-field/types.d.ts +1 -1
  110. package/dist/components/kemet-flipcard/docs/stories.d.ts +1 -1
  111. package/dist/components/kemet-flipcard/kemet-flipcard-trigger.js.map +1 -1
  112. package/dist/components/kemet-flipcard/kemet-flipcard.js.map +1 -1
  113. package/dist/components/kemet-flipcard/spec.d.ts +3 -0
  114. package/dist/components/kemet-flipcard/spec.js +38 -0
  115. package/dist/components/kemet-flipcard/spec.js.map +1 -0
  116. package/dist/components/kemet-icon/docs/stories.d.ts +1 -1
  117. package/dist/components/kemet-icon/kemet-icon.js +1 -1
  118. package/dist/components/kemet-icon/kemet-icon.js.map +1 -1
  119. package/dist/components/kemet-icon/spec.d.ts +1 -0
  120. package/dist/components/kemet-icon/spec.js +69 -0
  121. package/dist/components/kemet-icon/spec.js.map +1 -0
  122. package/dist/components/kemet-input/docs/stories.d.ts +1 -1
  123. package/dist/components/kemet-input/kemet-input.js +1 -1
  124. package/dist/components/kemet-input/kemet-input.js.map +1 -1
  125. package/dist/components/kemet-input/spec.d.ts +1 -0
  126. package/dist/components/kemet-input/spec.js +83 -0
  127. package/dist/components/kemet-input/spec.js.map +1 -0
  128. package/dist/components/kemet-input/types.d.ts +3 -3
  129. package/dist/components/kemet-modal/docs/stories.d.ts +1 -1
  130. package/dist/components/kemet-modal/docs/stories.js.map +1 -1
  131. package/dist/components/kemet-modal/kemet-modal-close.js.map +1 -1
  132. package/dist/components/kemet-modal/kemet-modal.js.map +1 -1
  133. package/dist/components/kemet-modal/types.d.ts +1 -1
  134. package/dist/components/kemet-multi-input/docs/stories.d.ts +8 -0
  135. package/dist/components/kemet-multi-input/docs/stories.js +33 -0
  136. package/dist/components/kemet-multi-input/docs/stories.js.map +1 -0
  137. package/dist/components/kemet-multi-input/kemet-multi-input.d.ts +116 -0
  138. package/dist/components/kemet-multi-input/kemet-multi-input.js +193 -0
  139. package/dist/components/kemet-multi-input/kemet-multi-input.js.map +1 -0
  140. package/dist/components/kemet-multi-input/styles.d.ts +1 -0
  141. package/dist/components/kemet-multi-input/styles.js +87 -0
  142. package/dist/components/kemet-multi-input/styles.js.map +1 -0
  143. package/dist/components/kemet-multi-input/types.d.ts +5 -0
  144. package/dist/components/kemet-multi-input/types.js +2 -0
  145. package/dist/components/kemet-multi-input/types.js.map +1 -0
  146. package/dist/components/kemet-password/docs/stories.d.ts +1 -1
  147. package/dist/components/kemet-password/kemet-password.js.map +1 -1
  148. package/dist/components/kemet-password/types.d.ts +1 -1
  149. package/dist/components/kemet-popper/docs/stories.d.ts +1 -1
  150. package/dist/components/kemet-popper/kemet-popper-close.js.map +1 -1
  151. package/dist/components/kemet-popper/kemet-popper.js.map +1 -1
  152. package/dist/components/kemet-popper/types.d.ts +3 -3
  153. package/dist/components/kemet-radio/docs/stories.d.ts +1 -1
  154. package/dist/components/kemet-radio/kemet-radio.js.map +1 -1
  155. package/dist/components/kemet-radio/kemet-radios.js.map +1 -1
  156. package/dist/components/kemet-radio/spec.d.ts +3 -0
  157. package/dist/components/kemet-radio/spec.js +67 -0
  158. package/dist/components/kemet-radio/spec.js.map +1 -0
  159. package/dist/components/kemet-radio/types.d.ts +2 -2
  160. package/dist/components/kemet-rotator/docs/stories.d.ts +1 -1
  161. package/dist/components/kemet-rotator/kemet-rotator.js.map +1 -1
  162. package/dist/components/kemet-rotator/types.d.ts +1 -1
  163. package/dist/components/kemet-scroll-link/docs/stories.d.ts +1 -1
  164. package/dist/components/kemet-scroll-link/kemet-scroll-link.js.map +1 -1
  165. package/dist/components/kemet-scroll-nav/docs/stories.d.ts +1 -1
  166. package/dist/components/kemet-scroll-nav/kemet-scroll-nav.js.map +1 -1
  167. package/dist/components/kemet-scroll-nav/types.d.ts +1 -1
  168. package/dist/components/kemet-scroll-snap/docs/stories.d.ts +1 -1
  169. package/dist/components/kemet-scroll-snap/docs/stories.js.map +1 -1
  170. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map +1 -1
  171. package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map +1 -1
  172. package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js.map +1 -1
  173. package/dist/components/kemet-scroll-snap/types.d.ts +2 -2
  174. package/dist/components/kemet-select/docs/stories.d.ts +1 -1
  175. package/dist/components/kemet-select/kemet-option.js.map +1 -1
  176. package/dist/components/kemet-select/kemet-select.js.map +1 -1
  177. package/dist/components/kemet-select/spec.d.ts +3 -0
  178. package/dist/components/kemet-select/spec.js +53 -0
  179. package/dist/components/kemet-select/spec.js.map +1 -0
  180. package/dist/components/kemet-sortable/docs/stories.d.ts +1 -1
  181. package/dist/components/kemet-sortable/docs/stories.js.map +1 -1
  182. package/dist/components/kemet-sortable/kemet-sortable-item.js.map +1 -1
  183. package/dist/components/kemet-sortable/kemet-sortable.js.map +1 -1
  184. package/dist/components/kemet-svgs/docs/stories.d.ts +1 -1
  185. package/dist/components/kemet-svgs/docs/stories.js.map +1 -1
  186. package/dist/components/kemet-svgs/kemet-svg.js.map +1 -1
  187. package/dist/components/kemet-svgs/kemet-svgs.js.map +1 -1
  188. package/dist/components/kemet-tabs/docs/stories.d.ts +1 -1
  189. package/dist/components/kemet-tabs/docs/stories.js.map +1 -1
  190. package/dist/components/kemet-tabs/kemet-tab-panel.js.map +1 -1
  191. package/dist/components/kemet-tabs/kemet-tab.js.map +1 -1
  192. package/dist/components/kemet-tabs/kemet-tabs.js.map +1 -1
  193. package/dist/components/kemet-tabs/types.d.ts +3 -3
  194. package/dist/components/kemet-textarea/docs/stories.d.ts +1 -1
  195. package/dist/components/kemet-textarea/kemet-textarea.js.map +1 -1
  196. package/dist/components/kemet-textarea/spec.d.ts +3 -0
  197. package/dist/components/kemet-textarea/spec.js +69 -0
  198. package/dist/components/kemet-textarea/spec.js.map +1 -0
  199. package/dist/components/kemet-textarea/types.d.ts +1 -1
  200. package/dist/components/kemet-timer/docs/stories.d.ts +10 -0
  201. package/dist/components/kemet-timer/docs/stories.js +40 -0
  202. package/dist/components/kemet-timer/docs/stories.js.map +1 -0
  203. package/dist/components/kemet-timer/kemet-timer-display.d.ts +25 -0
  204. package/dist/components/kemet-timer/kemet-timer-display.js +65 -0
  205. package/dist/components/kemet-timer/kemet-timer-display.js.map +1 -0
  206. package/dist/components/kemet-timer/kemet-timer.d.ts +36 -0
  207. package/dist/components/kemet-timer/kemet-timer.js +103 -0
  208. package/dist/components/kemet-timer/kemet-timer.js.map +1 -0
  209. package/dist/components/kemet-timer/styles.d.ts +2 -0
  210. package/dist/components/kemet-timer/styles.js +12 -0
  211. package/dist/components/kemet-timer/styles.js.map +1 -0
  212. package/dist/components/kemet-timer/types.d.ts +1 -0
  213. package/dist/components/kemet-timer/types.js +2 -0
  214. package/dist/components/kemet-timer/types.js.map +1 -0
  215. package/dist/components/kemet-toggle/docs/stories.d.ts +1 -1
  216. package/dist/components/kemet-toggle/kemet-toggle.js.map +1 -1
  217. package/dist/components/kemet-toggle/spec.d.ts +1 -0
  218. package/dist/components/kemet-toggle/spec.js +46 -0
  219. package/dist/components/kemet-toggle/spec.js.map +1 -0
  220. package/dist/components/kemet-tooltip/docs/stories.d.ts +1 -1
  221. package/dist/components/kemet-tooltip/kemet-tooltip.js.map +1 -1
  222. package/dist/components/kemet-tooltip/types.d.ts +3 -3
  223. package/dist/components/kemet-tracker/docs/stories.d.ts +1 -1
  224. package/dist/components/kemet-tracker/docs/stories.js.map +1 -1
  225. package/dist/components/kemet-tracker/kemet-tracker-step.js.map +1 -1
  226. package/dist/components/kemet-tracker/kemet-tracker.js.map +1 -1
  227. package/dist/components/kemet-upload/docs/stories.d.ts +1 -1
  228. package/dist/components/kemet-upload/kemet-upload-file.js.map +1 -1
  229. package/dist/components/kemet-upload/kemet-upload.js.map +1 -1
  230. package/dist/kemet-components.bundle.js +16 -32
  231. package/dist/kemet-components.bundle.js.map +1 -1
  232. package/dist/kemet-components.cjs +3721 -3263
  233. package/dist/kemet-components.js +3721 -3263
  234. package/dist/styles/kemet.base.css +24 -2
  235. package/dist/styles/kemet.base.css.map +1 -1
  236. package/dist/styles/kemet.core.css +266 -2
  237. package/dist/styles/kemet.core.css.map +1 -1
  238. package/dist/styles/shared/_config.scss +25 -1
  239. package/dist/tsconfig.tsbuildinfo +1 -1
  240. package/dist/utilities/controllers/forms.js +16 -18
  241. package/dist/utilities/controllers/forms.js.map +1 -1
  242. package/dist/utilities/controllers/forms.spec.d.ts +2 -0
  243. package/dist/utilities/controllers/forms.spec.js +36 -0
  244. package/dist/utilities/controllers/forms.spec.js.map +1 -0
  245. package/dist/utilities/misc/drag.d.ts +6 -0
  246. package/dist/utilities/misc/drag.js +63 -0
  247. package/dist/utilities/misc/drag.js.map +1 -0
  248. package/package.json +46 -33
  249. package/dist/components/kemet-accordion/stories.d.ts +0 -12
  250. package/dist/components/kemet-accordion/stories.js +0 -47
  251. package/dist/components/kemet-accordion/stories.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-svgs/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AAEvB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE;QACJ,GAAG,EAAE,QAAQ;KACd;IACD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC;SACpC;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,EAAE;QACzB,IAAI,OAAO,CAAC;QAEZ,QAAQ,GAAG,EAAE;YACX,KAAK,QAAQ;gBAAE,OAAO,GAAG,aAAa,CAAC;gBACrC,MAAM;YACR,KAAK,KAAK;gBAAE,OAAO,GAAG,aAAa,CAAC;gBAClC,MAAM;YACR,KAAK,OAAO;gBAAE,OAAO,GAAG,iBAAiB,CAAC;gBACxC,MAAM;YACR,OAAO,CAAC,CAAC,OAAO,GAAG,aAAa,CAAC;SAClC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;iCAuBoB,IAAI,CAAC,GAAG,cAAc,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;GACxE,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-svg';\nimport '../kemet-svgs';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / SVGs',\n component: 'kemet-svgs',\n args: {\n svg: 'anubis',\n },\n argTypes: {\n svg: {\n control: { type: 'radio' },\n options: ['anubis', 'eye', 'horus'],\n },\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n const getViewBox = (svg) => {\n let viewBox;\n\n switch (svg) {\n case 'anubis': viewBox = '0 0 512 512';\n break;\n case 'eye': viewBox = '0 0 706 500';\n break;\n case 'horus': viewBox = '0 0 1359.5 1027';\n break;\n default: viewBox = '0 0 512 512';\n }\n\n return viewBox;\n };\n\n return html`\n <kemet-svgs set=\"svgs\">\n <svg>\n <defs>\n <g id=\"anubis\">\n <path d=\"M201 5.5c-1.5 1.8-.9 5.6 2.7 17.5 2.5 8.4 2.7 8.5 12 17.4 32.9 31.1 53.3 67.7 56.8 101.9l.7 6.8 6.6 3c3.6 1.6 6.7 2.8 6.9 2.6.5-.5-7-26.4-11-38.2-6-17.4-10.6-28.5-19.2-46-12.9-26.2-26.8-46.2-41.6-59.9-7.4-6.9-11.3-8.3-13.9-5.1z\"></path><path d=\"M168.5 17c-.3.6 5.9 20.5 13.9 44.3 20.3 60.4 26.1 82 27.3 100.8.5 8.6.3 10.2-1.6 14-5 10.2-14.4 17.3-40.8 30.8-15.4 7.8-21.1 11.2-23.5 14.1-1.8 2.1-7.3 10.5-12.3 18.6-12.6 20.7-22.5 34.4-31.9 44.2-6.5 6.7-12.2 11.1-28.1 21.7-31.3 20.6-41.1 29.4-40.3 36.2.2 2.2 1.8 3.8 7.3 7.5C48.6 356.1 61 362 65 362c2 0 8.8-2.3 15.5-5.1 28.4-12.1 63.7-25 75.5-27.5 5.6-1.2 8.3-1.1 20 .2 15.1 1.8 27.1 1.4 34.2-1.1 5.3-1.9 11.8-7.6 14.5-12.9l1.8-3.4 6 8.9c3.3 4.8 6.4 8.7 6.9 8.6.5-.2 1.5-1.2 2.2-2.3 1.2-1.7.5-3.7-6-16.6-10.1-20-12.1-26.2-10.7-33 .7-2.9 3.4-9.4 6.1-14.3 11.1-20 16.2-33.1 23-59.7 9.8-38.7 10.5-56.5 2.9-81.6-6.8-22.5-29.7-55-60.9-86.3-15.5-15.5-25.4-22.3-27.5-18.9zm58 174c0 3-31.3 27.8-41.5 33-3 1.5-8.2 3.5-11.4 4.5-13.1 3.7-21.8 10.1-26.5 19.4-2.4 4.5-3.8 5.8-5.3 4.3-2.5-2.5 8.6-17 16.8-21.8 2.3-1.4 8.8-4 14.4-5.8 12.8-4.3 27.6-14.2 47.5-32 4-3.5 6-4.1 6-1.6zm-3.1 14.6c4.7 1.8-2 8-29.2 26.5-11.1 7.6-11.6 8.1-14.9 14.9-4.6 9.4-8.3 11.9-19 12.9-7 .6-8.5 1.1-13 4.4-5.6 4.1-6.5 4.4-8.3 2.2-1-1.2-.7-1.9 1.6-4 1.6-1.5 4.1-3.4 5.6-4.3 1.5-.9 3.3-3 4-4.6 3.2-7.8 13-14.8 25.3-18 6.4-1.7 14.1-6.5 34-21.5 6.6-5 12.1-9.1 12.2-9.1.1 0 .8.3 1.7.6z\"></path><path d=\"M273.2 175.2c-5 36.6-15.3 69-27.4 86.6-3.6 5.3-7.9 15.5-8 19.1-.1 1.5 2.1 7.6 4.7 13.6 9.6 22.1 11.2 29.3 7.6 35.1-2.1 3.4-7.4 7.8-10.6 8.8-1.4.4-2.7 2.7-4.3 7.3-3.5 10.1-12.2 27.8-17.6 36.1-2.7 4-7.7 10.4-11.1 14.1-12.1 13.2-24.6 41-41.6 92.1l-5.8 17.5 17.7.3c9.7.1 18.1.1 18.8-.2.6-.2 1.4-4.6 1.8-10.8 2.3-35.4 11.5-71.4 22.3-87.1 6.9-10 37.7-27.5 72.3-41.2 36.2-14.2 73.2-23.6 111-28.1 15.8-1.8 55.2-2.5 67.7-1.1l7.2.8-1.1-3.2c-2.2-6.4-11.5-23.6-18.1-33.6-27-40.9-69.6-79.1-125.2-112.3-11.7-7-55.8-30-57.5-30-.3 0-1.6 7.3-2.8 16.2zm28.8 23.4c54.2 30 97.6 68.3 126.6 111.9 4 6.1 7.4 11.5 7.4 11.8 0 .4-3.4.7-7.5.7h-7.4l-5-7.3c-26.3-39-68.4-75.9-119.1-104.6-6.9-3.8-13-7.4-13.6-7.8-1.5-1 .4-13.3 2-13.3.6 0 8.1 3.9 16.6 8.6zm-11.5 31.7c34.3 22.8 63.8 50.8 89.8 85.4 4.2 5.6 7.7 10.4 7.7 10.6 0 .3-3.2 1.1-7.1 1.7-6.9 1.2-7.1 1.2-8.7-1.1-4.1-5.9-16.2-20.4-25.5-30.7-17.3-19.2-41.7-40.1-63.6-54.7l-9.9-6.6 2.1-6.4c2.4-7.4 1.1-7.6 15.2 1.8zm-11.9 36.4c14.8 12.3 34.8 32 45.1 44.3 8.1 9.8 18.5 24.1 17.9 24.7-.2.2-3.1 1.2-6.5 2.3l-6 1.8-6.6-8.8c-13.4-18-35.4-40.3-56.4-57.3l-7.8-6.3 3.1-5.7c1.7-3.1 3.4-5.7 3.7-5.7.3 0 6.4 4.8 13.5 10.7zm-5.6 50.5c8.2 12.2 19.5 33.7 18.2 34.8-.9.8-11.5 5.1-11.7 4.8 0-.2-1-2.3-2-4.7-1.1-2.4-4.3-8.7-7.2-13.9-4.8-8.7-5.3-10.2-5.3-15.8 0-4.3-.9-9-3-15.1l-2.9-8.8 2.9 3.5c1.7 1.9 6.6 8.8 11 15.2zm-20.6 38.5c1.1 13.6 1.4 12.8-5.7 16.8-3.5 1.9-6.7 3.5-7 3.5-1.6 0-.5-5.2 2.7-12.6 1.9-4.3 4.1-9.6 5-11.7 2.5-6.1 4.2-4.8 5 4z\"></path><path d=\"M442.4 354.8c-.6.4-2.3 4.5-3.7 9.2-11.4 37.3-41.5 70.3-83.3 91.3-33.7 16.9-69.6 25.6-128.9 31.3l-5.1.5.8 9.6c.4 5.3.9 9.7 1 9.9.8.7 22.9 3.4 33.3 3.9 29.8 1.7 68.8-4.9 98.2-16.6 38.7-15.3 78.3-45 99.6-74.6 13.9-19.4 23.7-44.8 23.7-61.4V354h-17.2c-9.5 0-17.8.4-18.4.8z\"></path><path d=\"M414.5 356.8c-7.5.7-33 4.5-42 6.3-46.6 9.3-85.6 24.5-117.3 45.6-14.9 9.9-20.8 15.8-25.5 25.4-4.1 8.3-7.7 21.1-7.7 27.1v3.8h4.8c13 0 47.6-5.3 68.2-10.5 24.4-6.1 49.1-16.1 65.9-26.6 24.5-15.4 43.6-36.6 53.3-59.1 4.5-10.5 4.6-12.4.3-12z\"></path>\n </g>\n <g id=\"eye\">\n <defs id=\"defs2214\"/>\n <path d=\"M 482.47122,483.65668 C 482.09821,481.16923 482.00349,468.19138 482.26073,454.81702 C 482.85598,423.86986 485.74029,409.33575 508.02304,325 C 517.97202,287.34512 518.96876,261.67667 510.62952,257.87706 C 503.22084,254.50144 495.51948,258.76554 483.33874,272.98748 C 444.87758,317.89379 384.416,371.63828 336.592,403.43111 C 234.38064,471.38003 125.75165,495.91654 61.5,465.56738 C 14.135995,443.19507 -9.4559604,386.23292 7.5301438,335.2586 C 23.728797,286.64738 86.775557,268.60992 123.4217,302.10244 C 141.67589,318.78573 137.19751,348.25122 114.70406,359.46018 C 96.526568,368.51841 73.570329,349.94535 79.65551,331.10368 C 81.787859,324.50125 81.436951,324.28716 72.953651,327.0149 C 23.293219,342.98286 33.831342,415.54173 88.682829,435.31611 C 152.06988,458.16762 251.76781,426.54376 351.5,351.95135 C 391.05504,322.36706 438.67015,273.24845 433.13368,267.73999 C 431.50743,266.12196 409.19769,266.53511 388,268.57582 C 325.73643,274.56995 251.40446,262.42665 164,231.98188 C 152.725,228.05456 136.525,222.43341 128,219.49042 C 109.63237,213.14958 75.226122,204.4179 51.5,200.07611 C 42.15,198.3651 33.478754,196.73725 32.230564,196.45866 L 29.961129,195.95214 L 30.230564,174.3183 L 30.5,152.68446 L 39,150.74391 C 72.50072,143.09568 128.76294,128.99955 175,116.66999 C 278.32991,89.11608 289.32495,86.38305 310.5,82.98883 C 383.04703,71.36 422.7219,78.62443 574.31118,131.29245 C 602.82103,141.19788 634.45188,143.67699 662.03604,138.16802 C 668.38086,136.90086 675.54332,136.00717 677.95262,136.18205 L 682.33316,136.5 L 691.61566,157 C 696.72104,168.275 700.92108,177.75395 700.94908,178.06434 C 700.97709,178.37472 694.8125,179.42018 687.25,180.38758 C 628.89838,187.85196 595.69886,201.31776 576.89325,225.14854 C 562.86714,242.92267 559.1993,250.80358 556.38741,269.20848 C 552.05483,297.56695 558.59871,307.69047 590.22312,321.55294 C 598.33549,325.10898 598.36533,325.2104 591.75,326.74292 C 566.33045,332.63166 554.58404,346.42334 542.01437,385.13842 C 521.75002,447.55347 501.97616,483.58514 485.82472,487.52648 C 483.28485,488.14627 483.11511,487.95039 482.47122,483.65668 z M 424.2218,225.63181 C 474.97905,220.35891 533.69333,201.01428 568.3406,178.14891 L 572.18119,175.61432 L 564.6736,171.83682 C 544.62325,161.74834 515.9203,151.09439 477.85766,139.61248 C 468.37374,136.75158 435.02218,129.50425 417.73035,126.54674 L 413.96069,125.902 L 414.73035,130.201 C 421.33896,167.11429 399.13266,191.38005 360.2101,189.77757 C 325.46755,188.34718 305.90676,167.5813 310.49936,137.00427 C 311.3496,131.34347 311.86562,126.53229 311.64607,126.31274 C 310.91615,125.58281 254.01865,138.94051 216.75536,148.59001 C 184.37601,156.9748 143.86144,166.87973 118,172.73355 L 109.5,174.65755 L 123,178.84822 C 130.425,181.15309 154.725,189.0744 177,196.45112 C 234.90395,215.62695 267.37147,222.92242 312.89555,226.98694 C 328.35761,228.36743 407.1171,227.40873 424.2218,225.63181 z M 35.354897,110.38623 C 35.716536,99.99881 36.572127,87.9 37.256211,83.5 L 38.5,75.5 L 56.5,75.47117 C 89.061602,75.41901 105.13604,71.29991 198.5,39.083437 C 273.3851,13.243341 349.47211,3.065576 403.05014,11.721825 C 448.7358,19.102957 499.55051,32.310146 558,51.99465 C 615.37673,71.31787 646.14746,74.42614 681.5,64.46987 C 684.63769,63.58621 703.5919,96.68847 701.36023,99.15444 C 699.55859,101.14524 692.34416,104.11236 682,107.11686 C 671.59412,110.13927 628.62391,111.07697 614.24412,108.59543 C 603.42274,106.72796 561.07836,94.69295 532.5,85.36232 C 458.57731,61.22709 370.02847,49.18587 319,56.32973 C 273.61484,62.68354 255.87256,67.04951 198.71398,85.92932 C 131.51605,108.12519 72.656502,123.90207 39.598686,128.57904 L 34.697371,129.27247 L 35.354897,110.38623 z\" />\n </g>\n <g id=\"horus\">\n <style type=\"text/css\">.st0{fill:currentColor;} .st2{fill:currentColor;} .st3{fill:var(--kemet-color-white-to-black);}</style>\n <path class=\"st0\" d=\"M1049.5,304.2c0,0,167.6,67.4,115.3,92.3C1112.5,421.5,1055.4,406.6,1049.5,304.2z M708.9,21.3 c0,0-18,79.6,26.9,155.4c0,0-222.2-27-446.9,36c0,0-28.3,60.4,5.1,133.6c0,0-195.3,74.5-289,170.8c0,0,219.6,41.1,197.9,258.2 c0,0,232.5-33.4,521.5,251.7c88.6-475.4,426.2-668.3,625.5-450.8c0,0,60.4-133.6-122-231.2c0,0-19.3-93.7-187.5-132.3 c0,0-66.8-28.3-100.2-98.9c0,0-10.3,12.9-14.2,51.4C925.9,165.2,764.2,36.7,708.9,21.3L708.9,21.3z\"/>\n <path class=\"st1\" d=\"M509.8,4.6c0,0-61.6,77.1-77,129.6L737.2,345l-1.5,1.3L409.6,192.2c0,0-18,27-29.6,111.7 c0,0,186.5,81.4,326.4,96.1c-0.2,1-0.3,2.1-0.5,3.1c-38,2.1-138.1,2.7-331.1-27.3c0,0-16.7,107.9,27,178.5 c0,0,199.8-88.8,306.2-114.8c0.4,1.4,0.8,2.9,1.3,4.3C662.1,470.7,495.9,567.1,430,627.5c0,0,30.8,89.9,97.7,128.5 c0,0,147.5-222.4,199.3-280l2.3,2.5c-18.1,32.4-162,289.5-164.4,317.3c0,0,78.4,69.4,163.1,92.5c0,0-39.4-246.4,63.8-379.3 c2.3,0.2,4.5,0.3,6.8,0.3c22.4,0,44.1-8.1,61.1-22.8c8.7-6.7,15.8-15.3,20.7-25.1c16.7-29.8,15.9-66.3-2.1-95.3 c-11.2-22-32.1-37.3-56.4-41.3c-17.4-4.6-35.9-4-52.9,1.9C767.9,325.8,549.5,127.6,509.8,4.6L509.8,4.6z\"/>\n <path class=\"st2\" d=\"M1159.9,487.1c0,0-198-10.1-346.9,64.4c0,0-49.1,101.7-34.5,185.3C778.4,736.9,938.2,510.7,1159.9,487.1z M1164.4,367.2c0,0-56.3-67.2-137.1-101.7c0,0,19.1,56.3,26.4,74.5l1-30.6C1054.6,309.3,1108,324.5,1164.4,367.2z\"/>\n <g>\n <path class=\"st3\" d=\"M769.1,326.8L475.5,52.1l34.3-47.5C509.8,4.6,516.6,58.2,769.1,326.8z M735.6,346.5l-326-154.3 c-8.9,17-15.1,35.4-18.3,54.3L735.6,346.5z M706,403.2c0,0-128.4,7.1-331.1-27.3c0,0-8.4,66.4,0.2,100L706,403.2z M709.5,443.9 c0,0-210.2,117.8-279.3,183.7c0,0,15.3,39.8,27.6,56.6L709.5,443.9z M729.4,478.5c0,0-122.2,215.4-164.4,317.3 c0,0,33,27.9,59.4,44.1L729.4,478.5z M813.2,340.1C856,363.2,872,416.6,849,459.4c-8.2,15.2-20.6,27.6-35.8,35.8 c42.8-4,74.3-42,70.2-84.8C879.9,373.1,850.4,343.6,813.2,340.1z\"/>\n </g>\n </g>\n </defs>\n </svg>\n </kemet-svgs>\n <kemet-svg set=\"svgs\" svg=\"${args.svg}\" viewbox=\"${getViewBox(args.svg)}\"></kemet-svg>\n `;\n}\n\nexport const Standard: Story = {\n render: args => Template(args),\n};\n"]}
1
+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-svgs/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AAEvB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;IACvB,IAAI,EAAE;QACJ,GAAG,EAAE,QAAQ;KACd;IACD,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,CAAC;SACpC;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,EAAE;QACzB,IAAI,OAAO,CAAC;QAEZ,QAAQ,GAAG,EAAE,CAAC;YACZ,KAAK,QAAQ;gBAAE,OAAO,GAAG,aAAa,CAAC;gBACrC,MAAM;YACR,KAAK,KAAK;gBAAE,OAAO,GAAG,aAAa,CAAC;gBAClC,MAAM;YACR,KAAK,OAAO;gBAAE,OAAO,GAAG,iBAAiB,CAAC;gBACxC,MAAM;YACR,OAAO,CAAC,CAAC,OAAO,GAAG,aAAa,CAAC;QACnC,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;iCAuBoB,IAAI,CAAC,GAAG,cAAc,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;GACxE,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-svg';\nimport '../kemet-svgs';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n title: 'Components / SVGs',\n component: 'kemet-svgs',\n args: {\n svg: 'anubis',\n },\n argTypes: {\n svg: {\n control: { type: 'radio' },\n options: ['anubis', 'eye', 'horus'],\n },\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n const getViewBox = (svg) => {\n let viewBox;\n\n switch (svg) {\n case 'anubis': viewBox = '0 0 512 512';\n break;\n case 'eye': viewBox = '0 0 706 500';\n break;\n case 'horus': viewBox = '0 0 1359.5 1027';\n break;\n default: viewBox = '0 0 512 512';\n }\n\n return viewBox;\n };\n\n return html`\n <kemet-svgs set=\"svgs\">\n <svg>\n <defs>\n <g id=\"anubis\">\n <path d=\"M201 5.5c-1.5 1.8-.9 5.6 2.7 17.5 2.5 8.4 2.7 8.5 12 17.4 32.9 31.1 53.3 67.7 56.8 101.9l.7 6.8 6.6 3c3.6 1.6 6.7 2.8 6.9 2.6.5-.5-7-26.4-11-38.2-6-17.4-10.6-28.5-19.2-46-12.9-26.2-26.8-46.2-41.6-59.9-7.4-6.9-11.3-8.3-13.9-5.1z\"></path><path d=\"M168.5 17c-.3.6 5.9 20.5 13.9 44.3 20.3 60.4 26.1 82 27.3 100.8.5 8.6.3 10.2-1.6 14-5 10.2-14.4 17.3-40.8 30.8-15.4 7.8-21.1 11.2-23.5 14.1-1.8 2.1-7.3 10.5-12.3 18.6-12.6 20.7-22.5 34.4-31.9 44.2-6.5 6.7-12.2 11.1-28.1 21.7-31.3 20.6-41.1 29.4-40.3 36.2.2 2.2 1.8 3.8 7.3 7.5C48.6 356.1 61 362 65 362c2 0 8.8-2.3 15.5-5.1 28.4-12.1 63.7-25 75.5-27.5 5.6-1.2 8.3-1.1 20 .2 15.1 1.8 27.1 1.4 34.2-1.1 5.3-1.9 11.8-7.6 14.5-12.9l1.8-3.4 6 8.9c3.3 4.8 6.4 8.7 6.9 8.6.5-.2 1.5-1.2 2.2-2.3 1.2-1.7.5-3.7-6-16.6-10.1-20-12.1-26.2-10.7-33 .7-2.9 3.4-9.4 6.1-14.3 11.1-20 16.2-33.1 23-59.7 9.8-38.7 10.5-56.5 2.9-81.6-6.8-22.5-29.7-55-60.9-86.3-15.5-15.5-25.4-22.3-27.5-18.9zm58 174c0 3-31.3 27.8-41.5 33-3 1.5-8.2 3.5-11.4 4.5-13.1 3.7-21.8 10.1-26.5 19.4-2.4 4.5-3.8 5.8-5.3 4.3-2.5-2.5 8.6-17 16.8-21.8 2.3-1.4 8.8-4 14.4-5.8 12.8-4.3 27.6-14.2 47.5-32 4-3.5 6-4.1 6-1.6zm-3.1 14.6c4.7 1.8-2 8-29.2 26.5-11.1 7.6-11.6 8.1-14.9 14.9-4.6 9.4-8.3 11.9-19 12.9-7 .6-8.5 1.1-13 4.4-5.6 4.1-6.5 4.4-8.3 2.2-1-1.2-.7-1.9 1.6-4 1.6-1.5 4.1-3.4 5.6-4.3 1.5-.9 3.3-3 4-4.6 3.2-7.8 13-14.8 25.3-18 6.4-1.7 14.1-6.5 34-21.5 6.6-5 12.1-9.1 12.2-9.1.1 0 .8.3 1.7.6z\"></path><path d=\"M273.2 175.2c-5 36.6-15.3 69-27.4 86.6-3.6 5.3-7.9 15.5-8 19.1-.1 1.5 2.1 7.6 4.7 13.6 9.6 22.1 11.2 29.3 7.6 35.1-2.1 3.4-7.4 7.8-10.6 8.8-1.4.4-2.7 2.7-4.3 7.3-3.5 10.1-12.2 27.8-17.6 36.1-2.7 4-7.7 10.4-11.1 14.1-12.1 13.2-24.6 41-41.6 92.1l-5.8 17.5 17.7.3c9.7.1 18.1.1 18.8-.2.6-.2 1.4-4.6 1.8-10.8 2.3-35.4 11.5-71.4 22.3-87.1 6.9-10 37.7-27.5 72.3-41.2 36.2-14.2 73.2-23.6 111-28.1 15.8-1.8 55.2-2.5 67.7-1.1l7.2.8-1.1-3.2c-2.2-6.4-11.5-23.6-18.1-33.6-27-40.9-69.6-79.1-125.2-112.3-11.7-7-55.8-30-57.5-30-.3 0-1.6 7.3-2.8 16.2zm28.8 23.4c54.2 30 97.6 68.3 126.6 111.9 4 6.1 7.4 11.5 7.4 11.8 0 .4-3.4.7-7.5.7h-7.4l-5-7.3c-26.3-39-68.4-75.9-119.1-104.6-6.9-3.8-13-7.4-13.6-7.8-1.5-1 .4-13.3 2-13.3.6 0 8.1 3.9 16.6 8.6zm-11.5 31.7c34.3 22.8 63.8 50.8 89.8 85.4 4.2 5.6 7.7 10.4 7.7 10.6 0 .3-3.2 1.1-7.1 1.7-6.9 1.2-7.1 1.2-8.7-1.1-4.1-5.9-16.2-20.4-25.5-30.7-17.3-19.2-41.7-40.1-63.6-54.7l-9.9-6.6 2.1-6.4c2.4-7.4 1.1-7.6 15.2 1.8zm-11.9 36.4c14.8 12.3 34.8 32 45.1 44.3 8.1 9.8 18.5 24.1 17.9 24.7-.2.2-3.1 1.2-6.5 2.3l-6 1.8-6.6-8.8c-13.4-18-35.4-40.3-56.4-57.3l-7.8-6.3 3.1-5.7c1.7-3.1 3.4-5.7 3.7-5.7.3 0 6.4 4.8 13.5 10.7zm-5.6 50.5c8.2 12.2 19.5 33.7 18.2 34.8-.9.8-11.5 5.1-11.7 4.8 0-.2-1-2.3-2-4.7-1.1-2.4-4.3-8.7-7.2-13.9-4.8-8.7-5.3-10.2-5.3-15.8 0-4.3-.9-9-3-15.1l-2.9-8.8 2.9 3.5c1.7 1.9 6.6 8.8 11 15.2zm-20.6 38.5c1.1 13.6 1.4 12.8-5.7 16.8-3.5 1.9-6.7 3.5-7 3.5-1.6 0-.5-5.2 2.7-12.6 1.9-4.3 4.1-9.6 5-11.7 2.5-6.1 4.2-4.8 5 4z\"></path><path d=\"M442.4 354.8c-.6.4-2.3 4.5-3.7 9.2-11.4 37.3-41.5 70.3-83.3 91.3-33.7 16.9-69.6 25.6-128.9 31.3l-5.1.5.8 9.6c.4 5.3.9 9.7 1 9.9.8.7 22.9 3.4 33.3 3.9 29.8 1.7 68.8-4.9 98.2-16.6 38.7-15.3 78.3-45 99.6-74.6 13.9-19.4 23.7-44.8 23.7-61.4V354h-17.2c-9.5 0-17.8.4-18.4.8z\"></path><path d=\"M414.5 356.8c-7.5.7-33 4.5-42 6.3-46.6 9.3-85.6 24.5-117.3 45.6-14.9 9.9-20.8 15.8-25.5 25.4-4.1 8.3-7.7 21.1-7.7 27.1v3.8h4.8c13 0 47.6-5.3 68.2-10.5 24.4-6.1 49.1-16.1 65.9-26.6 24.5-15.4 43.6-36.6 53.3-59.1 4.5-10.5 4.6-12.4.3-12z\"></path>\n </g>\n <g id=\"eye\">\n <defs id=\"defs2214\"/>\n <path d=\"M 482.47122,483.65668 C 482.09821,481.16923 482.00349,468.19138 482.26073,454.81702 C 482.85598,423.86986 485.74029,409.33575 508.02304,325 C 517.97202,287.34512 518.96876,261.67667 510.62952,257.87706 C 503.22084,254.50144 495.51948,258.76554 483.33874,272.98748 C 444.87758,317.89379 384.416,371.63828 336.592,403.43111 C 234.38064,471.38003 125.75165,495.91654 61.5,465.56738 C 14.135995,443.19507 -9.4559604,386.23292 7.5301438,335.2586 C 23.728797,286.64738 86.775557,268.60992 123.4217,302.10244 C 141.67589,318.78573 137.19751,348.25122 114.70406,359.46018 C 96.526568,368.51841 73.570329,349.94535 79.65551,331.10368 C 81.787859,324.50125 81.436951,324.28716 72.953651,327.0149 C 23.293219,342.98286 33.831342,415.54173 88.682829,435.31611 C 152.06988,458.16762 251.76781,426.54376 351.5,351.95135 C 391.05504,322.36706 438.67015,273.24845 433.13368,267.73999 C 431.50743,266.12196 409.19769,266.53511 388,268.57582 C 325.73643,274.56995 251.40446,262.42665 164,231.98188 C 152.725,228.05456 136.525,222.43341 128,219.49042 C 109.63237,213.14958 75.226122,204.4179 51.5,200.07611 C 42.15,198.3651 33.478754,196.73725 32.230564,196.45866 L 29.961129,195.95214 L 30.230564,174.3183 L 30.5,152.68446 L 39,150.74391 C 72.50072,143.09568 128.76294,128.99955 175,116.66999 C 278.32991,89.11608 289.32495,86.38305 310.5,82.98883 C 383.04703,71.36 422.7219,78.62443 574.31118,131.29245 C 602.82103,141.19788 634.45188,143.67699 662.03604,138.16802 C 668.38086,136.90086 675.54332,136.00717 677.95262,136.18205 L 682.33316,136.5 L 691.61566,157 C 696.72104,168.275 700.92108,177.75395 700.94908,178.06434 C 700.97709,178.37472 694.8125,179.42018 687.25,180.38758 C 628.89838,187.85196 595.69886,201.31776 576.89325,225.14854 C 562.86714,242.92267 559.1993,250.80358 556.38741,269.20848 C 552.05483,297.56695 558.59871,307.69047 590.22312,321.55294 C 598.33549,325.10898 598.36533,325.2104 591.75,326.74292 C 566.33045,332.63166 554.58404,346.42334 542.01437,385.13842 C 521.75002,447.55347 501.97616,483.58514 485.82472,487.52648 C 483.28485,488.14627 483.11511,487.95039 482.47122,483.65668 z M 424.2218,225.63181 C 474.97905,220.35891 533.69333,201.01428 568.3406,178.14891 L 572.18119,175.61432 L 564.6736,171.83682 C 544.62325,161.74834 515.9203,151.09439 477.85766,139.61248 C 468.37374,136.75158 435.02218,129.50425 417.73035,126.54674 L 413.96069,125.902 L 414.73035,130.201 C 421.33896,167.11429 399.13266,191.38005 360.2101,189.77757 C 325.46755,188.34718 305.90676,167.5813 310.49936,137.00427 C 311.3496,131.34347 311.86562,126.53229 311.64607,126.31274 C 310.91615,125.58281 254.01865,138.94051 216.75536,148.59001 C 184.37601,156.9748 143.86144,166.87973 118,172.73355 L 109.5,174.65755 L 123,178.84822 C 130.425,181.15309 154.725,189.0744 177,196.45112 C 234.90395,215.62695 267.37147,222.92242 312.89555,226.98694 C 328.35761,228.36743 407.1171,227.40873 424.2218,225.63181 z M 35.354897,110.38623 C 35.716536,99.99881 36.572127,87.9 37.256211,83.5 L 38.5,75.5 L 56.5,75.47117 C 89.061602,75.41901 105.13604,71.29991 198.5,39.083437 C 273.3851,13.243341 349.47211,3.065576 403.05014,11.721825 C 448.7358,19.102957 499.55051,32.310146 558,51.99465 C 615.37673,71.31787 646.14746,74.42614 681.5,64.46987 C 684.63769,63.58621 703.5919,96.68847 701.36023,99.15444 C 699.55859,101.14524 692.34416,104.11236 682,107.11686 C 671.59412,110.13927 628.62391,111.07697 614.24412,108.59543 C 603.42274,106.72796 561.07836,94.69295 532.5,85.36232 C 458.57731,61.22709 370.02847,49.18587 319,56.32973 C 273.61484,62.68354 255.87256,67.04951 198.71398,85.92932 C 131.51605,108.12519 72.656502,123.90207 39.598686,128.57904 L 34.697371,129.27247 L 35.354897,110.38623 z\" />\n </g>\n <g id=\"horus\">\n <style type=\"text/css\">.st0{fill:currentColor;} .st2{fill:currentColor;} .st3{fill:var(--kemet-color-white-to-black);}</style>\n <path class=\"st0\" d=\"M1049.5,304.2c0,0,167.6,67.4,115.3,92.3C1112.5,421.5,1055.4,406.6,1049.5,304.2z M708.9,21.3 c0,0-18,79.6,26.9,155.4c0,0-222.2-27-446.9,36c0,0-28.3,60.4,5.1,133.6c0,0-195.3,74.5-289,170.8c0,0,219.6,41.1,197.9,258.2 c0,0,232.5-33.4,521.5,251.7c88.6-475.4,426.2-668.3,625.5-450.8c0,0,60.4-133.6-122-231.2c0,0-19.3-93.7-187.5-132.3 c0,0-66.8-28.3-100.2-98.9c0,0-10.3,12.9-14.2,51.4C925.9,165.2,764.2,36.7,708.9,21.3L708.9,21.3z\"/>\n <path class=\"st1\" d=\"M509.8,4.6c0,0-61.6,77.1-77,129.6L737.2,345l-1.5,1.3L409.6,192.2c0,0-18,27-29.6,111.7 c0,0,186.5,81.4,326.4,96.1c-0.2,1-0.3,2.1-0.5,3.1c-38,2.1-138.1,2.7-331.1-27.3c0,0-16.7,107.9,27,178.5 c0,0,199.8-88.8,306.2-114.8c0.4,1.4,0.8,2.9,1.3,4.3C662.1,470.7,495.9,567.1,430,627.5c0,0,30.8,89.9,97.7,128.5 c0,0,147.5-222.4,199.3-280l2.3,2.5c-18.1,32.4-162,289.5-164.4,317.3c0,0,78.4,69.4,163.1,92.5c0,0-39.4-246.4,63.8-379.3 c2.3,0.2,4.5,0.3,6.8,0.3c22.4,0,44.1-8.1,61.1-22.8c8.7-6.7,15.8-15.3,20.7-25.1c16.7-29.8,15.9-66.3-2.1-95.3 c-11.2-22-32.1-37.3-56.4-41.3c-17.4-4.6-35.9-4-52.9,1.9C767.9,325.8,549.5,127.6,509.8,4.6L509.8,4.6z\"/>\n <path class=\"st2\" d=\"M1159.9,487.1c0,0-198-10.1-346.9,64.4c0,0-49.1,101.7-34.5,185.3C778.4,736.9,938.2,510.7,1159.9,487.1z M1164.4,367.2c0,0-56.3-67.2-137.1-101.7c0,0,19.1,56.3,26.4,74.5l1-30.6C1054.6,309.3,1108,324.5,1164.4,367.2z\"/>\n <g>\n <path class=\"st3\" d=\"M769.1,326.8L475.5,52.1l34.3-47.5C509.8,4.6,516.6,58.2,769.1,326.8z M735.6,346.5l-326-154.3 c-8.9,17-15.1,35.4-18.3,54.3L735.6,346.5z M706,403.2c0,0-128.4,7.1-331.1-27.3c0,0-8.4,66.4,0.2,100L706,403.2z M709.5,443.9 c0,0-210.2,117.8-279.3,183.7c0,0,15.3,39.8,27.6,56.6L709.5,443.9z M729.4,478.5c0,0-122.2,215.4-164.4,317.3 c0,0,33,27.9,59.4,44.1L729.4,478.5z M813.2,340.1C856,363.2,872,416.6,849,459.4c-8.2,15.2-20.6,27.6-35.8,35.8 c42.8-4,74.3-42,70.2-84.8C879.9,373.1,850.4,343.6,813.2,340.1z\"/>\n </g>\n </g>\n </defs>\n </svg>\n </kemet-svgs>\n <kemet-svg set=\"svgs\" svg=\"${args.svg}\" viewbox=\"${getViewBox(args.svg)}\"></kemet-svg>\n `;\n}\n\nexport const Standard: Story = {\n render: args => Template(args),\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"kemet-svg.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/kemet-svg.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AAGH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAgBE,QAAG,GAAW,MAAM,CAAC;QAMrB,UAAK,GAAW,MAAM,CAAC;QAGvB,YAAO,GAAW,aAAa,CAAC;IAgDlC,CAAC;IA9CC,OAAO;QACL,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,OAAO,0BAA0B,IAAI,CAAC,KAAK;KAC5E,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;YACpC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;SACtC;IACH,CAAC;IAED,OAAO;QACL,IAAI,UAAU,CAAC;QACf,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE1C,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC1B,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAElC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,GAAG,EAAE;gBACzB,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;aAC1B;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,UAAU,EAAE;YACd,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;SAC1B;aAAM;YACL,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,GAAG,aAAa,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;SACzE;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,CAAC;YAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAClB,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;CACF,CAAA;AAxEQ,eAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;GASnB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACJ;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACK;AAzBb,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAyE5B;eAzEoB,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svg\n * @summary A svg from a set of custom SVGs.\n *\n * @prop {string} set - Defines which set of svgs is referenced.\n * @prop {string} svg - The name (id) of the svg to be displayed.\n * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.\n * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.\n * @prop {string} viewBox - The value for the viewBox attribute of the svg.\n *\n * @csspart svg - The svg element.\n *\n */\n\n@customElement('kemet-svg')\nexport default class KemetSVG extends LitElement {\n static styles = [css`\n :host {\n display: inline-block;\n }\n\n svg {\n width: 100%;\n height: 100%;\n }\n `];\n\n @property({ type: String })\n set: string;\n\n @property({ type: String })\n svg: string = 'svgs';\n\n @property({ type: Number })\n size: number;\n\n @property({ type: String })\n ratio: string = 'none';\n\n @property({ type: String })\n viewBox: string = '0 0 128 128';\n\n updated() {\n this.setSize();\n this.getIcon();\n }\n\n render() {\n return html`\n <svg part=\"svg\" viewBox=\"${this.viewBox}\" preserveAspectRatio=\"${this.ratio}\" fill=\"currentColor\"></svg>\n `;\n }\n\n setSize() {\n if (this.size) {\n this.style.width = `${this.size}px`;\n this.style.height = `${this.size}px`;\n }\n }\n\n getIcon() {\n let svgElement;\n const svgs = document.kemetSVGs[this.set];\n\n svgs.forEach((svg, index) => {\n const id = svg.getAttribute('id');\n\n if (id && id === this.svg) {\n svgElement = svgs[index];\n }\n });\n\n if (svgElement) {\n this.fillSVG(svgElement);\n } else {\n // eslint-disable-next-line no-console\n console.error(`Could not find svg \"${this.svg}\" in set \"${this.set}\".`);\n }\n }\n\n fillSVG(element) {\n const content = element.cloneNode(true);\n const svg = this.shadowRoot.querySelector('svg');\n const g = svg.querySelector('g');\n\n if (g) g.remove();\n svg.appendChild(content);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-svg': KemetSVG\n }\n\n interface Document {\n kemetSVGs: any;\n }\n}\n"]}
1
+ {"version":3,"file":"kemet-svg.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/kemet-svg.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AAGY,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAgBb,QAAG,GAAW,MAAM,CAAC;QAMrB,UAAK,GAAW,MAAM,CAAC;QAGvB,YAAO,GAAW,aAAa,CAAC;IAgDlC,CAAC;IA9CC,OAAO;QACL,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,IAAI,CAAC,OAAO,EAAE,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;iCACkB,IAAI,CAAC,OAAO,0BAA0B,IAAI,CAAC,KAAK;KAC5E,CAAC;IACJ,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;YACpC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QACvC,CAAC;IACH,CAAC;IAED,OAAO;QACL,IAAI,UAAU,CAAC;QACf,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAE1C,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC1B,MAAM,EAAE,GAAG,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;YAElC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC,GAAG,EAAE,CAAC;gBAC1B,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YAC3B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uBAAuB,IAAI,CAAC,GAAG,aAAa,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACjD,MAAM,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAEjC,IAAI,CAAC;YAAE,CAAC,CAAC,MAAM,EAAE,CAAC;QAClB,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC;;AAvEM,eAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;;;GASnB,CAAC,AATW,CASV;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACf;AAGZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACN;AAGrB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACJ;AAGvB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCACK;AAzBb,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAyE5B;eAzEoB,QAAQ","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svg\n * @summary A svg from a set of custom SVGs.\n *\n * @prop {string} set - Defines which set of svgs is referenced.\n * @prop {string} svg - The name (id) of the svg to be displayed.\n * @prop {number} size - Sets the width and height of a the svg to the given value in pixels.\n * @prop {string} ratio - The value for the preserveAspectRatio attribute of the svg.\n * @prop {string} viewBox - The value for the viewBox attribute of the svg.\n *\n * @csspart svg - The svg element.\n *\n */\n\n@customElement('kemet-svg')\nexport default class KemetSVG extends LitElement {\n static styles = [css`\n :host {\n display: inline-block;\n }\n\n svg {\n width: 100%;\n height: 100%;\n }\n `];\n\n @property({ type: String })\n set: string;\n\n @property({ type: String })\n svg: string = 'svgs';\n\n @property({ type: Number })\n size: number;\n\n @property({ type: String })\n ratio: string = 'none';\n\n @property({ type: String })\n viewBox: string = '0 0 128 128';\n\n updated() {\n this.setSize();\n this.getIcon();\n }\n\n render() {\n return html`\n <svg part=\"svg\" viewBox=\"${this.viewBox}\" preserveAspectRatio=\"${this.ratio}\" fill=\"currentColor\"></svg>\n `;\n }\n\n setSize() {\n if (this.size) {\n this.style.width = `${this.size}px`;\n this.style.height = `${this.size}px`;\n }\n }\n\n getIcon() {\n let svgElement;\n const svgs = document.kemetSVGs[this.set];\n\n svgs.forEach((svg, index) => {\n const id = svg.getAttribute('id');\n\n if (id && id === this.svg) {\n svgElement = svgs[index];\n }\n });\n\n if (svgElement) {\n this.fillSVG(svgElement);\n } else {\n // eslint-disable-next-line no-console\n console.error(`Could not find svg \"${this.svg}\" in set \"${this.set}\".`);\n }\n }\n\n fillSVG(element) {\n const content = element.cloneNode(true);\n const svg = this.shadowRoot.querySelector('svg');\n const g = svg.querySelector('g');\n\n if (g) g.remove();\n svg.appendChild(content);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-svg': KemetSVG\n }\n\n interface Document {\n kemetSVGs: any;\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"kemet-svgs.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/kemet-svgs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;;GASG;AAGH,IAAqB,SAAS,GAA9B,MAAqB,SAAU,SAAQ,UAAU;IAAjD;;QAQE,QAAG,GAAW,MAAM,CAAC;IAyBvB,CAAC;IApBC,YAAY;QACV,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACzD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC;QAE9C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,aAAa;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;QACnD,MAAM,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAElE,IAAI,WAAW,EAAE;YACf,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC;SAC5C;IACH,CAAC;CACF,CAAA;AAhCQ,gBAAM,GAAG,CAAC,GAAG,CAAA;;;;GAInB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACN;AAGrB;IADC,KAAK,EAAE;8CACqB;AAXV,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAiC7B;eAjCoB,SAAS","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svgs\n * @summary A set of SVG graphics that can be referenced anywhere in a page or app.\n *\n * @prop {string} set - Defines the name for the set of svgs.\n *\n */\n\n@customElement('kemet-svgs')\nexport default class KemetSVGs extends LitElement {\n static styles = [css`\n :host {\n display: none;\n }\n `];\n\n @property({ type: String })\n set: string = 'svgs';\n\n @state()\n slotElement: HTMLSlotElement;\n\n firstUpdated() {\n this.slotElement = this.shadowRoot.querySelector('slot');\n document.kemetSVGs = document.kemetSVGs || {};\n\n this.populateIcons();\n this.slotElement.addEventListener('slotchange', () => this.populateIcons());\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n populateIcons() {\n const svg = this.slotElement.assignedElements()[0];\n const svgContents = svg ? svg.querySelectorAll('defs > g') : null;\n\n if (svgContents) {\n document.kemetSVGs[this.set] = svgContents;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-svgs': KemetSVGs\n }\n\n interface Document {\n kemetSVGs: any;\n }\n}\n"]}
1
+ {"version":3,"file":"kemet-svgs.js","sourceRoot":"","sources":["../../../src/components/kemet-svgs/kemet-svgs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;;GASG;AAGY,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAQb,QAAG,GAAW,MAAM,CAAC;IAyBvB,CAAC;IApBC,YAAY;QACV,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACzD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS,IAAI,EAAE,CAAC;QAE9C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;IAED,aAAa;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC,CAAC;QACnD,MAAM,WAAW,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAElE,IAAI,WAAW,EAAE,CAAC;YAChB,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC;QAC7C,CAAC;IACH,CAAC;;AA/BM,gBAAM,GAAG,CAAC,GAAG,CAAA;;;;GAInB,CAAC,AAJW,CAIV;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACN;AAGrB;IADC,KAAK,EAAE;8CACqB;AAXV,SAAS;IAD7B,aAAa,CAAC,YAAY,CAAC;GACP,SAAS,CAiC7B;eAjCoB,SAAS","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-svgs\n * @summary A set of SVG graphics that can be referenced anywhere in a page or app.\n *\n * @prop {string} set - Defines the name for the set of svgs.\n *\n */\n\n@customElement('kemet-svgs')\nexport default class KemetSVGs extends LitElement {\n static styles = [css`\n :host {\n display: none;\n }\n `];\n\n @property({ type: String })\n set: string = 'svgs';\n\n @state()\n slotElement: HTMLSlotElement;\n\n firstUpdated() {\n this.slotElement = this.shadowRoot.querySelector('slot');\n document.kemetSVGs = document.kemetSVGs || {};\n\n this.populateIcons();\n this.slotElement.addEventListener('slotchange', () => this.populateIcons());\n }\n\n render() {\n return html`<slot></slot>`;\n }\n\n populateIcons() {\n const svg = this.slotElement.assignedElements()[0];\n const svgContents = svg ? svg.querySelectorAll('defs > g') : null;\n\n if (svgContents) {\n document.kemetSVGs[this.set] = svgContents;\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-svgs': KemetSVGs\n }\n\n interface Document {\n kemetSVGs: any;\n }\n}\n"]}
@@ -5,7 +5,7 @@ import '../kemet-tab-panel';
5
5
  import '../../kemet-icon/kemet-icon';
6
6
  declare const meta: Meta;
7
7
  export default meta;
8
- declare type Story = StoryObj;
8
+ type Story = StoryObj;
9
9
  export declare const SelectByName: Story;
10
10
  export declare const SelectByIndex: Story;
11
11
  export declare const Closable: Story;
@@ -1 +1 @@
1
- {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tabs/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tabs';\nimport '../kemet-tab';\nimport '../kemet-tab-panel';\n\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n title: 'Components / Tabs',\n component: 'kemet-tabs',\n argTypes: {\n panelEffect: {\n control: { type: 'select' },\n options: ['none', 'slide', 'fade'],\n },\n tabsAlign: {\n control: { type: 'select' },\n options: ['center', 'between', 'around', 'evenly', 'start', 'end'],\n },\n placement: {\n control: { type: 'select' },\n options: ['top', 'right', 'bottom', 'left'],\n },\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst NamedTemplate = (args) => html`\n <kemet-tabs selected=\"${ifDefined(args.selected)}\" panel-effect=${ifDefined(args.panelEffect)} ?swipe=${args.swipe} ?divider=${args.divider} tabs-align=${ifDefined(args.tabsAlign)} ?hide-ink=${args.hideInk} placement=${ifDefined(args.placement)} measure-height-offset=${ifDefined(args.measureHeightOffset)}>\n <kemet-tab slot=\"tab\" link=\"account\">\n <kemet-icon icon=\"person-circle\"></kemet-icon>&nbsp;Account\n </kemet-tab>\n <kemet-tab slot=\"tab\" link=\"settings\">\n <kemet-icon icon=\"gear\"></kemet-icon>&nbsp;Settings\n </kemet-tab>\n <kemet-tab slot=\"tab\" link=\"dashboard\">\n <kemet-icon icon=\"columns-gap\"></kemet-icon>&nbsp;Dashboard\n </kemet-tab>\n <kemet-tab-panel panel=\"account\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Account</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n <kemet-tab-panel panel=\"settings\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Settings</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n <kemet-tab-panel panel=\"dashboard\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Dashboard</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p>Tellus integer feugiat scelerisque varius morbi. Non odio euismod lacinia at quis. Dictum sit amet justo donec. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Sed nisi lacus sed viverra tellus. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Arcu dui vivamus arcu felis bibendum ut tristique. Dictum at tempor commodo ullamcorper a. Nisl nunc mi ipsum faucibus vitae. In eu mi bibendum neque.</p>\n </kemet-tab-panel>\n </kemet-tabs>\n <hr />\n`;\n\nconst IndexTemplate = (args) => {\n const tabs = [];\n const panels = [];\n\n for (let i = 0; i < args.numOfTabs; i += 1) {\n tabs.push(html`<kemet-tab slot=\"tab\" ?closable=${args.closable}>This is tab ${i + 1}.</kemet-tab>`);\n }\n\n for (let i = 0; i < args.numOfTabs; i += 1) {\n panels.push(html`\n <kemet-tab-panel slot=\"panel\">\n <h3>Panel ${i + 1}</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n `);\n }\n\n return html`\n <kemet-tabs panel-effect=${ifDefined(args.panelEffect)} ?swipe=${args.swipe} ?divider=${args.divider} tabs-align=${ifDefined(args.tabsAlign)} ?hide-ink=${args.hideInk} placement=${ifDefined(args.placement)} measure-height-offset=${ifDefined(args.measureHeightOffset)}>\n ${tabs}\n ${panels}\n </kemet-tabs>\n `;\n};\n\nexport const SelectByName: Story = {\n render: (args: any) => NamedTemplate(args),\n args: {\n selected: 'settings',\n },\n};\n\nexport const SelectByIndex: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n },\n};\n\nexport const Closable: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n closable: true,\n },\n};\n\nexport const Fade: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n panelEffect: 'fade',\n },\n};\n\nexport const Slide: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n panelEffect: 'slide',\n },\n};\n\nexport const Divider: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n divider: true,\n },\n};\n\nexport const NoInk: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n hideInk: true,\n },\n};\n\nexport const Right: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'right',\n },\n};\n\nexport const Bottom: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'bottom',\n },\n};\n\nexport const Left: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'left',\n },\n};\n"]}
1
+ {"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tabs/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tabs';\nimport '../kemet-tab';\nimport '../kemet-tab-panel';\n\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n title: 'Components / Tabs',\n component: 'kemet-tabs',\n argTypes: {\n panelEffect: {\n control: { type: 'select' },\n options: ['none', 'slide', 'fade'],\n },\n tabsAlign: {\n control: { type: 'select' },\n options: ['center', 'between', 'around', 'evenly', 'start', 'end'],\n },\n placement: {\n control: { type: 'select' },\n options: ['top', 'right', 'bottom', 'left'],\n },\n }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst NamedTemplate = (args) => html`\n <kemet-tabs selected=\"${ifDefined(args.selected)}\" panel-effect=${ifDefined(args.panelEffect)} ?swipe=${args.swipe} ?divider=${args.divider} tabs-align=${ifDefined(args.tabsAlign)} ?hide-ink=${args.hideInk} placement=${ifDefined(args.placement)} measure-height-offset=${ifDefined(args.measureHeightOffset)}>\n <kemet-tab slot=\"tab\" link=\"account\">\n <kemet-icon icon=\"person-circle\"></kemet-icon>&nbsp;Account\n </kemet-tab>\n <kemet-tab slot=\"tab\" link=\"settings\">\n <kemet-icon icon=\"gear\"></kemet-icon>&nbsp;Settings\n </kemet-tab>\n <kemet-tab slot=\"tab\" link=\"dashboard\">\n <kemet-icon icon=\"columns-gap\"></kemet-icon>&nbsp;Dashboard\n </kemet-tab>\n <kemet-tab-panel panel=\"account\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Account</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n <kemet-tab-panel panel=\"settings\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Settings</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n <kemet-tab-panel panel=\"dashboard\" slot=\"panel\">\n <h3 kemet-margin-top=\"none\">Dashboard</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n <p>Tellus integer feugiat scelerisque varius morbi. Non odio euismod lacinia at quis. Dictum sit amet justo donec. Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Sed nisi lacus sed viverra tellus. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero. Arcu dui vivamus arcu felis bibendum ut tristique. Dictum at tempor commodo ullamcorper a. Nisl nunc mi ipsum faucibus vitae. In eu mi bibendum neque.</p>\n </kemet-tab-panel>\n </kemet-tabs>\n <hr />\n`;\n\nconst IndexTemplate = (args) => {\n const tabs = [];\n const panels = [];\n\n for (let i = 0; i < args.numOfTabs; i += 1) {\n tabs.push(html`<kemet-tab slot=\"tab\" ?closable=${args.closable}>This is tab ${i + 1}.</kemet-tab>`);\n }\n\n for (let i = 0; i < args.numOfTabs; i += 1) {\n panels.push(html`\n <kemet-tab-panel slot=\"panel\">\n <h3>Panel ${i + 1}</h3>\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n </kemet-tab-panel>\n `);\n }\n\n return html`\n <kemet-tabs panel-effect=${ifDefined(args.panelEffect)} ?swipe=${args.swipe} ?divider=${args.divider} tabs-align=${ifDefined(args.tabsAlign)} ?hide-ink=${args.hideInk} placement=${ifDefined(args.placement)} measure-height-offset=${ifDefined(args.measureHeightOffset)}>\n ${tabs}\n ${panels}\n </kemet-tabs>\n `;\n};\n\nexport const SelectByName: Story = {\n render: (args: any) => NamedTemplate(args),\n args: {\n selected: 'settings',\n },\n};\n\nexport const SelectByIndex: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n },\n};\n\nexport const Closable: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n closable: true,\n },\n};\n\nexport const Fade: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n panelEffect: 'fade',\n },\n};\n\nexport const Slide: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n panelEffect: 'slide',\n },\n};\n\nexport const Divider: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n divider: true,\n },\n};\n\nexport const NoInk: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 5,\n hideInk: true,\n },\n};\n\nexport const Right: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'right',\n },\n};\n\nexport const Bottom: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'bottom',\n },\n};\n\nexport const Left: Story = {\n render: (args: any) => IndexTemplate(args),\n args: {\n numOfTabs: 3,\n placement: 'left',\n },\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"kemet-tab-panel.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;GAYG;AAGH,IAAqB,aAAa,GAAlC,MAAqB,aAAc,SAAQ,UAAU;IAArD;;QAIE,aAAQ,GAAY,KAAK,CAAC;IA2B5B,CAAC;IAnBC,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAEtC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;CACF,CAAA;AA9BQ,oBAAM,GAAG,CAAC,mBAAmB,CAAC,CAAC;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAVK,aAAa;IADjC,aAAa,CAAC,iBAAiB,CAAC;GACZ,aAAa,CA+BjC;eA/BoB,aAAa","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTabPanel } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab-panel\n * @summary A panel in a set of tabs.\n *\n * @prop {boolean} selected - Is true when a panel is selected\n * @prop {string} panel - Identifies the panel to be linked by a tab\n *\n * @cssproperty --kemet-tab-panel-fade-speed - The fade speed.\n *\n */\n\n@customElement('kemet-tab-panel')\nexport default class KemetTabPanel extends LitElement {\n static styles = [stylesKemetTabPanel];\n\n @property({ type: Boolean, reflect: true })\n selected: boolean = false;\n\n @property({ type: String })\n panel: string;\n\n @property({ type: Number })\n index: number;\n\n updated() {\n this.a11y();\n }\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n\n a11y() {\n this.setAttribute('role', 'tabpanel');\n\n if (this.selected) {\n this.setAttribute('tabindex', '0');\n } else {\n this.setAttribute('tabindex', '-1');\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tab-panel': KemetTabPanel\n }\n}\n"]}
1
+ {"version":3,"file":"kemet-tab-panel.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;GAYG;AAGY,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QAIb,aAAQ,GAAY,KAAK,CAAC;IA2B5B,CAAC;IAnBC,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAEtC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;;AA7BM,oBAAM,GAAG,CAAC,mBAAmB,CAAC,AAAxB,CAAyB;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACb;AAVK,aAAa;IADjC,aAAa,CAAC,iBAAiB,CAAC;GACZ,aAAa,CA+BjC;eA/BoB,aAAa","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesKemetTabPanel } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab-panel\n * @summary A panel in a set of tabs.\n *\n * @prop {boolean} selected - Is true when a panel is selected\n * @prop {string} panel - Identifies the panel to be linked by a tab\n *\n * @cssproperty --kemet-tab-panel-fade-speed - The fade speed.\n *\n */\n\n@customElement('kemet-tab-panel')\nexport default class KemetTabPanel extends LitElement {\n static styles = [stylesKemetTabPanel];\n\n @property({ type: Boolean, reflect: true })\n selected: boolean = false;\n\n @property({ type: String })\n panel: string;\n\n @property({ type: Number })\n index: number;\n\n updated() {\n this.a11y();\n }\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n\n a11y() {\n this.setAttribute('role', 'tabpanel');\n\n if (this.selected) {\n this.setAttribute('tabindex', '0');\n } else {\n this.setAttribute('tabindex', '-1');\n }\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tab-panel': KemetTabPanel\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"kemet-tab.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;;;;;;;;;;;;;;GAiBG;AAGH,IAAqB,QAAQ,GAA7B,MAAqB,QAAS,SAAQ,UAAU;IAAhD;;QAOE,aAAQ,GAAY,KAAK,CAAC;IAkD5B,CAAC;IA1CC,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,aAAa,EAAE;KACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;SACpC;aAAM;YACL,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC5C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;SACrC;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAO,IAAI,CAAA,kCAAkC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC;SAC1F;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,cAAc;QACZ,SAAS,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;CACF,CAAA;AAxDQ,eAAM,GAAG,CAAC,cAAc,CAAC,CAAC;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACV;AAbC,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAyD5B;eAzDoB,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesKemetTab } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab\n * @summary A tab in a set of tabs.\n *\n * @prop {boolean} selected - Is true when the tab is selected\n * @prop {string} link - Links to a panel name\n * @prop {boolean} closable - Determines if the tab can be closed\n *\n * @cssproperty --kemet-tab-padding - The padding of the tab.\n * @cssproperty --kemet-tab-color - The color of the selected tab.\n *\n * @event kemet-tab-selected - Fires when a tab is selected\n * @event kemet-tab-close - Fires when the tab should close\n *\n */\n\n@customElement('kemet-tab')\nexport default class KemetTab extends LitElement {\n static styles = [stylesKemetTab];\n\n @property({ type: Number })\n index: number;\n\n @property({ type: Boolean, reflect: true })\n selected: boolean = false;\n\n @property({ type: String })\n link: string;\n\n @property({ type: Boolean })\n closable: boolean;\n\n firstUpdated() {\n this.addEventListener('click', this.select.bind(this));\n }\n\n updated() {\n this.a11y();\n }\n\n render() {\n return html`\n <slot></slot>\n ${this.makeCloseable()}\n `;\n }\n\n select() {\n emitEvent(this, 'kemet-tab-selected', this);\n }\n\n a11y() {\n this.setAttribute('role', 'tab');\n\n if (this.selected) {\n this.setAttribute('aria-selected', 'true');\n this.setAttribute('tabindex', '0');\n } else {\n this.setAttribute('aria-selected', 'false');\n this.setAttribute('tabindex', '-1');\n }\n }\n\n makeCloseable() {\n if (this.closable) {\n return html`<kemet-icon icon=\"x-lg\" @click=${() => this.handleClosable()}></kemet-icon>`;\n }\n\n return null;\n }\n\n handleClosable() {\n emitEvent(this, 'kemet-tab-close', this);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tab': KemetTab\n }\n}\n"]}
1
+ {"version":3,"file":"kemet-tab.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C;;;;;;;;;;;;;;;;;GAiBG;AAGY,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAOb,aAAQ,GAAY,KAAK,CAAC;IAkD5B,CAAC;IA1CC,YAAY;QACV,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IACzD,CAAC;IAED,OAAO;QACL,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;QAEP,IAAI,CAAC,aAAa,EAAE;KACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,SAAS,CAAC,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI;QACF,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAEjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;YAC3C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;YAC5C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;QACtC,CAAC;IACH,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,kCAAkC,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC;QAC3F,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,cAAc;QACZ,SAAS,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;;AAvDM,eAAM,GAAG,CAAC,cAAc,CAAC,AAAnB,CAAoB;AAGjC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CACjB;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACd;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACV;AAbC,QAAQ;IAD5B,aAAa,CAAC,WAAW,CAAC;GACN,QAAQ,CAyD5B;eAzDoB,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesKemetTab } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tab\n * @summary A tab in a set of tabs.\n *\n * @prop {boolean} selected - Is true when the tab is selected\n * @prop {string} link - Links to a panel name\n * @prop {boolean} closable - Determines if the tab can be closed\n *\n * @cssproperty --kemet-tab-padding - The padding of the tab.\n * @cssproperty --kemet-tab-color - The color of the selected tab.\n *\n * @event kemet-tab-selected - Fires when a tab is selected\n * @event kemet-tab-close - Fires when the tab should close\n *\n */\n\n@customElement('kemet-tab')\nexport default class KemetTab extends LitElement {\n static styles = [stylesKemetTab];\n\n @property({ type: Number })\n index: number;\n\n @property({ type: Boolean, reflect: true })\n selected: boolean = false;\n\n @property({ type: String })\n link: string;\n\n @property({ type: Boolean })\n closable: boolean;\n\n firstUpdated() {\n this.addEventListener('click', this.select.bind(this));\n }\n\n updated() {\n this.a11y();\n }\n\n render() {\n return html`\n <slot></slot>\n ${this.makeCloseable()}\n `;\n }\n\n select() {\n emitEvent(this, 'kemet-tab-selected', this);\n }\n\n a11y() {\n this.setAttribute('role', 'tab');\n\n if (this.selected) {\n this.setAttribute('aria-selected', 'true');\n this.setAttribute('tabindex', '0');\n } else {\n this.setAttribute('aria-selected', 'false');\n this.setAttribute('tabindex', '-1');\n }\n }\n\n makeCloseable() {\n if (this.closable) {\n return html`<kemet-icon icon=\"x-lg\" @click=${() => this.handleClosable()}></kemet-icon>`;\n }\n\n return null;\n }\n\n handleClosable() {\n emitEvent(this, 'kemet-tab-close', this);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tab': KemetTab\n }\n}\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"kemet-tabs.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-lonely-if */\n/* eslint-disable no-case-declarations */\nimport { LitElement, html } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport {\n KemetTabPanelInterface, TypePanelEffect, TypePlacement, TypeTabsAlign,\n} from './types';\nimport { stylesKemetTabs } from './styles';\n\nimport type KemetTab from './kemet-tab';\nimport type KemetTabPanel from './kemet-tab-panel';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tabs\n * @summary A group of tabs and panels.\n *\n * @prop {string} selected - The selected tab by name\n * @prop {number} selectedIndex - The selected tab by index\n * @prop {number} panelPosition - Positions the current panel\n * @prop {string} panelEffect - The transition effect for panels\n * @prop {boolean} swipe - Determines whether to enable swipe behavior\n * @prop {string} placement - Places the tabs to the top, right, bottom, or left\n * @prop {boolean} divider - Determines whether to show a divider line\n * @prop {string} tabsAlign - Spacing alignment of the tabs\n * @prop {object} ink - An object that contains information about the ink\n * @prop {boolean} hideInk - Determines whether to hide the ink\n * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container\n *\n * @slot tab - Place the tabs here.\n * @slot panel - Place the panels here.\n *\n * @csspart links - The container for the tablist.\n * @csspart tablist - Contains the tabs.\n * @csspart panels - Contains the panels.\n * @csspart ink - The ink element.\n * @csspart divider - The divider element.\n *\n * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.\n * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.\n * @cssproperty --kemet-tabs-ink-color - The color of the ink.\n * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.\n * @cssproperty --kemet-tabs-divider-color - The color of the divider.\n * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.\n * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.\n *\n * @event kemet-tab-changed - Fires when a tab is changed\n *\n */\n\ninterface Iink {\n width: string;\n height: string;\n positionX: string;\n positionY: string;\n}\n\n@customElement('kemet-tabs')\nexport default class KemetTabs extends LitElement {\n static styles = [stylesKemetTabs];\n\n @property({ type: String, reflect: true })\n selected: string;\n\n @property({ type: Number })\n selectedIndex: number = 0;\n\n @property({ type: Number })\n panelPosition: number = 0;\n\n @property({ type: String, reflect: true, attribute: 'panel-effect' })\n panelEffect: TypePanelEffect = 'none';\n\n @property({ type: Boolean })\n swipe: boolean;\n\n @property({ type: String, reflect: true })\n placement: TypePlacement = 'top';\n\n @property({ type: Boolean })\n divider: boolean;\n\n @property({ type: String, reflect: true, attribute: 'tabs-align' })\n tabsAlign: TypeTabsAlign = 'center';\n\n @property({ type: Object })\n ink: Iink;\n\n @property({ type: Boolean, attribute: 'hide-ink' })\n hideInk: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n overflow: boolean;\n\n @state()\n tabs: KemetTab[];\n\n @state()\n panels: KemetTabPanel[];\n\n @state()\n xDown: number | null;\n\n @state()\n yDown: number | null;\n\n @state()\n links: HTMLElement;\n\n @query('#panels')\n panelsElement: HTMLElement;\n\n constructor() {\n super();\n\n this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));\n this.addEventListener('kemet-tab-close', this.handleTabClose.bind(this));\n window.addEventListener('resize', this.handleResize.bind(this));\n }\n\n firstUpdated() {\n // standard properties\n this.tabs = [];\n this.panels = [];\n this.xDown = null;\n this.yDown = null;\n\n this.links = this.shadowRoot.getElementById('links');\n }\n\n render() {\n return html`\n ${this.makeLeftArrow()}\n ${this.makeRightArrow()}\n <div id=\"links\" part=\"links\">\n <div part='tablist' role=\"tablist\">\n <slot name=\"tab\" @slotchange=${() => this.handleLinksSlotChange()}></slot>\n </div>\n ${this.makeInk('links')}\n </div>\n ${this.makeInk('host')}\n ${this.makeDivider()}\n <section id=\"panels\" part=\"panels\" style=\"transform:translateX(${this.panelPosition}px);\">\n <div>\n <slot name=\"panel\" @slotchange=${() => this.handlePanelsSlotChange()}></slot>\n </div>\n </section>\n `;\n }\n\n updated(prevProps: Map<string, never>) {\n this.determineFade();\n this.determineStacked();\n\n if (prevProps.get('selected') && prevProps.get('selected') !== this.selected) {\n this.selectTab();\n this.selectPanel();\n }\n\n if (typeof prevProps.get('selectedIndex') === 'number' && prevProps.get('selectedIndex') !== this.selected) {\n this.selectTab();\n this.selectPanel();\n }\n }\n\n handleLinksSlotChange() {\n const tabs = this.querySelectorAll('kemet-tab');\n let index = 0;\n\n tabs.forEach((tab: KemetTab) => {\n // give each tab an index to select by if link/panel is not used\n tab.index = index;\n index += 1;\n\n // store the list of tabs\n this.tabs = this.tabs.concat(tab);\n\n // add keyboard support\n tab.addEventListener('keydown', event => this.handleTabKeydown(event));\n });\n\n // default to the first tab/panel selected\n if (this.tabs.length > 0) this.tabs[0].selected = true;\n\n setTimeout(() => {\n this.selectTab();\n }, 1);\n this.determineOverflow();\n }\n\n handlePanelsSlotChange() {\n const panels = this.querySelectorAll('kemet-tab-panel');\n const panelElement = this.shadowRoot.getElementById('panels');\n let index = 0;\n\n panels.forEach((panel: KemetTabPanel) => {\n // give each panel an index to select by if link/panel is not used\n panel.index = index;\n index += 1;\n\n // store the list of panels\n this.panels = this.panels.concat(panel);\n });\n\n // default to the first tab/panel selected\n if (this.panels.length > 0) this.panels[0].selected = true;\n\n // add swipe support\n if (this.swipe) {\n panelElement.addEventListener('touchstart', event => this.handleTouchStart(event), false);\n panelElement.addEventListener('touchmove', event => this.handleTouchMove(event), false);\n }\n\n this.selectPanel();\n }\n\n handleLeftArrow() {\n const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[0];\n const previousElement = selectedElement.previousElementSibling as KemetTab;\n const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n if (this.selected) {\n this.selected = previousElement ? previousElement.link : selectedElement.link;\n } else {\n this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;\n }\n\n if (previousElement) {\n this.links.scrollLeft = previousElement.offsetLeft - 20;\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n handleRightArrow() {\n const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[this.tabs.length - 1];\n const nextElement = selectedElement.nextElementSibling as KemetTab;\n const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n if (this.selected) {\n this.selected = nextElement ? nextElement.link : selectedElement.link;\n } else {\n this.selectedIndex = selectedIndex < this.tabs.length - 1\n ? selectedIndex + 1\n : this.tabs.length - 1;\n }\n\n if (nextElement) {\n this.links.scrollLeft = nextElement.offsetLeft - 20;\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n handleTabClose(event: CustomEvent) {\n const tab = event.detail;\n const panel = this.panels[tab.index];\n\n this.selected = this.tabs[0].link;\n this.selectedIndex = 0;\n\n panel.remove();\n tab.remove();\n }\n\n makeInk(location: string) {\n if (this.hideInk) {\n return null;\n }\n\n if ((this.placement === 'top' || this.placement === 'bottom') && this.ink && location === 'links') {\n return html`<div part=\"ink\" style=\"width:${this.ink.width}; transform:translateX(${this.ink.positionX})\"></div>`;\n }\n\n if ((this.placement === 'left' || this.placement === 'right') && this.ink && location === 'host') {\n return html`<div part=\"ink\" style=\"height:${this.ink.height}; transform:translateY(${this.ink.positionY})\"></div>`;\n }\n\n return null;\n }\n\n makeDivider() {\n if (this.divider) {\n return html`<div part=\"divider\"></div>`;\n }\n\n return null;\n }\n\n makeLeftArrow() {\n if (this.overflow) {\n return html`<kemet-icon icon='chevron-left' size=\"20\" @click=${() => this.handleLeftArrow()}></kemet-icon>`;\n }\n\n return null;\n }\n\n makeRightArrow() {\n if (this.overflow) {\n return html`<kemet-icon icon='chevron-right' size=\"20\" @click=${() => this.handleRightArrow()}></kemet-icon>`;\n }\n\n return null;\n }\n\n selectTab() {\n const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n const overflowOffset = this.overflow ? marginLeft : 0;\n\n // if the user uses the selected attribute select by it\n if (this.selected) {\n this.tabs.forEach((tab) => {\n const tabName = tab.getAttribute('link');\n\n if (tabName === this.selected) {\n tab.selected = true;\n this.selected = tabName;\n\n this.ink = {\n width: `${tab.offsetWidth}px`,\n height: `${tab.offsetHeight}px`,\n positionX: `${tab.offsetLeft - overflowOffset}px`,\n positionY: `${tab.offsetTop}px`,\n };\n\n this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n } else {\n tab.selected = false;\n }\n });\n\n // otherwise select by index\n } else {\n this.tabs.forEach((tab) => {\n if (this.selectedIndex === tab.index) {\n tab.selected = true;\n\n this.ink = {\n width: `${tab.offsetWidth}px`,\n height: `${tab.offsetHeight}px`,\n positionX: `${tab.offsetLeft - overflowOffset}px`,\n positionY: `${tab.offsetTop}px`,\n };\n\n this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n } else {\n tab.selected = false;\n }\n });\n }\n }\n\n selectPanel() {\n // if the user uses the selected attribute select by it\n if (this.selected) {\n this.panels.forEach((panel) => {\n const panelName = panel.getAttribute('panel');\n\n if (this.panelEffect === 'fade' && panel.index !== 0) {\n panel.classList.add('push');\n }\n\n if (this.placement === 'left' || this.placement === 'right') {\n panel.classList.add('vertical');\n }\n\n if (panelName === this.selected) {\n panel.selected = true;\n this.animatePanel(panelName, null);\n } else {\n panel.selected = false;\n }\n });\n\n // otherwise select by index\n } else {\n this.panels.forEach((panel) => {\n if (this.panelEffect === 'fade' && panel.index !== 0) {\n panel.classList.add('push');\n }\n\n if (this.placement === 'left' || this.placement === 'right') {\n panel.classList.add('vertical');\n }\n\n if (this.selectedIndex === panel.index) {\n panel.selected = true;\n this.animatePanel(null, panel.index);\n } else {\n panel.selected = false;\n }\n });\n }\n }\n\n dispatchTabChange() {\n const details = {\n currentTabName: this.selected,\n currentTabIndex: this.selectedIndex,\n };\n\n emitEvent(this, 'kemet-tab-changed', details);\n }\n\n tabSelectedChange(event: CustomEvent) {\n if (this.selected) {\n // if selected has been set, use the string attribute\n this.selected = event.detail.getAttribute('link');\n } else {\n // otherwise use the generated index\n this.selectedIndex = event.detail.index;\n }\n\n this.selectTab();\n this.selectPanel();\n this.dispatchTabChange();\n }\n\n determineFade() {\n this.panels.forEach((panel) => {\n // add fade class if panel effect is fade\n if (this.panelEffect === 'fade') panel.classList.add('fade');\n });\n }\n\n determineStacked() {\n this.panels.forEach((panel) => {\n // add fade class if panel effect is fade\n if (this.panelEffect === 'stacked') panel.classList.add('stacked');\n });\n }\n\n determineOverflow() {\n const tabsContainerWidth = this.offsetWidth;\n const tabElements = this.querySelectorAll('kemet-tab');\n\n let totalTabsWidth = 0;\n\n tabElements.forEach((tab) => {\n totalTabsWidth += tab.offsetWidth;\n });\n\n this.overflow = totalTabsWidth > tabsContainerWidth && (this.placement === 'top' || this.placement === 'bottom');\n }\n\n handleResize() {\n if (this.tabs && this.panels) {\n const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n const overflowOffset = this.overflow ? marginLeft : 0;\n const selectedElement = this.tabs.find(tab => tab.selected);\n\n if (selectedElement) {\n this.ink = {\n width: `${selectedElement.offsetWidth}px`,\n height: `${selectedElement.offsetHeight}px`,\n positionX: `${selectedElement.offsetLeft - overflowOffset}px`,\n positionY: `${selectedElement.offsetTop}px`,\n };\n }\n\n this.determineOverflow();\n\n if (this.selected) {\n this.animatePanel(this.selected, null);\n } else {\n this.animatePanel(null, this.selectedIndex);\n }\n }\n }\n\n animatePanel(panelName: string, panelIndex: number) {\n if (panelName) {\n const selectedPanel = this.querySelector(`[panel=\"${panelName}\"]`) as KemetTabPanelInterface;\n if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;\n } else {\n if (this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;\n }\n }\n\n handleTabKeydown(event: KeyboardEvent) {\n if (this.selected) {\n switch (event.key) {\n case 'Home':\n this.selected = this.tabs[0].getAttribute('link');\n break;\n case 'End':\n this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');\n break;\n case 'ArrowRight':\n const nextLinkElement = this.querySelector('kemet-tab[selected]').nextElementSibling;\n const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;\n\n if (nextLink) {\n this.selected = nextLink;\n }\n break;\n case 'ArrowLeft':\n const previousLinkElement = this.querySelector('kemet-tab[selected]').previousElementSibling;\n const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;\n\n if (previousLink) {\n this.selected = previousLink;\n }\n break;\n default: break;\n }\n\n this.tabs.find(tab => tab.link === this.selected).focus();\n } else {\n switch (event.key) {\n case 'Home':\n this.selectedIndex = 0;\n break;\n case 'End':\n this.selectedIndex = this.tabs.length - 1;\n break;\n case 'ArrowRight':\n if (this.selectedIndex < this.tabs.length - 1) {\n this.selectedIndex += 1;\n } else {\n this.selectedIndex = this.tabs.length - 1;\n }\n break;\n case 'ArrowLeft':\n if (this.selectedIndex < 1) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex -= 1;\n }\n break;\n default: break;\n }\n\n this.tabs[this.selectedIndex].focus();\n }\n }\n\n handleTouchStart(event: TouchEvent) {\n this.xDown = event.touches[0].clientX;\n this.yDown = event.touches[0].clientY;\n }\n\n handleTouchMove(event: TouchEvent) {\n if (!this.xDown || !this.yDown) {\n return;\n }\n\n const xUp = event.touches[0].clientX;\n const yUp = event.touches[0].clientY;\n const xDiff = this.xDown - xUp;\n const yDiff = this.yDown - yUp;\n\n const nextElement = this.querySelector('kemet-tab-panel[selected]')?.nextElementSibling;\n const next = nextElement ? nextElement.getAttribute('panel') : false;\n const previousElement = this.querySelector('kemet-tab-panel[selected]')?.previousElementSibling;\n const previous = previousElement ? previousElement.getAttribute('panel') : false;\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) {\n if (this.selected) {\n if (next) this.selected = next;\n } else {\n if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;\n }\n } else {\n if (this.selected) {\n if (previous) this.selected = previous;\n } else {\n if (this.selectedIndex > 0) this.selectedIndex -= 1;\n }\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n this.xDown = null;\n this.yDown = null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tabs': KemetTabs\n }\n}\n"]}
1
+ {"version":3,"file":"kemet-tabs.js","sourceRoot":"","sources":["../../../src/components/kemet-tabs/kemet-tabs.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-lonely-if */\n/* eslint-disable no-case-declarations */\nimport { LitElement, html } from 'lit';\nimport {\n customElement, property, query, state,\n} from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport {\n KemetTabPanelInterface, TypePanelEffect, TypePlacement, TypeTabsAlign,\n} from './types';\nimport { stylesKemetTabs } from './styles';\n\nimport type KemetTab from './kemet-tab';\nimport type KemetTabPanel from './kemet-tab-panel';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-tabs\n * @summary A group of tabs and panels.\n *\n * @prop {string} selected - The selected tab by name\n * @prop {number} selectedIndex - The selected tab by index\n * @prop {number} panelPosition - Positions the current panel\n * @prop {string} panelEffect - The transition effect for panels\n * @prop {boolean} swipe - Determines whether to enable swipe behavior\n * @prop {string} placement - Places the tabs to the top, right, bottom, or left\n * @prop {boolean} divider - Determines whether to show a divider line\n * @prop {string} tabsAlign - Spacing alignment of the tabs\n * @prop {object} ink - An object that contains information about the ink\n * @prop {boolean} hideInk - Determines whether to hide the ink\n * @prop {boolean} overflow - Is true when the space of the tabs is larger than it's container\n *\n * @slot tab - Place the tabs here.\n * @slot panel - Place the panels here.\n *\n * @csspart links - The container for the tablist.\n * @csspart tablist - Contains the tabs.\n * @csspart panels - Contains the panels.\n * @csspart ink - The ink element.\n * @csspart divider - The divider element.\n *\n * @cssproperty --kemet-tabs-ink-size - The thickness of the ink.\n * @cssproperty --kemet-tabs-ink-radius - The radius on the ink.\n * @cssproperty --kemet-tabs-ink-color - The color of the ink.\n * @cssproperty --kemet-tabs-divider-size - The thickness of the divider.\n * @cssproperty --kemet-tabs-divider-color - The color of the divider.\n * @cssproperty --kemet-tabs-transition-speed - The transition speed of the panels.\n * @cssproperty --kemet-tabs-spacer - The space between tabs and panels.\n *\n * @event kemet-tab-changed - Fires when a tab is changed\n *\n */\n\ninterface Iink {\n width: string;\n height: string;\n positionX: string;\n positionY: string;\n}\n\n@customElement('kemet-tabs')\nexport default class KemetTabs extends LitElement {\n static styles = [stylesKemetTabs];\n\n @property({ type: String, reflect: true })\n selected: string;\n\n @property({ type: Number })\n selectedIndex: number = 0;\n\n @property({ type: Number })\n panelPosition: number = 0;\n\n @property({ type: String, reflect: true, attribute: 'panel-effect' })\n panelEffect: TypePanelEffect = 'none';\n\n @property({ type: Boolean })\n swipe: boolean;\n\n @property({ type: String, reflect: true })\n placement: TypePlacement = 'top';\n\n @property({ type: Boolean })\n divider: boolean;\n\n @property({ type: String, reflect: true, attribute: 'tabs-align' })\n tabsAlign: TypeTabsAlign = 'center';\n\n @property({ type: Object })\n ink: Iink;\n\n @property({ type: Boolean, attribute: 'hide-ink' })\n hideInk: boolean = false;\n\n @property({ type: Boolean, reflect: true })\n overflow: boolean;\n\n @state()\n tabs: KemetTab[];\n\n @state()\n panels: KemetTabPanel[];\n\n @state()\n xDown: number | null;\n\n @state()\n yDown: number | null;\n\n @state()\n links: HTMLElement;\n\n @query('#panels')\n panelsElement: HTMLElement;\n\n constructor() {\n super();\n\n this.addEventListener('kemet-tab-selected', this.tabSelectedChange.bind(this));\n this.addEventListener('kemet-tab-close', this.handleTabClose.bind(this));\n window.addEventListener('resize', this.handleResize.bind(this));\n }\n\n firstUpdated() {\n // standard properties\n this.tabs = [];\n this.panels = [];\n this.xDown = null;\n this.yDown = null;\n\n this.links = this.shadowRoot.getElementById('links');\n }\n\n render() {\n return html`\n ${this.makeLeftArrow()}\n ${this.makeRightArrow()}\n <div id=\"links\" part=\"links\">\n <div part='tablist' role=\"tablist\">\n <slot name=\"tab\" @slotchange=${() => this.handleLinksSlotChange()}></slot>\n </div>\n ${this.makeInk('links')}\n </div>\n ${this.makeInk('host')}\n ${this.makeDivider()}\n <section id=\"panels\" part=\"panels\" style=\"transform:translateX(${this.panelPosition}px);\">\n <div>\n <slot name=\"panel\" @slotchange=${() => this.handlePanelsSlotChange()}></slot>\n </div>\n </section>\n `;\n }\n\n updated(prevProps: Map<string, never>) {\n this.determineFade();\n this.determineStacked();\n\n if (prevProps.get('selected') && prevProps.get('selected') !== this.selected) {\n this.selectTab();\n this.selectPanel();\n }\n\n if (typeof prevProps.get('selectedIndex') === 'number' && prevProps.get('selectedIndex') !== this.selected) {\n this.selectTab();\n this.selectPanel();\n }\n }\n\n handleLinksSlotChange() {\n const tabs = this.querySelectorAll('kemet-tab');\n let index = 0;\n\n tabs.forEach((tab: KemetTab) => {\n // give each tab an index to select by if link/panel is not used\n tab.index = index;\n index += 1;\n\n // store the list of tabs\n this.tabs = this.tabs.concat(tab);\n\n // add keyboard support\n tab.addEventListener('keydown', event => this.handleTabKeydown(event));\n });\n\n // default to the first tab/panel selected\n if (this.tabs.length > 0) this.tabs[0].selected = true;\n\n setTimeout(() => {\n this.selectTab();\n }, 1);\n this.determineOverflow();\n }\n\n handlePanelsSlotChange() {\n const panels = this.querySelectorAll('kemet-tab-panel');\n const panelElement = this.shadowRoot.getElementById('panels');\n let index = 0;\n\n panels.forEach((panel: KemetTabPanel) => {\n // give each panel an index to select by if link/panel is not used\n panel.index = index;\n index += 1;\n\n // store the list of panels\n this.panels = this.panels.concat(panel);\n });\n\n // default to the first tab/panel selected\n if (this.panels.length > 0) this.panels[0].selected = true;\n\n // add swipe support\n if (this.swipe) {\n panelElement.addEventListener('touchstart', event => this.handleTouchStart(event), false);\n panelElement.addEventListener('touchmove', event => this.handleTouchMove(event), false);\n }\n\n this.selectPanel();\n }\n\n handleLeftArrow() {\n const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[0];\n const previousElement = selectedElement.previousElementSibling as KemetTab;\n const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n if (this.selected) {\n this.selected = previousElement ? previousElement.link : selectedElement.link;\n } else {\n this.selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : 0;\n }\n\n if (previousElement) {\n this.links.scrollLeft = previousElement.offsetLeft - 20;\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n handleRightArrow() {\n const selectedElement = this.tabs.find(tab => tab.selected) || this.tabs[this.tabs.length - 1];\n const nextElement = selectedElement.nextElementSibling as KemetTab;\n const selectedIndex = this.tabs.findIndex(tab => tab.selected);\n\n if (this.selected) {\n this.selected = nextElement ? nextElement.link : selectedElement.link;\n } else {\n this.selectedIndex = selectedIndex < this.tabs.length - 1\n ? selectedIndex + 1\n : this.tabs.length - 1;\n }\n\n if (nextElement) {\n this.links.scrollLeft = nextElement.offsetLeft - 20;\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n handleTabClose(event: CustomEvent) {\n const tab = event.detail;\n const panel = this.panels[tab.index];\n\n this.selected = this.tabs[0].link;\n this.selectedIndex = 0;\n\n panel.remove();\n tab.remove();\n }\n\n makeInk(location: string) {\n if (this.hideInk) {\n return null;\n }\n\n if ((this.placement === 'top' || this.placement === 'bottom') && this.ink && location === 'links') {\n return html`<div part=\"ink\" style=\"width:${this.ink.width}; transform:translateX(${this.ink.positionX})\"></div>`;\n }\n\n if ((this.placement === 'left' || this.placement === 'right') && this.ink && location === 'host') {\n return html`<div part=\"ink\" style=\"height:${this.ink.height}; transform:translateY(${this.ink.positionY})\"></div>`;\n }\n\n return null;\n }\n\n makeDivider() {\n if (this.divider) {\n return html`<div part=\"divider\"></div>`;\n }\n\n return null;\n }\n\n makeLeftArrow() {\n if (this.overflow) {\n return html`<kemet-icon icon='chevron-left' size=\"20\" @click=${() => this.handleLeftArrow()}></kemet-icon>`;\n }\n\n return null;\n }\n\n makeRightArrow() {\n if (this.overflow) {\n return html`<kemet-icon icon='chevron-right' size=\"20\" @click=${() => this.handleRightArrow()}></kemet-icon>`;\n }\n\n return null;\n }\n\n selectTab() {\n const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n const overflowOffset = this.overflow ? marginLeft : 0;\n\n // if the user uses the selected attribute select by it\n if (this.selected) {\n this.tabs.forEach((tab) => {\n const tabName = tab.getAttribute('link');\n\n if (tabName === this.selected) {\n tab.selected = true;\n this.selected = tabName;\n\n this.ink = {\n width: `${tab.offsetWidth}px`,\n height: `${tab.offsetHeight}px`,\n positionX: `${tab.offsetLeft - overflowOffset}px`,\n positionY: `${tab.offsetTop}px`,\n };\n\n this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n } else {\n tab.selected = false;\n }\n });\n\n // otherwise select by index\n } else {\n this.tabs.forEach((tab) => {\n if (this.selectedIndex === tab.index) {\n tab.selected = true;\n\n this.ink = {\n width: `${tab.offsetWidth}px`,\n height: `${tab.offsetHeight}px`,\n positionX: `${tab.offsetLeft - overflowOffset}px`,\n positionY: `${tab.offsetTop}px`,\n };\n\n this.links.scrollLeft = tab.offsetLeft - overflowOffset;\n } else {\n tab.selected = false;\n }\n });\n }\n }\n\n selectPanel() {\n // if the user uses the selected attribute select by it\n if (this.selected) {\n this.panels.forEach((panel) => {\n const panelName = panel.getAttribute('panel');\n\n if (this.panelEffect === 'fade' && panel.index !== 0) {\n panel.classList.add('push');\n }\n\n if (this.placement === 'left' || this.placement === 'right') {\n panel.classList.add('vertical');\n }\n\n if (panelName === this.selected) {\n panel.selected = true;\n this.animatePanel(panelName, null);\n } else {\n panel.selected = false;\n }\n });\n\n // otherwise select by index\n } else {\n this.panels.forEach((panel) => {\n if (this.panelEffect === 'fade' && panel.index !== 0) {\n panel.classList.add('push');\n }\n\n if (this.placement === 'left' || this.placement === 'right') {\n panel.classList.add('vertical');\n }\n\n if (this.selectedIndex === panel.index) {\n panel.selected = true;\n this.animatePanel(null, panel.index);\n } else {\n panel.selected = false;\n }\n });\n }\n }\n\n dispatchTabChange() {\n const details = {\n currentTabName: this.selected,\n currentTabIndex: this.selectedIndex,\n };\n\n emitEvent(this, 'kemet-tab-changed', details);\n }\n\n tabSelectedChange(event: CustomEvent) {\n if (this.selected) {\n // if selected has been set, use the string attribute\n this.selected = event.detail.getAttribute('link');\n } else {\n // otherwise use the generated index\n this.selectedIndex = event.detail.index;\n }\n\n this.selectTab();\n this.selectPanel();\n this.dispatchTabChange();\n }\n\n determineFade() {\n this.panels.forEach((panel) => {\n // add fade class if panel effect is fade\n if (this.panelEffect === 'fade') panel.classList.add('fade');\n });\n }\n\n determineStacked() {\n this.panels.forEach((panel) => {\n // add fade class if panel effect is fade\n if (this.panelEffect === 'stacked') panel.classList.add('stacked');\n });\n }\n\n determineOverflow() {\n const tabsContainerWidth = this.offsetWidth;\n const tabElements = this.querySelectorAll('kemet-tab');\n\n let totalTabsWidth = 0;\n\n tabElements.forEach((tab) => {\n totalTabsWidth += tab.offsetWidth;\n });\n\n this.overflow = totalTabsWidth > tabsContainerWidth && (this.placement === 'top' || this.placement === 'bottom');\n }\n\n handleResize() {\n if (this.tabs && this.panels) {\n const marginLeft = this.links ? parseInt(window.getComputedStyle(this.links).marginLeft.replace('px', ''), 10) : 0;\n const overflowOffset = this.overflow ? marginLeft : 0;\n const selectedElement = this.tabs.find(tab => tab.selected);\n\n if (selectedElement) {\n this.ink = {\n width: `${selectedElement.offsetWidth}px`,\n height: `${selectedElement.offsetHeight}px`,\n positionX: `${selectedElement.offsetLeft - overflowOffset}px`,\n positionY: `${selectedElement.offsetTop}px`,\n };\n }\n\n this.determineOverflow();\n\n if (this.selected) {\n this.animatePanel(this.selected, null);\n } else {\n this.animatePanel(null, this.selectedIndex);\n }\n }\n }\n\n animatePanel(panelName: string, panelIndex: number) {\n if (panelName) {\n const selectedPanel = this.querySelector(`[panel=\"${panelName}\"]`) as KemetTabPanelInterface;\n if (selectedPanel) this.panelPosition = selectedPanel.offsetLeft * -1;\n } else {\n if (this.panels[panelIndex]) this.panelPosition = this.panels[panelIndex].offsetLeft * -1;\n }\n }\n\n handleTabKeydown(event: KeyboardEvent) {\n if (this.selected) {\n switch (event.key) {\n case 'Home':\n this.selected = this.tabs[0].getAttribute('link');\n break;\n case 'End':\n this.selected = this.tabs[this.tabs.length - 1].getAttribute('link');\n break;\n case 'ArrowRight':\n const nextLinkElement = this.querySelector('kemet-tab[selected]').nextElementSibling;\n const nextLink = nextLinkElement ? nextLinkElement.getAttribute('link') : false;\n\n if (nextLink) {\n this.selected = nextLink;\n }\n break;\n case 'ArrowLeft':\n const previousLinkElement = this.querySelector('kemet-tab[selected]').previousElementSibling;\n const previousLink = previousLinkElement ? previousLinkElement.getAttribute('link') : false;\n\n if (previousLink) {\n this.selected = previousLink;\n }\n break;\n default: break;\n }\n\n this.tabs.find(tab => tab.link === this.selected).focus();\n } else {\n switch (event.key) {\n case 'Home':\n this.selectedIndex = 0;\n break;\n case 'End':\n this.selectedIndex = this.tabs.length - 1;\n break;\n case 'ArrowRight':\n if (this.selectedIndex < this.tabs.length - 1) {\n this.selectedIndex += 1;\n } else {\n this.selectedIndex = this.tabs.length - 1;\n }\n break;\n case 'ArrowLeft':\n if (this.selectedIndex < 1) {\n this.selectedIndex = 0;\n } else {\n this.selectedIndex -= 1;\n }\n break;\n default: break;\n }\n\n this.tabs[this.selectedIndex].focus();\n }\n }\n\n handleTouchStart(event: TouchEvent) {\n this.xDown = event.touches[0].clientX;\n this.yDown = event.touches[0].clientY;\n }\n\n handleTouchMove(event: TouchEvent) {\n if (!this.xDown || !this.yDown) {\n return;\n }\n\n const xUp = event.touches[0].clientX;\n const yUp = event.touches[0].clientY;\n const xDiff = this.xDown - xUp;\n const yDiff = this.yDown - yUp;\n\n const nextElement = this.querySelector('kemet-tab-panel[selected]')?.nextElementSibling;\n const next = nextElement ? nextElement.getAttribute('panel') : false;\n const previousElement = this.querySelector('kemet-tab-panel[selected]')?.previousElementSibling;\n const previous = previousElement ? previousElement.getAttribute('panel') : false;\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) {\n if (this.selected) {\n if (next) this.selected = next;\n } else {\n if (this.selectedIndex < this.tabs.length) this.selectedIndex += 1;\n }\n } else {\n if (this.selected) {\n if (previous) this.selected = previous;\n } else {\n if (this.selectedIndex > 0) this.selectedIndex -= 1;\n }\n }\n\n this.selectTab();\n this.selectPanel();\n }\n\n this.xDown = null;\n this.yDown = null;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-tabs': KemetTabs\n }\n}\n"]}
@@ -1,6 +1,6 @@
1
- export declare type TypePanelEffect = 'none' | 'slide' | 'fade' | 'stacked';
2
- export declare type TypePlacement = 'top' | 'right' | 'bottom' | 'left';
3
- export declare type TypeTabsAlign = 'center' | 'between' | 'around' | 'evenly' | 'start' | 'end';
1
+ export type TypePanelEffect = 'none' | 'slide' | 'fade' | 'stacked';
2
+ export type TypePlacement = 'top' | 'right' | 'bottom' | 'left';
3
+ export type TypeTabsAlign = 'center' | 'between' | 'around' | 'evenly' | 'start' | 'end';
4
4
  export interface KemetTabsInterface extends HTMLElement {
5
5
  selected?: string;
6
6
  selectedIndex?: number;
@@ -5,7 +5,7 @@ import '../../kemet-tabs/kemet-tab';
5
5
  import '../../kemet-tabs/kemet-tab-panel';
6
6
  declare const meta: Meta;
7
7
  export default meta;
8
- declare type Story = StoryObj;
8
+ type Story = StoryObj;
9
9
  export declare const Standard: Story;
10
10
  export declare const Disabled: Story;
11
11
  export declare const Filled: Story;
@@ -1 +1 @@
1
- {"version":3,"file":"kemet-textarea.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/kemet-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesTextarea } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-textarea\n * @summary An enhanced textarea element.\n *\n * @prop {string} slug\n * @prop {string} name\n * @prop {string} placeholder\n * @prop {number} minlength\n * @prop {number} maxlength\n * @prop {string} inputmode\n * @prop {boolean} disabled\n * @prop {boolean} readonly\n * @prop {boolean} required\n * @prop {string} value\n * @prop {boolean} invalid\n * @prop {TypeStatus} status\n * @prop {boolean} validateOnBlur\n * @prop {boolean} rounded\n * @prop {boolean} filled\n * @prop {number} rows\n * @prop {boolean} autocorrect\n *\n *\n * @csspart textarea\n *\n * @cssproperty --kemet-textarea-padding - The padding on the textarea.\n * @cssproperty --kemet-textarea-border - The border of the textarea.\n * @cssproperty --kemet-textarea-border-color-error - The border of the error state.\n * @cssproperty --kemet-textarea-border-color-success - The border of the success state.\n * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-textarea-border-filled - The border on filled.\n * @cssproperty --kemet-textarea-color-filled - The color on filled.\n * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-textarea-background-color-error - The error state background color.\n * @cssproperty --kemet-textarea-background-color-success - The success state background color.\n * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.\n *\n */\n\n@customElement('kemet-textarea')\nexport default class KemetTextarea extends LitElement {\n formSubmitController: FormSubmitController;\n\n static styles = [stylesTextarea];\n\n @property({ type: String })\n slug: string = 'textarea';\n\n @property({ type: String })\n name: string = 'textarea';\n\n @property({ type: String })\n placeholder: string;\n\n @property({ type: Number })\n minlength: number;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: String })\n inputmode: string;\n\n @property({ type: Boolean })\n autofocus: boolean;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean;\n\n @property({ type: Boolean })\n readonly: boolean;\n\n @property({ type: Boolean, reflect: true })\n required: boolean;\n\n @property({ type: String })\n value: string = '';\n\n @property({ type: Boolean, reflect: true })\n invalid: boolean;\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: Number })\n rows: number = 4;\n\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlur: boolean;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean;\n\n @property({ type: Boolean, reflect: true })\n rounded: boolean;\n\n @property({ type: Boolean })\n autocorrect: boolean;\n\n @state()\n form: HTMLFormElement;\n\n @state()\n control: KemetFieldInterface;\n\n @state()\n textarea: HTMLTextAreaElement;\n\n @state()\n hasFocus: boolean;\n\n @state()\n validity: ValidityState;\n\n constructor() {\n super();\n\n /** @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n // elements\n this.form = this.closest('form');\n this.control = this.closest('kemet-field');\n this.textarea = this.shadowRoot.querySelector('textarea');\n }\n\n render() {\n return html`\n <textarea\n part=\"textarea\"\n id=${this.slug}\n name=${this.name}\n .value=${live(this.value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n placeholder=${ifDefined(this.placeholder)}\n rows=${ifDefined(this.rows)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n autocorrect=${ifDefined(this.autocorrect)}\n ?autofocus=${this.autofocus}\n spellcheck=${ifDefined(this.spellcheck)}\n inputmode=${ifDefined(this.inputmode)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @invalid=${this.handleInvalid}\n ></textarea>\n `;\n }\n\n /**\n * Handles when the textarea receives focus\n * @private\n */\n handleFocus() {\n this.hasFocus = true;\n\n /**\n * Fires when the input receives and loses focus\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-focused', {\n bubbles: true,\n composed: true,\n detail: true,\n }),\n );\n }\n\n /**\n * Handles when the textarea loses focus\n * @private\n */\n handleBlur() {\n this.hasFocus = false;\n\n /**\n * Fires when the input receives and loses focus\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-focused', {\n bubbles: true,\n composed: true,\n detail: false,\n }),\n );\n\n if (this.validateOnBlur && this.form && !this.form.noValidate) {\n this.textarea.checkValidity();\n this.validity = this.textarea.validity;\n }\n }\n\n /**\n * Handles when the textarea changes value\n * @private\n */\n handleChange() {\n this.value = this.textarea.value;\n\n if (this.textarea.checkValidity() && this.checkLimitValidity()) {\n this.invalid = false;\n this.status = 'standard';\n this.validity = this.textarea.validity;\n\n /**\n * Fires when there's a change in status\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'standard',\n validity: this.textarea.validity,\n element: this,\n },\n }),\n );\n }\n }\n\n /**\n * Handles when the textarea receives input\n * @private\n */\n handleInput() {\n this.value = this.textarea.value;\n\n /**\n * Fires when the input receives input\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-input', {\n bubbles: true,\n composed: true,\n detail: this.value,\n }),\n );\n }\n\n /**\n * Handles when the textarea has an error\n * @private\n */\n handleInvalid() {\n this.validity = this.textarea.validity;\n\n if (this.validateOnBlur) {\n this.invalid = true;\n this.status = 'error';\n\n /**\n * Fires when there's a change in status\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'error',\n validity: this.textarea.validity,\n element: this,\n },\n }),\n );\n }\n }\n\n /**\n * Checks the validity of the character limit for the count component\n * @private\n * @returns {boolean}\n */\n checkLimitValidity(): boolean {\n if (this.control) {\n const count = this.control.querySelector('kemet-count');\n if (count) {\n return this.value.length < count.limit;\n }\n }\n\n return true;\n }\n\n /**\n * Checks the validity of the standard input\n * @public\n * @returns {boolean}\n */\n checkValidity(): boolean {\n return this.textarea.checkValidity();\n }\n\n /**\n * Focuses the standard input\n * @public\n */\n focus() {\n return this.textarea.focus();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-textarea': KemetTextarea\n }\n}\n"]}
1
+ {"version":3,"file":"kemet-textarea.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/kemet-textarea.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { FormSubmitController } from '../../utilities/controllers/forms';\nimport { KemetFieldInterface } from '../kemet-field/types';\nimport { stylesTextarea } from './styles';\nimport { TypeStatus } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-textarea\n * @summary An enhanced textarea element.\n *\n * @prop {string} slug\n * @prop {string} name\n * @prop {string} placeholder\n * @prop {number} minlength\n * @prop {number} maxlength\n * @prop {string} inputmode\n * @prop {boolean} disabled\n * @prop {boolean} readonly\n * @prop {boolean} required\n * @prop {string} value\n * @prop {boolean} invalid\n * @prop {TypeStatus} status\n * @prop {boolean} validateOnBlur\n * @prop {boolean} rounded\n * @prop {boolean} filled\n * @prop {number} rows\n * @prop {boolean} autocorrect\n *\n *\n * @csspart textarea\n *\n * @cssproperty --kemet-textarea-padding - The padding on the textarea.\n * @cssproperty --kemet-textarea-border - The border of the textarea.\n * @cssproperty --kemet-textarea-border-color-error - The border of the error state.\n * @cssproperty --kemet-textarea-border-color-success - The border of the success state.\n * @cssproperty --kemet-textarea-border-color-warning - The border of the warning state.\n * @cssproperty --kemet-textarea-border-radius-rounded - The border radius on rounded.\n * @cssproperty --kemet-textarea-border-filled - The border on filled.\n * @cssproperty --kemet-textarea-color-filled - The color on filled.\n * @cssproperty --kemet-textarea-background-color-filled - The background-color on filled.\n * @cssproperty --kemet-textarea-background-color-error - The error state background color.\n * @cssproperty --kemet-textarea-background-color-success - The success state background color.\n * @cssproperty --kemet-textarea-background-color-warning - The warning state background color.\n *\n */\n\n@customElement('kemet-textarea')\nexport default class KemetTextarea extends LitElement {\n formSubmitController: FormSubmitController;\n\n static styles = [stylesTextarea];\n\n @property({ type: String })\n slug: string = 'textarea';\n\n @property({ type: String })\n name: string = 'textarea';\n\n @property({ type: String })\n placeholder: string;\n\n @property({ type: Number })\n minlength: number;\n\n @property({ type: Number })\n maxlength: number;\n\n @property({ type: String })\n inputmode: string;\n\n @property({ type: Boolean })\n autofocus: boolean;\n\n @property({ type: Boolean, reflect: true })\n disabled: boolean;\n\n @property({ type: Boolean })\n readonly: boolean;\n\n @property({ type: Boolean, reflect: true })\n required: boolean;\n\n @property({ type: String })\n value: string = '';\n\n @property({ type: Boolean, reflect: true })\n invalid: boolean;\n\n @property({ type: String, reflect: true })\n status: TypeStatus = 'standard';\n\n @property({ type: Number })\n rows: number = 4;\n\n @property({ type: Boolean, attribute: 'validate-on-blur' })\n validateOnBlur: boolean;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean;\n\n @property({ type: Boolean, reflect: true })\n rounded: boolean;\n\n @property({ type: Boolean })\n autocorrect: boolean;\n\n @state()\n form: HTMLFormElement;\n\n @state()\n control: KemetFieldInterface;\n\n @state()\n textarea: HTMLTextAreaElement;\n\n @state()\n hasFocus: boolean;\n\n @state()\n validity: ValidityState;\n\n constructor() {\n super();\n\n /** @internal */\n this.formSubmitController = new FormSubmitController(this);\n }\n\n firstUpdated() {\n // elements\n this.form = this.closest('form');\n this.control = this.closest('kemet-field');\n this.textarea = this.shadowRoot.querySelector('textarea');\n }\n\n render() {\n return html`\n <textarea\n part=\"textarea\"\n id=${this.slug}\n name=${this.name}\n .value=${live(this.value)}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n placeholder=${ifDefined(this.placeholder)}\n rows=${ifDefined(this.rows)}\n minlength=${ifDefined(this.minlength)}\n maxlength=${ifDefined(this.maxlength)}\n autocorrect=${ifDefined(this.autocorrect)}\n ?autofocus=${this.autofocus}\n spellcheck=${ifDefined(this.spellcheck)}\n inputmode=${ifDefined(this.inputmode)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.handleFocus}\n @blur=${this.handleBlur}\n @invalid=${this.handleInvalid}\n ></textarea>\n `;\n }\n\n /**\n * Handles when the textarea receives focus\n * @private\n */\n handleFocus() {\n this.hasFocus = true;\n\n /**\n * Fires when the input receives and loses focus\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-focused', {\n bubbles: true,\n composed: true,\n detail: true,\n }),\n );\n }\n\n /**\n * Handles when the textarea loses focus\n * @private\n */\n handleBlur() {\n this.hasFocus = false;\n\n /**\n * Fires when the input receives and loses focus\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-focused', {\n bubbles: true,\n composed: true,\n detail: false,\n }),\n );\n\n if (this.validateOnBlur && this.form && !this.form.noValidate) {\n this.textarea.checkValidity();\n this.validity = this.textarea.validity;\n }\n }\n\n /**\n * Handles when the textarea changes value\n * @private\n */\n handleChange() {\n this.value = this.textarea.value;\n\n if (this.textarea.checkValidity() && this.checkLimitValidity()) {\n this.invalid = false;\n this.status = 'standard';\n this.validity = this.textarea.validity;\n\n /**\n * Fires when there's a change in status\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'standard',\n validity: this.textarea.validity,\n element: this,\n },\n }),\n );\n }\n }\n\n /**\n * Handles when the textarea receives input\n * @private\n */\n handleInput() {\n this.value = this.textarea.value;\n\n /**\n * Fires when the input receives input\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-input', {\n bubbles: true,\n composed: true,\n detail: this.value,\n }),\n );\n }\n\n /**\n * Handles when the textarea has an error\n * @private\n */\n handleInvalid() {\n this.validity = this.textarea.validity;\n\n if (this.validateOnBlur) {\n this.invalid = true;\n this.status = 'error';\n\n /**\n * Fires when there's a change in status\n */\n this.dispatchEvent(\n new CustomEvent('kemet-input-status', {\n bubbles: true,\n composed: true,\n detail: {\n status: 'error',\n validity: this.textarea.validity,\n element: this,\n },\n }),\n );\n }\n }\n\n /**\n * Checks the validity of the character limit for the count component\n * @private\n * @returns {boolean}\n */\n checkLimitValidity(): boolean {\n if (this.control) {\n const count = this.control.querySelector('kemet-count');\n if (count) {\n return this.value.length < count.limit;\n }\n }\n\n return true;\n }\n\n /**\n * Checks the validity of the standard input\n * @public\n * @returns {boolean}\n */\n checkValidity(): boolean {\n return this.textarea.checkValidity();\n }\n\n /**\n * Focuses the standard input\n * @public\n */\n focus() {\n return this.textarea.focus();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-textarea': KemetTextarea\n }\n}\n"]}
@@ -0,0 +1,3 @@
1
+ import './kemet-textarea';
2
+ import '../kemet-field/kemet-field';
3
+ import '../kemet-count/kemet-count';
@@ -0,0 +1,69 @@
1
+ import { html, render } from 'lit';
2
+ import { expect } from '@wdio/globals';
3
+ import userEvent from '@testing-library/user-event';
4
+ import { fireEvent, waitFor } from '@testing-library/dom';
5
+ import './kemet-textarea';
6
+ import '../kemet-field/kemet-field';
7
+ import '../kemet-count/kemet-count';
8
+ describe('Textarea', () => {
9
+ const templates = {
10
+ default: html `
11
+ <kemet-field>
12
+ <kemet-textarea slot="input"></kemet-textarea>
13
+ </kemet-field>
14
+ `,
15
+ disabled: html `
16
+ <kemet-field>
17
+ <kemet-textarea disabled slot="input"></kemet-textarea>
18
+ </kemet-field>
19
+ `,
20
+ validateImmediately: html `
21
+ <kemet-field>
22
+ <kemet-textarea slot="input" required validate-on-blur></kemet-textarea>
23
+ <kemet-count slot="component" message="characters remaining." limit="6" validate-immediately></kemet-count>
24
+ </kemet-field>
25
+ `,
26
+ };
27
+ it('handles changes to the input properly', async () => {
28
+ render(templates.default, document.body);
29
+ const kemetTextarea = document.querySelector('kemet-textarea');
30
+ await waitFor(async () => {
31
+ const input = kemetTextarea.shadowRoot.querySelector('textarea');
32
+ // TODO figure out why useEvent is not generating code coverage
33
+ fireEvent.input(input, { target: { value: 'test' } });
34
+ fireEvent.change(input, { target: { value: 'test' } });
35
+ fireEvent.blur(input);
36
+ expect(kemetTextarea.status).toBe('standard');
37
+ });
38
+ });
39
+ it('focuses correctly', async () => {
40
+ render(templates.default, document.body);
41
+ const kemetTextarea = document.querySelector('kemet-textarea');
42
+ await waitFor(async () => {
43
+ kemetTextarea.focus();
44
+ fireEvent.focus(kemetTextarea.shadowRoot.querySelector('textarea'));
45
+ expect(kemetTextarea.hasFocus).toBe(true);
46
+ });
47
+ });
48
+ it('should not set a value when user types into a disabled field', async () => {
49
+ render(templates.disabled, document.body);
50
+ const kemetTextarea = document.querySelector('kemet-textarea');
51
+ await waitFor(async () => {
52
+ await userEvent.type(kemetTextarea.shadowRoot.querySelector('textarea'), 'random text');
53
+ await userEvent.click(document.body);
54
+ expect(kemetTextarea.value).toBeFalsy();
55
+ });
56
+ });
57
+ it('should error on blur when validate-on-blur is set and invalid value is entered', async () => {
58
+ render(templates.validateImmediately, document.body);
59
+ const kemetTextarea = document.querySelector('kemet-textarea');
60
+ await waitFor(async () => {
61
+ const input = kemetTextarea.shadowRoot.querySelector('textarea');
62
+ kemetTextarea.focus();
63
+ fireEvent.blur(input);
64
+ kemetTextarea.checkValidity();
65
+ expect(kemetTextarea.status).toBe('error');
66
+ });
67
+ });
68
+ });
69
+ //# sourceMappingURL=spec.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-textarea/spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport userEvent from '@testing-library/user-event';\nimport { fireEvent, waitFor } from '@testing-library/dom';\n\nimport './kemet-textarea';\nimport '../kemet-field/kemet-field';\nimport '../kemet-count/kemet-count';\n\ndescribe('Textarea', () => {\n const templates = {\n default: html`\n <kemet-field>\n <kemet-textarea slot=\"input\"></kemet-textarea>\n </kemet-field>\n `,\n disabled: html`\n <kemet-field>\n <kemet-textarea disabled slot=\"input\"></kemet-textarea>\n </kemet-field>\n `,\n validateImmediately: html`\n <kemet-field>\n <kemet-textarea slot=\"input\" required validate-on-blur></kemet-textarea>\n <kemet-count slot=\"component\" message=\"characters remaining.\" limit=\"6\" validate-immediately></kemet-count>\n </kemet-field>\n `,\n };\n\n it('handles changes to the input properly', async () => {\n render(templates.default, document.body);\n const kemetTextarea = document.querySelector('kemet-textarea');\n\n await waitFor(async () => {\n const input = kemetTextarea.shadowRoot.querySelector('textarea');\n // TODO figure out why useEvent is not generating code coverage\n fireEvent.input(input, { target: { value: 'test' } });\n fireEvent.change(input, { target: { value: 'test' } });\n fireEvent.blur(input);\n expect(kemetTextarea.status).toBe('standard');\n });\n });\n\n it('focuses correctly', async () => {\n render(templates.default, document.body);\n const kemetTextarea = document.querySelector('kemet-textarea');\n\n await waitFor(async () => {\n kemetTextarea.focus();\n fireEvent.focus(kemetTextarea.shadowRoot.querySelector('textarea'));\n expect(kemetTextarea.hasFocus).toBe(true);\n });\n });\n\n it('should not set a value when user types into a disabled field', async () => {\n render(templates.disabled, document.body);\n const kemetTextarea = document.querySelector('kemet-textarea');\n\n await waitFor(async () => {\n await userEvent.type(kemetTextarea.shadowRoot.querySelector('textarea'), 'random text');\n await userEvent.click(document.body);\n expect(kemetTextarea.value).toBeFalsy();\n });\n });\n\n it('should error on blur when validate-on-blur is set and invalid value is entered', async () => {\n render(templates.validateImmediately, document.body);\n const kemetTextarea = document.querySelector('kemet-textarea');\n\n await waitFor(async () => {\n const input = kemetTextarea.shadowRoot.querySelector('textarea');\n kemetTextarea.focus();\n fireEvent.blur(input);\n kemetTextarea.checkValidity();\n expect(kemetTextarea.status).toBe('error');\n });\n });\n});\n"]}
@@ -1,4 +1,4 @@
1
- export declare type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
1
+ export type TypeStatus = 'standard' | 'error' | 'success' | 'warning';
2
2
  export interface KemetTextareaInterface extends HTMLElement {
3
3
  slug?: string;
4
4
  name?: string;
@@ -0,0 +1,10 @@
1
+ import type { Meta, StoryObj } from '@storybook/web-components';
2
+ import '../kemet-timer';
3
+ import '../kemet-timer-display';
4
+ import '../../kemet-tabs/kemet-tabs';
5
+ import '../../kemet-tabs/kemet-tab';
6
+ import '../../kemet-tabs/kemet-tab-panel';
7
+ declare const meta: Meta;
8
+ export default meta;
9
+ type Story = StoryObj;
10
+ export declare const Standard: Story;