@ember-eui/core 7.1.5 → 8.0.0-beta.0

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

@@ -1,194 +0,0 @@
-import { throttle } from '@ember/runloop';
-import Component from '@glimmer/component';
-import { modifier } from 'ember-modifier';
-import { EuiBreakpointSize, getBreakpoint } from '../../utils/breakpoint';
-import { cached, tracked } from '@glimmer/tracking';
-
-export type EuiBreadcrumbResponsiveMaxCount = {
-  /**
-   * Any of the following keys are allowed: `'xs' | 's' | 'm' | 'l' | 'xl'`
-   * Omitting a key will display all breadcrumbs at that breakpoint
-   */
-  [key in EuiBreakpointSize]?: number;
-};
-
-const responsiveDefault: EuiBreadcrumbResponsiveMaxCount = {
-  xs: 1,
-  s: 2,
-  m: 4
-};
-
-export type EuiBreadcrumb = {
-  /**
-   * Visible label of the breadcrumb
-   */
-  text: string;
-  href?: string;
-  onClick?: (e: MouseEvent) => void;
-  /**
-   * Force a max-width on the breadcrumb text
-   */
-  truncate?: boolean;
-
-  'aria-current': string;
-};
-
-const onWindowResizeModifier = modifier(
-  (
-    _ele: HTMLElement,
-    _pos,
-    {
-      functionToCallOnWindowResize
-    }: { isDocked: boolean; functionToCallOnWindowResize: () => void }
-  ) => {
-    window.addEventListener('resize', functionToCallOnWindowResize);
-
-    return () => {
-      window.removeEventListener('resize', functionToCallOnWindowResize);
-    };
-  }
-);
-
-const limitedBreadcrumbs = (max: number, breadcrumbs: EuiBreadcrumb[]) => {
-  const breadcrumbsAtStart = [];
-  const breadcrumbsAtEnd = [];
-  const limit = Math.min(max, breadcrumbs.length);
-  const start = Math.floor(limit / 2);
-  const overflowBreadcrumbs = breadcrumbs.slice(
-    start,
-    start + breadcrumbs.length - limit
-  );
-
-  if (overflowBreadcrumbs.length) {
-    overflowBreadcrumbs[overflowBreadcrumbs.length - 1]['aria-current'] =
-      'false';
-  }
-
-  for (let i = 0; i < limit; i++) {
-    // We'll alternate with displaying breadcrumbs at the end and at the start, but be biased
-    // towards breadcrumbs the end so that if max is an odd number, we'll have one more
-    // breadcrumb visible at the end than at the beginning.
-    const isEven = i % 2 === 0;
-
-    // We're picking breadcrumbs from the front AND the back, so we treat each iteration as a
-    // half-iteration.
-    const normalizedIndex = Math.floor(i * 0.5);
-    const indexOfBreadcrumb = isEven
-      ? breadcrumbs.length - 1 - normalizedIndex
-      : normalizedIndex;
-    const breadcrumb = breadcrumbs[indexOfBreadcrumb];
-
-    if (isEven) {
-      breadcrumbsAtEnd.unshift(breadcrumb);
-    } else {
-      breadcrumbsAtStart.push(breadcrumb);
-    }
-  }
-
-  if (max < breadcrumbs.length) {
-    breadcrumbsAtStart.push({ ellipsis: true });
-  }
-
-  return {
-    breadcrumbs: [...breadcrumbsAtStart, ...breadcrumbsAtEnd],
-    overflowBreadcrumbs
-  };
-};
-
-interface EuiBreadcrumbsComponentArgs {
-  /**
-   * Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller.
-   * Pass a custom #EuiBreadcrumbResponsiveMaxCount object to change the number of breadcrumbs to show at the particular breakpoints.
-   *
-   * Pass `false` to turn this behavior off.
-   *
-   * Default: `{ xs: 1, s: 2, m: 4 }`
-   */
-  responsive?: boolean | EuiBreadcrumbResponsiveMaxCount;
-
-  /**
-   * Forces all breadcrumbs to single line and
-   * truncates each breadcrumb to a particular width,
-   * except for the last item
-   */
-  truncate?: boolean;
-
-  /**
-   * Collapses the inner items past the maximum set here
-   * into a single ellipses item.
-   * Omitting or passing a `0` value will show all breadcrumbs.
-   */
-  max?: number | null;
-
-  /**
-   * The array of individual #EuiBreadcrumb items
-   */
-  breadcrumbs: EuiBreadcrumb[];
-}
-
-export default class EuiBreadcrumbsComponent extends Component<EuiBreadcrumbsComponentArgs> {
-  onWidowResize = onWindowResizeModifier;
-  @tracked currentBreakpoint;
-
-  constructor(owner: unknown, args: EuiBreadcrumbsComponentArgs) {
-    super(owner, args);
-    this.currentBreakpoint = getBreakpoint(
-      typeof window === 'undefined' ? -Infinity : window.innerWidth
-    );
-  }
-
-  functionToCallOnWindowResize = () => {
-    throttle(() => {
-      const newBreakpoint = getBreakpoint(window.innerWidth);
-      if (newBreakpoint !== this.currentBreakpoint) {
-        this.currentBreakpoint = newBreakpoint;
-      }
-    }, 50);
-  };
-
-  get responsiveObject() {
-    return typeof this.args.responsive === 'object'
-      ? this.args.responsive
-      : responsiveDefault;
-  }
-
-  get max() {
-    if (this.args.max === null) {
-      return null;
-    }
-    return this.args.max ?? 5;
-  }
-
-  get truncate() {
-    return this.args.truncate ?? true;
-  }
-
-  get calculatedMax(): EuiBreadcrumbsComponentArgs['max'] {
-    // The max property collapses any breadcrumbs past the max quantity.
-    // This is the same behavior we want for responsiveness.
-    // So calculate the max value based on the combination of `max` and `responsive`
-    let calculatedMax: EuiBreadcrumbsComponentArgs['max'] = this.max;
-    // Set the calculated max to the number associated with the currentBreakpoint key if it exists
-    if (
-      this.args.responsive &&
-      this.responsiveObject[this.currentBreakpoint as EuiBreakpointSize]
-    ) {
-      calculatedMax =
-        this.responsiveObject[this.currentBreakpoint as EuiBreakpointSize];
-    }
-    // Final check is to make sure max is used over a larger breakpoint value
-    if (this.max && calculatedMax) {
-      calculatedMax = this.max < calculatedMax ? this.max : calculatedMax;
-    }
-
-    return calculatedMax;
-  }
-
-  @cached
-  get limitedBreadcrumbs() {
-    const calculatedMax = this.calculatedMax;
-    return calculatedMax
-      ? limitedBreadcrumbs(calculatedMax, this.args.breadcrumbs)
-      : { breadcrumbs: this.args.breadcrumbs };
-  }
-}

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

