@patternfly/elements 2.0.5 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (440) hide show
  1. package/custom-elements.json +436 -21
  2. package/package.json +5 -4
  3. package/pf-accordion/BaseAccordion.js +2 -1
  4. package/pf-accordion/BaseAccordion.js.map +1 -1
  5. package/pf-accordion/BaseAccordionHeader.js +2 -1
  6. package/pf-accordion/BaseAccordionHeader.js.map +1 -1
  7. package/pf-accordion/BaseAccordionPanel.js +2 -1
  8. package/pf-accordion/BaseAccordionPanel.js.map +1 -1
  9. package/pf-accordion/pf-accordion-header.js.map +1 -1
  10. package/pf-accordion/pf-accordion-panel.js.map +1 -1
  11. package/pf-accordion/pf-accordion.d.ts +1 -1
  12. package/pf-accordion/pf-accordion.js +1 -1
  13. package/pf-accordion/pf-accordion.js.map +1 -1
  14. package/pf-avatar/BaseAvatar.js +2 -1
  15. package/pf-avatar/BaseAvatar.js.map +1 -1
  16. package/pf-avatar/pf-avatar.d.ts +1 -1
  17. package/pf-avatar/pf-avatar.js +1 -1
  18. package/pf-avatar/pf-avatar.js.map +1 -1
  19. package/pf-badge/BaseBadge.js +2 -1
  20. package/pf-badge/BaseBadge.js.map +1 -1
  21. package/pf-badge/pf-badge.d.ts +1 -1
  22. package/pf-badge/pf-badge.js +1 -1
  23. package/pf-badge/pf-badge.js.map +1 -1
  24. package/pf-button/BaseButton.d.ts +1 -1
  25. package/pf-button/BaseButton.js +6 -4
  26. package/pf-button/BaseButton.js.map +1 -1
  27. package/pf-button/pf-button.d.ts +1 -1
  28. package/pf-button/pf-button.js +1 -1
  29. package/pf-button/pf-button.js.map +1 -1
  30. package/pf-card/BaseCard.js +2 -1
  31. package/pf-card/BaseCard.js.map +1 -1
  32. package/pf-card/pf-card.d.ts +1 -1
  33. package/pf-card/pf-card.js +1 -1
  34. package/pf-card/pf-card.js.map +1 -1
  35. package/pf-clipboard-copy/BaseClipboardCopy.js +2 -1
  36. package/pf-clipboard-copy/BaseClipboardCopy.js.map +1 -1
  37. package/pf-clipboard-copy/pf-clipboard-copy.d.ts +1 -1
  38. package/pf-clipboard-copy/pf-clipboard-copy.js +11 -5
  39. package/pf-clipboard-copy/pf-clipboard-copy.js.map +1 -1
  40. package/pf-code-block/BaseCodeBlock.js +2 -1
  41. package/pf-code-block/BaseCodeBlock.js.map +1 -1
  42. package/pf-code-block/pf-code-block.d.ts +1 -1
  43. package/pf-code-block/pf-code-block.js +5 -3
  44. package/pf-code-block/pf-code-block.js.map +1 -1
  45. package/pf-icon/BaseIcon.js +2 -1
  46. package/pf-icon/BaseIcon.js.map +1 -1
  47. package/pf-icon/icons/fab/teamspeak.js +1 -1
  48. package/pf-icon/icons/fab/ussunnah.js +1 -1
  49. package/pf-icon/icons/far/bell-slash.js +1 -1
  50. package/pf-icon/icons/far/calendar-minus.js +1 -1
  51. package/pf-icon/icons/far/calendar-plus.js +1 -1
  52. package/pf-icon/icons/far/calendar-xmark.js +1 -1
  53. package/pf-icon/icons/far/chess-knight.js +1 -1
  54. package/pf-icon/icons/far/chess-rook.js +1 -1
  55. package/pf-icon/icons/far/circle-check.js +1 -1
  56. package/pf-icon/icons/far/circle-dot.js +1 -1
  57. package/pf-icon/icons/far/circle-xmark.js +1 -1
  58. package/pf-icon/icons/far/circle.js +1 -1
  59. package/pf-icon/icons/far/clone.js +1 -1
  60. package/pf-icon/icons/far/copy.js +1 -1
  61. package/pf-icon/icons/far/file-pdf.js +1 -1
  62. package/pf-icon/icons/far/file-zipper.js +1 -1
  63. package/pf-icon/icons/far/folder-closed.js +1 -1
  64. package/pf-icon/icons/far/font-awesome.js +1 -1
  65. package/pf-icon/icons/far/futbol.js +1 -1
  66. package/pf-icon/icons/far/gem.js +1 -1
  67. package/pf-icon/icons/far/hand-back-fist.js +1 -1
  68. package/pf-icon/icons/far/hand-peace.js +1 -1
  69. package/pf-icon/icons/far/hand-pointer.js +1 -1
  70. package/pf-icon/icons/far/hand-scissors.js +1 -1
  71. package/pf-icon/icons/far/hand-spock.js +1 -1
  72. package/pf-icon/icons/far/heart.js +1 -1
  73. package/pf-icon/icons/far/lightbulb.js +1 -1
  74. package/pf-icon/icons/far/map.js +1 -1
  75. package/pf-icon/icons/far/newspaper.js +1 -1
  76. package/pf-icon/icons/far/object-group.js +1 -1
  77. package/pf-icon/icons/far/paste.js +1 -1
  78. package/pf-icon/icons/far/rectangle-xmark.js +1 -1
  79. package/pf-icon/icons/far/snowflake.js +1 -1
  80. package/pf-icon/icons/far/square-check.js +1 -1
  81. package/pf-icon/icons/far/square-full.js +1 -1
  82. package/pf-icon/icons/far/square-minus.js +1 -1
  83. package/pf-icon/icons/far/square-plus.js +1 -1
  84. package/pf-icon/icons/far/square.js +1 -1
  85. package/pf-icon/icons/far/star-half-stroke.js +1 -1
  86. package/pf-icon/icons/far/star-half.js +1 -1
  87. package/pf-icon/icons/far/star.js +1 -1
  88. package/pf-icon/icons/far/thumbs-up.js +1 -1
  89. package/pf-icon/icons/fas/1.js +1 -1
  90. package/pf-icon/icons/fas/angle-down.js +1 -1
  91. package/pf-icon/icons/fas/angle-left.js +1 -1
  92. package/pf-icon/icons/fas/angle-right.js +1 -1
  93. package/pf-icon/icons/fas/angle-up.js +1 -1
  94. package/pf-icon/icons/fas/angles-down.js +1 -1
  95. package/pf-icon/icons/fas/angles-left.js +1 -1
  96. package/pf-icon/icons/fas/angles-right.js +1 -1
  97. package/pf-icon/icons/fas/angles-up.js +1 -1
  98. package/pf-icon/icons/fas/arrow-down-1-9.js +1 -1
  99. package/pf-icon/icons/fas/arrow-down-9-1.js +1 -1
  100. package/pf-icon/icons/fas/arrow-down-a-z.js +1 -1
  101. package/pf-icon/icons/fas/arrow-down-long.js +1 -1
  102. package/pf-icon/icons/fas/arrow-down-z-a.js +1 -1
  103. package/pf-icon/icons/fas/arrow-rotate-left.js +1 -1
  104. package/pf-icon/icons/fas/arrow-rotate-right.js +1 -1
  105. package/pf-icon/icons/fas/arrow-up-1-9.js +1 -1
  106. package/pf-icon/icons/fas/arrow-up-9-1.js +1 -1
  107. package/pf-icon/icons/fas/arrow-up-a-z.js +1 -1
  108. package/pf-icon/icons/fas/arrow-up-from-ground-water.js +1 -1
  109. package/pf-icon/icons/fas/arrow-up-from-water-pump.js +1 -1
  110. package/pf-icon/icons/fas/arrow-up-long.js +1 -1
  111. package/pf-icon/icons/fas/arrow-up-z-a.js +1 -1
  112. package/pf-icon/icons/fas/arrows-down-to-people.js +1 -1
  113. package/pf-icon/icons/fas/arrows-rotate.js +1 -1
  114. package/pf-icon/icons/fas/arrows-spin.js +1 -1
  115. package/pf-icon/icons/fas/arrows-to-eye.js +1 -1
  116. package/pf-icon/icons/fas/arrows-up-down.js +1 -1
  117. package/pf-icon/icons/fas/atom.js +1 -1
  118. package/pf-icon/icons/fas/baby.js +1 -1
  119. package/pf-icon/icons/fas/bacteria.js +1 -1
  120. package/pf-icon/icons/fas/bahai.js +1 -1
  121. package/pf-icon/icons/fas/basketball.js +1 -1
  122. package/pf-icon/icons/fas/bath.js +1 -1
  123. package/pf-icon/icons/fas/biohazard.js +1 -1
  124. package/pf-icon/icons/fas/bolt.js +1 -1
  125. package/pf-icon/icons/fas/book-journal-whills.js +1 -1
  126. package/pf-icon/icons/fas/border-none.js +1 -1
  127. package/pf-icon/icons/fas/bottle-droplet.js +1 -1
  128. package/pf-icon/icons/fas/bottle-water.js +1 -1
  129. package/pf-icon/icons/fas/bowling-ball.js +1 -1
  130. package/pf-icon/icons/fas/box-open.js +1 -1
  131. package/pf-icon/icons/fas/braille.js +1 -1
  132. package/pf-icon/icons/fas/brush.js +1 -1
  133. package/pf-icon/icons/fas/building-columns.js +1 -1
  134. package/pf-icon/icons/fas/burger.js +1 -1
  135. package/pf-icon/icons/fas/bus.js +1 -1
  136. package/pf-icon/icons/fas/calendar-minus.js +1 -1
  137. package/pf-icon/icons/fas/calendar-plus.js +1 -1
  138. package/pf-icon/icons/fas/calendar-xmark.js +1 -1
  139. package/pf-icon/icons/fas/camera-rotate.js +1 -1
  140. package/pf-icon/icons/fas/cannabis.js +1 -1
  141. package/pf-icon/icons/fas/car-burst.js +1 -1
  142. package/pf-icon/icons/fas/car-on.js +1 -1
  143. package/pf-icon/icons/fas/car-tunnel.js +1 -1
  144. package/pf-icon/icons/fas/cat.js +1 -1
  145. package/pf-icon/icons/fas/cedi-sign.js +1 -1
  146. package/pf-icon/icons/fas/cent-sign.js +1 -1
  147. package/pf-icon/icons/fas/chart-pie.js +1 -1
  148. package/pf-icon/icons/fas/check-double.js +1 -1
  149. package/pf-icon/icons/fas/check.js +1 -1
  150. package/pf-icon/icons/fas/chess-knight.js +1 -1
  151. package/pf-icon/icons/fas/chess-pawn.js +1 -1
  152. package/pf-icon/icons/fas/chess-queen.js +1 -1
  153. package/pf-icon/icons/fas/chess-rook.js +1 -1
  154. package/pf-icon/icons/fas/chevron-down.js +1 -1
  155. package/pf-icon/icons/fas/chevron-up.js +1 -1
  156. package/pf-icon/icons/fas/child-combatant.js +1 -1
  157. package/pf-icon/icons/fas/child-reaching.js +1 -1
  158. package/pf-icon/icons/fas/circle-check.js +1 -1
  159. package/pf-icon/icons/fas/circle-dollar-to-slot.js +1 -1
  160. package/pf-icon/icons/fas/circle-dot.js +1 -1
  161. package/pf-icon/icons/fas/circle-half-stroke.js +1 -1
  162. package/pf-icon/icons/fas/circle-minus.js +1 -1
  163. package/pf-icon/icons/fas/circle-plus.js +1 -1
  164. package/pf-icon/icons/fas/circle-xmark.js +1 -1
  165. package/pf-icon/icons/fas/circle.js +1 -1
  166. package/pf-icon/icons/fas/clone.js +1 -1
  167. package/pf-icon/icons/fas/cloud-moon-rain.js +1 -1
  168. package/pf-icon/icons/fas/code-branch.js +1 -1
  169. package/pf-icon/icons/fas/code-commit.js +1 -1
  170. package/pf-icon/icons/fas/code-compare.js +1 -1
  171. package/pf-icon/icons/fas/code-fork.js +1 -1
  172. package/pf-icon/icons/fas/code-merge.js +1 -1
  173. package/pf-icon/icons/fas/code-pull-request.js +1 -1
  174. package/pf-icon/icons/fas/colon-sign.js +1 -1
  175. package/pf-icon/icons/fas/cookie-bite.js +1 -1
  176. package/pf-icon/icons/fas/cookie.js +1 -1
  177. package/pf-icon/icons/fas/copy.js +1 -1
  178. package/pf-icon/icons/fas/cruzeiro-sign.js +1 -1
  179. package/pf-icon/icons/fas/cubes.js +1 -1
  180. package/pf-icon/icons/fas/dharmachakra.js +1 -1
  181. package/pf-icon/icons/fas/dice-d20.js +1 -1
  182. package/pf-icon/icons/fas/dice-d6.js +1 -1
  183. package/pf-icon/icons/fas/dice-five.js +1 -1
  184. package/pf-icon/icons/fas/dice-four.js +1 -1
  185. package/pf-icon/icons/fas/dice-one.js +1 -1
  186. package/pf-icon/icons/fas/dice-six.js +1 -1
  187. package/pf-icon/icons/fas/dice-three.js +1 -1
  188. package/pf-icon/icons/fas/dice-two.js +1 -1
  189. package/pf-icon/icons/fas/dice.js +1 -1
  190. package/pf-icon/icons/fas/disease.js +1 -1
  191. package/pf-icon/icons/fas/divide.js +1 -1
  192. package/pf-icon/icons/fas/dollar-sign.js +1 -1
  193. package/pf-icon/icons/fas/dumbbell.js +1 -1
  194. package/pf-icon/icons/fas/earth-africa.js +1 -1
  195. package/pf-icon/icons/fas/earth-europe.js +1 -1
  196. package/pf-icon/icons/fas/ellipsis-vertical.js +1 -1
  197. package/pf-icon/icons/fas/ellipsis.js +1 -1
  198. package/pf-icon/icons/fas/envelopes-bulk.js +1 -1
  199. package/pf-icon/icons/fas/equals.js +1 -1
  200. package/pf-icon/icons/fas/eraser.js +1 -1
  201. package/pf-icon/icons/fas/exclamation.js +1 -1
  202. package/pf-icon/icons/fas/face-grin-squint-tears.js +1 -1
  203. package/pf-icon/icons/fas/file-csv.js +1 -1
  204. package/pf-icon/icons/fas/file-pdf.js +1 -1
  205. package/pf-icon/icons/fas/file-waveform.js +1 -1
  206. package/pf-icon/icons/fas/file-word.js +1 -1
  207. package/pf-icon/icons/fas/fill.js +1 -1
  208. package/pf-icon/icons/fas/filter-circle-dollar.js +1 -1
  209. package/pf-icon/icons/fas/filter-circle-xmark.js +1 -1
  210. package/pf-icon/icons/fas/fingerprint.js +1 -1
  211. package/pf-icon/icons/fas/flag-checkered.js +1 -1
  212. package/pf-icon/icons/fas/flag-usa.js +1 -1
  213. package/pf-icon/icons/fas/futbol.js +1 -1
  214. package/pf-icon/icons/fas/gamepad.js +1 -1
  215. package/pf-icon/icons/fas/gear.js +1 -1
  216. package/pf-icon/icons/fas/gears.js +1 -1
  217. package/pf-icon/icons/fas/gem.js +1 -1
  218. package/pf-icon/icons/fas/genderless.js +1 -1
  219. package/pf-icon/icons/fas/globe.js +1 -1
  220. package/pf-icon/icons/fas/golf-ball-tee.js +1 -1
  221. package/pf-icon/icons/fas/grip-vertical.js +1 -1
  222. package/pf-icon/icons/fas/grip.js +1 -1
  223. package/pf-icon/icons/fas/group-arrows-rotate.js +1 -1
  224. package/pf-icon/icons/fas/hand-back-fist.js +1 -1
  225. package/pf-icon/icons/fas/hand-fist.js +1 -1
  226. package/pf-icon/icons/fas/hand-middle-finger.js +1 -1
  227. package/pf-icon/icons/fas/hand-peace.js +1 -1
  228. package/pf-icon/icons/fas/hand-pointer.js +1 -1
  229. package/pf-icon/icons/fas/hand-spock.js +1 -1
  230. package/pf-icon/icons/fas/hands-bound.js +1 -1
  231. package/pf-icon/icons/fas/hands-bubbles.js +1 -1
  232. package/pf-icon/icons/fas/hands-praying.js +1 -1
  233. package/pf-icon/icons/fas/hands.js +1 -1
  234. package/pf-icon/icons/fas/handshake-angle.js +1 -1
  235. package/pf-icon/icons/fas/handshake-simple-slash.js +1 -1
  236. package/pf-icon/icons/fas/handshake-slash.js +1 -1
  237. package/pf-icon/icons/fas/head-side-cough-slash.js +1 -1
  238. package/pf-icon/icons/fas/head-side-cough.js +1 -1
  239. package/pf-icon/icons/fas/head-side-mask.js +1 -1
  240. package/pf-icon/icons/fas/head-side-virus.js +1 -1
  241. package/pf-icon/icons/fas/heart-circle-bolt.js +1 -1
  242. package/pf-icon/icons/fas/heart-circle-check.js +1 -1
  243. package/pf-icon/icons/fas/heart-circle-exclamation.js +1 -1
  244. package/pf-icon/icons/fas/heart-circle-minus.js +1 -1
  245. package/pf-icon/icons/fas/heart-circle-plus.js +1 -1
  246. package/pf-icon/icons/fas/heart-circle-xmark.js +1 -1
  247. package/pf-icon/icons/fas/helicopter-symbol.js +1 -1
  248. package/pf-icon/icons/fas/hill-avalanche.js +1 -1
  249. package/pf-icon/icons/fas/holly-berry.js +1 -1
  250. package/pf-icon/icons/fas/horse-head.js +1 -1
  251. package/pf-icon/icons/fas/hourglass-half.js +1 -1
  252. package/pf-icon/icons/fas/house-flood-water.js +1 -1
  253. package/pf-icon/icons/fas/house-tsunami.js +1 -1
  254. package/pf-icon/icons/fas/ice-cream.js +1 -1
  255. package/pf-icon/icons/fas/industry.js +1 -1
  256. package/pf-icon/icons/fas/jedi.js +1 -1
  257. package/pf-icon/icons/fas/khanda.js +1 -1
  258. package/pf-icon/icons/fas/land-mine-on.js +1 -1
  259. package/pf-icon/icons/fas/laptop-file.js +1 -1
  260. package/pf-icon/icons/fas/leaf.js +1 -1
  261. package/pf-icon/icons/fas/lightbulb.js +1 -1
  262. package/pf-icon/icons/fas/link.js +1 -1
  263. package/pf-icon/icons/fas/location-arrow.js +1 -1
  264. package/pf-icon/icons/fas/map-pin.js +1 -1
  265. package/pf-icon/icons/fas/mars-and-venus.js +1 -1
  266. package/pf-icon/icons/fas/mars-stroke-right.js +1 -1
  267. package/pf-icon/icons/fas/maximize.js +1 -1
  268. package/pf-icon/icons/fas/mercury.js +1 -1
  269. package/pf-icon/icons/fas/microphone-lines.js +1 -1
  270. package/pf-icon/icons/fas/microphone.js +1 -1
  271. package/pf-icon/icons/fas/minus.js +1 -1
  272. package/pf-icon/icons/fas/mobile-button.js +1 -1
  273. package/pf-icon/icons/fas/mobile-screen-button.js +1 -1
  274. package/pf-icon/icons/fas/mobile-screen.js +1 -1
  275. package/pf-icon/icons/fas/mobile.js +1 -1
  276. package/pf-icon/icons/fas/mound.js +1 -1
  277. package/pf-icon/icons/fas/mountain.js +1 -1
  278. package/pf-icon/icons/fas/neuter.js +1 -1
  279. package/pf-icon/icons/fas/newspaper.js +1 -1
  280. package/pf-icon/icons/fas/not-equal.js +1 -1
  281. package/pf-icon/icons/fas/outdent.js +1 -1
  282. package/pf-icon/icons/fas/paperclip.js +1 -1
  283. package/pf-icon/icons/fas/parachute-box.js +1 -1
  284. package/pf-icon/icons/fas/paste.js +1 -1
  285. package/pf-icon/icons/fas/pen-nib.js +1 -1
  286. package/pf-icon/icons/fas/pen-to-square.js +1 -1
  287. package/pf-icon/icons/fas/people-arrows.js +1 -1
  288. package/pf-icon/icons/fas/people-robbery.js +1 -1
  289. package/pf-icon/icons/fas/person-breastfeeding.js +1 -1
  290. package/pf-icon/icons/fas/person-cane.js +1 -1
  291. package/pf-icon/icons/fas/person-drowning.js +1 -1
  292. package/pf-icon/icons/fas/person-falling.js +1 -1
  293. package/pf-icon/icons/fas/person-military-pointing.js +1 -1
  294. package/pf-icon/icons/fas/person-military-rifle.js +1 -1
  295. package/pf-icon/icons/fas/person-military-to-person.js +1 -1
  296. package/pf-icon/icons/fas/person-praying.js +1 -1
  297. package/pf-icon/icons/fas/person-pregnant.js +1 -1
  298. package/pf-icon/icons/fas/person-rifle.js +1 -1
  299. package/pf-icon/icons/fas/person-snowboarding.js +1 -1
  300. package/pf-icon/icons/fas/person-walking-luggage.js +1 -1
  301. package/pf-icon/icons/fas/person-walking-with-cane.js +1 -1
  302. package/pf-icon/icons/fas/piggy-bank.js +1 -1
  303. package/pf-icon/icons/fas/plug-circle-minus.js +1 -1
  304. package/pf-icon/icons/fas/plus.js +1 -1
  305. package/pf-icon/icons/fas/poo-storm.js +1 -1
  306. package/pf-icon/icons/fas/pump-medical.js +1 -1
  307. package/pf-icon/icons/fas/pump-soap.js +1 -1
  308. package/pf-icon/icons/fas/puzzle-piece.js +1 -1
  309. package/pf-icon/icons/fas/question.js +1 -1
  310. package/pf-icon/icons/fas/radiation.js +1 -1
  311. package/pf-icon/icons/fas/receipt.js +1 -1
  312. package/pf-icon/icons/fas/ribbon.js +1 -1
  313. package/pf-icon/icons/fas/rotate-left.js +1 -1
  314. package/pf-icon/icons/fas/rotate-right.js +1 -1
  315. package/pf-icon/icons/fas/rotate.js +1 -1
  316. package/pf-icon/icons/fas/ruler.js +1 -1
  317. package/pf-icon/icons/fas/rupee-sign.js +1 -1
  318. package/pf-icon/icons/fas/s.js +1 -1
  319. package/pf-icon/icons/fas/sailboat.js +1 -1
  320. package/pf-icon/icons/fas/scale-unbalanced-flip.js +1 -1
  321. package/pf-icon/icons/fas/scale-unbalanced.js +1 -1
  322. package/pf-icon/icons/fas/shield-cat.js +1 -1
  323. package/pf-icon/icons/fas/shield-dog.js +1 -1
  324. package/pf-icon/icons/fas/shield-halved.js +1 -1
  325. package/pf-icon/icons/fas/shield-heart.js +1 -1
  326. package/pf-icon/icons/fas/shield-virus.js +1 -1
  327. package/pf-icon/icons/fas/shield.js +1 -1
  328. package/pf-icon/icons/fas/shower.js +1 -1
  329. package/pf-icon/icons/fas/signal.js +1 -1
  330. package/pf-icon/icons/fas/signs-post.js +1 -1
  331. package/pf-icon/icons/fas/sliders.js +1 -1
  332. package/pf-icon/icons/fas/solar-panel.js +1 -1
  333. package/pf-icon/icons/fas/spinner.js +1 -1
  334. package/pf-icon/icons/fas/splotch.js +1 -1
  335. package/pf-icon/icons/fas/staff-snake.js +1 -1
  336. package/pf-icon/icons/fas/star-half-stroke.js +1 -1
  337. package/pf-icon/icons/fas/star-of-david.js +1 -1
  338. package/pf-icon/icons/fas/star-of-life.js +1 -1
  339. package/pf-icon/icons/fas/stethoscope.js +1 -1
  340. package/pf-icon/icons/fas/stopwatch-20.js +1 -1
  341. package/pf-icon/icons/fas/stopwatch.js +1 -1
  342. package/pf-icon/icons/fas/store.js +1 -1
  343. package/pf-icon/icons/fas/table-tennis-paddle-ball.js +1 -1
  344. package/pf-icon/icons/fas/temperature-arrow-down.js +1 -1
  345. package/pf-icon/icons/fas/temperature-arrow-up.js +1 -1
  346. package/pf-icon/icons/fas/temperature-empty.js +1 -1
  347. package/pf-icon/icons/fas/temperature-full.js +1 -1
  348. package/pf-icon/icons/fas/temperature-half.js +1 -1
  349. package/pf-icon/icons/fas/temperature-high.js +1 -1
  350. package/pf-icon/icons/fas/temperature-quarter.js +1 -1
  351. package/pf-icon/icons/fas/temperature-three-quarters.js +1 -1
  352. package/pf-icon/icons/fas/tent-arrows-down.js +1 -1
  353. package/pf-icon/icons/fas/terminal.js +1 -1
  354. package/pf-icon/icons/fas/toilet-paper-slash.js +1 -1
  355. package/pf-icon/icons/fas/toilet-paper.js +1 -1
  356. package/pf-icon/icons/fas/tooth.js +1 -1
  357. package/pf-icon/icons/fas/train-tram.js +1 -1
  358. package/pf-icon/icons/fas/tty.js +1 -1
  359. package/pf-icon/icons/fas/umbrella.js +1 -1
  360. package/pf-icon/icons/fas/user-large-slash.js +1 -1
  361. package/pf-icon/icons/fas/user-secret.js +1 -1
  362. package/pf-icon/icons/fas/venus-double.js +1 -1
  363. package/pf-icon/icons/fas/venus.js +1 -1
  364. package/pf-icon/icons/fas/video-slash.js +1 -1
  365. package/pf-icon/icons/fas/virus-slash.js +1 -1
  366. package/pf-icon/icons/fas/volcano.js +1 -1
  367. package/pf-icon/icons/fas/wine-glass-empty.js +1 -1
  368. package/pf-icon/icons/fas/wine-glass.js +1 -1
  369. package/pf-icon/icons/fas/worm.js +1 -1
  370. package/pf-icon/icons/fas/xmark.js +1 -1
  371. package/pf-icon/icons/fas/yen-sign.js +1 -1
  372. package/pf-icon/pf-icon.d.ts +1 -1
  373. package/pf-icon/pf-icon.js +1 -1
  374. package/pf-icon/pf-icon.js.map +1 -1
  375. package/pf-jump-links/pf-jump-links-item.js +5 -2
  376. package/pf-jump-links/pf-jump-links-item.js.map +1 -1
  377. package/pf-jump-links/pf-jump-links-list.js.map +1 -1
  378. package/pf-jump-links/pf-jump-links.d.ts +1 -1
  379. package/pf-jump-links/pf-jump-links.js +10 -4
  380. package/pf-jump-links/pf-jump-links.js.map +1 -1
  381. package/pf-label/BaseLabel.js +2 -1
  382. package/pf-label/BaseLabel.js.map +1 -1
  383. package/pf-label/pf-label.d.ts +1 -1
  384. package/pf-label/pf-label.js +1 -1
  385. package/pf-label/pf-label.js.map +1 -1
  386. package/pf-modal/pf-modal.d.ts +1 -1
  387. package/pf-modal/pf-modal.js +8 -2
  388. package/pf-modal/pf-modal.js.map +1 -1
  389. package/pf-panel/pf-panel.d.ts +1 -1
  390. package/pf-panel/pf-panel.js +1 -1
  391. package/pf-panel/pf-panel.js.map +1 -1
  392. package/pf-popover/README.md +48 -0
  393. package/pf-popover/pf-popover.css +191 -0
  394. package/pf-popover/pf-popover.d.ts +266 -0
  395. package/pf-popover/pf-popover.js +447 -0
  396. package/pf-popover/pf-popover.js.map +1 -0
  397. package/pf-progress-stepper/pf-progress-step.js +2 -1
  398. package/pf-progress-stepper/pf-progress-step.js.map +1 -1
  399. package/pf-progress-stepper/pf-progress-stepper.d.ts +1 -1
  400. package/pf-progress-stepper/pf-progress-stepper.js +5 -2
  401. package/pf-progress-stepper/pf-progress-stepper.js.map +1 -1
  402. package/pf-spinner/BaseSpinner.js +2 -1
  403. package/pf-spinner/BaseSpinner.js.map +1 -1
  404. package/pf-spinner/pf-spinner.d.ts +1 -1
  405. package/pf-spinner/pf-spinner.js +1 -1
  406. package/pf-spinner/pf-spinner.js.map +1 -1
  407. package/pf-switch/BaseSwitch.js +2 -1
  408. package/pf-switch/BaseSwitch.js.map +1 -1
  409. package/pf-switch/pf-switch.d.ts +1 -1
  410. package/pf-switch/pf-switch.js +1 -1
  411. package/pf-switch/pf-switch.js.map +1 -1
  412. package/pf-tabs/BaseTab.d.ts +1 -0
  413. package/pf-tabs/BaseTab.js +8 -1
  414. package/pf-tabs/BaseTab.js.map +1 -1
  415. package/pf-tabs/BaseTabPanel.js +4 -1
  416. package/pf-tabs/BaseTabPanel.js.map +1 -1
  417. package/pf-tabs/BaseTabs.js +5 -2
  418. package/pf-tabs/BaseTabs.js.map +1 -1
  419. package/pf-tabs/pf-tab-panel.d.ts +0 -1
  420. package/pf-tabs/pf-tab-panel.js +0 -5
  421. package/pf-tabs/pf-tab-panel.js.map +1 -1
  422. package/pf-tabs/pf-tab.d.ts +0 -1
  423. package/pf-tabs/pf-tab.js +0 -5
  424. package/pf-tabs/pf-tab.js.map +1 -1
  425. package/pf-tabs/pf-tabs.d.ts +1 -1
  426. package/pf-tabs/pf-tabs.js +1 -1
  427. package/pf-tabs/pf-tabs.js.map +1 -1
  428. package/pf-tile/pf-tile.d.ts +1 -1
  429. package/pf-tile/pf-tile.js +1 -1
  430. package/pf-tile/pf-tile.js.map +1 -1
  431. package/pf-timestamp/pf-timestamp.d.ts +1 -1
  432. package/pf-timestamp/pf-timestamp.js +5 -2
  433. package/pf-timestamp/pf-timestamp.js.map +1 -1
  434. package/pf-tooltip/BaseTooltip.js +2 -2
  435. package/pf-tooltip/BaseTooltip.js.map +1 -1
  436. package/pf-tooltip/pf-tooltip.d.ts +1 -1
  437. package/pf-tooltip/pf-tooltip.js +1 -1
  438. package/pf-tooltip/pf-tooltip.js.map +1 -1
  439. package/pfe.min.js +156 -100
  440. package/pfe.min.js.map +4 -4
