@hashicorp/design-system-components/dist/components/hds/time/index.js

Helios Design System Components

import Component from '@glimmer/component';
import { typeOf } from '@ember/utils';
import { service } from '@ember/service';
import { concat, hash } from '@ember/helper';
import hdsFormatDateHelper from '../../../helpers/hds-format-date.js';
import HdsTimeRange from './range.js';
import HdsTimeSingleComponent from './single.js';
import HdsTooltip from '../tooltip-button/index.js';
import { precompileTemplate } from '@ember/template-compilation';
import { setComponentTemplate } from '@ember/component';
import { g, i } from 'decorator-transforms/runtime';

/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */
const dateIsValid = date => date instanceof Date && !isNaN(+date);
class HdsTime extends Component {
  static {
    g(this.prototype, "hdsTime", [service]);
  }
  #hdsTime = (i(this, "hdsTime"), void 0);
  get date() {
    const {
      date
    } = this.args;
    // Sometimes an ISO date string might be passed in instead of a JS Date.
    if (date) {
      if (typeOf(date) === 'string') {
        return new Date(date);
      } else if (date instanceof Date) {
        return date;
      }
    }
  }
  get startDate() {
    const {
      startDate
    } = this.args;
    if (startDate) {
      if (typeOf(startDate) === 'string') {
        return new Date(startDate);
      } else if (startDate instanceof Date) {
        return startDate;
      }
    }
  }
  get endDate() {
    const {
      endDate
    } = this.args;
    if (endDate) {
      if (typeOf(endDate) === 'string') {
        return new Date(endDate);
      } else if (endDate instanceof Date) {
        return endDate;
      }
    }
  }
  get isValidDate() {
    return dateIsValid(this.date);
  }
  get isValidDateRange() {
    if (dateIsValid(this.startDate) && dateIsValid(this.endDate)) {
      return this.startDate <= this.endDate;
    }
    return false;
  }
  get hasTooltip() {
    return this.args.hasTooltip ?? true;
  }
  get isoUtcString() {
    const date = this.date;
    if (dateIsValid(date)) {
      const isoUtcString = this.hdsTime.toIsoUtcString(date);
      if (isoUtcString) return isoUtcString;
    }
    return '';
  }
  get rangeIsoUtcString() {
    const startDate = this.startDate;
    const endDate = this.endDate;
    if (dateIsValid(startDate) && dateIsValid(endDate)) {
      return `${this.hdsTime.toIsoUtcString(startDate)}–${this.hdsTime.toIsoUtcString(endDate)}`;
    }
    return '';
  }
  get display() {
    const date = this.date;
    const {
      display
    } = this.args;
    if (dateIsValid(date)) {
      const nextDiff = this.hdsTime.timeDifference(this.hdsTime.now, date);
      return this.hdsTime.format(nextDiff, display);
    }
    return {
      options: undefined,
      difference: {
        absValueInMs: 0,
        valueInMs: 0
      },
      relative: {
        value: 0,
        unit: undefined
      }
    };
  }
  get isOpen() {
    return this.args.isOpen ?? false;
  }
  didInsertNode = () => {
    const date = this.date;
    if (dateIsValid(date)) {
      this.hdsTime.register(date);
    }
  };
  willDestroyNode = () => {
    const date = this.date;
    if (dateIsValid(date)) {
      this.hdsTime.unregister(date);
    }
  };
  static {
    setComponentTemplate(precompileTemplate("{{!-- IMPORTANT: we need to add \"squishies\" here (~) because otherwise the whitespace added by Ember causes extra space around the time element - See https://handlebarsjs.com/guide/expressions.html#whitespace-control --}}\n{{~#let this.display as |display|~}}\n  {{~#if this.isValidDate~}}\n    {{~#if this.hasTooltip~}}\n      <HdsTooltipButton class=\"hds-time-wrapper\" @text={{if display.options.tooltipFormat (hdsFormatDate this.date display.options.tooltipFormat) this.isoUtcString}} @placement=\"bottom\" @extraTippyOptions={{hash showOnCreate=this.isOpen}}>\n        <HdsTimeSingle @date={{this.date}} @isoUtcString={{this.isoUtcString}} @display={{this.display}} @register={{this.didInsertNode}} @unregister={{this.willDestroyNode}} ...attributes />\n      </HdsTooltipButton>\n    {{~else~}}\n      <HdsTimeSingle @date={{this.date}} @isoUtcString={{this.isoUtcString}} @display={{this.display}} @register={{this.didInsertNode}} @unregister={{this.willDestroyNode}} ...attributes />\n    {{~/if~}}\n  {{else if this.isValidDateRange}}\n    {{~#if this.hasTooltip~}}\n      <HdsTooltipButton class=\"hds-time-wrapper\" @text={{if display.options.tooltipFormat (concat (hdsFormatDate this.startDate display.options.tooltipFormat) (hdsFormatDate this.endDate display.options.tooltipFormat)) this.rangeIsoUtcString}} @placement=\"bottom\" @extraTippyOptions={{hash showOnCreate=this.isOpen}}>\n        <HdsTimeRange @startDate={{this.startDate}} @endDate={{this.endDate}} ...attributes />\n      </HdsTooltipButton>\n    {{~else~}}\n      <HdsTimeRange @startDate={{this.startDate}} @endDate={{this.endDate}} ...attributes />\n    {{~/if~}}\n  {{~/if~}}\n{{~/let~}}", {
      strictMode: true,
      scope: () => ({
        HdsTooltipButton: HdsTooltip,
        hdsFormatDate: hdsFormatDateHelper,
        hash,
        HdsTimeSingle: HdsTimeSingleComponent,
        concat,
        HdsTimeRange
      })
    }), this);
  }
}

export { HdsTime as default };
//# sourceMappingURL=index.js.map