@ember-eui/core 5.8.5 → 5.9.2

package/addon/components/eui-super-date-picker/date-popover/eui-date-popover-button.ts

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { useFormatTimeString } from '../utils';
+import { LocaleSpecifier } from 'moment';
+import { inject as service } from '@ember/service';
+import type EuiI18n from '../../../services/eui-i18n';
+
+interface EuiDatePopoverButtonArgs {
+  className?: string;
+  // buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  dateFormat: string;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isOpen: boolean;
+  needsUpdating?: boolean;
+  locale?: LocaleSpecifier;
+  // onChange: NonNullable<EuiDatePopoverContentProps['onChange']>;
+  // onPopoverClose: EuiPopoverProps['closePopover'];
+  // onPopoverToggle: MouseEventHandler<HTMLButtonElement>;
+  position: 'start' | 'end';
+  roundUp?: boolean;
+  timeFormat: string;
+  value: string;
+  utcOffset?: number;
+  compressed?: boolean;
+  // timeOptions: TimeOptions;
+}
+
+export default class EuiDatePopoverButton extends Component<EuiDatePopoverButtonArgs> {
+  @service declare euiI18n: EuiI18n;
+  @tracked isOpen = false;
+
+  get formattedValue() {
+    const roundUp = this.args.roundUp ?? false;
+    const locale = this.args.locale ?? 'en';
+
+    return useFormatTimeString(
+      this.args.value,
+      this.args.dateFormat,
+      roundUp,
+      locale,
+      this.euiI18n
+    );
+  }
+
+  get anchorPosition() {
+    return this.args.position === 'start' ? 'downLeft' : 'downRight';
+  }
+}

package/addon/components/eui-super-date-picker/date-popover/eui-date-popover-content.hbs

