@patternfly/elements 4.1.0 → 4.2.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 (286) hide show
  1. package/custom-elements.json +13726 -12682
  2. package/package.json +17 -14
  3. package/pf-accordion/pf-accordion-header.css +37 -0
  4. package/pf-accordion/pf-accordion-header.d.ts +0 -61
  5. package/pf-accordion/pf-accordion-header.js +180 -2
  6. package/pf-accordion/pf-accordion-header.js.map +1 -1
  7. package/pf-accordion/pf-accordion-panel.css +12 -0
  8. package/pf-accordion/pf-accordion-panel.d.ts +0 -34
  9. package/pf-accordion/pf-accordion-panel.js +87 -2
  10. package/pf-accordion/pf-accordion-panel.js.map +1 -1
  11. package/pf-accordion/pf-accordion.css +62 -0
  12. package/pf-accordion/pf-accordion.d.ts +1 -64
  13. package/pf-accordion/pf-accordion.js +156 -2
  14. package/pf-accordion/pf-accordion.js.map +1 -1
  15. package/pf-avatar/pf-avatar.css +14 -0
  16. package/pf-avatar/pf-avatar.d.ts +1 -14
  17. package/pf-avatar/pf-avatar.js +82 -2
  18. package/pf-avatar/pf-avatar.js.map +1 -1
  19. package/pf-back-to-top/pf-back-to-top.css +12 -0
  20. package/pf-back-to-top/pf-back-to-top.d.ts +1 -17
  21. package/pf-back-to-top/pf-back-to-top.js +87 -3
  22. package/pf-back-to-top/pf-back-to-top.js.map +1 -1
  23. package/pf-background-image/pf-background-image.css +7 -0
  24. package/pf-background-image/pf-background-image.d.ts +1 -8
  25. package/pf-background-image/pf-background-image.js +76 -2
  26. package/pf-background-image/pf-background-image.js.map +1 -1
  27. package/pf-badge/pf-badge.css +13 -0
  28. package/pf-badge/pf-badge.d.ts +1 -13
  29. package/pf-badge/pf-badge.js +53 -2
  30. package/pf-badge/pf-badge.js.map +1 -1
  31. package/pf-banner/pf-banner.css +21 -0
  32. package/pf-banner/pf-banner.d.ts +1 -19
  33. package/pf-banner/pf-banner.js +122 -2
  34. package/pf-banner/pf-banner.js.map +1 -1
  35. package/pf-button/pf-button-tokens.css +38 -0
  36. package/pf-button/pf-button.d.ts +1 -106
  37. package/pf-button/pf-button.js +837 -4
  38. package/pf-button/pf-button.js.map +1 -1
  39. package/pf-card/pf-card.css +24 -0
  40. package/pf-card/pf-card.d.ts +1 -38
  41. package/pf-card/pf-card.js +248 -2
  42. package/pf-card/pf-card.js.map +1 -1
  43. package/pf-chip/pf-chip-group.css +15 -0
  44. package/pf-chip/pf-chip-group.d.ts +0 -15
  45. package/pf-chip/pf-chip-group.js +111 -2
  46. package/pf-chip/pf-chip-group.js.map +1 -1
  47. package/pf-chip/pf-chip.css +30 -1
  48. package/pf-chip/pf-chip.d.ts +1 -20
  49. package/pf-chip/pf-chip.js +135 -2
  50. package/pf-chip/pf-chip.js.map +1 -1
  51. package/pf-clipboard-copy/pf-clipboard-copy.css +25 -0
  52. package/pf-clipboard-copy/pf-clipboard-copy.d.ts +1 -27
  53. package/pf-clipboard-copy/pf-clipboard-copy.js +318 -3
  54. package/pf-clipboard-copy/pf-clipboard-copy.js.map +1 -1
  55. package/pf-code-block/pf-code-block.css +11 -1
  56. package/pf-code-block/pf-code-block.js +70 -18
  57. package/pf-code-block/pf-code-block.js.map +1 -1
  58. package/pf-dropdown/pf-dropdown-group.js +40 -2
  59. package/pf-dropdown/pf-dropdown-group.js.map +1 -1
  60. package/pf-dropdown/pf-dropdown-item.css +10 -0
  61. package/pf-dropdown/pf-dropdown-item.d.ts +0 -27
  62. package/pf-dropdown/pf-dropdown-item.js +155 -2
  63. package/pf-dropdown/pf-dropdown-item.js.map +1 -1
  64. package/pf-dropdown/pf-dropdown-menu.js +39 -2
  65. package/pf-dropdown/pf-dropdown-menu.js.map +1 -1
  66. package/pf-dropdown/pf-dropdown.css +5 -0
  67. package/pf-dropdown/pf-dropdown.d.ts +1 -9
  68. package/pf-dropdown/pf-dropdown.js +350 -2
  69. package/pf-dropdown/pf-dropdown.js.map +1 -1
  70. package/pf-icon/pf-icon.css +1 -0
  71. package/pf-icon/pf-icon.d.ts +1 -3
  72. package/pf-icon/pf-icon.js +44 -4
  73. package/pf-icon/pf-icon.js.map +1 -1
  74. package/pf-jump-links/pf-jump-links-item.css +7 -1
  75. package/pf-jump-links/pf-jump-links-item.d.ts +0 -8
  76. package/pf-jump-links/pf-jump-links-item.js +77 -2
  77. package/pf-jump-links/pf-jump-links-item.js.map +1 -1
  78. package/pf-jump-links/pf-jump-links-list.css +3 -0
  79. package/pf-jump-links/pf-jump-links-list.d.ts +0 -5
  80. package/pf-jump-links/pf-jump-links-list.js +20 -2
  81. package/pf-jump-links/pf-jump-links-list.js.map +1 -1
  82. package/pf-jump-links/pf-jump-links.css +36 -0
  83. package/pf-jump-links/pf-jump-links.d.ts +1 -38
  84. package/pf-jump-links/pf-jump-links.js +179 -2
  85. package/pf-jump-links/pf-jump-links.js.map +1 -1
  86. package/pf-label/pf-label.css +51 -1
  87. package/pf-label/pf-label.d.ts +1 -58
  88. package/pf-label/pf-label.js +257 -2
  89. package/pf-label/pf-label.js.map +1 -1
  90. package/pf-modal/pf-modal.css +11 -0
  91. package/pf-modal/pf-modal.d.ts +1 -24
  92. package/pf-modal/pf-modal.js +215 -2
  93. package/pf-modal/pf-modal.js.map +1 -1
  94. package/pf-panel/pf-panel.css +29 -0
  95. package/pf-panel/pf-panel.d.ts +1 -32
  96. package/pf-panel/pf-panel.js +204 -2
  97. package/pf-panel/pf-panel.js.map +1 -1
  98. package/pf-popover/pf-popover.css +33 -0
  99. package/pf-popover/pf-popover.d.ts +1 -108
  100. package/pf-popover/pf-popover.js +251 -3
  101. package/pf-popover/pf-popover.js.map +1 -1
  102. package/pf-progress/pf-progress.css +19 -0
  103. package/pf-progress/pf-progress.d.ts +1 -57
  104. package/pf-progress/pf-progress.js +231 -2
  105. package/pf-progress/pf-progress.js.map +1 -1
  106. package/pf-progress-stepper/pf-progress-step.js +126 -2
  107. package/pf-progress-stepper/pf-progress-step.js.map +1 -1
  108. package/pf-progress-stepper/pf-progress-stepper.css +96 -0
  109. package/pf-progress-stepper/pf-progress-stepper.d.ts +1 -115
  110. package/pf-progress-stepper/pf-progress-stepper.js +326 -2
  111. package/pf-progress-stepper/pf-progress-stepper.js.map +1 -1
  112. package/pf-search-input/pf-search-input.css +308 -0
  113. package/pf-search-input/pf-search-input.d.ts +75 -0
  114. package/pf-search-input/pf-search-input.js +630 -0
  115. package/pf-search-input/pf-search-input.js.map +1 -0
  116. package/pf-search-input/test/pf-search-input.e2e.d.ts +1 -0
  117. package/pf-search-input/test/pf-search-input.e2e.js +23 -0
  118. package/pf-search-input/test/pf-search-input.e2e.js.map +1 -0
  119. package/pf-search-input/test/pf-search-input.spec.d.ts +1 -0
  120. package/pf-search-input/test/pf-search-input.spec.js +1021 -0
  121. package/pf-search-input/test/pf-search-input.spec.js.map +1 -0
  122. package/pf-select/pf-option-group.js +27 -2
  123. package/pf-select/pf-option-group.js.map +1 -1
  124. package/pf-select/pf-option.css +9 -1
  125. package/pf-select/pf-option.js +83 -2
  126. package/pf-select/pf-option.js.map +1 -1
  127. package/pf-select/pf-select.css +157 -0
  128. package/pf-select/pf-select.d.ts +1 -158
  129. package/pf-select/pf-select.js +542 -5
  130. package/pf-select/pf-select.js.map +1 -1
  131. package/pf-spinner/pf-spinner.css +13 -0
  132. package/pf-spinner/pf-spinner.d.ts +1 -14
  133. package/pf-spinner/pf-spinner.js +101 -2
  134. package/pf-spinner/pf-spinner.js.map +1 -1
  135. package/pf-switch/pf-switch.css +22 -0
  136. package/pf-switch/pf-switch.d.ts +1 -30
  137. package/pf-switch/pf-switch.js +156 -2
  138. package/pf-switch/pf-switch.js.map +1 -1
  139. package/pf-table/pf-caption.js +10 -2
  140. package/pf-table/pf-caption.js.map +1 -1
  141. package/pf-table/pf-table.css +211 -0
  142. package/pf-table/pf-table.d.ts +1 -635
  143. package/pf-table/pf-table.js +437 -2
  144. package/pf-table/pf-table.js.map +1 -1
  145. package/pf-table/pf-tbody.js +18 -2
  146. package/pf-table/pf-tbody.js.map +1 -1
  147. package/pf-table/pf-td.js +107 -2
  148. package/pf-table/pf-td.js.map +1 -1
  149. package/pf-table/pf-th.js +95 -2
  150. package/pf-table/pf-th.js.map +1 -1
  151. package/pf-table/pf-thead.js +20 -2
  152. package/pf-table/pf-thead.js.map +1 -1
  153. package/pf-table/pf-tr.js +89 -2
  154. package/pf-table/pf-tr.js.map +1 -1
  155. package/pf-tabs/pf-tab-panel.css +1 -0
  156. package/pf-tabs/pf-tab-panel.d.ts +0 -2
  157. package/pf-tabs/pf-tab-panel.js +19 -3
  158. package/pf-tabs/pf-tab-panel.js.map +1 -1
  159. package/pf-tabs/pf-tab.css +33 -0
  160. package/pf-tabs/pf-tab.d.ts +0 -40
  161. package/pf-tabs/pf-tab.js +231 -2
  162. package/pf-tabs/pf-tab.js.map +1 -1
  163. package/pf-tabs/pf-tabs.css +26 -0
  164. package/pf-tabs/pf-tabs.d.ts +1 -34
  165. package/pf-tabs/pf-tabs.js +307 -2
  166. package/pf-tabs/pf-tabs.js.map +1 -1
  167. package/pf-text-area/pf-text-area.css +125 -0
  168. package/pf-text-area/pf-text-area.d.ts +1 -125
  169. package/pf-text-area/pf-text-area.js +320 -2
  170. package/pf-text-area/pf-text-area.js.map +1 -1
  171. package/pf-text-input/pf-text-input.css +126 -0
  172. package/pf-text-input/pf-text-input.d.ts +1 -126
  173. package/pf-text-input/pf-text-input.js +395 -2
  174. package/pf-text-input/pf-text-input.js.map +1 -1
  175. package/pf-tile/pf-tile.css +28 -8
  176. package/pf-tile/pf-tile.d.ts +1 -24
  177. package/pf-tile/pf-tile.js +156 -2
  178. package/pf-tile/pf-tile.js.map +1 -1
  179. package/pf-timestamp/pf-timestamp.d.ts +1 -0
  180. package/pf-timestamp/pf-timestamp.js +10 -2
  181. package/pf-timestamp/pf-timestamp.js.map +1 -1
  182. package/pf-tooltip/pf-tooltip.css +10 -0
  183. package/pf-tooltip/pf-tooltip.d.ts +1 -79
  184. package/pf-tooltip/pf-tooltip.js +113 -3
  185. package/pf-tooltip/pf-tooltip.js.map +1 -1
  186. package/pfe.min.js +0 -7439
  187. package/pfe.min.js.LEGAL.txt +0 -57
  188. package/pfe.min.js.map +0 -7
  189. package/react/pf-accordion/pf-accordion-header.d.ts +0 -5
  190. package/react/pf-accordion/pf-accordion-header.js +0 -12
  191. package/react/pf-accordion/pf-accordion-panel.d.ts +0 -5
  192. package/react/pf-accordion/pf-accordion-panel.js +0 -10
  193. package/react/pf-accordion/pf-accordion.d.ts +0 -5
  194. package/react/pf-accordion/pf-accordion.js +0 -13
  195. package/react/pf-avatar/pf-avatar.d.ts +0 -5
  196. package/react/pf-avatar/pf-avatar.js +0 -12
  197. package/react/pf-back-to-top/pf-back-to-top.d.ts +0 -5
  198. package/react/pf-back-to-top/pf-back-to-top.js +0 -10
  199. package/react/pf-background-image/pf-background-image.d.ts +0 -5
  200. package/react/pf-background-image/pf-background-image.js +0 -10
  201. package/react/pf-badge/pf-badge.d.ts +0 -5
  202. package/react/pf-badge/pf-badge.js +0 -10
  203. package/react/pf-banner/pf-banner.d.ts +0 -5
  204. package/react/pf-banner/pf-banner.js +0 -10
  205. package/react/pf-button/pf-button.d.ts +0 -5
  206. package/react/pf-button/pf-button.js +0 -12
  207. package/react/pf-card/pf-card.d.ts +0 -5
  208. package/react/pf-card/pf-card.js +0 -10
  209. package/react/pf-chip/pf-chip-group.d.ts +0 -5
  210. package/react/pf-chip/pf-chip-group.js +0 -13
  211. package/react/pf-chip/pf-chip.d.ts +0 -5
  212. package/react/pf-chip/pf-chip.js +0 -13
  213. package/react/pf-clipboard-copy/pf-clipboard-copy.d.ts +0 -5
  214. package/react/pf-clipboard-copy/pf-clipboard-copy.js +0 -12
  215. package/react/pf-code-block/pf-code-block.d.ts +0 -5
  216. package/react/pf-code-block/pf-code-block.js +0 -10
  217. package/react/pf-dropdown/pf-dropdown-group.d.ts +0 -5
  218. package/react/pf-dropdown/pf-dropdown-group.js +0 -10
  219. package/react/pf-dropdown/pf-dropdown-item.d.ts +0 -5
  220. package/react/pf-dropdown/pf-dropdown-item.js +0 -10
  221. package/react/pf-dropdown/pf-dropdown-menu.d.ts +0 -5
  222. package/react/pf-dropdown/pf-dropdown-menu.js +0 -10
  223. package/react/pf-dropdown/pf-dropdown.d.ts +0 -5
  224. package/react/pf-dropdown/pf-dropdown.js +0 -14
  225. package/react/pf-icon/pf-icon.d.ts +0 -5
  226. package/react/pf-icon/pf-icon.js +0 -13
  227. package/react/pf-jump-links/pf-jump-links-item.d.ts +0 -5
  228. package/react/pf-jump-links/pf-jump-links-item.js +0 -13
  229. package/react/pf-jump-links/pf-jump-links-list.d.ts +0 -5
  230. package/react/pf-jump-links/pf-jump-links-list.js +0 -10
  231. package/react/pf-jump-links/pf-jump-links.d.ts +0 -5
  232. package/react/pf-jump-links/pf-jump-links.js +0 -12
  233. package/react/pf-label/pf-label.d.ts +0 -5
  234. package/react/pf-label/pf-label.js +0 -12
  235. package/react/pf-modal/pf-modal.d.ts +0 -5
  236. package/react/pf-modal/pf-modal.js +0 -13
  237. package/react/pf-panel/pf-panel.d.ts +0 -5
  238. package/react/pf-panel/pf-panel.js +0 -10
  239. package/react/pf-popover/pf-popover.d.ts +0 -5
  240. package/react/pf-popover/pf-popover.js +0 -10
  241. package/react/pf-progress/pf-progress.d.ts +0 -5
  242. package/react/pf-progress/pf-progress.js +0 -10
  243. package/react/pf-progress-stepper/pf-progress-step.d.ts +0 -5
  244. package/react/pf-progress-stepper/pf-progress-step.js +0 -10
  245. package/react/pf-progress-stepper/pf-progress-stepper.d.ts +0 -5
  246. package/react/pf-progress-stepper/pf-progress-stepper.js +0 -10
  247. package/react/pf-select/pf-option-group.d.ts +0 -5
  248. package/react/pf-select/pf-option-group.js +0 -10
  249. package/react/pf-select/pf-option.d.ts +0 -5
  250. package/react/pf-select/pf-option.js +0 -10
  251. package/react/pf-select/pf-select.d.ts +0 -5
  252. package/react/pf-select/pf-select.js +0 -13
  253. package/react/pf-spinner/pf-spinner.d.ts +0 -5
  254. package/react/pf-spinner/pf-spinner.js +0 -10
  255. package/react/pf-switch/pf-switch.d.ts +0 -5
  256. package/react/pf-switch/pf-switch.js +0 -12
  257. package/react/pf-table/pf-caption.d.ts +0 -5
  258. package/react/pf-table/pf-caption.js +0 -10
  259. package/react/pf-table/pf-table.d.ts +0 -5
  260. package/react/pf-table/pf-table.js +0 -10
  261. package/react/pf-table/pf-tbody.d.ts +0 -5
  262. package/react/pf-table/pf-tbody.js +0 -10
  263. package/react/pf-table/pf-td.d.ts +0 -5
  264. package/react/pf-table/pf-td.js +0 -10
  265. package/react/pf-table/pf-th.d.ts +0 -5
  266. package/react/pf-table/pf-th.js +0 -10
  267. package/react/pf-table/pf-thead.d.ts +0 -5
  268. package/react/pf-table/pf-thead.js +0 -10
  269. package/react/pf-table/pf-tr.d.ts +0 -5
  270. package/react/pf-table/pf-tr.js +0 -10
  271. package/react/pf-tabs/pf-tab-panel.d.ts +0 -5
  272. package/react/pf-tabs/pf-tab-panel.js +0 -10
  273. package/react/pf-tabs/pf-tab.d.ts +0 -5
  274. package/react/pf-tabs/pf-tab.js +0 -12
  275. package/react/pf-tabs/pf-tabs.d.ts +0 -5
  276. package/react/pf-tabs/pf-tabs.js +0 -10
  277. package/react/pf-text-area/pf-text-area.d.ts +0 -5
  278. package/react/pf-text-area/pf-text-area.js +0 -10
  279. package/react/pf-text-input/pf-text-input.d.ts +0 -5
  280. package/react/pf-text-input/pf-text-input.js +0 -10
  281. package/react/pf-tile/pf-tile.d.ts +0 -5
  282. package/react/pf-tile/pf-tile.js +0 -10
  283. package/react/pf-timestamp/pf-timestamp.d.ts +0 -5
  284. package/react/pf-timestamp/pf-timestamp.js +0 -10
  285. package/react/pf-tooltip/pf-tooltip.d.ts +0 -5
  286. package/react/pf-tooltip/pf-tooltip.js +0 -10
