@ember-eui/core 4.3.0 → 5.0.0-alpha.3

package/addon/components/eui-header-links/index.hbs

@@ -0,0 +1,41 @@
+<nav class="euiHeaderLinks">
+  <EuiHideFor @sizes={{this.popoverBreakpoints}}>
+    <div
+      class={{class-names
+        "euiHeaderLinks__list"
+        componentName="EuiHeaderLinks"
+        gutterSize=(arg-or-default @gutterSize "xs")
+      }}
+    >
+      {{yield}}
+    </div>
+  </EuiHideFor>
+
+  {{#if this.hasMobileVersion}}
+    <EuiShowFor @sizes={{this.popoverBreakpoints}}>
+      <EuiPopover
+        @isOpen={{this.pop1}}
+        @anchorPosition="downRight"
+        @panelPaddingSize={{@panelPaddingSize}}
+        @closePopover={{set this "pop1" false}}
+      >
+        <:button>
+          <EuiButtonEmpty @color="text" {{on "click" (set this "pop1" true)}}>
+            <EuiIcon @type="apps" />
+          </EuiButtonEmpty>
+        </:button>
+        <:content>
+          <div
+            class={{class-names
+              "euiHeaderLinks__mobileList"
+              componentName="EuiHeaderLinks"
+              mobileGutterSize=(arg-or-default @gutterSize "xs")
+            }}
+          >
+            {{yield}}
+          </div>
+        </:content>
+      </EuiPopover>
+    </EuiShowFor>
+  {{/if}}
+</nav>

package/addon/components/eui-header-links/index.ts

@@ -0,0 +1,14 @@
+import GlimmerComponent from '@glimmer/component';
+
+interface EuiHeaderLinksArgs {
+  popoverBreakpoints?: string[];
+}
+export default class EuiHeaderLinksComponent extends GlimmerComponent<EuiHeaderLinksArgs> {
+  get popoverBreakpoints() {
+    return this.args.popoverBreakpoints || ['xs', 's'];
+  }
+
+  get hasMobileVersion() {
+    return this.popoverBreakpoints?.length > 0;
+  }
+}

package/addon/components/eui-header-section-item-button/index.hbs

@@ -1,10 +1,18 @@
-<button
-  class="euiHeaderSectionItem__button"
-  type="button"
+<EuiButtonEmpty
+  class="euiHeaderSectionItemButton"
   ...attributes
+  @isDisabled={{@disabled}}
+  @href={{@href}}
+  @color="text"
+  {{did-insert (set this "buttonRef")}}
   {{on "click" (optional @onClick)}}
 >
-  {{yield}}
+  <span
+    {{did-insert this.setAnimationTargetRef}}
+    class="euiHeaderSectionItemButton__content"
+  >
+    {{yield}}
+  </span>
   {{#if @notification}}
     {{#if (eq @notification true)}}
       <EuiIcon
@@ -13,13 +21,23 @@
         @type="dot"
         @size="l"
       />
-    {{else}}
-      <EuiNotificationBadge
-        class="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
-        @color={{arg-or-default @notificationColor "accent"}}
-      >
-        {{@notification}}
-      </EuiNotificationBadge>
+    {{else if @notification}}
+      <EuiHideFor @sizes={{array "xs"}}>
+        <EuiNotificationBadge
+          class="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge"
+          @color={{arg-or-default @notificationColor "accent"}}
+        >
+          {{@notification}}
+        </EuiNotificationBadge>
+      </EuiHideFor>
+      <EuiShowFor @sizes={{array "xs"}}>
+        <EuiIcon
+          @iconClasses="euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot"
+          @color={{arg-or-default @notificationColor "accent"}}
+          @type="dot"
+          @size="l"
+        />
+      </EuiShowFor>
     {{/if}}
   {{/if}}
-</button>
+</EuiButtonEmpty>

package/addon/components/eui-header-section-item-button/index.ts

@@ -0,0 +1,131 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+const keyframes: Keyframe[] = [
+  { transform: 'rotate(0)', offset: 0, easing: 'ease-in-out' },
+  {
+    transform: 'rotate(30deg)',
+    offset: 0.01,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-28deg)',
+    offset: 0.03,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(34deg)',
+    offset: 0.05,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-32deg)',
+    offset: 0.07,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(30deg)',
+    offset: 0.09,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-28deg)',
+    offset: 0.11,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(26deg)',
+    offset: 0.13,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-24deg)',
+    offset: 0.15,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(22deg)',
+    offset: 0.17,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-20deg)',
+    offset: 0.19,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(18deg)',
+    offset: 0.21,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-16deg)',
+    offset: 0.23,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(14deg)',
+    offset: 0.25,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-12deg)',
+    offset: 0.27,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(10deg)',
+    offset: 0.29,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-8deg)',
+    offset: 0.31,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(6deg)',
+    offset: 0.33,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-4deg)',
+    offset: 0.35,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(2deg)',
+    offset: 0.37,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(-1deg)',
+    offset: 0.39,
+    easing: 'ease-in-out'
+  },
+  {
+    transform: 'rotate(1deg)',
+    offset: 0.41,
+    easing: 'ease-in-out'
+  },
+  { transform: 'rotate(0)', offset: 0.43, easing: 'ease-in-out' },
+  { transform: 'rotate(0)', offset: 1, easing: 'ease-in-out' }
+];
+
+interface EuiHeaderSectionItemButtonComponentArgs {
+  ref?: (api: { euiAnimate: () => void }) => void;
+}
+
+export default class EuiHeaderSectionItemButtonComponent extends Component<EuiHeaderSectionItemButtonComponentArgs> {
+  @tracked buttonRef: HTMLButtonElement | undefined;
+  @tracked animationTargetRef: HTMLSpanElement | undefined;
+
+  setAnimationTargetRef = (ele: HTMLSpanElement) => {
+    this.animationTargetRef = ele;
+    this.args.ref?.({ euiAnimate: this.animate });
+  };
+
+  animate = () => {
+    this.animationTargetRef?.animate(keyframes, { duration: 5000 });
+  };
+}

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

