@ember-eui/core 1.6.1 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 ### Master
 
+### 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`
+- Bubble the change correctly from `<Form.FieldMarkdownEditor />`
 ### 1.6.1
 🐛 Bug / Fixes
 `@ember-eui/core`

package/README.md

@@ -1,27 +1,21 @@
 # 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/@ember-eui/core/public',
         'node_modules/@elastic/eui/lib/components/icon',
       ],
     },
@@ -30,15 +24,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

@@ -16,24 +16,26 @@
       ...attributes
     />
   {{else}}
-    <Svg
-      @name={{this.icon}}
-      @loadingSvg={{this.emptyIcon}}
-      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}}
+    <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

@@ -90,6 +90,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 +119,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-footer/index.ts

@@ -9,6 +9,7 @@ export default class EuiMarkdownEditorFooterComponent extends Component<EuiMarkd
   @tracked isShowingHelp = false;
 
   get svgPath() {
+    //@ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment');
     const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
     return svgPath;

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

@@ -30,6 +30,7 @@ export default class EuiMarkdownEditorToolbarComponent extends Component<EuiMark
   ];
 
   get svgPath() {
+    //@ts-ignore
     const config = getOwner(this).resolveRegistration('config:environment');
     const svgPath = config?.['@ember-eui/core']?.svgPath || 'svg/';
     return svgPath;

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/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.1",
+  "version": "3.0.0",
   "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": "cd8d70c4fcb1f49e0c2921315fe52b5afffcfbd1"
+  "gitHead": "24ca3b05bb2ffb838ab452bb5b2a9794fd8a993f"
 }

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';", '');
-  }
-};