@ember-eui/core 1.6.2 → 3.0.1

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 ### Master
 
+### 3.0.1
+💥 Breaking change
+`@ember-eui/core`
+🚀 Enhancements
+- No longer need to add icons from public icons in ember-eui/core
+
+### 3.0.0
+💥 Breaking change
+`@ember-eui/*`
+- Drops support for ember-source < v3.20.0
+- Drops support for node 10
+- Drops support for importing sass, elastic eui is migrating to emotion, so its better we just focus on that instead of sass, so we no longer dynamically import template only components for now, this could possibly be achieved later post embroider
+
+🏠 Internal
+`@ember-eui/*`
+- `ember-cli-update --to=3.28.0` on all packages
+- Update ember-cli-typescript
+- Remove some deprecations like new imports paths and helpers usage and `#with` helper
+
+### 2.0.0
+💥 Breaking change
+`@ember-eui/core`
+- Deprecate `ember-svg-jar` `hbs` strategy for now, just use stock `ember-svg-jar`
+
+### 1.6.3
+🐛 Bug / Fixes
+`@ember-eui/core`
+- Fix inline-styling weird bug
+
 ### 1.6.2
 🐛 Bug / Fixes
 `@ember-eui/validated-form`

package/README.md

@@ -1,25 +1,18 @@
 # ember-eui
 
 This project aims to provide ember components implementing the css layer of https://elastic.github.io/eui
-
 ### Icons
 
 For icons to work you will need to:
 
 - install `ember-svg-jar`
 - add the following `ember-svg-jar` options to your `ember-cli-build.js`:
-- NOTICE: we are currently using a fork from ember-svg-jar, for the hbs strategy
-  `"ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag"`
 
 ```javascript
 // ember-cli-build.js
 var app = new EmberApp(defaults, {
   ...
     svgJar: {
-      strategy: ['hbs'],
-      hbs: {
-        stripPath: false,
-      },
       sourceDirs: [
         'public/assets',
         'node_modules/@elastic/eui/lib/components/icon',
@@ -30,15 +23,15 @@ var app = new EmberApp(defaults, {
 
 ```
 
