@ember-eui/core 5.5.0 → 5.8.0

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

@@ -30,7 +30,7 @@
   >
 
     {{#if (or (has-block "icon") (or @image @icon))}}
-      <div class="euiCard__top">
+      <div class={{this.topClasses}}>
         {{#if (has-block "icon")}}
           {{yield "euiCard__icon" to="icon"}}
         {{else}}
@@ -53,7 +53,7 @@
     {{/if}}
 
 
-    <div class="euiCard__content">
+    <div class={{this.contentClasses}}>
       <EuiTitle class="euiCard__title" @size={{arg-or-default @titleSize "s"}}>
         {{#if (has-block "title")}}
           {{yield (set this "link") to="title"}}
@@ -122,7 +122,7 @@
       </span>
     {{/if}}
     {{#if (and (eq layout "vertical") (or (has-block "footer") @footer))}}
-      <div class="euiCard__footer">
+      <div class={{this.footerClasses}}>
         {{#if (has-block "footer")}}
           {{yield to="footer"}}
         {{else}}

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

@@ -4,6 +4,20 @@ import { EuiCardSelectProps, euiCardSelectableColor } from '../eui-card-select';
 
 type EuiCardComponentArgs = {
   selectable?: EuiCardSelectProps;
+  /**
+   * Class that will apply to the card top section.
+   */
+  topClassName?: string;
+
+  /**
+   * Class that will apply to the card content section.
+   */
+  contentClassName?: string;
+
+  /**
+   * Class that will apply to the card footer section.
+   */
+  footerClassName?: string;
 };
 
 export default class EuiCardComponent extends Component<EuiCardComponentArgs> {
@@ -24,4 +38,16 @@ export default class EuiCardComponent extends Component<EuiCardComponentArgs> {
         )}`
       : undefined;
   }
+
+  get topClasses(): string {
+    return ['euiCard__top', this.args.topClassName].join(' ');
+  }
+
+  get contentClasses(): string {
+    return ['euiCard__content', this.args.contentClassName].join(' ');
+  }
+
+  get footerClasses(): string {
+    return ['euiCard__footer', this.args.footerClassName].join(' ');
+  }
 }

package/addon/components/eui-described-form-group/index.hbs

@@ -8,7 +8,11 @@
 >
   <EuiFlexGroup @gutterSize={{arg-or-default @gutterSize "l"}}>
     <EuiFlexItem @grow={{@descriptionFlexItemProps.grow}}>
-      <EuiTitle class="euiDescribedFormGroup__title" @size={{@titleSize}}>
+      <EuiTitle
+        class="euiDescribedFormGroup__title"
+        @size={{@titleSize}}
+        @tagName={{@titleTagName}}
+      >
         {{yield to="title"}}
       </EuiTitle>
       <EuiText

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

@@ -0,0 +1,33 @@
+{{#let this.lookupedTokens as |result|}}
+  {{#if this.isI18nTokensShape}}
+    {{#if this.i18n.renderComponent}}
+      {{yield
+        (component
+          (ensure-safe-component this.i18n.renderComponent) tokens=result
+        )
+      }}
+    {{else}}
+      {{#each
+        (if (not-eq (type-of result) "array") (array result) result)
+        as |token index|
+      }}
+        {{yield (component "eui-i18n/render" token=token) index result}}
+      {{/each}}
+    {{/if}}
+  {{else}}
+    {{#if this.i18n.renderComponent}}
+      {{yield
+        (component
+          (ensure-safe-component this.i18n.renderComponent) tokens=result
+        )
+      }}
+    {{else}}
+      {{#each
+        (if (not-eq (type-of result) "array") (array result) result)
+        as |token index|
+      }}
+        {{yield (component "eui-i18n/render" token=token) index result}}
+      {{/each}}
+    {{/if}}
+  {{/if}}
+{{/let}}

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

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { processStringToChildren } from './util';
+//@ts-ignore
+import { i18n, I18nShape } from '@ember-eui/core/i18n';
+
+interface Args {
+  tokens?: string[];
+  defaults?: string[];
+  token?: string;
+  default?: string;
+  values?: { [key: string]: any };
+  i18n?: I18nShape;
+}
+
+interface lookupTokenOptions {
+  token: string;
+  i18nMapping: I18nShape['mapping'];
+  valueDefault: string;
+  i18nMappingFunc?: (token: string) => string;
+  values?: { [key: string]: any };
+  render?: I18nShape['render'];
+}
+
+function lookupToken(options: lookupTokenOptions) {
+  const {
+    token,
+    i18nMapping,
+    valueDefault,
+    i18nMappingFunc,
+    values = {}
+  } = options;
+
+  let renderable = (i18nMapping && i18nMapping[token]) || valueDefault;
+
+  const children = processStringToChildren(renderable, values, i18nMappingFunc);
+  if (typeof children === 'string') {
+    // likewise, `processStringToChildren` returns a string or ReactChild[] depending on
+    // the type of `values`, so we will make the assumption that the default value is correct.
+    return children;
+  }
+
+  // same reasons as above, we can't promise the transforms match the default's type
+  return children;
+}
+
+export default class EuiI18nComponent extends Component<Args> {
+  get isI18nTokensShape() {
+    return this.args.tokens != null;
+  }
+
+  get i18n() {
+    return this.args.i18n || i18n;
+  }
+
+  get lookupedTokens() {
+    if (this.isI18nTokensShape) {
+      return this.args.tokens?.map((token, idx) =>
+        lookupToken({
+          token,
+          i18nMapping: i18n.mapping,
+          valueDefault: this.args.defaults![idx]
+        })
+      );
+    } else {
+      return lookupToken({
+        token: this.args.token!,
+        i18nMapping: i18n.mapping,
+        valueDefault: this.args.default!,
+        values: this.args.values
+      });
+    }
+  }
+}

package/addon/components/eui-i18n/render.hbs

@@ -0,0 +1 @@
+{{yield @token}}

package/addon/components/eui-i18n/util.ts

@@ -0,0 +1,127 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  isBoolean,
+  isString,
+  isNumber,
+  isUndefined
+} from '../../utils/predicate';
+import { get } from '@ember/object';
+import { assert } from '@ember/debug';
+
+function isPrimitive(value: any) {
+  return (
+    isBoolean(value) || isString(value) || isNumber(value) || isUndefined(value)
+  );
+}
+
+type Child = string | { propName: string };
+
+function hasPropName(child: Child): child is { propName: string } {
+  return child
+    ? typeof child === 'object' && child.hasOwnProperty('propName')
+    : false;
+}
+
+function isElement(value: any) {
+  return value.hasOwnProperty('propName') && !isPrimitive(value);
+}
+
+/**
+ * Replaces placeholder values in `input` with their matching value in `values`
+ * e.g. input:'Hello, {name}' will replace `{name}` with `values[name]`
+ * @param {string} input
+ * @param {RenderableValues} values
+ * @param {Function} i18nMappingFunc
+ * @returns {string | React.ReactChild[]}
+ */
+export function processStringToChildren(
+  input: string,
+  values: { [key: string]: any },
+  i18nMappingFunc?: (token: string) => string
+): any[] | string {
+  const children: any[] = [];
+
+  let child: Child | undefined = { propName: '' };
+
+  function appendCharToChild(char: string) {
+    if (child === undefined) {
+      // starting a new string literal
+      child = char;
+    } else if (typeof child === 'string') {
+      // existing string literal
+      child = child + char;
+    } else if (hasPropName(child)) {
+      // adding to the propName of a values lookup
+      child.propName = child.propName + char;
+    }
+  }
+
+  function appendValueToChildren(value?: Child) {
+    if (value === undefined) {
+      return;
+    } else if (hasPropName(value)) {
+      // an array with any ReactElements will be kept as an array
+      // so they need to be assigned a key
+      // children.push(cloneElement(value, { key: children.length }));
+      children.push(value.propName);
+    } else if (isElement(value)) {
+      // this won't be called, propName children are converted to a ReactChild before calling this
+    } else {
+      // everything else can go straight in
+      if (i18nMappingFunc !== undefined && typeof value === 'string') {
+        value = i18nMappingFunc(value);
+      }
+      children.push(value);
+    }
+  }
+
+  // if we don't encounter a non-primitive
+  // then `children` can be concatenated together at the end
+  let encounteredNonPrimitive = false;
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i];
+
+    if (char === '\\') {
+      // peek at the next character to know if this is an escape
+      const nextChar = input[i + 1];
+      let charToAdd = char; // if this isn't an escape sequence then we will add the backslash
+
+      if (nextChar === '{' || nextChar === '}') {
+        // escaping a brace
+        i += 1; // advance passed the brace
+        charToAdd = input[i];
+      }
+      appendCharToChild(charToAdd);
+    } else if (char === '{') {
+      appendValueToChildren(child);
+      child = { propName: '' };
+    } else if (char === '}') {
+      const propName = (child as { propName: string }).propName as string;
+      if (get(values, propName) === undefined) {
+        assert(
+          `Key "${propName}" not found in ${JSON.stringify(values, null, 2)}`,
+          true
+        );
+      }
+      const propValue = values[propName];
+      encounteredNonPrimitive =
+        encounteredNonPrimitive || !isPrimitive(propValue);
+      appendValueToChildren(propValue);
+      child = undefined;
+    } else {
+      appendCharToChild(char);
+    }
+  }
+
+  // include any remaining child value
+  appendValueToChildren(child);
+
+  return encounteredNonPrimitive ? children : children.join('');
+}

package/addon/components/eui-pagination/button-wrapper/index.hbs

@@ -0,0 +1,21 @@
+{{#if (arg-or-default @inList true)}}
+  <li>
+    <EuiPaginationButton
+      @isActive={{eq @pageIndex @props.activePage}}
+      @totalPages={{@props.pageCount}}
+      @pageIndex={{@pageIndex}}
+      aria-controls={{@props.ariaControls}}
+      @hideOnMobile={{true}}
+      {{on "click" (fn @props.safeClick @pageIndex)}}
+    />
+  </li>
+{{else}}
+  <EuiPaginationButton
+    @isActive={{eq @pageIndex @props.activePage}}
+    @totalPages={{@props.pageCount}}
+    @pageIndex={{@pageIndex}}
+    aria-controls={{@props.ariaControls}}
+    @hideOnMobile={{true}}
+    {{on "click" (fn @props.safeClick @pageIndex)}}
+  />
+{{/if}}

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

@@ -0,0 +1,115 @@
+{{#if @compressed}}
+  <nav class="euiPagination" ...attributes>
+    <EuiPagination::PreviousButton
+      @activePage={{this.activePage}}
+      @safeClick={{this.safeClick}}
+      @props={{this.prevPageButtonProps}}
+    />
+    <EuiHideFor @sizes={{array "xs" "s"}}>
+      <EuiText @size="s" class="euiPagination__compressedText">
+        <EuiI18n
+          @token="euiPagination.pageOfTotalCompressed"
+          @default="{page} of {total}"
+          @values={{hash
+            page=(component
+              "eui-pagination/button-wrapper"
+              pageIndex=this.activePage
+              props=this.sharedButtonProps
+              inList=false
+            )
+            total=(component
+              "eui-pagination/button-wrapper"
+              pageIndex=(sub this.pageCount 1)
+              props=this.sharedButtonProps
+              inList=false
+            )
+          }}
+          as |Token|
+        >
+          <Token as |value|>
+            {{value}}
+          </Token>
+        </EuiI18n>
+      </EuiText>
+    </EuiHideFor>
+    <EuiPagination::NextButton
+      @activePage={{this.activePage}}
+      @safeClick={{this.safeClick}}
+      @props={{this.nextPageButtonProps}}
+    />
+  </nav>
+{{else}}
+  {{!template-lint-disable no-duplicate-landmark-elements}}
+  <nav class="euiPagination" ...attributes>
+    <EuiPagination::PreviousButton
+      @activePage={{this.activePage}}
+      @safeClick={{this.safeClick}}
+      @props={{this.prevPageButtonProps}}
+    />
+    <ul class="euiPagination__list">
+      {{#each this.firstPageButtons as |page|}}
+        {{#if page.i18n}}
+          <EuiI18n
+            @token="euiPagination.firstRangeAriaLabel"
+            @default="Skipping pages 2 to {lastPage}"
+            @values={{hash lastPage=this.firstPageInRange}}
+            as |Token|
+          >
+            <Token as |firstRangeAriaLabel|>
+              <li
+                aria-label={{firstRangeAriaLabel}}
+                class="euiPaginationButton-isPlaceholder euiPagination__item"
+              >
+                &hellip;
+              </li>
+            </Token>
+          </EuiI18n>
+        {{else}}
+          <EuiPagination::ButtonWrapper
+            @pageIndex={{page.pageIndex}}
+            @props={{this.sharedButtonProps}}
+          />
+        {{/if}}
+      {{/each}}
+      {{#each this.pages as |page|}}
+        <EuiPagination::ButtonWrapper
+          @pageIndex={{page.pageIndex}}
+          @props={{this.sharedButtonProps}}
+        />
+      {{/each}}
+      {{#each this.lastPageButtons as |page|}}
+        {{#if page.i18n}}
+          <EuiI18n
+            @token="euiPagination.lastRangeAriaLabel"
+            @default="Skipping pages {firstPage} to {lastPage}"
+            @values={{hash
+              firstPage=(add this.lastPageInRange 1)
+              lastPage=(sub this.pageCount 1)
+            }}
+            as |Token|
+          >
+            <Token as |lastRangeAriaLabel|>
+              <li
+                aria-label={{lastRangeAriaLabel}}
+                class="euiPaginationButton-isPlaceholder euiPagination__item"
+              >
+                &hellip;
+              </li>
+            </Token>
+          </EuiI18n>
+        {{else}}
+          <EuiPagination::ButtonWrapper
+            @pageIndex={{page.pageIndex}}
+            @props={{this.sharedButtonProps}}
+          />
+        {{/if}}
+      {{/each}}
+    </ul>
+    <EuiPagination::NextButton
+      @activePage={{this.activePage}}
+      @safeClick={{this.safeClick}}
+      @props={{this.nextPageButtonProps}}
+    />
+  </nav>
+
+{{/if}}

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

@@ -0,0 +1,177 @@
+import Component from '@glimmer/component';
+
+export type PageClickHandler = (pageIndex: number) => void;
+type SafeClickHandler = (pageIndex: number) => void;
+
+interface Args {
+  /**
+   * The total number of pages.
+   */
+  pageCount?: number;
+
+  /**
+   * The current page using a zero based index.
+   * So if you set the activePage to 1, it will activate the second page.
+   */
+  activePage?: number;
+
+  onPageClick?: PageClickHandler;
+
+  /**
+   * If true, will only show next/prev arrows instead of page numbers.
+   */
+  compressed?: boolean;
+
+  /**
+   * If passed in, passes value through to each button to set aria-controls
+   */
+  'aria-controls'?: string;
+  ariaControls?: string;
+}
+const MAX_VISIBLE_PAGES = 5;
+const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
+
+export default class EuiPaginationComponent extends Component<Args> {
+  get pageCount() {
+    return this.args.pageCount ?? 1;
+  }
+
+  get activePage() {
+    return this.args.activePage ?? 0;
+  }
+
+  get ariaControls() {
+    return this.args['aria-controls'] || this.args.ariaControls;
+  }
+
+  get hasControl() {
+    return this.ariaControls !== undefined;
+  }
+
+  get pages() {
+    let pages = [];
+    const { firstPageInRange, lastPageInRange } = this;
+    for (
+      let i = firstPageInRange, index = 0;
+      i < lastPageInRange;
+      i++, index++
+    ) {
+      pages.push({
+        pageIndex: i
+      });
+    }
+
+    return pages;
+  }
+
+  get firstPageButtons() {
+    let firstPageButtons = [];
+    if (this.firstPageInRange > 0) {
+      firstPageButtons.push({
+        pageIndex: 0
+      });
+
+      if (this.firstPageInRange > 1 && this.firstPageInRange !== 2) {
+        firstPageButtons.push({
+          i18n: {
+            key: 'startingEllipses',
+            token: 'euiPagination.firstRangeAriaLabel',
+            default: 'Skipping pages 2 to {lastPage}',
+            values: { lastPage: this.firstPageInRange }
+          }
+        });
+      } else if (this.firstPageInRange === 2) {
+        firstPageButtons.push({ pageIndex: 1 });
+      }
+    }
+
+    return firstPageButtons;
+  }
+
+  get lastPageButtons() {
+    let lastPageButtons = [];
+    let pageCount = this.pageCount;
+    let lastPageInRange = this.lastPageInRange;
+
+    if (lastPageInRange < pageCount) {
+      if (lastPageInRange + 1 === pageCount - 1) {
+        lastPageButtons.push({ pageIndex: lastPageInRange });
+      } else if (lastPageInRange < pageCount - 1) {
+        lastPageButtons.push({
+          i18n: {
+            key: 'endingEllipses',
+            token: 'euiPagination.lastRangeAriaLabel',
+            default: 'Skipping pages {firstPage} to {lastPage}',
+            values: { firstPage: lastPageInRange + 1, lastPage: pageCount - 1 }
+          }
+        });
+      }
+      lastPageButtons.push({ pageIndex: pageCount - 1 });
+    }
+
+    return lastPageButtons;
+  }
+
+  get sharedButtonProps() {
+    return {
+      activePage: this.activePage,
+      pageCount: this.pageCount,
+      ariaControls: this.ariaControls,
+      safeClick: this.safeClick
+    };
+  }
+
+  get prevPageButtonProps() {
+    let prevPageButtonProps = {};
+    if (this.hasControl && this.activePage !== 0) {
+      prevPageButtonProps = {
+        'aria-controls': this.ariaControls,
+        href: `#${this.ariaControls}`
+      };
+    } else {
+      prevPageButtonProps = { disabled: this.activePage === 0 };
+    }
+    return prevPageButtonProps;
+  }
+
+  get nextPageButtonProps() {
+    let nextPageButtonProps = {};
+    if (this.hasControl && this.activePage !== this.pageCount - 1) {
+      nextPageButtonProps = {
+        'aria-controls': this.ariaControls,
+        href: `#${this.ariaControls}`
+      };
+    } else {
+      nextPageButtonProps = {
+        disabled: this.activePage === this.pageCount - 1
+      };
+    }
+    return nextPageButtonProps;
+  }
+
+  safeClick: SafeClickHandler = (pageIndex) => {
+    if (this.ariaControls) {
+      const controlledElement = document.getElementById(this.ariaControls);
+
+      if (controlledElement) {
+        controlledElement.focus();
+      }
+    }
+
+    this.args.onPageClick?.(pageIndex);
+  };
+
+  get firstPageInRange() {
+    return Math.max(
+      0,
+      Math.min(
+        this.activePage - NUMBER_SURROUNDING_PAGES,
+        this.pageCount - MAX_VISIBLE_PAGES
+      )
+    );
+  }
+
+  get lastPageInRange() {
+    return Math.min(this.pageCount, this.firstPageInRange + MAX_VISIBLE_PAGES);
+  }
+}

package/addon/components/eui-pagination/next-button/index.hbs

@@ -0,0 +1,27 @@
+<EuiI18n
+  @token="euiPagination.nextPage"
+  @default="Next page, {page}"
+  @values={{hash page=(add @activePage 2)}}
+  as |Token|
+>
+  <Token as |nextPage|>
+    <EuiI18n
+      @token="euiPagination.disabledNextPage"
+      @default="Next page"
+      as |InnerToken|
+    >
+      <InnerToken as |disabledNextPage|>
+        <EuiButtonIcon
+          {{on "click" (fn @safeClick (add @activePage 1))}}
+          @iconType="arrowRight"
+          @color="text"
+          aria-label={{if (eq (sub @activePage -1)) disabledNextPage nextPage}}
+          aria-controls={{if @props.aria-controls @props.aria-controls}}
+          href={{if @props.href @props.href}}
+          disabled={{eq @props.disabled true}}
+          ...attributes
+        />
+      </InnerToken>
+    </EuiI18n>
+  </Token>
+</EuiI18n>

package/addon/components/eui-pagination/previous-button/index.hbs

@@ -0,0 +1,27 @@
+<EuiI18n
+  @token="euiPagination.previousPage"
+  @default="Previous page, {page}"
+  @values={{hash page=@activePage}}
+  as |Token|
+>
+  <Token as |previousPage|>
+    <EuiI18n
+      @token="euiPagination.disabledPreviousPage"
+      @default="Previous page"
+      as |InnerToken|
+    >
+      <InnerToken as |disabledPreviousPage|>
+        <EuiButtonIcon
+          {{on "click" (fn @safeClick (sub @activePage 1))}}
+          @iconType="arrowLeft"
+          @color="text"
+          aria-label={{if (eq @activePage 0) disabledPreviousPage previousPage}}
+          aria-controls={{if @props.aria-controls @props.aria-controls}}
+          href={{if @props.href @props.href}}
+          disabled={{eq @props.disabled true}}
+          ...attributes
+        />
+      </InnerToken>
+    </EuiI18n>
+  </Token>
+</EuiI18n>