@ember-eui/core 5.8.5 → 5.10.2

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

@@ -0,0 +1,258 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { helper } from '@ember/component/helper';
+import moment from 'moment';
+// import { isDayDisabled, isOutOfBounds } from '../utils/date-utils';
+
+const isSameDayHelper = helper(function ([year, month, day, selectedDate]: [
+  number,
+  number,
+  number,
+  moment.Moment
+]) {
+  if (!selectedDate) {
+    return false;
+  }
+  return (
+    selectedDate.year() === year &&
+    selectedDate.month() === month &&
+    selectedDate.date() === day
+  );
+});
+
+interface DatetimePickerArgs {
+  selected: moment.Moment;
+  onChange: (value: any) => void;
+}
+
+interface Day {
+  day: number;
+  month: number;
+  year: number;
+  isOutside: boolean;
+}
+
+export default class DatetimePicker extends Component<DatetimePickerArgs> {
+  @tracked month: number = 0;
+  @tracked year: number = 0;
+  @tracked monthMoment: moment.Moment;
+  // Used to style the days outside of the current month
+  @tracked offset: number = 0;
+  @tracked selectedDate?: moment.Moment;
+  @tracked selectedTime?: string;
+  @tracked today: moment.Moment;
+
+  momentConfig: {
+    year: number;
+    month: number;
+    day: number;
+    hour: number;
+    minute: number;
+    second: number;
+    millisecond: number;
+  };
+
+  isSameDayHelper = isSameDayHelper;
+
+  constructor(owner: unknown, args: DatetimePickerArgs) {
+    super(owner, args);
+
+    if (this.args.selected) {
+      this.monthMoment = this.args.selected;
+      this.selectedDate = this.args.selected;
+    } else {
+      this.monthMoment = moment([this.year, this.month]);
+    }
+
+    this.momentConfig = {
+      year: this.monthMoment.year(),
+      month: this.monthMoment.month(),
+      day: this.monthMoment.date(),
+      hour: this.monthMoment.hour(),
+      minute: this.monthMoment.minute(),
+      second: 0,
+      millisecond: 0
+    };
+
+    this.month = this.momentConfig.month;
+    this.year = this.momentConfig.year;
+    let hour = this.momentConfig.hour;
+    let minute = this.momentConfig.minute;
+    let hourStr = hour < 10 ? `0${hour}` : hour;
+    let minuteStr = minute < 10 ? `0${minute}` : minute;
+    this.selectedTime = `${hourStr}:${minuteStr}`;
+
+    this.offset = this.monthMoment.clone().startOf('month').day();
+
+    this.today = moment();
+  }
+
+  get monthNames() {
+    return moment.months().map((month, i) => {
+      return {
+        text: month,
+        value: i
+      };
+    });
+  }
+
+  get years() {
+    return Array.from(Array(15).keys()).map((_, i) => {
+      // Create a list of years +/- 7 from the current year
+      let year = this.year - 7 + i;
+      return {
+        text: year,
+        value: year
+      };
+    });
+  }
+
+  get times() {
+    const timesArray = [];
+    // Create entries every 30 minutes
+    for (let i = 0; i < 24; i++) {
+      let hour = i < 10 ? `0${i}` : i;
+      timesArray.push(`${hour}:00`, `${hour}:30`);
+    }
+    return timesArray;
+  }
+
+  get days() {
+    // Used for showing days outside of the current month
+    // const prevMonth = moment([this.year, this.month - 1]);
+    const prevMonth = this.monthMoment.clone().subtract(1, 'month');
+    const nextMonth = this.monthMoment.clone().add(1, 'month');
+    const offset = this.offset;
+    let daysInMonth = this.monthMoment.daysInMonth();
+    let daysInPrevMonth = prevMonth.daysInMonth();
+
+    const daysArray = [];
+    for (let i = 0; i < daysInMonth; i++) {
+      daysArray[i] = {
+        day: i + 1
+      };
+    }
+
+    // Fill the previous and next month days
+    for (let i = 0, d = daysInPrevMonth; i < offset; i++, d--) {
+      daysArray.unshift({
+        day: d,
+        month: prevMonth.month(),
+        year: prevMonth.year(),
+        isOutside: true
+      });
+    }
+    // All months fit within 6 weeks (42 days)
+    for (let d = 1, i = daysInMonth + offset; i < 42; d++, i++) {
+      daysArray.push({
+        day: d,
+        month: nextMonth.month(),
+        year: nextMonth.year(),
+        isOutside: true
+      });
+    }
+
+    // All months fit within 6 weeks (42 days)
+    // but depending on the starting day, one week may not be needed
+    const daysMatrix = [];
+    const weeks = daysInMonth + offset > 35 ? 6 : 5;
+    for (let i = 0; i < weeks; i++) {
+      daysMatrix[i] = daysArray.slice(i * 7, i * 7 + 7);
+    }
+
+    return daysMatrix;
+  }
+
+  updateDate() {
+    this.year = this.monthMoment.year();
+    this.month = this.monthMoment.month();
+    this.offset = this.monthMoment.clone().startOf('month').day();
+  }
+
+  @action selectTime(time: string) {
+    this.selectedTime = time;
+    const [hour, minute] = time.split(':');
+    this.momentConfig.hour = parseInt(hour);
+    this.momentConfig.minute = parseInt(minute);
+    this.momentConfig.second = 0;
+    this.momentConfig.millisecond = 0;
+    this.selectedDate = moment(this.momentConfig);
+    this.args.onChange(this.selectedDate);
+  }
+
+  @action selectDate(day: Day) {
+    // Only outside days will have year/month
+    this.momentConfig.year = day.year || this.year;
+    this.momentConfig.month = day.month || this.month;
+    this.momentConfig.day = day.day;
+    this.selectedDate = moment(this.momentConfig);
+    this.args.onChange(this.selectedDate);
+
+    // Update the state to show the selected month properly
+    if (day.isOutside) {
+      this.monthMoment.month(day.month);
+      this.monthMoment.year(day.year);
+      this.updateDate();
+    }
+  }
+
+  // @action setSelected(date, event, keepInput) {
+  //   let changedDate = date;
+
+  //   if (changedDate !== null && isDayDisabled(changedDate, this.props)) {
+  //     if (isOutOfBounds(changedDate, this.props)) {
+  //       this.props.onChange(date, event);
+  //       this.props.onSelect(changedDate, event);
+  //     }
+
+  //     return;
+  //   }
+
+  //   if (changedDate !== null && this.props.selected) {
+  //     let selected = this.props.selected;
+  //     if (keepInput) selected = newDate(changedDate);
+  //     changedDate = setTime(newDate(changedDate), {
+  //       hour: getHour(selected),
+  //       minute: getMinute(selected),
+  //       second: getSecond(selected),
+  //       millisecond: getMillisecond(selected),
+  //     });
+  //   }
+
+  //   if (
+  //     !isSameTime(this.props.selected, changedDate) ||
+  //     this.props.allowSameDay
+  //   ) {
+  //     if (changedDate !== null) {
+  //       if (!this.props.inline) {
+  //         this.setState({
+  //           preSelection: changedDate
+  //         });
+  //       }
+  //     }
+  //     this.props.onChange(changedDate, event);
+  //   }
+
+  //   this.props.onSelect(changedDate, event);
+
+  //   if (!keepInput) {
+  //     this.setState({ inputValue: null });
+  //   }
+  // }
+
+  @action setMonth(month: string) {
+    this.monthMoment.month(parseInt(month));
+    this.updateDate();
+  }
+
+  @action increaseMonth() {
+    this.monthMoment.add(1, 'month');
+    this.updateDate();
+  }
+
+  @action decreaseMonth() {
+    this.monthMoment.subtract(1, 'month');
+    this.updateDate();
+  }
+}

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