-We use `ember-svg-jar` to create SVGs as TOC (Template only components) with the `hbs` strategy. For fingerprinting and such, `ember-svg-jar#add-bundle-flag` exposes an `svg-jar` service, with a `resolveAsset` callback/hook, so you can implement your own resolver, you could use for example [ember-cli-resolve-assset](https://github.com/buschtoens/ember-cli-resolve-asset).
-
 ## Compatibility
 
-- Ember.js v3.12 or above
-- Ember CLI v2.13 or above
-- Node.js v10 or above
+* Ember.js v3.20 or above
+* Ember CLI v3.20 or above
+* Node.js v12 or above
+
 
-## Installation
+Installation
+------------------------------------------------------------------------------
 
 ```
 ember install @ember-eui/core

package/addon/components/eui-badge/index.hbs

@@ -67,7 +67,7 @@
     }}
   >
     <span class="euiBadge__content">
-      {{#if hasBlock}}
+      {{#if (has-block)}}
         {{#if @onClick}}
           <button
             class="euiBadge__childButton"
@@ -101,14 +101,14 @@
             class={{class-names "euiBadge__icon" @closeButtonProps.iconClasses}}
             @type={{@iconType}}
             data-selected-index={{@closeButtonProps.dataSelectedIconIndex}}
-            @size={{if hasBlock "s" "m"}}
+            @size={{if (has-block) "s" "m"}}
           />
         </button>
         {{! tempalte-lint-enable}}
       {{else}}
         <EuiIcon
           @type={{@iconType}}
-          @size={{if hasBlock "s" "m"}}
+          @size={{if (has-block) "s" "m"}}
           class="euiBadge__icon"
         />
       {{/if}}

package/addon/components/eui-card/eui-card-select/index.hbs

@@ -17,7 +17,7 @@
   aria-checked={{@isSelected}}
   ...attributes
 >
-  {{#if hasBlock}}
+  {{#if (has-block)}}
     {{yield}}
   {{else if @isSelected}}
     Selected

package/addon/components/eui-card/index.hbs

@@ -9,7 +9,7 @@
       (if (eq @layout "horizontal") "euiCard--horizontal")
       (if (and (eq @display "plain") (not @selectable)) "euiCard--plain")
       (if @isDisabled "euiCard-isDisabled")
-      (if hasBlock "euiCard--hasChildren")
+      (if (has-block) "euiCard--hasChildren")
       (if @icon "euiCard--hasIcon" (if has-block "icon" "euiCard--hasIcon"))
       (if @betaBadgeLabel "euiCard--hasBetaBadge")
       (if

package/addon/components/eui-combo-box/create-option/index.ts

@@ -1,5 +1,5 @@
 import Component from '@glimmer/component';
-import { isHTMLSafe, htmlSafe } from '@ember/string';
+import { isHTMLSafe, htmlSafe } from '@ember/template';
 import { get } from '@ember/object';
 
 type EuiComboBoxCreateOptionArgs = {

package/addon/components/eui-flyout/index.hbs

@@ -2,37 +2,46 @@
   <EuiOverlayMask @headerZindexLocation="below" {{on "click" @onClose}} />
 {{/if}}
 {{set-body-class "euiBody--hasFlyout"}}
-<div
-  role="dialog"
-  class={{class-names
-    (if (eq @maxWidth true) "euiFlyout--maxWidth-default")
-    componentName="EuiFlyout"
-    size=(arg-or-default @size "m")
-  }}
-  tabindex={{0}}
-  ...attributes
-  {{style
-    (if (not (or (eq @maxWidth false) (eq @maxWidth true))) (inline-styles max-width=@maxWidth))
-  }}
-  {{focus-trap
-    isActive=(arg-or-default @isFocusTrapActive true)
-    shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
-    isPaused=(arg-or-default @isFocusTrapPaused false)
-    focusTrapOptions=(arg-or-default
-      @focusTrapOptions (hash allowOutsideClick=true clickOutsideDeactivates=(not @ownFocus))
-    )
-  }}
-  {{on-key "Escape" @onClose}}
->
-  {{#if (and @onClose (not @hideCloseButton))}}
-    <EuiButtonIcon
-      class="euiFlyout__closeButton"
-      aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
-      @iconType="cross"
-      @color="text"
-      data-test-subj="euiFlyoutCloseButton"
-      {{on "click" @onClose}}
-    />
-  {{/if}}
-  {{yield}}
-</div>
+
+{{#let
+  (if
+    (not (or (eq @maxWidth false) (eq @maxWidth true)))
+    (inline-styles max-width=@maxWidth)
+    (hash)
+  )
+  as |inlineStyles|
+}}
+  <div
+    role="dialog"
+    class={{class-names
+      (if (eq @maxWidth true) "euiFlyout--maxWidth-default")
+      componentName="EuiFlyout"
+      size=(arg-or-default @size "m")
+    }}
+    tabindex={{0}}
+    ...attributes
+    {{style inlineStyles}}
+    {{focus-trap
+      isActive=(arg-or-default @isFocusTrapActive true)
+      shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
+      isPaused=(arg-or-default @isFocusTrapPaused false)
+      focusTrapOptions=(arg-or-default
+        @focusTrapOptions
+        (hash allowOutsideClick=true clickOutsideDeactivates=(not @ownFocus))
+      )
+    }}
+    {{on-key "Escape" @onClose}}
+  >
+    {{#if (and @onClose (not @hideCloseButton))}}
+      <EuiButtonIcon
+        class="euiFlyout__closeButton"
+        aria-label={{or @closeButtonAriaLabel @closeAriaLabel}}
+        @iconType="cross"
+        @color="text"
+        data-test-subj="euiFlyoutCloseButton"
+        {{on "click" @onClose}}
+      />
+    {{/if}}
+    {{yield}}
+  </div>
+{{/let}}

package/addon/components/eui-icon/index.hbs

@@ -1,39 +1,58 @@
-{{#if this.icon.inner}}
+{{#if this.icon.moduleName}}
   {{! has the shape of a curried component }}
-  {{component this.icon}}
-{{else}}
-  {{#if this.useImage}}
-    <img
-      src={{this.icon}}
+  {{#let (component this.icon) as |IconComponent|}}
+    {{!template-lint-disable}}
+    <IconComponent
       class={{class-names
         this.optionalColorClass
         (if this.isAppIcon "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       }}
-      alt={{if @title @title}}
-      tabIndex={{@tabIndex}}
+      role="image"
+      aria-hidden={{if this.isAriaHidden "true"}}
+      aria-label={{if @aria-label @aria-label this.titleId}}
+      aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
+      tabindex={{this.tabIndex}}
+      style={{this.optionalCustomStyles}}
       ...attributes
     />
-  {{else}}
-    <Svg
-      @name={{this.icon}}
-      @loadingSvg={{this.emptyIcon}}
+  {{/let}}
+{{else}}
+  {{#if this.useImage}}
+    <img
+      src={{this.icon}}
       class={{class-names
         this.optionalColorClass
         (if this.isAppIcon "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       }}
-      style={{this.optionalCustomStyles}}
-      tabIndex={{this.tabIndex}}
-      role="image"
-      aria-hidden={{if this.isAriaHidden true}}
-      aria-label={{if @aria-label @aria-label this.titleId}}
-      aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
-      @title={{@title}}
-      @onIconLoad={{@onIconLoad}}
+      alt={{if @title @title}}
+      tabIndex={{@tabIndex}}
       ...attributes
     />
+  {{else}}
+    <div
+      class={{class-names "euiIcon" (if this.isAppIcon "euiIcon--app")}}
+      ...attributes
+    >
+      {{svg-jar
+        this.icon
+        class=(class-names
+          this.optionalColorClass
+          (if this.isAppIcon "euiIcon--app")
+          componentName="EuiIcon"
+          addBase=false
+          size=this.size
+        )
+        role="image"
+        aria-hidden=(if this.isAriaHidden "true")
+        aria-label=(if @aria-label @aria-label this.titleId)
+        aria-labelledby=(if @aria-labelledby @aria-labelledby this.titleId)
+        tabindex=this.tabIndex
+        style=this.optionalCustomStyles
+      }}
+    </div>
   {{/if}}
 {{/if}}

package/addon/components/eui-icon/index.ts

@@ -29,8 +29,6 @@ type IconColor = string | NamedColor;
 
 export type IconSize = keyof typeof sizeToClassNameMap;
 
-// const SVG_PREI : string | undefined = config['ember-eui'].svgPath || 'svg/assets';
-
 export type EuiIconArgs = CommonArgs & {
   /**
    * `Enum` is any of the named icons listed in the docs, `string` is usually a URL to an SVG file, and `elementType` is any Ember Icon SVG component
@@ -90,6 +88,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
   }
 
   get useSvg(): boolean {
+    //@ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment');
     return (
       this.args.useSvg ??
@@ -118,10 +117,7 @@ export default class EuiIcon extends Component<EuiIconArgs> {
   }
 
   getEuiIconSvgPath(type: EuiIconType): string {
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/assets/';
-    const euiIcon = typeToPathMap[type].replace(/_/g, '-').toLowerCase();
-    return `${svgPath}${euiIcon}`;
+    return typeToPathMap[type].replace('tokens/', '');
   }
 
   get isAppIcon(): string | boolean {

package/addon/components/eui-image/index.ts

@@ -1,6 +1,6 @@
 import GlimmerComponent from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { htmlSafe } from '@ember/string';
+import { htmlSafe } from '@ember/template';
 import { action } from '@ember/object';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { sizeMapping } from '../../utils/css-mappings/eui-image';

package/addon/components/eui-list-group/index.hbs

@@ -1,18 +1,24 @@
-<ul
-  class={{class-names
-    (if (eq @maxWidth true) "euiListGroup-maxWidthDefault")
-    (if @bordered "euiListGroup-bordered")
-    (if @flush "euiListGroup-flush")
-    componentName="EuiListGroup"
-    gutterSize=(arg-or-default @gutterSize "s")
-  }}
-  ...attributes
-  {{style
-    (if
-      (and @maxWidth (not-eq @maxWidth true))
-      (inline-styles componentName="EuiListGroup" componentArgs=(hash maxWidth=@maxWidth))
+{{#let
+  (if
+    (and @maxWidth (not-eq @maxWidth true))
+    (inline-styles
+      componentName="EuiListGroup" componentArgs=(hash maxWidth=@maxWidth)
     )
-  }}
->
-  {{yield}}
-</ul>
+    (hash)
+  )
+  as |inlineStyles|
+}}
+  <ul
+    class={{class-names
+      (if (eq @maxWidth true) "euiListGroup-maxWidthDefault")
+      (if @bordered "euiListGroup-bordered")
+      (if @flush "euiListGroup-flush")
+      componentName="EuiListGroup"
+      gutterSize=(arg-or-default @gutterSize "s")
+    }}
+    ...attributes
+    {{style inlineStyles}}
+  >
+    {{yield}}
+  </ul>
+{{/let}}

package/addon/components/eui-markdown-editor/index.ts

@@ -188,6 +188,7 @@ export default class EuiMarkdownEditorComponent extends Component<EuiMarkdownEdi
     };
 
     function identityCompiler(this: Processor) {
+      //eslint-disable-next-line
       this.Compiler = Compiler;
     }
     return unified().use(this.parsingPluginList).use(identityCompiler);

package/addon/components/eui-markdown-editor-footer/icons/markdown-logo/index.d.ts

@@ -0,0 +1,4 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownEditorToolbarIconsMarkdownLogo =
+  typeof templateOnlyComponent;

package/addon/components/eui-markdown-editor-footer/icons/markdown-logo/index.hbs

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="26"
+  height="16"
+  fill="none"
+  viewBox="0 0 26 16"
+  aria-labelledby={{@titleId}}
+  ...attributes
+>
+  {{#if @title}}
+    <title id={{@titleId}}>{{@title}}</title>
+  {{/if}}
+  <path
+    d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z"
+  ></path>
+</svg>

package/addon/components/eui-markdown-editor-footer/index.ts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { getOwner } from '@ember/application';
+import MarkdownLogoComponent from './icons/markdown-logo';
 
 export interface EuiMarkdownEditorFooterArgs {}
 
@@ -8,13 +8,7 @@ export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkd
   @tracked isPopoverOpen = false;
   @tracked isShowingHelp = false;
 
-  get svgPath() {
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
-    return svgPath;
-  }
-
   get markdownLogo() {
-    return `${this.svgPath}markdown-logo`;
+    return MarkdownLogoComponent;
   }
 }

package/addon/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.d.ts

@@ -0,0 +1,4 @@
+import templateOnlyComponent from '@ember/component/template-only';
+
+export type EuiMarkdownEditorToolbarIconsMarkdownCheckmark =
+  typeof templateOnlyComponent;

package/addon/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.hbs

@@ -0,0 +1,16 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="none"
+  viewBox="0 0 16 16"
+  aria-labelledby={{@titleId}}
+  ...attributes
+>
+  {{#if @title}}
+    <title id={{@titleId}}>{{@title}}</title>
+  {{/if}}
+  <path
+    d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z"
+  ></path>
+</svg>

package/addon/components/eui-markdown-editor-toolbar/index.hbs

@@ -12,7 +12,7 @@
       </EuiToolTip>
 
     {{/each}}
-    <span className="euiMarkdownEditorToolbar__divider"></span>
+    <span class="euiMarkdownEditorToolbar__divider"></span>
     {{#each this.listButtons as |item|}}
       <EuiToolTip @content={{item.label}} @delay="long">
         <EuiButtonIcon
@@ -26,7 +26,7 @@
       </EuiToolTip>
 
     {{/each}}
-    <span className="euiMarkdownEditorToolbar__divider"></span>
+    <span class="euiMarkdownEditorToolbar__divider"></span>
     {{#each this.quoteCodeLinkButtons as |item|}}
       <EuiToolTip @content={{item.label}} @delay="long">
         <EuiButtonIcon
@@ -40,7 +40,7 @@
 
     {{/each}}
     {{#if (gte this.uiPlugins.length 0)}}
-      <span className="euiMarkdownEditorToolbar__divider"></span>
+      <span class="euiMarkdownEditorToolbar__divider"></span>
       {{#each this.uiPlugins as |plugin|}}
         {{#let
           (and @selectedNode (eq @selectedNode.type plugin.name))

package/addon/components/eui-markdown-editor-toolbar/index.ts

@@ -3,7 +3,8 @@ import { action } from '@ember/object';
 import type MarkdownActions from '../../utils/markdown/markdown-actions';
 import { MODE_VIEWING } from '../../utils/markdown/markdown-modes';
 import { cached } from '@glimmer/tracking';
-import { getOwner } from '@ember/application';
+import MarkdownCheckmarkComponent from './icons/markdown-checkmark';
+
 import { Plugin } from 'unified';
 
 export interface EuiMarkdownEditorToolbarArgs {
@@ -29,12 +30,6 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
     }
   ];
 
-  get svgPath() {
-    const config = getOwner(this).resolveRegistration('config:environment');
-    const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
-    return svgPath;
-  }
-
   @cached
   get listButtons() {
     return [
@@ -55,7 +50,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
         label: 'Task list',
         name: 'tl',
         useSvg: true,
-        iconType: `${this.svgPath}markdown-checkmark`
+        iconType: MarkdownCheckmarkComponent
       }
     ];
   }

package/addon/components/eui-modal/index.hbs

@@ -1,28 +1,37 @@
-<div
-  class={{class-names "euiModal" (if (eq @maxWidth true) "euiModal--maxWidth-default")}}
-  tabindex="0"
-  ...attributes
-  {{style
-    (if
-      (and @maxWidth (not-eq @maxWidth true))
-      (inline-styles componentName="EuiModal" componentArgs=(hash maxWidth=@maxWidth))
+{{#let
+  (if
+    (and @maxWidth (not-eq @maxWidth true))
+    (inline-styles
+      componentName="EuiModal" componentArgs=(hash maxWidth=@maxWidth)
     )
-  }}
-  {{focus-trap
-    isActive=(arg-or-default @isFocusTrapActive true)
-    shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
-    isPaused=(arg-or-default @isFocusTrapPaused false)
-    focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
-  }}
-  {{on-key "Escape" @onClose}}
->
-  <EuiButtonIcon
-    class="euiModal__closeIcon"
-    @iconType="cross"
-    @color="text"
-    {{on "click" @onClose}}
-  />
-  <div class="euiModal__flex">
-    {{yield}}
+    (hash)
+  )
+  as |inlineStyles|
+}}
+  <div
+    class={{class-names
+      "euiModal"
+      (if (eq @maxWidth true) "euiModal--maxWidth-default")
+    }}
+    tabindex="0"
+    ...attributes
+    {{style inlineStyles}}
+    {{focus-trap
+      isActive=(arg-or-default @isFocusTrapActive true)
+      shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
+      isPaused=(arg-or-default @isFocusTrapPaused false)
+      focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
+    }}
+    {{on-key "Escape" @onClose}}
+  >
+    <EuiButtonIcon
+      class="euiModal__closeIcon"
+      @iconType="cross"
+      @color="text"
+      {{on "click" @onClose}}
+    />
+    <div class="euiModal__flex">
+      {{yield}}
+    </div>
   </div>
-</div>
+{{/let}}

package/addon/components/eui-tabbed-content/index.hbs

@@ -1,17 +1,21 @@
 {{#let
   (unique-id)
   (optional @onTabClick)
-  (arg-or-default @autoFocus "initial")
+  (arg-or-default @autoFocus 'initial')
   (use-state
-    (get-tab-id (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs)))
-  ) as |id onTabClick autoFocus selectedTab|
+    (get-tab-id
+      (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs))
+    )
+  )
+  as |id onTabClick autoFocus selectedTab|
 }}
   <div class={{@className}} ...attributes>
     <EuiTabs
       @selectedTab={{selectedTab.value}}
       @expand={{@expand}}
       @display={{@display}}
-      @size={{@size}} as |EuiTab|
+      @size={{@size}}
+      as |EuiTab|
     >
       {{#each @tabs as |tab|}}
         <EuiTab
@@ -26,14 +30,16 @@
         </EuiTab>
       {{/each}}
     </EuiTabs>
-    {{#with (find-by "id" selectedTab.value @tabs) as |currentTab|}}
-      <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
-        {{#if (has-block "selectedTabContent")}}
-          {{yield currentTab to="selectedTabContent"}}
-        {{else}}
-          {{currentTab.content}}
-        {{/if}}
-      </div>
-    {{/with}}
+    {{#let (find-by "id" selectedTab.value @tabs) as |currentTab|}}
+      {{#if currentTab}}
+        <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
+          {{#if (has-block "selectedTabContent")}}
+            {{yield currentTab to="selectedTabContent"}}
+          {{else}}
+            {{currentTab.content}}
+          {{/if}}
+        </div>
+      {{/if}}
+    {{/let}}
   </div>
 {{/let}}

package/addon/components/eui-toast/index.hbs

@@ -27,7 +27,7 @@
       />
     {{/if}}
 
-    <span className="euiToastHeader__title">
+    <span class="euiToastHeader__title">
       {{@title}}
     </span>
   </div>

package/addon/helpers/class-names.ts

@@ -66,4 +66,6 @@ export function classNames(
   return str;
 }
 
-export default helper(classNames);
+export default helper<string[], Options & { addBase: boolean }, string>(
+  classNames
+);

package/addon/styles/ember-eui.css

@@ -0,0 +1,28 @@
+/* This is to avoid bumping elastic eui styles to 3.2.x , delete when possible. */
+.euiAvatar {
+  -webkit-flex-shrink: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-flex;
+  display: inline-flex;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  align-items: center;
+  background-size: cover;
+  text-align: center;
+  vertical-align: middle;
+  overflow-x: hidden;
+  font-weight: 500;
+}
+
+.euiMarkdownEditor--fullHeight {
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: column;
+  flex-direction: column;
+  height: 100%;
+}
+
+.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
+  display: none;
+}

package/app/components/eui-markdown-editor-footer/icons/markdown-logo/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-footer/icons/markdown-logo';

package/app/components/eui-markdown-editor-toolbar/icons/markdown-checkmark/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-markdown-editor-toolbar/icons/markdown-checkmark';

package/app/styles/ember-eui.scss

@@ -1,30 +1 @@
-/* This is to avoid bumping elastic eui styles to 3.2.x , delete when possible. */
-.euiAvatar {
-  -webkit-flex-shrink: 0;
-  flex-shrink: 0;
-  display: -webkit-inline-flex;
-  display: inline-flex;
-  -webkit-justify-content: center;
-  justify-content: center;
-  -webkit-align-items: center;
-  align-items: center;
-  background-size: cover;
-  text-align: center;
-  vertical-align: middle;
-  overflow-x: hidden;
-  font-weight: 500;
-}
-
-.euiMarkdownEditor--fullHeight {
-  display: -webkit-flex;
-  display: flex;
-  -webkit-flex-direction: column;
-  flex-direction: column;
-  height: 100%;
-}
-
-.euiMarkdownEditor--isPreviewing .euiMarkdownEditor__toggleContainer {
-  display: none;
-}
-
 @import 'ember-eui-components';

package/config/environment.js

@@ -1,5 +1,5 @@
 'use strict';
 
-module.exports = function(/* environment, appConfig */) {
-  return { };
+module.exports = function (/* environment, appConfig */) {
+  return {};
 };

package/docs/display/icons-demo/demo1.md

@@ -1,53 +1,58 @@
 # Demo
 
 ```hbs template
-<EuiText style="cursor: pointer;" {{on "mousemove" this.update}}>
-  You can hover on the icon below, open the network tab, all svgs are loaded on demand!
-  <EuiIcon @type={{this.icon}} />
-  <EuiIcon @type={{this.icon}} @size="m" />
-  <EuiIcon @type={{this.icon}} @size="l" />
-  <EuiIcon @type={{this.icon}} @size="xl" />
-  <EuiIcon @type={{this.icon}} @size="xxl" />
-</EuiText>
+<EuiIcon @type='logoGolang' />
+<EuiIcon @type='logoGolang' @size='m' />
+<EuiIcon @type='logoGolang' @size='l' />
+<EuiIcon @type='logoGolang' @size='xl' />
+<EuiIcon @type='logoGolang' @size='xxl' />
 <br />
-<EuiIcon @type="logoGolang" />
-<EuiIcon @type="logoGolang" @size="m" />
-<EuiIcon @type="logoGolang" @size="l" />
-<EuiIcon @type="logoGolang" @size="xl" />
-<EuiIcon @type="logoGolang" @size="xxl" />
+<EuiIcon @type='logoRedis' @size='s' />
+<EuiIcon @type='logoRedis' @size='m' />
+<EuiIcon @type='logoRedis' @size='l' />
+<EuiIcon @type='logoRedis' @size='xl' />
+<EuiIcon @type='logoRedis' @size='xxl' />
 <br />
-<EuiIcon @type="logoRedis" @size="s" />
-<EuiIcon @type="logoRedis" @size="m" />
-<EuiIcon @type="logoRedis" @size="l" />
-<EuiIcon @type="logoRedis" @size="xl" />
-<EuiIcon @type="logoRedis" @size="xxl" />
+<EuiIcon @type='logoAWS' @size='s' />
+<EuiIcon @type='logoAWS' @size='m' />
+<EuiIcon @type='logoAWS' @size='l' />
+<EuiIcon @type='logoAWS' @size='xl' />
+<EuiIcon @type='logoAWS' @size='xxl' />
 <br />
-<EuiIcon @type="logoAWS" @size="s" />
-<EuiIcon @type="logoAWS" @size="m" />
-<EuiIcon @type="logoAWS" @size="l" />
-<EuiIcon @type="logoAWS" @size="xl" />
-<EuiIcon @type="logoAWS" @size="xxl" />
+<EuiIcon @type='/assets/ember.svg' @size='s' />
+<EuiIcon @type='/assets/ember.svg' @size='m' />
+<EuiIcon @type='/assets/ember.svg' @size='l' />
+<EuiIcon @type='/assets/ember.svg' @size='xl' />
+<EuiIcon @type='/assets/ember.svg' @size='xxl' />
 <br />
-<EuiIcon @type="/assets/ember.svg" @size="s" />
-<EuiIcon @type="/assets/ember.svg" @size="m" />
-<EuiIcon @type="/assets/ember.svg" @size="l" />
-<EuiIcon @type="/assets/ember.svg" @size="xl" />
-<EuiIcon @type="/assets/ember.svg" @size="xxl" />
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='s'
+/>
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='m'
+/>
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='l'
+/>
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='xl'
+/>
+<EuiIcon
+  @type='https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg'
+  @size='xxl'
+/>
 <br />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="s" />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="m" />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="l" />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="xl" />
-<EuiIcon @type="https://www.flaticon.es/svg/static/icons/svg/3445/3445045.svg" @size="xxl" />
-<br />
-<EuiIcon @type="flag" @size="s" @color="green" />
-<EuiIcon @type="flag" @size="m" @color="white" />
-<EuiIcon @type="flag" @size="l" @color="red" />
-<EuiIcon @type="flag" @size="xl" @color="green" />
-<EuiIcon @type="flag" @size="xxl" @color="white" />
+<EuiIcon @type='flag' @size='s' @color='green' />
+<EuiIcon @type='flag' @size='m' @color='white' />
+<EuiIcon @type='flag' @size='l' @color='red' />
+<EuiIcon @type='flag' @size='xl' @color='green' />
+<EuiIcon @type='flag' @size='xxl' @color='white' />
 ```
 
-
 ```js component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -65,5 +70,4 @@ export default class DemoIconComponent extends Component {
     this.icon = this.icons[Math.floor(Math.random() * this.icons.length)];
   }
 }
