@ember-eui/core 4.2.6 → 5.0.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (520) hide show
  1. package/addon/components/common.ts +1 -0
  2. package/addon/components/eui-accordion/index.hbs +106 -85
  3. package/addon/components/eui-accordion/index.ts +58 -19
  4. package/addon/components/eui-auto-sizer/index.hbs +3 -0
  5. package/addon/components/eui-auto-sizer/index.ts +175 -0
  6. package/addon/components/eui-avatar/index.hbs +7 -3
  7. package/addon/components/eui-badge/index.hbs +9 -3
  8. package/addon/components/eui-beta-badge/index.hbs +171 -19
  9. package/addon/components/eui-bottom-bar/index.hbs +43 -12
  10. package/addon/components/eui-bottom-bar/index.ts +75 -32
  11. package/addon/components/eui-breadcrumbs/index.hbs +98 -0
  12. package/addon/components/eui-breadcrumbs/index.ts +194 -0
  13. package/addon/components/eui-button/index.hbs +4 -4
  14. package/addon/components/eui-button-content/index.hbs +6 -2
  15. package/addon/components/eui-button-empty/index.hbs +60 -52
  16. package/addon/components/eui-button-icon/index.hbs +17 -3
  17. package/addon/components/eui-call-out/index.hbs +1 -0
  18. package/addon/components/eui-card/index.hbs +61 -47
  19. package/addon/components/eui-card/index.ts +27 -0
  20. package/addon/components/{eui-card/eui-card-select → eui-card-select}/index.hbs +2 -5
  21. package/addon/components/eui-card-select/index.ts +35 -0
  22. package/addon/components/eui-checkable-card/index.hbs +17 -11
  23. package/addon/components/eui-checkbox/index.hbs +11 -5
  24. package/addon/components/eui-checkbox/index.ts +15 -0
  25. package/addon/components/eui-code/index.hbs +14 -8
  26. package/addon/components/eui-code/index.ts +73 -0
  27. package/addon/components/eui-code-block/controls/index.hbs +26 -0
  28. package/addon/components/eui-code-block/full-screen-display/index.hbs +12 -0
  29. package/addon/components/eui-code-block/index.hbs +144 -9
  30. package/addon/components/eui-code-block/index.ts +290 -0
  31. package/addon/components/eui-code-block/virtualized/index.hbs +30 -0
  32. package/addon/components/eui-code-block/virtualized/index.ts +22 -0
  33. package/addon/components/eui-collapsible-nav/index.hbs +35 -44
  34. package/addon/components/eui-collapsible-nav/index.ts +161 -0
  35. package/addon/components/eui-collapsible-nav-group/index.hbs +114 -66
  36. package/addon/components/eui-combo-box/group/index.hbs +3 -3
  37. package/addon/components/eui-combo-box/index.hbs +8 -5
  38. package/addon/components/eui-combo-box/index.ts +89 -4
  39. package/addon/components/eui-combo-box/options/index.hbs +14 -2
  40. package/addon/components/eui-combo-box/options/index.js +22 -9
  41. package/addon/components/eui-combo-box/trigger/index.hbs +3 -1
  42. package/addon/components/eui-confirm-modal/index.hbs +1 -1
  43. package/addon/components/eui-copy/index.hbs +1 -4
  44. package/addon/components/eui-described-form-group/index.hbs +3 -2
  45. package/addon/components/eui-description-list/index.hbs +23 -0
  46. package/addon/components/eui-description-list-description/index.hbs +3 -0
  47. package/addon/components/eui-description-list-title/index.hbs +3 -0
  48. package/addon/components/eui-dual-range/index.hbs +30 -18
  49. package/addon/components/eui-dual-range/index.ts +36 -10
  50. package/addon/components/eui-empty-prompt/index.hbs +77 -0
  51. package/addon/components/eui-field-number/index.hbs +3 -3
  52. package/addon/components/eui-field-search/index.hbs +2 -1
  53. package/addon/components/eui-field-text/index.hbs +3 -1
  54. package/addon/components/eui-file-picker/index.hbs +15 -11
  55. package/addon/components/eui-file-picker/index.ts +26 -8
  56. package/addon/components/eui-flyout/index.hbs +130 -43
  57. package/addon/components/eui-flyout/index.ts +233 -0
  58. package/addon/components/eui-flyout-body/index.hbs +21 -7
  59. package/addon/components/eui-form-label/index.hbs +1 -1
  60. package/addon/components/eui-form-row/index.hbs +13 -9
  61. package/addon/components/eui-header/index.hbs +18 -3
  62. package/addon/{modifiers/fixed-header.ts → components/eui-header/index.ts} +10 -1
  63. package/addon/components/eui-header-alert/index.hbs +25 -0
  64. package/addon/components/eui-header-breadcrumbs/index.hbs +7 -0
  65. package/addon/components/eui-header-links/index.hbs +41 -0
  66. package/addon/components/eui-header-links/index.ts +14 -0
  67. package/addon/components/eui-header-section-item-button/index.hbs +30 -12
  68. package/addon/components/eui-header-section-item-button/index.ts +131 -0
  69. package/addon/components/eui-health/index.hbs +15 -13
  70. package/addon/components/eui-hide-for/index.hbs +3 -0
  71. package/addon/components/eui-hide-for/index.ts +33 -0
  72. package/addon/components/eui-icon/index.hbs +6 -3
  73. package/addon/components/eui-icon/index.ts +4 -0
  74. package/addon/components/eui-image/index.hbs +63 -25
  75. package/addon/components/eui-input-popover/index.ts +6 -4
  76. package/addon/components/eui-key-pad-menu/index.hbs +16 -0
  77. package/addon/components/eui-key-pad-menu/key/index.hbs +1 -0
  78. package/addon/components/eui-key-pad-menu-item/index.hbs +66 -0
  79. package/addon/components/eui-key-pad-menu-item/index.ts +11 -0
  80. package/addon/components/eui-link/index.hbs +50 -0
  81. package/addon/components/eui-list-group-item/index.hbs +10 -2
  82. package/addon/components/eui-markdown-editor/index.hbs +4 -1
  83. package/addon/components/eui-markdown-editor/index.ts +54 -0
  84. package/addon/components/eui-markdown-editor-footer/index.hbs +39 -40
  85. package/addon/components/eui-markdown-format/index.ts +1 -1
  86. package/addon/components/eui-markdown-format/markdown-code/index.hbs +2 -2
  87. package/addon/components/eui-markdown-format/markdown-code-block/index.hbs +1 -0
  88. package/addon/components/eui-modal/index.hbs +28 -24
  89. package/addon/components/eui-overlay-mask/index.hbs +4 -4
  90. package/addon/components/eui-overlay-mask/index.ts +14 -1
  91. package/addon/components/eui-page/index.hbs +3 -6
  92. package/addon/components/eui-page-body/index.hbs +47 -15
  93. package/addon/components/eui-page-content/index.hbs +6 -8
  94. package/addon/components/eui-page-content-body/index.hbs +13 -1
  95. package/addon/components/eui-page-content-header/index.hbs +6 -0
  96. package/addon/components/eui-page-header/index.hbs +31 -6
  97. package/addon/components/eui-page-header-content/index.hbs +219 -0
  98. package/addon/components/eui-page-header-content/index.ts +49 -0
  99. package/addon/components/eui-page-side-bar/index.hbs +8 -1
  100. package/addon/components/eui-page-template/index.hbs +417 -0
  101. package/addon/components/eui-page-template/index.ts +89 -0
  102. package/addon/components/eui-panel/index.hbs +58 -12
  103. package/addon/components/eui-popover/index.hbs +8 -4
  104. package/addon/components/eui-popover/index.ts +28 -12
  105. package/addon/components/eui-progress/index.hbs +16 -13
  106. package/addon/components/eui-radio/index.hbs +9 -3
  107. package/addon/components/eui-range/index.hbs +33 -11
  108. package/addon/components/eui-range/index.ts +7 -4
  109. package/addon/components/eui-range-input/index.hbs +37 -31
  110. package/addon/components/eui-range-input/types.ts +2 -1
  111. package/addon/components/eui-range-levels/index.hbs +3 -3
  112. package/addon/components/eui-range-ticks/index.hbs +2 -2
  113. package/addon/components/eui-range-track/index.hbs +10 -2
  114. package/addon/components/eui-range-track/index.ts +23 -6
  115. package/addon/components/eui-show-for/index.hbs +3 -0
  116. package/addon/components/eui-show-for/index.ts +79 -0
  117. package/addon/components/eui-side-nav/index.hbs +161 -36
  118. package/addon/components/eui-side-nav/index.ts +28 -0
  119. package/addon/components/eui-side-nav-item/button/index.hbs +26 -14
  120. package/addon/components/eui-side-nav-item/index.hbs +52 -25
  121. package/addon/components/eui-split-panel/inner/index.hbs +10 -0
  122. package/addon/components/eui-split-panel/outer/index.hbs +27 -0
  123. package/addon/components/eui-split-panel/outer/index.ts +37 -0
  124. package/addon/components/eui-step/eui-step-number/index.hbs +21 -4
  125. package/addon/components/eui-steps/index.hbs +7 -1
  126. package/addon/components/eui-tab/index.hbs +28 -3
  127. package/addon/{modifiers/focus-tab.ts → components/eui-tab/index.ts} +6 -1
  128. package/addon/components/eui-tabs/index.hbs +6 -1
  129. package/addon/components/eui-tool-tip/index.hbs +6 -7
  130. package/addon/components/eui-tool-tip/index.ts +27 -11
  131. package/addon/helpers/class-names.ts +2 -0
  132. package/addon/helpers/get-range-tick.ts +53 -8
  133. package/addon/helpers/unique-id.ts +4 -1
  134. package/addon/styles/ember-eui.css +2 -10
  135. package/addon/utils/breakpoint.ts +114 -0
  136. package/addon/utils/code/utils.ts +304 -0
  137. package/addon/utils/css-mappings/eui-avatar.ts +51 -9
  138. package/addon/utils/css-mappings/eui-badge.ts +6 -2
  139. package/addon/utils/css-mappings/eui-beta-badge.ts +22 -0
  140. package/addon/utils/css-mappings/eui-bottom-bar.ts +8 -1
  141. package/addon/utils/css-mappings/eui-button-empty.ts +4 -4
  142. package/addon/utils/css-mappings/eui-button-icon.ts +19 -6
  143. package/addon/utils/css-mappings/eui-button.ts +2 -1
  144. package/addon/utils/css-mappings/eui-card-select.ts +1 -11
  145. package/addon/utils/css-mappings/eui-card.ts +1 -18
  146. package/addon/utils/css-mappings/{eui-code-block-impl.ts → eui-code-block.ts} +0 -0
  147. package/addon/utils/css-mappings/eui-description-list.ts +29 -0
  148. package/addon/utils/css-mappings/eui-empty-prompt.ts +17 -0
  149. package/addon/utils/css-mappings/eui-flyout.ts +21 -1
  150. package/addon/utils/css-mappings/eui-header-links.ts +27 -0
  151. package/addon/utils/css-mappings/eui-health.ts +20 -0
  152. package/addon/utils/css-mappings/eui-icon.ts +94 -70
  153. package/addon/utils/css-mappings/eui-image.ts +17 -2
  154. package/addon/utils/css-mappings/eui-link.ts +21 -0
  155. package/addon/utils/css-mappings/eui-page-body.ts +25 -0
  156. package/addon/utils/css-mappings/eui-page-content-body.ts +17 -0
  157. package/addon/utils/css-mappings/eui-page-content.ts +7 -1
  158. package/addon/utils/css-mappings/eui-page-header.ts +17 -0
  159. package/addon/utils/css-mappings/eui-page-side-bar.ts +17 -0
  160. package/addon/utils/css-mappings/eui-panel.ts +1 -0
  161. package/addon/utils/css-mappings/eui-progress-data.ts +0 -1
  162. package/addon/utils/css-mappings/eui-progress.ts +0 -2
  163. package/addon/utils/css-mappings/eui-range-levels.ts +22 -4
  164. package/addon/utils/css-mappings/eui-tabs.ts +3 -1
  165. package/addon/utils/css-mappings/eui-text-color.ts +3 -2
  166. package/addon/utils/css-mappings/index.ts +23 -3
  167. package/addon/utils/detect-element-resize.js +248 -0
  168. package/addon/utils/markdown/plugins/markdown-add-components/index.ts +1 -0
  169. package/addon/utils/markdown/plugins/{markdown-add-components.ts → markdown-add-components/processor.ts} +14 -7
  170. package/addon/utils/markdown/plugins/markdown-checkbox/index.ts +9 -0
  171. package/addon/utils/markdown/plugins/{markdown-checkbox.ts → markdown-checkbox/parser.ts} +3 -5
  172. package/addon/utils/markdown/plugins/markdown-default-plugins/index.ts +12 -0
  173. package/addon/utils/markdown/plugins/{markdown-default-plugins.ts → markdown-default-plugins/parsing-plugins.ts} +13 -25
  174. package/addon/utils/markdown/plugins/markdown-default-plugins/plugins.ts +32 -0
  175. package/addon/utils/markdown/plugins/markdown-default-plugins/processing-plugins.ts +67 -0
  176. package/addon/utils/markdown/plugins/markdown-default-plugins/ui-plugins.ts +27 -0
  177. package/addon/utils/markdown/plugins/markdown-tooltip/index.ts +2 -0
  178. package/addon/utils/markdown/plugins/{markdown-tooltip.ts → markdown-tooltip/parser.ts} +3 -23
  179. package/addon/utils/markdown/plugins/markdown-tooltip/plugin.ts +17 -0
  180. package/addon/utils/markdown/plugins/to-dom.ts +3 -1
  181. package/addon/utils/markdown/remark/remark-prismjs.ts +41 -0
  182. package/addon/utils/popover/index.ts +87 -35
  183. package/addon/utils/range/index.ts +1 -0
  184. package/app/components/eui-auto-sizer/index.js +1 -0
  185. package/app/components/eui-breadcrumbs/index.js +1 -0
  186. package/app/components/eui-card-select/index.js +1 -0
  187. package/app/components/{eui-code-block-impl → eui-code-block/controls}/index.js +1 -1
  188. package/app/components/{eui-code-block-impl/code-block-controls → eui-code-block/full-screen-display}/index.js +1 -1
  189. package/app/components/eui-code-block/virtualized/index.js +1 -0
  190. package/app/components/eui-description-list/index.js +1 -0
  191. package/app/components/eui-description-list-description/index.js +1 -0
  192. package/app/components/eui-description-list-title/index.js +1 -0
  193. package/app/components/eui-empty-prompt/index.js +1 -0
  194. package/app/components/eui-header-alert/index.js +1 -0
  195. package/app/components/eui-header-breadcrumbs/index.js +1 -0
  196. package/app/components/eui-header-links/index.js +1 -0
  197. package/app/components/eui-hide-for/index.js +1 -0
  198. package/app/components/eui-key-pad-menu/index.js +1 -0
  199. package/app/components/eui-key-pad-menu/key/index.js +1 -0
  200. package/app/components/eui-key-pad-menu-item/index.js +1 -0
  201. package/app/components/eui-link/index.js +1 -0
  202. package/app/components/eui-page-header-content/index.js +1 -0
  203. package/app/components/eui-page-template/index.js +1 -0
  204. package/app/components/eui-show-for/index.js +1 -0
  205. package/app/components/eui-split-panel/inner/index.js +1 -0
  206. package/app/components/eui-split-panel/outer/index.js +1 -0
  207. package/app/utils/copy-to-clipboard.js +1 -0
  208. package/docs/display/avatar-demo/demo1.md +43 -49
  209. package/docs/display/avatar-demo/demo2.md +42 -0
  210. package/docs/display/avatar-demo/demo3.md +33 -0
  211. package/docs/display/avatar-demo/demo4.md +53 -0
  212. package/docs/display/avatar-demo/demo5.md +38 -0
  213. package/docs/display/avatar.md +9 -1
  214. package/docs/display/badge-demo/demo1.md +111 -168
  215. package/docs/display/badge-demo/demo2.md +34 -0
  216. package/docs/display/badge-demo/demo3.md +73 -0
  217. package/docs/display/badge-demo/demo4.md +29 -0
  218. package/docs/display/badge-demo/demo5.md +33 -0
  219. package/docs/display/badge-demo/demo6.md +71 -0
  220. package/docs/display/badge-demo/demo7.md +101 -0
  221. package/docs/display/badge-demo/demo8.md +22 -0
  222. package/docs/display/badge.md +9 -1
  223. package/docs/display/callout-demo/demo1.md +29 -81
  224. package/docs/display/callout-demo/demo2.md +28 -0
  225. package/docs/display/callout-demo/demo3.md +29 -0
  226. package/docs/display/callout-demo/demo4.md +26 -0
  227. package/docs/display/callout.md +15 -1
  228. package/docs/display/card/basic-card-demo/demo1.md +22 -316
  229. package/docs/display/card/basic-card.md +9 -1
  230. package/docs/display/card/beta-badge-demo/demo1.md +47 -0
  231. package/docs/display/card/beta-badge.md +9 -0
  232. package/docs/display/card/checkable-demo/demo1.md +20 -94
  233. package/docs/display/card/checkable-demo/demo2.md +63 -0
  234. package/docs/display/card/checkable.md +9 -1
  235. package/docs/display/card/custom-children-demo/demo1.md +93 -0
  236. package/docs/display/card/custom-children.md +9 -0
  237. package/docs/display/card/footer-demo/demo1.md +77 -0
  238. package/docs/display/card/footer.md +9 -0
  239. package/docs/display/card/images-demo/demo1.md +57 -0
  240. package/docs/display/card/images.md +9 -0
  241. package/docs/display/card/layout-demo/demo1.md +40 -0
  242. package/docs/display/card/layout.md +9 -0
  243. package/docs/display/card/selectable-demo/demo1.md +60 -53
  244. package/docs/display/card/selectable.md +9 -1
  245. package/docs/display/comment-list.md +9 -1
  246. package/docs/display/description-list-demo/demo1.md +54 -0
  247. package/docs/display/description-list-demo/demo2.md +43 -0
  248. package/docs/display/description-list-demo/demo3.md +58 -0
  249. package/docs/display/description-list-demo/demo4.md +42 -0
  250. package/docs/display/description-list-demo/demo5.md +62 -0
  251. package/docs/display/description-list-demo/demo6.md +46 -0
  252. package/docs/display/description-list.md +9 -0
  253. package/docs/display/empty-prompt-demo/demo1.md +49 -0
  254. package/docs/display/empty-prompt.md +11 -0
  255. package/docs/display/health-demo/demo1.md +11 -7
  256. package/docs/display/health-demo/demo2.md +31 -0
  257. package/docs/display/health.md +15 -1
  258. package/docs/display/icons-demo/demo1.md +270 -57
  259. package/docs/display/icons-demo/demo2.md +76 -0
  260. package/docs/display/icons-demo/demo3.md +76 -0
  261. package/docs/display/icons-demo/demo4.md +104 -0
  262. package/docs/display/icons-demo/demo5.md +64 -0
  263. package/docs/display/icons-demo/demo6.md +63 -0
  264. package/docs/display/icons-demo/demo7.md +101 -0
  265. package/docs/display/icons-demo/demo8.md +47 -0
  266. package/docs/display/icons.md +9 -1
  267. package/docs/display/image-demo/demo1.md +15 -50
  268. package/docs/display/image-demo/demo2.md +35 -0
  269. package/docs/display/image-demo/demo3.md +75 -0
  270. package/docs/display/image-demo/demo4.md +80 -0
  271. package/docs/display/image.md +13 -1
  272. package/docs/display/list-group.md +9 -1
  273. package/docs/display/progress-demo/demo1.md +10 -5
  274. package/docs/display/progress-demo/demo2.md +11 -26
  275. package/docs/display/progress-demo/demo3.md +27 -0
  276. package/docs/display/progress-demo/demo4.md +77 -0
  277. package/docs/display/progress.md +9 -1
  278. package/docs/display/stat-demo/demo1.md +0 -118
  279. package/docs/display/stat-demo/demo2.md +24 -22
  280. package/docs/display/stat-demo/demo3.md +39 -0
  281. package/docs/display/stat-demo/demo4.md +50 -0
  282. package/docs/display/stat-demo/demo5.md +25 -0
  283. package/docs/display/stat-demo/demo6.md +40 -0
  284. package/docs/display/stat-demo/demo7.md +84 -0
  285. package/docs/display/stat.md +15 -1
  286. package/docs/display/text-demo/demo1.md +79 -130
  287. package/docs/display/text-demo/demo2.md +71 -0
  288. package/docs/display/text-demo/demo3.md +39 -0
  289. package/docs/display/text.md +20 -1
  290. package/docs/display/title-demo/demo1.md +50 -26
  291. package/docs/display/title.md +9 -1
  292. package/docs/display/tool-tip-demo/demo1.md +57 -100
  293. package/docs/display/tool-tip-demo/demo2.md +35 -29
  294. package/docs/display/tool-tip-demo/demo3.md +52 -0
  295. package/docs/display/tool-tip-demo/demo4.md +77 -0
  296. package/docs/display/tool-tip.md +15 -1
  297. package/docs/editors/code/code-block-demo/demo1.md +21 -40
  298. package/docs/editors/code/code-block-demo/demo2.md +35 -0
  299. package/docs/editors/code/code-block-demo/demo3.md +43 -0
  300. package/docs/editors/code/code-block-demo/demo4.md +28 -0
  301. package/docs/editors/code/code-block-demo/demo5.md +42 -0
  302. package/docs/editors/code/code-block-demo/demo6.md +42 -0
  303. package/docs/editors/code/code-block-demo/demo7.md +853 -0
  304. package/docs/editors/code/code-block-demo/demo8.md +855 -0
  305. package/docs/editors/code/code-block.md +27 -1
  306. package/docs/editors/code/inline-demo/demo1.md +6 -3
  307. package/docs/editors/code/inline.md +9 -1
  308. package/docs/editors/markdown-editor/base-editor-demo/demo1.md +9 -28
  309. package/docs/editors/markdown-editor/base-editor.md +9 -1
  310. package/docs/forms/form-controls/checkbox/demo/demo1.md +49 -0
  311. package/docs/forms/form-controls/checkbox/index.md +34 -0
  312. package/docs/forms/form-controls/{checkbox-group-demo → checkbox-group/demo}/demo1.md +4 -13
  313. package/docs/forms/form-controls/checkbox-group/index.md +35 -0
  314. package/docs/forms/form-controls/{combo-box-demo → combo-box/demo}/demo1.md +8 -2
  315. package/docs/forms/form-controls/{combo-box-demo → combo-box/demo}/demo2.md +10 -8
  316. package/docs/forms/form-controls/combo-box/demo/demo3.md +60 -0
  317. package/docs/forms/form-controls/{combo-box-demo/demo3.md → combo-box/demo/demo4.md} +17 -14
  318. package/docs/forms/form-controls/combo-box/demo/demo5.md +151 -0
  319. package/docs/forms/form-controls/combo-box/index.md +14 -0
  320. package/docs/forms/form-controls/file-picker/demo/demo1.md +29 -0
  321. package/docs/forms/form-controls/file-picker/demo/demo2.md +44 -0
  322. package/docs/forms/form-controls/file-picker/demo/demo3.md +45 -0
  323. package/docs/forms/form-controls/file-picker/demo/demo4.md +63 -0
  324. package/docs/forms/form-controls/file-picker/index.md +30 -0
  325. package/docs/forms/form-controls/{form-control-layout-demo → form-control-layout/demo}/demo1.md +0 -0
  326. package/docs/forms/form-controls/form-control-layout/index.md +38 -0
  327. package/docs/forms/form-controls/{form-control-layout-delimited-demo → form-control-layout-delimited/demo}/demo1.md +41 -37
  328. package/docs/forms/form-controls/form-control-layout-delimited/index.md +32 -0
  329. package/docs/forms/form-controls/number-field/demo/demo1.md +20 -0
  330. package/docs/forms/form-controls/{number-field-demo/demo1.md → number-field/demo/demo2.md} +23 -11
  331. package/docs/forms/form-controls/number-field/index.md +20 -0
  332. package/docs/forms/form-controls/password-field/demo/demo1.md +19 -0
  333. package/docs/forms/form-controls/{password-field-demo/demo1.md → password-field/demo/demo2.md} +12 -8
  334. package/docs/forms/form-controls/password-field/index.md +27 -0
  335. package/docs/forms/form-controls/radio/demo/demo1.md +43 -0
  336. package/docs/forms/form-controls/radio/index.md +32 -0
  337. package/docs/forms/form-controls/radio-group/demo/demo1.md +50 -0
  338. package/docs/forms/form-controls/radio-group/index.md +26 -0
  339. package/docs/forms/form-controls/range/demo/demo1.md +96 -0
  340. package/docs/forms/form-controls/range/demo/demo2.md +62 -0
  341. package/docs/forms/form-controls/{range-demo → range/demo}/demo3.md +10 -12
  342. package/docs/forms/form-controls/{range-demo → range/demo}/demo4.md +16 -18
  343. package/docs/forms/form-controls/{range-demo → range/demo}/demo5.md +18 -20
  344. package/docs/forms/form-controls/range/demo/demo6.md +57 -0
  345. package/docs/forms/form-controls/range/demo/demo7.md +350 -0
  346. package/docs/forms/form-controls/range/index.md +26 -0
  347. package/docs/forms/form-controls/search-field/demo/demo1.md +29 -0
  348. package/docs/forms/form-controls/search-field/index.md +22 -0
  349. package/docs/forms/form-controls/select/demo/demo1.md +29 -0
  350. package/docs/forms/form-controls/select/demo/demo2.md +44 -0
  351. package/docs/forms/form-controls/{select-demo/demo1.md → select/demo/demo3.md} +20 -10
  352. package/docs/forms/form-controls/select/index.md +27 -0
  353. package/docs/forms/form-controls/{switch-demo → switch/demo}/demo1.md +10 -10
  354. package/docs/forms/form-controls/switch/index.md +21 -0
  355. package/docs/forms/form-controls/text-field/demo/demo1.md +35 -0
  356. package/docs/forms/form-controls/text-field/demo/demo2.md +40 -0
  357. package/docs/forms/form-controls/{text-field-demo/demo2.md → text-field/demo/demo3.md} +14 -17
  358. package/docs/forms/form-controls/{text-field-demo/demo1.md → text-field/demo/demo4.md} +18 -32
  359. package/docs/forms/form-controls/text-field/index.md +22 -0
  360. package/docs/forms/form-controls/textarea/demo/demo1.md +21 -0
  361. package/docs/forms/form-controls/textarea/demo/demo2.md +24 -0
  362. package/docs/forms/form-controls/textarea/index.md +22 -0
  363. package/docs/forms/form-layouts/described-form-groups-demo/demo1.md +13 -4
  364. package/docs/forms/form-layouts/described-form-groups.md +9 -1
  365. package/docs/layout/accordion-demo/demo1.md +21 -102
  366. package/docs/layout/accordion-demo/demo2.md +76 -0
  367. package/docs/layout/accordion-demo/demo3.md +25 -0
  368. package/docs/layout/accordion-demo/demo4.md +26 -0
  369. package/docs/layout/accordion-demo/demo5.md +65 -0
  370. package/docs/layout/accordion-demo/demo6.md +78 -0
  371. package/docs/layout/accordion-demo/demo7.md +66 -0
  372. package/docs/layout/accordion-demo/demo8.md +64 -0
  373. package/docs/layout/accordion-demo/demo9.md +114 -0
  374. package/docs/layout/accordion.md +40 -1
  375. package/docs/layout/bottom-bar-demo/demo1.md +32 -49
  376. package/docs/layout/bottom-bar-demo/demo2.md +54 -0
  377. package/docs/layout/bottom-bar-demo/demo3.md +81 -0
  378. package/docs/layout/bottom-bar.md +9 -1
  379. package/docs/layout/flex.md +9 -1
  380. package/docs/layout/flyout-demo/demo1.md +19 -11
  381. package/docs/layout/flyout-demo/demo2.md +43 -28
  382. package/docs/layout/flyout-demo/demo3.md +99 -0
  383. package/docs/layout/flyout-demo/demo4.md +115 -0
  384. package/docs/layout/flyout-demo/demo5.md +59 -0
  385. package/docs/layout/flyout-demo/demo6.md +57 -0
  386. package/docs/layout/flyout-demo/demo7.md +51 -0
  387. package/docs/layout/flyout.md +9 -1
  388. package/docs/layout/header-demo/demo1.md +284 -35
  389. package/docs/layout/header-demo/demo2.md +42 -0
  390. package/docs/layout/header-demo/demo3.md +48 -0
  391. package/docs/layout/header-demo/demo4.md +57 -0
  392. package/docs/layout/header-demo/demo5.md +232 -0
  393. package/docs/layout/header-demo/demo6.md +85 -0
  394. package/docs/layout/header-demo/demo7.md +94 -0
  395. package/docs/layout/header.md +9 -1
  396. package/docs/layout/horizontal-rule.md +9 -1
  397. package/docs/layout/modal-demo/demo1.md +64 -167
  398. package/docs/layout/modal-demo/demo2.md +126 -0
  399. package/docs/layout/modal-demo/demo3.md +55 -0
  400. package/docs/layout/modal-demo/demo4.md +65 -0
  401. package/docs/layout/modal-demo/demo5.md +96 -0
  402. package/docs/layout/modal.md +9 -1
  403. package/docs/layout/page-demo/demo1.md +96 -3
  404. package/docs/layout/page-demo/demo10.md +42 -0
  405. package/docs/layout/page-demo/demo2.md +46 -0
  406. package/docs/layout/page-demo/demo3.md +50 -0
  407. package/docs/layout/page-demo/demo4.md +38 -0
  408. package/docs/layout/page-demo/demo5.md +30 -0
  409. package/docs/layout/page-demo/demo6.md +51 -0
  410. package/docs/layout/page-demo/demo7.md +59 -0
  411. package/docs/layout/page-demo/demo8.md +19 -0
  412. package/docs/layout/page-demo/demo9.md +29 -0
  413. package/docs/layout/page.md +9 -1
  414. package/docs/layout/panel-demo/demo1.md +28 -19
  415. package/docs/layout/panel-demo/demo2.md +22 -0
  416. package/docs/layout/panel-demo/demo3.md +27 -0
  417. package/docs/layout/panel-demo/demo4.md +46 -0
  418. package/docs/layout/panel-demo/demo5.md +81 -0
  419. package/docs/layout/panel.md +15 -1
  420. package/docs/layout/popover-demo/demo1.md +42 -300
  421. package/docs/layout/popover-demo/demo10.md +72 -0
  422. package/docs/layout/popover-demo/demo2.md +306 -96
  423. package/docs/layout/popover-demo/demo3.md +20 -12
  424. package/docs/layout/popover-demo/demo4.md +118 -0
  425. package/docs/layout/popover-demo/demo5.md +252 -0
  426. package/docs/layout/popover-demo/demo6.md +44 -0
  427. package/docs/layout/popover-demo/demo7.md +44 -0
  428. package/docs/layout/popover-demo/demo8.md +50 -0
  429. package/docs/layout/popover-demo/demo9.md +80 -0
  430. package/docs/layout/popover.md +9 -1
  431. package/docs/navigation/breadcrumbs-demo/demo1.md +77 -0
  432. package/docs/navigation/breadcrumbs-demo/demo2.md +61 -0
  433. package/docs/navigation/breadcrumbs-demo/demo3.md +61 -0
  434. package/docs/navigation/breadcrumbs-demo/demo4.md +61 -0
  435. package/docs/navigation/breadcrumbs-demo/demo5.md +61 -0
  436. package/docs/navigation/breadcrumbs-demo/demo6.md +61 -0
  437. package/docs/navigation/breadcrumbs.md +9 -0
  438. package/docs/navigation/button-demo/demo1.md +210 -158
  439. package/docs/navigation/button.md +9 -1
  440. package/docs/navigation/collapsible-nav-demo/demo1.md +21 -44
  441. package/docs/navigation/collapsible-nav-demo/demo2.md +108 -0
  442. package/docs/navigation/collapsible-nav.md +9 -1
  443. package/docs/navigation/key-pad-menu-demo/demo1.md +77 -0
  444. package/docs/navigation/key-pad-menu-demo/demo2.md +102 -0
  445. package/docs/navigation/key-pad-menu-demo/demo3.md +54 -0
  446. package/docs/navigation/key-pad-menu-demo/demo4.md +71 -0
  447. package/docs/navigation/key-pad-menu-demo/demo5.md +65 -0
  448. package/docs/navigation/key-pad-menu.md +9 -0
  449. package/docs/navigation/link-demo/demo1.md +44 -0
  450. package/docs/navigation/link-demo/demo2.md +41 -0
  451. package/docs/navigation/link-demo/demo3.md +45 -0
  452. package/docs/navigation/link-demo/demo4.md +61 -0
  453. package/docs/navigation/link.md +9 -0
  454. package/docs/navigation/side-nav-demo/demo1.md +34 -18
  455. package/docs/navigation/side-nav.md +9 -1
  456. package/docs/navigation/steps-demo/demo1.md +16 -18
  457. package/docs/navigation/steps-demo/demo2.md +18 -21
  458. package/docs/navigation/steps-demo/demo3.md +12 -10
  459. package/docs/navigation/steps-demo/demo4.md +84 -0
  460. package/docs/navigation/steps-demo/demo5.md +29 -0
  461. package/docs/navigation/steps.md +9 -1
  462. package/docs/navigation/tabs.md +9 -1
  463. package/docs/utilities/auto-sizer-demo/demo1.md +34 -0
  464. package/docs/utilities/auto-sizer.md +9 -0
  465. package/docs/utilities/copy-demo/demo1.md +37 -0
  466. package/docs/utilities/copy-demo/demo2.md +70 -0
  467. package/docs/utilities/copy.md +9 -0
  468. package/docs/utilities/mutation-observer.md +9 -1
  469. package/docs/utilities/outside-click-detector.md +9 -1
  470. package/docs/utilities/overlay-mask.md +9 -1
  471. package/docs/utilities/portal.md +9 -1
  472. package/docs/utilities/resize-observer.md +9 -1
  473. package/docs/utilities/responsive-demo/demo1.md +108 -0
  474. package/docs/utilities/responsive.md +9 -0
  475. package/index.js +4 -2
  476. package/package.json +13 -7
  477. package/CHANGELOG.md +0 -1335
  478. package/addon/components/eui-code-block-impl/code-block-controls/index.hbs +0 -33
  479. package/addon/components/eui-code-block-impl/index.hbs +0 -111
  480. package/addon/components/eui-code-block-impl/index.ts +0 -121
  481. package/addon/components/eui-flyout-body/banner/index.hbs +0 -3
  482. package/addon/components/eui-flyout-body/content/index.hbs +0 -3
  483. package/addon/helpers/create-event.ts +0 -30
  484. package/addon/modifiers/get-cursor-node.ts +0 -54
  485. package/addon/modifiers/invalidate-indeterminate.ts +0 -10
  486. package/addon/modifiers/on-event-simulate-event.ts +0 -32
  487. package/app/components/eui-card/eui-card-select/index.js +0 -1
  488. package/app/components/eui-flyout-body/banner/index.js +0 -1
  489. package/app/components/eui-flyout-body/content/index.js +0 -1
  490. package/app/helpers/create-event.js +0 -1
  491. package/app/modifiers/fixed-header.js +0 -1
  492. package/app/modifiers/focus-tab.js +0 -1
  493. package/app/modifiers/get-cursor-node.js +0 -1
  494. package/app/modifiers/invalidate-indeterminate.js +0 -1
  495. package/app/modifiers/on-event-simulate-event.js +0 -1
  496. package/docs/forms/form-controls/checkbox-demo/demo1.md +0 -40
  497. package/docs/forms/form-controls/checkbox-group.md +0 -1
  498. package/docs/forms/form-controls/checkbox.md +0 -1
  499. package/docs/forms/form-controls/combo-box.md +0 -1
  500. package/docs/forms/form-controls/file-picker-demo/demo1.md +0 -28
  501. package/docs/forms/form-controls/file-picker.md +0 -1
  502. package/docs/forms/form-controls/form-control-layout-delimited.md +0 -1
  503. package/docs/forms/form-controls/form-control-layout.md +0 -1
  504. package/docs/forms/form-controls/number-field.md +0 -1
  505. package/docs/forms/form-controls/password-field.md +0 -1
  506. package/docs/forms/form-controls/radio-demo/demo1.md +0 -39
  507. package/docs/forms/form-controls/radio-group-demo/demo1.md +0 -60
  508. package/docs/forms/form-controls/radio-group.md +0 -1
  509. package/docs/forms/form-controls/radio.md +0 -1
  510. package/docs/forms/form-controls/range-demo/demo1.md +0 -61
  511. package/docs/forms/form-controls/range-demo/demo2.md +0 -59
  512. package/docs/forms/form-controls/range-demo/demo6.md +0 -59
  513. package/docs/forms/form-controls/range.md +0 -1
  514. package/docs/forms/form-controls/search-field-demo/demo1.md +0 -31
  515. package/docs/forms/form-controls/search-field.md +0 -1
  516. package/docs/forms/form-controls/select.md +0 -1
  517. package/docs/forms/form-controls/switch.md +0 -1
  518. package/docs/forms/form-controls/text-field.md +0 -1
  519. package/docs/forms/form-controls/textarea-demo/demo1.md +0 -36
  520. package/docs/forms/form-controls/textarea.md +0 -1