@@ -1 +1 @@
1
- {"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\nimport { listen } from '@patternfly/pfe-core/decorators/listen.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { NumberListConverter } from '@patternfly/pfe-core';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { PfAccordionHeader, PfAccordionHeaderChangeEvent } from './pf-accordion-header.js';\nimport { PfAccordionPanel } from './pf-accordion-panel.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\nexport class PfAccordionExpandEvent extends Event {\n constructor(\n public toggle: PfAccordionHeader,\n public panel: PfAccordionPanel,\n ) {\n super('expand', { bubbles: true, cancelable: true });\n }\n}\n\nexport class PfAccordionCollapseEvent extends Event {\n constructor(\n public toggle: PfAccordionHeader,\n public panel: PfAccordionPanel,\n ) {\n super('collapse', { bubbles: true, cancelable: true });\n }\n}\n\n/**\n * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.\n * @summary Toggle the visibility of sections of content\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n * @slot\n * Place the `pf-accordion-header` and `pf-accordion-panel` elements here.\n * @cssprop [--pf-c-accordion--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)]\n * @cssprop [--pf-c-accordion__toggle--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__toggle--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__toggle--before--BackgroundColor=transparent]\n * @cssprop [--pf-c-accordion__toggle--before--Top=0]\n * @cssprop [--pf-c-accordion__toggle--hover--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--focus--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--active--BackgroundColor=var(--pf-global--BackgroundColor--200, #f0f0f0)]\n * @cssprop [--pf-c-accordion__toggle--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]\n * @cssprop [--pf-c-accordion__toggle-text--MaxWidth=calc(100 - var(--pf-global--spacer--lg, 1.5rem))]\n * @cssprop [--pf-c-accordion__toggle--hover__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--active__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--Color=var(--pf-global--link--Color, #06c)]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--semi-bold, 700)]\n * @cssprop [--pf-c-accordion__toggle-icon--Transition=.2s ease-in 0s]\n * @cssprop [--pf-c-accordion__toggle--m-expanded__toggle-icon--Rotate=90deg]\n * @cssprop [--pf-c-accordion__expanded-content--Color=var(--pf-global--Color--200, #6a6e73)]\n * @cssprop [--pf-c-accordion__expanded-content--FontSize=var(--pf-global--FontSize--sm, 0.875rem)]\n * @cssprop [--pf-c-accordion__expanded-content--m-expanded__expanded-content-body--before--BackgroundColor=var(--pf-global--primary-color--100, #06c)]\n * @cssprop [--pf-c-accordion__expanded-content--m-fixed--MaxHeight=9.375rem]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingTop=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingBottom=var(--pf-global--spacer--sm, 0.5rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--PaddingLeft=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop=0]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--BackgroundColor=transparent]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--Width=var(--pf-global--BorderWidth--lg, 3px)]\n * @cssprop [--pf-c-accordion__expanded-content-body--before--Top=0]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingTop=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontFamily=var(--pf-global--FontFamily--heading--sans-serif, \"RedHatDisplay\", \"Overpass\", overpass, helvetica, arial, sans-serif)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--FontSize=var(--pf-global--FontSize--xl, 1.25rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--hover__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--active__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--focus__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight=var(--pf-global--FontWeight--normal, 400)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--FontSize=var(--pf-global--FontSize--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content--Color=var(--pf-global--Color--100, #151515)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingTop=0]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingRight=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingBottom=var(--pf-global--spacer--md, 1rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--last-child--PaddingBottom=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-display-lg__expanded-content-body--PaddingLeft=var(--pf-global--spacer--lg, 1.5rem)]\n * @cssprop [--pf-c-accordion--m-bordered--BorderTopWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered--BorderTopColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--before--Top=calc(-1 * var(--pf-global--BorderWidth--sm, 1px))]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderTopWidth=0]\n * @cssprop [--pf-c-accordion--m-bordered__toggle--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)]\n * @cssprop [--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor=var(--pf-global--BorderColor--100, #d2d2d2)]\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n /** When true, only one accordion panel may be expanded at a time */\n @property({ reflect: true, type: Boolean }) single = false;\n\n /** Whether to apply the `bordered` style variant */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** Whether to apply the `large` style variant */\n @property({ type: Boolean, reflect: true }) large = false;\n\n @property({ type: Boolean, reflect: true }) fixed = false;\n\n /**\n * Sets and reflects the currently expanded accordion 0-based indexes.\n * Use commas to separate multiple indexes.\n * ```html\n * <pf-accordion expanded-index=\"1,2\">\n * ...\n * </pf-accordion>\n * ```\n */\n @property({ attribute: 'expanded-index', converter: NumberListConverter })\n get expandedIndex(): number[] {\n return this.#expandedIndex;\n }\n\n set expandedIndex(value) {\n const old = this.#expandedIndex;\n this.#expandedIndex = value;\n this.#tabindex.atFocusedItemIndex = value.at(-1) ?? -1;\n if (JSON.stringify(old) !== JSON.stringify(value)) {\n this.requestUpdate('expandedIndex', old);\n this.collapseAll().then(async () => {\n for (const i of this.expandedIndex) {\n await this.expand(i);\n }\n });\n }\n }\n\n #logger = new Logger(this);\n\n // actually is read in #init, by the `||=` operator\n // eslint-disable-next-line no-unused-private-class-members\n #initialized = false;\n\n #mo = new MutationObserver(() => this.#init());\n\n #tabindex = RovingTabindexController.of(this, {\n getItems: () => this.headers,\n });\n\n #expandedIndex: number[] = [];\n\n protected expandedSets: Set<number> = new Set<number>();\n\n get #activeHeader() {\n const { headers } = this;\n const index = headers.findIndex(header => header.matches(':focus,:focus-within'));\n return index > -1 ? headers.at(index) : undefined;\n }\n\n get headers(): PfAccordionHeader[] {\n return this.#allHeaders();\n }\n\n get panels(): PfAccordionPanel[] {\n return this.#allPanels();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.#mo.observe(this, { childList: true });\n this.#init();\n }\n\n render(): TemplateResult<1> {\n return html`\n <slot></slot>\n `;\n }\n\n async firstUpdated(): Promise<void> {\n let lastExpandedIndex: number;\n const { headers, single } = this;\n const lastExpanded = headers.filter(x => x.hasAttribute('expanded')).pop();\n if (lastExpanded) {\n lastExpandedIndex = headers.indexOf(lastExpanded);\n }\n headers.forEach((header, index) => {\n if (header.expanded && (!single || index === lastExpandedIndex)) {\n this.#expandHeader(header, index);\n const panel = this.#panelForHeader(header);\n if (panel) {\n this.#expandPanel(panel);\n }\n }\n });\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const c = await super.getUpdateComplete();\n const results = await Promise.all([\n ...this.#allHeaders().map(x => x.updateComplete),\n ...this.#allPanels().map(x => x.updateComplete),\n ]);\n return c && results.every(Boolean);\n }\n\n @observes('large')\n protected largeChanged(): void {\n for (const el of [...this.headers, ...this.panels]) {\n el.toggleAttribute('large', this.large);\n }\n }\n\n /**\n * Initialize the accordion by connecting headers and panels\n * with aria controls and labels; set up the default disclosure\n * state if not set by the author; and check the URL for default\n * open\n */\n async #init() {\n this.#initialized ||= !!await this.updateComplete;\n this.updateAccessibility();\n }\n\n @listen('focusin')\n protected updateActiveHeader(): void {\n if (this.#activeHeader\n && this.#activeHeader !== this.headers.at(this.#tabindex.atFocusedItemIndex)) {\n this.#tabindex.atFocusedItemIndex = this.headers.indexOf(this.#activeHeader);\n }\n }\n\n #panelForHeader(header: PfAccordionHeader) {\n const next = header.nextElementSibling;\n if (!(next instanceof PfAccordionPanel)) {\n return void this.#logger.error('Sibling element to a header needs to be a panel');\n } else {\n return next;\n }\n }\n\n #expandHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n // If this index is not already listed in the expandedSets array, add it\n this.expandedSets.add(index);\n this.#expandedIndex = [...this.expandedSets as Set<number>];\n header.expanded = true;\n }\n\n #expandPanel(panel: PfAccordionPanel) {\n panel.expanded = true;\n panel.hidden = false;\n }\n\n async #collapseHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n if (!this.expandedSets) {\n await this.updateComplete;\n }\n this.expandedSets.delete(index);\n header.expanded = false;\n await header.updateComplete;\n }\n\n async #collapsePanel(panel: PfAccordionPanel) {\n await panel.updateComplete;\n if (!panel.expanded) {\n return;\n }\n\n panel.expanded = false;\n panel.hidden = true;\n }\n\n @listen('change')\n protected onChange(event: PfAccordionHeaderChangeEvent): void {\n if (event instanceof PfAccordionHeaderChangeEvent && event.accordion === this) {\n const index = this.#getIndex(event.target);\n if (event.expanded) {\n this.expand(index);\n } else {\n this.collapse(index);\n }\n event.stopPropagation();\n }\n }\n\n #allHeaders(accordion: PfAccordion = this): PfAccordionHeader[] {\n return Array.from(accordion.children ?? []).filter((x): x is PfAccordionHeader =>\n x instanceof PfAccordionHeader);\n }\n\n #allPanels(accordion: PfAccordion = this): PfAccordionPanel[] {\n return Array.from(accordion.children ?? []).filter((x): x is PfAccordionPanel =>\n x instanceof PfAccordionPanel);\n }\n\n #getIndex(el: Element | null) {\n if (el instanceof PfAccordionHeader) {\n return this.headers.findIndex(header => header.id === el.id);\n }\n\n if (el instanceof PfAccordionPanel) {\n return this.panels.findIndex(panel => panel.id === el.id);\n }\n\n this.#logger.warn('The #getIndex method expects to receive a header or panel element.');\n return -1;\n }\n\n public updateAccessibility(): void {\n const { headers } = this;\n\n // For each header in the accordion, attach the aria connections\n headers.forEach(header => {\n const panel = this.#panelForHeader(header);\n if (panel) {\n header.setAttribute('aria-controls', panel.id);\n panel.setAttribute('aria-labelledby', header.id);\n panel.hidden = !panel.expanded;\n }\n });\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * Accepts an optional parent accordion to search for headers and panels.\n * @param index index (0-based) of the panel to expand\n */\n public async expand(index: number): Promise<void> {\n if (index === -1) {\n return;\n }\n\n // Get all the headers and capture the item by index value\n if (this.single) {\n await Promise.all([\n ...this.headers.map((header, index) => header.expanded && this.collapse(index)),\n ]);\n }\n\n const header = this.headers[index];\n if (!header) {\n return;\n }\n\n const panel = this.#panelForHeader(header);\n if (!panel) {\n return;\n }\n\n // If the header and panel exist, open both\n this.#expandHeader(header, index);\n this.#expandPanel(panel);\n\n this.dispatchEvent(new PfAccordionExpandEvent(header, panel));\n\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n * @param index index (0-based) of the panel to collapse\n */\n public async collapse(index: number): Promise<void> {\n const header = this.headers.at(index);\n const panel = this.panels.at(index);\n\n if (!header || !panel) {\n return;\n }\n\n this.#collapseHeader(header);\n this.#collapsePanel(panel);\n\n this.dispatchEvent(new PfAccordionCollapseEvent(header, panel));\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n * @param index index (0-based) of the panel to toggle\n */\n public async toggle(index: number): Promise<void> {\n const { headers } = this;\n const header = headers[index];\n\n if (!header.expanded) {\n await this.expand(index);\n } else {\n await this.collapse(index);\n }\n }\n\n /**\n * Expands all accordion items.\n */\n public async expandAll(): Promise<void> {\n this.headers.forEach(header => this.#expandHeader(header));\n this.panels.forEach(panel => this.#expandPanel(panel));\n await this.updateComplete;\n }\n\n\n /**\n * Collapses all accordion items.\n */\n public async collapseAll(): Promise<void> {\n this.headers.forEach(header => this.#collapseHeader(header));\n this.panels.forEach(panel => this.#collapsePanel(panel));\n await this.updateComplete;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion': PfAccordion;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-accordion.js","sourceRoot":"","sources":["pf-accordion.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6CAA6C,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,2CAA2C,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AAEjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,gEAAgE,CAAC;AAC1G,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAEpE,OAAO,EAAE,iBAAiB,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIxC,MAAM,OAAO,sBAAuB,SAAQ,KAAK;IAC/C,YACS,MAAyB,EACzB,KAAuB;QAE9B,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAH9C,WAAM,GAAN,MAAM,CAAmB;QACzB,UAAK,GAAL,KAAK,CAAkB;IAGhC,CAAC;CACF;AAED,MAAM,OAAO,wBAAyB,SAAQ,KAAK;IACjD,YACS,MAAyB,EACzB,KAAuB;QAE9B,KAAK,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAHhD,WAAM,GAAN,MAAM,CAAmB;QACzB,UAAK,GAAL,KAAK,CAAkB;IAGhC,CAAC;CACF;AAUM,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;;QAGL,oEAAoE;QACxB,WAAM,GAAG,KAAK,CAAC;QAE3D,oDAAoD;QACR,aAAQ,GAAG,KAAK,CAAC;QAE7D,iDAAiD;QACL,UAAK,GAAG,KAAK,CAAC;QAEd,UAAK,GAAG,KAAK,CAAC;QA8B1D,8BAAU,IAAI,MAAM,CAAC,IAAI,CAAC,EAAC;QAE3B,mDAAmD;QACnD,2DAA2D;QAC3D,mCAAe,KAAK,EAAC;QAErB,0BAAM,IAAI,gBAAgB,CAAC,GAAG,EAAE,CAAC,uBAAA,IAAI,iDAAM,MAAV,IAAI,CAAQ,CAAC,EAAC;QAE/C,gCAAY,wBAAwB,CAAC,EAAE,CAAC,IAAI,EAAE;YAC5C,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO;SAC7B,CAAC,EAAC;QAEH,qCAA2B,EAAE,EAAC;QAEpB,iBAAY,GAAgB,IAAI,GAAG,EAAU,CAAC;;IA1CxD;;;;;;;;OAQG;IAEH,IAAI,aAAa;QACf,OAAO,uBAAA,IAAI,kCAAe,CAAC;IAC7B,CAAC;IAED,IAAI,aAAa,CAAC,KAAK;QACrB,MAAM,GAAG,GAAG,uBAAA,IAAI,kCAAe,CAAC;QAChC,uBAAA,IAAI,8BAAkB,KAAK,MAAA,CAAC;QAC5B,uBAAA,IAAI,6BAAU,CAAC,kBAAkB,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QACvD,IAAI,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,eAAe,EAAE,GAAG,CAAC,CAAC;YACzC,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;gBACjC,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACnC,MAAM,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAwBD,IAAI,OAAO;QACT,OAAO,uBAAA,IAAI,uDAAY,MAAhB,IAAI,CAAc,CAAC;IAC5B,CAAC;IAED,IAAI,MAAM;QACR,OAAO,uBAAA,IAAI,sDAAW,MAAf,IAAI,CAAa,CAAC;IAC3B,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,uBAAA,IAAI,uBAAI,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5C,uBAAA,IAAI,iDAAM,MAAV,IAAI,CAAQ,CAAC;IACf,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;IAED,KAAK,CAAC,YAAY;QAChB,IAAI,iBAAyB,CAAC;QAC9B,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;QACjC,MAAM,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QAC3E,IAAI,YAAY,EAAE,CAAC;YACjB,iBAAiB,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QACpD,CAAC;QACD,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YAChC,IAAI,MAAM,CAAC,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,KAAK,iBAAiB,CAAC,EAAE,CAAC;gBAChE,uBAAA,IAAI,yDAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,KAAK,CAAC,CAAC;gBAClC,MAAM,KAAK,GAAG,uBAAA,IAAI,2DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC;gBAC3C,IAAI,KAAK,EAAE,CAAC;oBACV,uBAAA,IAAI,wDAAa,MAAjB,IAAI,EAAc,KAAK,CAAC,CAAC;gBAC3B,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEkB,KAAK,CAAC,iBAAiB;QACxC,MAAM,CAAC,GAAG,MAAM,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1C,MAAM,OAAO,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YAChC,GAAG,uBAAA,IAAI,uDAAY,MAAhB,IAAI,CAAc,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;YAChD,GAAG,uBAAA,IAAI,sDAAW,MAAf,IAAI,CAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;SAChD,CAAC,CAAC;QACH,OAAO,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAGS,YAAY;QACpB,KAAK,MAAM,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;YACnD,EAAE,CAAC,eAAe,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1C,CAAC;IACH,CAAC;IAcS,kBAAkB;QAC1B,IAAI,uBAAA,IAAI,6DAAc;eACf,uBAAA,IAAI,6DAAc,KAAK,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,uBAAA,IAAI,6BAAU,CAAC,kBAAkB,CAAC,EAAE,CAAC;YACjF,uBAAA,IAAI,6BAAU,CAAC,kBAAkB,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,uBAAA,IAAI,6DAAc,CAAC,CAAC;QAC/E,CAAC;IACH,CAAC;IA2CS,QAAQ,CAAC,KAAmC;QACpD,IAAI,KAAK,YAAY,4BAA4B,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;YAC9E,MAAM,KAAK,GAAG,uBAAA,IAAI,qDAAU,MAAd,IAAI,EAAW,KAAK,CAAC,MAAM,CAAC,CAAC;YAC3C,IAAI,KAAK,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;YACD,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;IACH,CAAC;IAyBM,mBAAmB;QACxB,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAEzB,gEAAgE;QAChE,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvB,MAAM,KAAK,GAAG,uBAAA,IAAI,2DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC;YAC3C,IAAI,KAAK,EAAE,CAAC;gBACV,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;gBAC/C,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,EAAE,CAAC,CAAC;gBACjD,KAAK,CAAC,MAAM,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC;YACjC,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACI,KAAK,CAAC,MAAM,CAAC,KAAa;QAC/B,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE,CAAC;YACjB,OAAO;QACT,CAAC;QAED,0DAA0D;QAC1D,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,MAAM,OAAO,CAAC,GAAG,CAAC;gBAChB,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aAChF,CAAC,CAAC;QACL,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACnC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,uBAAA,IAAI,2DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC;QAC3C,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO;QACT,CAAC;QAED,2CAA2C;QAC3C,uBAAA,IAAI,yDAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,KAAK,CAAC,CAAC;QAClC,uBAAA,IAAI,wDAAa,MAAjB,IAAI,EAAc,KAAK,CAAC,CAAC;QAEzB,IAAI,CAAC,aAAa,CAAC,IAAI,sBAAsB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAE9D,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,QAAQ,CAAC,KAAa;QACjC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QACtC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;QAEpC,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;YACtB,OAAO;QACT,CAAC;QAED,uBAAA,IAAI,2DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC;QAC7B,uBAAA,IAAI,0DAAe,MAAnB,IAAI,EAAgB,KAAK,CAAC,CAAC;QAE3B,IAAI,CAAC,aAAa,CAAC,IAAI,wBAAwB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAChE,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,MAAM,CAAC,KAAa;QAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACzB,MAAM,MAAM,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;QAE9B,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;YACrB,MAAM,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC;IAED;;OAEG;IACI,KAAK,CAAC,SAAS;QACpB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,uBAAA,IAAI,yDAAc,MAAlB,IAAI,EAAe,MAAM,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,uBAAA,IAAI,wDAAa,MAAjB,IAAI,EAAc,KAAK,CAAC,CAAC,CAAC;QACvD,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAGD;;OAEG;IACI,KAAK,CAAC,WAAW;QACtB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,uBAAA,IAAI,2DAAgB,MAApB,IAAI,EAAiB,MAAM,CAAC,CAAC,CAAC;QAC7D,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,uBAAA,IAAI,0DAAe,MAAnB,IAAI,EAAgB,KAAK,CAAC,CAAC,CAAC;QACzD,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;;;;;;;;;IAhQC,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACzB,MAAM,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAClF,OAAO,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;AACpD,CAAC;;AAyDD;;;;;GAKG;AACH,KAAK;IACH,sHAAsB,CAAC,CAAC,MAAM,IAAI,CAAC,cAAc,MAAA,CAAC;IAClD,IAAI,CAAC,mBAAmB,EAAE,CAAC;AAC7B,CAAC;mEAUe,MAAyB;IACvC,MAAM,IAAI,GAAG,MAAM,CAAC,kBAAkB,CAAC;IACvC,IAAI,CAAC,CAAC,IAAI,YAAY,gBAAgB,CAAC,EAAE,CAAC;QACxC,OAAO,KAAK,uBAAA,IAAI,2BAAQ,CAAC,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACpF,CAAC;SAAM,CAAC;QACN,OAAO,IAAI,CAAC;IACd,CAAC;AACH,CAAC;+DAEa,MAAyB,EAAE,KAAK,GAAG,uBAAA,IAAI,qDAAU,MAAd,IAAI,EAAW,MAAM,CAAC;IACrE,wEAAwE;IACxE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IAC7B,uBAAA,IAAI,8BAAkB,CAAC,GAAG,IAAI,CAAC,YAA2B,CAAC,MAAA,CAAC;IAC5D,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAC;AACzB,CAAC;6DAEY,KAAuB;IAClC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC;AACvB,CAAC;8BAED,KAAK,sCAAiB,MAAyB,EAAE,KAAK,GAAG,uBAAA,IAAI,qDAAU,MAAd,IAAI,EAAW,MAAM,CAAC;IAC7E,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IACD,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChC,MAAM,CAAC,QAAQ,GAAG,KAAK,CAAC;IACxB,MAAM,MAAM,CAAC,cAAc,CAAC;AAC9B,CAAC;6BAED,KAAK,qCAAgB,KAAuB;IAC1C,MAAM,KAAK,CAAC,cAAc,CAAC;IAC3B,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QACpB,OAAO;IACT,CAAC;IAED,KAAK,CAAC,QAAQ,GAAG,KAAK,CAAC;IACvB,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;AACtB,CAAC;2DAeW,YAAyB,IAAI;IACvC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAA0B,EAAE,CAC/E,CAAC,YAAY,iBAAiB,CAAC,CAAC;AACpC,CAAC;yDAEU,YAAyB,IAAI;IACtC,OAAO,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAyB,EAAE,CAC9E,CAAC,YAAY,gBAAgB,CAAC,CAAC;AACnC,CAAC;uDAES,EAAkB;IAC1B,IAAI,EAAE,YAAY,iBAAiB,EAAE,CAAC;QACpC,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,EAAE,YAAY,gBAAgB,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC;IAC5D,CAAC;IAED,uBAAA,IAAI,2BAAQ,CAAC,IAAI,CAAC,oEAAoE,CAAC,CAAC;IACxF,OAAO,CAAC,CAAC,CAAC;AACZ,CAAC;AAnNe,kBAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAGN;IAA3C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAgB;AAGf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAEd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAY1D;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;gDAGzE;AAuFS;IADT,QAAQ,CAAC,OAAO,CAAC;+CAKjB;AAcS;IADT,MAAM,CAAC,SAAS,CAAC;qDAMjB;AA2CS;IADT,MAAM,CAAC,QAAQ,CAAC;2CAWhB;AA7LU,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\nimport { listen } from '@patternfly/pfe-core/decorators/listen.js';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { NumberListConverter } from '@patternfly/pfe-core';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { PfAccordionHeader, PfAccordionHeaderChangeEvent } from './pf-accordion-header.js';\nimport { PfAccordionPanel } from './pf-accordion-panel.js';\n\nexport * from './pf-accordion-header.js';\nexport * from './pf-accordion-panel.js';\n\nimport style from './pf-accordion.css';\n\nexport class PfAccordionExpandEvent extends Event {\n constructor(\n public toggle: PfAccordionHeader,\n public panel: PfAccordionPanel,\n ) {\n super('expand', { bubbles: true, cancelable: true });\n }\n}\n\nexport class PfAccordionCollapseEvent extends Event {\n constructor(\n public toggle: PfAccordionHeader,\n public panel: PfAccordionPanel,\n ) {\n super('collapse', { bubbles: true, cancelable: true });\n }\n}\n\n/**\n * An **accordion** is an interactive container that expands and collapses to hide or reveal nested content. It takes advantage of progressive disclosure to help reduce page scrolling, by allowing users to choose whether they want to show or hide more detailed information as needed.\n * @summary Toggle the visibility of sections of content\n * @alias Accordion\n * @fires {AccordionExpandEvent} expand - when a panel expands\n * @fires {AccordionCollapseEvent} collapse - when a panel collapses\n */\n@customElement('pf-accordion')\nexport class PfAccordion extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n /** When true, only one accordion panel may be expanded at a time */\n @property({ reflect: true, type: Boolean }) single = false;\n\n /** Whether to apply the `bordered` style variant */\n @property({ type: Boolean, reflect: true }) bordered = false;\n\n /** Whether to apply the `large` style variant */\n @property({ type: Boolean, reflect: true }) large = false;\n\n @property({ type: Boolean, reflect: true }) fixed = false;\n\n /**\n * Sets and reflects the currently expanded accordion 0-based indexes.\n * Use commas to separate multiple indexes.\n * ```html\n * <pf-accordion expanded-index=\"1,2\">\n * ...\n * </pf-accordion>\n * ```\n */\n @property({ attribute: 'expanded-index', converter: NumberListConverter })\n get expandedIndex(): number[] {\n return this.#expandedIndex;\n }\n\n set expandedIndex(value) {\n const old = this.#expandedIndex;\n this.#expandedIndex = value;\n this.#tabindex.atFocusedItemIndex = value.at(-1) ?? -1;\n if (JSON.stringify(old) !== JSON.stringify(value)) {\n this.requestUpdate('expandedIndex', old);\n this.collapseAll().then(async () => {\n for (const i of this.expandedIndex) {\n await this.expand(i);\n }\n });\n }\n }\n\n #logger = new Logger(this);\n\n // actually is read in #init, by the `||=` operator\n // eslint-disable-next-line no-unused-private-class-members\n #initialized = false;\n\n #mo = new MutationObserver(() => this.#init());\n\n #tabindex = RovingTabindexController.of(this, {\n getItems: () => this.headers,\n });\n\n #expandedIndex: number[] = [];\n\n protected expandedSets: Set<number> = new Set<number>();\n\n get #activeHeader() {\n const { headers } = this;\n const index = headers.findIndex(header => header.matches(':focus,:focus-within'));\n return index > -1 ? headers.at(index) : undefined;\n }\n\n get headers(): PfAccordionHeader[] {\n return this.#allHeaders();\n }\n\n get panels(): PfAccordionPanel[] {\n return this.#allPanels();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this.#mo.observe(this, { childList: true });\n this.#init();\n }\n\n render(): TemplateResult<1> {\n return html`\n <!-- Place the \\`pf-accordion-header\\` and \\`pf-accordion-panel\\` elements here. -->\n <slot></slot>\n `;\n }\n\n async firstUpdated(): Promise<void> {\n let lastExpandedIndex: number;\n const { headers, single } = this;\n const lastExpanded = headers.filter(x => x.hasAttribute('expanded')).pop();\n if (lastExpanded) {\n lastExpandedIndex = headers.indexOf(lastExpanded);\n }\n headers.forEach((header, index) => {\n if (header.expanded && (!single || index === lastExpandedIndex)) {\n this.#expandHeader(header, index);\n const panel = this.#panelForHeader(header);\n if (panel) {\n this.#expandPanel(panel);\n }\n }\n });\n }\n\n protected override async getUpdateComplete(): Promise<boolean> {\n const c = await super.getUpdateComplete();\n const results = await Promise.all([\n ...this.#allHeaders().map(x => x.updateComplete),\n ...this.#allPanels().map(x => x.updateComplete),\n ]);\n return c && results.every(Boolean);\n }\n\n @observes('large')\n protected largeChanged(): void {\n for (const el of [...this.headers, ...this.panels]) {\n el.toggleAttribute('large', this.large);\n }\n }\n\n /**\n * Initialize the accordion by connecting headers and panels\n * with aria controls and labels; set up the default disclosure\n * state if not set by the author; and check the URL for default\n * open\n */\n async #init() {\n this.#initialized ||= !!await this.updateComplete;\n this.updateAccessibility();\n }\n\n @listen('focusin')\n protected updateActiveHeader(): void {\n if (this.#activeHeader\n && this.#activeHeader !== this.headers.at(this.#tabindex.atFocusedItemIndex)) {\n this.#tabindex.atFocusedItemIndex = this.headers.indexOf(this.#activeHeader);\n }\n }\n\n #panelForHeader(header: PfAccordionHeader) {\n const next = header.nextElementSibling;\n if (!(next instanceof PfAccordionPanel)) {\n return void this.#logger.error('Sibling element to a header needs to be a panel');\n } else {\n return next;\n }\n }\n\n #expandHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n // If this index is not already listed in the expandedSets array, add it\n this.expandedSets.add(index);\n this.#expandedIndex = [...this.expandedSets as Set<number>];\n header.expanded = true;\n }\n\n #expandPanel(panel: PfAccordionPanel) {\n panel.expanded = true;\n panel.hidden = false;\n }\n\n async #collapseHeader(header: PfAccordionHeader, index = this.#getIndex(header)) {\n if (!this.expandedSets) {\n await this.updateComplete;\n }\n this.expandedSets.delete(index);\n header.expanded = false;\n await header.updateComplete;\n }\n\n async #collapsePanel(panel: PfAccordionPanel) {\n await panel.updateComplete;\n if (!panel.expanded) {\n return;\n }\n\n panel.expanded = false;\n panel.hidden = true;\n }\n\n @listen('change')\n protected onChange(event: PfAccordionHeaderChangeEvent): void {\n if (event instanceof PfAccordionHeaderChangeEvent && event.accordion === this) {\n const index = this.#getIndex(event.target);\n if (event.expanded) {\n this.expand(index);\n } else {\n this.collapse(index);\n }\n event.stopPropagation();\n }\n }\n\n #allHeaders(accordion: PfAccordion = this): PfAccordionHeader[] {\n return Array.from(accordion.children ?? []).filter((x): x is PfAccordionHeader =>\n x instanceof PfAccordionHeader);\n }\n\n #allPanels(accordion: PfAccordion = this): PfAccordionPanel[] {\n return Array.from(accordion.children ?? []).filter((x): x is PfAccordionPanel =>\n x instanceof PfAccordionPanel);\n }\n\n #getIndex(el: Element | null) {\n if (el instanceof PfAccordionHeader) {\n return this.headers.findIndex(header => header.id === el.id);\n }\n\n if (el instanceof PfAccordionPanel) {\n return this.panels.findIndex(panel => panel.id === el.id);\n }\n\n this.#logger.warn('The #getIndex method expects to receive a header or panel element.');\n return -1;\n }\n\n public updateAccessibility(): void {\n const { headers } = this;\n\n // For each header in the accordion, attach the aria connections\n headers.forEach(header => {\n const panel = this.#panelForHeader(header);\n if (panel) {\n header.setAttribute('aria-controls', panel.id);\n panel.setAttribute('aria-labelledby', header.id);\n panel.hidden = !panel.expanded;\n }\n });\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand.\n * Accepts an optional parent accordion to search for headers and panels.\n * @param index index (0-based) of the panel to expand\n */\n public async expand(index: number): Promise<void> {\n if (index === -1) {\n return;\n }\n\n // Get all the headers and capture the item by index value\n if (this.single) {\n await Promise.all([\n ...this.headers.map((header, index) => header.expanded && this.collapse(index)),\n ]);\n }\n\n const header = this.headers[index];\n if (!header) {\n return;\n }\n\n const panel = this.#panelForHeader(header);\n if (!panel) {\n return;\n }\n\n // If the header and panel exist, open both\n this.#expandHeader(header, index);\n this.#expandPanel(panel);\n\n this.dispatchEvent(new PfAccordionExpandEvent(header, panel));\n\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to collapse.\n * @param index index (0-based) of the panel to collapse\n */\n public async collapse(index: number): Promise<void> {\n const header = this.headers.at(index);\n const panel = this.panels.at(index);\n\n if (!header || !panel) {\n return;\n }\n\n this.#collapseHeader(header);\n this.#collapsePanel(panel);\n\n this.dispatchEvent(new PfAccordionCollapseEvent(header, panel));\n await this.updateComplete;\n }\n\n /**\n * Accepts a 0-based index value (integer) for the set of accordion items to expand or collapse.\n * @param index index (0-based) of the panel to toggle\n */\n public async toggle(index: number): Promise<void> {\n const { headers } = this;\n const header = headers[index];\n\n if (!header.expanded) {\n await this.expand(index);\n } else {\n await this.collapse(index);\n }\n }\n\n /**\n * Expands all accordion items.\n */\n public async expandAll(): Promise<void> {\n this.headers.forEach(header => this.#expandHeader(header));\n this.panels.forEach(panel => this.#expandPanel(panel));\n await this.updateComplete;\n }\n\n\n /**\n * Collapses all accordion items.\n */\n public async collapseAll(): Promise<void> {\n this.headers.forEach(header => this.#collapseHeader(header));\n this.panels.forEach(panel => this.#collapsePanel(panel));\n await this.updateComplete;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-accordion': PfAccordion;\n }\n}\n"]}
@@ -1,20 +1,34 @@
1
1
  :host {
2
2
  display: inline-block;
3
+ /** Border color for avatar */
3
4
  --pf-c-avatar--BorderColor: transparent;
5
+ /** Border width for avatar */
4
6
  --pf-c-avatar--BorderWidth: 0;
7
+ /** Border radius for avatar */
5
8
  --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);