@@ -1,16 +1,18 @@
-<div class="euiHealth" ...attributes>
+<div
+  class={{class-names
+    componentName="EuiHealth"
+    textSize=(arg-or-default @textSize "m")
+  }}
+  ...attributes
+>
   <div
-    class="
-      euiFlexGroup
-      euiFlexGroup--gutterExtraSmall
-      euiFlexGroup--alignItemsCenter
-      euiFlexGroup--directionRow"
+    class="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
   >
-     <div class="euiFlexItem euiFlexItem--flexGrowZero">
-       <EuiIcon @type="dot" @color={{@color}} />
-     </div>
-     <div class="euiFlexItem euiFlexItem--flexGrowZero">
-        {{yield}}
-     </div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      <EuiIcon @type="dot" @color={{@color}} />
+    </div>
+    <div class="euiFlexItem euiFlexItem--flexGrowZero">
+      {{yield}}
+    </div>
   </div>
-</div>
+</div>

package/addon/components/eui-hide-for/index.hbs

@@ -0,0 +1,3 @@
+{{#if this.shouldShow}}
+  {{yield}}
+{{/if}}

package/addon/components/eui-hide-for/index.ts

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { EuiBreakpointSize } from '../../utils/breakpoint';
+import { CurrentBreakPointHelper } from '../eui-show-for';
+//@ts-ignore
+import { invokeHelper } from '@ember/helper';
+//@ts-ignore
+import { getValue } from '@glimmer/tracking/primitives/cache';
+
+export type EuiHideForBreakpoints = EuiBreakpointSize;
+
+export interface EuiHideForArgs {
+  /**
+   * Required otherwise nothing ever gets returned
+   */
+  children: Component;
+  /**
+   * List of all the responsive sizes to hide the children for.
+   * Array of #EuiBreakpointSize
+   */
+  sizes: EuiHideForBreakpoints[] | 'all' | 'none';
+}
+
+export default class EuiHideForComponent extends Component<EuiHideForArgs> {
+  currentBreakpointHelper = invokeHelper(this, CurrentBreakPointHelper, () => {
+    return {
+      positional: [this.args.sizes]
+    };
+  });
+
+  get shouldShow() {
+    return !getValue(this.currentBreakpointHelper);
+  }
+}

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

@@ -6,7 +6,7 @@
       class={{class-names
         @iconClasses
         this.optionalColorClass
-        (if this.isAppIcon "euiIcon--app")
+        (if (and this.isAppIcon (not this.appIconHasColor)) "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       }}
@@ -16,6 +16,7 @@
       aria-labelledby={{if @aria-labelledby @aria-labelledby this.titleId}}
       tabindex={{this.tabIndex}}
       style={{this.optionalCustomStyles}}
+      color={{@color}}
       ...attributes
     />
   {{/let}}
@@ -26,10 +27,11 @@
       class={{class-names
         @iconClasses
         this.optionalColorClass
-        (if this.isAppIcon "euiIcon--app")
+        (if (and this.isAppIcon (not this.appIconHasColor)) "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       }}
+      color={{@color}}
       alt={{if @title @title}}
       tabIndex={{@tabIndex}}
       ...attributes
@@ -40,10 +42,11 @@
       class=(class-names
         @iconClasses
         this.optionalColorClass
-        (if this.isAppIcon "euiIcon--app")
+        (if (and this.isAppIcon (not this.appIconHasColor)) "euiIcon--app")
         componentName="EuiIcon"
         size=this.size
       )
+      color=@color
       role="image"
       aria-hidden=(if this.isAriaHidden "true")
       aria-label=(if @aria-label @aria-label this.titleId)

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

@@ -129,6 +129,10 @@ export default class EuiIcon extends Component<EuiIconArgs> {
     );
   }
 
+  get appIconHasColor() {
+    return this.args.color && this.args.color !== 'default';
+  }
+
   get focusable(): string {
     const { tabIndex } = this.args;
     return tabIndex == null || tabIndex === -1 ? 'false' : 'true';

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

@@ -1,12 +1,16 @@
-<figure
-  class={{class-names
-    (unless (eq @hasShadow false) "euiImage--hasShadow")
-    componentName="EuiImage"
-    size=@size
-  }}
-  ...attributes
->
-  {{#if @allowFullScreen}}
+{{#if @allowFullScreen}}
+  <figure
+    class={{class-names
+      "euiImage--allowFullScreen"
+      (unless (eq @hasShadow false) "euiImage--hasShadow")
+      float=@float
+      margin=@margin
+      componentName="EuiImage"
+      size=@size
+    }}
+    ...attributes
+  >
+
     <button
       class="euiImage__button"
       type="button"
@@ -15,43 +19,77 @@
       {{on "click" this.toggleFullscreen}}
     >
       <img
-        src={{@url}}
+        src={{or @src @url}}
         class="euiImage__img"
         style={{this.sizeStyle}}
         alt={{@alt}}
       />
       <EuiIcon
-        class="euiImage__icon"
+        @iconClasses="euiImage__icon"
         @type="fullScreen"
-        @color={{if (not (eq @fullScreenIconColor "dark")) "ghost"}}
+        @color={{if (not-eq @fullScreenIconColor "dark") "ghost"}}
       />
     </button>
-  {{else}}
+
+    {{#if @caption}}
+      <figcaption class="euiImage__caption">
+        {{@caption}}
+      </figcaption>
+    {{/if}}
+  </figure>
+
+{{else}}
+
+  <figure
+    class={{class-names
+      (unless (eq @hasShadow false) "euiImage--hasShadow")
+      float=@float
+      margin=@margin
+      componentName="EuiImage"
+      size=@size
+    }}
+    ...attributes
+  >
+
     <img
-      src={{@url}}
+      src={{or @src @url}}
       class="euiImage__img"
       style={{this.sizeStyle}}
       alt={{@alt}}
     />
-  {{/if}}
-  {{#if @caption}}
-    <figcaption class="euiImage__caption">
-      {{@caption}}
-    </figcaption>
-  {{/if}}
-</figure>
+
+    {{#if @caption}}
+      <figcaption class="euiImage__caption">
+        {{@caption}}
+      </figcaption>
+    {{/if}}
+  </figure>
+
+{{/if}}
+
 {{#if this.isFullscreen}}
   <EuiOverlayMask
     @headerZindexLocation="above"
-    {{on "click" this.toggleFullscreen}}
+    @onClick={{this.toggleFullscreen}}
   >
-    <figure class="euiImage euiImage-isFullScreen">
+    <figure
+      class="euiImage euiImage-isFullScreen"
+      {{focus-trap focusTrapOptions=(hash clickOutsideDeactivates=true)}}
+    >
       <button
         class="euiImage__button"
         type="button"
         {{on "click" this.toggleFullscreen}}
+        {{on-key
+          "Escape"
+          (prevent-default (stop-propagation this.toggleFullscreen))
+        }}
       >
-        <img class="euiImage-isFullScreen__img" src={{@url}} alt={{@alt}} />
+        <img
+          class="euiImage-isFullScreen__img"
+          src={{or @src @url}}
+          alt={{@alt}}
+        />
       </button>
       <figcaption class="euiImage__caption">
         {{@caption}}
@@ -60,7 +98,7 @@
     <EuiIcon
       @iconClasses="euiImage-isFullScreenCloseIcon"
       @type="cross"
-      @color={{if (not (eq @fullScreenIconColor "dark")) "ghost"}}
+      @color={{if (not-eq @fullScreenIconColor "dark") "ghost"}}
     />
   </EuiOverlayMask>
 {{/if}}

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

@@ -56,8 +56,13 @@ export default class EuiImage extends GlimmerComponent<ImageArgs> {
 
   get sizeStyle(): ReturnType<typeof htmlSafe> | string {
     const size = this.args.size;
-    if ((typeof size === 'string' || typeof size === 'number') && !this.sizeClass) {
-      return htmlSafe(`max-height:${this.args.size}px; max-width:${this.args.size}px; width:auto;`);
+    if (
+      (typeof size === 'string' || typeof size === 'number') &&
+      !this.sizeClass
+    ) {
+      return htmlSafe(
+        `max-height:${this.args.size}px; max-width:${this.args.size}px; width:auto;`
+      );
     }
     return '';
   }

package/addon/components/eui-input-popover/index.ts

@@ -6,7 +6,8 @@ import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-defa
 import { tabbable } from 'tabbable';
 import { EuiPopoverArgs } from '../eui-popover';
 
-export interface EuiInputPopoverArgs extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
+export interface EuiInputPopoverArgs
+  extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
   disableFocusTrap?: boolean;
   fullWidth?: boolean;
   input: EuiPopoverArgs['button'];
@@ -44,8 +45,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
   @action
   setPanelWidth(width?: number): void {
     const { panel, inputWidth } = this;
-    if (panel && (!!inputWidth || !!width)) {
-      const newWidth = !width ? width : inputWidth;
+    const newWidth = width || inputWidth;
+    if (panel && !!newWidth) {
       panel.style.width = `${newWidth}px`;
       this.args.onPanelResize?.(newWidth);
     }
@@ -74,7 +75,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
       });
       if (
         this.args.disableFocusTrap ||
-        (tabbableItems.length && tabbableItems[tabbableItems.length - 1] === document.activeElement)
+        (tabbableItems.length &&
+          tabbableItems[tabbableItems.length - 1] === document.activeElement)
       ) {
         this.args.closePopover?.();
       }

package/addon/components/eui-key-pad-menu/index.hbs

@@ -0,0 +1,16 @@
+{{#if @checkable.legend}}
+  <fieldset
+    class="euiKeyPadMenu"
+    aria-label={{@checkable.ariaLegend}}
+    ...attributes
+  >
+    <EuiFormLabel @type="legend">
+      {{@checkable.legend}}
+    </EuiFormLabel>
+    {{yield}}
+  </fieldset>
+{{else}}
+  <ul class="euiKeyPadMenu" ...attributes>
+    {{yield (component "eui-key-pad-menu/key")}}
+  </ul>
+{{/if}}

package/addon/components/eui-key-pad-menu/key/index.hbs

@@ -0,0 +1 @@
+<li>{{yield}}</li>

package/addon/components/eui-key-pad-menu-item/index.hbs

@@ -0,0 +1,66 @@
+{{#let
+  (if @checkable "label" (if (and @href (not @isDisabled)) "a" "button"))
+  (arg-or-default @id (unique-id))
+  (and @href (not @isDisabled))
+  as |ElementTag itemId useHref|
+}}
+  {{#let (element ElementTag) as |Element|}}
+    <Element
+      href={{if useHref @href}}
+      target={{if useHref @target}}
+      aria-current={{if (and useHref @isSelected) @isSelected}}
+      for={{if @checkable itemId}}
+      disabled={{if (and (not useHref) (not @checkable)) @isDisabled}}
+      type={{if (and (not useHref) (not @checkable)) "button"}}
+      aria-pressed={{if (and (not useHref) (not @checkable)) @isSelected}}
+      class={{class-names
+        "euiKeyPadMenuItem"
+        (if @betaBadgeLabel "euiKeyPadMenuItem--hasBetaBadge")
+        (if @checkable "euiKeyPadMenuItem--checkable")
+        (if @isDisabled "euiKeyPadMenuItem-isDisabled")
+        (if @isSelected "euiKeyPadMenuItem-isSelected")
+      }}
+      rel={{if useHref "noreferrer"}}
+      ...attributes
+    >
+      <span class="euiKeyPadMenuItem__inner">
+        {{#if @checkable}}
+          {{#if (eq @checkable "single")}}
+            {{! template-lint-disable no-duplicate-id }}
+            <EuiRadio
+              id={{itemId}}
+              @containerClass="euiKeyPadMenuItem__checkableInput"
+              @checked={{@isSelected}}
+              @disabled={{@isDisabled}}
+              @name={{@name}}
+              value={{@value}}
+              {{on "change" (fn @onChange itemId @value)}}
+            />
+          {{else}}
+            <EuiCheckbox
+              id={{itemId}}
+              @containerClass="euiKeyPadMenuItem__checkableInput"
+              @checked={{@isSelected}}
+              @disabled={{@isDisabled}}
+              @name={{@name}}
+              {{on "change" (fn @onChange itemId)}}
+            />
+          {{/if}}
+        {{else}}
+          <EuiBetaBadge
+            @size="s"
+            @color="subdued"
+            class="euiKeyPadMenuItem__betaBadge"
+            @label={{this.charAt @betaBadgeLabel 0}}
+            @title={{@betaBadgeLabel}}
+            @iconType={{@betaBadgeIconType}}
+            @tooltipContent={{@betaBadgeTooltipContent}}
+          />
+        {{/if}}
+        <span class="euiKeyPadMenuItem__icon">{{yield}}</span>
+        <span class="euiKeyPadMenuItem__label">{{@label}}</span>
+      </span>
+    </Element>
+
+  {{/let}}
+{{/let}}

package/addon/components/eui-key-pad-menu-item/index.ts

@@ -0,0 +1,11 @@
+import { helper } from '@ember/component/helper';
+import Component from '@glimmer/component';
+interface EuiKeyPadMenuItemComponentArgs {}
+
+const charAt = helper(function ([str, num]: [string, number]) {
+  return str?.charAt?.(num);
+});
+
+export default class EuiKeyPadMenuItemComponent extends Component<EuiKeyPadMenuItemComponentArgs> {
+  charAt = charAt;
+}