package/addon/components/eui-flyout/index.ts ADDED
@@ -0,0 +1,233 @@
1
+ import Component from '@glimmer/component';
2
+ import { EuiBreakpointSize } from '../../utils/breakpoint';
3
+ import { tracked } from '@glimmer/tracking';
4
+ import { isWithinMinBreakpoint } from '../../utils/breakpoint';
5
+ import { throttle } from '@ember/runloop';
6
+ import { action } from '@ember/object';
7
+ import { modifier } from 'ember-modifier';
8
+ import { keysOf } from '../common';
9
+ import { sizeMapping } from '../../utils/css-mappings/eui-flyout';
10
+
11
+ export type EuiCollapsibleNavArgs = {
12
+ /**
13
+ * Shows the navigation flyout
14
+ */
15
+ isOpen?: boolean;
16
+ /**
17
+ * Keeps navigation flyout visible and push `<body>` content via padding
18
+ */
19
+ isDocked?: boolean;
20
+ /**
21
+ * Named breakpoint or pixel value for customizing the minimum window width to enable docking
22
+ */
23
+ dockedBreakpoint?: EuiBreakpointSize | number;
24
+ /**
25
+ * Keeps the display of toggle button when in docked state
26
+ */
27
+ showButtonIfDocked?: boolean;
28
+
29
+ as: string;
30
+
31
+ size?: number;
32
+
33
+ side?: 'left' | 'right';
34
+
35
+ role?: null | string;
36
+
37
+ ownFocus?: boolean;
38
+
39
+ outsideClickCloses?: boolean;
40
+
41
+ closeButtonPosition?: 'outside' | 'inside';
42
+
43
+ paddingSize?: string;
44
+
45
+ hideCloseButton?: boolean;
46
+
47
+ closeButtonProps?: {
48
+ className: string;
49
+ onClick: (e: MouseEvent) => void;
50
+ };
51
+
52
+ closeButtonAriaLabel?: string;
53
+
54
+ onClose: () => void;
55
+
56
+ maxWidth?: boolean | number;
57
+
58
+ maskProps?: Record<string, unknown>;
59
+
60
+ type?: string;
61
+
62
+ pushMinBreakpoint?: number | EuiBreakpointSize;
63
+ };
64
+
65
+ const classesModifier = modifier(
66
+ (
67
+ _element: HTMLElement,
68
+ _pos,
69
+ {
70
+ type,
71
+ isPushed,
72
+ side,
73
+ dimensions = {},
74
+ functionToCallOnWindowResize
75
+ }: {
76
+ type: string;
77
+ isPushed: boolean;
78
+ side: string;
79
+ dimensions: { width?: string };
80
+ functionToCallOnWindowResize: () => void;
81
+ }
82
+ ) => {
83
+ // This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
84
+ document.body.classList.add('euiBody--hasFlyout');
85
+
86
+ /**
87
+ * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
88
+ */
89
+ if (type === 'push') {
90
+ // Only add the event listener if we'll need to accommodate with padding
91
+ window.addEventListener('resize', functionToCallOnWindowResize);
92
+
93
+ if (isPushed) {
94
+ if (side === 'right') {
95
+ document.body.style.paddingRight = `${dimensions.width}px`;
96
+ } else if (side === 'left') {
97
+ document.body.style.paddingLeft = `${dimensions.width}px`;
98
+ }
99
+ }
100
+ }
101
+
102
+ return () => {
103
+ document.body.classList.remove('euiBody--hasFlyout');
104
+
105
+ if (type === 'push') {
106
+ window.removeEventListener('resize', functionToCallOnWindowResize);
107
+
108
+ if (side === 'right') {
109
+ document.body.style.paddingRight = '';
110
+ } else if (side === 'left') {
111
+ document.body.style.paddingLeft = '';
112
+ }
113
+ }
114
+ };
115
+ }
116
+ );
117
+
118
+ export const SIZES = keysOf(sizeMapping);
119
+ export type EuiFlyoutSize = typeof SIZES[number];
120
+
121
+ function isEuiFlyoutSizeNamed(value: any): value is EuiFlyoutSize {
122
+ return SIZES.includes(value as any);
123
+ }
124
+
125
+ export default class EuiCollapsibleNavComponent extends Component<EuiCollapsibleNavArgs> {
126
+ classesModifier = classesModifier;
127
+
128
+ @tracked windowIsLargeEnoughToPush = isWithinMinBreakpoint(
129
+ typeof window === 'undefined' ? -Infinity : window.innerWidth,
130
+ this.pushMinBreakpoint
131
+ );
132
+
133
+ @tracked dimensions: undefined | { width: number; height: number };
134
+
135
+ get as() {
136
+ return this.args.as ?? 'div';
137
+ }
138
+
139
+ get hideCloseButton() {
140
+ return this.args.hideCloseButton ?? false;
141
+ }
142
+
143
+ get closeButtonPosition() {
144
+ return this.args.closeButtonPosition ?? 'inside';
145
+ }
146
+
147
+ get ownFocus() {
148
+ return this.args.ownFocus ?? true;
149
+ }
150
+
151
+ get side() {
152
+ return this.args.side ?? 'right';
153
+ }
154
+
155
+ get size() {
156
+ return this.args.size ?? 'm';
157
+ }
158
+
159
+ get paddingSize() {
160
+ return this.args.paddingSize ?? 'l';
161
+ }
162
+
163
+ get maxWidth() {
164
+ return this.args.maxWidth ?? false;
165
+ }
166
+
167
+ get type() {
168
+ return this.args.type ?? 'overlay';
169
+ }
170
+
171
+ get outsideClickCloses() {
172
+ return this.args.outsideClickCloses ?? false;
173
+ }
174
+
175
+ get role() {
176
+ return this.args.role ?? 'dialog';
177
+ }
178
+
179
+ get pushMinBreakpoint() {
180
+ return this.args.pushMinBreakpoint ?? 'l';
181
+ }
182
+
183
+ get isPushed() {
184
+ return this.type === 'push' && this.windowIsLargeEnoughToPush;
185
+ }
186
+
187
+ get styles() {
188
+ let newStyle: { [key: string]: unknown } = {};
189
+
190
+ if (this.maxWidth !== false) {
191
+ const value =
192
+ typeof this.maxWidth === 'number'
193
+ ? `${this.maxWidth}px`
194
+ : this.maxWidth;
195
+ newStyle = { maxWidth: value };
196
+ }
197
+
198
+ if (!isEuiFlyoutSizeNamed(this.size) && newStyle) {
199
+ newStyle.width = this.size;
200
+ } else {
201
+ newStyle = { width: this.size };
202
+ }
203
+
204
+ return newStyle;
205
+ }
206
+
207
+ @action
208
+ functionToCallOnWindowResize() {
209
+ throttle(() => {
210
+ if (isWithinMinBreakpoint(window.innerWidth, this.pushMinBreakpoint)) {
211
+ this.windowIsLargeEnoughToPush = true;
212
+ } else {
213
+ this.windowIsLargeEnoughToPush = false;
214
+ }
215
+ }, 50);
216
+ }
217
+
218
+ @action
219
+ onClose() {
220
+ this.args.onClose?.();
221
+ }
222
+
223
+ @action
224
+ onButtonCloseClicked(e: MouseEvent) {
225
+ this.onClose();
226
+ this.args.closeButtonProps?.onClick?.(e);
227
+ }
228
+
229
+ @action
230
+ onResize(dimensions: { width: number; height: number }) {
231
+ this.dimensions = dimensions;
232
+ }
233
+ }
package/addon/components/eui-flyout-body/index.hbs CHANGED
@@ -1,15 +1,29 @@
1
- <div class="euiFlyoutBody">
1
+ <div class="euiFlyoutBody" ...attributes>
2
2
  <div
