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

package/addon/components/eui-dual-range/index.ts

@@ -1,435 +0,0 @@
-import Component from '@glimmer/component';
-import { action } from '@ember/object';
-import { tracked } from '@glimmer/tracking';
-import { guidFor } from '@ember/object/internals';
-import { isWithinRange } from '../../utils/number';
-
-import { EuiRangeInputArgs } from '../eui-range-input/types';
-import { EuiRangeSliderArgs } from '../eui-range-slider/types';
-import { EuiFormControlLayoutArgs } from '../eui-form-control-layout/types';
-import { EuiRangeArgs } from '../eui-range';
-import { EuiRangeLevel } from '../eui-range-levels';
-import { EuiRangeTick } from '../eui-range-ticks';
-import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
-import { later } from '@ember/runloop';
-import { keys } from '../../utils/keys';
-import { EUI_THUMB_SIZE } from '../../utils/range';
-type ValueMember = number | string;
-
-export interface EuiDualRangeArgs
-  extends Omit<
-    EuiRangeSliderArgs,
-    'onChange' | 'onBlur' | 'onFocus' | 'value' | 'append' | 'prepend'
-  > {
-  value: [ValueMember, ValueMember];
-  onBlur?: (event: HTMLInputElement | HTMLDivElement) => void;
-  onFocus?: (event: HTMLInputElement | HTMLDivElement) => void;
-  onChange: (
-    values: [ValueMember, ValueMember],
-    isValid: boolean,
-    event: Event | MouseEvent | KeyboardEvent
-  ) => void;
-  fullWidth?: boolean;
-  isInvalid?: boolean;
-  /**
-   * Create colored indicators for certain intervals
-   */
-  levels?: EuiRangeLevel[];
-  /**
-   * Shows static min/max labels on the sides of the range slider
-   */
-  showLabels?: boolean;
-  /**
-   * Pass `true` to displays an extra input control for direct manipulation.
-   * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.
-   */
-  showInput?: EuiRangeArgs['showInput'];
-  /**
-   * Modifies the number of tick marks and at what interval
-   */
-  tickInterval?: number;
-  /**
-   * Specified ticks at specified values
-   */
-  ticks?: EuiRangeTick[];
-  /**
-   * Creates an input group with element(s) coming before input.  Will only show if `showInput = inputWithPopover`.
-   * `string` | `Component` or an array of these
-   */
-  prepend?: EuiFormControlLayoutArgs['prepend'];
-  /**
-   * Creates an input group with element(s) coming after input. Will only show if `showInput = inputWithPopover`.
-   * `string` | `Component` or an array of these
-   */
-  append?: EuiFormControlLayoutArgs['append'];
-  /**
-   *  Intended to be uses with aria attributes. Some attributes may be overwritten.
-   */
-  minInputProps?: Partial<EuiRangeInputArgs>;
-
-  /**
-   *  Intended to be uses with aria attributes. Some attributes may be overwritten.
-   */
-  maxInputProps?: Partial<EuiRangeInputArgs>;
-}
-
-export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
-  // Defaults
-  @argOrDefault(0) min!: number;
-  @argOrDefault(100) max!: number;
-  @argOrDefault(1) step!: number;
-  @argOrDefault(false) fullWidth!: boolean;
-  @argOrDefault(false) compressed!: boolean;
-  @argOrDefault(false) showLabels!: boolean;
-  @argOrDefault(false) showInput!: boolean | string;
-  @argOrDefault(true) showRange!: boolean;
-  @argOrDefault(false) showTicks!: boolean;
-  @argOrDefault([]) levels!: EuiRangeLevel[];
-
-  //State
-  @tracked id: string = this.args.id || guidFor({});
-  @tracked hasFocus = false;
-  @tracked rangeSliderRefAvailable = false;
-  @tracked isPopoverOpen = false;
-  @tracked rangeWidth: number | undefined;
-  @tracked isVisible = true;
-  ///
-
-  preventPopoverClose = false;
-  rangeSliderRef: HTMLInputElement | null = null;
-
-  @action
-  didInsertRangeSlider(ref: HTMLInputElement | null): void {
-    this.rangeSliderRef = ref;
-
-    this.rangeSliderRefAvailable = !!ref;
-    this.rangeWidth = ref ? ref.clientWidth : undefined;
-
-    if (this.rangeSliderRef?.clientWidth && !this.isVisible) {
-      this.isVisible = true;
-    }
-  }
-
-  get lowerValue(): ValueMember {
-    return this.args.value ? this.args.value[0] : this.min;
-  }
-
-  get upperValue(): ValueMember {
-    return this.args.value ? this.args.value[1] : this.max;
-  }
-
-  get lowerValueIsValid(): boolean {
-    return isWithinRange(this.min, this.upperValue, this.lowerValue);
-  }
-
-  get upperValueIsValid(): boolean {
-    return isWithinRange(this.lowerValue, this.max, this.upperValue);
-  }
-
-  get isValid(): boolean {
-    return this.lowerValueIsValid && this.upperValueIsValid;
-  }
-
-  @action
-  _determineInvalidThumbMovement(
-    newVal: ValueMember,
-    lower: ValueMember,
-    upper: ValueMember,
-    e: Event
-  ): void {
-    // If the values are invalid, find whether the new value is in the upper
-    // or lower half and move the appropriate handle to the new value,
-    // while the other handle gets moved to the opposite bound (if invalid)
-    const lowerHalf = Math.abs(this.max - this.min) / 2 + this.min;
-    const newValIsLow = isWithinRange(this.min, lowerHalf, newVal);
-    if (newValIsLow) {
-      lower = newVal;
-      upper = !this.upperValueIsValid ? this.max : upper;
-    } else {
-      lower = !this.lowerValueIsValid ? this.min : lower;
-      upper = newVal;
-    }
-    this._handleOnChange(lower, upper, e);
-  }
-
-  @action
-  _determineValidThumbMovement(
-    newVal: ValueMember,
-    lower: ValueMember,
-    upper: ValueMember,
-    e: Event
-  ): void {
-    // Lower thumb targeted or right-moving swap has occurred
-    if (
-      Math.abs((lower as number) - (newVal as number)) <
-      Math.abs((upper as number) - (newVal as number))
-    ) {
-      lower = newVal;
-    }
-    // Upper thumb targeted or left-moving swap has occurred
-    else {
-      upper = newVal;
-    }
-    this._handleOnChange(lower, upper, e);
-  }
-
-  @action
-  _determineThumbMovement(newVal: number, e: Event): void {
-    // Determine thumb movement based on slider interaction
-    if (!this.isValid) {
-      // Non-standard positioning follows
-      this._determineInvalidThumbMovement(
-        newVal,
-        this.lowerValue,
-        this.upperValue,
-        e
-      );
-    } else {
-      // Standard positioning based on click event proximity to thumb locations
-      this._determineValidThumbMovement(
-        newVal,
-        this.lowerValue,
-        this.upperValue,
-        e
-      );
-    }
-  }
-
-  @action
-  _handleOnChange(lower: ValueMember, upper: ValueMember, e: Event): void {
-    const isValid =
-      isWithinRange(this.min, upper, lower) &&
-      isWithinRange(lower, this.max, upper);
-    this.args.onChange([lower, upper], isValid, e);
-  }
-
-  @action
-  handleSliderChange(e: Event & { currentTarget: HTMLInputElement }): void {
-    this._determineThumbMovement(Number(e.currentTarget.value), e);
-  }
-
-  @action
-  _resetToRangeEnds(e: KeyboardEvent): void {
-    // Arbitrary decision to pass `min` instead of `max`. Result is the same.
-    this._determineInvalidThumbMovement(
-      this.min,
-      this.lowerValue,
-      this.upperValue,
-      e
-    );
-  }
-
-  @action
-  _isDirectionalKeyPress(event: KeyboardEvent): boolean {
-    return (
-      [
-        keys.ARROW_UP,
-        keys.ARROW_RIGHT,
-        keys.ARROW_DOWN,
-        keys.ARROW_LEFT
-      ].indexOf(event.key as keys) > -1
-    );
-  }
-
-  @action
-  handleInputKeyDown(e: KeyboardEvent): void {
-    // Relevant only when initial values are both `''` and `showInput` is set
-    if (this._isDirectionalKeyPress(e) && !this.isValid) {
-      e.preventDefault();
-      this._resetToRangeEnds(e);
-    }
-  }
-
-  @action
-  handleLowerInputChange(e: Event & { target: HTMLInputElement }): void {
-    this._handleOnChange(e.target.value, this.upperValue, e);
-  }
-
-  @action
-  handleUpperInputChange(e: Event & { target: HTMLInputElement }): void {
-    this._handleOnChange(this.lowerValue, e.target.value, e);
-  }
-
-  @action
-  _handleKeyDown(value: ValueMember, event: KeyboardEvent): number {
-    let newVal = Number(value);
-    let stepRemainder = 0;
-    const step = this.args.step || 1;
-    switch (event.key) {
-      case keys.ARROW_UP:
-      case keys.ARROW_RIGHT:
-        event.preventDefault();
-        newVal += step;
-        stepRemainder = (newVal - this.min) % step;
-        if (step !== 1 && stepRemainder > 0) {
-          newVal = newVal - stepRemainder;
-        }
-        break;
-      case keys.ARROW_DOWN:
-      case keys.ARROW_LEFT:
-        event.preventDefault();
-        newVal -= step;
-        stepRemainder = (newVal - this.min) % step;
-        if (step !== 1 && stepRemainder > 0) {
-          newVal = newVal + (step - stepRemainder);
-        }
-        break;
-    }
-    return newVal;
-  }
-
-  @action
-  handleLowerKeyDown(event: KeyboardEvent): void {
-    let lower = this.lowerValue;
-    switch (event.key) {
-      case keys.TAB:
-        return;
-      default:
-        if (!this.lowerValueIsValid) {
-          // Relevant only when initial value is `''` and `showInput` is not set
-          event.preventDefault();
-          this._resetToRangeEnds(event);
-          return;
-        }
-        lower = this._handleKeyDown(lower, event);
-    }
-    if (lower >= this.upperValue || lower < this.min) return;
-    this._handleOnChange(lower, this.upperValue, event);
-  }
-
-  @action
-  handleUpperKeyDown(event: KeyboardEvent): void {
-    let upper = this.upperValue;
-    switch (event.key) {
-      case keys.TAB:
-        return;
-      default:
-        if (!this.upperValueIsValid) {
-          // Relevant only when initial value is `''` and `showInput` is not set
-          event.preventDefault();
-          this._resetToRangeEnds(event);
-          return;
-        }
-        upper = this._handleKeyDown(upper, event);
-    }
-    if (upper <= this.lowerValue || upper > this.max) return;
-    this._handleOnChange(this.lowerValue, upper, event);
-  }
-
-  @action
-  calculateThumbPositionStyle(value: number, width?: number): { left: string } {
-    // Calculate the left position based on value
-    const decimal = (value - this.min) / (this.max - this.min);
-    // Must be between 0-100%
-    let valuePosition = decimal <= 1 ? decimal : 1;
-    valuePosition = valuePosition >= 0 ? valuePosition : 0;
-
-    const trackWidth =
-      this.args.showInput === 'inputWithPopover' && !!width
-        ? width
-        : this.rangeSliderRef?.clientWidth;
-
-    let thumbToTrackRatio = 0;
-    if (trackWidth) {
-      thumbToTrackRatio = EUI_THUMB_SIZE / trackWidth;
-    } else {
-      thumbToTrackRatio = EUI_THUMB_SIZE / 1;
-    }
-    const trackPositionScale = (1 - thumbToTrackRatio) * 100;
-    return { left: `${valuePosition * trackPositionScale}%` };
-  }
-
-  @action
-  setPreventPopoverClose(value: boolean): void {
-    this.preventPopoverClose = value;
-  }
-
-  get calculateLowerValueThumbPositionStyle(): { left: string } {
-    return this.calculateThumbPositionStyle(
-      Number(this.lowerValue) || this.min,
-      this.rangeWidth
-    );
-  }
-
-  get calculateUpperValueThumbPositionStyle(): { left: string } {
-    return this.calculateThumbPositionStyle(
-      Number(this.upperValue) || this.max,
-      this.rangeWidth
-    );
-  }
-
-  @action
-  toggleHasFocus(): void {
-    this.hasFocus = !this.hasFocus;
-  }
-
-  @action
-  onThumbFocus(e: HTMLDivElement): void {
-    if (this.args.onFocus) {
-      this.args.onFocus(e);
-    }
-    this.hasFocus = true;
-  }
-
-  @action
-  onThumbBlur(e: HTMLDivElement): void {
-    if (this.args.onBlur) {
-      this.args.onBlur(e);
-    }
-    this.hasFocus = false;
-  }
-
-  @action
-  onInputFocus(e: HTMLInputElement): void {
-    if (this.args.onFocus) {
-      this.args.onFocus(e);
-    }
-    this.preventPopoverClose = true;
-    this.isPopoverOpen = true;
-  }
-
-  @action
-  onInputBlur(e: HTMLInputElement): void {
-    later(
-      this,
-      () => {
-        // Safari does not recognize any focus-related eventing for input[type=range]
-        // making it impossible to capture its state using active/focus/relatedTarget
-        // Instead, a prevention flag is set on mousedown, with a waiting period here.
-        // Mousedown is viable because in the popover case, it is inaccessible via keyboard (intentionally)
-        if (this.preventPopoverClose) {
-          this.preventPopoverClose = false;
-          return;
-        }
-        if (this.args.onBlur) {
-          this.args.onBlur(e);
-        }
-        this.closePopover();
-      },
-      200
-    );
-  }
-
-  @action
-  closePopover(): void {
-    this.preventPopoverClose = false;
-    this.isPopoverOpen = false;
-  }
-
-  @action
-  onResize(width?: number): void {
-    this.rangeWidth = width;
-  }
-
-  get digitTolerance(): number {
-    return Math.max(String(this.min).length, String(this.max).length);
-  }
-
-  get showInputOnly(): boolean {
-    return this.showInput === 'inputWithPopover';
-  }
-
-  get canShowDropdown(): boolean {
-    return this.showInputOnly && !this.args.readOnly && !this.args.disabled;
-  }
-}

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

