@ember-eui/core 4.4.0 → 5.0.0-alpha.4

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 (639) 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 +5 -2
  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 +83 -0
  51. package/addon/components/eui-field-number/index.hbs +3 -3
  52. package/addon/components/eui-field-number/types.ts +4 -1
  53. package/addon/components/eui-field-search/index.hbs +2 -1
  54. package/addon/components/eui-field-text/index.hbs +3 -1
  55. package/addon/components/eui-file-picker/index.hbs +15 -11
  56. package/addon/components/eui-file-picker/index.ts +26 -8
  57. package/addon/components/eui-flyout/index.hbs +130 -43
  58. package/addon/components/eui-flyout/index.ts +233 -0
  59. package/addon/components/eui-flyout-body/index.hbs +21 -7
  60. package/addon/components/eui-form-control-layout-custom-icon/types.ts +3 -1
  61. package/addon/components/eui-form-control-layout-icons/types.ts +4 -1
  62. package/addon/components/eui-form-label/index.hbs +1 -1
  63. package/addon/components/eui-form-row/index.hbs +13 -9
  64. package/addon/components/eui-global-toast-list/index.ts +5 -6
  65. package/addon/components/eui-header/index.hbs +18 -3
  66. package/addon/{modifiers/fixed-header.ts → components/eui-header/index.ts} +10 -1
  67. package/addon/components/eui-header-alert/index.hbs +25 -0
  68. package/addon/components/eui-header-breadcrumbs/index.hbs +7 -0
  69. package/addon/components/eui-header-links/index.hbs +41 -0
  70. package/addon/components/eui-header-links/index.ts +14 -0
  71. package/addon/components/eui-header-section-item-button/index.hbs +30 -12
  72. package/addon/components/eui-header-section-item-button/index.ts +131 -0
  73. package/addon/components/eui-health/index.hbs +15 -13
  74. package/addon/components/eui-hide-for/index.hbs +3 -0
  75. package/addon/components/eui-hide-for/index.ts +33 -0
  76. package/addon/components/eui-icon/index.hbs +6 -3
  77. package/addon/components/eui-icon/index.ts +4 -0
  78. package/addon/components/eui-image/index.hbs +63 -25
  79. package/addon/components/eui-image/index.ts +7 -2
  80. package/addon/components/eui-input-popover/index.ts +6 -4
  81. package/addon/components/eui-key-pad-menu/index.hbs +16 -0
  82. package/addon/components/eui-key-pad-menu/key/index.hbs +1 -0
  83. package/addon/components/eui-key-pad-menu-item/index.hbs +66 -0
  84. package/addon/components/eui-key-pad-menu-item/index.ts +11 -0
  85. package/addon/components/eui-link/index.hbs +50 -0
  86. package/addon/components/eui-list-group-item/index.hbs +10 -2
  87. package/addon/components/eui-loading-logo/index.hbs +14 -0
  88. package/addon/components/eui-markdown-editor/index.hbs +4 -1
  89. package/addon/components/eui-markdown-editor/index.ts +54 -0
  90. package/addon/components/eui-markdown-editor-footer/index.hbs +39 -40
  91. package/addon/components/eui-markdown-format/index.ts +1 -1
  92. package/addon/components/eui-markdown-format/markdown-code/index.hbs +2 -2
  93. package/addon/components/eui-markdown-format/markdown-code-block/index.hbs +1 -0
  94. package/addon/components/eui-modal/index.hbs +28 -24
  95. package/addon/components/eui-overlay-mask/index.hbs +4 -4
  96. package/addon/components/eui-overlay-mask/index.ts +14 -1
  97. package/addon/components/eui-page/index.hbs +3 -6
  98. package/addon/components/eui-page-body/index.hbs +47 -15
  99. package/addon/components/eui-page-content/index.hbs +6 -8
  100. package/addon/components/eui-page-content-body/index.hbs +13 -1
  101. package/addon/components/eui-page-content-header/index.hbs +6 -0
  102. package/addon/components/eui-page-header/index.hbs +31 -6
  103. package/addon/components/eui-page-header-content/index.hbs +219 -0
  104. package/addon/components/eui-page-header-content/index.ts +49 -0
  105. package/addon/components/eui-page-side-bar/index.hbs +8 -1
  106. package/addon/components/eui-page-template/index.hbs +417 -0
  107. package/addon/components/eui-page-template/index.ts +89 -0
  108. package/addon/components/eui-panel/index.hbs +58 -12
  109. package/addon/components/eui-popover/index.hbs +8 -4
  110. package/addon/components/eui-popover/index.ts +28 -12
  111. package/addon/components/eui-portal/index.ts +2 -1
  112. package/addon/components/eui-progress/index.hbs +16 -13
  113. package/addon/components/eui-radio/index.hbs +9 -3
  114. package/addon/components/eui-range/index.hbs +33 -11
  115. package/addon/components/eui-range/index.ts +7 -4
  116. package/addon/components/eui-range-input/index.hbs +37 -31
  117. package/addon/components/eui-range-input/types.ts +2 -1
  118. package/addon/components/eui-range-levels/index.hbs +3 -3
  119. package/addon/components/eui-range-levels/index.ts +14 -3
  120. package/addon/components/eui-range-ticks/index.hbs +2 -2
  121. package/addon/components/eui-range-track/index.hbs +10 -2
  122. package/addon/components/eui-range-track/index.ts +23 -6
  123. package/addon/components/eui-show-for/index.hbs +3 -0
  124. package/addon/components/eui-show-for/index.ts +79 -0
  125. package/addon/components/eui-side-nav/index.hbs +161 -36
  126. package/addon/components/eui-side-nav/index.ts +28 -0
  127. package/addon/components/eui-side-nav-item/button/index.hbs +26 -14
  128. package/addon/components/eui-side-nav-item/index.hbs +52 -25
  129. package/addon/components/eui-split-panel/inner/index.hbs +11 -0
  130. package/addon/components/eui-split-panel/outer/index.hbs +27 -0
  131. package/addon/components/eui-split-panel/outer/index.ts +37 -0
  132. package/addon/components/eui-step/eui-step-number/index.hbs +21 -4
  133. package/addon/components/eui-steps/index.hbs +7 -1
  134. package/addon/components/eui-tab/index.hbs +60 -46
  135. package/addon/components/eui-tab/index.ts +23 -0
  136. package/addon/components/eui-tabbed-content/index.hbs +14 -27
  137. package/addon/components/eui-tabbed-content/index.ts +134 -0
  138. package/addon/components/eui-tabs/index.hbs +6 -9
  139. package/addon/components/eui-tool-tip/index.hbs +6 -7
  140. package/addon/components/eui-tool-tip/index.ts +27 -11
  141. package/addon/helpers/arg-or-default.ts +4 -1
  142. package/addon/helpers/class-names.ts +2 -0
  143. package/addon/helpers/eui-palette.ts +4 -1
  144. package/addon/helpers/get-range-tick.ts +53 -8
  145. package/addon/helpers/hex-to-rgb.ts +4 -1
  146. package/addon/helpers/inline-styles.ts +10 -3
  147. package/addon/helpers/is-within-number.ts +4 -1
  148. package/addon/helpers/starts-with.ts +3 -1
  149. package/addon/helpers/unique-id.ts +4 -1
  150. package/addon/initializers/eui-config.ts +12 -0
  151. package/addon/modifiers/mutation-observer.ts +4 -1
  152. package/addon/modifiers/outside-click-detector.ts +4 -4
  153. package/addon/styles/ember-eui.css +2 -10
  154. package/addon/utils/accesibility/cascading-menu-keys.ts +8 -1
  155. package/addon/utils/breakpoint.ts +114 -0
  156. package/addon/utils/code/utils.ts +304 -0
  157. package/addon/utils/color/color_palette.ts +3 -3
  158. package/addon/utils/color/eui_palettes.ts +23 -6
  159. package/addon/utils/css-mappings/eui-avatar.ts +51 -9
  160. package/addon/utils/css-mappings/eui-badge.ts +6 -2
  161. package/addon/utils/css-mappings/eui-beta-badge.ts +22 -0
  162. package/addon/utils/css-mappings/eui-bottom-bar.ts +8 -1
  163. package/addon/utils/css-mappings/eui-button-empty.ts +4 -4
  164. package/addon/utils/css-mappings/eui-button-icon.ts +19 -6
  165. package/addon/utils/css-mappings/eui-button.ts +2 -1
  166. package/addon/utils/css-mappings/eui-card-select.ts +1 -11
  167. package/addon/utils/css-mappings/eui-card.ts +1 -18
  168. package/addon/utils/css-mappings/{eui-code-block-impl.ts → eui-code-block.ts} +0 -0
  169. package/addon/utils/css-mappings/eui-description-list.ts +29 -0
  170. package/addon/utils/css-mappings/eui-empty-prompt.ts +17 -0
  171. package/addon/utils/css-mappings/eui-flyout.ts +21 -1
  172. package/addon/utils/css-mappings/eui-header-links.ts +27 -0
  173. package/addon/utils/css-mappings/eui-health.ts +17 -0
  174. package/addon/utils/css-mappings/eui-icon.ts +93 -70
  175. package/addon/utils/css-mappings/eui-image.ts +17 -2
  176. package/addon/utils/css-mappings/eui-link.ts +21 -0
  177. package/addon/utils/css-mappings/eui-list-group.ts +5 -1
  178. package/addon/utils/css-mappings/eui-modal.ts +5 -1
  179. package/addon/utils/css-mappings/eui-page-body.ts +25 -0
  180. package/addon/utils/css-mappings/eui-page-content-body.ts +17 -0
  181. package/addon/utils/css-mappings/eui-page-content.ts +7 -1
  182. package/addon/utils/css-mappings/eui-page-header.ts +17 -0
  183. package/addon/utils/css-mappings/eui-page-side-bar.ts +17 -0
  184. package/addon/utils/css-mappings/eui-panel.ts +1 -0
  185. package/addon/utils/css-mappings/eui-progress-data.ts +0 -1
  186. package/addon/utils/css-mappings/eui-progress.ts +0 -2
  187. package/addon/utils/css-mappings/eui-range-levels.ts +22 -4
  188. package/addon/utils/css-mappings/eui-tabs.ts +3 -1
  189. package/addon/utils/css-mappings/eui-text-color.ts +3 -2
  190. package/addon/utils/css-mappings/index.ts +23 -3
  191. package/addon/utils/detect-element-resize.js +248 -0
  192. package/addon/utils/markdown/markdown-types.ts +10 -11
  193. package/addon/utils/markdown/plugins/markdown-add-components/index.ts +1 -0
  194. package/addon/utils/markdown/plugins/{markdown-add-components.ts → markdown-add-components/processor.ts} +14 -7
  195. package/addon/utils/markdown/plugins/markdown-checkbox/index.ts +9 -0
  196. package/addon/utils/markdown/plugins/{markdown-checkbox.ts → markdown-checkbox/parser.ts} +3 -5
  197. package/addon/utils/markdown/plugins/markdown-default-plugins/index.ts +12 -0
  198. package/addon/utils/markdown/plugins/{markdown-default-plugins.ts → markdown-default-plugins/parsing-plugins.ts} +13 -25
  199. package/addon/utils/markdown/plugins/markdown-default-plugins/plugins.ts +32 -0
  200. package/addon/utils/markdown/plugins/markdown-default-plugins/processing-plugins.ts +67 -0
  201. package/addon/utils/markdown/plugins/markdown-default-plugins/ui-plugins.ts +27 -0
  202. package/addon/utils/markdown/plugins/markdown-tooltip/index.ts +2 -0
  203. package/addon/utils/markdown/plugins/{markdown-tooltip.ts → markdown-tooltip/parser.ts} +3 -23
  204. package/addon/utils/markdown/plugins/markdown-tooltip/plugin.ts +17 -0
  205. package/addon/utils/markdown/plugins/to-dom.ts +3 -1
  206. package/addon/utils/markdown/remark/remark-prismjs.ts +41 -0
  207. package/addon/utils/popover/index.ts +87 -35
  208. package/addon/utils/range/index.ts +1 -0
  209. package/addon/utils/transition.ts +10 -3
  210. package/addon/version.ts +6 -0
  211. package/app/components/eui-auto-sizer/index.js +1 -0
  212. package/app/components/eui-avatar/index.js +1 -1
  213. package/app/components/eui-badge-group/badge-group-item/index.js +1 -1
  214. package/app/components/eui-badge-group/index.js +1 -1
  215. package/app/components/eui-breadcrumbs/index.js +1 -0
  216. package/app/components/eui-button-icon/index.js +1 -1
  217. package/app/components/eui-card-select/index.js +1 -0
  218. package/app/components/{eui-code-block-impl → eui-code-block/controls}/index.js +1 -1
  219. package/app/components/{eui-code-block-impl/code-block-controls → eui-code-block/full-screen-display}/index.js +1 -1
  220. package/app/components/eui-code-block/virtualized/index.js +1 -0
  221. package/app/components/eui-combo-box/create-option/index.js +1 -1
  222. package/app/components/eui-comment/eui-comment-timeline/index.js +1 -1
  223. package/app/components/eui-comment/index.js +1 -1
  224. package/app/components/eui-description-list/index.js +1 -0
  225. package/app/components/eui-description-list-description/index.js +1 -0
  226. package/app/components/eui-description-list-title/index.js +1 -0
  227. package/app/components/eui-dual-range/index.js +1 -1
  228. package/app/components/eui-empty-prompt/index.js +1 -0
  229. package/app/components/eui-field-number/index.js +1 -1
  230. package/app/components/eui-field-password/index.js +1 -1
  231. package/app/components/eui-field-search/index.js +1 -1
  232. package/app/components/eui-field-text/index.js +1 -1
  233. package/app/components/eui-file-picker/index.js +1 -1
  234. package/app/components/eui-form/index.js +1 -1
  235. package/app/components/eui-form-control-layout/index.js +1 -1
  236. package/app/components/eui-form-control-layout-clear-button/index.js +1 -1
  237. package/app/components/eui-form-control-layout-custom-icon/index.js +1 -1
  238. package/app/components/eui-form-control-layout-delimited/index.js +1 -1
  239. package/app/components/eui-form-control-layout-icons/index.js +1 -1
  240. package/app/components/eui-form-error-text/index.js +1 -1
  241. package/app/components/eui-form-fieldset/index.js +1 -1
  242. package/app/components/eui-form-help-text/index.js +1 -1
  243. package/app/components/eui-form-label/index.js +1 -1
  244. package/app/components/eui-form-legend/index.js +1 -1
  245. package/app/components/eui-form-row/index.js +1 -1
  246. package/app/components/eui-header-alert/index.js +1 -0
  247. package/app/components/eui-header-breadcrumbs/index.js +1 -0
  248. package/app/components/eui-header-links/index.js +1 -0
  249. package/app/components/eui-hide-for/index.js +1 -0
  250. package/app/components/eui-image.js +1 -1
  251. package/app/components/eui-key-pad-menu/index.js +1 -0
  252. package/app/components/eui-key-pad-menu/key/index.js +1 -0
  253. package/app/components/eui-key-pad-menu-item/index.js +1 -0
  254. package/app/components/eui-link/index.js +1 -0
  255. package/app/components/eui-list-group/index.js +1 -1
  256. package/app/components/eui-list-group-item/index.js +1 -1
  257. package/app/components/eui-loading-logo/index.js +1 -0
  258. package/app/components/eui-overlay-mask.js +1 -1
  259. package/app/components/eui-page/index.js +1 -1
  260. package/app/components/eui-page-body/index.js +1 -1
  261. package/app/components/eui-page-content/index.js +1 -1
  262. package/app/components/eui-page-content-body/index.js +1 -1
  263. package/app/components/eui-page-content-header/index.js +1 -1
  264. package/app/components/eui-page-content-header-section/index.js +1 -1
  265. package/app/components/eui-page-header/index.js +1 -1
  266. package/app/components/eui-page-header-content/index.js +1 -0
  267. package/app/components/eui-page-header-section/index.js +1 -1
  268. package/app/components/eui-page-template/index.js +1 -0
  269. package/app/components/eui-panel/index.js +1 -1
  270. package/app/components/eui-popover/index.js +1 -1
  271. package/app/components/eui-popover-footer/index.js +1 -1
  272. package/app/components/eui-popover-title/index.js +1 -1
  273. package/app/components/eui-portal/index.js +1 -1
  274. package/app/components/eui-progress/index.js +1 -1
  275. package/app/components/eui-radio/index.js +1 -1
  276. package/app/components/eui-radio-group/index.js +1 -1
  277. package/app/components/eui-range/index.js +1 -1
  278. package/app/components/eui-range-highlight/index.js +1 -1
  279. package/app/components/eui-range-input/index.js +1 -1
  280. package/app/components/eui-range-label/index.js +1 -1
  281. package/app/components/eui-range-levels/index.js +1 -1
  282. package/app/components/eui-range-slider/index.js +1 -1
  283. package/app/components/eui-range-thumb/index.js +1 -1
  284. package/app/components/eui-range-ticks/index.js +1 -1
  285. package/app/components/eui-range-tooltip/index.js +1 -1
  286. package/app/components/eui-range-track/index.js +1 -1
  287. package/app/components/eui-range-wrapper/index.js +1 -1
  288. package/app/components/eui-select/index.js +1 -1
  289. package/app/components/eui-show-for/index.js +1 -0
  290. package/app/components/eui-side-nav/index.js +1 -1
  291. package/app/components/eui-side-nav-item/button/index.js +1 -1
  292. package/app/components/eui-side-nav-item/index.js +1 -1
  293. package/app/components/eui-spacer/index.js +1 -1
  294. package/app/components/eui-split-panel/inner/index.js +1 -0
  295. package/app/components/eui-split-panel/outer/index.js +1 -0
  296. package/app/components/eui-switch/index.js +1 -1
  297. package/app/components/eui-tab/index.js +1 -1
  298. package/app/components/eui-tabs/index.js +1 -1
  299. package/app/components/eui-text/index.js +1 -1
  300. package/app/components/eui-text-align/index.js +1 -1
  301. package/app/components/eui-text-area/index.js +1 -1
  302. package/app/components/eui-text-color/index.js +1 -1
  303. package/app/components/eui-title/index.js +1 -1
  304. package/app/components/eui-tool-tip/index.js +1 -1
  305. package/app/components/eui-tool-tip-popover/index.js +1 -1
  306. package/app/helpers/eui-palette.js +1 -1
  307. package/app/helpers/hex-to-rgb.js +1 -1
  308. package/app/initializers/eui-config.js +1 -0
  309. package/app/utils/copy-to-clipboard.js +1 -0
  310. package/docs/display/avatar-demo/demo1.md +43 -49
  311. package/docs/display/avatar-demo/demo2.md +42 -0
  312. package/docs/display/avatar-demo/demo3.md +33 -0
  313. package/docs/display/avatar-demo/demo4.md +53 -0
  314. package/docs/display/avatar-demo/demo5.md +38 -0
  315. package/docs/display/avatar.md +1 -1
  316. package/docs/display/badge-demo/demo1.md +78 -137
  317. package/docs/display/badge-demo/demo2.md +32 -0
  318. package/docs/display/badge-demo/demo3.md +70 -0
  319. package/docs/display/badge-demo/demo4.md +27 -0
  320. package/docs/display/badge-demo/demo5.md +31 -0
  321. package/docs/display/badge-demo/demo6.md +59 -0
  322. package/docs/display/badge-demo/demo7.md +97 -0
  323. package/docs/display/badge-demo/demo8.md +19 -0
  324. package/docs/display/badge.md +1 -1
  325. package/docs/display/callout-demo/demo1.md +29 -81
  326. package/docs/display/callout-demo/demo2.md +28 -0
  327. package/docs/display/callout-demo/demo3.md +29 -0
  328. package/docs/display/callout-demo/demo4.md +26 -0
  329. package/docs/display/callout.md +9 -1
  330. package/docs/display/card/basic-card-demo/demo1.md +22 -316
  331. package/docs/display/card/basic-card.md +9 -1
  332. package/docs/display/card/beta-badge-demo/demo1.md +47 -0
  333. package/docs/display/card/beta-badge.md +9 -0
  334. package/docs/display/card/checkable-demo/demo1.md +20 -94
  335. package/docs/display/card/checkable-demo/demo2.md +63 -0
  336. package/docs/display/card/checkable.md +9 -1
  337. package/docs/display/card/custom-children-demo/demo1.md +93 -0
  338. package/docs/display/card/custom-children.md +9 -0
  339. package/docs/display/card/footer-demo/demo1.md +77 -0
  340. package/docs/display/card/footer.md +9 -0
  341. package/docs/display/card/images-demo/demo1.md +57 -0
  342. package/docs/display/card/images.md +9 -0
  343. package/docs/display/card/layout-demo/demo1.md +40 -0
  344. package/docs/display/card/layout.md +9 -0
  345. package/docs/display/card/selectable-demo/demo1.md +60 -53
  346. package/docs/display/card/selectable.md +9 -1
  347. package/docs/display/comment-list.md +1 -1
  348. package/docs/display/description-list-demo/demo1.md +53 -0
  349. package/docs/display/description-list-demo/demo2.md +43 -0
  350. package/docs/display/description-list-demo/demo3.md +58 -0
  351. package/docs/display/description-list-demo/demo4.md +42 -0
  352. package/docs/display/description-list-demo/demo5.md +62 -0
  353. package/docs/display/description-list-demo/demo6.md +46 -0
  354. package/docs/display/description-list.md +1 -0
  355. package/docs/display/empty-prompt-demo/demo1.md +25 -0
  356. package/docs/display/empty-prompt-demo/demo2.md +16 -0
  357. package/docs/display/empty-prompt-demo/demo3.md +67 -0
  358. package/docs/display/empty-prompt-demo/demo4.md +21 -0
  359. package/docs/display/empty-prompt-demo/demo5.md +33 -0
  360. package/docs/display/empty-prompt-demo/demo6.md +43 -0
  361. package/docs/display/empty-prompt-demo/demo7.md +162 -0
  362. package/docs/display/empty-prompt-demo/demo8.md +57 -0
  363. package/docs/display/empty-prompt.md +1 -0
  364. package/docs/display/health-demo/demo1.md +11 -8
  365. package/docs/display/health-demo/demo2.md +31 -0
  366. package/docs/display/health.md +9 -1
  367. package/docs/display/icons-demo/demo1.md +270 -57
  368. package/docs/display/icons-demo/demo2.md +76 -0
  369. package/docs/display/icons-demo/demo3.md +76 -0
  370. package/docs/display/icons-demo/demo4.md +104 -0
  371. package/docs/display/icons-demo/demo5.md +64 -0
  372. package/docs/display/icons-demo/demo6.md +63 -0
  373. package/docs/display/icons-demo/demo7.md +101 -0
  374. package/docs/display/icons-demo/demo8.md +47 -0
  375. package/docs/display/icons.md +1 -1
  376. package/docs/display/image-demo/demo1.md +15 -50
  377. package/docs/display/image-demo/demo2.md +35 -0
  378. package/docs/display/image-demo/demo3.md +75 -0
  379. package/docs/display/image-demo/demo4.md +80 -0
  380. package/docs/display/image.md +9 -1
  381. package/docs/display/list-group.md +1 -1
  382. package/docs/display/loading/logo-demo/demo1.md +15 -0
  383. package/docs/display/loading/logo.md +1 -0
  384. package/docs/display/progress-demo/demo1.md +10 -5
  385. package/docs/display/progress-demo/demo2.md +11 -26
  386. package/docs/display/progress-demo/demo3.md +27 -0
  387. package/docs/display/progress-demo/demo4.md +77 -0
  388. package/docs/display/progress.md +1 -1
  389. package/docs/display/stat-demo/demo1.md +0 -118
  390. package/docs/display/stat-demo/demo2.md +24 -22
  391. package/docs/display/stat-demo/demo3.md +39 -0
  392. package/docs/display/stat-demo/demo4.md +50 -0
  393. package/docs/display/stat-demo/demo5.md +25 -0
  394. package/docs/display/stat-demo/demo6.md +40 -0
  395. package/docs/display/stat-demo/demo7.md +84 -0
  396. package/docs/display/stat.md +8 -1
  397. package/docs/display/text-demo/demo1.md +79 -130
  398. package/docs/display/text-demo/demo2.md +71 -0
  399. package/docs/display/text-demo/demo3.md +39 -0
  400. package/docs/display/text.md +12 -1
  401. package/docs/display/title-demo/demo1.md +50 -26
  402. package/docs/display/title.md +1 -1
  403. package/docs/display/tool-tip-demo/demo1.md +26 -71
  404. package/docs/display/tool-tip-demo/demo2.md +33 -30
  405. package/docs/display/tool-tip-demo/demo3.md +50 -0
  406. package/docs/display/tool-tip-demo/demo4.md +74 -0
  407. package/docs/display/tool-tip.md +11 -1
  408. package/docs/editors/code/code-block-demo/demo1.md +21 -40
  409. package/docs/editors/code/code-block-demo/demo2.md +35 -0
  410. package/docs/editors/code/code-block-demo/demo3.md +43 -0
  411. package/docs/editors/code/code-block-demo/demo4.md +28 -0
  412. package/docs/editors/code/code-block-demo/demo5.md +42 -0
  413. package/docs/editors/code/code-block-demo/demo6.md +42 -0
  414. package/docs/editors/code/code-block-demo/demo7.md +853 -0
  415. package/docs/editors/code/code-block-demo/demo8.md +855 -0
  416. package/docs/editors/code/code-block.md +21 -1
  417. package/docs/editors/code/inline-demo/demo1.md +6 -3
  418. package/docs/editors/code/inline.md +1 -1
  419. package/docs/editors/markdown-editor/base-editor-demo/demo1.md +9 -28
  420. package/docs/editors/markdown-editor/base-editor.md +1 -1
  421. package/docs/forms/form-controls/checkbox/demo/demo1.md +49 -0
  422. package/docs/forms/form-controls/checkbox/index.md +26 -0
  423. package/docs/forms/form-controls/{checkbox-group-demo → checkbox-group/demo}/demo1.md +4 -13
  424. package/docs/forms/form-controls/checkbox-group/index.md +27 -0
  425. package/docs/forms/form-controls/{combo-box-demo → combo-box/demo}/demo1.md +8 -2
  426. package/docs/forms/form-controls/{combo-box-demo → combo-box/demo}/demo2.md +10 -8
  427. package/docs/forms/form-controls/combo-box/demo/demo3.md +60 -0
  428. package/docs/forms/form-controls/{combo-box-demo/demo3.md → combo-box/demo/demo4.md} +17 -14
  429. package/docs/forms/form-controls/combo-box/demo/demo5.md +151 -0
  430. package/docs/forms/form-controls/combo-box/index.md +6 -0
  431. package/docs/forms/form-controls/file-picker/demo/demo1.md +29 -0
  432. package/docs/forms/form-controls/file-picker/demo/demo2.md +44 -0
  433. package/docs/forms/form-controls/file-picker/demo/demo3.md +45 -0
  434. package/docs/forms/form-controls/file-picker/demo/demo4.md +63 -0
  435. package/docs/forms/form-controls/file-picker/index.md +22 -0
  436. package/docs/forms/form-controls/{form-control-layout-demo → form-control-layout/demo}/demo1.md +0 -0
  437. package/docs/forms/form-controls/form-control-layout/index.md +30 -0
  438. package/docs/forms/form-controls/{form-control-layout-delimited-demo → form-control-layout-delimited/demo}/demo1.md +41 -37
  439. package/docs/forms/form-controls/form-control-layout-delimited/index.md +24 -0
  440. package/docs/forms/form-controls/number-field/demo/demo1.md +20 -0
  441. package/docs/forms/form-controls/{number-field-demo/demo1.md → number-field/demo/demo2.md} +23 -11
  442. package/docs/forms/form-controls/number-field/index.md +12 -0
  443. package/docs/forms/form-controls/password-field/demo/demo1.md +19 -0
  444. package/docs/forms/form-controls/{password-field-demo/demo1.md → password-field/demo/demo2.md} +12 -8
  445. package/docs/forms/form-controls/password-field/index.md +19 -0
  446. package/docs/forms/form-controls/radio/demo/demo1.md +43 -0
  447. package/docs/forms/form-controls/radio/index.md +24 -0
  448. package/docs/forms/form-controls/radio-group/demo/demo1.md +50 -0
  449. package/docs/forms/form-controls/radio-group/index.md +18 -0
  450. package/docs/forms/form-controls/range/demo/demo1.md +96 -0
  451. package/docs/forms/form-controls/range/demo/demo2.md +62 -0
  452. package/docs/forms/form-controls/{range-demo → range/demo}/demo3.md +10 -12
  453. package/docs/forms/form-controls/{range-demo → range/demo}/demo4.md +16 -18
  454. package/docs/forms/form-controls/{range-demo → range/demo}/demo5.md +18 -20
  455. package/docs/forms/form-controls/range/demo/demo6.md +57 -0
  456. package/docs/forms/form-controls/range/demo/demo7.md +350 -0
  457. package/docs/forms/form-controls/range/index.md +18 -0
  458. package/docs/forms/form-controls/search-field/demo/demo1.md +29 -0
  459. package/docs/forms/form-controls/search-field/index.md +14 -0
  460. package/docs/forms/form-controls/select/demo/demo1.md +29 -0
  461. package/docs/forms/form-controls/select/demo/demo2.md +44 -0
  462. package/docs/forms/form-controls/{select-demo/demo1.md → select/demo/demo3.md} +20 -10
  463. package/docs/forms/form-controls/select/index.md +19 -0
  464. package/docs/forms/form-controls/{switch-demo → switch/demo}/demo1.md +10 -10
  465. package/docs/forms/form-controls/switch/index.md +13 -0
  466. package/docs/forms/form-controls/text-field/demo/demo1.md +35 -0
  467. package/docs/forms/form-controls/text-field/demo/demo2.md +40 -0
  468. package/docs/forms/form-controls/{text-field-demo/demo2.md → text-field/demo/demo3.md} +14 -17
  469. package/docs/forms/form-controls/{text-field-demo/demo1.md → text-field/demo/demo4.md} +18 -32
  470. package/docs/forms/form-controls/text-field/index.md +14 -0
  471. package/docs/forms/form-controls/textarea/demo/demo1.md +21 -0
  472. package/docs/forms/form-controls/textarea/demo/demo2.md +24 -0
  473. package/docs/forms/form-controls/textarea/index.md +13 -0
  474. package/docs/forms/form-layouts/described-form-groups-demo/demo1.md +13 -4
  475. package/docs/forms/form-layouts/described-form-groups.md +1 -1
  476. package/docs/layout/accordion-demo/demo1.md +21 -102
  477. package/docs/layout/accordion-demo/demo2.md +76 -0
  478. package/docs/layout/accordion-demo/demo3.md +25 -0
  479. package/docs/layout/accordion-demo/demo4.md +26 -0
  480. package/docs/layout/accordion-demo/demo5.md +65 -0
  481. package/docs/layout/accordion-demo/demo6.md +78 -0
  482. package/docs/layout/accordion-demo/demo7.md +66 -0
  483. package/docs/layout/accordion-demo/demo8.md +64 -0
  484. package/docs/layout/accordion-demo/demo9.md +114 -0
  485. package/docs/layout/accordion.md +39 -9
  486. package/docs/layout/bottom-bar-demo/demo1.md +32 -49
  487. package/docs/layout/bottom-bar-demo/demo2.md +54 -0
  488. package/docs/layout/bottom-bar-demo/demo3.md +81 -0
  489. package/docs/layout/bottom-bar.md +1 -1
  490. package/docs/layout/flex.md +1 -1
  491. package/docs/layout/flyout-demo/demo1.md +19 -11
  492. package/docs/layout/flyout-demo/demo2.md +43 -28
  493. package/docs/layout/flyout-demo/demo3.md +99 -0
  494. package/docs/layout/flyout-demo/demo4.md +115 -0
  495. package/docs/layout/flyout-demo/demo5.md +59 -0
  496. package/docs/layout/flyout-demo/demo6.md +57 -0
  497. package/docs/layout/flyout-demo/demo7.md +51 -0
  498. package/docs/layout/flyout.md +1 -1
  499. package/docs/layout/header-demo/demo1.md +284 -35
  500. package/docs/layout/header-demo/demo2.md +42 -0
  501. package/docs/layout/header-demo/demo3.md +48 -0
  502. package/docs/layout/header-demo/demo4.md +57 -0
  503. package/docs/layout/header-demo/demo5.md +232 -0
  504. package/docs/layout/header-demo/demo6.md +85 -0
  505. package/docs/layout/header-demo/demo7.md +94 -0
  506. package/docs/layout/header.md +1 -1
  507. package/docs/layout/horizontal-rule.md +1 -1
  508. package/docs/layout/modal-demo/demo1.md +64 -167
  509. package/docs/layout/modal-demo/demo2.md +126 -0
  510. package/docs/layout/modal-demo/demo3.md +55 -0
  511. package/docs/layout/modal-demo/demo4.md +65 -0
  512. package/docs/layout/modal-demo/demo5.md +96 -0
  513. package/docs/layout/modal.md +1 -1
  514. package/docs/layout/page-demo/demo1.md +96 -3
  515. package/docs/layout/page-demo/demo10.md +42 -0
  516. package/docs/layout/page-demo/demo2.md +46 -0
  517. package/docs/layout/page-demo/demo3.md +50 -0
  518. package/docs/layout/page-demo/demo4.md +38 -0
  519. package/docs/layout/page-demo/demo5.md +30 -0
  520. package/docs/layout/page-demo/demo6.md +51 -0
  521. package/docs/layout/page-demo/demo7.md +59 -0
  522. package/docs/layout/page-demo/demo8.md +19 -0
  523. package/docs/layout/page-demo/demo9.md +29 -0
  524. package/docs/layout/page.md +1 -1
  525. package/docs/layout/panel-demo/demo1.md +28 -19
  526. package/docs/layout/panel-demo/demo2.md +22 -0
  527. package/docs/layout/panel-demo/demo3.md +27 -0
  528. package/docs/layout/panel-demo/demo4.md +46 -0
  529. package/docs/layout/panel-demo/demo5.md +81 -0
  530. package/docs/layout/panel.md +7 -1
  531. package/docs/layout/popover-demo/demo1.md +42 -300
  532. package/docs/layout/popover-demo/demo10.md +72 -0
  533. package/docs/layout/popover-demo/demo2.md +306 -96
  534. package/docs/layout/popover-demo/demo3.md +20 -12
  535. package/docs/layout/popover-demo/demo4.md +118 -0
  536. package/docs/layout/popover-demo/demo5.md +252 -0
  537. package/docs/layout/popover-demo/demo6.md +44 -0
  538. package/docs/layout/popover-demo/demo7.md +44 -0
  539. package/docs/layout/popover-demo/demo8.md +50 -0
  540. package/docs/layout/popover-demo/demo9.md +80 -0
  541. package/docs/layout/popover.md +1 -1
  542. package/docs/navigation/breadcrumbs-demo/demo1.md +77 -0
  543. package/docs/navigation/breadcrumbs-demo/demo2.md +61 -0
  544. package/docs/navigation/breadcrumbs-demo/demo3.md +61 -0
  545. package/docs/navigation/breadcrumbs-demo/demo4.md +61 -0
  546. package/docs/navigation/breadcrumbs-demo/demo5.md +61 -0
  547. package/docs/navigation/breadcrumbs-demo/demo6.md +61 -0
  548. package/docs/navigation/breadcrumbs.md +1 -0
  549. package/docs/navigation/button-demo/demo1.md +210 -158
  550. package/docs/navigation/button.md +1 -1
  551. package/docs/navigation/collapsible-nav-demo/demo1.md +21 -44
  552. package/docs/navigation/collapsible-nav-demo/demo2.md +108 -0
  553. package/docs/navigation/collapsible-nav.md +1 -1
  554. package/docs/navigation/key-pad-menu-demo/demo1.md +77 -0
  555. package/docs/navigation/key-pad-menu-demo/demo2.md +102 -0
  556. package/docs/navigation/key-pad-menu-demo/demo3.md +54 -0
  557. package/docs/navigation/key-pad-menu-demo/demo4.md +71 -0
  558. package/docs/navigation/key-pad-menu-demo/demo5.md +65 -0
  559. package/docs/navigation/key-pad-menu.md +1 -0
  560. package/docs/navigation/link-demo/demo1.md +44 -0
  561. package/docs/navigation/link-demo/demo2.md +41 -0
  562. package/docs/navigation/link-demo/demo3.md +45 -0
  563. package/docs/navigation/link-demo/demo4.md +61 -0
  564. package/docs/navigation/link.md +1 -0
  565. package/docs/navigation/side-nav-demo/demo1.md +34 -18
  566. package/docs/navigation/side-nav.md +1 -1
  567. package/docs/navigation/steps-demo/demo1.md +16 -18
  568. package/docs/navigation/steps-demo/demo2.md +18 -21
  569. package/docs/navigation/steps-demo/demo3.md +12 -10
  570. package/docs/navigation/steps-demo/demo4.md +84 -0
  571. package/docs/navigation/steps-demo/demo5.md +29 -0
  572. package/docs/navigation/steps.md +1 -1
  573. package/docs/navigation/tabs-demo/demo1.md +50 -148
  574. package/docs/navigation/tabs-demo/demo2.md +73 -0
  575. package/docs/navigation/tabs-demo/demo3.md +109 -0
  576. package/docs/navigation/tabs-demo/demo4.md +81 -0
  577. package/docs/navigation/tabs-demo/demo5.md +86 -0
  578. package/docs/navigation/tabs.md +1 -1
  579. package/docs/utilities/auto-sizer-demo/demo1.md +34 -0
  580. package/docs/utilities/auto-sizer.md +1 -0
  581. package/docs/utilities/copy-demo/demo1.md +37 -0
  582. package/docs/utilities/copy-demo/demo2.md +70 -0
  583. package/docs/utilities/copy.md +1 -0
  584. package/docs/utilities/mutation-observer.md +1 -1
  585. package/docs/utilities/outside-click-detector.md +1 -1
  586. package/docs/utilities/overlay-mask.md +1 -1
  587. package/docs/utilities/portal.md +1 -1
  588. package/docs/utilities/resize-observer.md +1 -1
  589. package/docs/utilities/responsive-demo/demo1.md +108 -0
  590. package/docs/utilities/responsive.md +1 -0
  591. package/index.js +8 -3
  592. package/package.json +13 -7
  593. package/CHANGELOG.md +0 -1345
  594. package/addon/components/eui-code-block-impl/code-block-controls/index.hbs +0 -33
  595. package/addon/components/eui-code-block-impl/index.hbs +0 -111
  596. package/addon/components/eui-code-block-impl/index.ts +0 -121
  597. package/addon/components/eui-flyout-body/banner/index.hbs +0 -3
  598. package/addon/components/eui-flyout-body/content/index.hbs +0 -3
  599. package/addon/helpers/create-event.ts +0 -30
  600. package/addon/helpers/get-tab-id.ts +0 -17
  601. package/addon/modifiers/focus-tab.ts +0 -19
  602. package/addon/modifiers/get-cursor-node.ts +0 -54
  603. package/addon/modifiers/invalidate-indeterminate.ts +0 -10
  604. package/addon/modifiers/on-event-simulate-event.ts +0 -32
  605. package/app/components/eui-card/eui-card-select/index.js +0 -1
  606. package/app/components/eui-flyout-body/banner/index.js +0 -1
  607. package/app/components/eui-flyout-body/content/index.js +0 -1
  608. package/app/helpers/create-event.js +0 -1
  609. package/app/helpers/get-tab-id.js +0 -1
  610. package/app/modifiers/fixed-header.js +0 -1
  611. package/app/modifiers/focus-tab.js +0 -1
  612. package/app/modifiers/get-cursor-node.js +0 -1
  613. package/app/modifiers/invalidate-indeterminate.js +0 -1
  614. package/app/modifiers/on-event-simulate-event.js +0 -1
  615. package/docs/forms/form-controls/checkbox-demo/demo1.md +0 -40
  616. package/docs/forms/form-controls/checkbox-group.md +0 -1
  617. package/docs/forms/form-controls/checkbox.md +0 -1
  618. package/docs/forms/form-controls/combo-box.md +0 -1
  619. package/docs/forms/form-controls/file-picker-demo/demo1.md +0 -28
  620. package/docs/forms/form-controls/file-picker.md +0 -1
  621. package/docs/forms/form-controls/form-control-layout-delimited.md +0 -1
  622. package/docs/forms/form-controls/form-control-layout.md +0 -1
  623. package/docs/forms/form-controls/number-field.md +0 -1
  624. package/docs/forms/form-controls/password-field.md +0 -1
  625. package/docs/forms/form-controls/radio-demo/demo1.md +0 -39
  626. package/docs/forms/form-controls/radio-group-demo/demo1.md +0 -60
  627. package/docs/forms/form-controls/radio-group.md +0 -1
  628. package/docs/forms/form-controls/radio.md +0 -1
  629. package/docs/forms/form-controls/range-demo/demo1.md +0 -61
  630. package/docs/forms/form-controls/range-demo/demo2.md +0 -59
  631. package/docs/forms/form-controls/range-demo/demo6.md +0 -59
  632. package/docs/forms/form-controls/range.md +0 -1
  633. package/docs/forms/form-controls/search-field-demo/demo1.md +0 -31
  634. package/docs/forms/form-controls/search-field.md +0 -1
  635. package/docs/forms/form-controls/select.md +0 -1
  636. package/docs/forms/form-controls/switch.md +0 -1
  637. package/docs/forms/form-controls/text-field.md +0 -1
  638. package/docs/forms/form-controls/textarea-demo/demo1.md +0 -36
  639. 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);
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-control-layout-custom-icon/types.ts CHANGED
@@ -5,5 +5,7 @@ export type EuiFormControlLayoutCustomIconArgs = CommonArgs &
5
5
  ExclusiveUnion<Omit<HTMLButtonElement, 'type'>, HTMLSpanElement> & {
6
6
  type: IconType;
7
7
  size?: EuiIconArgs['size'];
8
- iconRef?: string | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
8
+ iconRef?:
9
+ | string
10
+ | ((el: HTMLButtonElement | HTMLSpanElement | null) => void);
9
11
  };