3
+ tabindex={{0}}
3
4
  class={{class-names
4
5
  "euiFlyoutBody__overflow"
5
- (if @hasBanner "euiFlyoutBody__overflow--hasBanner")
6
+ (if (has-block "banner") "euiFlyoutBody__overflow--hasBanner")
6
7
  }}
7
8
  >
8
- {{yield
9
- (hash
10
- banner=(component "eui-flyout-body/banner")
11
- content=(component "eui-flyout-body/content")
12
- )
9
+ {{#if (has-block "banner")}}
10
+ <div class="euiFlyoutBody__banner">
11
+ {{yield to="banner"}}
12
+ </div>
13
+ {{/if}}
14
+
15
+ {{#if
16
+ (or (has-block "banner") (has-block "content") (has-block "default"))
13
17
  }}
18
+ <div class="euiFlyoutBody__overflowContent">
19
+ {{#if (has-block "default")}}
20
+ {{yield to="default"}}
21
+ {{else}}
22
+ {{yield to="content"}}
23
+ {{/if}}
24
+ </div>
25
+ {{else}}
26
+ {{yield}}
27
+ {{/if}}
14
28
  </div>
15
29
  </div>
package/addon/components/eui-form-label/index.hbs CHANGED
@@ -5,7 +5,7 @@
5
5
  "euiFormLabel"
6
6
  ) as |classes|
7
7
  }}
8
- {{#if (eq @type "lengend")}}
8
+ {{#if (eq @type "legend")}}
9
9
  <legend class={{classes}} for={{@for}} ...attributes>
10
10
  {{@label}}
11
11
  {{yield}}
package/addon/components/eui-form-row/index.hbs CHANGED
@@ -15,7 +15,7 @@
15
15
  (use-state false)
16
16
  (arg-or-default
17
17
  @id (unique-id)
18
- )
18
+ )
19
19
  (arg-or-default @hasChildLabel true)
20
20
  as |classes fieldWrapperClasses errors isLegend focusedState rowId hasChildLabel|
21
21
  }}
@@ -52,7 +52,7 @@
52
52
  for={{if hasChildLabel rowId}}
53
53
  @isInvalid={{@isInvalid}}
54
54
  @type={{@labelType}}
55
- @isFocused={{and (not isLegend) focusedState.value}}
55
+ @isFocused={{and (not @isDisabled) (not isLegend) focusedState.value}}
56
56
  >
57
57
  {{yield @label to="label"}}
58
58
  </EuiFormLabel>
@@ -63,7 +63,7 @@
63
63
  for={{if hasChildLabel rowId}}
64
64
  @isInvalid={{@isInvalid}}
65
65
  @type={{@labelType}}
66
- @isFocused={{and (not isLegend) focusedState.value}}
66
+ @isFocused={{and (not @isDisabled) (not isLegend) focusedState.value}}
67
67
  >
68
68
  {{@label}}
69
69
  </EuiFormLabel>
@@ -147,7 +147,7 @@
147
147
  for={{if hasChildLabel rowId}}
148
148
  @isInvalid={{@isInvalid}}
149
149
  @type={{@labelType}}
150
- @isFocused={{and (not isLegend) focusedState.value}}
150
+ @isFocused={{and (not @isDisabled) (not isLegend) focusedState.value}}
151
151
  >
152
152
  {{yield @label to="label"}}
153
153
  </EuiFormLabel>
@@ -158,7 +158,7 @@
158
158
  for={{if hasChildLabel rowId}}
159
159
  @isInvalid={{@isInvalid}}
160
160
  @type={{@labelType}}
161
- @isFocused={{and (not isLegend) focusedState.value}}
161
+ @isFocused={{and (not @isDisabled) (not isLegend) focusedState.value}}
162
162
  >
163
163
  {{@label}}
164
164
  </EuiFormLabel>
@@ -202,12 +202,16 @@
202
202
  {{yield to="helpText"}}
203
203
  </EuiFormHelpText>
204
204
  {{else}}
205
- <EuiFormHelpText id="{{rowId}}-help" class={{@helpTextClasses}}>
206
- {{@helpText}}
207
- </EuiFormHelpText>
205
+ {{#let (if (is-array @helpText) @helpText (array @helpText)) as |helpTexts|}}
206
+ {{#each helpTexts as |helpText i|}}
207
+ <EuiFormHelpText id="{{rowId}}-help-{{i}}" class={{@helpTextClasses}}>
208
+ {{helpText}}
209
+ </EuiFormHelpText>
210
+ {{/each}}
211
+ {{/let}}
208
212
  {{/if}}
209
213
  {{/if}}
210
214
  </div>
211
215
  </div>
212
216
  {{/if}}
213
- {{/let}}
217
+ {{/let}}
package/addon/components/eui-header/index.hbs CHANGED
@@ -1,5 +1,5 @@
1
1
  <div
2
- {{fixed-header @position}}
2
+ {{this.fixedHeader @position}}
3
3
  class={{class-names
4
4
  componentName="EuiHeader"
5
5
  theme=(arg-or-default @theme "default")
@@ -7,5 +7,20 @@
7
7
  }}
8
8
  ...attributes
9
9
  >
10
- {{yield}}
11
- </div>
10
+ {{#if @sections}}
11
+ {{#each @sections as |section|}}
12
+ {{#each @section.items as |itemSection|}}
13
+ <EuiHeaderSection>
14
+ <EuiHeaderSectionItem @border={{section.borders}}>
15
+ {{itemSection.text}}
16
+ </EuiHeaderSectionItem>
17
+ </EuiHeaderSection>
18
+ {{/each}}
19
+ {{#each @section.breadcrumbs as |breadcrumbs|}}
20
+ <EuiHeaderBreadcrumbs @breadcrumbs={{breadcrumbs}} />
21
+ {{/each}}
22
+ {{/each}}
23
+ {{else}}
24
+ {{yield}}
25
+ {{/if}}
26
+ </div>
package/addon/{modifiers/fixed-header.ts → components/eui-header/index.ts} RENAMED
@@ -1,8 +1,13 @@
1
+ import Component from '@glimmer/component';
2
+
1
3
  import { modifier } from 'ember-modifier';
2
4
 
3
5
  let euiHeaderFixedCounter = 0;
4
6
 
5
- export default modifier(function fixedHeader(_, [position]: [string]): void | (() => unknown) {
7
+ const fixedHeaderModifier = modifier(function fixedHeader(
8
+ _,
9
+ [position]: [string]
10
+ ): void | (() => unknown) {
6
11
  if (position === 'fixed') {
7
12
  // Increment fixed header counter for each fixed header
8
13
  euiHeaderFixedCounter++;
@@ -17,3 +22,7 @@ export default modifier(function fixedHeader(_, [position]: [string]): void | ((
17
22
  };
18
23
  }
19
24
  });
25
+
26
+ export default class EuiHeaderComponent extends Component {
27
+ fixedHeader = fixedHeaderModifier;
28
+ }
package/addon/components/eui-header-alert/index.hbs ADDED
@@ -0,0 +1,25 @@
1
+ {{#let (unique-id) as |ariaId|}}
2
+ <article
3
+ aria-labelledby="{{ariaId}}-title"
4
+ class="euiHeaderAlert"
5
+ ...attributes
6
+ >
7
+ <EuiFlexGroup @justifyContent="spaceBetween">
8
+ <EuiFlexItem>
9
+ <div class="euiHeaderAlert__date">{{yield to="date"}}</div>
10
+ </EuiFlexItem>
11
+ {{#if (has-block "badge")}}
12
+ <EuiFlexItem @grow={{false}}>{{yield to="badge"}}</EuiFlexItem>
13
+ {{/if}}
14
+
15
+ </EuiFlexGroup>
16
+
17
+ <h3 id="{{ariaId}}-title" class="euiHeaderAlert__title">
18
+ {{yield to="title"}}
19
+ </h3>
20
+ <div class="euiHeaderAlert__text">{{yield to="text"}}</div>
21
+ {{#if (has-block "action")}}
22
+ <div class="euiHeaderAlert__action euiLink">{{yield to="action"}}</div>
23
+ {{/if}}
24
+ </article>
25
+ {{/let}}
package/addon/components/eui-header-breadcrumbs/index.hbs ADDED
@@ -0,0 +1,7 @@
1
+ <EuiBreadcrumbs
2
+ @max={{4}}
3
+ @truncate={{true}}
4
+ @breadcrumbs={{@breadcrumbs}}
5
+ class="euiHeaderBreadcrumbs"
6
+ ...attributes
7
+ />
package/addon/components/eui-header-links/index.hbs CHANGED
@@ -0,0 +1,41 @@
1
+ <nav class="euiHeaderLinks">
2
+ <EuiHideFor @sizes={{this.popoverBreakpoints}}>
3
+ <div
4
+ class={{class-names
5
+ "euiHeaderLinks__list"
6
+ componentName="EuiHeaderLinks"
7
+ gutterSize=(arg-or-default @gutterSize "xs")
8
+ }}
9
+ >
10
+ {{yield}}
11
+ </div>
12
+ </EuiHideFor>
13
+
14
+ {{#if this.hasMobileVersion}}
15
+ <EuiShowFor @sizes={{this.popoverBreakpoints}}>
16
+ <EuiPopover
17
+ @isOpen={{this.pop1}}
18
+ @anchorPosition="downRight"
19
+ @panelPaddingSize={{@panelPaddingSize}}
20
+ @closePopover={{set this "pop1" false}}
21
+ >
22
+ <:button>
23
+ <EuiButtonEmpty @color="text" {{on "click" (set this "pop1" true)}}>
24
+ <EuiIcon @type="apps" />
25
+ </EuiButtonEmpty>
26
+ </:button>
27
+ <:content>
28
+ <div
29
+ class={{class-names
30
+ "euiHeaderLinks__mobileList"
31
+ componentName="EuiHeaderLinks"
32
+ mobileGutterSize=(arg-or-default @gutterSize "xs")
33
+ }}
34
+ >
35
+ {{yield}}
36
+ </div>
37
+ </:content>
38
+ </EuiPopover>
39
+ </EuiShowFor>
40
+ {{/if}}
41
+ </nav>
package/addon/components/eui-header-links/index.ts ADDED
@@ -0,0 +1,14 @@
1
+ import GlimmerComponent from '@glimmer/component';
2
+
3
+ interface EuiHeaderLinksArgs {
4
+ popoverBreakpoints?: string[];
5
+ }
6
+ export default class EuiHeaderLinksComponent extends GlimmerComponent<EuiHeaderLinksArgs> {
7
+ get popoverBreakpoints() {
8
+ return this.args.popoverBreakpoints || ['xs', 's'];
9
+ }
10
+
11
+ get hasMobileVersion() {
12
+ return this.popoverBreakpoints?.length > 0;
13
+ }
14
+ }
package/addon/components/eui-header-section-item-button/index.hbs CHANGED
@@ -1,10 +1,18 @@
1
- <button
2
- class="euiHeaderSectionItem__button"
3
- type="button"
1
+ <EuiButtonEmpty
2
+ class="euiHeaderSectionItemButton"
4
3
  ...attributes
4
+ @isDisabled={{@disabled}}
5
+ @href={{@href}}
6
+ @color="text"
7
+ {{did-insert (set this "buttonRef")}}
5
8
  {{on "click" (optional @onClick)}}
6
9
  >
7
- {{yield}}
10
+ <span
11
+ {{did-insert this.setAnimationTargetRef}}
12
+ class="euiHeaderSectionItemButton__content"
13
+ >
14
+ {{yield}}
15
+ </span>
8
16
  {{#if @notification}}
9
17
  {{#if (eq @notification true)}}
10
18
  <EuiIcon
@@ -13,13 +21,23 @@
13
21
  @type="dot"
14
22
  @size="l"
15
23
  />
16
- {{else}}
17
- <EuiNotificationBadge
18
- class="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
19
- @color={{arg-or-default @notificationColor "accent"}}
20
- >
21
- {{@notification}}
22
- </EuiNotificationBadge>
24
+ {{else if @notification}}
25
+ <EuiHideFor @sizes={{array "xs"}}>
26
+ <EuiNotificationBadge
27
+ class="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
28
+ @color={{arg-or-default @notificationColor "accent"}}
29
+ >
30
+ {{@notification}}
31
+ </EuiNotificationBadge>
32
+ </EuiHideFor>
33
+ <EuiShowFor @sizes={{array "xs"}}>
34
+ <EuiIcon
35
+ @iconClasses="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot"
36
+ @color={{arg-or-default @notificationColor "accent"}}
37
+ @type="dot"
38
+ @size="l"
39
+ />
40
+ </EuiShowFor>
23
41
  {{/if}}
24
42
  {{/if}}
25
- </button>
43
+ </EuiButtonEmpty>
package/addon/components/eui-header-section-item-button/index.ts ADDED
@@ -0,0 +1,131 @@
1
+ import Component from '@glimmer/component';
2
+ import { tracked } from '@glimmer/tracking';
3
+
4
+ const keyframes: Keyframe[] = [
5
+ { transform: 'rotate(0)', offset: 0, easing: 'ease-in-out' },
6
+ {
7
+ transform: 'rotate(30deg)',
8
+ offset: 0.01,
9
+ easing: 'ease-in-out'
10
+ },
11
+ {
12
+ transform: 'rotate(-28deg)',
13
+ offset: 0.03,
14
+ easing: 'ease-in-out'
15
+ },
16
+ {
17
+ transform: 'rotate(34deg)',
18
+ offset: 0.05,
19
+ easing: 'ease-in-out'
20
+ },
21
+ {
22
+ transform: 'rotate(-32deg)',
23
+ offset: 0.07,
24
+ easing: 'ease-in-out'
25
+ },
26
+ {
27
+ transform: 'rotate(30deg)',
28
+ offset: 0.09,
29
+ easing: 'ease-in-out'
30
+ },
31
+ {
32
+ transform: 'rotate(-28deg)',
33
+ offset: 0.11,
34
+ easing: 'ease-in-out'
35
+ },
36
+ {
37
+ transform: 'rotate(26deg)',
38
+ offset: 0.13,
39
+ easing: 'ease-in-out'
40
+ },
41
+ {
42
+ transform: 'rotate(-24deg)',
43
+ offset: 0.15,
44
+ easing: 'ease-in-out'
45
+ },
46
+ {
47
+ transform: 'rotate(22deg)',
48
+ offset: 0.17,
49
+ easing: 'ease-in-out'
50
+ },
51
+ {
52
+ transform: 'rotate(-20deg)',
53
+ offset: 0.19,
54
+ easing: 'ease-in-out'
55
+ },
56
+ {
57
+ transform: 'rotate(18deg)',
58
+ offset: 0.21,
59
+ easing: 'ease-in-out'
60
+ },
61
+ {
62
+ transform: 'rotate(-16deg)',
63
+ offset: 0.23,
64
+ easing: 'ease-in-out'
65
+ },
66
+ {
67
+ transform: 'rotate(14deg)',
68
+ offset: 0.25,
69
+ easing: 'ease-in-out'
70
+ },
71
+ {
72
+ transform: 'rotate(-12deg)',
73
+ offset: 0.27,
74
+ easing: 'ease-in-out'
75
+ },
76
+ {
77
+ transform: 'rotate(10deg)',
78
+ offset: 0.29,
79
+ easing: 'ease-in-out'
80
+ },
81
+ {
82
+ transform: 'rotate(-8deg)',
83
+ offset: 0.31,
84
+ easing: 'ease-in-out'
85
+ },
86
+ {
87
+ transform: 'rotate(6deg)',
88
+ offset: 0.33,
89
+ easing: 'ease-in-out'
90
+ },
91
+ {
92
+ transform: 'rotate(-4deg)',
93
+ offset: 0.35,
94
+ easing: 'ease-in-out'
95
+ },
96
+ {
97
+ transform: 'rotate(2deg)',
98
+ offset: 0.37,
99
+ easing: 'ease-in-out'
100
+ },
101
+ {
102
+ transform: 'rotate(-1deg)',
103
+ offset: 0.39,
104
+ easing: 'ease-in-out'
105
+ },
106
+ {
107
+ transform: 'rotate(1deg)',
108
+ offset: 0.41,
109
+ easing: 'ease-in-out'
110
+ },
111
+ { transform: 'rotate(0)', offset: 0.43, easing: 'ease-in-out' },
112
+ { transform: 'rotate(0)', offset: 1, easing: 'ease-in-out' }
113
+ ];
114
+
115
+ interface EuiHeaderSectionItemButtonComponentArgs {
116
+ ref?: (api: { euiAnimate: () => void }) => void;
117
+ }
118
+
119
+ export default class EuiHeaderSectionItemButtonComponent extends Component<EuiHeaderSectionItemButtonComponentArgs> {
120
+ @tracked buttonRef: HTMLButtonElement | undefined;
121
+ @tracked animationTargetRef: HTMLSpanElement | undefined;
122
+
123
+ setAnimationTargetRef = (ele: HTMLSpanElement) => {
124
+ this.animationTargetRef = ele;
125
+ this.args.ref?.({ euiAnimate: this.animate });
126
+ };
127
+
128
+ animate = () => {
129
+ this.animationTargetRef?.animate(keyframes, { duration: 5000 });
130
+ };
131
+ }