9
+ /** Width for avatar */
6
10
  --pf-c-avatar--Width: 2.25rem;
11
+ /** Height for avatar */
7
12
  --pf-c-avatar--Height: 2.25rem;
13
+ /** Width for small avatar */
8
14
  --pf-c-avatar--m-sm--Width: 1.5rem;
15
+ /** Height for small avatar */
9
16
  --pf-c-avatar--m-sm--Height: 1.5rem;
17
+ /** Width for medium avatar */
10
18
  --pf-c-avatar--m-md--Width: 2.25rem;
19
+ /** Height for medium avatar */
11
20
  --pf-c-avatar--m-md--Height: 2.25rem;
21
+ /** Width for large avatar */
12
22
  --pf-c-avatar--m-lg--Width: 4.5rem;
23
+ /** Height for large avatar */
13
24
  --pf-c-avatar--m-lg--Height: 4.5rem;
25
+ /** Width for extra large avatar */
14
26
  --pf-c-avatar--m-xl--Width: 8rem;
27
+ /** Height for extra large avatar */
15
28
  --pf-c-avatar--m-xl--Height: 8rem;
16
29
  --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);
17
30
  --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
31
+ /** Border color for dark avatar */
18
32
  --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);
19
33
  --pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
20
34
  width: var(--pf-c-avatar--Width);
