@ember-eui/core 5.6.0 → 5.8.1

package/docs/navigation/pagination/demo/d01-basic.md

@@ -0,0 +1,27 @@
+---
+order: 1
+---
+
+# Basic usage with many pages
+
+<EuiText>
+		<p><strong>EuiPagination</strong> accepts a total <EuiCode>pageCount</EuiCode> and only shows up to 5 consecutive pages, with shortcuts to the first and/or last page. It also requires the parent component to maintain the current <EuiCode>activePage</EuiCode> and handle the <EuiCode>onPageClick</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+{{#let (use-state 0) as |activePage|}}
+  <EuiPagination
+    @compressed={{true}}
+    @aria-label='Many pages example'
+    @pageCount={{22}}
+    @activePage={{activePage.value}}
+    @onPageClick={{activePage.setState}}
+  />
+  <EuiPagination
+    @aria-label='Many pages example'
+    @pageCount={{22}}
+    @activePage={{activePage.value}}
+    @onPageClick={{activePage.setState}}
+  />
+{{/let}}
+```

package/docs/navigation/pagination/index.md

@@ -0,0 +1,8 @@
+---
+title: Pagination
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Pagination"/>
+
+<EuiSpacer @size='l' />

package/docs/navigation/side-nav-demo/demo1.md

@@ -1,5 +1,3 @@
-# Demo
-
 ```hbs template
 <EuiSideNav
   @mobileTitle='Mobile Title'
@@ -7,7 +5,8 @@
   @isOpenMobile={{true}}
   @items={{this.sideNavItems}}
   @selectedItem={{this.selectedItem}}
-  @truncate={{true}} {{! you can also truncate per item }}
+  @truncate={{true}}
+  {{! you can also truncate per item }}
 />
 
 <EuiSpacer />
@@ -15,10 +14,12 @@
   @isOpenMobile={{true}}
   @items={{this.sideNavItems}}
   @selectedItem={{this.selectedItem}}
-  @truncate={{true}} {{! you can also truncate per item }}
+  @truncate={{true}}
+  {{! you can also truncate per item }}
 >
   <:heading>
-    <EuiIcon @type="faceHappy"/> Header!
+    <EuiIcon @type='faceHappy' />
+    Header!
   </:heading>
 </EuiSideNav>
 ```

package/docs/navigation/side-nav.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Side nav"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Side nav"/>

package/docs/navigation/steps.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Steps"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Steps"/>

package/docs/navigation/tabs.md

@@ -1 +1,2 @@
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Tabs"/>

package/docs/templates/page-template/index.md

@@ -2,9 +2,11 @@
 title: Page template
 ---
 
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Page template"/>
-
+<EuiSpacer />
 <EuiText>
+
   <p>
   Page layouts are modular and fit together in a precise manner, though certain
   parts can also be added or removed as needed. EUI provides both the indivdual
@@ -34,4 +36,4 @@ title: Page template
 </EuiCallOut>
 <EuiSpacer /> -->
 
-<EuiHorizontalRule />
+<EuiHorizontalRule />

package/docs/templates/sitewide-search/index.md

@@ -6,4 +6,5 @@ disabled_demos:
   - d02-options
 ---
 
-<EuiPageHeader @pageTitle="Sitewide search"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Sitewide search"/>

package/docs/templates/super-date-picker/index.md

@@ -8,5 +8,5 @@ disabled_demos:
   - d04-auto-refresh
   - d05-elastic-pattern-with-kql
 ---
-
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Sitewide search"/>

package/docs/utilities/auto-sizer-demo/demo1.md

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Auto sizer
-
 <EuiText>
 	<p>
 	<strong>EuiAutoSizer</strong> helps components that use virtualized rendering and/or require explicit dimensions to fill all available space in the parent container. See the <EuiLink @href="https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md">react-virtualized</EuiLink> documentation as <strong>EuiAutoSizer</strong> is a port from component for <strong>AutoSizer</strong>.

package/docs/utilities/auto-sizer.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Auto sizer"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Auto sizer"/>

package/docs/utilities/copy-demo/demo1.md

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Copy
-
 <EuiText>
 	<p>
 	The <strong>EuiCopy</strong> component is a utility for copying text to clipboard. Wrap a function that returns a component. The first argument will be a <EuiCode>copy</EuiCode> function

package/docs/utilities/copy.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Copy"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Copy"/>

package/docs/utilities/i18n/demo/d01-basic.md

@@ -0,0 +1,32 @@
+---
+order: 1
+---
+
+<EuiText>
+<p>
+	Render strings to components, you can provide a hash containing custom tokens via <EuiCode>{{"@i18n"}}</EuiCode> or override i18n/index.js in your host app to export a hash containg them
+</p>
+</EuiText>
+
+```hbs template
+<EuiI18n
+  @token='euiPagination.pageOfTotalCompressed'
+  @default='{page} of {total}'
+  @values={{hash page=(component 'eui-button') total=(component 'eui-button')}}
+  as |Token|
+>
+  <Token as |value|>
+		{{value}}
+	</Token>
+</EuiI18n>
+<EuiI18n
+  @token='euiPagination.pageOfTotalCompressed'
+  @default='{page} other {total}'
+  @values={{hash page=10 total=2000}}
+  as |Token|
+>
+  <Token as |value|>
+		{{value}}
+	</Token>
+</EuiI18n>
+```

package/docs/utilities/i18n/index.md

@@ -0,0 +1,8 @@
+---
+title: i18n
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="i18n"/>
+
+<EuiSpacer @size='l' />

package/docs/utilities/mutation-observer-demo/demo1.md

@@ -1,5 +1,3 @@
-# Demo
-
 ```hbs template
 <div>
   <p>
@@ -12,7 +10,11 @@
       onMutation=this.onMutation
     }}
   >