@@ -1,45 +0,0 @@
-{{#let
-  (arg-or-default @baseClassName "euiButton")
-  (if
-    @element
-    @element
-    (if (and @href (not (or @isLoading @isDisabled))) "a" "button")
-  )
-  as |baseClassName theElement|
-}}
-  {{#let (element theElement) as |Element|}}
-    <Element
-      class={{class-names
-        (if @fill (concat baseClassName "--fill"))
-        (if @fullWidth (concat baseClassName "--fullWidth"))
-        (if
-          (or @isLoading @isDisabled @disabled)
-          (concat baseClassName "-isDisabled")
-        )
-        componentName=(classify baseClassName)
-        color=(arg-or-default @color "primary")
-        size=@size
-      }}
-      disabled={{or @isLoading @isDisabled @disabled}}
-      href={{@href}}
-      target={{@target}}
-      aria-pressed={{if @isSelected "true" null}}
-      type={{if (eq theElement "button") (arg-or-default @type "button") null}}
-      ...attributes
-    >
-      <EuiButtonContent
-        class={{class-names "euiButton__content" @contentClasses}}
-        @isLoading={{@isLoading}}
-        @iconType={{@iconType}}
-        @iconSize={{@iconSize}}
-        @iconSide={{@iconSide}}
-        @iconClasses={{@iconClasses}}
-        @useSvg={{@useSvg}}
-        @useComponent={{@useComponent}}
-        @textClasses={{class-names "euiButton__text" @textClasses}}
-      >
-        {{yield}}
-      </EuiButtonContent>
-    </Element>
-  {{/let}}
-{{/let}}

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

@@ -1,26 +0,0 @@
-<span
-  class={{class-names
-    "euiButtonContent"
-    (if (eq @iconSide "right") "euiButtonContent--iconRight")
-  }}
-  ...attributes
->
-  {{#if @isLoading}}
-    <EuiLoadingSpinner
-      class="euiButtonContent__spinner"
-      @size={{arg-or-default @iconSize "m"}}
-    />
-  {{else if @iconType}}
-    <EuiIcon
-      @iconClasses="euiButtonContent__icon {{@iconClasses}}"
-      @type={{@iconType}}
-      @size={{arg-or-default @iconSize "m"}}
-      @useSvg={{@useSvg}}
-      @useComponent={{@useComponent}}
-      @color="inherit"
-    />
-  {{/if}}
-  <span class={{@textClasses}}>
-    {{yield}}
-  </span>
-</span>

package/addon/components/eui-button-empty/index.hbs

@@ -1,62 +0,0 @@
-{{#let
-  (arg-or-default @size "m")
-  (arg-or-default @iconSize "m")
-  as |size iconSize|
-}}
-  {{#if (and @href (not (or @isLoading @isDisabled)))}}
-    <a
-      class={{class-names
-        (if (or @isLoading @isDisabled) "euiButtonEmpty-isDisabled")
-        componentName="EuiButtonEmpty"
-        color=(arg-or-default @color "primary")
-        size=size
-        flush=@flush
-      }}
-      href={{@href}}
-      target={{@target}}
-      ...attributes
-    >
-      <EuiButtonContent
-        class="euiButtonEmpty__content {{@contentClasses}}"
-        @isLoading={{@isLoading}}
-        @iconType={{@iconType}}
-        @iconSide={{@iconSide}}
-        @iconSize={{if (eq size "xs") "s" iconSize}}
-        @iconClasses={{@iconClasses}}
-        @useSvg={{@useSvg}}
-        @useComponent={{@useComponent}}
-        @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
-      >
-        {{yield}}
-      </EuiButtonContent>
-    </a>
-  {{else}}
-    <button
-      class={{class-names
-        (if (or @isLoading @isDisabled) "euiButtonEmpty-isDisabled")
-        componentName="EuiButtonEmpty"
-        color=(arg-or-default @color "primary")
-        size=size
-        flush=@flush
-      }}
-      disabled={{or @isLoading @isDisabled @disabled}}
-      type={{if @type @type "button"}}
-      aria-pressed={{@isSelected}}
-      ...attributes
-    >
-      <EuiButtonContent
-        class="euiButtonEmpty__content {{@contentClasses}}"
-        @isLoading={{@isLoading}}
-        @iconType={{@iconType}}
-        @iconSide={{@iconSide}}
-        @iconSize={{if (eq size "xs") "s" iconSize}}
-        @iconClasses={{@iconClasses}}
-        @useSvg={{@useSvg}}
-        @useComponent={{@useComponent}}
-        @textClasses={{class-names "euiButtonEmpty__text" @textClasses}}
-      >
-        {{yield}}
-      </EuiButtonContent>
-    </button>
-  {{/if}}
-{{/let}}

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

@@ -1,68 +0,0 @@
-{{#let
-  (arg-or-default @buttonSize "s")
-  (arg-or-default @color "text")
-  (arg-or-default @isFullWidth false)
-  (arg-or-default @isDisabled false)
-  (arg-or-default @type "single")
-  as |buttonSize color isFullWidth isDisabled type|
-}}
-  {{#let
-    (if (and (eq buttonSize "compressed") (eq color "ghost")) "text" color)
-    (eq type "single")
-    as |resolvedColor typeIsSingle|
-  }}
-
-    <fieldset
-      class={{class-names
-        "euiButtonGroup"
-        (if isFullWidth "euiButtonGroup--fullWidth")
-        (if isDisabled "euiButtonGroup--fullWidth")
-        @className
-        componentName="EuiButtonGroup"
-        size=(arg-or-default buttonSize "s")
-        color=resolvedColor
-      }}
-      disabled={{isDisabled}}
-      ...attributes
-    >
-      <legend {{screen-reader-only}}>{{@legend}}</legend>
-      <div class="euiButtonGroup__buttons">
-        {{#let (arg-or-default @name (unique-id)) as |name|}}
-          {{#each @options as |option|}}
-            <EuiButtonGroupButton
-              @name={{name}}
-              @isDisabled={{if
-                (not-eq option.isDisabled undefined)
-                option.isDisabled
-                isDisabled
-              }}
-              @element={{if typeIsSingle "label" "button"}}
-              @isSelected={{if
-                typeIsSingle
-                (eq option.id @idSelected)
-                (get @idToSelectedMap option.id)
-              }}
-              @color={{resolvedColor}}
-              @size={{buttonSize}}
-              @isIconOnly={{@isIconOnly}}
-              @onChange={{@onChange}}
-              @iconType={{option.iconType}}
-              @value={{option.value}}
-              @label={{option.label}}
-              @id={{option.id}}
-              @isLoading={{option.isLoading}}
-              @iconSide={{option.iconSide}}
-              @iconSize={{option.iconSize}}
-              @textClasses={{option.textClasses}}
-              @contentClasses={{option.contentClasses}}
-              @iconClasses={{option.iconClasses}}
-              @type={{option.type}}
-              class={{option.className}}
-              aria-label={{option.aria-label}}
-            />
-          {{/each}}
-        {{/let}}
-      </div>
-    </fieldset>
-  {{/let}}
-{{/let}}

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

@@ -1,57 +0,0 @@
-{{#let
-  (if @isDisabled "button" @element)
-  (unique-id)
-  (class-names
-    (if @isSelected "euiButtonGroupButton-isSelected")
-    (if @isIconOnly "euiButtonGroupButton-isIconOnly")
-  )
-  as |element newId classes|
-}}
-  {{#let (not-eq @element "label") as |isNotLabel|}}
-    <EuiInnerText as |setInnerTextRef innerText|>
-      <EuiButton
-        @baseClassName="euiButtonGroupButton"
-        class={{classes}}
-        @element={{element}}
-        @fill={{and (not-eq @size "compressed") @isSelected}}
-        @isDisabled={{@isDisabled}}
-        @size={{if (eq @size "compressed") "s" @size}}
-        @color={{@color}}
-        @contentClasses={{@contentClasses}}
-        @iconSide={{@iconSide}}
-        @iconType={{@iconType}}
-        @iconSize={{@iconSize}}
-        @iconClasses={{@iconClasses}}
-        @isLoading={{@isLoading}}
-        @textClasses={{class-names
-          @textClasses
-          (if
-            @isIconOnly "euiScreenReaderOnly" "euiButtonGroupButton__textShift"
-          )
-        }}
-        @isSelected={{if isNotLabel @isSelected}}
-        type={{if isNotLabel @type}}
-        for={{if (eq element "label") newId}}
-        id={{if isNotLabel newId}}
-        title={{innerText}}
-        {{on "click" (if isNotLabel (fn @onChange @id) (noop))}}
-        {{did-insert setInnerTextRef}}
-        ...attributes
-      >
-        {{#if (eq element "label")}}
-          <input
-            id={{newId}}
-            class="euiScreenReaderOnly"
-            name={{@name}}
-            checked={{@isSelected}}
-            disabled={{@isDisabled}}
-            value={{@value}}
-            type="radio"
-            {{on "change" (fn @onChange @id @value)}}
-          />
-        {{/if}}
-        {{@label}}
-      </EuiButton>
-    </EuiInnerText>
-  {{/let}}
-{{/let}}

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

@@ -1,52 +0,0 @@
-{{#if (and @href (not @isDisabled))}}
-  <a
-    class={{class-names
-      (if @isDisabled "euiButtonIcon-isDisabled")
-      componentName="EuiButtonIcon"
-      display=(arg-or-default @display "empty")
-      color=(arg-or-default @color "primary")
-      size=(arg-or-default @size "xs" configKey="@ember-eui/core.euiButtonIcon.size")
-    }}
-    href={{@href}}
-    target={{@target}}
-    ...attributes
-  >
-    {{#if @iconType}}
-      <EuiIcon
-        @iconClasses="euiButtonIcon__icon {{@iconClasses}}"
-        @type={{@iconType}}
-        @size={{arg-or-default @iconSize "m"}}
-        @useSvg={{@useSvg}}
-        @useComponent={{@useComponent}}
-        @color="inherit"
-        aria-hidden="true"
-      />
-    {{/if}}
-  </a>
-{{else}}
-  <button
-    class={{class-names
-      (if @isDisabled "euiButtonIcon-isDisabled")
-      componentName="EuiButtonIcon"
-      display=(arg-or-default @display "empty")
-      color=(arg-or-default @color "primary")
-      size=(arg-or-default @size "xs" configKey="@ember-eui/core.euiButtonIcon.size")
-    }}
-    disabled={{or @isDisabled @disabled}}
-    aria-pressed={{if @isSelected "true" "false"}}
-    type={{if @type @type "button"}}
-    ...attributes
-  >
-    {{#if @iconType}}
-      <EuiIcon
-        @iconClasses="euiButtonIcon__icon {{@iconClasses}}"
-        @type={{@iconType}}
-        @size={{arg-or-default @iconSize "m"}}
-        @useSvg={{@useSvg}}
-        @color="inherit"
-        @useComponent={{@useComponent}}
-        aria-hidden="true"
-      />
-    {{/if}}
-  </button>
-{{/if}}

package/addon/components/eui-call-out/index.hbs

@@ -1,44 +0,0 @@
-<div
-  class={{class-names
-    componentName="EuiCallOut"
-    size=(arg-or-default @size "m")
-    color=(arg-or-default @color "primary")
-  }}
-  ...attributes
->
-  {{#if (or @title (has-block "title"))}}
-    <div class="euiCallOutHeader">
-      {{#if @iconType}}
-        <EuiIcon
-          @iconClasses="euiCallOutHeader__icon"
-          @type={{@iconType}}
-          @size="m"
-          aria-hidden="true"
-          @color="inherit"
-        />
-      {{/if}}
-      {{#if @heading}}
-        <TextBlock @tagName={{@heading}} class="euiCallOutHeader__title">
-          {{#if (has-block "title")}}
-            {{yield to="title"}}
-          {{else}}
-            {{@title}}
-          {{/if}}
-        </TextBlock>
-      {{else}}
-        <span class="euiCallOutHeader__title">
-          {{#if (has-block "title")}}
-            {{yield to="title"}}
-          {{else}}
-            {{@title}}
-          {{/if}}
-        </span>
-      {{/if}}
-    </div>
-  {{/if}}
-  {{#if (has-block "body")}}
-    <EuiText @size={{if (eq @size "s") "xs" "s"}}>
-      {{yield to="body"}}
-    </EuiText>
-  {{/if}}
-</div>