@@ -6,21 +6,8 @@ export declare class PfAvatarLoadEvent extends Event {
6
6
  /**
7
7
  * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.
8
8
  * @summary For displaying a user's avatar image
9
+ * @alias Avatar
9
10
  * @fires {PfAvatarLoadEvent} load - when the avatar loads
10
- * @cssprop [--pf-c-avatar--Width=24px]
11
- * @cssprop [--pf-c-avatar--Height=24px]
12
- * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]
13
- * @cssprop [--pf-c-avatar--BorderWidth=0]
14
- * @cssprop [--pf-c-avatar--BorderColor=var(--pf-global--BorderColor--dark-100, #d2d2d2)]
15
- * @cssprop [--pf-c-avatar--m-dark--BorderColor=var(--pf-global--palette--black-700, #4f5255)]
16
- * @cssprop [--pf-c-avatar--m-sm--Width=24px]
17
- * @cssprop [--pf-c-avatar--m-sm--Height=24px]
18
- * @cssprop [--pf-c-avatar--m-md--Width=36px]
19
- * @cssprop [--pf-c-avatar--m-md--Height=36px]
20
- * @cssprop [--pf-c-avatar--m-lg--Width=72px]
21
- * @cssprop [--pf-c-avatar--m-lg--Height=72px]
22
- * @cssprop [--pf-c-avatar--m-xl--Width=28px]
23
- * @cssprop [--pf-c-avatar--m-xl--Height=28px]
24
11
  */
25
12
  export declare class PfAvatar extends LitElement {
26
13
  #private;
@@ -4,7 +4,87 @@ import { LitElement, html } from 'lit';
4
4
  import { property } from 'lit/decorators/property.js';
5
5
  import { customElement } from 'lit/decorators/custom-element.js';
6
6
  import { css } from "lit";
7
- const style = css `:host {\n display: inline-block;\n\t--pf-c-avatar--BorderColor: transparent;\n\t--pf-c-avatar--BorderWidth: 0;\n\t--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);\n\t--pf-c-avatar--Width: 2.25rem;\n\t--pf-c-avatar--Height: 2.25rem;\n\t--pf-c-avatar--m-sm--Width: 1.5rem;\n\t--pf-c-avatar--m-sm--Height: 1.5rem;\n\t--pf-c-avatar--m-md--Width: 2.25rem;\n\t--pf-c-avatar--m-md--Height: 2.25rem;\n\t--pf-c-avatar--m-lg--Width: 4.5rem;\n\t--pf-c-avatar--m-lg--Height: 4.5rem;\n\t--pf-c-avatar--m-xl--Width: 8rem;\n\t--pf-c-avatar--m-xl--Height: 8rem;\n\t--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);\n\t--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);\n\t--pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\twidth: var(--pf-c-avatar--Width);\n\theight: var(--pf-c-avatar--Height);\n\tborder-radius: var(--pf-c-avatar--BorderRadius);\n}\n\n:host([hidden]),\n[hidden] {\n display: none !important;\n}\n\nsvg,\nimg {\n display: inline;\n object-fit: cover;\n width: var(--pf-c-avatar--Width);\n height: var(--pf-c-avatar--Height);\n border-radius: var(--pf-c-avatar--BorderRadius);\n border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);\n}\n\n:host([border]) {\n --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n}\n\n:host([border="dark"]) {\n --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);\n}\n\n:host([size="sm"]) {\n --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);\n --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);\n}\n\n:host([size="md"]) {\n --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);\n --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);\n}\n\n:host([size="lg"]) {\n --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);\n --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);\n}\n\n:host([size="xl"]) {\n --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);\n --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);\n}\n`;
7
+ const style = css `:host {
8
+ display: inline-block;
9
+ \t/** Border color for avatar */
10
+ \t--pf-c-avatar--BorderColor: transparent;
11
+ \t/** Border width for avatar */
12
+ \t--pf-c-avatar--BorderWidth: 0;
13
+ \t/** Border radius for avatar */
14
+ \t--pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg, 30em);
15
+ \t/** Width for avatar */
16
+ \t--pf-c-avatar--Width: 2.25rem;
17
+ \t/** Height for avatar */
18
+ \t--pf-c-avatar--Height: 2.25rem;
19
+ \t/** Width for small avatar */
20
+ \t--pf-c-avatar--m-sm--Width: 1.5rem;
21
+ \t/** Height for small avatar */
22
+ \t--pf-c-avatar--m-sm--Height: 1.5rem;
23
+ \t/** Width for medium avatar */
24
+ \t--pf-c-avatar--m-md--Width: 2.25rem;
25
+ \t/** Height for medium avatar */
26
+ \t--pf-c-avatar--m-md--Height: 2.25rem;
27
+ \t/** Width for large avatar */
28
+ \t--pf-c-avatar--m-lg--Width: 4.5rem;
29
+ \t/** Height for large avatar */
30
+ \t--pf-c-avatar--m-lg--Height: 4.5rem;
31
+ \t/** Width for extra large avatar */
32
+ \t--pf-c-avatar--m-xl--Width: 8rem;
33
+ \t/** Height for extra large avatar */
34
+ \t--pf-c-avatar--m-xl--Height: 8rem;
35
+ \t--pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100, #d2d2d2);
36
+ \t--pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
37
+ \t/** Border color for dark avatar */
38
+ \t--pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700, #4f5255);
39
+ \t--pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
40
+ \twidth: var(--pf-c-avatar--Width);
41
+ \theight: var(--pf-c-avatar--Height);
42
+ \tborder-radius: var(--pf-c-avatar--BorderRadius);
43
+ }
44
+
45
+ :host([hidden]),
46
+ [hidden] {
47
+ display: none !important;
48
+ }
49
+
50
+ svg,
51
+ img {
52
+ display: inline;
53
+ object-fit: cover;
54
+ width: var(--pf-c-avatar--Width);
55
+ height: var(--pf-c-avatar--Height);
56
+ border-radius: var(--pf-c-avatar--BorderRadius);
57
+ border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);
58
+ }
59
+
60
+ :host([border]) {
61
+ --pf-c-avatar--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
62
+ }
63
+
64
+ :host([border="dark"]) {
65
+ --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
66
+ }
67
+
68
+ :host([size="sm"]) {
69
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-sm--Width);
70
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-sm--Height);
71
+ }
72
+
73
+ :host([size="md"]) {
74
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-md--Width);
75
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-md--Height);
76
+ }
77
+
78
+ :host([size="lg"]) {
79
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-lg--Width);
80
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-lg--Height);
81
+ }
82
+
83
+ :host([size="xl"]) {
84
+ --pf-c-avatar--Width: var(--pf-c-avatar--m-xl--Width);
85
+ --pf-c-avatar--Height: var(--pf-c-avatar--m-xl--Height);
86
+ }
87
+ `;
8
88
  export class PfAvatarLoadEvent extends Event {
9
89
  constructor(originalEvent) {
10
90
  super('load', { bubbles: true });
@@ -49,7 +129,7 @@ _PfAvatar_onLoad = function _PfAvatar_onLoad(event) {
49
129
  this.dispatchEvent(new PfAvatarLoadEvent(event));
50
130
  };
51
131
  PfAvatar.styles = [style];
52
- PfAvatar.version = "4.1.0";
132
+ PfAvatar.version = "4.2.0";
53
133
  __decorate([
54
134
  property()
55
135
  ], PfAvatar.prototype, "src", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE,MAAM,OAAO,iBAAkB,SAAQ,KAAK;IAC1C,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QADhB,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AAsBM,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;;QAML,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;QAKpE,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;;IAEzD,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;kBAEhB,IAAI,CAAC,GAAG,IAAI,EAAE;iBACf,IAAI,CAAC,GAAG;oBACL,uBAAA,IAAI,6CAAQ;KAC3B,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;KAOnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;;6CAEO,KAAY;IAClB,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;AACnD,CAAC;AAzCe,eAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAGtC;IAAX,QAAQ,EAAE;qCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAGX;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc;AAhB9C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-avatar.css';\n\nexport class PfAvatarLoadEvent extends Event {\n constructor(public originalEvent: Event) {\n super('load', { bubbles: true });\n }\n}\n\n/**\n * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.\n * @summary For displaying a user's avatar image\n * @fires {PfAvatarLoadEvent} load - when the avatar loads\n * @cssprop [--pf-c-avatar--Width=24px]\n * @cssprop [--pf-c-avatar--Height=24px]\n * @cssprop [--pf-c-avatar--BorderRadius=var(--pf-global--BorderRadius--lg, 128px)]\n * @cssprop [--pf-c-avatar--BorderWidth=0]\n * @cssprop [--pf-c-avatar--BorderColor=var(--pf-global--BorderColor--dark-100, #d2d2d2)]\n * @cssprop [--pf-c-avatar--m-dark--BorderColor=var(--pf-global--palette--black-700, #4f5255)]\n * @cssprop [--pf-c-avatar--m-sm--Width=24px]\n * @cssprop [--pf-c-avatar--m-sm--Height=24px]\n * @cssprop [--pf-c-avatar--m-md--Width=36px]\n * @cssprop [--pf-c-avatar--m-md--Height=36px]\n * @cssprop [--pf-c-avatar--m-lg--Width=72px]\n * @cssprop [--pf-c-avatar--m-lg--Height=72px]\n * @cssprop [--pf-c-avatar--m-xl--Width=28px]\n * @cssprop [--pf-c-avatar--m-xl--Height=28px]\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n /** The URL to the user's custom avatar image. */\n @property() src?: string;\n\n /** The alt text for the avatar image. */\n @property({ reflect: true }) alt?: string = 'Avatar image';\n\n /** Size of the Avatar */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /** Whether to display a border around the avatar */\n @property({ reflect: true }) border?: 'light' | 'dark';\n\n /** Whether or not the Avatar image is dark */\n @property({ type: Boolean, reflect: true }) dark = false;\n\n render(): TemplateResult<1> {\n return this.src != null ? html`\n <img id=\"img\"\n alt=\"${this.alt ?? ''}\"\n src=${this.src}\n @load=\"${this.#onLoad}\">\n ` : this.dark ? html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n style=\"enable-background:new 0 0 36 36\"\n viewBox=\"0 0 36 36\">\n <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n </svg>\n ` : html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n </svg>\n `;\n }\n\n #onLoad(event: Event) {\n this.dispatchEvent(new PfAvatarLoadEvent(event));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-avatar': PfAvatar;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["pf-avatar.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIjE,MAAM,OAAO,iBAAkB,SAAQ,KAAK;IAC1C,YAAmB,aAAoB;QACrC,KAAK,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QADhB,kBAAa,GAAb,aAAa,CAAO;IAEvC,CAAC;CACF;AASM,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;;QAML,yCAAyC;QACZ,QAAG,GAAY,cAAc,CAAC;QAE3D,yBAAyB;QACI,SAAI,GAA8B,IAAI,CAAC;QAKpE,8CAA8C;QACF,SAAI,GAAG,KAAK,CAAC;;IAEzD,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;kBAEhB,IAAI,CAAC,GAAG,IAAI,EAAE;iBACf,IAAI,CAAC,GAAG;oBACL,uBAAA,IAAI,6CAAQ;KAC3B,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;KAOnB,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;OAML,CAAC;IACN,CAAC;;;6CAEO,KAAY;IAClB,IAAI,CAAC,aAAa,CAAC,IAAI,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;AACnD,CAAC;AAzCe,eAAM,GAAoB,CAAC,KAAK,CAAC,AAA3B,CAA4B;;AAGtC;IAAX,QAAQ,EAAE;qCAAc;AAGI;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAA+B;AAG9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAwC;AAGvC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA2B;AAGX;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAc;AAhB9C,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ","sourcesContent":["import { LitElement, html, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport style from './pf-avatar.css';\n\nexport class PfAvatarLoadEvent extends Event {\n constructor(public originalEvent: Event) {\n super('load', { bubbles: true });\n }\n}\n\n/**\n * An **avatar** is a visual used to represent a user. It may contain an image or a placeholder graphic.\n * @summary For displaying a user's avatar image\n * @alias Avatar\n * @fires {PfAvatarLoadEvent} load - when the avatar loads\n */\n@customElement('pf-avatar')\nexport class PfAvatar extends LitElement {\n static readonly styles: CSSStyleSheet[] = [style];\n\n /** The URL to the user's custom avatar image. */\n @property() src?: string;\n\n /** The alt text for the avatar image. */\n @property({ reflect: true }) alt?: string = 'Avatar image';\n\n /** Size of the Avatar */\n @property({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n /** Whether to display a border around the avatar */\n @property({ reflect: true }) border?: 'light' | 'dark';\n\n /** Whether or not the Avatar image is dark */\n @property({ type: Boolean, reflect: true }) dark = false;\n\n render(): TemplateResult<1> {\n return this.src != null ? html`\n <img id=\"img\"\n alt=\"${this.alt ?? ''}\"\n src=${this.src}\n @load=\"${this.#onLoad}\">\n ` : this.dark ? html`\n <svg xmlns=\"http://www.w3.org/2000/svg\"\n style=\"enable-background:new 0 0 36 36\"\n viewBox=\"0 0 36 36\">\n <style>.st1,.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#6a6e73}.st2{fill:#4f5255}</style><path d=\"M0 0h36v36H0z\" style=\"fill:#212427\"/>\n <path d=\"M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" class=\"st1\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2zM22.7 36v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h-3.2z\" class=\"st2\"/>\n </svg>\n ` : html`\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"enable-background:new 0 0 36 36\" viewBox=\"0 0 36 36\">\n <style>.st2{fill:#b8bbbe}</style><path d=\"M0 0h36v36H0z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#f0f0f0\"/>\n <path d=\"M17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z\" style=\"fill-rule:evenodd;clip-rule:evenodd;fill:#d2d2d2\"/><path d=\"M13.3 36v-6.7c-2 .4-2.9 1.4-3.1 3.5l-.1 3.2h3.2z\" class=\"st2\"/>\n <path d=\"m10.1 36 .1-3.2c.2-2.1 1.1-3.1 3.1-3.5V36h9.4v-6.7c2 .4 2.9 1.4 3.1 3.5l.1 3.2h4.7c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6-1.7 1.9-2.6 7.1-3 10.9h4.7z\" style=\"fill:#d2d2d2\"/><path d=\"m25.9 36-.1-3.2c-.2-2.1-1.1-3.1-3.1-3.5V36h3.2z\" class=\"st2\"/>\n </svg>\n `;\n }\n\n #onLoad(event: Event) {\n this.dispatchEvent(new PfAvatarLoadEvent(event));\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-avatar': PfAvatar;\n }\n}\n"]}
@@ -1,18 +1,27 @@
1
1
  :host {
2
2
  display: inline-block;
3
3
  position: absolute;
4
+ /** Right position for back to top */
4
5
  right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));
6
+ /** Bottom position for back to top */
5
7
  bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));
6
8
  }
7
9
 
8
10
  [part="trigger"] {
11
+ /** Box shadow for back to top button */
9
12
  box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)));
10
13
 
14
+ /** Font size for back to top button */
11
15
  --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
16
+ /** Border radius for back to top button */
12
17
  --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius, var(--pf-global--BorderRadius--lg, 30em));