@@ -0,0 +1,42 @@
+<EuiTabbedContent
+  @className="euiDatePopoverContent"
+  @tabs={{this.tabs}}
+  @initialSelectedTab={{this.initialSelectedTab}}
+  @autoFocus="selected"
+  @expand={{true}}
+  @size="s"
+  {{!-- onTabClick={onTabClick} --}}
+>
+  <:selectedTabContent as |selected|>
+    {{#if (eq selected.id "relative")}}
+      <EuiSuperDatePicker::DatePopover::RelativeTab
+        @value={{this.toAbsoluteStringHelper
+          @value
+          (arg-or-default @roundUp false)
+        }}
+        @onChange={{@onChange}}
+        @labelPrefix={{this.labelPrefix}}
+        @roundUp={{this.roundUp}}
+        @dateFormat={{@dateFormat}}
+        @locale={{@locale}}
+        @position={{@position}}
+        @timeOptions={{@timeOptions}}
+      />
+    {{else if (eq selected.id "now")}}
+      <EuiSuperDatePicker::DatePopover::NowTab
+        @position={{@position}}
+        @onChange={{@onChange}}
+      />
+    {{else if (eq selected.id "absolute")}}
+      <EuiSuperDatePicker::DatePopover::AbsoluteTab
+        @value={{@value}}
+        @roundUp={{this.roundUp}}
+        @dateFormat={{@dateFormat}}
+        @locale={{@locale}}
+        @position={{@position}}
+        @onChange={{@onChange}}
+        @labelPrefix={{this.labelPrefix}}
+      />
+    {{/if}}
+  </:selectedTabContent>
+</EuiTabbedContent>

package/addon/components/eui-super-date-picker/date-popover/eui-date-popover-content.ts

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { toAbsoluteString, getDateMode } from '../utils';
+import { helper } from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+import type EuiI18n from '../../../services/eui-i18n';
+
+interface EuiDatePopoverContentArgs {
+  value: string;
+  onChange(date: string | null, event?: React.SyntheticEvent<any>): void;
+  roundUp?: boolean;
+  dateFormat: string;
+  timeFormat: string;
+  // locale?: LocaleSpecifier;
+  position: 'start' | 'end';
+  utcOffset?: number;
+  // timeOptions: TimeOptions;
+}
+
+const toAbsoluteStringHelper = helper(function ([value, roundUp]: [
+  string,
+  boolean
+]) {
+  return toAbsoluteString(value, roundUp);
+});
+
+export default class EuiDatePopoverContent extends Component<EuiDatePopoverContentArgs> {
+  @service declare euiI18n: EuiI18n;
+  @tracked selectedTab = 0;
+  toAbsoluteStringHelper = toAbsoluteStringHelper;
+
+  get labelPrefix() {
+    return this.args.position === 'start'
+      ? this.euiI18n.lookupToken(
+          'euiDatePopoverContent.startDateLabel',
+          'Start date'
+        )
+      : this.euiI18n.lookupToken(
+          'euiDatePopoverContent.endDateLabel',
+          'End date'
+        );
+  }
+
+  get tabs() {
+    return [
+      {
+        id: 'absolute',
+        name: this.euiI18n.lookupToken(
+          'euiDatePopoverContent.absoluteTabLabel',
+          'Absolute'
+        )
+      },
+      {
+        id: 'relative',
+        name: this.euiI18n.lookupToken(
+          'euiDatePopoverContent.relativeTabLabel',
+          'Relative'
+        )
+      },
+      {
+        id: 'now',
+        name: this.euiI18n.lookupToken(
+          'euiDatePopoverContent.nowTabLabel',
+          'Now'
+        )
+      }
+    ];
+  }
+
+  get initialSelectedTab() {
+    return this.tabs.find((tab) => tab.id === getDateMode(this.args.value));
+  }
+}

package/addon/components/eui-super-date-picker/date-popover/now-tab.hbs

@@ -0,0 +1,45 @@
+<EuiText
+  class="euiDatePopoverContent__padded--large"
+  @size="s"
+  @color="subdued"
+>
+  <p>
+    <EuiI18n
+      @token="euiDatePopoverContent.nowTabContent"
+      @default="Setting the time to now means that on every refresh this time will be set to the time of the refresh."
+      as |Token|
+    >
+      <Token as |value|>
+        {{value}}
+      </Token>
+    </EuiI18n>
+  </p>
+  <EuiButton
+    @fullWidth={{true}}
+    @size="s"
+    @fill={{true}}
+    {{on "click" (fn @onChange "now")}}
+  >
+    {{#if (eq @position "start")}}
+      <EuiI18n
+        @token="euiDatePopoverContent.nowTabButtonStart"
+        @default="Set start date and time to now"
+        as |Token|
+      >
+        <Token as |value|>
+          {{value}}
+        </Token>
+      </EuiI18n>
+    {{else}}
+      <EuiI18n
+        @token="euiDatePopoverContent.nowTabButtonEnd"
+        @default="Set end date and time to now"
+        as |Token|
+      >
+        <Token as |value|>
+          {{value}}
+        </Token>
+      </EuiI18n>
+    {{/if}}
+  </EuiButton>
+</EuiText>

package/addon/components/eui-super-date-picker/date-popover/relative-tab.hbs

@@ -0,0 +1,47 @@
+<EuiForm class="euiDatePopoverContent__padded">
+  <EuiFlexGroup @gutterSize="s" @responsive={{false}}>
+    <EuiFlexItem>
+      <EuiFormRow
+        {{!-- isInvalid={isInvalid}
+        error={getErrorMessage({
+          numberInputError,
+          dateInputError,
+        })} --}}
+      >
+        <EuiFieldNumber
+          @compressed={{true}}
+          @value={{this.count}}
+          @min="0"
+          {{on "input" this.onCountChange}}
+          {{!--
+          isInvalid={isInvalid} --}}
+        />
+      </EuiFormRow>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiSelect
+        @compressed={{true}}
+        @value={{this.unit}}
+        @options={{@timeOptions.relativeOptions}}
+        {{on "change" (pick "target.value" this.onUnitChange)}}
+      />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer @size="s" />
+  <EuiFieldText
+    @compressed={{true}}
+    @value={{this.formattedValue}}
+    @readOnly={{true}}
+  >
+    <:prepend>
+      <EuiFormLabel>{{@labelPrefix}}</EuiFormLabel>
+    </:prepend>
+  </EuiFieldText>
+</EuiForm>
+<EuiPopoverFooter @paddingSize="s">
+  <EuiSwitch
+    @label={{this.roundingLabel}}
+    @checked={{this.round}}
+    @onChange={{pick 'target.checked' this.onRoundChange}}
+  />
+</EuiPopoverFooter>

package/addon/components/eui-super-date-picker/date-popover/relative-tab.ts

@@ -0,0 +1,89 @@
+import Component from '@glimmer/component';
+import dateMath from '@elastic/datemath';
+import { INVALID_DATE, toRelativeStringFromParts } from '../utils';
+import { LocaleSpecifier } from 'moment';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { parseRelativeParts } from '../utils';
+import { EuiDatePopoverContentProps, TimeUnitId } from '@elastic/eui';
+import { TimeOptions } from '../utils/time-options';
+
+interface RelativeTabArgs {
+  dateFormat: string;
+  locale?: LocaleSpecifier;
+  value: string;
+  onChange: EuiDatePopoverContentProps['onChange'];
+  roundUp?: boolean;
+  position: 'start' | 'end';
+  labelPrefix: string;
+  timeOptions: TimeOptions;
+}
+
+export default class RelativeTab extends Component<RelativeTabArgs> {
+  @tracked count?: number;
+  @tracked unit: TimeUnitId = 'm';
+  @tracked round = false;
+
+  roundUnit;
+
+  constructor(owner: unknown, args: RelativeTabArgs) {
+    super(owner, args);
+    const parsed = parseRelativeParts(this.args.value);
+    if (parsed) {
+      this.count = parsed.count;
+      this.unit = parsed.unit as TimeUnitId;
+      this.round = parsed.round;
+      this.roundUnit = parsed.roundUnit;
+    }
+  }
+
+  get formattedValue() {
+    const invalidDate = this.args.value === INVALID_DATE;
+    const invalidValue = this.count === undefined || this.count < 0;
+    const isInvalid = invalidValue || invalidDate;
+    const parsedValue = dateMath.parse(this.args.value, {
+      roundUp: this.args.roundUp
+    });
+    const invalid = isInvalid || !parsedValue || !parsedValue.isValid();
+    return invalid
+      ? ''
+      : parsedValue
+          .locale(this.args.locale || 'en')
+          .format(this.args.dateFormat);
+  }
+
+  get roundingLabel() {
+    return this.args.timeOptions.relativeRoundingLabels[
+      <TimeUnitId>this.unit[0]
+    ];
+  }
+
+  @action onCountChange(e: InputEvent) {
+    const sanitizedValue = parseInt((e.target as HTMLInputElement).value, 10);
+    this.count = isNaN(sanitizedValue) ? undefined : sanitizedValue;
+    this.handleChange();
+  }
+
+  @action onUnitChange(unit: string) {
+    this.unit = unit as TimeUnitId;
+    this.handleChange();
+  }
+
+  @action onRoundChange(checked: boolean) {
+    this.round = checked;
+    this.handleChange();
+  }
+
+  handleChange() {
+    if (this.count === undefined || this.count < 0) {
+      return;
+    }
+    const date = toRelativeStringFromParts({
+      count: this.count,
+      round: this.round,
+      roundUnit: this.roundUnit as TimeUnitId,
+      unit: this.unit
+    });
+    this.args.onChange(date);
+  }
+}

package/addon/components/eui-super-date-picker/eui-date-picker-range.hbs

@@ -0,0 +1,22 @@
+<div
+  class={{class-names
+    "euiDatePickerRange"
+    (if @readOnly "euiDatePickerRange--readOnly")
+    (if @fullWidth "euiDatePickerRange--fullWidth")
+    (if @isInvalid "euiDatePickerRange--isInvalid")
+    (if @disabled "euiDatePickerRange--isDisabled")
+    @className
+  }}
+  ...attributes
+>
+  {{yield to="startDateControl"}}
+
+  <span class="euiDatePickerRange__delimeter">
+    <EuiIcon
+      @color={{if @isInvalid 'danger' 'subdued'}}
+      @type={{if @isInvalid 'alert' 'sortRight'}}
+    />
+  </span>
+
+  {{yield to="endDateControl"}}
+</div>

package/addon/components/eui-super-date-picker/eui-quick-select-popover/eui-commonly-used-time-ranges.hbs

@@ -0,0 +1,42 @@
+{{#let (unique-id) as |legendId|}}
+  <fieldset>
+    <EuiTitle
+      id={{legendId}}
+      @tagName="legend"
+      @size="xxxs"
+    >
+      <EuiI18n
+        @token="euiCommonlyUsedTimeRanges.legend"
+        @default="Commonly used"
+        as |Token|
+      >
+        <Token as |value|>
+          {{value}}
+        </Token>
+      </EuiI18n>
+    </EuiTitle>
+    <div class="euiQuickSelectPopover__section">
+      <EuiFlexGrid
+        aria-labelledby={{legendId}}
+        @gutterSize="s"
+        @columns="2"
+        @direction="column"
+        @responsive={{false}}
+        @tagName="ul"
+      >
+        {{#each @commonlyUsedRanges as |range|}}
+          <EuiFlexItem
+            class="euiQuickSelectPopover__sectionItem"
+            @tagName="li"
+          >
+            <EuiLink
+              {{on "click" (fn @applyTime (hash start=range.start end=range.end))}}
+            >
+              {{range.label}}
+            </EuiLink>
+          </EuiFlexItem>
+        {{/each}}
+      </EuiFlexGrid>
+    </div>
+  </fieldset>
+{{/let}}

package/addon/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select.hbs

@@ -0,0 +1,154 @@
+{{#let (unique-id) as |legendId|}}
+  <fieldset>
+    {{!-- <EuiI18n
+      token="euiQuickSelect.legendText"
+      default="Quick select a time range"
+    >
+      {(legendText: string) => (
+        // Legend needs to be the first thing in a fieldset, but we want the visible title within the flex.
+        // So we hide it, but allow screen readers to see it
+        <EuiScreenReaderOnly>
+          <legend id={{legendId}} class="euiFormLabel">
+            {legendText}
+          </legend>
+        </EuiScreenReaderOnly>
+      )}
+    </EuiI18n> --}}
+    <EuiFlexGroup
+      @responsive={{false}}
+      @alignItems="center"
+      @justifyContent="spaceBetween"
+      @gutterSize="s"
+    >
+      <EuiFlexItem @grow={{false}}>
+        <EuiI18n
+          @token="euiQuickSelect.quickSelectTitle"
+          @default="Quick select"
+          as |Token|
+        >
+           <Token as |quickSelectTitle|>
+            <div aria-hidden class="euiFormLabel">
+              {{quickSelectTitle}}
+            </div>
+          </Token>
+        </EuiI18n>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiFlexGroup @alignItems="center" @gutterSize="s" @responsive={{false}}>
+          <EuiFlexItem @grow={{false}}>
+            <EuiI18n
+              @token="euiQuickSelect.previousLabel"
+              @default="Previous time window"
+              as |Token|
+            >
+              <Token as |previousLabel|>
+                <EuiToolTip @content={{previousLabel}}>
+                  <EuiButtonIcon
+                    aria-label={{previousLabel}}
+                    @iconType="arrowLeft"
+                    {{on "click" this.stepBackward}}
+                  />
+                </EuiToolTip>
+              </Token>
+            </EuiI18n>
+          </EuiFlexItem>
+          <EuiFlexItem @grow={{false}}>
+            <EuiI18n
+              @token="euiQuickSelect.nextLabel"
+              @default="Next time window"
+              as |Token|
+            >
+              <Token as |nextLabel|>
+                <EuiToolTip @content={{nextLabel}}>
+                  <EuiButtonIcon
+                    aria-label={{nextLabel}}
+                    @iconType="arrowRight"
+                    {{on "click" this.stepForward}}
+                  />
+                </EuiToolTip>
+              </Token>
+            </EuiI18n>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+    <EuiSpacer @size="s" />
+    <EuiFlexGroup @gutterSize="s" @responsive={{false}}>
+      <EuiFlexItem>
+        <EuiI18n
+          @token="euiQuickSelect.tenseLabel"
+          @default="Time tense"
+          as |Token|
+        >
+          <Token as |tenseLabel|>
+            <EuiSelect
+              @compressed={{true}}
+              @onKeyDown={{this.handleKeyDown}}
+              aria-label={{tenseLabel}}
+              aria-describedby={{concat this.timeSelectionId " " legendId}}
+              @value={{this.timeTense}}
+              @options={{@timeOptions.timeTenseOptions}}
+              {{on "change" (pick "target.value" (set this "timeTense"))}}
+            />
+          </Token>
+        </EuiI18n>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiI18n
+          @token="euiQuickSelect.valueLabel"
+          @default="Time value"
+          as |Token|
+        >
+          <Token as |valueLabel|>
+            <EuiFieldNumber
+              @compressed={{true}}
+              @onKeyDown={{this.handleKeyDown}}
+              aria-describedby={{concat this.timeSelectionId " " legendId}}
+              aria-label={{valueLabel}}
+              @value={{this.timeValue}}
+              @onChange={{this.onTimeValueChange}}
+            />
+          </Token>
+        </EuiI18n>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <EuiI18n
+          @token="euiQuickSelect.unitLabel"
+          @default="Time unit"
+          as |Token|
+        >
+          <Token as |unitLabel|>
+            <EuiSelect
+              @compressed={{true}}
+              @onKeyDown={{this.handleKeyDown}}
+              aria-label={{unitLabel}}
+              aria-describedby={{concat this.timeSelectionId " " legendId}}
+              @value={{this.timeUnits}}
+              @options={{@timeOptions.timeUnitsOptions}}
+              {{on "change" (pick "target.value" (set this "timeUnits"))}}
+            />
+          </Token>
+        </EuiI18n>
+      </EuiFlexItem>
+      <EuiFlexItem @grow={{false}}>
+        <EuiButton
+          aria-describedby={{concat this.timeSelectionId " " legendId}}
+          class="euiQuickSelect__applyButton"
+          @size="s"
+          @disabled={{lte this.timeValue 0}}
+          {{on "click" this.applyQuickSelect}}
+        >
+          <EuiI18n
+            @token="euiQuickSelect.applyButton"
+            @default="Apply"
+            as |Token|
+          >
+            <Token as |value|>
+              {{value}}
+            </Token>
+          </EuiI18n>
+        </EuiButton>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </fieldset>
+{{/let}}

package/addon/components/eui-super-date-picker/eui-quick-select-popover/eui-quick-select.ts

@@ -0,0 +1,103 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { ApplyTime, TimeUnitId } from '../types/global';
+import { parseTimeParts } from '../utils/quick-select';
+import { NEXT, TimeOptions } from '../utils/time-options';
+import moment from 'moment';
+import dateMath from '@elastic/datemath';
+
+interface EuiQuickSelectState {
+  timeTense: string;
+  timeValue: number;
+  timeUnits: TimeUnitId;
+}
+
+interface EuiQuickSelectArgs {
+  applyTime: ApplyTime;
+  start: string;
+  end: string;
+  prevQuickSelect?: EuiQuickSelectState;
+  timeOptions: TimeOptions;
+}
+
+export default class EuiQuickSelect extends Component<EuiQuickSelectArgs> {
+  @tracked timeTense: string;
+  @tracked timeValue: number;
+  @tracked timeUnits: TimeUnitId;
+
+  constructor(owner: unknown, args: EuiQuickSelectArgs) {
+    super(owner, args);
+
+    const {
+      timeTense: timeTenseDefault,
+      timeUnits: timeUnitsDefault,
+      timeValue: timeValueDefault
+    } = parseTimeParts(this.args.start, this.args.end);
+
+    this.timeTense =
+      this.args.prevQuickSelect && this.args.prevQuickSelect.timeTense
+        ? this.args.prevQuickSelect.timeTense
+        : timeTenseDefault;
+    this.timeValue =
+      this.args.prevQuickSelect && this.args.prevQuickSelect.timeValue
+        ? this.args.prevQuickSelect.timeValue
+        : timeValueDefault;
+    this.timeUnits =
+      this.args.prevQuickSelect && this.args.prevQuickSelect.timeUnits
+        ? this.args.prevQuickSelect.timeUnits
+        : timeUnitsDefault;
+  }
+
+  getBounds() {
+    const startMoment = dateMath.parse(this.args.start);
+    const endMoment = dateMath.parse(this.args.end, { roundUp: true });
+    return {
+      min:
+        startMoment && startMoment.isValid()
+          ? startMoment
+          : moment().subtract(15, 'minute'),
+      max: endMoment && endMoment.isValid() ? endMoment : moment()
+    };
+  }
+
+  @action applyQuickSelect() {
+    if (this.timeTense === NEXT) {
+      this.args.applyTime({
+        start: 'now',
+        end: `now+${this.timeValue}${this.timeUnits}`
+        // quickSelect: { ...this.state },
+      });
+    } else {
+      this.args.applyTime({
+        start: `now-${this.timeValue}${this.timeUnits}`,
+        end: 'now'
+        // quickSelect: { ...this.state },
+      });
+    }
+  }
+
+  @action stepForward() {
+    const { min, max } = this.getBounds();
+    const diff = max.diff(min);
+    this.args.applyTime({
+      start: moment(max).add(1, 'ms').toISOString(),
+      end: moment(max)
+        .add(diff + 1, 'ms')
+        .toISOString(),
+      keepPopoverOpen: true
+    });
+  }
+
+  @action stepBackward() {
+    const { min, max } = this.getBounds();
+    const diff = max.diff(min);
+    this.args.applyTime({
+      start: moment(min)
+        .subtract(diff + 1, 'ms')
+        .toISOString(),
+      end: moment(min).subtract(1, 'ms').toISOString(),
+      keepPopoverOpen: true
+    });
+  }
+}