package/addon/components/eui-form-control-layout-icons/types.ts CHANGED
@@ -5,7 +5,10 @@ import { EuiFormControlLayoutClearButtonArgs } from '../eui-form-control-layout-
5
5
 
6
6
  export const ICON_SIDES: ['left', 'right'] = ['left', 'right'];
7
7
 
8
- type IconShape = DistributiveOmit<EuiFormControlLayoutCustomIconArgs, 'type' | 'iconRef'> & {
8
+ type IconShape = DistributiveOmit<
9
+ EuiFormControlLayoutCustomIconArgs,
10
+ 'type' | 'iconRef'
11
+ > & {
9
12
  type: IconType;
10
13
  side?: typeof ICON_SIDES[number];
11
14
  ref?: EuiFormControlLayoutCustomIconArgs['iconRef'];
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-global-toast-list/index.ts CHANGED
@@ -68,15 +68,13 @@ export default class EuiGlobalToastList extends GlimmerComponent<GlobalToastList
68
68
  this.listElement.scrollTop = position + distanceToDestination * 0.25;
69
69
 
70
70
  if (this.isScrollingToBottom) {
71
- this.isScrollingAnimationFrame = window.requestAnimationFrame(
72
- scrollToBottom
73
- );
71
+ this.isScrollingAnimationFrame =
72
+ window.requestAnimationFrame(scrollToBottom);
74
73
  }
75
74
  };
76
75
 
77
- this.startScrollingAnimationFrame = window.requestAnimationFrame(
78
- scrollToBottom
79
- );
76
+ this.startScrollingAnimationFrame =
77
+ window.requestAnimationFrame(scrollToBottom);
80
78
  }
81
79
 
82
80
  @action
@@ -188,6 +186,7 @@ export default class EuiGlobalToastList extends GlimmerComponent<GlobalToastList
188
186
  }
189
187
 
190
188
  willDestroy(): void {
189
+ super.willDestroy();
191
190
  if (this.isScrollingAnimationFrame !== 0) {
192
191
  window.cancelAnimationFrame(this.isScrollingAnimationFrame);
193
192
  }
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>