@hashicorp/design-system-components
Version:
Helios Design System Components
71 lines (68 loc) • 2.16 kB
JavaScript
import Component from '@glimmer/component';
import { service } from '@ember/service';
import hdsFormatDateHelper from '../../../helpers/hds-format-date.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
*/
class HdsTimeRange extends Component {
static {
g(this.prototype, "hdsTime", [service]);
}
#hdsTime = (i(this, "hdsTime"), void 0);
get startDateIsoUtcString() {
const {
startDate
} = this.args;
if (startDate) {
return this.hdsTime.toIsoUtcString(startDate);
}
}
get endDateIsoUtcString() {
const {
endDate
} = this.args;
if (endDate) {
return this.hdsTime.toIsoUtcString(endDate);
}
}
get startDateDisplayFormat() {
const {
startDate,
endDate
} = this.args;
if (startDate?.getFullYear() !== endDate?.getFullYear()) {
return {
month: 'short',
day: 'numeric',
year: 'numeric'
};
} else {
return {
month: 'short',
day: 'numeric',
year: undefined
};
}
}
get endDateDisplayFormat() {
return {
month: 'short',
day: 'numeric',
year: 'numeric'
};
}
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<span class=\"hds-time hds-time--range\" ...attributes>\n <time datetime={{this.startDateIsoUtcString}}>\n {{~hdsFormatDate @startDate this.startDateDisplayFormat~}}\n </time>\n –\n <time datetime={{this.endDateIsoUtcString}}>\n {{~hdsFormatDate @endDate this.endDateDisplayFormat~}}\n </time>\n</span>", {
strictMode: true,
scope: () => ({
hdsFormatDate: hdsFormatDateHelper
})
}), this);
}
}
export { HdsTimeRange as default };
//# sourceMappingURL=range.js.map