-
-```
+```

package/index.js

@@ -1,10 +1,4 @@
 'use strict';
-const path = require('path');
-const resolve = require('resolve');
-const BroccoliMergeTrees = require('broccoli-merge-trees');
-const writeFile = require('broccoli-file-creator');
-const Funnel = require('broccoli-funnel');
-const EuiScssFilter = require('./lib/elastic-eui-scss-filter');
 
 module.exports = {
   name: require('./package').name,
@@ -53,14 +47,12 @@ module.exports = {
       ? this.emberEuiOptions.theme
       : 'light';
 
-    if (this.emberEuiOptions.useCompiledCss !== false) {
-      if (this.emberEuiOptions.theme) {
-        app.import(
-          `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
-        );
-      } else {
-        app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
-      }
+    if (this.emberEuiOptions.theme) {
+      app.import(
+        `node_modules/@elastic/eui/dist/eui_theme_${this.emberEuiOptions.theme}.min.css`
+      );
+    } else {
+      app.import('node_modules/@elastic/eui/dist/eui_theme_light.min.css');
     }
 
     this._super.included.apply(this, arguments);
@@ -71,47 +63,5 @@ module.exports = {
       (a) => a.name === 'ember-power-select'
     );
     return emberPowerSelect.contentFor(type, config);
-  },
-
-  // TODO: Currently the performance of recompiling sass on every change are serious, find a way to improve them.
-  treeForStyles(tree) {
-    let trees = [];
-    let euiScssFiles;
-
-    if (this.emberEuiOptions.useCompiledCss === false) {
-      euiScssFiles = new Funnel(this.pathBase('@elastic/eui'), {
-        srcDir: '/src',
-        include: ['**/*.scss'],
-        destDir: 'elastic-eui',
-        annotation: 'ElasticEUIScssFunnel'
-      });
-
-      euiScssFiles = new EuiScssFilter(euiScssFiles);
-
-      trees.push(euiScssFiles);
-    }
-
-    let selectedTheme = this.emberEuiOptions.theme;
-
-    let importer = writeFile(
-      'ember-eui-components.scss',
-      euiScssFiles ? `@import './elastic-eui/theme_${selectedTheme}.scss';` : ''
-    );
-
-    trees.push(importer);
-
-    trees.push(tree);
-
-    let output = new BroccoliMergeTrees(trees, {
-      overwrite: true
-    });
-
-    return this._super.treeForStyles(output);
-  },
-
-  pathBase(packageName) {
-    return path.dirname(
-      resolve.sync(`${packageName}/package.json`, { basedir: __dirname })
-    );
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "1.6.2",
+  "version": "3.0.1",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -26,11 +26,14 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
     "lint:hbs": "ember-template-lint .",
-    "lint:js": "eslint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "npm-run-all lint:* test:*",
+    "test": "npm-run-all lint test:*",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
     "prepack": "ember ts:precompile",
@@ -49,34 +52,30 @@
   },
   "dependencies": {
     "@elastic/eui": "31.0.0",
-    "@ember/render-modifiers": "^1.0.2",
-    "@html-next/vertical-collection": "^2.0.0",
+    "@ember/render-modifiers": "^2.0.4",
+    "@html-next/vertical-collection": "^2.1.0",
     "@types/lodash-es": "^4.17.4",
-    "broccoli-file-creator": "^2.1.1",
-    "broccoli-filter": "^1.3.0",
-    "broccoli-funnel": "^2.0.1",
-    "broccoli-merge-trees": "^4.2.0",
     "chroma-js": "^2.1.0",
-    "ember-auto-import": "^1.6.0",
+    "ember-auto-import": "^1.11.3",
     "ember-cached-decorator-polyfill": "^0.1.1",
-    "ember-cli-babel": "^7.21.0",
-    "ember-cli-htmlbars": "^5.3.2",
-    "ember-cli-typescript": "^4.1.0",
+    "ember-cli-babel": "^7.26.6",
+    "ember-cli-htmlbars": "^5.7.1",
+    "ember-cli-typescript": "4.2.1",
     "ember-composable-helpers": "^4.4.1",
-    "ember-element-helper": "^0.5.0",
-    "ember-focus-trap": "^0.4.0",
+    "ember-element-helper": "^0.5.5",
+    "ember-focus-trap": "^0.7.0",
     "ember-href-to": "^4.1.0",
     "ember-in-element-polyfill": "^1.0.0",
     "ember-keyboard": "^6.0.2",
     "ember-math-helpers": "^2.15.0",
-    "ember-modifier": "^2.1.1",
+    "ember-modifier": "^2.1.2",
     "ember-named-blocks-polyfill": "^0.2.3",
     "ember-power-select": "^5.0.2",
     "ember-set-body-class": "^1.0.2",
-    "ember-set-helper": "^2.0.0",
+    "ember-set-helper": "^2.0.1",
     "ember-style-modifier": "^0.6.0",
-    "ember-svg-jar": "https://github.com/betocantu93/ember-svg-jar.git#add-bundle-flag",
-    "ember-truth-helpers": "^2.1.0",
+    "ember-svg-jar": "^2.3.4",
+    "ember-truth-helpers": "^3.0.0",
     "highlight.js": "^9.18.5",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
@@ -93,57 +92,76 @@
     "vfile": "^4.2.0"
   },
   "devDependencies": {
-    "@ember/optional-features": "^1.3.0",
-    "@glimmer/component": "^1.0.1",
-    "@glimmer/tracking": "^1.0.0",
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.6.0",
+    "@embroider/test-setup": "^1.0.0",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "@types/ember": "^3.16.0",
-    "@types/ember-qunit": "^3.4.9",
-    "@types/ember-resolver": "^5.0.9",
-    "@types/ember__test-helpers": "^1.7.2",
-    "@types/qunit": "^2.9.1",
+    "@types/ember-qunit": "^5.0.0",
+    "@types/ember-resolver": "^5.0.11",
+    "@types/ember__application": "^4.0.0",
+    "@types/ember__array": "^4.0.1",
+    "@types/ember__component": "^4.0.4",
+    "@types/ember__controller": "^4.0.0",
+    "@types/ember__debug": "^4.0.0",
+    "@types/ember__engine": "^4.0.0",
+    "@types/ember__error": "^4.0.0",
+    "@types/ember__object": "^4.0.0",
+    "@types/ember__polyfills": "^4.0.0",
+    "@types/ember__routing": "^4.0.3",
+    "@types/ember__runloop": "^4.0.0",
+    "@types/ember__service": "^4.0.0",
+    "@types/ember__string": "^3.0.9",
+    "@types/ember__template": "^4.0.0",
+    "@types/ember__test": "^4.0.0",
+    "@types/ember__test-helpers": "^2.6.1",
+    "@types/ember__utils": "^4.0.0",
+    "@types/htmlbars-inline-precompile": "^3.0.0",
+    "@types/qunit": "^2.11.3",
+    "@types/rsvp": "^4.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.20.0",
+    "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
-    "ember-cli-inject-live-reload": "^2.0.2",
+    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-netlify": "^0.4.1",
-    "ember-cli-postcss": "^7.0.0",
-    "ember-cli-resolve-asset": "^0.3.0",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-string-helpers": "^5.0.0",
+    "ember-cli-string-helpers": "^6.1.0",
+    "ember-cli-terser": "^4.0.2",
     "ember-cli-typescript-blueprints": "^3.0.0",
-    "ember-cli-uglify": "^3.0.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-element-helper": "^0.3.1",
     "ember-export-application-global": "^2.0.1",
-    "ember-get-config": "^0.3.0",
-    "ember-load-initializers": "^2.1.1",
+    "ember-get-config": "~1.0.2",
+    "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-modifier": "^2.1.1",
-    "ember-qunit": "^4.6.0",
-    "ember-resolver": "^8.0.0",
-    "ember-source": "~3.20.2",
-    "ember-source-channel-url": "^2.0.1",
-    "ember-string-helpers": "^1.0.2",
-    "ember-template-lint": "^2.9.1",
+    "ember-page-title": "^6.2.2",
+    "ember-qunit": "^5.1.4",
+    "ember-resolver": "^8.0.2",
+    "ember-source": "~3.28.0",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^3.6.0",
     "ember-try": "^1.4.0",
-    "eslint": "^7.5.0",
-    "eslint-plugin-ember": "^8.9.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-ember": "^10.5.4",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-qunit": "^6.2.0",
     "loader.js": "^4.7.0",
     "lodash-es": "^4.17.21",
     "mdast-util-to-hast": "^10.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
-    "qunit-dom": "^1.2.0",
-    "typescript": "^4.0.3"
+    "prettier": "^2.3.2",
+    "qunit": "^2.16.0",
+    "qunit-dom": "^1.6.0",
+    "typescript": "^4.5.5"
   },
   "publishConfig": {
     "access": "public"
   },
   "engines": {
-    "node": ">= 12"
+    "node": "12.* || 14.* || >= 16"
   },
   "ember": {
     "edition": "octane"
@@ -154,5 +172,5 @@
   "volta": {
     "node": "12.22.1"
   },
-  "gitHead": "166fcc5324d87bc5b03a7cfcf6214f3dbe7c76ce"
+  "gitHead": "b8340ca971032258b196e04693f73b4b1c35b0e1"
 }

package/.prettierignore

@@ -1,20 +0,0 @@
-# unconventional js
-vendor/
-public/
-
-# compiled output
-dist/
-tmp/
-
-# dependencies
-node_modules/
-
-# ember-try
-.node_modules.ember-try/
-bower.json.ember-try
-package.json.ember-try
-
-package.json
-
-*.html
-*.js

package/lib/elastic-eui-scss-filter.js

@@ -1,16 +0,0 @@
-'use strict';
-
-const Filter = require('broccoli-filter');
-
-module.exports = class EuiScssFilter extends Filter {
-  constructor(inputNode) {
-    super(inputNode, { annotation: 'EuiScssFilter' });
-
-    this.extensions = ['scss'];
-    this.targetExtension = 'scss';
-  }
-
-  processString(content) {
-    return content.replace("@import '../packages/index';", '');
-  }
-};

package/public/markdown-checkmark.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
-	<path d="M11.828 13H4.172A1.173 1.173 0 013 11.828V4.172C3 3.526 3.526 3 4.172 3h7.656C12.474 3 13 3.526 13 4.172v7.656c0 .646-.526 1.172-1.172 1.172zM4.172 3.781a.391.391 0 00-.39.39v7.657c0 .216.175.39.39.39h7.656a.39.39 0 00.39-.39V4.172a.391.391 0 00-.39-.39H4.172zm7.244 2.175l-.582-.521L7.22 9.469 5.125 7.476l-.539.566 2.68 2.548 4.15-4.634z" />
-</svg>

package/public/markdown-logo.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="26" height="16" fill="none" viewBox="0 0 26 16">
-	<path d="M1.25 1.875c0-.345.28-.625.625-.625h22.25c.345 0 .625.28.625.625v12.25c0 .345-.28.625-.625.625H1.875a.625.625 0 01-.625-.625V1.875zM1.875 0C.839 0 0 .84 0 1.875v12.25C0 15.161.84 16 1.875 16h22.25C25.16 16 26 15.16 26 14.125V1.875C26 .839 25.16 0 24.125 0H1.875zM3.75 3.75v8.5h2.5V7.375l2.5 3.125 2.5-3.125v4.875h2.5v-8.5h-2.5l-2.5 3.125-2.5-3.125h-2.5zm11.875 4.375l3.75 4.125 3.75-4.125h-2.5V3.75h-2.5v4.375h-2.5z" />
-</svg>