18
+ /** Top padding for back to top button */
13
19
  --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
20
+ /** Right padding for back to top button */
14
21
  --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
22
+ /** Bottom padding for back to top button */
15
23
  --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
24
+ /** Left padding for back to top button */
16
25
  --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
17
26
  }
18
27
 
@@ -20,12 +29,15 @@ a {
20
29
  display: inline-flex;
21
30
  align-items: center;
22
31
  justify-content: center;
32
+ /** Primary color for back to top button */
23
33
  color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));
34
+ /** Primary background color for back to top button */
24
35
  background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));
25
36
  text-decoration: none;
26
37
  font-size: var(--pf-c-button--FontSize);
27
38
  padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
28
39
  border-radius: var(--pf-c-button--BorderRadius);
40
+ /** End icon margin left for back to top button */
29
41
  gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
30
42
  }
31
43
 
@@ -4,23 +4,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
4
4
  /**
5
5
  * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
6
6
  * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.
7
- * @csspart trigger - The `<a>` or `<pf-button>` element
8
- * @slot icon
9
- * Contains the prefix icon to display before the link or button.
10
- * @slot
11
- * Text to display inside the link or button.
12
- * @cssprop {<length>} [--pf-c-back-to-top--Right=3rem`]
13
- * @cssprop {<length>} [--pf-c-back-to-top--Bottom=1.5rem`]
14
- * @cssprop [--pf-c-back-to-top--c-button--BoxShadow=0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)]
15
- * @cssprop {<length>} [--pf-c-button--FontSize=0.75rem]
16
- * @cssprop {<length>|<percentage>} [--pf-c-button--BorderRadius=30em]
17
- * @cssprop {<length>} [--pf-c-button--PaddingTop=0.25rem]
18
- * @cssprop {<length>} [--pf-c-button--PaddingRight=0.5rem]
19
- * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.25rem]
20
- * @cssprop {<length>} [--pf-c-button--PaddingLeft=0.5rem]
21
- * @cssprop {<color>} [--pf-c-button--m-primary--Color=#fff]
22
- * @cssprop {<color>} [--pf-c-button--m-primary--BackgroundColor=#06c]
23
- * @cssprop {<length>} [--pf-c-button__icon--m-end--MarginLeft=0.25rem]
7
+ * @alias Back to Top
24
8
  */
