@pine-ds/core 1.0.0 → 1.0.1

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 (249) hide show
  1. package/dist/cjs/pds-accordion.cjs.entry.js +1 -1
  2. package/dist/cjs/pds-accordion.cjs.entry.js.map +1 -1
  3. package/dist/cjs/pds-button.cjs.entry.js +1 -1
  4. package/dist/cjs/pds-button.cjs.entry.js.map +1 -1
  5. package/dist/cjs/pds-checkbox_2.cjs.entry.js.map +1 -1
  6. package/dist/cjs/pds-input.cjs.entry.js +1 -1
  7. package/dist/cjs/pds-input.cjs.entry.js.map +1 -1
  8. package/dist/cjs/pds-progress.cjs.entry.js.map +1 -1
  9. package/dist/cjs/pds-radio.cjs.entry.js.map +1 -1
  10. package/dist/cjs/pds-sortable-item.cjs.entry.js +1 -1
  11. package/dist/cjs/pds-sortable-item.cjs.entry.js.map +1 -1
  12. package/dist/cjs/pds-sortable.cjs.entry.js.map +1 -1
  13. package/dist/cjs/pds-switch.cjs.entry.js +1 -1
  14. package/dist/cjs/pds-switch.cjs.entry.js.map +1 -1
  15. package/dist/cjs/pds-table-head-cell.cjs.entry.js +1 -1
  16. package/dist/cjs/pds-table-head-cell.cjs.entry.js.map +1 -1
  17. package/dist/cjs/pds-table-head.cjs.entry.js.map +1 -1
  18. package/dist/cjs/pds-tabs.cjs.entry.js +1 -1
  19. package/dist/cjs/pds-tabs.cjs.entry.js.map +1 -1
  20. package/dist/cjs/pds-tooltip.cjs.entry.js.map +1 -1
  21. package/dist/collection/components/pds-accordion/pds-accordion.css +6 -25
  22. package/dist/collection/components/pds-button/pds-button.css +18 -18
  23. package/dist/collection/components/pds-button/stories/pds-button.stories.js +1 -0
  24. package/dist/collection/components/pds-input/pds-input.css +1 -1
  25. package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.css +1 -1
  26. package/dist/collection/components/pds-switch/pds-switch.css +7 -7
  27. package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.css +2 -2
  28. package/dist/collection/components/pds-tabs/pds-tabs.css +1 -1
  29. package/dist/docs.json +1 -1
  30. package/dist/esm/pds-accordion.entry.js +1 -1
  31. package/dist/esm/pds-accordion.entry.js.map +1 -1
  32. package/dist/esm/pds-button.entry.js +1 -1
  33. package/dist/esm/pds-button.entry.js.map +1 -1
  34. package/dist/esm/pds-checkbox_2.entry.js.map +1 -1
  35. package/dist/esm/pds-input.entry.js +1 -1
  36. package/dist/esm/pds-input.entry.js.map +1 -1
  37. package/dist/esm/pds-progress.entry.js.map +1 -1
  38. package/dist/esm/pds-radio.entry.js.map +1 -1
  39. package/dist/esm/pds-sortable-item.entry.js +1 -1
  40. package/dist/esm/pds-sortable-item.entry.js.map +1 -1
  41. package/dist/esm/pds-sortable.entry.js.map +1 -1
  42. package/dist/esm/pds-switch.entry.js +1 -1
  43. package/dist/esm/pds-switch.entry.js.map +1 -1
  44. package/dist/esm/pds-table-head-cell.entry.js +1 -1
  45. package/dist/esm/pds-table-head-cell.entry.js.map +1 -1
  46. package/dist/esm/pds-table-head.entry.js.map +1 -1
  47. package/dist/esm/pds-tabs.entry.js +1 -1
  48. package/dist/esm/pds-tabs.entry.js.map +1 -1
  49. package/dist/esm/pds-tooltip.entry.js.map +1 -1
  50. package/dist/esm-es5/pds-accordion.entry.js +1 -1
  51. package/dist/esm-es5/pds-accordion.entry.js.map +1 -1
  52. package/dist/esm-es5/pds-button.entry.js +1 -1
  53. package/dist/esm-es5/pds-button.entry.js.map +1 -1
  54. package/dist/esm-es5/pds-checkbox_2.entry.js.map +1 -1
  55. package/dist/esm-es5/pds-input.entry.js +1 -1
  56. package/dist/esm-es5/pds-input.entry.js.map +1 -1
  57. package/dist/esm-es5/pds-progress.entry.js.map +1 -1
  58. package/dist/esm-es5/pds-radio.entry.js.map +1 -1
  59. package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
  60. package/dist/esm-es5/pds-sortable-item.entry.js.map +1 -1
  61. package/dist/esm-es5/pds-sortable.entry.js.map +1 -1
  62. package/dist/esm-es5/pds-switch.entry.js +1 -1
  63. package/dist/esm-es5/pds-switch.entry.js.map +1 -1
  64. package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
  65. package/dist/esm-es5/pds-table-head-cell.entry.js.map +1 -1
  66. package/dist/esm-es5/pds-table-head.entry.js.map +1 -1
  67. package/dist/esm-es5/pds-tabs.entry.js +1 -1
  68. package/dist/esm-es5/pds-tabs.entry.js.map +1 -1
  69. package/dist/esm-es5/pds-tooltip.entry.js.map +1 -1
  70. package/dist/pine-core/p-0a1e2528.system.entry.js.map +1 -1
  71. package/dist/pine-core/p-0a636312.system.entry.js.map +1 -1
  72. package/dist/pine-core/p-16e9d55b.entry.js.map +1 -1
  73. package/dist/pine-core/p-173f8d39.entry.js.map +1 -1
  74. package/dist/pine-core/p-2fe87b9d.entry.js.map +1 -1
  75. package/dist/pine-core/p-327e1afa.system.entry.js +2 -0
  76. package/dist/pine-core/p-327e1afa.system.entry.js.map +1 -0
  77. package/dist/pine-core/p-380e465b.entry.js +2 -0
  78. package/dist/pine-core/p-380e465b.entry.js.map +1 -0
  79. package/dist/pine-core/p-43783da1.system.entry.js +2 -0
  80. package/dist/pine-core/p-43783da1.system.entry.js.map +1 -0
  81. package/dist/pine-core/p-4f7ee11c.entry.js.map +1 -1
  82. package/dist/pine-core/p-5073b1c0.entry.js.map +1 -1
  83. package/dist/pine-core/p-5df59e63.system.entry.js +2 -0
  84. package/dist/pine-core/p-5df59e63.system.entry.js.map +1 -0
  85. package/dist/pine-core/p-61ab207f.entry.js.map +1 -1
  86. package/dist/pine-core/p-6e315022.entry.js +2 -0
  87. package/dist/pine-core/p-6e315022.entry.js.map +1 -0
  88. package/dist/pine-core/p-7546babc.entry.js +2 -0
  89. package/dist/pine-core/p-7546babc.entry.js.map +1 -0
  90. package/dist/pine-core/p-75c441ef.system.entry.js.map +1 -1
  91. package/dist/pine-core/p-7611d073.system.js +1 -1
  92. package/dist/pine-core/p-7f917c20.entry.js +2 -0
  93. package/dist/pine-core/p-7f917c20.entry.js.map +1 -0
  94. package/dist/pine-core/p-9e33f4fb.system.entry.js.map +1 -1
  95. package/dist/pine-core/p-b103a7a9.entry.js +2 -0
  96. package/dist/pine-core/p-b103a7a9.entry.js.map +1 -0
  97. package/dist/pine-core/p-bc1cb8e2.entry.js +2 -0
  98. package/dist/pine-core/p-bc1cb8e2.entry.js.map +1 -0
  99. package/dist/pine-core/p-c721d912.system.entry.js +2 -0
  100. package/dist/pine-core/p-c721d912.system.entry.js.map +1 -0
  101. package/dist/pine-core/p-cfb22651.system.entry.js.map +1 -1
  102. package/dist/pine-core/p-d0828f12.entry.js +2 -0
  103. package/dist/pine-core/p-d0828f12.entry.js.map +1 -0
  104. package/dist/pine-core/p-dacd68cf.system.entry.js.map +1 -1
  105. package/dist/pine-core/p-de79befb.system.entry.js +2 -0
  106. package/dist/pine-core/p-de79befb.system.entry.js.map +1 -0
  107. package/dist/pine-core/p-e3455d30.system.entry.js +2 -0
  108. package/dist/pine-core/p-e3455d30.system.entry.js.map +1 -0
  109. package/dist/pine-core/p-f12c58dc.system.entry.js +2 -0
  110. package/dist/pine-core/p-f12c58dc.system.entry.js.map +1 -0
  111. package/dist/pine-core/pine-core.css +1 -1
  112. package/dist/pine-core/pine-core.esm.js +1 -1
  113. package/package.json +1 -1
  114. package/components/custom-elements.d.ts +0 -2
  115. package/components/index.d.ts +0 -92
  116. package/components/index.js +0 -32
  117. package/components/index.js.map +0 -1
  118. package/components/index2.js +0 -14
  119. package/components/index2.js.map +0 -1
  120. package/components/package.json +0 -9
  121. package/components/pds-accordion.d.ts +0 -11
  122. package/components/pds-accordion.js +0 -74
  123. package/components/pds-accordion.js.map +0 -1
  124. package/components/pds-avatar.d.ts +0 -11
  125. package/components/pds-avatar.js +0 -103
  126. package/components/pds-avatar.js.map +0 -1
  127. package/components/pds-box.d.ts +0 -11
  128. package/components/pds-box.js +0 -124
  129. package/components/pds-box.js.map +0 -1
  130. package/components/pds-button.d.ts +0 -11
  131. package/components/pds-button.js +0 -8
  132. package/components/pds-button.js.map +0 -1
  133. package/components/pds-button2.js +0 -84
  134. package/components/pds-button2.js.map +0 -1
  135. package/components/pds-checkbox.d.ts +0 -11
  136. package/components/pds-checkbox.js +0 -8
  137. package/components/pds-checkbox.js.map +0 -1
  138. package/components/pds-checkbox2.js +0 -86
  139. package/components/pds-checkbox2.js.map +0 -1
  140. package/components/pds-chip.d.ts +0 -11
  141. package/components/pds-chip.js +0 -78
  142. package/components/pds-chip.js.map +0 -1
  143. package/components/pds-copytext.d.ts +0 -11
  144. package/components/pds-copytext.js +0 -88
  145. package/components/pds-copytext.js.map +0 -1
  146. package/components/pds-divider.d.ts +0 -11
  147. package/components/pds-divider.js +0 -54
  148. package/components/pds-divider.js.map +0 -1
  149. package/components/pds-icon.js +0 -8
  150. package/components/pds-icon.js.map +0 -1
  151. package/components/pds-icon2.js +0 -359
  152. package/components/pds-icon2.js.map +0 -1
  153. package/components/pds-image.d.ts +0 -11
  154. package/components/pds-image.js +0 -55
  155. package/components/pds-image.js.map +0 -1
  156. package/components/pds-input.d.ts +0 -11
  157. package/components/pds-input.js +0 -72
  158. package/components/pds-input.js.map +0 -1
  159. package/components/pds-label.js +0 -39
  160. package/components/pds-label.js.map +0 -1
  161. package/components/pds-link.d.ts +0 -11
  162. package/components/pds-link.js +0 -65
  163. package/components/pds-link.js.map +0 -1
  164. package/components/pds-progress.d.ts +0 -11
  165. package/components/pds-progress.js +0 -49
  166. package/components/pds-progress.js.map +0 -1
  167. package/components/pds-radio.d.ts +0 -11
  168. package/components/pds-radio.js +0 -78
  169. package/components/pds-radio.js.map +0 -1
  170. package/components/pds-row.d.ts +0 -11
  171. package/components/pds-row.js +0 -72
  172. package/components/pds-row.js.map +0 -1
  173. package/components/pds-sortable-item.d.ts +0 -11
  174. package/components/pds-sortable-item.js +0 -58
  175. package/components/pds-sortable-item.js.map +0 -1
  176. package/components/pds-sortable.d.ts +0 -11
  177. package/components/pds-sortable.js +0 -2722
  178. package/components/pds-sortable.js.map +0 -1
  179. package/components/pds-switch.d.ts +0 -11
  180. package/components/pds-switch.js +0 -82
  181. package/components/pds-switch.js.map +0 -1
  182. package/components/pds-tab.d.ts +0 -11
  183. package/components/pds-tab.js +0 -53
  184. package/components/pds-tab.js.map +0 -1
  185. package/components/pds-table-body.d.ts +0 -11
  186. package/components/pds-table-body.js +0 -36
  187. package/components/pds-table-body.js.map +0 -1
  188. package/components/pds-table-cell.d.ts +0 -11
  189. package/components/pds-table-cell.js +0 -8
  190. package/components/pds-table-cell.js.map +0 -1
  191. package/components/pds-table-cell2.js +0 -72
  192. package/components/pds-table-cell2.js.map +0 -1
  193. package/components/pds-table-head-cell.d.ts +0 -11
  194. package/components/pds-table-head-cell.js +0 -8
  195. package/components/pds-table-head-cell.js.map +0 -1
  196. package/components/pds-table-head-cell2.js +0 -96
  197. package/components/pds-table-head-cell2.js.map +0 -1
  198. package/components/pds-table-head.d.ts +0 -11
  199. package/components/pds-table-head.js +0 -56
  200. package/components/pds-table-head.js.map +0 -1
  201. package/components/pds-table-row.d.ts +0 -11
  202. package/components/pds-table-row.js +0 -78
  203. package/components/pds-table-row.js.map +0 -1
  204. package/components/pds-table.d.ts +0 -11
  205. package/components/pds-table.js +0 -100
  206. package/components/pds-table.js.map +0 -1
  207. package/components/pds-tabpanel.d.ts +0 -11
  208. package/components/pds-tabpanel.js +0 -45
  209. package/components/pds-tabpanel.js.map +0 -1
  210. package/components/pds-tabs.d.ts +0 -11
  211. package/components/pds-tabs.js +0 -119
  212. package/components/pds-tabs.js.map +0 -1
  213. package/components/pds-textarea.d.ts +0 -11
  214. package/components/pds-textarea.js +0 -82
  215. package/components/pds-textarea.js.map +0 -1
  216. package/components/pds-tooltip.d.ts +0 -11
  217. package/components/pds-tooltip.js +0 -178
  218. package/components/pds-tooltip.js.map +0 -1
  219. package/dist/pine-core/p-12a4c0ae.system.entry.js +0 -2
  220. package/dist/pine-core/p-12a4c0ae.system.entry.js.map +0 -1
  221. package/dist/pine-core/p-206b272d.entry.js +0 -2
  222. package/dist/pine-core/p-206b272d.entry.js.map +0 -1
  223. package/dist/pine-core/p-2e01613b.entry.js +0 -2
  224. package/dist/pine-core/p-2e01613b.entry.js.map +0 -1
  225. package/dist/pine-core/p-2f758669.system.entry.js +0 -2
  226. package/dist/pine-core/p-2f758669.system.entry.js.map +0 -1
  227. package/dist/pine-core/p-4dfae634.system.entry.js +0 -2
  228. package/dist/pine-core/p-4dfae634.system.entry.js.map +0 -1
  229. package/dist/pine-core/p-8ce3a7ef.entry.js +0 -2
  230. package/dist/pine-core/p-8ce3a7ef.entry.js.map +0 -1
  231. package/dist/pine-core/p-94371829.system.entry.js +0 -2
  232. package/dist/pine-core/p-94371829.system.entry.js.map +0 -1
  233. package/dist/pine-core/p-b48975f0.system.entry.js +0 -2
  234. package/dist/pine-core/p-b48975f0.system.entry.js.map +0 -1
  235. package/dist/pine-core/p-b52c9d3d.entry.js +0 -2
  236. package/dist/pine-core/p-b52c9d3d.entry.js.map +0 -1
  237. package/dist/pine-core/p-c1249ab9.entry.js +0 -2
  238. package/dist/pine-core/p-c1249ab9.entry.js.map +0 -1
  239. package/dist/pine-core/p-c3828098.entry.js +0 -2
  240. package/dist/pine-core/p-c3828098.entry.js.map +0 -1
  241. package/dist/pine-core/p-d73e2a61.system.entry.js +0 -2
  242. package/dist/pine-core/p-d73e2a61.system.entry.js.map +0 -1
  243. package/dist/pine-core/p-f71ff6cb.system.entry.js +0 -2
  244. package/dist/pine-core/p-f71ff6cb.system.entry.js.map +0 -1
  245. package/dist/pine-core/p-fffaa868.entry.js +0 -2
  246. package/dist/pine-core/p-fffaa868.entry.js.map +0 -1
  247. package/hydrate/index.d.ts +0 -218
  248. package/hydrate/index.js +0 -13120
  249. package/hydrate/package.json +0 -6