-    <EuiButton @color={{this.buttonColor}} @fill="{true}" {{on "click" this.toggleButtonColor}}>
+    <EuiButton
+      @color={{this.buttonColor}}
+      @fill='{true}'
+      {{on 'click' this.toggleButtonColor}}
+    >
       Toggle button color
     </EuiButton>
     <EuiSpacer />
@@ -26,8 +28,8 @@
               </li>
             {{/each}}
           </ul>
-          <EuiSpacer size="s" />
-          <EuiButtonEmpty {{on "click" this.addItem}}>
+          <EuiSpacer size='s' />
+          <EuiButtonEmpty {{on 'click' this.addItem}}>
             add item
           </EuiButtonEmpty>
         </EuiPanel>
@@ -60,7 +62,8 @@ export default class OutsideClickDetectorComponentDemo1 extends GlimmerComponent
 
   @action
   onMutation([{ type }]) {
-    this.lastMutation = type === 'attributes' ? 'button class name changed' : 'DOM tree changed';
+    this.lastMutation =
+      type === 'attributes' ? 'button class name changed' : 'DOM tree changed';
   }
 }
 ```

package/docs/utilities/mutation-observer.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Mutation observer"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Mutation observer"/>

package/docs/utilities/outside-click-detector-demo/demo1.md

@@ -1,8 +1,6 @@
-# Demo
-
 ```hbs template
 <EuiButton