@@ -0,0 +1,49 @@
+{{#let
+  (class-names
+    "euiDatePopoverButton"
+    (concat "euiDatePopoverButton--" @position)
+    (if @compressed "euiDatePopoverButton--compressed")
+    (if this.isOpen "euiDatePopoverButton-isSelected")
+    (if @isInvalid "euiDatePopoverButton-isInvalid")
+    (if @needsUpdating "euiDatePopoverButton-needsUpdating")
+    (if @isDisabled "euiDatePopoverButton-disabled")
+  )
+  as |classes|
+}}
+  <EuiPopover
+    @className={{@className}}
+    @isOpen={{this.isOpen}}
+    @closePopover={{set this "isOpen" false}}
+    @anchorPosition={{this.anchorPosition}}
+    @panelPaddingSize="none"
+    @display="block"
+  >
+    <:button>
+      <button
+        type="button"
+        {{!-- onClick={onPopoverToggle} --}}
+        class={{classes}}
+        title={{this.formattedValue}}
+        disabled={{@isDisabled}}
+        ...attributes
+        {{on "click" (set this "isOpen" (not this.isOpen))}}
+      >
+        {{this.formattedValue}}
+      </button>
+    </:button>
+
+    <:content>
+      <EuiSuperDatePicker::DatePopover::EuiDatePopoverContent
+        @position={{@position}}
+        @value={{@value}}
+        @roundUp={{@roundUp}}
+        @dateFormat={{@dateFormat}}
+        @timeFormat={{@timeFormat}}
+        @locale={{@locale}}
+        @utcOffset={{@utcOffset}}
+        @timeOptions={{@timeOptions}}
+        @onChange={{@onChange}}
+      />
+    </:content>
+  </EuiPopover>
+{{/let}}

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>