@@ -9,7 +9,7 @@ import '@patternfly/elements/pf-spinner/pf-spinner.js';
9
9
  import { css } from "lit";
10
10
  const styles = css `button{color:var(--pf-c-button--m-primary--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-button--m-primary--BackgroundColor,var(--pf-global--primary-color--100,#06c));font-size:var(--pf-c-button--FontSize,\n var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-c-button--FontWeight,var(--pf-global--FontWeight--normal,400));line-height:var(--pf-c-button--LineHeight,\n var(--pf-global--LineHeight--md, 1.5));padding:var(--pf-c-button--PaddingTop,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)) var(--pf-c-button--PaddingBottom,var(--pf-global--spacer--form-element,.375rem)) var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem))}:host,button{border-radius:var(--pf-c-button--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}::slotted(pf-icon),pf-icon{color:currentColor}button::after{border-color:var(--pf-c-button--after--BorderColor,transparent);border-width:var(--pf-c-button--after--BorderWidth,var(--pf-global--BorderWidth--sm,1px));border-radius:var(--pf-c-button--after--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}button:active{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--active--Color,\n var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--active--BackgroundColor,\n var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--active--after--BorderWidth,\n var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--active--Color,\n var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--active--BackgroundColor,\n var(--pf-global--danger-color--200, #a30000))}button:focus{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--focus--Color,\n var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--focus--BackgroundColor,\n var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--focus--after--BorderWidth,\n var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--focus--Color,\n var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--focus--BackgroundColor,\n var(--pf-global--danger-color--200, #a30000))}button:hover{--pf-c-button--m-primary--Color:var(--pf-c-button--m-primary--hover--Color,\n var(--pf-global--Color--light-100, #fff));--pf-c-button--m-primary--BackgroundColor:var(--pf-c-button--m-primary--hover--BackgroundColor,\n var(--pf-global--primary-color--200, #004080));--pf-c-button--after--BorderWidth:var(--pf-c-button--hover--after--BorderWidth,\n var(--pf-global--BorderWidth--md, 2px));--pf-c-button--m-danger--Color:var(--pf-c-button--m-danger--hover--Color,\n var(--pf-global--Color--light-100, #fff));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-danger--hover--BackgroundColor,\n var(--pf-global--danger-color--200, #a30000))}:host([warning]) button{color:var(--pf-c-button--m-warning--Color,var(--pf-global--Color--dark-100,#151515));background-color:var(--pf-c-button--m-warning--BackgroundColor,var(--pf-global--warning-color--100,#f0ab00))}:host([warning]) button:active{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--active--Color,\n var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--active--BackgroundColor,\n var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) button:focus{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--focus--Color,\n var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--focus--BackgroundColor,\n var(--pf-global--palette--gold-500, #c58c00))}:host([warning]) button:hover{--pf-c-button--m-warning--Color:var(--pf-c-button--m-warning--hover--Color,\n var(--pf-global--Color--dark-100, #151515));--pf-c-button--m-warning--BackgroundColor:var(--pf-c-button--m-warning--hover--BackgroundColor,\n var(--pf-global--palette--gold-500, #c58c00))}:host([disabled][warning]) button{pointer-events:none;cursor:default;color:var(--pf-c-button--disabled--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-button--disabled--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host([plain]){--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-plain--disabled--BackgroundColor, transparent)}:host([plain]) button{--pf-c-button--after--BorderWidth:0;--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--after--BorderColor,\n var(--pf-global--Color--100, #151515));--pf-c-button--disabled--Color:var(--pf-c-button--m-plain--disabled--Color,\n var(--pf-global--disabled-color--200, #d2d2d2));color:var(--pf-c-button--m-plain--Color,var(--pf-global--Color--200,#6a6e73));background-color:var(--pf-c-button--m-plain--BackgroundColor,transparent)}:host([plain]) button:active{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--active--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--active--BackgroundColor,\n tranparent)}:host([plain]) button:focus{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--focus--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--focus--BackgroundColor,\n transparent)}:host([plain]) button:hover{--pf-c-button--m-plain--Color:var(--pf-c-button--m-plain--hover--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-plain--BackgroundColor:var(--pf-c-button--m-plain--hover--BackgroundColor,\n transparent)}:host([loading][plain]) [part=icon],:host([plain]) .hasIcon [part=icon]{left:16px}:host([plain]) button:disabled,:host([plain]) button[aria-disabled=true],:host([plain][disabled]),:host([plain][disabled]) button,:host([plain][disabled][variant=link]) button{color:var(--pf-c-button--disabled--Color,var(--pf-c-button--m-plain--disabled--Color,var(--pf-global--disabled--color--200,#d2d2d2)))}.hasIcon{gap:calc(2 * var(--pf-c-button__icon--m-start--MarginLeft,var(--pf-global--spacer--xs,.25rem)))}.hasIcon [part=icon]{--pf-icon--size:16px;position:relative}:host([icon-position=right]) .hasIcon [part=icon],:host([icon-position=right][loading]) [part=icon]{order:1}:host([icon-position=right]) .hasIcon button{padding-left:var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem));padding-right:calc(16px + 8px + var(--pf-c-button--PaddingRight,var(--pf-global--spacer--md,1rem)))}:host([loading]) button{position:relative;display:flex;align-items:center}:host([loading]) button [part=icon]{display:inline-block;z-index:1;position:absolute;cursor:pointer;top:var(--pf-c-button__progress--Top,50%);left:var(--pf-c-button__progress--Left,var(--pf-global--spacer--md,1rem));line-height:1;transform:translate(var(--pf-c-button__progress--TranslateX,0),var(--pf-c-button__progress--TranslateY,-50%));margin-inline-end:var(--pf-c-button__icon--m-start--MarginRight,var(--pf-global--spacer--xs,.25rem))}:host([loading][danger]),:host([loading][variant=primary]:not([plain])){--pf-c-spinner--Color:white}:host([loading]:not([plain])){--pf-c-button--PaddingRight:var(--pf-c-button--m-in-progress--PaddingRight,\n var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingLeft:var(--pf-c-button--m-in-progress--PaddingLeft,\n calc(\n var(--pf-global--spacer--md, 1rem) + var(--pf-c-button__progress--width,\n calc(var(--pf-global--icon--FontSize--md, 1.125rem) + var(--pf-global--spacer--sm, 0.5rem))) / 2))}:host([loading]:not([plain])) button{padding-left:calc(12px + var(--pf-c-button--PaddingLeft,var(--pf-global--spacer--md,1rem)))}:host([variant=secondary]){--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--Color,\n var(--pf-global--danger-color--100, #c9190b));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--BackgroundColor, transparent)}:host([variant=secondary]) button{color:var(--pf-c-button--m-secondary--Color,var(--pf-global--primary-color--100,#06c));background-color:var(--pf-c-button--m-secondary--BackgroundColor,transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--after--BorderColor,\n var(--pf-global--primary-color--100, #06c))}:host([variant=secondary]) button:active{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--active--Color,\n var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--active--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--active--after--BorderColor,\n var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--active--Color,\n var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--active--BackgroundColor, transparent)}:host([variant=secondary]) button:focus{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--focus--Color,\n var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--focus--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--focus--after--BorderColor,\n var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--focus--Color,\n var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--focus--BackgroundColor, transparent)}:host([variant=secondary]) button:hover{--pf-c-button--m-secondary--Color:var(--pf-c-button--m-secondary--hover--Color,\n var(--pf-global--primary-color--100, #06c));--pf-c-button--m-secondary--BackgroundColor:var(--pf-c-button--m-secondary--hover--BackgroundColor,\n transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--hover--after--BorderColor,\n var(--pf-global--primary-color--100, #06c));--pf-c-button--m-danger--Color:var(--pf-c-button--m-secondary--m-danger--hover--Color,\n var(--pf-global--danger--color--200, #a30000));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-secondary--m-danger--hover--BackgroundColor, transparent)}:host([variant=secondary][danger]) button{color:var(--pf-c-button--m-secondary--m-danger--Color,var(--pf-global--danger--color--100,#c9190b));background-color:var(--pf-c-button--m-secondary--m-danger--BackgroundColor,transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:active{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--active--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:focus{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--focus--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b))}:host([variant=secondary][danger]) button:hover{--pf-c-button--after--BorderColor:var(--pf-c-button--m-secondary--m-danger--hover--after--BorderColor,\n var(--pf-global--danger--color--100, #c9190b))}:host([variant=tertiary]) button{--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--after--BorderColor,\n var(--pf-global--Color--100, #151515));color:var(--pf-c-button--m-tertiary--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-button--m-tertiary--BackgroundColor,transparent)}:host([variant=tertiary]) button:active{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--active--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--active--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--active--after--BorderColor,\n var(--pf-global--Color--100, #151515))}:host([variant=tertiary]) button:focus{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--focus--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--focus--BackgroundColor,\n transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--focus--after--BorderColor,\n var(--pf-global--Color--100, #151515))}:host([variant=tertiary]) button:hover{--pf-c-button--m-tertiary--Color:var(--pf-c-button--m-tertiary--hover--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-tertiary--BackgroundColor:var(--pf-c-button--m-tertiary--hover--BackgroundColor, transparent);--pf-c-button--after--BorderColor:var(--pf-c-button--m-tertiary--hover--after--BorderColor,\n var(--pf-global--Color--100, #151515))}:host([variant=control]) button{--pf-c-button--BorderRadius:var(--pf-c-button--m-control--BorderRadius, 0);--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-control--disabled--BackgroundColor,\n var(--pf-global--disabled-color--300, #f0f0f0));--pf-c-button--after--BorderRadius:0;--pf-c-button--after--BorderWidth:var(--pf-c-button--m-control--after--BorderWidth,\n var(--pf-global--BorderWidth--sm, 1px));--pf-c-button--after--BorderColor:var(--pf-c-button--m-control--after--BorderTopColor,\n var(--pf-global--BorderColor--300, #f0f0f0)) var(--pf-c-button--m-control--after--BorderRightColor,\n var(--pf-global--BorderColor--300, #f0f0f0)) var(--pf-c-button--m-control--after--BorderBottomColor,\n var(--pf-global--BorderColor--200, #8a8d90)) var(--pf-c-button--m-control--after--BorderLeftColor,\n var(--pf-global--BorderColor--300, #f0f0f0));color:var(--pf-c-button--m-control--Color,var(--pf-global--Color--100,#151515));background-color:var(--pf-c-button--m-control--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff))}:host([variant=control]) button:active{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--active--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--active--BackgroundColor,\n var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--active--after--BorderBottomColor,\n var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:focus{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--focus--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--focus--BackgroundColor,\n var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--focus--after--BorderBottomColor,\n var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:hover{--pf-c-button--m-control--Color:var(--pf-c-button--m-control--hover--Color,\n var(--pf-global--Color--100, #151515));--pf-c-button--m-control--BackgroundColor:var(--pf-c-button--m-control--hover--BackgroundColor,\n var(--pf-global--BackgroundColor--100, #fff));--pf-c-button--m-control--after--BorderBottomColor:var(--pf-c-button--m-control--hover--after--BorderBottomColor,\n var(--pf-global--active-color--100, #06c))}:host([variant=control]) button:active::after{border-block-end-width:var(--pf-c-button--m-control--active--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=control]) button:focus::after{border-block-end-width:var(--pf-c-button--m-control--focus--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=control]) button:hover::after{border-block-end-width:var(--pf-c-button--m-control--hover--after--BorderBottomWidth,var(--pf-global--BorderWidth--md,2px))}:host([variant=link]) button{color:var(--pf-c-button--m-link--Color,var(--pf-global--link--Color,#06c))}:host([variant=link]) button{background-color:var(--pf-c-button--m-link--BackgroundColor,var(--pf-c-button--m-link--hover--BackgroundColor,transparent))}:host([variant=link][inline]),:host([variant=link][inline]) button{display:inline}:host([variant=link][inline]){--pf-c-button--PaddingTop:0;--pf-c-button--PaddingLeft:0;--pf-c-button--PaddingBottom:0;--pf-c-button--PaddingRight:0}:host([variant=link][inline]) button:hover{text-decoration:var(--pf-c-button--m-link--m-inline--hover--TextDecoration,var(--pf-global--link--TextDecoration--hover,underline))}:host([variant=link]){--pf-c-button--disabled--BackgroundColor:var(--pf-c-button--m-link--disabled--BackgroundColor, transparent)}:host(:hover){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--hover--Color,\n var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--hover--BackgroundColor, transparent)}:host(:focus),:host(:focus-within){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--focus--Color,\n var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--hover--BackgroundColor, transparent)}:host(:not([inline])) button:active{--pf-c-button--m-link--Color:var(--pf-c-button--m-link--active--Color,\n var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--active--BackgroundColor, transparent)}:host(:not([inline]):has(button:active)){--pf-c-button--m-link--Color:var(--pf-c-button--m-link--active--Color,\n var(--pf-global--link--Color--hover, #004080));--pf-c-button--m-link--BackgroundColor:var(--pf-c-button--m-link--active--BackgroundColor, transparent)}:host([variant=link][danger]) button{--pf-c-button--m-danger--Color:var(--pf-c-button--m-link--m-danger--Color,\n var(--pf-global--danger-color--100, #c9190b));--pf-c-button--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--BackgroundColor, transparent)}:host([variant=link][danger]) button:hover{--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--hover--Color,\n var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--hover--BackgroundColor, transparent)}:host([variant=link][danger]) button:active{--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--active--Color,\n var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent)}:host([variant=link][danger]:has(button:active)){--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--active--Color,\n var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--active--BackgroundColor, transparent)}:host([variant=link][danger]:is(:focus,:focus-within)){--pf-c-button--m-link--m-danger--Color:var(--pf-c-button--m-link--m-danger--focus--Color,\n var(--pf-global--danger-color--200, #a30000));--pf-c-button--m-link--m-danger--BackgroundColor:var(--pf-c-button--m-link--m-danger--focus--BackgroundColor, transparent)}:host(:is(:disabled,[aria-disabled=true])),:host(:is(:disabled,[aria-disabled=true])) button,:host(:is(:disabled,[aria-disabled=true])[danger]) button,:host(:is(:disabled,[aria-disabled=true])[variant=link]) button{color:var(--pf-c-button--disabled--Color,var(--pf-global--disabled-color--100,#6a6e73));background-color:var(--pf-c-button--disabled--BackgroundColor,var(--pf-global--disabled-color--200,#d2d2d2))}:host(:is(:disabled,[aria-disabled=true])) button::after{border-color:var(--pf-c-button--disabled--after--BorderColor,transparent)}:host([block]),:host([block]) button{display:flex;width:100%;justify-content:center}:host([size=large]) button{--pf-c-button--PaddingTop:var(--pf-c-button--m-display-lg--PaddingTop,\n var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingRight:var(--pf-c-button--m-display-lg--PaddingRight,\n var(--pf-global--spacer--xl, 2rem));--pf-c-button--PaddingBottom:var(--pf-c-button--m-display-lg--PaddingBottom,\n var(--pf-global--spacer--md, 1rem));--pf-c-button--PaddingLeft:var(--pf-c-button--m-display-lg--PaddingLeft,\n var(--pf-global--spacer--xl, 2rem));--pf-c-button--FontWeight:var(--pf-c-button--m-display-lg--FontWeight,\n var(--pf-global--FontWeight--bold, 700))}:host([size=small]) button{--pf-c-button--FontSize:var(--pf-c-button--m-small--FontSize,\n var(--pf-global--FontSize--md, 1rem))}:host([danger]) button{color:var(--pf-c-button--m-danger--Color,var(--pf-global--Color--light-100,#fff));background-color:var(--pf-c-button--m-danger--BackgroundColor,var(--pf-global--danger-color--100,#c9190b))}`;