-  {{on "click" (set this "disabled" (not this.disabled))}}
+  {{on 'click' (set this 'disabled' (not this.disabled))}}
   {{outside-click-detector onOutsideClick=this.salute isDisabled=this.disabled}}
 >
   {{#if this.disabled}}

package/docs/utilities/outside-click-detector.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Outside click detector"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Outside click detector"/>

package/docs/utilities/overlay-mask-demo/demo1.md

@@ -1,11 +1,9 @@
-# Demo
-
 ```hbs template
-<EuiButtonEmpty {{on "click" this.toggle}} @color="primary">
-    Click here to test Overlay
+<EuiButtonEmpty {{on 'click' this.toggle}} @color='primary'>
+  Click here to test Overlay
 </EuiButtonEmpty>
 {{#if this.showOverlay}}
-  <EuiOverlayMask @headerZindexLocation="above" {{on "click" this.toggle}}>
+  <EuiOverlayMask @headerZindexLocation='above' {{on 'click' this.toggle}}>
     This is a plain overlay!!
   </EuiOverlayMask>
 {{/if}}

package/docs/utilities/overlay-mask.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Overlay mask"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Overlay mask"/>

package/docs/utilities/portal-demo/demo1.md

@@ -2,7 +2,7 @@
 order: 1
 ---
 
-# Demo
+
 
 ```hbs template
 <EuiTitle>

package/docs/utilities/portal-demo/demo2.md

@@ -2,30 +2,31 @@
 order: 2
 ---
 
-# Demo
-
 ```hbs template
 <EuiTitle>
-Inserting portals
+  Inserting portals
 </EuiTitle>
 <EuiText>
-	There is an optional insert prop that can specify the portal's location in the DOM. When used, it is important to consider how the location relates to the component lifecycle, as it could be removed from the DOM by another component update.
-
-	insert is an object with two key-value pairs: sibling and position.sibling is the HTMLElement to insert the portal next to, and position specifies the portal's relative position, either before or after.
+  There is an optional insert prop that can specify the portal's location in the
+  DOM. When used, it is important to consider how the location relates to the
+  component lifecycle, as it could be removed from the DOM by another component
+  update. insert is an object with two key-value pairs: sibling and
+  position.sibling is the HTMLElement to insert the portal next to, and position
+  specifies the portal's relative position, either before or after.
 </EuiText>
-<EuiSpacer @size="l"/>
+<EuiSpacer @size='l' />
 <EuiButton
-	{{did-insert (set this "buttonRef")}}
-  {{on "click" (set this "showPortal" (not this.showPortal))}}
+  {{did-insert (set this 'buttonRef')}}
+  {{on 'click' (set this 'showPortal' (not this.showPortal))}}
 >
-	Toggle portal
+  Toggle portal
 </EuiButton>
 
 {{#if this.showPortal}}
-	<EuiPortal @insert={{hash sibling=this.buttonRef position='after' }}>
-		<EuiSpacer />
-		<p>This element is appended immediately after the button.</p>
-	</EuiPortal>
+  <EuiPortal @insert={{hash sibling=this.buttonRef position='after'}}>
+    <EuiSpacer />
+    <p>This element is appended immediately after the button.</p>
+  </EuiPortal>
 {{/if}}
 ```
 

package/docs/utilities/portal.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Portal"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Portal"/>

package/docs/utilities/resize-observer-demo/demo1.md

@@ -1,13 +1,17 @@
-# Demo
-
 ```hbs template
 <div>
   <EuiText>
     <p>
-      EuiResizeObserver is a wrapper around the Resizer Observer API which allows watching for changes to the content rectangle of DOM elements. Unlike EuiMutationObserver, EuiResizeObserver does not take parameters, but it does fire a more efficient and informative callback when resize events occur.
+      EuiResizeObserver is a wrapper around the Resizer Observer API which
+      allows watching for changes to the content rectangle of DOM elements.
+      Unlike EuiMutationObserver, EuiResizeObserver does not take parameters,
+      but it does fire a more efficient and informative callback when resize
+      events occur.
     </p>
     <p>
-      Due to limited browser support (currently not in Safari and IE11), will fallback to using the MutationObserver API with a default set of parameters that approximate the results of EuiMutationObserver.
+      Due to limited browser support (currently not in Safari and IE11), will
+      fallback to using the MutationObserver API with a default set of
+      parameters that approximate the results of EuiMutationObserver.
     </p>
   </EuiText>
   <EuiSpacer />
@@ -18,13 +22,16 @@
       height:
       {{this.dimensions.height}}
     </EuiTitle>
-    <EuiButton {{on "click" this.addItem}}>
+    <EuiButton {{on 'click' this.addItem}}>
       add item
     </EuiButton>
     <EuiSpacer />
     <EuiFlexGroup>
       <EuiFlexItem @grow={{false}}>
-        <EuiPanel @grow={{false}} {{resize-observer onResize=(set this "dimensions")}}>
+        <EuiPanel
+          @grow={{false}}
+          {{resize-observer onResize=(set this 'dimensions')}}
+        >
           <ul>
             {{#each this.items as |item|}}
               <li>
@@ -32,19 +39,20 @@
               </li>
             {{/each}}
           </ul>
-          <EuiSpacer size="s" />
+          <EuiSpacer size='s' />
         </EuiPanel>
       </EuiFlexItem>
     </EuiFlexGroup>
-    <EuiSpacer @size="l" />
+    <EuiSpacer @size='l' />
     <EuiText>
-      You can also indicate to only care about width or height, for example the next panel only observers for height changes
+      You can also indicate to only care about width or height, for example the
+      next panel only observers for height changes
     </EuiText>
     <EuiSpacer />
-    <EuiButton {{on "click" this.increaseItemsWidth}}>
+    <EuiButton {{on 'click' this.increaseItemsWidth}}>
       increaseWidth
     </EuiButton>
-    <EuiButton {{on "click" this.addItem}}>
+    <EuiButton {{on 'click' this.addItem}}>
       add item
     </EuiButton>
     <EuiTitle>
@@ -56,7 +64,10 @@
     <EuiSpacer />
     <EuiFlexGroup>
       <EuiFlexItem @grow={{false}}>
-        <EuiPanel @grow={{false}} {{resize-observer "height" onResize=(set this "dimensions2")}}>
+        <EuiPanel
+          @grow={{false}}
+          {{resize-observer 'height' onResize=(set this 'dimensions2')}}
+        >
           <ul>
             {{#each this.items as |item|}}
               <li>
@@ -64,7 +75,7 @@
               </li>
             {{/each}}
           </ul>
-          <EuiSpacer size="s" />
+          <EuiSpacer size='s' />
         </EuiPanel>
       </EuiFlexItem>
     </EuiFlexGroup>
@@ -81,11 +92,11 @@ export default class OutsideClickDetectorComponentDemo1 extends GlimmerComponent
   @tracked disabled = false;
   @tracked dimensions = {
     width: 0,
-    height: 0,
+    height: 0
   };
   @tracked dimensions2 = {
     width: 0,
-    height: 0,
+    height: 0
   };
   @tracked items = ['item 1', 'item 2', 'item 3'];
   @tracked items2 = ['item 1', 'item 2', 'item 3'];

package/docs/utilities/resize-observer.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Resize observer"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Resize observer"/>

package/docs/utilities/responsive.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Responsive"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Responsive"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.6.0",
+  "version": "5.8.1",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -64,7 +64,7 @@
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-typescript": "4.2.1",
     "ember-composable-helpers": "^4.4.1",
-    "ember-element-helper": "^0.5.5",
+    "ember-element-helper": "^0.6.0",
     "ember-event-helpers": "^0.1.1",
     "ember-in-element-polyfill": "^1.0.0",
     "ember-keyboard": "^7.0.1",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "7764a095d79c5241eec5c002f23721eda2dd6417"
+  "gitHead": "e057d6d6b01d895b7e338923bc5d390b8654e4b4"
 }

package/docs/display/card/basic-card.md

@@ -1,9 +0,0 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Basic card
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/display/card/beta-badge.md

@@ -1,9 +0,0 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Beta badge
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/display/card/checkable.md

@@ -1,9 +0,0 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Checkable
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/display/card/custom-children.md

@@ -1,9 +0,0 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Custom children
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/display/card/footer.md

@@ -1,9 +0,0 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Footer
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/display/card/images.md

@@ -1,9 +0,0 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Images
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/display/card/layout.md

@@ -1,9 +0,0 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Layout
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/display/card/selectable.md

@@ -1,9 +0,0 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Selectable
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/display/empty-prompt.md

@@ -1,2 +0,0 @@
-<EuiPageHeader @pageTitle="Empty Prompt"/>
-<EuiHorizontalRule />

package/docs/display/health.md

@@ -1,9 +0,0 @@
-<EuiPageHeader @pageTitle="Health"/>
-
-<EuiSpacer />
-    <EuiText>
-    <p>
-    <p>The <strong>EuiHealth</strong> component should be used when showing comparitive health of listed objects (like servers, HTTP response status codes(as per convenience), nodes, indexes..etc). Because icons are vague and bulky and color alone does not work, color plus text provides a recognizable, lightweight combo that works in most situations.</p>
-    </p>
-    </EuiText>
-    <EuiHorizontalRule />