@@ -1 +0,0 @@
1
- {"version":3,"names":["pdsSwitchCss","PdsSwitchStyle0","PdsSwitch","this","onSwitchUpdate","e","disabled","pdsSwitchChange","emit","switchClassNames","switchClasses","invalid","helperMessage","undefined","render","h","Host","key","class","assignDescription","componentId","checked","id","name","onChange","required","type","value","PdsLabel","classNames","htmlFor","text","label","messageId","errorMessage"],"sources":["src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n --border-radius-input: var(--pine-border-radius-200);\n --box-shadow-focus: 0 0 0 2px var(--color-outline-focus);\n --box-shadow-focus-error: 0 0 0 2px var(--color-outline-focus-error);\n --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);\n\n --color-background-checked: var(--pine-color-charcoal-400);\n --color-background-checked-hover: var(--pine-color-charcoal-400);\n --color-background-disabled: var(--pine-color-grey-300);\n --color-background-hover: var(--pine-color-grey-500);\n --color-background-input-default: var(--pine-color-grey-400);\n --color-input-toggle: var(--pine-color-white);\n --color-message-text: var(--pine-color-charcoal-200);\n --color-outline-focus: var(--pine-color-blue-200);\n --color-outline-focus-error: var(--pine-color-red-200);\n --color-text-default: var(--pine-color-charcoal-400);\n --color-text-disabled: var(--pine-color-grey-500);\n --color-text-error: var(--pine-color-red-300);\n\n --dimension-input-height: 20px;\n --dimension-input-width: 36px;\n\n --line-height-label: var(--pine-line-height-150);\n\n --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));\n --sizing-label-gap-size: 12px;\n --spacing-input-toggle-offset: 2px;\n --spacing-message-block: var(--pine-spacing-050);\n --spacing-message-inline: calc(var(--dimension-input-width) + var(--sizing-label-gap-size));\n\n --transition-timing: 0.15s ease-out;\n\n\n align-items: flex-start;\n color: var(--color-text-default);\n display: inline-flex;\n flex-flow: row wrap;\n margin-block-end: var(--pine-spacing-md);\n position: relative;\n}\n\n:host(.pds-switch--error) {\n color: var(--color-text-error);\n\n input,\n input:checked,\n input:hover:not(:disabled):not(:checked) {\n background-color: var(--color-text-error);\n }\n\n input:focus-visible:not(:disabled):not(:checked) {\n box-shadow: var(--box-shadow-focus-error);\n }\n}\n\n// switch container\ninput {\n appearance: none;\n background: var(--color-background-input-default);\n border: 0;\n border-radius: var(--border-radius-input);\n cursor: pointer;\n display: inline-block;\n height: var(--dimension-input-height);\n margin: 0;\n padding: 0;\n position: relative;\n transform: translateY(2px);\n transition: var(--transition-timing);\n transition-property: background, border, color;\n width: var(--dimension-input-width);\n\n // switch toggle\n &::after {\n background: var(--color-input-toggle);\n border-radius: 50%;\n box-shadow: var(--box-shadow-input-toggle);\n content: \"\";\n display: block;\n height: var(--sizing-input-toggle-size);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n position: absolute;\n transform: translate3d(-100%, -50%, 0);\n transition: transform var(--transition-timing);\n width: var(--sizing-input-toggle-size);\n }\n}\n\nlabel {\n cursor: pointer;\n display: inline-flex;\n flex-grow: 1;\n line-height: var(--line-height-label);\n margin-inline-start: var(--sizing-label-gap-size);\n\n .pds-switch--error & {\n color: inherit;\n }\n}\n\n// Help and error messages\n.pds-switch__message {\n color: var(--color-message-text);\n flex: 1 0 100%;\n font-size: var(--pine-font-size-body-sm);\n line-height: var(--pine-line-height-sm);\n margin-inline-start: var(--spacing-message-inline);\n\n + .pds-switch__message {\n margin-block-start: var(--spacing-message-block);\n }\n}\n\n.pds-switch__message--error {\n color: inherit;\n}\n\n// Disabled state\ninput:disabled {\n background-color: var(--color-background-disabled);\n cursor: not-allowed;\n\n ~ label {\n color: var(--color-text-disabled);\n cursor: initial;\n }\n\n .pds-switch__message {\n color: initial;\n }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n background-color: var(--color-background-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n box-shadow: var(--box-shadow-focus);\n outline: none;\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n background-color: currentColor;\n color: var(--color-background-checked);\n\n &:hover {\n border-color: currentColor;\n color: var(--color-background-checked-hover);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n tag: 'pds-switch',\n styleUrl: 'pds-switch.scss',\n shadow: true,\n})\nexport class PdsSwitch {\n @Element() el: HTMLPdsSwitchElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines the input 'checked' state\n */\n @Prop() checked = false;\n\n /**\n * Determines the input 'disabled' state, preventing user interaction\n */\n @Prop() disabled? = false;\n\n /**\n * Displays message text describing an invalid state\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays help text for additional description of an input\n */\n @Prop() helperMessage: string;\n\n /**\n * Determines the input 'invalid' state, signifying an error is present\n */\n @Prop() invalid? = false;\n\n /**\n * Displays text to describe the input\n */\n @Prop() label!: string;\n\n /**\n * Identifies form data and unifies a group of radio inputs for toggling a single property/value\n */\n @Prop() name: string;\n\n /**\n * Determines the 'required' state of the input\n */\n @Prop() required? = false;\n\n /**\n * Specifies the underlying input element type\n * @defaultValue 'checkbox'\n */\n @Prop() type: 'checkbox' | 'radio' = 'checkbox';\n\n /**\n * Provides input with a string submitted in form data, and can be used to distinguish radio inputs\n */\n @Prop() value: string;\n\n /**\n * Emits an event on input change\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n /**\n * Generate switch classes\n */\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type={this.type}\n value={this.value}\n />\n <PdsLabel classNames=\"pds-switch__label\" htmlFor={this.componentId} text={this.label} />\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"mappings":"kHAAA,MAAMA,EAAe,wjJACrB,MAAAC,EAAeD,E,MCQFE,EAAS,M,0EAgEZC,KAAAC,eAAkBC,IACxB,GAAIF,KAAKG,SAAU,OACnBH,KAAKI,gBAAgBC,KAAKH,EAAgB,EAMpCF,KAAAM,iBAAmB,KACzB,IAAIC,EAAgB,aAEpB,GAAIP,KAAKQ,UAAY,KAAM,CACzBD,GAAiB,oB,CAEnB,GAAIP,KAAKS,gBAAkBC,UAAW,CACpCH,GAAiB,sB,CAEnB,OAAOA,CAAa,E,wCAtEJ,M,cAKE,M,sEAeD,M,uDAeC,M,UAMiB,W,qBAgCrC,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOf,KAAKM,mBAAkB,gBAAiBN,KAAKG,SAAW,OAAS,MAC5ES,EAAA,SAAAE,IAAA,8DACoBE,EAAkBhB,KAAKiB,YAAajB,KAAKQ,QAASR,KAAKS,eAAc,eACzET,KAAKQ,QAAU,OAASE,UACtCQ,QAASlB,KAAKkB,QACdH,MAAM,oBACNZ,SAAUH,KAAKG,SACfgB,GAAInB,KAAKiB,YACTG,KAAMpB,KAAKoB,KAAOpB,KAAKoB,KAAOpB,KAAKiB,YACnCI,SAAUrB,KAAKC,eACfqB,SAAUtB,KAAKsB,SACfC,KAAMvB,KAAKuB,KACXC,MAAOxB,KAAKwB,QAEdZ,EAACa,EAAQ,CAAAX,IAAA,2CAACY,WAAW,oBAAoBC,QAAS3B,KAAKiB,YAAaW,KAAM5B,KAAK6B,QAC9E7B,KAAKS,eACJG,EAAA,OAAAE,IAAA,2CACEC,MAAO,sBACPI,GAAIW,EAAU9B,KAAKiB,YAAa,WAE/BjB,KAAKS,eAGTT,KAAK+B,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,iDACPI,GAAIW,EAAU9B,KAAKiB,YAAa,SAAQ,YAC9B,aAETjB,KAAK+B,c"}
@@ -1,2 +0,0 @@
1
- import{r as a,h as i,H as n}from"./p-2f77dbd3.js";import{d as r}from"./p-403a20e8.js";const t=":host{display:block}details{--animation-transform-timing:200ms;--border-radius-default:var(--pine-border-radius-100);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-content-background-default:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-300);--color-text-default:var(--pine-color-charcoal-200);--color-text-active:var(--pine-color-charcoal-500);--color-text-hover:var(--pine-color-charcoal-300);--spacing-details-padding-inline:var(--pine-spacing-150);--spacing-summary-padding-block:var(--pine-spacing-050);--spacing-summary-padding-inline-start:var(--pine-spacing-100);--spacing-summary-padding-inline-end:var(--pine-spacing-050);--typography-default:var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);border-radius:var(--border-radius-default);padding-inline:var(--spacing-details-padding-inline)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}@-webkit-keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}65%{opacity:0}to{opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes slide-down{from{opacity:0;-webkit-transform:translateY(-100%);transform:translateY(-100%)}65%{opacity:0}to{opacity:1;-webkit-transform:translateY(0%);transform:translateY(0%)}}details[open]{background-color:var(--color-content-background);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing);}details[open] summary{color:var(--color-text-active);font:var(--typography-default)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1);-webkit-transition:-webkit-transform var(--animation-transform-timing);transition:-webkit-transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing);transition:transform var(--animation-transform-timing), -webkit-transform var(--animation-transform-timing)}details[open] .pds-accordion__body{-webkit-transition:max-height 1s ease-in-out;transition:max-height 1s ease-in-out;}details[open] .pds-accordion__body.open{max-height:1000px}summary{border-radius:var(--border-radius-default);color:var(--color-text-default);font:var(--typography-default);padding-block:var(--spacing-summary-padding-block);-webkit-padding-end:var(--spacing-summary-padding-inline-end);padding-inline-end:var(--spacing-summary-padding-inline-end);-webkit-padding-start:var(--spacing-summary-padding-inline-start);padding-inline-start:var(--spacing-summary-padding-inline-start);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--color-background-hover);color:var(--color-text-hover);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-animation:slide-down var(--animation-transform-timing);animation:slide-down var(--animation-transform-timing);max-height:0;overflow:hidden}";const o=t;const e=class{constructor(i){a(this,i);this.handleToggle=()=>{this.isOpen=this.detailsEl.open};this.getOpenAttribute=()=>{if(this.isOpen!==false){return{open:true}}return""};this.componentId=undefined;this.isOpen=false}handleOpenState(a){this.isOpen=a;if(a===true){this.containerEl.classList.add("open")}else{this.containerEl.classList.remove("open")}}componentDidLoad(){this.detailsEl.addEventListener("toggle",this.handleToggle)}render(){return i(n,{key:"16488169e8370ef00005364086a0b3a9bf2629d6",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"4bef67d20f40212ae2c49a4236a1b60c30c0f9af"},this.getOpenAttribute(),{ref:a=>this.detailsEl=a}),i("summary",{key:"1f990d447ac77274161314b74488669b5eb9762a"},i("slot",{key:"dc1c0b7f64e3c4d406a28fb1677b634af2f1af30",name:"label"},"Details"),i("pds-icon",{key:"26d253bf3c039574cbcbab5000751492e21a0e32",icon:r})),i("div",{key:"a237207559a95b1b90bde48ddd37507f4103a3ca",class:`pds-accordion__body ${this.isOpen?"open":""}`,ref:a=>this.containerEl=a},i("slot",{key:"f5808d1ffd746e470439d2de9c9580bfc13dc5f5"}))))}static get watchers(){return{isOpen:["handleOpenState"]}}};e.style=o;export{e as pds_accordion};
2
- //# sourceMappingURL=p-c3828098.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["pdsAccordionCss","PdsAccordionStyle0","PdsAccordion","this","handleToggle","isOpen","detailsEl","open","getOpenAttribute","handleOpenState","newValue","containerEl","classList","add","remove","componentDidLoad","addEventListener","render","h","Host","key","class","id","componentId","Object","assign","ref","el","name","icon","downSmall"],"sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --animation-transform-timing: 200ms;\n\n --border-radius-default: var(--pine-border-radius-100);\n\n --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n --color-content-background-default: var(--pine-color-white);\n --color-background-hover: var(--pine-color-grey-300);\n --color-text-default: var(--pine-color-charcoal-200);\n --color-text-active: var(--pine-color-charcoal-500);\n --color-text-hover: var(--pine-color-charcoal-300);\n\n --spacing-details-padding-inline: var(--pine-spacing-150);\n --spacing-summary-padding-block: var(--pine-spacing-050);\n --spacing-summary-padding-inline-start: var(--pine-spacing-100);\n --spacing-summary-padding-inline-end: var(--pine-spacing-050);\n\n --typography-default: var(--pine-font-weight-semi-bold) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-circular);\n\n border-radius: var(--border-radius-default);\n padding-inline: var(--spacing-details-padding-inline);\n\n pds-icon {\n transform: scaleY(1);\n transition: transform var(--animation-transform-timing);\n }\n}\n\n@keyframes slide-down {\n from {\n opacity: 0;\n transform: translateY(-100%)\n }\n\n 65% {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n transform: translateY(0%);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--color-content-background);\n transition: transform var(--animation-transform-timing);\n\n summary {\n color: var(--color-text-active);\n font: var(--typography-default);\n\n pds-icon {\n transform: scaleY(-1);\n transition: transform var(--animation-transform-timing);\n }\n }\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n .pds-accordion__body {\n transition: max-height 1s ease-in-out;\n\n /* stylelint-disable-next-line selector-no-qualifying-type */\n &.open {\n max-height: 1000px;\n }\n\n }\n}\n\nsummary {\n border-radius: var(--border-radius-default);\n color: var(--color-text-default);\n font: var(--typography-default);\n padding-block: var(--spacing-summary-padding-block);\n padding-inline-end: var(--spacing-summary-padding-inline-end);\n padding-inline-start: var(--spacing-summary-padding-inline-start);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--color-background-hover);\n color: var(--color-text-hover);\n cursor: pointer;\n }\n\n &:focus-visible {\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n animation: slide-down var(--animation-transform-timing);\n max-height: 0;\n overflow: hidden;\n}\n\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrl: 'pds-accordion.scss',\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n private containerEl: HTMLDivElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n\n if ( newValue === true ) {\n this.containerEl.classList.add('open');\n } else {\n this.containerEl.classList.remove('open');\n }\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n }\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n }\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => this.detailsEl = el as HTMLDetailsElement}>\n <summary>\n <slot name=\"label\">Details</slot>\n <pds-icon icon={ downSmall } />\n </summary>\n <div class={`pds-accordion__body ${this.isOpen ? 'open' : ''}`} ref={(el) => this.containerEl = el as HTMLDivElement}>\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAkB,mkHACxB,MAAAC,EAAeD,E,MCWFE,EAAY,M,yBA+BfC,KAAAC,aAAe,KACrBD,KAAKE,OAASF,KAAKG,UAAUC,IAAI,EAG3BJ,KAAAK,iBAAmB,KACzB,GAAIL,KAAKE,SAAW,MAAO,CACzB,MAAO,CAAEE,KAAM,K,CAEjB,MAAO,EAAE,E,uCArBU,K,CAGrB,eAAAE,CAAgBC,GACdP,KAAKE,OAASK,EAEd,GAAKA,IAAa,KAAO,CACvBP,KAAKQ,YAAYC,UAAUC,IAAI,O,KAC1B,CACLV,KAAKQ,YAAYC,UAAUE,OAAO,O,EAetC,gBAAAC,GACEZ,KAAKG,UAAUU,iBAAiB,SAAUb,KAAKC,a,CAGjD,MAAAa,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,GAAInB,KAAKoB,aACnCL,EAAA,UAAAM,OAAAC,OAAA,CAAAL,IAAA,4CAAajB,KAAKK,mBAAkB,CAAEkB,IAAMC,GAAOxB,KAAKG,UAAYqB,IAClET,EAAA,WAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,SAAO,WAClBV,EAAA,YAAAE,IAAA,2CAAUS,KAAOC,KAEnBZ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,uBAAuBlB,KAAKE,OAAS,OAAS,KAAMqB,IAAMC,GAAOxB,KAAKQ,YAAcgB,GAC9FT,EAAA,QAAAE,IAAA,+C"}
@@ -1,2 +0,0 @@
1
- System.register(["./p-64b4cb70.system.js"],(function(t){"use strict";var i,a,s,e;return{setters:[function(t){i=t.r;a=t.h;s=t.H;e=t.g}],execute:function(){var n=":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:16px var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";var r=n;var c=t("pds_tabs",function(){function t(t){i(this,t);this.tablistLabel=undefined;this.componentId=undefined;this.variant=undefined;this.activeTabName=undefined;this.activeTabIndex=undefined}t.prototype.tabClickHandler=function(t){if(this.componentId===t.detail[1]){this.activeTabIndex=t.detail[0];this.activeTabName=this.tabs[this.activeTabIndex].name}};t.prototype.handleKeyDown=function(t){var i=["ArrowLeft","ArrowRight","Home","End"];if(i.includes(t.key)){t.preventDefault();this.moveActiveTab(t.key)}};t.prototype.moveActiveTab=function(t){var i=0;var a=this.tabs.length-1;var s=null;switch(t){case"ArrowLeft":s=this.activeTabIndex===i?a:this.activeTabIndex+-1;break;case"ArrowRight":s=this.activeTabIndex===a?i:this.activeTabIndex+1;break;case"Home":s=i;break;case"End":s=a;break}this.tabs[s].children[0].focus();this.activeTabName=this.tabs[s].name;this.activeTabIndex=s};t.prototype.findAllChildren=function(){this.tabs=this.el.querySelectorAll("pds-tab");this.tabPanels=this.el.querySelectorAll("pds-tabpanel")};t.prototype.propGeneration=function(t,i){if(i===void 0){i=0}t.parentComponentId=this.componentId.toString();t.variant=this.variant.toString();t.selected=this.activeTabName===t.name?true:false;t["index"]=i};t.prototype.passPropsToChildren=function(){var t=this;this.tabs.forEach((function(i,a){if(t.activeTabName===i.name)t.activeTabIndex=a;t.propGeneration(i,a)}));this.tabPanels.forEach((function(i){t.propGeneration(i)}))};t.prototype.classNames=function(){var t="pds-tabs";if(this.variant&&this.variant!="primary"){var i="pds-tabs--".concat(this.variant);t+=" "+i}return t};t.prototype.componentWillLoad=function(){this.findAllChildren()};t.prototype.componentWillRender=function(){this.passPropsToChildren()};t.prototype.render=function(){return a(s,{key:"92748fc6123067ba04f9cc81ea949366fb1c2a8f","active-tab-name":this.activeTabName,class:this.classNames(),id:this.componentId},a("div",{key:"809cbe1ed4e973db39ea69be9e30ac54881564af",class:"pds-tabs__tablist",role:"tablist","aria-label":this.tablistLabel},a("slot",{key:"b23af8a48dee0528cc9f7d2b84a42411e2b14e6d",name:"tabs"})),a("slot",{key:"fdb46b7125f735531b13c1ac82a08f27998e7511",name:"tabpanels"}))};Object.defineProperty(t.prototype,"el",{get:function(){return e(this)},enumerable:false,configurable:true});return t}());c.style=r}}}));
2
- //# sourceMappingURL=p-d73e2a61.system.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["pdsTabsCss","PdsTabsStyle0","PdsTabs","exports","class_1","prototype","tabClickHandler","event","this","componentId","detail","activeTabIndex","activeTabName","tabs","name","handleKeyDown","ev","keySet","includes","key","preventDefault","moveActiveTab","firstTabNumber","lastTabNumber","length","moveFocusTo","children","focus","findAllChildren","el","querySelectorAll","tabPanels","propGeneration","child","index","parentComponentId","toString","variant","selected","passPropsToChildren","_this","forEach","classNames","className","variantClassName","concat","componentWillLoad","componentWillRender","render","h","Host","class","id","role","tablistLabel"],"sources":["src/components/pds-tabs/pds-tabs.scss?tag=pds-tabs&encapsulation=shadow","src/components/pds-tabs/pds-tabs.tsx"],"sourcesContent":[":host {\n /**\n * @prop --spacing-panel-margin-top: Optional margin-top for panels\n */\n --spacing-panel-margin-top: 0;\n /**\n * @prop --spacing-panel-padding: Optional padding for panels\n */\n --spacing-panel-padding: 0;\n\n --outline: 2px solid var(--pine-color-blue-200);\n \n --spacing-gap-availability: var(--pine-spacing-100);\n --spacing-gap-default: var(--pine-spacing-300);\n --spacing-gap-filter: 16px var(--pine-spacing-200);\n\n display: block;\n}\n\n.pds-tabs__tablist {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing-gap-default);\n}\n\n:host(.pds-tabs--availability) .pds-tabs__tablist {\n gap: var(--spacing-gap-availability);\n}\n\n:host(.pds-tabs--filter) .pds-tabs__tablist {\n gap: var(--spacing-gap-filter);\n}\n","import { Component, Element, Host, h, Prop, Listen } from '@stencil/core';\n\n /**\n * @slot tabs - Content is placed within the `div[role=\"tablist\"]` element as children\n * @slot tabpanels - Content is placed directly after the `div[role=\"tablist\"]` element as siblings\n */\n@Component({\n tag: 'pds-tabs',\n styleUrl: 'pds-tabs.scss',\n shadow: true,\n})\nexport class PdsTabs {\n private tabs;\n private tabPanels;\n\n @Element() el: HTMLPdsTabsElement;\n\n /**\n * Sets the aria-label attached to the tablist element\n */\n @Prop() tablistLabel!: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Sets tabs variant styles as outlined in Figma documentation\n */\n @Prop() variant!: 'primary' | 'availability' | 'filter';\n\n /**\n * Sets the starting active tab name and maintains the name as the component re-renders\n */\n @Prop({mutable: true}) activeTabName!: string;\n\n /**\n * Sets the starting active tab index number and maintains the index number as the component re-renders\n */\n /** @internal */\n @Prop({mutable: true}) activeTabIndex: number;\n\n @Listen('pdsTabClick', {\n target: 'body',\n })\n tabClickHandler(event: CustomEvent<any>) {\n if (this.componentId === event.detail[1]) {\n this.activeTabIndex = event.detail[0];\n this.activeTabName = this.tabs[this.activeTabIndex].name;\n }\n }\n\n @Listen('keydown', {})\n handleKeyDown(ev: KeyboardEvent) {\n const keySet = [\"ArrowLeft\", \"ArrowRight\", \"Home\", \"End\"];\n\n if (keySet.includes(ev.key)) {\n ev.preventDefault();\n this.moveActiveTab(ev.key);\n }\n }\n\n private moveActiveTab(key: string) {\n const firstTabNumber = 0;\n const lastTabNumber = this.tabs.length - 1;\n\n let moveFocusTo = null;\n\n switch (key) {\n case 'ArrowLeft':\n moveFocusTo = (this.activeTabIndex === firstTabNumber) ? lastTabNumber : (this.activeTabIndex + (-1));\n break;\n case 'ArrowRight':\n moveFocusTo = (this.activeTabIndex === lastTabNumber) ? firstTabNumber : (this.activeTabIndex + 1);\n break;\n case 'Home':\n moveFocusTo = firstTabNumber;\n break;\n case 'End':\n moveFocusTo = lastTabNumber;\n break;\n }\n\n // Move focus to the button element within `pds-tab`\n this.tabs[moveFocusTo].children[0].focus();\n this.activeTabName = this.tabs[moveFocusTo].name;\n this.activeTabIndex = moveFocusTo;\n }\n\n private findAllChildren() {\n this.tabs = this.el.querySelectorAll('pds-tab');\n this.tabPanels = this.el.querySelectorAll('pds-tabpanel');\n }\n\n private propGeneration(child, index = 0) {\n child.parentComponentId = this.componentId.toString();\n child.variant = this.variant.toString();\n child.selected = (this.activeTabName === child.name) ? true : false;\n child['index'] = index;\n }\n\n private passPropsToChildren() {\n this.tabs.forEach((child, index) => {\n if (this.activeTabName === child.name) this.activeTabIndex = index;\n this.propGeneration(child, index);\n });\n\n this.tabPanels.forEach((child) => {\n this.propGeneration(child);\n });\n }\n\n private classNames() {\n let className = `pds-tabs`;\n if (this.variant && this.variant != 'primary') {\n const variantClassName = `pds-tabs--${this.variant}`;\n className += ' ' + variantClassName;\n }\n\n return className;\n };\n\n componentWillLoad() {\n this.findAllChildren();\n }\n\n componentWillRender() {\n this.passPropsToChildren();\n }\n\n render() {\n return (\n <Host active-tab-name={this.activeTabName} class={this.classNames()} id={this.componentId}>\n <div class=\"pds-tabs__tablist\" role=\"tablist\" aria-label={this.tablistLabel}>\n <slot name=\"tabs\" />\n </div>\n <slot name=\"tabpanels\" />\n </Host>\n );\n }\n}\n"],"mappings":"0JAAA,IAAMA,EAAa,qiBACnB,IAAAC,EAAeD,E,ICUFE,EAAOC,EAAA,sB,iKAmClBC,EAAAC,UAAAC,gBAAA,SAAgBC,GACd,GAAIC,KAAKC,cAAgBF,EAAMG,OAAO,GAAI,CACxCF,KAAKG,eAAiBJ,EAAMG,OAAO,GACnCF,KAAKI,cAAgBJ,KAAKK,KAAKL,KAAKG,gBAAgBG,I,GAKxDV,EAAAC,UAAAU,cAAA,SAAcC,GACZ,IAAMC,EAAS,CAAC,YAAa,aAAc,OAAQ,OAEnD,GAAIA,EAAOC,SAASF,EAAGG,KAAM,CAC3BH,EAAGI,iBACHZ,KAAKa,cAAcL,EAAGG,I,GAIlBf,EAAAC,UAAAgB,cAAA,SAAcF,GACpB,IAAMG,EAAiB,EACvB,IAAMC,EAAgBf,KAAKK,KAAKW,OAAS,EAEzC,IAAIC,EAAc,KAElB,OAAQN,GACN,IAAK,YACHM,EAAejB,KAAKG,iBAAmBW,EAAkBC,EAAiBf,KAAKG,gBAAmB,EAClG,MACF,IAAK,aACHc,EAAejB,KAAKG,iBAAmBY,EAAiBD,EAAkBd,KAAKG,eAAiB,EAChG,MACF,IAAK,OACHc,EAAcH,EACd,MACF,IAAK,MACHG,EAAcF,EACd,MAIJf,KAAKK,KAAKY,GAAaC,SAAS,GAAGC,QACnCnB,KAAKI,cAAgBJ,KAAKK,KAAKY,GAAaX,KAC5CN,KAAKG,eAAiBc,C,EAGhBrB,EAAAC,UAAAuB,gBAAA,WACNpB,KAAKK,KAAOL,KAAKqB,GAAGC,iBAAiB,WACrCtB,KAAKuB,UAAYvB,KAAKqB,GAAGC,iBAAiB,e,EAGpC1B,EAAAC,UAAA2B,eAAA,SAAeC,EAAOC,GAAA,GAAAA,SAAA,GAAAA,EAAA,CAAS,CACrCD,EAAME,kBAAoB3B,KAAKC,YAAY2B,WAC3CH,EAAMI,QAAU7B,KAAK6B,QAAQD,WAC7BH,EAAMK,SAAY9B,KAAKI,gBAAkBqB,EAAMnB,KAAQ,KAAO,MAC9DmB,EAAM,SAAWC,C,EAGX9B,EAAAC,UAAAkC,oBAAA,eAAAC,EAAAhC,KACNA,KAAKK,KAAK4B,SAAQ,SAACR,EAAOC,GACxB,GAAIM,EAAK5B,gBAAkBqB,EAAMnB,KAAM0B,EAAK7B,eAAiBuB,EAC7DM,EAAKR,eAAeC,EAAOC,E,IAG7B1B,KAAKuB,UAAUU,SAAQ,SAACR,GACtBO,EAAKR,eAAeC,E,KAIhB7B,EAAAC,UAAAqC,WAAA,WACN,IAAIC,EAAY,WAChB,GAAInC,KAAK6B,SAAW7B,KAAK6B,SAAW,UAAW,CAC7C,IAAMO,EAAmB,aAAAC,OAAarC,KAAK6B,SAC3CM,GAAa,IAAMC,C,CAGrB,OAAOD,C,EAGTvC,EAAAC,UAAAyC,kBAAA,WACEtC,KAAKoB,iB,EAGPxB,EAAAC,UAAA0C,oBAAA,WACEvC,KAAK+B,qB,EAGPnC,EAAAC,UAAA2C,OAAA,WACE,OACEC,EAACC,EAAI,CAAA/B,IAAA,6DAAkBX,KAAKI,cAAeuC,MAAO3C,KAAKkC,aAAcU,GAAI5C,KAAKC,aAC5EwC,EAAA,OAAA9B,IAAA,2CAAKgC,MAAM,oBAAoBE,KAAK,UAAS,aAAa7C,KAAK8C,cAC7DL,EAAA,QAAA9B,IAAA,2CAAML,KAAK,UAEbmC,EAAA,QAAA9B,IAAA,2CAAML,KAAK,c,uHA9HC,I"}
@@ -1,2 +0,0 @@
1
- System.register(["./p-64b4cb70.system.js","./p-674edd62.system.js"],(function(i){"use strict";var t,e,a,s,o,n,r;return{setters:[function(i){t=i.r;e=i.c;a=i.h;s=i.H;o=i.g},function(i){n=i.e;r=i.d}],execute:function(){var l=":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-background-fixed:var(--pine-color-white);--color-sorting:var(--pine-color-charcoal-500);--color-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-087);--font-weight-cell-default:var(--pine-font-weight-normal);--line-height-cell-default:var(--pine-line-height-125);--padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-margin-inline-start-arrow:var(--pine-spacing-050);--spacing-padding-arrow:calc(var(--pine-spacing-050) / 2);--spacing-padding-block-compact:var(--pine-spacing-050);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--color-default);display:table-cell;font-size:var(--font-size-head-cell);font-style:normal;font-weight:var(--font-weight-cell-default);line-height:var(--line-height-cell-default);padding:var(--padding-cell-default);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-block-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";var c=l;var d=i("pds_table_head_cell",function(){function i(i){var a=this;t(this,i);this.pdsTableSort=e(this,"pdsTableSort",7);this.handleScroll=function(){if(a.tableRef.scrollLeft>0){a.tableScrolling=true}else{a.tableScrolling=false}};this.toggleSort=function(){if(a.sortable){var i=a.hostElement.innerText.trim();a.sortingDirection=a.sortingDirection==="asc"?"desc":"asc";a.tableRef.querySelectorAll("pds-table-head-cell").forEach((function(i){i.classList.remove("is-active")}));a.hostElement.classList.toggle("is-active");a.pdsTableSort.emit({column:i,direction:a.sortingDirection})}};this.sortable=undefined;this.sortingDirection="asc";this.tableScrolling=false}i.prototype.componentWillRender=function(){this.tableRef=this.hostElement.closest("pds-table")};i.prototype.componentDidLoad=function(){if(this.tableRef&&this.tableRef.responsive&&this.tableRef.fixedColumn){this.tableRef.addEventListener("scroll",this.handleScroll)}};i.prototype.classNames=function(){var i=[];if(this.tableRef&&this.tableRef.compact){i.push("is-compact")}if(this.sortable){i.push("is-sortable")}if(this.sortable&&this.sortingDirection!==null){i.push("sort-"+this.sortingDirection)}if(this.tableRef&&this.tableRef.fixedColumn&&this.tableScrolling){i.push("has-scrolled")}return i.join(" ")};i.prototype.render=function(){return a(s,{key:"b8b24eb690d19c1d6476fd44c69a3231b540d476",class:this.classNames(),role:"columnheader",onClick:this.toggleSort,style:this.tableRef&&this.tableRef.fixedColumn&&this.tableRef.selectable?{"--fixed-cell-position":"40px"}:{}},a("slot",{key:"831ea922b3fb2166852208f2a9520414c93f6954"}),this.sortable&&a("pds-icon",{key:"0afb8d56992327112c64e79d6bfc7c1d192d9732",icon:this.sortingDirection==="asc"?n:r}))};Object.defineProperty(i.prototype,"hostElement",{get:function(){return o(this)},enumerable:false,configurable:true});return i}());d.style=c}}}));
2
- //# sourceMappingURL=p-f71ff6cb.system.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["pdsTableHeadCellCss","PdsTableHeadCellStyle0","PdsTableHeadCell","exports","this","handleScroll","_this","tableRef","scrollLeft","tableScrolling","toggleSort","sortable","column","hostElement","innerText","trim","sortingDirection","querySelectorAll","forEach","headCell","classList","remove","toggle","pdsTableSort","emit","direction","class_1","prototype","componentWillRender","closest","componentDidLoad","responsive","fixedColumn","addEventListener","classNames","compact","push","join","render","h","Host","key","class","role","onClick","style","selectable","icon","upSmall","downSmall"],"sources":["src/components/pds-table/pds-table-head-cell/pds-table-head-cell.scss?tag=pds-table-head-cell&encapsulation=shadow","src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx"],"sourcesContent":[":host {\n --border-head-cell-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n --box-shadow-default: 3px 3px 6px -2px rgba(0, 0, 0, 0.1);\n\n --color-background-fixed: var(--pine-color-white);\n --color-sorting: var(--pine-color-charcoal-500);\n --color-default: var(--pine-color-charcoal-200);\n\n --dimension-fixed-cell-position: 0;\n\n --font-size-head-cell: var(--pine-font-size-087);\n --font-weight-cell-default: var(--pine-font-weight-normal);\n\n --line-height-cell-default: var(--pine-line-height-125);\n\n --padding-cell-default: calc(var(--pine-spacing-300) / 2);\n\n --spacing-margin-inline-start-arrow: var(--pine-spacing-050);\n --spacing-padding-arrow: calc(var(--pine-spacing-050) / 2);\n --spacing-padding-block-compact: var(--pine-spacing-050);\n\n border-block-end: var(--border-head-cell-default);\n color: var(--color-default);\n display: table-cell;\n font-size: var(--font-size-head-cell);\n font-style: normal;\n font-weight: var(--font-weight-cell-default);\n line-height: var(--line-height-cell-default);\n padding: var(--padding-cell-default);\n text-align: start;\n vertical-align: inherit;\n}\n\n:host(.is-compact) {\n padding-block: var(--spacing-padding-block-compact)\n}\n\n:host(.is-fixed) {\n background: var(--color-background-fixed);\n left: var(--dimension-fixed-cell-position);\n position: sticky;\n z-index: 1;\n}\n\n// box shadow when table has scrolled and cell is fixed\n:host(.has-scrolled.is-fixed) {\n box-shadow: var(--box-shadow-default);\n}\n\n:host(.is-sortable) {\n cursor: pointer;\n\n pds-icon {\n margin-inline-start: var(--spacing-margin-inline-start-arrow);\n padding-block-start: var(--spacing-padding-arrow);\n position: absolute;\n }\n}\n\n:host(.is-sortable:hover),\n:host(.is-active) {\n color: var(--color-sorting);\n}\n","import { Component, Element, Host, Prop, h, Event, EventEmitter, State } from '@stencil/core';\n\nimport { downSmall, upSmall } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-table-head-cell',\n styleUrl: 'pds-table-head-cell.scss',\n shadow: true,\n})\nexport class PdsTableHeadCell {\n @Element() hostElement: HTMLPdsTableHeadCellElement;\n tableRef: HTMLPdsTableElement;\n\n /**\n * Determines whether the table column is sortable when set to `true`.\n */\n @Prop() sortable: boolean;\n\n /**\n * Event emitted to signal that a table column header has been sorted, providing information about the sorted column's name and sorting direction.\n */\n @Event() pdsTableSort: EventEmitter<{ column: string; direction: string }>;\n\n @State() private sortingDirection: 'asc' | 'desc' = 'asc';\n @State() private tableScrolling: boolean = false;\n\n componentWillRender() {\n this.tableRef = this.hostElement.closest('pds-table') as HTMLPdsTableElement;\n }\n\n componentDidLoad() {\n if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {\n this.tableRef.addEventListener('scroll', this.handleScroll);\n }\n }\n\n private handleScroll = () => {\n if (this.tableRef.scrollLeft > 0) {\n this.tableScrolling = true;\n } else {\n this.tableScrolling = false;\n }\n };\n\n private toggleSort = () => {\n if (this.sortable) {\n const column = this.hostElement.innerText.trim();\n this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';\n\n this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {\n headCell.classList.remove('is-active');\n });\n\n this.hostElement.classList.toggle('is-active');\n this.pdsTableSort.emit({ column, direction: this.sortingDirection });\n }\n }\n\n private classNames() {\n const classNames = [];\n\n if (this.tableRef && this.tableRef.compact) {\n classNames.push('is-compact');\n }\n\n if (this.sortable) {\n classNames.push('is-sortable');\n }\n\n if (this.sortable && this.sortingDirection !== null) {\n classNames.push('sort-' + this.sortingDirection);\n }\n\n if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {\n classNames.push('has-scrolled');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n class={this.classNames()}\n role=\"columnheader\"\n onClick={this.toggleSort}\n style={\n this.tableRef &&\n this.tableRef.fixedColumn &&\n this.tableRef.selectable\n ? { '--fixed-cell-position': '40px' }\n : {}\n }\n >\n <slot></slot>\n {this.sortable && (\n <pds-icon icon={this.sortingDirection === 'asc' ? upSmall : downSmall} />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"wNAAA,IAAMA,EAAsB,ywDAC5B,IAAAC,EAAeD,E,ICQFE,EAAgBC,EAAA,iC,8EA2BnBC,KAAAC,aAAe,WACrB,GAAIC,EAAKC,SAASC,WAAa,EAAG,CAChCF,EAAKG,eAAiB,I,KACjB,CACLH,EAAKG,eAAiB,K,GAIlBL,KAAAM,WAAa,WACnB,GAAIJ,EAAKK,SAAU,CACjB,IAAMC,EAASN,EAAKO,YAAYC,UAAUC,OAC1CT,EAAKU,iBAAmBV,EAAKU,mBAAqB,MAAQ,OAAS,MAEnEV,EAAKC,SAASU,iBAAiB,uBAAuBC,SAAQ,SAACC,GAC7DA,EAASC,UAAUC,OAAO,Y,IAG5Bf,EAAKO,YAAYO,UAAUE,OAAO,aAClChB,EAAKiB,aAAaC,KAAK,CAAEZ,OAAMA,EAAEa,UAAWnB,EAAKU,kB,iDA/BD,M,oBACT,K,CAE3CU,EAAAC,UAAAC,oBAAA,WACExB,KAAKG,SAAWH,KAAKS,YAAYgB,QAAQ,Y,EAG3CH,EAAAC,UAAAG,iBAAA,WACE,GAAI1B,KAAKG,UAAYH,KAAKG,SAASwB,YAAc3B,KAAKG,SAASyB,YAAa,CAC1E5B,KAAKG,SAAS0B,iBAAiB,SAAU7B,KAAKC,a,GA0B1CqB,EAAAC,UAAAO,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAI9B,KAAKG,UAAYH,KAAKG,SAAS4B,QAAS,CAC1CD,EAAWE,KAAK,a,CAGlB,GAAIhC,KAAKO,SAAU,CACjBuB,EAAWE,KAAK,c,CAGlB,GAAIhC,KAAKO,UAAYP,KAAKY,mBAAqB,KAAM,CACnDkB,EAAWE,KAAK,QAAUhC,KAAKY,iB,CAGjC,GAAIZ,KAAKG,UAAYH,KAAKG,SAASyB,aAAe5B,KAAKK,eAAgB,CACrEyB,EAAWE,KAAK,e,CAGlB,OAAOF,EAAWG,KAAK,K,EAGzBX,EAAAC,UAAAW,OAAA,WACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOtC,KAAK8B,aACZS,KAAK,eACLC,QAASxC,KAAKM,WACdmC,MACEzC,KAAKG,UACLH,KAAKG,SAASyB,aACd5B,KAAKG,SAASuC,WACV,CAAE,wBAAyB,QAC3B,IAGNP,EAAA,QAAAE,IAAA,6CACCrC,KAAKO,UACJ4B,EAAA,YAAAE,IAAA,2CAAUM,KAAM3C,KAAKY,mBAAqB,MAAQgC,EAAUC,I,gIAvFzC,I"}
@@ -1,2 +0,0 @@
1
- import{r,h as o,H as e,g as a}from"./p-2f77dbd3.js";import{b as c}from"./p-403a20e8.js";const t=r=>!!r.shadowRoot&&!!r.attachShadow;const d=":host{--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-background-action-primary-default);--color-background-primary-disabled:var(--pine-color-background-action-primary-disabled);--color-background-primary-hover:var(--pine-color-background-action-primary-hover);--color-text-primary-default:var(--pine-color-text-action-primary-default);--color-text-primary-disabled:var(--pine-color-text-action-primary-disabled);--color-outline-primary:var(--pine-color-blue-200);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-text-body-default);--color-text-secondary-disabled:var(--pine-color-text-action-primary-disabled);--color-outline-secondary:var(--pine-color-blue-200);--color-background-accent-default:var(--pine-color-background-action-accent-default);--color-background-accent-disabled:var(--pine-color-background-action-accent-disabled);--color-background-accent-hover:var(--pine-color-background-action-accent-hover);--color-text-accent-default:var(--pine-color-text-action-accent-default);--color-text-accent-disabled:var(--pine-color-text-action-accent-disabled);--color-outline-accent:var(--pine-color-blue-200);--color-background-destructive-default:var(--pine-color-background-action-destructive-default);--color-background-destructive-disabled:var(--pine-color-background-action-destructive-disabled);--color-background-destructive-hover:var(--pine-color-background-action-destructive-hover);--color-text-destructive-default:var(--pine-color-text-action-destructive-default);--color-text-destructive-disabled:var(--pine-color-text-action-destructive-disabled);--color-outline-destructive:var(--pine-color-red-200);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-body-med);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-125);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 2px var(--pine-color-primary-200);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";const n=d;const i=class{constructor(o){r(this,o);this.handleClick=r=>{if(this.type!="button"){if(t(this.el)){const o=this.el.closest("form");if(o){r.preventDefault();const e=document.createElement("button");e.type=this.type;e.style.display="none";o.appendChild(e);e.click();e.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}classNames(){const r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join(" ")}render(){return o(e,{key:"453a94093ba7bb8aa0fdea470cd9008e96601dcf","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},o("button",{key:"ec841dfb0b026d1c3376f686f6d9187cdecb1762",class:this.classNames(),disabled:this.disabled,name:this.name,part:"button",type:this.type,value:this.value},this.icon&&this.variant!=="disclosure"&&o("pds-icon",{key:"926395c361f5b94f9c4d12980c4a93a52bf79c41",name:this.icon,part:"icon"}),o("slot",{key:"4a74b8b6cd711fee67622c92b515cf329964da64"}),this.variant==="disclosure"&&o("pds-icon",{key:"e2d356d80d03c3d8a8fc1259528e13a1c88e1307",icon:c,part:"caret"})))}get el(){return a(this)}};i.style=n;export{i as pds_button};
2
- //# sourceMappingURL=p-fffaa868.entry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","pdsButtonCss","PdsButtonStyle0","PdsButton","this","handleClick","ev","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n --border-width-default: var(--pine-border-width-thin);\n --border-width-unstyled: var(--pine-border-radius-0);\n\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n\n // primary\n --color-background-primary-default: var(--pine-color-background-action-primary-default);\n --color-background-primary-disabled: var(--pine-color-background-action-primary-disabled);\n --color-background-primary-hover: var(--pine-color-background-action-primary-hover);\n --color-text-primary-default: var(--pine-color-text-action-primary-default);\n --color-text-primary-disabled: var(--pine-color-text-action-primary-disabled);\n --color-outline-primary: var(--pine-color-blue-200);\n\n // secondary\n --color-border-secondary-default: var(--pine-color-grey-400);\n --color-border-secondary-disabled: var(--pine-color-grey-300);\n --color-border-secondary-focus: var(--pine-color-grey-300);\n --color-border-secondary-hover: var(--pine-color-grey-500);\n --color-text-secondary-default: var(--pine-color-text-body-default);\n --color-text-secondary-disabled: var(--pine-color-text-action-primary-disabled);\n --color-outline-secondary: var(--pine-color-blue-200);\n\n // accent\n --color-background-accent-default: var(--pine-color-background-action-accent-default);\n --color-background-accent-disabled: var(--pine-color-background-action-accent-disabled);\n --color-background-accent-hover: var(--pine-color-background-action-accent-hover);\n --color-text-accent-default: var(--pine-color-text-action-accent-default);\n --color-text-accent-disabled: var(--pine-color-text-action-accent-disabled);\n --color-outline-accent: var(--pine-color-blue-200);\n\n // destructive\n --color-background-destructive-default: var(--pine-color-background-action-destructive-default);\n --color-background-destructive-disabled: var(--pine-color-background-action-destructive-disabled);\n --color-background-destructive-hover: var(--pine-color-background-action-destructive-hover);\n --color-text-destructive-default: var(--pine-color-text-action-destructive-default);\n --color-text-destructive-disabled: var(--pine-color-text-action-destructive-disabled);\n --color-outline-destructive: var(--pine-color-red-200);\n\n --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n --spacing-padding-block: var(--pine-spacing-100);\n --spacing-padding-inline: var(--pine-spacing-200);\n --spacing-unstyled: var(--pine-spacing-0);\n\n --typography-default: var(--pine-body-med);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n.pds-button {\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--border-width-default) solid var(--color-border-default);\n border-radius: var(--pine-border-radius-125);\n color: var(--color-text-default);\n display: flex;\n font: var(--typography-default);\n min-height: 40px;\n padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n pds-icon {\n fill: currentColor;\n margin-inline-end: var(--spacing-icon-margin-inline-end);\n }\n\n &:hover {\n background-color: var(--color-background-hover);\n border-color: var(--color-border-hover);\n }\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 2px var(--pine-color-primary-200);\n border-color: var(--color-border-focus);\n // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n outline: none;\n }\n\n &:disabled {\n background-color: var(--color-background-disabled);\n border-color: var(--color-border-disabled);\n color: var(--color-text-disabled);\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--color-background-primary-default);\n --color-background-hover: var(--color-background-primary-hover);\n --color-background-disabled: var(--color-background-primary-disabled);\n --color-text-default: var(--color-text-primary-default);\n --color-text-disabled: var(--color-text-primary-disabled);\n --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--color-background-accent-default);\n --color-background-hover: var(--color-background-accent-hover);\n --color-background-disabled: var(--color-background-accent-disabled);\n --color-text-default: var(--color-text-accent-default);\n --color-text-disabled: var(--color-text-accent-disabled);\n --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--color-background-destructive-default);\n --color-background-hover: var(--color-background-destructive-hover);\n --color-background-disabled: var(--color-background-destructive-disabled);\n --color-text-default: var(--color-text-destructive-default);\n --color-text-disabled: var(--color-text-destructive-disabled);\n --color-outline: var(--color-outline-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-border-disabled: var(--color-border-secondary-disabled);\n --color-border-focus: var(--color-border-secondary-focus);\n --color-border-hover: var(--color-border-secondary-hover);\n --color-border-default: var(--color-border-secondary-default);\n --color-text-default: var(--color-text-secondary-default);\n --color-text-disabled: var(--color-text-secondary-disabled);\n --color-outline: var(--color-outline-secondary);\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n }\n}\n\n.pds-button--unstyled {\n --color-background-default: transparent;\n --color-background-hover: transparent;\n --color-background-disabled: transparent;\n --color-text-default: inherit;\n border: var(--border-width-unstyled);\n margin: var(--spacing-unstyled);\n min-height: auto;\n padding: var(--spacing-unstyled);\n width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n tag: 'pds-button',\n styleUrl: 'pds-button.scss',\n shadow: true,\n})\nexport class PdsButton {\n @Element() el: HTMLPdsButtonElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Toggles disabled state of button\n * @defaultValue false\n */\n @Prop() disabled? = false;\n\n /**\n * Displays icon before text when icon string matches an icon name\n */\n @Prop() icon?: string = null;\n\n /**\n * Provides button with a submittable name\n */\n @Prop() name?: string;\n\n /**\n * Provides button with a submittable value\n */\n @Prop() value?: string;\n\n /**\n * Provides button with a type\n * @defaultValue button\n */\n @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n /**\n * Sets button variant styles as outlined in Figma documentation\n */\n @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n private handleClick = (ev: Event) => {\n if (this.type != 'button') {\n // If button clicked IS NOT associated with a form\n if (hasShadowDom(this.el)) {\n const form = this.el.closest('form')\n if (form) {\n ev.preventDefault()\n\n const fakeButton = document.createElement('button')\n fakeButton.type = this.type\n fakeButton.style.display = 'none'\n form.appendChild(fakeButton)\n fakeButton.click()\n fakeButton.remove()\n }\n }\n }\n }\n\n private classNames() {\n const classNames = ['pds-button'];\n\n if (this.variant) {\n classNames.push('pds-button--' + this.variant);\n }\n\n return classNames.join(' ');\n }\n\n render() {\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n id={this.componentId}\n onClick={this.handleClick}\n variant={this.variant}\n >\n <button\n class={this.classNames()}\n disabled={this.disabled}\n name={this.name}\n part=\"button\"\n type={this.type}\n value={this.value}\n >\n {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n <slot />\n {this.variant === 'disclosure' && <pds-icon icon={caretDown} part=\"caret\"></pds-icon>}\n </button>\n </Host>\n );\n }\n}\n"],"mappings":"wFAIO,MAAMA,EAAgBC,KAClBA,EAAGC,cAAiBD,EAAWE,aCL1C,MAAMC,EAAe,0uLACrB,MAAAC,EAAeD,E,MCeFE,EAAS,M,yBAwCZC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,MAAQ,SAAU,CAEzB,GAAIV,EAAaO,KAAKN,IAAK,CACzB,MAAMU,EAAOJ,KAAKN,GAAGW,QAAQ,QAC7B,GAAID,EAAM,CACRF,EAAGI,iBAEH,MAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOH,KAAKG,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1F,UAAAC,GACN,MAAMA,EAAa,CAAC,cAEpB,GAAIf,KAAKgB,QAAS,CAChBD,EAAWE,KAAK,eAAiBjB,KAAKgB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,CAGzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2DACYtB,KAAKuB,SAAW,OAAS,KACxCC,GAAIxB,KAAKyB,YACTC,QAAS1B,KAAKC,YACde,QAAShB,KAAKgB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO3B,KAAKe,aACZQ,SAAUvB,KAAKuB,SACfK,KAAM5B,KAAK4B,KACXC,KAAK,SACL1B,KAAMH,KAAKG,KACX2B,MAAO9B,KAAK8B,OAEX9B,KAAK+B,MAAQ/B,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM5B,KAAK+B,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCtB,KAAKgB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,EAAWH,KAAK,W"}
@@ -1,218 +0,0 @@
1
- // Generated by dts-bundle-generator v9.3.1
2
-
3
- export declare function createWindowFromHtml(templateHtml: string, uniqueId: string): any;
4
- export interface HydrateDocumentOptions {
5
- /**
6
- * Build ID that will be added to `<html data-stencil-build="BUILD_ID">`. By default
7
- * a random ID will be generated
8
- */
9
- buildId?: string;
10
- /**
11
- * Sets the `href` attribute on the `<link rel="canonical">`
12
- * tag within the `<head>`. If the value is not defined it will
13
- * ensure a canonical link tag is no included in the `<head>`.
14
- */
15
- canonicalUrl?: string;
16
- /**
17
- * Include the HTML comments and attributes used by the client-side
18
- * JavaScript to read the structure of the HTML and rebuild each
19
- * component. Defaults to `true`.
20
- */
21
- clientHydrateAnnotations?: boolean;
22
- /**
23
- * Constrain `setTimeout()` to 1ms, but still async. Also
24
- * only allows `setInterval()` to fire once, also constrained to 1ms.
25
- * Defaults to `true`.
26
- */
27
- constrainTimeouts?: boolean;
28
- /**
29
- * Sets `document.cookie`
30
- */
31
- cookie?: string;
32
- /**
33
- * Sets the `dir` attribute on the top level `<html>`.
34
- */
35
- direction?: string;
36
- /**
37
- * Component tag names listed here will not be prerendered, nor will
38
- * hydrated on the client-side. Components listed here will be ignored
39
- * as custom elements and treated no differently than a `<div>`.
40
- */
41
- excludeComponents?: string[];
42
- /**
43
- * Sets the `lang` attribute on the top level `<html>`.
44
- */
45
- language?: string;
46
- /**
47
- * Maximum number of components to hydrate on one page. Defaults to `300`.
48
- */
49
- maxHydrateCount?: number;
50
- /**
51
- * Sets `document.referrer`
52
- */
53
- referrer?: string;
54
- /**
55
- * Removes every `<script>` element found in the `document`. Defaults to `false`.
56
- */
57
- removeScripts?: boolean;
58
- /**
59
- * Removes CSS not used by elements within the `document`. Defaults to `true`.
60
- */
61
- removeUnusedStyles?: boolean;
62
- /**
63
- * The url the runtime uses for the resources, such as the assets directory.
64
- */
65
- resourcesUrl?: string;
66
- /**
67
- * Prints out runtime console logs to the NodeJS process. Defaults to `false`.
68
- */
69
- runtimeLogging?: boolean;
70
- /**
71
- * Component tags listed here will only be prerendered or server-side-rendered
72
- * and will not be client-side hydrated. This is useful for components that
73
- * are not dynamic and do not need to be defined as a custom element within the
74
- * browser. For example, a header or footer component would be a good example that
75
- * may not require any client-side JavaScript.
76
- */
77
- staticComponents?: string[];
78
- /**
79
- * The amount of milliseconds to wait for a page to finish rendering until
80
- * a timeout error is thrown. Defaults to `15000`.
81
- */
82
- timeout?: number;
83
- /**
84
- * Sets `document.title`.
85
- */
86
- title?: string;
87
- /**
88
- * Sets `location.href`
89
- */
90
- url?: string;
91
- /**
92
- * Sets `navigator.userAgent`
93
- */
94
- userAgent?: string;
95
- }
96
- export interface SerializeDocumentOptions extends HydrateDocumentOptions {
97
- /**
98
- * Runs after the `document` has been hydrated.
99
- */
100
- afterHydrate?(document: any): any | Promise<any>;
101
- /**
102
- * Sets an approximate line width the HTML should attempt to stay within.
103
- * Note that this is "approximate", in that HTML may often not be able
104
- * to be split at an exact line width. Additionally, new lines created
105
- * is where HTML naturally already has whitespace, such as before an
106
- * attribute or spaces between words. Defaults to `100`.
107
- */
108
- approximateLineWidth?: number;
109
- /**
110
- * Runs before the `document` has been hydrated.
111
- */
112
- beforeHydrate?(document: any): any | Promise<any>;
113
- /**
114
- * Format the HTML in a nicely indented format.
115
- * Defaults to `false`.
116
- */
117
- prettyHtml?: boolean;
118
- /**
119
- * Remove quotes from attribute values when possible.
120
- * Defaults to `true`.
121
- */
122
- removeAttributeQuotes?: boolean;
123
- /**
124
- * Remove the `=""` from standardized `boolean` attributes,
125
- * such as `hidden` or `checked`. Defaults to `true`.
126
- */
127
- removeBooleanAttributeQuotes?: boolean;
128
- /**
129
- * Remove these standardized attributes when their value is empty:
130
- * `class`, `dir`, `id`, `lang`, and `name`, `title`. Defaults to `true`.
131
- */
132
- removeEmptyAttributes?: boolean;
133
- /**
134
- * Remove HTML comments. Defaults to `true`.
135
- */
136
- removeHtmlComments?: boolean;
137
- }
138
- export interface HydrateFactoryOptions extends SerializeDocumentOptions {
139
- serializeToHtml: boolean;
140
- destroyWindow: boolean;
141
- destroyDocument: boolean;
142
- }
143
- export interface Diagnostic {
144
- absFilePath?: string | undefined;
145
- code?: string;
146
- columnNumber?: number | undefined;
147
- debugText?: string;
148
- header?: string;
149
- language?: string;
150
- level: "error" | "warn" | "info" | "log" | "debug";
151
- lineNumber?: number | undefined;
152
- lines: PrintLine[];
153
- messageText: string;
154
- relFilePath?: string | undefined;
155
- type: string;
156
- }
157
- export interface PrintLine {
158
- lineIndex: number;
159
- lineNumber: number;
160
- text: string;
161
- errorCharStart: number;
162
- errorLength?: number;
163
- }
164
- export interface HydrateResults {
165
- buildId: string;
166
- diagnostics: Diagnostic[];
167
- url: string;
168
- host: string;
169
- hostname: string;
170
- href: string;
171
- port: string;
172
- pathname: string;
173
- search: string;
174
- hash: string;
175
- html: string;
176
- components: HydrateComponent[];
177
- anchors: HydrateAnchorElement[];
178
- imgs: HydrateImgElement[];
179
- scripts: HydrateScriptElement[];
180
- styles: HydrateStyleElement[];
181
- staticData: HydrateStaticData[];
182
- title: string;
183
- hydratedCount: number;
184
- httpStatus: number;
185
- }
186
- export interface HydrateComponent {
187
- tag: string;
188
- mode: string;
189
- count: number;
190
- depth: number;
191
- }
192
- export interface HydrateElement {
193
- [attrName: string]: string | undefined;
194
- }
195
- export interface HydrateAnchorElement extends HydrateElement {
196
- href?: string;
197
- target?: string;
198
- }
199
- export interface HydrateImgElement extends HydrateElement {
200
- src?: string;
201
- }
202
- export interface HydrateScriptElement extends HydrateElement {
203
- src?: string;
204
- type?: string;
205
- }
206
- export interface HydrateStyleElement extends HydrateElement {
207
- href?: string;
208
- }
209
- export interface HydrateStaticData {
210
- id: string;
211
- type: string;
212
- content: string;
213
- }
214
- export declare function renderToString(html: string | any, options?: SerializeDocumentOptions): Promise<HydrateResults>;
215
- export declare function hydrateDocument(doc: any | string, options?: HydrateDocumentOptions): Promise<HydrateResults>;
216
- export declare function serializeDocumentToString(doc: any, opts: HydrateFactoryOptions): string;
217
-
218
- export {};