@@ -1,84 +0,0 @@
-{{#let (arg-or-default @layout "vertical") as |layout|}}
-  <EuiPanel
-    class={{class-names
-      (if layout (concat "euiEmptyPrompt--" layout) "euiEmptyPrompt--vertical")
-      componentName="EuiEmptyPrompt"
-      paddingSize=(arg-or-default @paddingSize "l")
-    }}
-    @paddingSize="none"
-    @color={{arg-or-default @color "transparent"}}
-    @hasBorder={{@hasBorder}}
-    @hasShadow={{false}}
-    ...attributes
-  >
-    <div class="euiEmptyPrompt__main">
-      {{#if (has-block "icon")}}
-        <div class="euiEmptyPrompt__icon">{{yield to="icon"}}</div>
-      {{else if @iconType}}
-        <div class="euiEmptyPrompt__icon">
-          <EuiIcon
-            @type={{@iconType}}
-            @size="xxl"
-            @color={{if @iconColor @iconColor (if @color @color "subdued")}}
-          />
-        </div>
-      {{/if}}
-      <div class="euiEmptyPrompt__content">
-        {{#if (has-block "content")}}
-          <div class="euiEmptyPrompt__contentInner">{{yield to="content"}}</div>
-        {{else}}
-          <div class="euiEmptyPrompt__contentInner">
-            {{#if @title}}
-              <EuiTitle
-                @size={{arg-or-default @titleSize "m"}}
-              >{{@title}}</EuiTitle>
-            {{/if}}
-            {{#if @body}}
-              <EuiTextColor @color="subdued">
-                {{#if @title}}
-                  <EuiSpacer @size="m" />
-                {{/if}}
-                <EuiText>
-                  {{@body}}
-                </EuiText>
-              </EuiTextColor>
-            {{/if}}
-            {{#if (gte @actions.length 2)}}
-              <EuiSpacer size="l" />
-              <EuiFlexGroup
-                class="euiEmptyPrompt__actions"
-                @gutterSize="m"
-                @alignItems="center"
-                @justifyContent="center"
-                @direction={{if (eq layout "vertical") "column" "row"}}
-              >
-                {{#each @actions as |action|}}
-                  <EuiFlexItem @grow={{false}}>
-                    {{action}}
-                  </EuiFlexItem>
-                {{/each}}
-              </EuiFlexGroup>
-            {{else}}
-              <EuiSpacer size="l" />
-              {{#each @actions as |action|}}
-                {{action}}
-              {{/each}}
-            {{/if}}
-          </div>
-        {{/if}}
-      </div>
-    </div>
-
-    {{#if (has-block "footer")}}
-      <div class="euiEmptyPrompt__footer">
-        {{yield to="footer"}}
-      </div>
-    {{else}}
-      {{#if @footer}}
-        <div class="euiEmptyPrompt__footer">
-          {{@footer}}
-        </div>
-      {{/if}}
-    {{/if}}
-  </EuiPanel>
-{{/let}}

package/addon/components/eui-field-number/index.hbs

@@ -1,64 +0,0 @@
-{{#let
-  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
-  (and (arg-or-default @isAppendProvided true) (has-block "append"))
-  (arg-or-default @id (unique-id)) as |hasPrepend hasAppend inputId|
-}}
-  {{#let
-    (class-names
-      (if @icon "euiFieldNumber--withIcon")
-      (if @fullWidth "euiFieldNumber--fullWidth")
-      (if @compressed "euiFieldNumber--compressed")
-      (if (or hasPrepend hasAppend) "euiFieldNumber--inGroup")
-      (if @isLoading "euiFieldNumber--isLoading")
-      "euiFieldNumber"
-    ) as |classes|
-  }}
-    {{#if @controlOnly}}
-      <input
-        id={{@id}}
-        class={{classes}}
-        value={{@value}}
-        min={{@min}}
-        max={{@max}}
-        disabled={{@disabled}}
-        step={{@step}}
-        type="number"
-        ...attributes
-        {{validatable-control @isInvalid}}
-        {{did-insert (optional @inputRef)}}
-      />
-    {{else}}
-      <EuiFormControlLayout
-        @icon={{@icon}}
-        @clear={{@clear}}
-        @fullWidth={{@fullWidth}}
-        @isLoading={{@isLoading}}
-        @compressed={{@compressed}}
-        @readOnly={{@readOnly}}
-        @disabled={{@disabled}}
-        @useGroup={{or hasPrepend hasAppend}}
-      >
-        <:prepend as |prependClasses|>
-          {{yield prependClasses to="prepend"}}
-        </:prepend>
-        <:field>
-          <input
-            id={{inputId}}
-            class={{classes}}
-            value={{@value}}
-            min={{@min}}
-            max={{@max}}
-            disabled={{@disabled}}
-            step={{@step}}
-            type="number"
-            ...attributes
-            {{validatable-control @isInvalid}}
-          />
-        </:field>
-        <:append as |appendClasses|>
-          {{yield appendClasses to="append"}}
-        </:append>
-      </EuiFormControlLayout>
-    {{/if}}
-  {{/let}}
-{{/let}}

package/addon/components/eui-field-number/types.ts

@@ -1,48 +0,0 @@
-import { CommonArgs } from '../common';
-import { EuiFormControlLayoutArgs } from '../eui-form-control-layout/types';
-
-import { IconType } from '../eui-icon';
-
-export type EuiFieldNumberArgs = Omit<
-  HTMLInputElement,
-  'min' | 'max' | 'readOnly' | 'step'
-> &
-  CommonArgs & {
-    icon?: IconType;
-    isInvalid?: boolean;
-    fullWidth?: boolean;
-    isLoading?: boolean;
-    readOnly?: boolean;
-    min?: number;
-    max?: number;
-    /**
-     * Specifies the granularity that the value must adhere to.
-     * Accepts a `number` or the string `'any'` for no stepping to allow for any value.
-     * Defaults to `1`
-     */
-    step?: number | 'any';
-    inputRef?: HTMLInputElement;
-
-    /**
-     * Creates an input group with element(s) coming before input.
-     * `string` | `Component` or an array of these
-     */
-    prepend?: EuiFormControlLayoutArgs['prepend'];
-
-    /**
-     * Creates an input group with element(s) coming after input.
-     * `string` | `Component` or an array of these
-     */
-    append?: EuiFormControlLayoutArgs['append'];
-
-    /**
-     * Completely removes form control layout wrapper and ignores
-     * icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited.
-     */
-    controlOnly?: boolean;
-
-    /**
-     * when `true` creates a shorter height input
-     */
-    compressed?: boolean;
-  };

package/addon/components/eui-field-password/index.hbs

@@ -1,62 +0,0 @@
-{{#let
-  (arg-or-default @type "dual")
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
-  (arg-or-default @id (unique-id)) 
-  as |type hasPrepend hasAppend inputId|
-}}
-  {{#let (use-state (if (eq type "dual") "password" type)) as |inputTypeState|}}
-    {{#let
-      (class-names
-        (if @fullWidth "euiFieldPassword--fullWidth")
-        (if @compressed "euiFieldPassword--compressed")
-        (if (or hasPrepend hasAppend (eq type "dual")) "euiFieldPassword--inGroup")
-        (if @isLoading "euiFieldPassword--isLoading")
-        (if (eq type "dual") "euiFieldPassword--withToggle")
-        "euiFieldPassword"
-      ) as |classes|
-    }}
-      {{#let (eq inputTypeState.value "text") as |isVisible|}}
-        <EuiFormControlLayout
-          @icon="lock"
-          @clear={{@clear}}
-          @fullWidth={{@fullWidth}}
-          @isLoading={{@isLoading}}
-          @compressed={{@compressed}}
-          @readOnly={{@readOnly}}
-          @disabled={{@disabled}}
-          @useGroup={{or hasPrepend (or hasAppend (eq type "dual"))}}
-        >
-          <:prepend as |prependClasses|>
-            {{yield prependClasses inputId to="prepend"}}
-          </:prepend>
-          <:field>
-            <input
-              id={{inputId}}
-              class={{classes}}
-              type={{inputTypeState.value}}
-              value={{@value}}
-              disabled={{@disabled}}
-              ...attributes
-              {{validatable-control @isInvalid}}
-              {{did-insert (optional @inputRef)}}
-            />
-          </:field>
-          <:append as |appendClasses|>
-            {{yield appendClasses inputId to="append"}}
-            {{#if (eq type "dual")}}
-              <EuiButtonIcon
-                tabindex="-1"
-                @iconType={{if isVisible "eyeClosed" "eye"}}
-                {{on
-                  "click"
-                  (fn inputTypeState.setState (if isVisible "password" "text"))
-                }}
-              />
-            {{/if}}
-          </:append>
-        </EuiFormControlLayout>
-      {{/let}}
-    {{/let}}
-  {{/let}}
-{{/let}}