25
9
  export declare class PfBackToTop extends LitElement {
26
10
  #private;
@@ -8,7 +8,82 @@ import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
8
8
  import '@patternfly/elements/pf-button/pf-button.js';
9
9
  import '@patternfly/elements/pf-icon/pf-icon.js';
10
10
  import { css } from "lit";
11
- const styles = css `:host {\n display: inline-block;\n position: absolute;\n right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));\n bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));\n}\n\n[part="trigger"] {\n box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)));\n\n --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));\n --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius, var(--pf-global--BorderRadius--lg, 30em));\n --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));\n --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));\n --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));\n --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));\n}\n\na {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));\n background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));\n text-decoration: none;\n font-size: var(--pf-c-button--FontSize);\n padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);\n border-radius: var(--pf-c-button--BorderRadius);\n gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));\n}\n\na:hover {\n --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));\n --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));\n}\n\na:focus {\n --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));\n --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));\n}\n\n[part="trigger"][hidden] {\n display: none;\n}\n\npf-icon {\n /* override icon size as default sm variant is incorrect */\n --pf-icon--size: var(--pf-c-button--FontSize);\n vertical-align: -0.125rem;\n}\n\nspan {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));\n}\n\n@media (min-width: 768px) {\n :host {\n --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem));\n }\n}\n`;
11
+ const styles = css `:host {
12
+ display: inline-block;
13
+ position: absolute;
14
+ /** Right position for back to top */
15
+ right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem));
16
+ /** Bottom position for back to top */
17
+ bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem));
18
+ }
19
+
20
+ [part="trigger"] {
21
+ /** Box shadow for back to top button */
22
+ box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)));
23
+
24
+ /** Font size for back to top button */
25
+ --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs, 0.75rem));
26
+ /** Border radius for back to top button */
27
+ --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius, var(--pf-global--BorderRadius--lg, 30em));
28
+ /** Top padding for back to top button */
29
+ --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem));
30
+ /** Right padding for back to top button */
31
+ --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem));
32
+ /** Bottom padding for back to top button */
33
+ --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem));
34
+ /** Left padding for back to top button */
35
+ --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem));
36
+ }
37
+
38
+ a {
39
+ display: inline-flex;
40
+ align-items: center;
41
+ justify-content: center;
42
+ /** Primary color for back to top button */
43
+ color: var(--pf-c-button--m-primary--Color, var(--pf-global--Color--light-100, #fff));
44
+ /** Primary background color for back to top button */
45
+ background-color: var(--pf-c-button--m-primary--BackgroundColor, var(--pf-global--primary-color--100, #06c));
46
+ text-decoration: none;
47
+ font-size: var(--pf-c-button--FontSize);
48
+ padding: var(--pf-c-button--PaddingTop) var(--pf-c-button--PaddingRight) var(--pf-c-button--PaddingBottom) var(--pf-c-button--PaddingLeft);
49
+ border-radius: var(--pf-c-button--BorderRadius);
50
+ /** End icon margin left for back to top button */
51
+ gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
52
+ }
53
+
54
+ a:hover {
55
+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100, #fff));
56
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
57
+ }
58
+
59
+ a:focus {
60
+ --pf-c-button--m-primary--Color: var(--pf-c-button--m-primary--hover--Color, var(--pf-global--Color--light-100,#fff));
61
+ --pf-c-button--m-primary--BackgroundColor: var(--pf-c-button--m-primary--hover--BackgroundColor, var(--pf-global--primary-color--200, #004080));
62
+ }
63
+
64
+ [part="trigger"][hidden] {
65
+ display: none;
66
+ }
67
+
68
+ pf-icon {
69
+ /* override icon size as default sm variant is incorrect */
70
+ --pf-icon--size: var(--pf-c-button--FontSize);
71
+ vertical-align: -0.125rem;
72
+ }
73
+
74
+ span {
75
+ display: inline-flex;
76
+ align-items: center;
77
+ justify-content: center;
78
+ gap: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem));
79
+ }
80
+
81
+ @media (min-width: 768px) {
82
+ :host {
83
+ --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom, var(--pf-global--spacer--2xl, 3rem));
84
+ }
85
+ }
86
+ `;
12
87
  let PfBackToTop = class PfBackToTop extends LitElement {
13
88
  constructor() {
14
89
  super(...arguments);
@@ -64,8 +139,14 @@ let PfBackToTop = class PfBackToTop extends LitElement {
64
139
  }
65
140
  if (this.href) {
66
141
  return html `
67
- <a href="${this.href}" ?hidden="${!__classPrivateFieldGet(this, _PfBackToTop_visible, "f")}" part="trigger" aria-label="${ifDefined(__classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_ariaLabel_get))}">
142
+ <!-- The \`<a>\` or \`<pf-button>\` element -->
143
+ <a href="${this.href}"
144
+ ?hidden="${!__classPrivateFieldGet(this, _PfBackToTop_visible, "f")}"
145
+ part="trigger"
146
+ aria-label="${ifDefined(__classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_ariaLabel_get))}">
147
+ <!-- Contains the prefix icon to display before the link or button. -->
68
148
  <slot name="icon"></slot>
149
+ <!-- Text to display inside the link or button. -->
69
150
  <slot @slotchange="${__classPrivateFieldGet(this, _PfBackToTop_instances, "m", _PfBackToTop_onSlotchange)}"></slot>
70
151
  <pf-icon icon="angle-up" set="fas"></pf-icon>
71
152
  </a>
@@ -73,6 +154,7 @@ let PfBackToTop = class PfBackToTop extends LitElement {
73
154
  }
74
155
  else {
75
156
  return html `
157
+ <!-- The \`<a>\` or \`<pf-button>\` element -->
76
158
  <pf-button
77
159
  icon="${ifDefined(this.icon)}"
78
160
  icon-set="${ifDefined(this.iconSet)}"
@@ -81,8 +163,10 @@ let PfBackToTop = class PfBackToTop extends LitElement {
81
163
  part="trigger"
82
164
  label="${ifDefined(__classPrivateFieldGet(this, _PfBackToTop_instances, "a", _PfBackToTop_ariaLabel_get))}"
83
165
  >
166
+ <!-- Contains the prefix icon to display before the link or button. -->
84
167
  <slot name="icon" slot="icon"></slot>
85
168
  <span>
169
+ <!-- Text to display inside the link or button. -->
86
170
  <slot></slot>
87
171
  <pf-icon icon="angle-up" set="fas"></pf-icon>
88
172
  </span>
@@ -150,7 +234,7 @@ _PfBackToTop_addScrollListener = function _PfBackToTop_addScrollListener() {
150
234
  __classPrivateFieldGet(this, _PfBackToTop_toggleVisibility, "f").call(this);
151
235
  };
152
236
  PfBackToTop.styles = [styles];
153
- PfBackToTop.version = "4.1.0";
237
+ PfBackToTop.version = "4.2.0";
154
238
  __decorate([
155
239
  property({ reflect: true })
156
240
  ], PfBackToTop.prototype, "icon", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"pf-back-to-top.js","sourceRoot":"","sources":["pf-back-to-top.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-back-to-top.css';\n\n/**\n * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.\n * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.\n * @csspart trigger - The `<a>` or `<pf-button>` element\n * @slot icon\n * Contains the prefix icon to display before the link or button.\n * @slot\n * Text to display inside the link or button.\n * @cssprop {<length>} [--pf-c-back-to-top--Right=3rem`]\n * @cssprop {<length>} [--pf-c-back-to-top--Bottom=1.5rem`]\n * @cssprop [--pf-c-back-to-top--c-button--BoxShadow=0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18)]\n * @cssprop {<length>} [--pf-c-button--FontSize=0.75rem]\n * @cssprop {<length>|<percentage>} [--pf-c-button--BorderRadius=30em]\n * @cssprop {<length>} [--pf-c-button--PaddingTop=0.25rem]\n * @cssprop {<length>} [--pf-c-button--PaddingRight=0.5rem]\n * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.25rem]\n * @cssprop {<length>} [--pf-c-button--PaddingLeft=0.5rem]\n * @cssprop {<color>} [--pf-c-button--m-primary--Color=#fff]\n * @cssprop {<color>} [--pf-c-button--m-primary--BackgroundColor=#06c]\n * @cssprop {<length>} [--pf-c-button__icon--m-end--MarginLeft=0.25rem]\n */\n@customElement('pf-back-to-top')\nexport class PfBackToTop extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n /** Shorthand for the `icon` slot, the value is icon name */\n @property({ reflect: true }) icon?: string;\n\n /** Icon set for the `icon` property */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n /** Flag to always show back to top button, defaults to false. */\n @property({ reflect: true, type: Boolean, attribute: 'always-visible' }) alwaysVisible = false;\n\n /** Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events */\n @property({ reflect: true, attribute: 'scrollable-selector' }) scrollableSelector?: string;\n\n /** Distance from the top of the scrollable element to trigger the visibility of the back to top button */\n @property({ type: Number, attribute: 'scroll-distance' }) scrollDistance = 400;\n\n /** Accessible name for the back-to-top link, use when component does not have slotted text */\n @property() label?: string;\n\n /** Page fragment link to target element, must include hash ex: #top */\n @property({ reflect: true }) href?: string;\n\n #scrollSpy = false;\n\n #visible = false;\n\n #scrollElement?: Element | Window;\n\n #hasSlottedText = false;\n\n #logger = new Logger(this);\n\n get #rootNode(): Document | ShadowRoot | null {\n let root = null;\n if (isServer) {\n return null;\n } else if ((root = this.getRootNode()) instanceof Document || root instanceof ShadowRoot) {\n return root;\n } else {\n return document;\n }\n }\n\n get #ariaLabel(): string | undefined {\n if (this.#hasSlottedText) {\n return undefined;\n }\n return this.label ?? 'Back to top';\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.#addScrollListener();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#removeScrollListener();\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (changed.has('scrollableSelector')) {\n this.#addScrollListener();\n }\n if (changed.has('alwaysVisible')) {\n this.#toggleVisibility();\n }\n }\n\n render(): TemplateResult<1> {\n // ensure href has a hash\n if (this.href && this.href.charAt(0) !== '#') {\n this.href = `#${this.href}`;\n this.#logger.warn(`missing hash in href fragment link`);\n }\n\n if (this.href) {\n return html`\n <a href=\"${this.href}\" ?hidden=\"${!this.#visible}\" part=\"trigger\" aria-label=\"${ifDefined(this.#ariaLabel)}\">\n <slot name=\"icon\"></slot>\n <slot @slotchange=\"${this.#onSlotchange}\"></slot>\n <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n </a>\n `;\n } else {\n return html`\n <pf-button\n icon=\"${ifDefined(this.icon)}\"\n icon-set=\"${ifDefined(this.iconSet)}\"\n ?hidden=\"${!this.#visible}\"\n tabindex=\"${this.#visible ? '0' : '-1'}\"\n part=\"trigger\"\n label=\"${ifDefined(this.#ariaLabel)}\"\n >\n <slot name=\"icon\" slot=\"icon\"></slot>\n <span>\n <slot></slot>\n <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n </span>\n </pf-button>\n `;\n }\n }\n\n #onSlotchange(event: Event) {\n const slot = event.currentTarget as HTMLSlotElement;\n const nodes = slot.assignedNodes();\n this.#hasSlottedText = nodes.length > 0 ? true : false;\n this.requestUpdate();\n }\n\n #removeScrollListener() {\n this.#scrollElement?.removeEventListener('scroll', this.#toggleVisibility);\n }\n\n #addScrollListener() {\n this.#removeScrollListener();\n\n if (this.scrollableSelector?.trim() === '') {\n this.#logger.error(`scrollable-selector attribute cannot be empty`);\n return;\n }\n\n this.#scrollSpy = !!this.scrollableSelector;\n if (isServer) {\n return;\n } else if (this.#scrollSpy && this.scrollableSelector) {\n const scrollableElement = this.#rootNode?.querySelector?.(this.scrollableSelector);\n if (!scrollableElement) {\n this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`);\n return;\n }\n this.#scrollElement = scrollableElement;\n } else {\n this.#scrollElement = window;\n }\n\n this.#scrollElement.addEventListener('scroll', this.#toggleVisibility, { passive: true });\n this.#toggleVisibility();\n }\n\n #toggleVisibility = () => {\n if (this.alwaysVisible) {\n this.#visible = true;\n this.requestUpdate();\n return;\n }\n const previousVisibility = this.#visible;\n if (this.#scrollElement) {\n const scrolled =\n (this.#scrollElement instanceof Window) ?\n this.#scrollElement.scrollY\n : this.#scrollElement.scrollTop;\n this.#visible = (scrolled > this.scrollDistance);\n if (previousVisibility !== this.#visible) {\n this.requestUpdate();\n }\n }\n };\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-back-to-top': PfBackToTop;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-back-to-top.js","sourceRoot":"","sources":["pf-back-to-top.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type PropertyValues, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nimport styles from './pf-back-to-top.css';\n\n/**\n * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.\n * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page.\n * @alias Back to Top\n */\n@customElement('pf-back-to-top')\nexport class PfBackToTop extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n /** Shorthand for the `icon` slot, the value is icon name */\n @property({ reflect: true }) icon?: string;\n\n /** Icon set for the `icon` property */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n /** Flag to always show back to top button, defaults to false. */\n @property({ reflect: true, type: Boolean, attribute: 'always-visible' }) alwaysVisible = false;\n\n /** Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events */\n @property({ reflect: true, attribute: 'scrollable-selector' }) scrollableSelector?: string;\n\n /** Distance from the top of the scrollable element to trigger the visibility of the back to top button */\n @property({ type: Number, attribute: 'scroll-distance' }) scrollDistance = 400;\n\n /** Accessible name for the back-to-top link, use when component does not have slotted text */\n @property() label?: string;\n\n /** Page fragment link to target element, must include hash ex: #top */\n @property({ reflect: true }) href?: string;\n\n #scrollSpy = false;\n\n #visible = false;\n\n #scrollElement?: Element | Window;\n\n #hasSlottedText = false;\n\n #logger = new Logger(this);\n\n get #rootNode(): Document | ShadowRoot | null {\n let root = null;\n if (isServer) {\n return null;\n } else if ((root = this.getRootNode()) instanceof Document || root instanceof ShadowRoot) {\n return root;\n } else {\n return document;\n }\n }\n\n get #ariaLabel(): string | undefined {\n if (this.#hasSlottedText) {\n return undefined;\n }\n return this.label ?? 'Back to top';\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.#addScrollListener();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.#removeScrollListener();\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (changed.has('scrollableSelector')) {\n this.#addScrollListener();\n }\n if (changed.has('alwaysVisible')) {\n this.#toggleVisibility();\n }\n }\n\n render(): TemplateResult<1> {\n // ensure href has a hash\n if (this.href && this.href.charAt(0) !== '#') {\n this.href = `#${this.href}`;\n this.#logger.warn(`missing hash in href fragment link`);\n }\n\n if (this.href) {\n return html`\n <!-- The \\`<a>\\` or \\`<pf-button>\\` element -->\n <a href=\"${this.href}\"\n ?hidden=\"${!this.#visible}\"\n part=\"trigger\"\n aria-label=\"${ifDefined(this.#ariaLabel)}\">\n <!-- Contains the prefix icon to display before the link or button. -->\n <slot name=\"icon\"></slot>\n <!-- Text to display inside the link or button. -->\n <slot @slotchange=\"${this.#onSlotchange}\"></slot>\n <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n </a>\n `;\n } else {\n return html`\n <!-- The \\`<a>\\` or \\`<pf-button>\\` element -->\n <pf-button\n icon=\"${ifDefined(this.icon)}\"\n icon-set=\"${ifDefined(this.iconSet)}\"\n ?hidden=\"${!this.#visible}\"\n tabindex=\"${this.#visible ? '0' : '-1'}\"\n part=\"trigger\"\n label=\"${ifDefined(this.#ariaLabel)}\"\n >\n <!-- Contains the prefix icon to display before the link or button. -->\n <slot name=\"icon\" slot=\"icon\"></slot>\n <span>\n <!-- Text to display inside the link or button. -->\n <slot></slot>\n <pf-icon icon=\"angle-up\" set=\"fas\"></pf-icon>\n </span>\n </pf-button>\n `;\n }\n }\n\n #onSlotchange(event: Event) {\n const slot = event.currentTarget as HTMLSlotElement;\n const nodes = slot.assignedNodes();\n this.#hasSlottedText = nodes.length > 0 ? true : false;\n this.requestUpdate();\n }\n\n #removeScrollListener() {\n this.#scrollElement?.removeEventListener('scroll', this.#toggleVisibility);\n }\n\n #addScrollListener() {\n this.#removeScrollListener();\n\n if (this.scrollableSelector?.trim() === '') {\n this.#logger.error(`scrollable-selector attribute cannot be empty`);\n return;\n }\n\n this.#scrollSpy = !!this.scrollableSelector;\n if (isServer) {\n return;\n } else if (this.#scrollSpy && this.scrollableSelector) {\n const scrollableElement = this.#rootNode?.querySelector?.(this.scrollableSelector);\n if (!scrollableElement) {\n this.#logger.error(`unable to find element with selector ${this.scrollableSelector}`);\n return;\n }\n this.#scrollElement = scrollableElement;\n } else {\n this.#scrollElement = window;\n }\n\n this.#scrollElement.addEventListener('scroll', this.#toggleVisibility, { passive: true });\n this.#toggleVisibility();\n }\n\n #toggleVisibility = () => {\n if (this.alwaysVisible) {\n this.#visible = true;\n this.requestUpdate();\n return;\n }\n const previousVisibility = this.#visible;\n if (this.#scrollElement) {\n const scrolled =\n (this.#scrollElement instanceof Window) ?\n this.#scrollElement.scrollY\n : this.#scrollElement.scrollTop;\n this.#visible = (scrolled > this.scrollDistance);\n if (previousVisibility !== this.#visible) {\n this.requestUpdate();\n }\n }\n };\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-back-to-top': PfBackToTop;\n }\n}\n"]}
@@ -1,6 +1,7 @@
1
1
  :host {
2
2
  display: flex;
3
3
 
4
+ /** Background image for the element */
4
5
  --_background-image: var(--pf-c-background-image--BackgroundImage);
5
6
  }
6
7
 
@@ -23,8 +24,10 @@
23
24
  width: 100%;
24
25
  height: 100%;
25
26
  content: "";
27
+ /** Background color for the background image */
26
28
  background-color: var(--pf-c-background-image--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));
27
29
  background-image: var(--_background-image);
30
+ /** SVG filter applied to the background image */
28
31
  filter: var(--pf-c-background-image--Filter, url("#image_overlay"));
29
32
  background-repeat: no-repeat;
30
33
  background-size: cover;
@@ -43,24 +46,28 @@ slot[part="content"] {
43
46
 
44
47
  @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
45
48
  #container::after {
49
+ /** Background image for 2x DPI screens */
46
50
  background-image: var(--pf-c-background-image--BackgroundImage-2x, var(--_background-image-2x, var(--_background-image)));
47
51
  }
48
52
  }
49
53
 
50
54
  @media screen and (min-width: 576px) {
51
55
  #container::after {
56
+ /** Background image for small screens */
52
57
  background-image: var(--pf-c-background-image--BackgroundImage--sm, var(--_background-image-sm, var(--_background-image)));
53
58
  }
54
59
  }
55
60
 
56
61
  @media screen and (min-width: 576px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 576px) and (min-resolution: 192dpi) {
57
62
  #container::after {
63
+ /** Background image for small screens with 2x DPI */
58
64
  background-image: var(--pf-c-background-image--BackgroundImage--sm-2x, var(--_background-image-sm-2x, var(--_background-image)));
59
65
  }
60
66
  }