11
11
  /**
12
- * A button is a box area or text that communicates and triggers user actions when
12
+ * A **button** is a box area or text that communicates and triggers user actions when
13
13
  * clicked or selected. Buttons can be used to communicate and immediately trigger
14
14
  * actions a user can take in an application, like submitting a form, canceling a
15
15
  * process, or creating a new object. Buttons can also be used to take a user to a
@@ -1 +1 @@
1
- {"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+CAA+C,CAAC;;;AAYvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmIG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAGL,gDAAgD;QACJ,YAAO,GAAG,KAAK,CAAC;QAE5D,2BAA2B;QACiB,UAAK,GAAG,KAAK,CAAC;QAE1D,8BAA8B;QACc,YAAO,GAAG,KAAK,CAAC;QAOhB,WAAM,GAAG,KAAK,CAAC;QAE3D;;;;;;;;;WASG;QAC0B,YAAO,GAAkB,SAAS,CAAC;IAkBlE,CAAC;IAhBC,IAAuB,OAAO;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAEkB,iBAAiB;QAClC,OAAO,IAAI,CAAA;;kBAEG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBACrB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;qBACnB,CAAC,IAAI,CAAC,IAAI;;qBAEV,CAAC,IAAI,CAAC,OAAO;;wBAEV,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,SAAS;KAClE,CAAC;IACJ,CAAC;;AA7Ce,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAGZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAE/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA0B;AAGjB;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCAAkB;AAEV;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAY9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAoC;AA7BrD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA+CpB;SA/CY,QAAQ","sourcesContent":["import { html } 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 { BaseButton } from './BaseButton.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\n\nimport styles from './pf-button.css';\n\nexport type ButtonVariant = (\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'control'\n | 'link'\n);\n\n/**\n * A button is a box area or text that communicates and triggers user actions when\n * clicked or selected. Buttons can be used to communicate and immediately trigger\n * actions a user can take in an application, like submitting a form, canceling a\n * process, or creating a new object. Buttons can also be used to take a user to a\n * new location, like another page inside of a web application, or an external site\n * such as help or documentation..\n *\n * @summary Allows users to perform an action when triggered\n *\n * @cssprop {<length>} --pf-c-button--FontSize {@default `1rem`}\n * @cssprop --pf-c-button--FontWeight {@default `400`}\n * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}\n *\n * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight {@default `1rem`}\n *\n * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius {@default `3px`}\n * @cssprop {<color>} --pf-c-button--after--BorderColor {@default `transparent`}\n * @cssprop {<length>} --pf-c-button--after--BorderRadius {@default `3px`}\n * @cssprop {<length>} --pf-c-button--after--BorderWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth {@default `2px`}\n *\n * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-primary--active--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--active--BackgroundColor {@default `#004080`}\n * @cssprop {<color>} --pf-c-button--m-primary--focus--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--focus--BackgroundColor {@default `#004080`}\n * @cssprop {<color>} --pf-c-button--m-primary--hover--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--hover--BackgroundColor {@default `#004080`}\n *\n * @cssprop {<color>} --pf-c-button--m-secondary--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--BorderColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--BorderColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--BorderColor {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-button--m-tertiary--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--BorderColor {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--BorderColor {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--BorderColor {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-button--m-danger--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--BackgroundColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-danger--active--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--active--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-danger--focus--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--focus--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-danger--hover--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--hover--BackgroundColor {@default `#a30000`}\n *\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--BorderColor {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-button--m-control--disabled--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-button--m-control--BorderRadius {@default `0`}\n * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderTopColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderRightColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderBottomColor {@default `#8a8d90`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderLeftColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--active--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--active--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--active--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--focus--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth {@default `2px`}\n *\n * @cssprop {<color>} --pf-c-button--disabled--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-button--disabled--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-button--disabled--after--BorderColor {@default `transparent`}\n *\n * @cssprop {<color>} --pf-c-button--m-warning--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--BackgroundColor {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-button--m-warning--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--active--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>} --pf-c-button--m-warning--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--focus--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>} --pf-c-button--m-warning--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--hover--BackgroundColor {@default `#c58c00`}\n *\n * @cssprop {<color>} --pf-c-button--m-plain--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-button--m-plain--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-plain--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--active--Color {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-button--m-plain--disabled--Color {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}\n *\n * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}\n *\n */\n@customElement('pf-button')\nexport class PfButton extends BaseButton {\n static readonly styles = [...BaseButton.styles, styles];\n\n /** Represents the state of a stateful button */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Applies plain styles */\n @property({ type: Boolean, reflect: true }) plain = false;\n\n /** Not as urgent as danger */\n @property({ type: Boolean, reflect: true }) warning = false;\n\n @property({ reflect: true }) size?: 'small' | 'large';\n\n /** Icon set for the `icon` property */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n @property({ type: Boolean, reflect: true }) danger = false;\n\n /**\n * Changes the style of the button.\n * - Primary: Used for the most important call to action on a page. Try to\n * limit primary buttons to one per page.\n * - Secondary: Use secondary buttons for general actions on a page, that\n * don’t require as much emphasis as primary button actions. For example,\n * you can use secondary buttons where there are multiple actions, like in\n * toolbars or data lists.\n * - Tertiary: Tertiary buttons are flexible and can be used as needed.\n */\n @property({ reflect: true }) variant: ButtonVariant = 'primary';\n\n protected override get hasIcon() {\n return !!this.icon || !!this.loading;\n }\n\n protected override renderDefaultIcon() {\n return html`\n <pf-icon\n icon=\"${ifDefined(this.icon)}\"\n set=\"${ifDefined(this.iconSet)}\"\n ?hidden=\"${!this.icon}\"></pf-icon>\n <pf-spinner\n ?hidden=\"${!this.loading}\"\n size=\"md\"\n aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-button': PfButton;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-button.js","sourceRoot":"","sources":["pf-button.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,yCAAyC,CAAC;AACjD,OAAO,+CAA+C,CAAC;;;AAYvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmIG;AAEH,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QAGE,gDAAgD;QACJ,YAAO,GAAG,KAAK,CAAC;QAE5D,2BAA2B;QACiB,UAAK,GAAG,KAAK,CAAC;QAE1D,8BAA8B;QACc,YAAO,GAAG,KAAK,CAAC;QAOhB,WAAM,GAAG,KAAK,CAAC;QAE3D;;;;;;;;;WASG;QAC0B,YAAO,GAAkB,SAAS,CAAC;IAkBlE,CAAC;IAhBC,IAAuB,OAAO;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC;IACvC,CAAC;IAEkB,iBAAiB;QAClC,OAAO,IAAI,CAAA;;kBAEG,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;iBACrB,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC;qBACnB,CAAC,IAAI,CAAC,IAAI;;qBAEV,CAAC,IAAI,CAAC,OAAO;;wBAEV,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,IAAI,SAAS;KAClE,CAAC;IACJ,CAAC;;AA7Ce,eAAM,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,MAAM,CAAC,AAAjC,CAAkC;AAGZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAGhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAe;AAGd;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AAE/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA0B;AAGjB;IAApC,QAAQ,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;yCAAkB;AAEV;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAY9B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAoC;AA7BrD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA+CpB;SA/CY,QAAQ","sourcesContent":["import { html } 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 { BaseButton } from './BaseButton.js';\n\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-spinner/pf-spinner.js';\n\nimport styles from './pf-button.css';\n\nexport type ButtonVariant = (\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'control'\n | 'link'\n);\n\n/**\n * A **button** is a box area or text that communicates and triggers user actions when\n * clicked or selected. Buttons can be used to communicate and immediately trigger\n * actions a user can take in an application, like submitting a form, canceling a\n * process, or creating a new object. Buttons can also be used to take a user to a\n * new location, like another page inside of a web application, or an external site\n * such as help or documentation..\n *\n * @summary Allows users to perform an action when triggered\n *\n * @cssprop {<length>} --pf-c-button--FontSize {@default `1rem`}\n * @cssprop --pf-c-button--FontWeight {@default `400`}\n * @cssprop {<number>} --pf-c-button--LineHeight {@default `1.5`}\n *\n * @cssprop {<length>} --pf-c-button--PaddingTop {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-button--PaddingBottom {@default `0.375rem`}\n * @cssprop {<length>} --pf-c-button--PaddingRight {@default `1rem`}\n *\n * @cssprop {<length>|<percentage>} --pf-c-button--BorderRadius {@default `3px`}\n * @cssprop {<color>} --pf-c-button--after--BorderColor {@default `transparent`}\n * @cssprop {<length>} --pf-c-button--after--BorderRadius {@default `3px`}\n * @cssprop {<length>} --pf-c-button--after--BorderWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-button--active--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--hover--after--BorderWidth {@default `2px`}\n * @cssprop {<length>} --pf-c-button--focus--after--BorderWidth {@default `2px`}\n *\n * @cssprop {<color>} --pf-c-button--m-primary--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--BackgroundColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-primary--active--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--active--BackgroundColor {@default `#004080`}\n * @cssprop {<color>} --pf-c-button--m-primary--focus--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--focus--BackgroundColor {@default `#004080`}\n * @cssprop {<color>} --pf-c-button--m-primary--hover--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-primary--hover--BackgroundColor {@default `#004080`}\n *\n * @cssprop {<color>} --pf-c-button--m-secondary--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--active--BorderColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--focus--BorderColor {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--Color {@default `#06c`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--hover--BorderColor {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-button--m-tertiary--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--active--BorderColor {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--focus--BorderColor {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-tertiary--hover--BorderColor {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-button--m-danger--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--BackgroundColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-danger--active--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--active--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-danger--focus--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--focus--BackgroundColor {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-danger--hover--Color {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-danger--hover--BackgroundColor {@default `#a30000`}\n *\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--Color {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--active--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--focus--BorderColor {@default `#c9190b`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--Color {@default `#a30000`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-secondary--m-danger--hover--BorderColor {@default `#c9190b`}\n *\n * @cssprop {<color>} --pf-c-button--m-control--disabled--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-button--m-control--BorderRadius {@default `0`}\n * @cssprop {<length>} --pf-c-button--m-control--after--BorderWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderTopColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderRightColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderBottomColor {@default `#8a8d90`}\n * @cssprop {<color>} --pf-c-button--m-control--after--BorderLeftColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-button--m-control--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--active--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--active--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--active--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--focus--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--focus--after--BorderBottomWidth {@default `2px`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--BackgroundColor {@default `#fff`}\n * @cssprop {<color>} --pf-c-button--m-control--hover--BorderBottomColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-button--m-control--hover--after--BorderBottomWidth {@default `2px`}\n *\n * @cssprop {<color>} --pf-c-button--disabled--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-button--disabled--BackgroundColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-button--disabled--after--BorderColor {@default `transparent`}\n *\n * @cssprop {<color>} --pf-c-button--m-warning--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--BackgroundColor {@default `#f0ab00`}\n * @cssprop {<color>} --pf-c-button--m-warning--active--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--active--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>} --pf-c-button--m-warning--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--focus--BackgroundColor {@default `#c58c00`}\n * @cssprop {<color>} --pf-c-button--m-warning--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-warning--hover--BackgroundColor {@default `#c58c00`}\n *\n * @cssprop {<color>} --pf-c-button--m-plain--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--Color {@default `#6a6e73`}\n * @cssprop {<color>} --pf-c-button--m-plain--hover--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--hover--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-plain--focus--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--focus--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-button--m-plain--active--BackgroundColor {@default `transparent`}\n * @cssprop {<color>} --pf-c-button--m-plain--active--Color {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-button--m-plain--disabled--Color {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-button--m-plain--disabled--BackgroundColor {@default `transparent`}\n *\n * @attr {string} loading-label - ARIA label for the loading indicator {@default `'loading'`}\n *\n */\n@customElement('pf-button')\nexport class PfButton extends BaseButton {\n static readonly styles = [...BaseButton.styles, styles];\n\n /** Represents the state of a stateful button */\n @property({ type: Boolean, reflect: true }) loading = false;\n\n /** Applies plain styles */\n @property({ type: Boolean, reflect: true }) plain = false;\n\n /** Not as urgent as danger */\n @property({ type: Boolean, reflect: true }) warning = false;\n\n @property({ reflect: true }) size?: 'small' | 'large';\n\n /** Icon set for the `icon` property */\n @property({ attribute: 'icon-set' }) iconSet?: string;\n\n @property({ type: Boolean, reflect: true }) danger = false;\n\n /**\n * Changes the style of the button.\n * - Primary: Used for the most important call to action on a page. Try to\n * limit primary buttons to one per page.\n * - Secondary: Use secondary buttons for general actions on a page, that\n * don’t require as much emphasis as primary button actions. For example,\n * you can use secondary buttons where there are multiple actions, like in\n * toolbars or data lists.\n * - Tertiary: Tertiary buttons are flexible and can be used as needed.\n */\n @property({ reflect: true }) variant: ButtonVariant = 'primary';\n\n protected override get hasIcon() {\n return !!this.icon || !!this.loading;\n }\n\n protected override renderDefaultIcon() {\n return html`\n <pf-icon\n icon=\"${ifDefined(this.icon)}\"\n set=\"${ifDefined(this.iconSet)}\"\n ?hidden=\"${!this.icon}\"></pf-icon>\n <pf-spinner\n ?hidden=\"${!this.loading}\"\n size=\"md\"\n aria-label=\"${this.getAttribute('loading-label') ?? 'loading'}\"></pf-spinner>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-button': PfButton;\n }\n}\n"]}
@@ -20,7 +20,7 @@ const style = css `:host{display:flex;flex-direction:column}article{position:rel
20
20
  * @csspart body - The container for *body* content
21
21
  * @csspart footer - The container for *footer* content
22
22
  */
23
- export class BaseCard extends LitElement {
23
+ class BaseCard extends LitElement {
24
24
  constructor() {
25
25
  super(...arguments);
26
26
  this.slots = new SlotController(this, 'header', null, 'footer');
@@ -48,4 +48,5 @@ export class BaseCard extends LitElement {
48
48
  }
49
49
  }
50
50
  BaseCard.styles = [style];
51
+ export { BaseCard };
51
52
  //# sourceMappingURL=BaseCard.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"BaseCard.js","sourceRoot":"","sources":["BaseCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;;;AAIvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,OAAgB,QAAS,SAAQ,UAAU;IAAjD;;QAGY,UAAK,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAuBvE,CAAC;IArBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;yBAIU,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;sBAKxD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAC;;;;;yBAKrD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;KAIzE,CAAC;IACJ,CAAC;;AAxBe,eAAM,GAAG,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import { LitElement, html } from 'lit';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport style from './BaseCard.css';\n\n/**\n * This element creates a header, body, and footer region in which to place\n * content or other components.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n * If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n * An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n * Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n */\nexport abstract class BaseCard extends LitElement {\n static readonly styles = [style];\n\n protected slots = new SlotController(this, 'header', null, 'footer');\n\n render() {\n return html`\n <article>\n <header id=\"header\"\n part=\"header\"\n class=\"${classMap({ empty: !this.slots.hasSlotted('header') })}\">\n <slot name=\"header\"></slot>\n </header>\n <div id=\"body\"\n part=\"body\"\n class=\"${classMap({ empty: !this.querySelector(':not([slot])') })}\">\n <slot></slot>\n </div>\n <footer id=\"footer\"\n part=\"footer\"\n class=\"${classMap({ empty: !this.slots.hasSlotted('footer') })}\">\n <slot name=\"footer\"></slot>\n </footer>\n </article>\n `;\n }\n}\n"]}