61
67
 
62
68
  @media screen and (min-width: 992px) {
63
69
  #container::after {
70
+ /** Background image for large screens */
64
71
  background-image: var(--pf-c-background-image--BackgroundImage--lg, var(--_background-image-lg, var(--_background-image)));
65
72
  }
66
73
  }
@@ -2,14 +2,7 @@ import { LitElement, type TemplateResult } from 'lit';
2
2
  /**
3
3
  * A **background image** allows you to place an image in the background of your page or area of a page.
4
4
  * @summary Allows users to place an image in the background of your page or area of a page.
5
- * @slot filter - Overrides the default svg filter for the background image.
6
- * @cssprop {<color>} [--pf-c-background-image--BackgroundColor=#151515]
7
- * @cssprop [--pf-c-background-image--Filter=url("#image_overlay")]
8
- * @cssprop --pf-c-background-image--BackgroundImage
9
- * @cssprop --pf-c-background-image--BackgroundImage-2x
10
- * @cssprop --pf-c-background-image--BackgroundImage--sm
11
- * @cssprop --pf-c-background-image--BackgroundImage--sm-2x
12
- * @cssprop --pf-c-background-image--BackgroundImage--lg
5
+ * @alias Background Image
13
6
  */
14
7
  export declare class PfBackgroundImage extends LitElement {
15
8
  #private;