1
+ {"version":3,"file":"BaseCard.js","sourceRoot":"","sources":["BaseCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,qDAAqD,CAAC;AAErF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;;;AAIvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAsB,QAAS,SAAQ,UAAU;IAAjD;;QAGY,UAAK,GAAG,IAAI,cAAc,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAuBvE,CAAC;IArBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;yBAIU,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;;sBAKxD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE,CAAC;;;;;yBAKrD,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC;;;;KAIzE,CAAC;IACJ,CAAC;;AAxBe,eAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;SADb,QAAQ","sourcesContent":["import { LitElement, html } from 'lit';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport style from './BaseCard.css';\n\n/**\n * This element creates a header, body, and footer region in which to place\n * content or other components.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n * If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n * An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n * Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n */\nexport abstract class BaseCard extends LitElement {\n static readonly styles = [style];\n\n protected slots = new SlotController(this, 'header', null, 'footer');\n\n render() {\n return html`\n <article>\n <header id=\"header\"\n part=\"header\"\n class=\"${classMap({ empty: !this.slots.hasSlotted('header') })}\">\n <slot name=\"header\"></slot>\n </header>\n <div id=\"body\"\n part=\"body\"\n class=\"${classMap({ empty: !this.querySelector(':not([slot])') })}\">\n <slot></slot>\n </div>\n <footer id=\"footer\"\n part=\"footer\"\n class=\"${classMap({ empty: !this.slots.hasSlotted('footer') })}\">\n <slot name=\"footer\"></slot>\n </footer>\n </article>\n `;\n }\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  import { BaseCard } from './BaseCard.js';
2
2
  /**
3
- * A card is a square or rectangular container that can contain any kind of content.
3
+ * A **card** is a square or rectangular container that can contain any kind of content.
4
4
  * Cards symbolize units of information, and each one acts as an entry point for
5
5
  * users to access more details. For example, in dashboards and catalog views, cards
6
6
  * function as a preview of a detailed page. Cards may also be used in data displays
@@ -5,7 +5,7 @@ import { css } from "lit";
5
5
  const style = css `:host{background-color:var(--pf-c-card--BackgroundColor,var(--pf-global--BackgroundColor--100,#fff));box-shadow:var(--pf-c-card--BoxShadow,var(--pf-global--BoxShadow--sm,0 .0625rem .125rem 0 rgba(3,3,3,.12),0 0 .125rem 0 rgba(3,3,3,.06)))}:host([size=compact]){--_pf-c-card__body--FontSize:var(--pf-c-card--size-compact__body--FontSize, var(--pf-global--FontSize--sm, .875rem));--_pf-c-card__footer--FontSize:var(--pf-c-card--size-compact__footer--FontSize, var(--pf-global--spacer--md, 1rem));--_pf-c-card--first-child--PaddingTop:var(--pf-c-card--size-compact--first-child--PaddingTop, var(--pf-global--spacer--lg, 1.5rem));--_pf-c-card--child--PaddingRight:var(--pf-c-card--size-compact--child--PaddingRight, var(--pf-global--spacer--md, 1rem));--_pf-c-card--child--PaddingBottom:var(--pf-c-card--size-compact--child--PaddingBottom, var(--pf-global--spacer--md, 1rem));--_pf-c-card--child--PaddingLeft:var(--pf-c-card--size-compact--child--PaddingLeft, var(--pf-global--spacer--md, 1rem));--_pf-c-card__title--not--last-child--PaddingBottom:var(--pf-c-card--size-compact__title--not--last-child--PaddingBottom, var(--pf-global--spacer--sm, .5rem))}:host([size=large]){--pf-c-card__title--FontSize:var(--pf-c-card--size-large__title--FontSize, var(--pf-global--FontSize--xl, 1.25rem));--_pf-c-card--first-child--PaddingTop:var(--pf-c-card--size-large--first-child--PaddingTop, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingRight:var(--pf-c-card--size-large--child--PaddingRight, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingBottom:var(--pf-c-card--size-large--child--PaddingBottom, var(--pf-global--spacer--xl, 2rem));--_pf-c-card--child--PaddingLeft:var(--pf-c-card--size-large--child--PaddingLeft, var(--pf-global--spacer--xl, 2rem));--_pf-c-card__title--not--last-child--PaddingBottom:var(--pf-c-card--size-large__title--not--last-child--PaddingBottom, var(--pf-global--spacer--lg, 1.5rem))}:host([flat]){--pf-c-card--BoxShadow:none;border:var(--pf-c-card--m-flat--BorderWidth,var(--pf-global--BorderWidth--sm,1px)) solid var(--pf-c-card--m-flat--BorderColor,var(--pf-global--BorderColor--100,#d2d2d2))}:host([plain]){--pf-c-card--BoxShadow:var(--pf-c-card--m-plain--BoxShadow, none);--pf-c-card--BackgroundColor:var(--pf-c-card--m-plain--BackgroundColor, transparent)}:host([rounded]){border-radius:var(--pf-c-card--m-rounded--BorderRadius,var(--pf-global--BorderRadius--sm,3px))}:host([full-height]){height:var(--pf-c-card--m-full-height--Height,100%);--_pf-c-card__body--FullHeight--Flex:1 1 auto}[part=body],[part=footer],[part=header]{padding-inline-start:var(--_pf-c-card--child--PaddingLeft,var(--pf-global--spacer--lg,1.5rem));padding-inline-end:var(--_pf-c-card--child--PaddingRight,var(--pf-global--spacer--lg,1.5rem));padding-block-end:var(--_pf-c-card--child--PaddingBottom,var(--pf-global--spacer--lg,1.5rem))}[part=body]{font-size:var(--_pf-c-card__body--FontSize, var(--pf-global--FontSize--md, 1rem));flex:var(--_pf-c-card__body--FullHeight--Flex,initial)}header{padding-block-start:var(--_pf-c-card--first-child--PaddingTop,var(--pf-global--spacer--lg,1.5rem));padding-block-end:var(--_pf-c-card__title--not--last-child--PaddingBottom,var(--pf-global--spacer--md,1rem))}header ::slotted(*){font-family:var(--pf-c-card__title--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, "RedHatDisplayUpdated", helvetica, arial, sans-serif));font-size:var(--pf-c-card__title--FontSize, var(--pf-global--FontSize--md, 1rem));font-weight:var(--pf-c-card__title--FontWeight,var(--pf-global--FontWeight--bold,700));margin-block:0}[part=footer]{font-size:var(--_pf-c-card__footer--FontSize, var(--pf-global--FontSize--md, 1rem));margin-block-start:auto}`;
6
6
  import { BaseCard } from './BaseCard.js';
7
7
  /**
8
- * A card is a square or rectangular container that can contain any kind of content.
8
+ * A **card** is a square or rectangular container that can contain any kind of content.
9
9
  * Cards symbolize units of information, and each one acts as an entry point for
10
10
  * users to access more details. For example, in dashboards and catalog views, cards
11
11
  * function as a preview of a detailed page. Cards may also be used in data displays
@@ -1 +1 @@
1
- {"version":3,"file":"pf-card.js","sourceRoot":"","sources":["pf-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQ,QAAQ;IAA7B;;QAWL;;UAEE;QAC0C,YAAO,GAAG,KAAK,CAAC;QAE5D;;SAEC;QACqE,eAAU,GAAG,KAAK,CAAC;QAEzF;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;IAC5D,CAAC;;AAxBiB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;AAQxB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAA4B;AAKZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAiB;AAKU;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CAAoB;AAK7C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAxB/C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAyBlB;SAzBY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-card.css';\nimport { BaseCard } from './BaseCard.js';\n\n/**\n * A card is a square or rectangular container that can contain any kind of content.\n * Cards symbolize units of information, and each one acts as an entry point for\n * users to access more details. For example, in dashboards and catalog views, cards\n * function as a preview of a detailed page. Cards may also be used in data displays\n * like card views, or for positioning content on a page.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n * If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n * An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n * Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n *\n *\n * @cssproperty {<color>} --pf-c-card--BackgroundColor {@default `#ffffff`}\n * @cssproperty {<color>} --pf-c-card--BoxShadow {@default `0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssproperty {<color>} --pf-c-card--size-compact__body--FontSize {@default `.875rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__footer--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--first-child--PaddingTop {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingRight {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingBottom {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingLeft {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__title--not--last-child--PaddingBottom {@default `.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--FontSize {@default `1.25rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--first-child--PaddingTop {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingRight {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingBottom {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingLeft {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--not--last-child--PaddingBottom {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--m-flat--BorderWidth {@default `1px solid #d2d2d2`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BoxShadow {@default `none`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BackgroundColor {@default `transparent`}\n * @cssproperty {<color>} --pf-c-card--m-rounded--BorderRadius {@default `3px`}\n * @cssproperty {<color>} --pf-c-card--m-full-height--Height {@default `100%`}\n * @cssproperty {<color>} --pf-c-card__title--FontFamily {@default `\"RedHatDisplayUpdated\", helvetica, arial, sans-serif`}\n * @cssproperty {<color>} --pf-c-card__title--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card__title--FontWeight {@default `700`}\n */\n@customElement('pf-card')\nexport class PfCard extends BaseCard {\n static readonly styles = [...BaseCard.styles, style];\n\n /**\n * Optionally provide a size for the card and the card contents.\n * The default is set to `undefined` and provides default styles.\n * Compact provides styles which decreases the padding between the sections.\n * Large provides styles which increases the padding between the sections and the font size for the title, header, and footer.\n */\n @property({ reflect: true }) size?: 'compact' | 'large';\n\n /**\n * Optionally apply a border radius for the drop shadow and/or border.\n */\n @property({ type: Boolean, reflect: true }) rounded = false;\n\n /**\n * Optionally allow the card to take up the full height of the parent element.\n */\n @property({ type: Boolean, reflect: true, attribute: 'full-height' }) fullHeight = false;\n\n /**\n * Optionally remove the border on the card container.\n */\n @property({ type: Boolean, reflect: true }) plain = false;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-card': PfCard;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-card.js","sourceRoot":"","sources":["pf-card.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;;;AAGtD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAWE;;UAEE;QAC0C,YAAO,GAAG,KAAK,CAAC;QAE5D;;SAEC;QACqE,eAAU,GAAG,KAAK,CAAC;QAEzF;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;IAC5D,CAAC;;AAxBiB,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,AAA9B,CAA+B;AAQxB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAA4B;AAKZ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAiB;AAKU;IAArE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;0CAAoB;AAK7C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qCAAe;AAxB/C,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAyBlB;SAzBY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport style from './pf-card.css';\nimport { BaseCard } from './BaseCard.js';\n\n/**\n * A **card** is a square or rectangular container that can contain any kind of content.\n * Cards symbolize units of information, and each one acts as an entry point for\n * users to access more details. For example, in dashboards and catalog views, cards\n * function as a preview of a detailed page. Cards may also be used in data displays\n * like card views, or for positioning content on a page.\n *\n * @summary Gives a preview of information in a small layout\n *\n * @slot header\n * If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).\n * An icon, svg, or use of the icon component are also valid in this region.\n * @slot - Any content that is not designated for the header or footer slot, will go to this slot.\n * @slot footer\n * Use this slot for anything that you want to be stuck to the base of the card.\n *\n * @csspart header - The container for *header* content\n * @csspart body - The container for *body* content\n * @csspart footer - The container for *footer* content\n *\n *\n * @cssproperty {<color>} --pf-c-card--BackgroundColor {@default `#ffffff`}\n * @cssproperty {<color>} --pf-c-card--BoxShadow {@default `0 0.0625rem 0.125rem 0 rgba(3, 3, 3, 0.12), 0 0 0.125rem 0 rgba(3, 3, 3, 0.06)`}\n * @cssproperty {<color>} --pf-c-card--size-compact__body--FontSize {@default `.875rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__footer--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--first-child--PaddingTop {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingRight {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingBottom {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact--child--PaddingLeft {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card--size-compact__title--not--last-child--PaddingBottom {@default `.5rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--FontSize {@default `1.25rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--first-child--PaddingTop {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingRight {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingBottom {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large--child--PaddingLeft {@default `2rem`}\n * @cssproperty {<color>} --pf-c-card--size-large__title--not--last-child--PaddingBottom {@default `1.5rem`}\n * @cssproperty {<color>} --pf-c-card--m-flat--BorderWidth {@default `1px solid #d2d2d2`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BoxShadow {@default `none`}\n * @cssproperty {<color>} --pf-c-card--m-plain--BackgroundColor {@default `transparent`}\n * @cssproperty {<color>} --pf-c-card--m-rounded--BorderRadius {@default `3px`}\n * @cssproperty {<color>} --pf-c-card--m-full-height--Height {@default `100%`}\n * @cssproperty {<color>} --pf-c-card__title--FontFamily {@default `\"RedHatDisplayUpdated\", helvetica, arial, sans-serif`}\n * @cssproperty {<color>} --pf-c-card__title--FontSize {@default `1rem`}\n * @cssproperty {<color>} --pf-c-card__title--FontWeight {@default `700`}\n */\n@customElement('pf-card')\nexport class PfCard extends BaseCard {\n static readonly styles = [...BaseCard.styles, style];\n\n /**\n * Optionally provide a size for the card and the card contents.\n * The default is set to `undefined` and provides default styles.\n * Compact provides styles which decreases the padding between the sections.\n * Large provides styles which increases the padding between the sections and the font size for the title, header, and footer.\n */\n @property({ reflect: true }) size?: 'compact' | 'large';\n\n /**\n * Optionally apply a border radius for the drop shadow and/or border.\n */\n @property({ type: Boolean, reflect: true }) rounded = false;\n\n /**\n * Optionally allow the card to take up the full height of the parent element.\n */\n @property({ type: Boolean, reflect: true, attribute: 'full-height' }) fullHeight = false;\n\n /**\n * Optionally remove the border on the card container.\n */\n @property({ type: Boolean, reflect: true }) plain = false;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-card': PfCard;\n }\n}\n"]}
@@ -12,7 +12,7 @@ export class ClipboardCopyCopiedEvent extends ComposedEvent {
12
12
  * Clipboard Copy
13
13
  * @slot - Place element content here
14
14
  */
15
- export class BaseClipboardCopy extends LitElement {
15
+ class BaseClipboardCopy extends LitElement {
16
16
  /**
17
17
  * Copy the current value to the clipboard.
18
18
  */
@@ -22,4 +22,5 @@ export class BaseClipboardCopy extends LitElement {
22
22
  }
23
23
  }
24
24
  BaseClipboardCopy.styles = [styles];
25
+ export { BaseClipboardCopy };
25
26
  //# sourceMappingURL=BaseClipboardCopy.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"BaseClipboardCopy.js","sourceRoot":"","sources":["BaseClipboardCopy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAGrD,MAAM,OAAO,wBAAyB,SAAQ,aAAa;IACzD,YACS,IAAY;QAEnB,KAAK,CAAC,MAAM,CAAC,CAAC;QAFP,SAAI,GAAJ,IAAI,CAAQ;IAGrB,CAAC;CACF;AAED;;;GAGG;AACH,MAAM,OAAgB,iBAAkB,SAAQ,UAAU;IAKxD;;OAEG;IACH,KAAK,CAAC,IAAI;QACR,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,CAAC,IAAI,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;;AAVe,wBAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { LitElement } from 'lit';\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport styles from './BaseClipboardCopy.css';\n\nexport class ClipboardCopyCopiedEvent extends ComposedEvent {\n constructor(\n public text: string\n ) {\n super('copy');\n }\n}\n\n/**\n * Clipboard Copy\n * @slot - Place element content here\n */\nexport abstract class BaseClipboardCopy extends LitElement {\n static readonly styles = [styles];\n\n abstract value: string;\n\n /**\n * Copy the current value to the clipboard.\n */\n async copy() {\n await navigator.clipboard.writeText(this.value);\n this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value));\n }\n}\n"]}
1
+ {"version":3,"file":"BaseClipboardCopy.js","sourceRoot":"","sources":["BaseClipboardCopy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAGrD,MAAM,OAAO,wBAAyB,SAAQ,aAAa;IACzD,YACS,IAAY;QAEnB,KAAK,CAAC,MAAM,CAAC,CAAC;QAFP,SAAI,GAAJ,IAAI,CAAQ;IAGrB,CAAC;CACF;AAED;;;GAGG;AACH,MAAsB,iBAAkB,SAAQ,UAAU;IAKxD;;OAEG;IACH,KAAK,CAAC,IAAI;QACR,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,CAAC,IAAI,wBAAwB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/D,CAAC;;AAVe,wBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;SADd,iBAAiB","sourcesContent":["import { LitElement } from 'lit';\nimport { ComposedEvent } from '@patternfly/pfe-core';\nimport styles from './BaseClipboardCopy.css';\n\nexport class ClipboardCopyCopiedEvent extends ComposedEvent {\n constructor(\n public text: string\n ) {\n super('copy');\n }\n}\n\n/**\n * Clipboard Copy\n * @slot - Place element content here\n */\nexport abstract class BaseClipboardCopy extends LitElement {\n static readonly styles = [styles];\n\n abstract value: string;\n\n /**\n * Copy the current value to the clipboard.\n */\n async copy() {\n await navigator.clipboard.writeText(this.value);\n this.dispatchEvent(new ClipboardCopyCopiedEvent(this.value));\n }\n}\n"]}
@@ -3,7 +3,7 @@ import '@patternfly/elements/pf-button/pf-button.js';
3
3
  import '@patternfly/elements/pf-icon/pf-icon.js';
4
4
  import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
5
5
  /**
6
- * The clipboard copy component allows users to quickly and easily copy content to their clipboard.
6
+ * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.
7
7
  *
8
8
  * @slot - Place content to copy here, or use the `value` attribute
9
9
  * @slot actions - Place additional action buttons here
@@ -13,7 +13,7 @@ import '@patternfly/elements/pf-icon/pf-icon.js';
13
13
  import '@patternfly/elements/pf-tooltip/pf-tooltip.js';
14
14
  const sleep = (ms) => new Promise(r => setTimeout(r, ms));
15
15
  /**
16
- * The clipboard copy component allows users to quickly and easily copy content to their clipboard.
16
+ * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.
17
17
  *
18
18
  * @slot - Place content to copy here, or use the `value` attribute
19
19
  * @slot actions - Place additional action buttons here
@@ -108,17 +108,23 @@ let PfClipboardCopy = class PfClipboardCopy extends BaseClipboardCopy {
108
108
  this.requestUpdate();
109
109
  }
110
110
  };
111
- _PfClipboardCopy_copied = new WeakMap(), _PfClipboardCopy_mo = new WeakMap(), _PfClipboardCopy_instances = new WeakSet(), _PfClipboardCopy_onClick = function _PfClipboardCopy_onClick() {
111
+ _PfClipboardCopy_copied = new WeakMap();
112
+ _PfClipboardCopy_mo = new WeakMap();
113
+ _PfClipboardCopy_instances = new WeakSet();
114
+ _PfClipboardCopy_onClick = function _PfClipboardCopy_onClick() {
112
115
  this.expanded = !this.expanded;
113
- }, _PfClipboardCopy_onChange = function _PfClipboardCopy_onChange(e) {
116
+ };
117
+ _PfClipboardCopy_onChange = function _PfClipboardCopy_onChange(e) {
114
118
  const { value } = e.target || HTMLTextAreaElement;
115
119
  this.value = value;
116
- }, _PfClipboardCopy_onMutation = function _PfClipboardCopy_onMutation() {
120
+ };
121
+ _PfClipboardCopy_onMutation = function _PfClipboardCopy_onMutation() {
117
122
  if (this.childNodes.length > 0) {
118
123
  this.value = this.getAttribute('value') ?? __classPrivateFieldGet(this, _PfClipboardCopy_instances, "m", _PfClipboardCopy_dedent).call(this, Array.from(this.childNodes, child => (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')
119
124
  .join(''));
120
125
  }
121
- }, _PfClipboardCopy_dedent = function _PfClipboardCopy_dedent(str) {
126
+ };
127
+ _PfClipboardCopy_dedent = function _PfClipboardCopy_dedent(str) {
122
128
  const stripped = str.replace(/^\n/, '');
123
129
  const match = stripped.match(/^\s+/);
124
130
  return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;
@@ -1 +1 @@
1
- {"version":3,"file":"pf-clipboard-copy.js","sourceRoot":"","sources":["pf-clipboard-copy.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { BaseClipboardCopy } from './BaseClipboardCopy.js';\n\nimport styles from './pf-clipboard-copy.css';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-tooltip/pf-tooltip.js';\n\nconst sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));\n\n/**\n * The clipboard copy component allows users to quickly and easily copy content to their clipboard.\n *\n * @slot - Place content to copy here, or use the `value` attribute\n * @slot actions - Place additional action buttons here\n */\n@customElement('pf-clipboard-copy')\nexport class PfClipboardCopy extends BaseClipboardCopy {\n static readonly styles = [...BaseClipboardCopy.styles, styles];\n\n static shadowRootOptions: ShadowRootInit = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true };\n\n @property({ attribute: 'click-tip' }) clickTip = 'Copied';\n\n @property({ attribute: 'hover-tip' }) hoverTip = 'Copy';\n\n @property({ attribute: 'text-label' }) textAriaLabel = 'Copyable input';\n\n @property({ attribute: 'toggle-label' }) toggleAriaLabel = 'Show content';\n\n @property({ type: Number, attribute: 'entry-delay' }) entryDelay = 300;\n\n @property({ type: Number, attribute: 'exit-delay' }) exitDelay = 1500;\n\n @property({ type: Boolean, reflect: true }) block = false;\n\n @property({ type: Boolean, reflect: true }) code = false;\n\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /**\n * Implies not `inline`.\n */\n @property({ type: Boolean, reflect: true }) expandable = false;\n\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /**\n * Implies not expandable. Overrules `expandable`.\n */\n @property({ type: Boolean, reflect: true }) inline = false;\n\n @property({ type: Boolean, reflect: true }) compact = false;\n\n @property() override value = '';\n\n #copied = false;\n\n #mo = new MutationObserver(() => this.#onMutation());\n\n connectedCallback() {\n super.connectedCallback();\n this.#mo.observe(this, { characterData: true });\n this.#onMutation();\n }\n\n /**\n * @todo fix the collapsed whitespace between the end of the \"inline-compact\" variant and the text node.\n * This demonstrates the collapsed whitespace issue.\n * The extra space between the closing slot tag and the closing template literal results in a collapsed whitespace.\n */\n render() {\n const { expanded, expandable, inline, compact, code, block, readonly } = this;\n return html`\n <div class=\"container ${classMap({ code, expanded, inline, compact, block, })}\">\n <div id=\"input-group\">\n <div id=\"wrapper\">\n <pf-button id=\"expand-button\"\n plain\n variant=\"control\"\n label=\"EXPAND\"\n ?inert=\"${!expandable}\"\n @click=\"${this.#onClick}\">\n <pf-icon icon=\"chevron-right\"></pf-icon>\n </pf-button>\n </div>\n <span ?hidden=\"${!(inline || compact)}\">${this.value}</span>\n <input\n ?hidden=\"${inline || compact}\"\n ?disabled=\"${expanded || readonly}\"\n .value=\"${this.value}\"\n @input=\"${this.#onChange}\"\n aria-label=\"${this.textAriaLabel}\">\n <pf-tooltip>\n <pf-button id=\"copy-button\"\n plain\n variant=\"${ifDefined(!(inline || compact) ? 'control' : undefined)}\"\n label=\"${this.hoverTip}\"\n size=\"lg\"\n @click=\"${this.copy}\">\n <pf-icon icon=\"copy\"></pf-icon>\n </pf-button>\n <span slot=\"content\">${this.#copied ? this.clickTip : this.hoverTip}</span>\n </pf-tooltip>\n <slot name=\"actions\"></slot>\n </div>\n <textarea .value=\"${this.value}\"\n .disabled=\"${this.readonly}\"\n ?hidden=\"${!(expandable && expanded)}\"\n @input=\"${this.#onChange}\">\n </textarea>\n </div>\n `;\n }\n\n #onClick() {\n this.expanded = !this.expanded;\n }\n\n #onChange(e: Event) {\n const { value } = e.target as HTMLInputElement || HTMLTextAreaElement;\n this.value = value;\n }\n\n #onMutation() {\n if (this.childNodes.length > 0) {\n this.value = this.getAttribute('value') ?? this.#dedent(Array.from(this.childNodes, child =>\n (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')\n .join(''));\n }\n }\n\n #dedent(str: string): string {\n const stripped = str.replace(/^\\n/, '');\n const match = stripped.match(/^\\s+/);\n return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n }\n\n override async copy() {\n await super.copy();\n await sleep(this.entryDelay);\n this.#copied = true;\n this.requestUpdate();\n await sleep(this.exitDelay);\n this.#copied = false;\n this.requestUpdate();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-clipboard-copy': PfClipboardCopy;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-clipboard-copy.js","sourceRoot":"","sources":["pf-clipboard-copy.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { BaseClipboardCopy } from './BaseClipboardCopy.js';\n\nimport styles from './pf-clipboard-copy.css';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\nimport '@patternfly/elements/pf-tooltip/pf-tooltip.js';\n\nconst sleep = (ms?: number) => new Promise(r => setTimeout(r, ms));\n\n/**\n * The **clipboard copy** component allows users to quickly and easily copy content to their clipboard.\n *\n * @slot - Place content to copy here, or use the `value` attribute\n * @slot actions - Place additional action buttons here\n */\n@customElement('pf-clipboard-copy')\nexport class PfClipboardCopy extends BaseClipboardCopy {\n static readonly styles = [...BaseClipboardCopy.styles, styles];\n\n static shadowRootOptions: ShadowRootInit = { ...BaseClipboardCopy.shadowRootOptions, delegatesFocus: true };\n\n @property({ attribute: 'click-tip' }) clickTip = 'Copied';\n\n @property({ attribute: 'hover-tip' }) hoverTip = 'Copy';\n\n @property({ attribute: 'text-label' }) textAriaLabel = 'Copyable input';\n\n @property({ attribute: 'toggle-label' }) toggleAriaLabel = 'Show content';\n\n @property({ type: Number, attribute: 'entry-delay' }) entryDelay = 300;\n\n @property({ type: Number, attribute: 'exit-delay' }) exitDelay = 1500;\n\n @property({ type: Boolean, reflect: true }) block = false;\n\n @property({ type: Boolean, reflect: true }) code = false;\n\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n /**\n * Implies not `inline`.\n */\n @property({ type: Boolean, reflect: true }) expandable = false;\n\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /**\n * Implies not expandable. Overrules `expandable`.\n */\n @property({ type: Boolean, reflect: true }) inline = false;\n\n @property({ type: Boolean, reflect: true }) compact = false;\n\n @property() override value = '';\n\n #copied = false;\n\n #mo = new MutationObserver(() => this.#onMutation());\n\n connectedCallback() {\n super.connectedCallback();\n this.#mo.observe(this, { characterData: true });\n this.#onMutation();\n }\n\n /**\n * @todo fix the collapsed whitespace between the end of the \"inline-compact\" variant and the text node.\n * This demonstrates the collapsed whitespace issue.\n * The extra space between the closing slot tag and the closing template literal results in a collapsed whitespace.\n */\n render() {\n const { expanded, expandable, inline, compact, code, block, readonly } = this;\n return html`\n <div class=\"container ${classMap({ code, expanded, inline, compact, block, })}\">\n <div id=\"input-group\">\n <div id=\"wrapper\">\n <pf-button id=\"expand-button\"\n plain\n variant=\"control\"\n label=\"EXPAND\"\n ?inert=\"${!expandable}\"\n @click=\"${this.#onClick}\">\n <pf-icon icon=\"chevron-right\"></pf-icon>\n </pf-button>\n </div>\n <span ?hidden=\"${!(inline || compact)}\">${this.value}</span>\n <input\n ?hidden=\"${inline || compact}\"\n ?disabled=\"${expanded || readonly}\"\n .value=\"${this.value}\"\n @input=\"${this.#onChange}\"\n aria-label=\"${this.textAriaLabel}\">\n <pf-tooltip>\n <pf-button id=\"copy-button\"\n plain\n variant=\"${ifDefined(!(inline || compact) ? 'control' : undefined)}\"\n label=\"${this.hoverTip}\"\n size=\"lg\"\n @click=\"${this.copy}\">\n <pf-icon icon=\"copy\"></pf-icon>\n </pf-button>\n <span slot=\"content\">${this.#copied ? this.clickTip : this.hoverTip}</span>\n </pf-tooltip>\n <slot name=\"actions\"></slot>\n </div>\n <textarea .value=\"${this.value}\"\n .disabled=\"${this.readonly}\"\n ?hidden=\"${!(expandable && expanded)}\"\n @input=\"${this.#onChange}\">\n </textarea>\n </div>\n `;\n }\n\n #onClick() {\n this.expanded = !this.expanded;\n }\n\n #onChange(e: Event) {\n const { value } = e.target as HTMLInputElement || HTMLTextAreaElement;\n this.value = value;\n }\n\n #onMutation() {\n if (this.childNodes.length > 0) {\n this.value = this.getAttribute('value') ?? this.#dedent(Array.from(this.childNodes, child =>\n (child instanceof Element || child instanceof Text) ? (child.textContent ?? '') : '')\n .join(''));\n }\n }\n\n #dedent(str: string): string {\n const stripped = str.replace(/^\\n/, '');\n const match = stripped.match(/^\\s+/);\n return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n }\n\n override async copy() {\n await super.copy();\n await sleep(this.entryDelay);\n this.#copied = true;\n this.requestUpdate();\n await sleep(this.exitDelay);\n this.#copied = false;\n this.requestUpdate();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-clipboard-copy': PfClipboardCopy;\n }\n}\n"]}
@@ -1,7 +1,7 @@
1
1
  import { LitElement } from 'lit';
2
2
  import { css } from "lit";
3
3
  const styles = css `:host{display:block}[hidden]{display:none!important}`;
4
- export class BaseCodeBlock extends LitElement {
4
+ class BaseCodeBlock extends LitElement {
5
5
  get content() {
6
6
  const script = this.querySelector('script[type]');
7
7
  if (script?.type !== 'text/javascript-sample' &&
@@ -19,4 +19,5 @@ export class BaseCodeBlock extends LitElement {
19
19
  }
20
20
  }
21
21
  BaseCodeBlock.styles = [styles];
22
+ export { BaseCodeBlock };
22
23
  //# sourceMappingURL=BaseCodeBlock.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"BaseCodeBlock.js","sourceRoot":"","sources":["BaseCodeBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;AAIjC,MAAM,OAAgB,aAAc,SAAQ,UAAU;IAKpD,IAAc,OAAO;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAoB,cAAc,CAAC,CAAC;QACrE,IACE,MAAM,EAAE,IAAI,KAAK,wBAAwB;YACzC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE;YACnD,OAAO,EAAE,CAAC;SACX;aAAM;YACL,OAAO,MAAM,EAAE,WAAW,IAAI,EAAE,CAAC;SAClC;IACH,CAAC;IAES,MAAM,CAAC,GAAW;QAC1B,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9E,CAAC;;AAnBe,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement } from 'lit';\n\nimport styles from './BaseCodeBlock.css';\n\nexport abstract class BaseCodeBlock extends LitElement {\n static readonly styles = [styles];\n\n abstract render(): TemplateResult;\n\n protected get content() {\n const script = this.querySelector<HTMLScriptElement>('script[type]');\n if (\n script?.type !== 'text/javascript-sample' &&\n !!script?.type.match(/(j(ava)?|ecma|live)script/)) {\n return '';\n } else {\n return script?.textContent ?? '';\n }\n }\n\n protected dedent(str: string): string {\n const stripped = str.replace(/^\\n/, '');\n const match = stripped.match(/^\\s+/);\n return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n }\n}\n"]}
1
+ {"version":3,"file":"BaseCodeBlock.js","sourceRoot":"","sources":["BaseCodeBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;;;AAIjC,MAAsB,aAAc,SAAQ,UAAU;IAKpD,IAAc,OAAO;QACnB,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,CAAoB,cAAc,CAAC,CAAC;QACrE,IACE,MAAM,EAAE,IAAI,KAAK,wBAAwB;YACzC,CAAC,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE;YACnD,OAAO,EAAE,CAAC;SACX;aAAM;YACL,OAAO,MAAM,EAAE,WAAW,IAAI,EAAE,CAAC;SAClC;IACH,CAAC;IAES,MAAM,CAAC,GAAW;QAC1B,MAAM,QAAQ,GAAG,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACrC,OAAO,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAC9E,CAAC;;AAnBe,oBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;SADd,aAAa","sourcesContent":["import type { TemplateResult } from 'lit';\n\nimport { LitElement } from 'lit';\n\nimport styles from './BaseCodeBlock.css';\n\nexport abstract class BaseCodeBlock extends LitElement {\n static readonly styles = [styles];\n\n abstract render(): TemplateResult;\n\n protected get content() {\n const script = this.querySelector<HTMLScriptElement>('script[type]');\n if (\n script?.type !== 'text/javascript-sample' &&\n !!script?.type.match(/(j(ava)?|ecma|live)script/)) {\n return '';\n } else {\n return script?.textContent ?? '';\n }\n }\n\n protected dedent(str: string): string {\n const stripped = str.replace(/^\\n/, '');\n const match = stripped.match(/^\\s+/);\n return match ? stripped.replace(new RegExp(`^${match[0]}`, 'gm'), '') : str;\n }\n}\n"]}
@@ -1,6 +1,6 @@
1
1
  import { BaseCodeBlock } from './BaseCodeBlock.js';
2
2
  /**
3
- * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
3
+ * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
4
4
  *
5
5
  * @slot code
6
6
  * The slot to put the code in
@@ -8,7 +8,7 @@ import { BaseCodeBlock } from './BaseCodeBlock.js';
8
8
  import { css } from "lit";
9
9
  const styles = css `:host{background-color:var(--pf-c-code-block--BackgroundColor,#f0f0f0);font-size:var(--pf-c-code-block__pre--FontSize, .875rem);font-family:var(--pf-c-code-block__pre--FontFamily, "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace)}#container{padding-top:var(--pf-c-code-block__content--PaddingTop,1rem);padding-right:var(--pf-c-code-block__content--PaddingRight,1rem);padding-bottom:var(--pf-c-code-block__content--PaddingBottom,1rem);padding-left:var(--pf-c-code-block__content--PaddingLeft,1rem)}#header{border-bottom:var(--pf-c-code-block__header--BorderBottomWidth,1px) solid var(--pf-c-code-block__header--BorderBottomColor,#d2d2d2)}#container{margin:0}pre{margin:0}slot[name=actions]{display:flex;justify-content:end}#expanded{display:inline}button{display:flex;background:0 0;border:none;padding:6px 16px 6px 0;color:#06c;cursor:pointer;font-size:16px}button svg{color:#151515;margin-right:12px;transition:.2s ease-in 0s}.expanded button svg{transform:rotate(-90deg)}`;
10
10
  /**
11
- * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
11
+ * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
12
12
  *
13
13
  * @slot code
14
14
  * The slot to put the code in
@@ -57,9 +57,11 @@ let PfCodeBlock = class PfCodeBlock extends BaseCodeBlock {
57
57
  `;
58
58
  }
59
59
  };
60
- _PfCodeBlock_instances = new WeakSet(), _PfCodeBlock_toggle = function _PfCodeBlock_toggle() {
60
+ _PfCodeBlock_instances = new WeakSet();
61
+ _PfCodeBlock_toggle = function _PfCodeBlock_toggle() {
61
62
  this.expanded = !this.expanded;
62
- }, _PfCodeBlock_expandedContent_get = function _PfCodeBlock_expandedContent_get() {
63
+ };
64
+ _PfCodeBlock_expandedContent_get = function _PfCodeBlock_expandedContent_get() {
63
65
  return this.querySelector('script[data-expand]')?.textContent ?? '';
64
66
  };
65
67
  PfCodeBlock.styles = [...BaseCodeBlock.styles, styles];
@@ -1 +1 @@
1
- {"version":3,"file":"pf-code-block.js","sourceRoot":"","sources":["pf-code-block.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;;;AAGnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,aAAa;IAAvC;;;QAGuC,aAAQ,GAAG,KAAK,CAAC;IA+B/D,CAAC;IArBU,MAAM;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;;mCAMoB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;kCACvB,IAAI,CAAC,OAAO;qBACzB,CAAC,QAAQ,KAAK,uBAAA,IAAI,gEAAiB;2BAC7B,CAAC,uBAAA,IAAI,gEAAiB;yBACxB,uBAAA,IAAI,mDAAQ;gCACL,IAAI,CAAC,QAAQ;;;YAGjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;;;IA3BC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;IAGC,OAAO,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;AACtE,CAAC;AAVe,kBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAHlD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAkCvB;SAlCY,WAAW","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { BaseCodeBlock } from './BaseCodeBlock.js';\nimport styles from './pf-code-block.css';\n\n/**\n * A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.\n *\n * @slot code\n * The slot to put the code in\n * @slot expandable-code\n * The slot to put the code in that should be revealed when the \"Show more\" button is\n * clicked to expand the code-block\n * @slot actions\n * Contains the actions for the code-block. For example, copy to clipboard.\n * @attr {boolean} expanded {@default `false`}\n * Indicates if the code-block has been expanded\n * @cssprop {<color>} --pf-c-code-block--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-code-block__header--BorderBottomWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-code-block__header--BorderBottomColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingTop {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingRight {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingBottom {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__pre--FontSize {@default `0.875rem`}\n * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace`}\n */\n\n@customElement('pf-code-block')\nexport class PfCodeBlock extends BaseCodeBlock {\n static readonly styles = [...BaseCodeBlock.styles, styles];\n\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n #toggle() {\n this.expanded = !this.expanded;\n }\n\n get #expandedContent(): string {\n return this.querySelector('script[data-expand]')?.textContent ?? '';\n }\n\n override render() {\n const { expanded } = this;\n return html`\n <div id=\"header\">\n <div id=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n <div id=\"container\" class=\"${classMap({ expanded })}\">\n <pre><code id=\"content\">${this.content}</code><code id=\"code-block-expand\"\n ?hidden=\"${!expanded}\">${this.#expandedContent}</code></pre>\n <button ?hidden=\"${!this.#expandedContent}\"\n @click=${this.#toggle}\n aria-expanded=${this.expanded}\n aria-controls=\"code-block-expand\">\n <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 256 512\" aria-hidden=\"true\" role=\"img\" style=\"vertical-align: -0.125em;\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"></path></svg>\n ${!this.expanded ? 'Show more' : 'Show less'}\n </button>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-code-block': PfCodeBlock;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-code-block.js","sourceRoot":"","sources":["pf-code-block.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;;;AAGnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,aAAa;IAA9C;;;QAG8C,aAAQ,GAAG,KAAK,CAAC;IA+B/D,CAAC;IArBU,MAAM;QACb,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC;QAC1B,OAAO,IAAI,CAAA;;;;;;mCAMoB,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;kCACvB,IAAI,CAAC,OAAO;qBACzB,CAAC,QAAQ,KAAK,uBAAA,IAAI,gEAAiB;2BAC7B,CAAC,uBAAA,IAAI,gEAAiB;yBACxB,uBAAA,IAAI,mDAAQ;gCACL,IAAI,CAAC,QAAQ;;;YAGjC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;;;KAGjD,CAAC;IACJ,CAAC;;;;IA3BC,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;AACjC,CAAC;;IAGC,OAAO,IAAI,CAAC,aAAa,CAAC,qBAAqB,CAAC,EAAE,WAAW,IAAI,EAAE,CAAC;AACtE,CAAC;AAVe,kBAAM,GAAG,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,AAApC,CAAqC;AAEf;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAkB;AAHlD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAkCvB;SAlCY,WAAW","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { BaseCodeBlock } from './BaseCodeBlock.js';\nimport styles from './pf-code-block.css';\n\n/**\n * A **code block** is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.\n *\n * @slot code\n * The slot to put the code in\n * @slot expandable-code\n * The slot to put the code in that should be revealed when the \"Show more\" button is\n * clicked to expand the code-block\n * @slot actions\n * Contains the actions for the code-block. For example, copy to clipboard.\n * @attr {boolean} expanded {@default `false`}\n * Indicates if the code-block has been expanded\n * @cssprop {<color>} --pf-c-code-block--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<length>} --pf-c-code-block__header--BorderBottomWidth {@default `1px`}\n * @cssprop {<color>} --pf-c-code-block__header--BorderBottomColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingTop {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingRight {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingBottom {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__content--PaddingLeft {@default `1rem`}\n * @cssprop {<length>} --pf-c-code-block__pre--FontSize {@default `0.875rem`}\n * @cssprop {<string>} --pf-c-code-block__pre--FontFamily {@default `\"Liberation Mono\", consolas, \"SFMono-Regular\", menlo, monaco, \"Courier New\", monospace`}\n */\n\n@customElement('pf-code-block')\nexport class PfCodeBlock extends BaseCodeBlock {\n static readonly styles = [...BaseCodeBlock.styles, styles];\n\n @property({ type: Boolean, reflect: true }) expanded = false;\n\n #toggle() {\n this.expanded = !this.expanded;\n }\n\n get #expandedContent(): string {\n return this.querySelector('script[data-expand]')?.textContent ?? '';\n }\n\n override render() {\n const { expanded } = this;\n return html`\n <div id=\"header\">\n <div id=\"actions\">\n <slot name=\"actions\"></slot>\n </div>\n </div>\n <div id=\"container\" class=\"${classMap({ expanded })}\">\n <pre><code id=\"content\">${this.content}</code><code id=\"code-block-expand\"\n ?hidden=\"${!expanded}\">${this.#expandedContent}</code></pre>\n <button ?hidden=\"${!this.#expandedContent}\"\n @click=${this.#toggle}\n aria-expanded=${this.expanded}\n aria-controls=\"code-block-expand\">\n <svg fill=\"currentColor\" height=\"1em\" width=\"1em\" viewBox=\"0 0 256 512\" aria-hidden=\"true\" role=\"img\" style=\"vertical-align: -0.125em;\"><path d=\"M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z\"></path></svg>\n ${!this.expanded ? 'Show more' : 'Show less'}\n </button>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-code-block': PfCodeBlock;\n }\n}\n"]}
@@ -25,7 +25,7 @@ class IconLoadError extends ErrorEvent {
25
25
  * @fires error - Fired when an icon fails to load
26
26
  * @csspart fallback - Container for the fallback (i.e. slotted) content
27
27
  */
28
- export class BaseIcon extends LitElement {
28
+ class BaseIcon extends LitElement {
29
29
  constructor() {
30
30
  super(...arguments);
31
31
  _BaseIcon_instances.add(this);
@@ -136,4 +136,5 @@ __decorate([
136
136
  __decorate([
137
137
  state()
138
138
  ], BaseIcon.prototype, "content", void 0);
139
+ export { BaseIcon };
139
140
  //# sourceMappingURL=BaseIcon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n constructor(\n pathname: string,\n /** The original error when importing the icon module */\n public originalError: Error\n ) {\n super('error', { message: `Could not load icon at ${pathname}` });\n }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\nexport abstract class BaseIcon extends LitElement {\n public static readonly styles = [style];\n\n public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n if (typeof getter !== 'function') {\n Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n } else {\n this.getters.set(setName, getter);\n for (const instance of this.instances) {\n instance.load();\n }\n }\n }\n\n public static getIconUrl: URLGetter = (set: string, icon: string) =>\n new URL(`./icons/${set}/${icon}.js`, import.meta.url);\n\n private static onIntersect: IntersectionObserverCallback = records =>\n records.forEach(({ isIntersecting, target }) => {\n const icon = target as BaseIcon;\n icon.#intersecting = isIntersecting;\n ric(() => {\n if (icon.#intersecting) {\n icon.load();\n }\n });\n });\n\n private static io = new IntersectionObserver(this.onIntersect);\n\n private static getters = new Map<string, URLGetter>();\n\n private static instances = new Set<BaseIcon>();\n\n declare public static defaultIconSet: string;\n\n /** Icon set */\n @property() set = this.#class.defaultIconSet;\n\n /** Icon name */\n @property({ reflect: true }) icon = '';\n\n /** Size of the icon */\n abstract size: string;\n\n /**\n * Controls how eager the element will be to load the icon data\n * - `eager`: eagerly load the icon, blocking the main thread\n * - `idle`: wait for the browser to attain an idle state before loading\n * - `lazy` (default): wait for the element to enter the viewport before loading\n */\n @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n /** Icon content. Any value that lit can render */\n @state() private content?: unknown;\n\n #intersecting = false;\n\n #logger = new Logger(this);\n\n get #class(): typeof BaseIcon {\n return this.constructor as typeof BaseIcon;\n }\n\n #lazyLoad() {\n this.#class.io.observe(this);\n if (this.#intersecting) {\n this.load();\n }\n }\n\n #iconChanged() {\n switch (this.loading) {\n case 'idle': return void ric(() => this.load());\n case 'lazy': return void this.#lazyLoad();\n case 'eager': return void this.load();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.#class.instances.add(this);\n }\n\n willUpdate(changed: PropertyValues<this>) {\n if (changed.has('icon')) {\n this.#iconChanged();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#class.instances.delete(this);\n }\n\n render() {\n const content = this.content ?? ''; /* eslint-disable indent */\n return html`\n <div id=\"container\" aria-hidden=\"true\">${content\n }<span part=\"fallback\" ?hidden=${!!content}>\n <slot></slot>\n </span>\n </div>\n `;/* eslint-enable indent */\n }\n\n protected async load() {\n const { set, icon, } = this;\n const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n let pathname = 'UNKNOWN ICON';\n if (set && icon) {\n try {\n ({ pathname } = getter(set, icon));\n const mod = await import(pathname);\n this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n await this.updateComplete;\n this.dispatchEvent(new Event('load', { bubbles: true }));\n } catch (error: unknown) {\n const event = new IconLoadError(pathname, error as Error);\n this.#logger.error((error as IconLoadError).message);\n this.dispatchEvent(event);\n }\n }\n }\n}\n"]}
1
+ {"version":3,"file":"BaseIcon.js","sourceRoot":"","sources":["BaseIcon.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport style from './BaseIcon.css';\n\nexport type URLGetter = (set: string, icon: string) => URL;\n\n/** requestIdleCallback when available, requestAnimationFrame when not */\nconst ric = window.requestIdleCallback ?? window.requestAnimationFrame;\n\n/** Fired when an icon fails to load */\nclass IconLoadError extends ErrorEvent {\n constructor(\n pathname: string,\n /** The original error when importing the icon module */\n public originalError: Error\n ) {\n super('error', { message: `Could not load icon at ${pathname}` });\n }\n}\n\n/**\n * Icon component lazy-loads icons and allows custom icon sets\n *\n * @slot - Slotted content is used as a fallback in case the icon doesn't load\n * @fires load - Fired when an icon is loaded and rendered\n * @fires error - Fired when an icon fails to load\n * @csspart fallback - Container for the fallback (i.e. slotted) content\n */\nexport abstract class BaseIcon extends LitElement {\n public static readonly styles = [style];\n\n public static addIconSet(setName: string, getter: typeof BaseIcon['getIconUrl']) {\n if (typeof getter !== 'function') {\n Logger.warn(`[${this.name}.addIconSet(setName, getter)]: getter must be a function`);\n } else {\n this.getters.set(setName, getter);\n for (const instance of this.instances) {\n instance.load();\n }\n }\n }\n\n public static getIconUrl: URLGetter = (set: string, icon: string) =>\n new URL(`./icons/${set}/${icon}.js`, import.meta.url);\n\n private static onIntersect: IntersectionObserverCallback = records =>\n records.forEach(({ isIntersecting, target }) => {\n const icon = target as BaseIcon;\n icon.#intersecting = isIntersecting;\n ric(() => {\n if (icon.#intersecting) {\n icon.load();\n }\n });\n });\n\n private static io = new IntersectionObserver(this.onIntersect);\n\n private static getters = new Map<string, URLGetter>();\n\n private static instances = new Set<BaseIcon>();\n\n declare public static defaultIconSet: string;\n\n /** Icon set */\n @property() set = this.#class.defaultIconSet;\n\n /** Icon name */\n @property({ reflect: true }) icon = '';\n\n /** Size of the icon */\n abstract size: string;\n\n /**\n * Controls how eager the element will be to load the icon data\n * - `eager`: eagerly load the icon, blocking the main thread\n * - `idle`: wait for the browser to attain an idle state before loading\n * - `lazy` (default): wait for the element to enter the viewport before loading\n */\n @property() loading?: 'idle' | 'lazy' | 'eager' = 'lazy';\n\n /** Icon content. Any value that lit can render */\n @state() private content?: unknown;\n\n #intersecting = false;\n\n #logger = new Logger(this);\n\n get #class(): typeof BaseIcon {\n return this.constructor as typeof BaseIcon;\n }\n\n #lazyLoad() {\n this.#class.io.observe(this);\n if (this.#intersecting) {\n this.load();\n }\n }\n\n #iconChanged() {\n switch (this.loading) {\n case 'idle': return void ric(() => this.load());\n case 'lazy': return void this.#lazyLoad();\n case 'eager': return void this.load();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.#class.instances.add(this);\n }\n\n willUpdate(changed: PropertyValues<this>) {\n if (changed.has('icon')) {\n this.#iconChanged();\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.#class.instances.delete(this);\n }\n\n render() {\n const content = this.content ?? ''; /* eslint-disable indent */\n return html`\n <div id=\"container\" aria-hidden=\"true\">${content\n }<span part=\"fallback\" ?hidden=${!!content}>\n <slot></slot>\n </span>\n </div>\n `;/* eslint-enable indent */\n }\n\n protected async load() {\n const { set, icon, } = this;\n const getter = this.#class.getters.get(set) ?? this.#class.getIconUrl;\n let pathname = 'UNKNOWN ICON';\n if (set && icon) {\n try {\n ({ pathname } = getter(set, icon));\n const mod = await import(pathname);\n this.content = mod.default instanceof Node ? mod.default.cloneNode(true) : mod.default;\n await this.updateComplete;\n this.dispatchEvent(new Event('load', { bubbles: true }));\n } catch (error: unknown) {\n const event = new IconLoadError(pathname, error as Error);\n this.#logger.error((error as IconLoadError).message);\n this.dispatchEvent(event);\n }\n }\n }\n}\n"]}
@@ -1 +1 @@
1
- const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="teamspeak" height="512" width="512" viewBox="0 0 512 512"><path d="M244.2 346.79c2.4-12.3-12-30-32.4-48.7-20.9-19.2-48.2-39.1-63.4-46.6-21.7-12-41.7-1.8-46.3 22.7-5 26.2 0 51.4 14.5 73.9 10.2 15.5 25.4 22.7 43.4 24 11.6.6 52.5 2.2 61.7-1 11.9-4.3 20.1-11.8 22.5-24.3zm205 20.8a5.22 5.22 0 0 0-8.3 2.4c-8 25.4-44.7 112.5-172.1 121.5-149.7 10.5 80.3 43.6 145.4-6.4 22.7-17.4 47.6-35 46.6-85.4-.4-10.1-4.9-26.69-11.6-32.1zm62-122.4c-.3-18.9-8.6-33.4-26-42.2-2.9-1.3-5-2.7-5.9-6.4A222.64 222.64 0 0 0 438.9 103c-1.1-1.5-3.5-3.2-2.2-5 8.5-11.5-.3-18-7-24.4Q321.4-31.11 177.4 13.09c-40.1 12.3-73.9 35.6-102 67.4-4 4.3-6.7 9.1-3 14.5 3 4 1.3 6.2-1 9.3C51.6 132 38.2 162.59 32.1 196c-.7 4.3-2.9 6-6.4 7.8-14.2 7-22.5 18.5-24.9 34L0 264.29v20.9c0 30.8 21 50.4 51.8 49 7.7-.3 11.7-4.3 12-11.5 2-77.5-2.4-95.4 3.7-125.8C92.1 72.39 234.3 5 345.3 65.39 411.4 102 445.7 159 447.6 234.79c.8 28.2 0 56.5 0 84.6 0 7 2.2 12.5 9.4 14.2 24.1 5 49.2-12 53.2-36.7 2.9-17.1 1-34.5 1-51.7zm-159.6 131.5c36.5 2.8 59.3-28.5 58.4-60.5-2.1-45.2-66.2-16.5-87.8-8-73.2 28.1-45 54.9-22.2 60.8z" /></svg>`;export default t.content.cloneNode(true);
1
+ const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="teamspeak" height="512" width="576" viewBox="0 0 576 512"><path d="M152.8 37.2c-32.2 38.1-56.1 82.6-69.9 130.5c0 .2-.1 .3-.1 .5C43.5 184.4 16 223 16 268c0 59.6 48.4 108 108 108s108-48.4 108-108c0-53.5-38.9-97.9-90-106.5c15.7-41.8 40.4-79.6 72.3-110.7c1.8-1.6 4-2.6 6.3-3.1c37.2-11.5 76.7-13.3 114.8-5.2C454.7 67.6 534 180.7 517.1 301.3c-8.4 62.6-38.6 112.7-87.7 151.4c-50.1 39.7-107.5 54.3-170.2 52.2l-24-1c12.4 2.8 25 4.9 37.6 6.3c40.7 4.2 81.4 2.1 120.1-12.5c94-35.5 149.3-102.3 162.9-202.5c4.8-52.6-5.8-105.4-30.8-152C454.6 11.3 290.8-38.4 159 32c-2.4 1.4-4.5 3.1-6.3 5.2zM309.4 433.9c-2.1 11.5-4.2 21.9-14.6 31.3c53.2-1 123.2-29.2 161.8-97.1c39.7-69.9 37.6-139.9-6.3-207.8C413.8 105 360.5 77.9 293.7 73.7c1.5 2.3 3.2 4.4 5.2 6.3l5.2 6.3c25.1 31.3 37.6 67.9 42.8 107.5c2.1 15.7-1 30.3-13.6 41.8c-4.2 3.1-5.2 6.3-4.2 10.4l7.3 17.7L365.7 318c5.2 11.5 4.2 19.8-6.3 28.2c-3.2 2.5-6.7 4.6-10.4 6.3l-18.8 8.4 3.1 13.6c3.1 6.3 1 12.5-3.1 17.7c-2.5 2.4-3.8 5.9-3.1 9.4c2.1 11.5-2.1 19.8-12.5 25.1c-2.1 1-4.2 5.2-5.2 7.3zm-133.6-3.1c16.7 11.5 34.5 20.9 53.2 26.1c24 5.2 41.8-6.3 44.9-30.3c1-8.4 5.2-14.6 12.5-17.7c7.3-4.2 8.4-7.3 2.1-13.6l-9.4-8.4 13.6-4.2c6.3-2.1 7.3-5.2 5.2-11.5c-1.4-3-2.4-6.2-3.1-9.4c-3.1-14.6-2.1-15.7 11.5-18.8c8.4-3.1 15.7-6.3 21.9-12.5c3.1-2.1 3.1-4.2 1-8.4l-16.7-30.3c-1-1.9-2.1-3.8-3.1-5.7c-6.4-11.7-13-23.6-15.7-37.1c-2.1-9.4-1-17.7 8.4-24c5.2-4.2 8.4-9.4 8.4-16.7c-.4-10.1-1.5-20.3-3.1-30.3c-6.3-37.6-23-68.9-51.2-95c-5.2-4.2-9.4-6.3-16.7-4.2L203.9 91.5c2 1.2 4 2.4 6 3.6l0 0c6.3 3.7 12.2 7.3 17 12.1c30.3 26.1 41.8 61.6 45.9 100.2c1 8.4 0 16.7-7.3 21.9c-8.4 5.2-10.4 12.5-7.3 20.9c4.9 13.2 10.4 26 16.7 38.6L291.6 318c-6.3 8.4-13.6 11.5-21.9 14.6c-12.5 3.1-14.6 7.3-10.4 20.9c.6 1.5 1.4 2.8 2.1 4.2c2.1 5.2 1 8.4-4.2 10.4l-12.5 3.1 5.2 4.2 4.2 4.2c4.2 5.2 4.2 8.4-2.1 10.4c-7.3 4.2-11.5 9.4-11.5 17.7c0 12.5-7.3 19.8-18.8 24c-3.8 1-7.6 1.5-11.5 1l-34.5-2.1z" /></svg>`;export default t.content.cloneNode(true);
@@ -1 +1 @@
1
- const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="ussunnah" height="512" width="512" viewBox="0 0 512 512"><path d="M156.8 285.1l5.7 14.4h-8.2c-1.3-3.2-3.1-7.7-3.8-9.5-2.5-6.3-1.1-8.4 0-10 1.9-2.7 3.2-4.4 3.6-5.2 0 2.2.8 5.7 2.7 10.3zm297.3 18.8c-2.1 13.8-5.7 27.1-10.5 39.7l43 23.4-44.8-18.8c-5.3 13.2-12 25.6-19.9 37.2l34.2 30.2-36.8-26.4c-8.4 11.8-18 22.6-28.7 32.3l24.9 34.7-28.1-31.8c-11 9.6-23.1 18-36.1 25.1l15.7 37.2-19.3-35.3c-13.1 6.8-27 12.1-41.6 15.9l6.7 38.4-10.5-37.4c-14.3 3.4-29.2 5.3-44.5 5.4L256 512l-1.9-38.4c-15.3-.1-30.2-2-44.5-5.3L199 505.6l6.7-38.2c-14.6-3.7-28.6-9.1-41.7-15.8l-19.2 35.1 15.6-37c-13-7-25.2-15.4-36.2-25.1l-27.9 31.6 24.7-34.4c-10.7-9.7-20.4-20.5-28.8-32.3l-36.5 26.2 33.9-29.9c-7.9-11.6-14.6-24.1-20-37.3l-44.4 18.7L67.8 344c-4.8-12.7-8.4-26.1-10.5-39.9l-51 9 50.3-14.2c-1.1-8.5-1.7-17.1-1.7-25.9 0-4.7.2-9.4.5-14.1L0 256l56-2.8c1.3-13.1 3.8-25.8 7.5-38.1L6.4 199l58.9 10.4c4-12 9.1-23.5 15.2-34.4l-55.1-30 58.3 24.6C90 159 97.2 149.2 105.3 140L55.8 96.4l53.9 38.7c8.1-8.6 17-16.5 26.6-23.6l-40-55.6 45.6 51.6c9.5-6.6 19.7-12.3 30.3-17.2l-27.3-64.9 33.8 62.1c10.5-4.4 21.4-7.9 32.7-10.4L199 6.4l19.5 69.2c11-2.1 22.3-3.2 33.8-3.4L256 0l3.6 72.2c11.5.2 22.8 1.4 33.8 3.5L313 6.4l-12.4 70.7c11.3 2.6 22.2 6.1 32.6 10.5l33.9-62.2-27.4 65.1c10.6 4.9 20.7 10.7 30.2 17.2l45.8-51.8-40.1 55.9c9.5 7.1 18.4 15 26.5 23.6l54.2-38.9-49.7 43.9c8 9.1 15.2 18.9 21.5 29.4l58.7-24.7-55.5 30.2c6.1 10.9 11.1 22.3 15.1 34.3l59.3-10.4-57.5 16.2c3.7 12.2 6.2 24.9 7.5 37.9L512 256l-56 2.8c.3 4.6.5 9.3.5 14.1 0 8.7-.6 17.3-1.6 25.8l50.7 14.3-51.5-9.1zm-21.8-31c0-97.5-79-176.5-176.5-176.5s-176.5 79-176.5 176.5 79 176.5 176.5 176.5 176.5-79 176.5-176.5zm-24 0c0 84.3-68.3 152.6-152.6 152.6s-152.6-68.3-152.6-152.6 68.3-152.6 152.6-152.6 152.6 68.3 152.6 152.6zM195 241c0 2.1 1.3 3.8 3.6 5.1 3.3 1.9 6.2 4.6 8.2 8.2 2.8-5.7 4.3-9.5 4.3-11.2 0-2.2-1.1-4.4-3.2-7-2.1-2.5-3.2-5.2-3.3-7.7-6.5 6.8-9.6 10.9-9.6 12.6zm-40.7-19c0 2.1 1.3 3.8 3.6 5.1 3.5 1.9 6.2 4.6 8.2 8.2 2.8-5.7 4.3-9.5 4.3-11.2 0-2.2-1.1-4.4-3.2-7-2.1-2.5-3.2-5.2-3.3-7.7-6.5 6.8-9.6 10.9-9.6 12.6zm-19 0c0 2.1 1.3 3.8 3.6 5.1 3.3 1.9 6.2 4.6 8.2 8.2 2.8-5.7 4.3-9.5 4.3-11.2 0-2.2-1.1-4.4-3.2-7-2.1-2.5-3.2-5.2-3.3-7.7-6.4 6.8-9.6 10.9-9.6 12.6zm204.9 87.9c-8.4-3-8.7-6.8-8.7-15.6V182c-8.2 12.5-14.2 18.6-18 18.6 6.3 14.4 9.5 23.9 9.5 28.3v64.3c0 2.2-2.2 6.5-4.7 6.5h-18c-2.8-7.5-10.2-26.9-15.3-40.3-2 2.5-7.2 9.2-10.7 13.7 2.4 1.6 4.1 3.6 5.2 6.3 2.6 6.7 6.4 16.5 7.9 20.2h-9.2c-3.9-10.4-9.6-25.4-11.8-31.1-2 2.5-7.2 9.2-10.7 13.7 2.4 1.6 4.1 3.6 5.2 6.3.8 2 2.8 7.3 4.3 10.9H256c-1.5-4.1-5.6-14.6-8.4-22-2 2.5-7.2 9.2-10.7 13.7 2.5 1.6 4.3 3.6 5.2 6.3.2.6.5 1.4.6 1.7H225c-4.6-13.9-11.4-27.7-11.4-34.1 0-2.2.3-5.1 1.1-8.2-8.8 10.8-14 15.9-14 25 0 7.5 10.4 28.3 10.4 33.3 0 1.7-.5 3.3-1.4 4.9-9.6-12.7-15.5-20.7-18.8-20.7h-12l-11.2-28c-3.8-9.6-5.7-16-5.7-18.8 0-3.8.5-7.7 1.7-12.2-1 1.3-3.7 4.7-5.5 7.1-.8-2.1-3.1-7.7-4.6-11.5-2.1 2.5-7.5 9.1-11.2 13.6.9 2.3 3.3 8.1 4.9 12.2-2.5 3.3-9.1 11.8-13.6 17.7-4 5.3-5.8 13.3-2.7 21.8 2.5 6.7 2 7.9-1.7 14.1H191c5.5 0 14.3 14 15.5 22 13.2-16 15.4-19.6 16.8-21.6h107c3.9 0 7.2-1.9 9.9-5.8zm20.1-26.6V181.7c-9 12.5-15.9 18.6-20.7 18.6 7.1 14.4 10.7 23.9 10.7 28.3v66.3c0 17.5 8.6 20.4 24 20.4 8.1 0 12.5-.8 13.7-2.7-4.3-1.6-7.6-2.5-9.9-3.3-8.1-3.2-17.8-7.4-17.8-26z" /></svg>`;export default t.content.cloneNode(true);
1
+ const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="ussunnah" height="512" width="482" viewBox="0 0 482 512"><path d="M481.9 268.1A240.9 240.9 0 1 1 .1 268a240.9 240.9 0 1 1 481.9 0zM24.5 268a216.5 216.5 0 1 0 432.9 0A216.5 216.5 0 1 0 24.5 268zm385.9 63.3c-12.7 0-21.6-1.9-26.7-5.9c-5.5-4.3-8.2-12.3-8.2-23.8V205.1c0-6.5-5.2-20.2-15.7-41.2c7 0 17-9.1 30-27.2V284.5c0 11 2.4 19.4 7 25.3c3.7 4.7 10.1 8.9 19 12.6c1.2 .4 2.6 .9 4.1 1.4c2.9 .9 6.3 2.1 10.3 3.5c-1.8 2.7-8.3 4-19.9 4zm-219 0c-1.3 2.4-3.6 5.5-6.8 9.4l-18.5 22.5c-1-6.1-4-13-9.3-20.6s-9.7-11.4-13.4-11.4h-8.3H53.6c3.3-5.3 4.9-8.8 4.9-10.8c0-2-.8-5.3-2.4-9.7c-1.5-4.4-2.4-8.5-2.4-12.4c0-7.4 2.1-13.9 6.3-19.3L80 253.4l-7.1-17.7L89 215.9l6.7 16.8 8-10.3c-1.8 6.4-2.6 12.3-2.6 17.7c0 4.2 2.8 13.3 8.3 27.3l16.2 40.7H135h8 .3c2.8 .4 7.7 5 14.6 13.9c1.8 2.4 4.3 5.8 7.7 10.2c1.4 1.9 2.9 3.9 4.6 6.1c1.3-2.3 2-4.6 2-7.1c0-2-1.3-6.6-4-13.4L163 304.1c-4-10.6-6.1-17.7-6.1-21.3c0-6.3 1.9-12.3 5.8-17.9c.5-.6 1-1.3 1.5-1.9c4.4-5.6 8.8-11.1 13.3-16.5c-1.1 4.6-1.7 8.7-1.7 12c0 3.7 1.7 9.9 5.1 18.8l7.9 20.4c1.9 4.7 3 8.2 3.7 10.3h17.6 8.3l-.9-2.6c-1.4-3.9-4-7-7.7-9.3l15.6-20.1 12.3 32h13.4L245 292.2c-1.5-3.9-4-7-7.7-9.3L253 262.8 270.3 308h13.4l-11.4-29.4c-1.5-3.9-4-7-7.7-9.3l15.6-20L302.6 308h10.3 8.3 7.6c1.5 0 3-1.1 4.5-3.1s2.2-4.1 2.2-6.3V205.1c0-6.5-4.5-20.3-13.7-41.2c5.4 0 14.1-9.1 26.2-27.2V300.2c0 7.2 .6 12 1.7 14.6c1.6 3.4 5.3 6.2 11.1 8.2c-3.9 5.6-8.7 8.5-14.5 8.5H321.1h-8.3H210.5h-19zM93.4 287.3c-2.7-6.7-4-11.7-4-15c-.6 1.2-2.4 3.7-5.4 7.6c-1.4 1.9-2.2 3.7-2.2 5.3c0 2.6 .8 5.7 2.2 9.3l5.6 13.9h0c5 0 9 0 11.9-.1l-8.2-20.9zm13.5-72.4c-3-5.2-7-9.3-11.9-11.9c-3.5-1.9-5.3-4.3-5.3-7.4c0-2.4 4.6-8.6 14-18.3c.2 3.8 1.9 7.6 4.9 11.2c3.1 3.6 4.6 7 4.6 10.1c0 2.6-2.1 8-6.2 16.3zm-27.6 0c-3-5.2-7-9.3-11.9-11.9c-3.5-1.9-5.3-4.3-5.3-7.4c0-2.4 4.6-8.6 14-18.3c.2 3.8 1.9 7.6 4.9 11.2c3.1 3.6 4.6 7 4.6 10.1c0 2.6-2.1 8-6.2 16.3zm87 27.5c-3-5.2-7-9.3-11.9-11.9c-3.5-1.9-5.3-4.3-5.3-7.4c0-2.4 4.6-8.6 14-18.3c.2 3.8 1.9 7.6 4.9 11.2c3.1 3.6 4.6 7 4.6 10.1c0 2.6-2.1 8-6.2 16.3z" /></svg>`;export default t.content.cloneNode(true);
@@ -1 +1 @@
1
- const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="bell-slash" height="512" width="640" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L542.6 400c2.7-7.8 1.3-16.5-3.9-23l-14.9-18.6C495.5 322.9 480 278.8 480 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V49.9c-43.9 7-81.5 32.7-104.4 68.7L38.8 5.1zM221.7 148.4C239.6 117.1 273.3 96 312 96h8 8c57.4 0 104 46.6 104 104v33.4c0 32.7 6.4 64.8 18.7 94.5L221.7 148.4zm-61.7 85c0 45.4-15.5 89.5-43.8 124.9L101.3 377c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6H406.2l-60.9-48H168.3c21.2-32.8 34.4-70.3 38.4-109.1L160 222.1v11.4zM384 448H320 256c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z" /></svg>`;export default t.content.cloneNode(true);
1
+ const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="bell-slash" height="512" width="640" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L542.6 400c2.7-7.8 1.3-16.5-3.9-23l-14.9-18.6C495.5 322.9 480 278.8 480 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32s-32 14.3-32 32V49.9c-43.9 7-81.5 32.7-104.4 68.7L38.8 5.1zM221.7 148.4C239.6 117.1 273.3 96 312 96h8 8c57.4 0 104 46.6 104 104v33.4c0 32.7 6.4 64.8 18.7 94.5L221.7 148.4zM406.2 416l-60.9-48H168.3c21.2-32.8 34.4-70.3 38.4-109.1L160 222.1v11.4c0 45.4-15.5 89.5-43.8 124.9L101.3 377c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6H406.2zM384 448H320 256c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z" /></svg>`;export default t.content.cloneNode(true);
@@ -1 +1 @@
1
- const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="calendar-minus" height="512" width="448" viewBox="0 0 448 512"><path d="M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM296 352H152c-13.3 0-24-10.7-24-24s10.7-24 24-24H296c13.3 0 24 10.7 24 24s-10.7 24-24 24z" /></svg>`;export default t.content.cloneNode(true);
1
+ const t = document.createElement('template');t.innerHTML=`<svg xmlns="http://www.w3.org/2000/svg" data-icon-name="calendar-minus" height="512" width="512" viewBox="0 0 512 512"><path d="M160 0c13.3 0 24 10.7 24 24V64H328V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V192 144 128c0-35.3 28.7-64 64-64h40V24c0-13.3 10.7-24 24-24zM432 192H80V448c0 8.8 7.2 16 16 16H416c8.8 0 16-7.2 16-16V192zM328 352H184c-13.3 0-24-10.7-24-24s10.7-24 24-24H328c13.3 0 24 10.7 24 24s-10.7 24-24 24z" /></svg>`;export default t.content.cloneNode(true);