@kelvininc/ui-components
Version:
Kelvin UI Components
462 lines (456 loc) • 23.5 kB
JavaScript
import { H as proxyCustomElement, I as H, J as createEvent, C as CUSTOM_TIME_RANGE_KEY, K as h, t as EIconName, e as EComponentSize, L as Host } from './p-BP5CxQcH.js';
import { n as getDefaultTimezone, H as dayjs, b as buildTimezoneByOffset, u as getTimezonesNames, t as getTimezoneOffset, g as formatTimezoneName } from './p-BS8xGxWJ.js';
import { c as buildOptionRange, h as buildTimestampRange, D as DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS } from './p-BEbvpiII.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
import { a as getClassMap } from './p-DCOsOAOy.js';
import { m as searchDropdownOptions } from './p-BO7qqFHC.js';
import { d as defineCustomElement$s } from './p-0XA6IHyr.js';
import { d as defineCustomElement$r } from './p-DFvvqEwa.js';
import { d as defineCustomElement$q } from './p-DviRLduP.js';
import { d as defineCustomElement$p } from './p-CJTppmYq.js';
import { d as defineCustomElement$o } from './p-Cblno6rQ.js';
import { d as defineCustomElement$n } from './p-CcHqOBLS.js';
import { d as defineCustomElement$m } from './p-DzkvH5wF.js';
import { d as defineCustomElement$l } from './p-BfW2hU_X.js';
import { d as defineCustomElement$k } from './p-BOKt4LQl.js';
import { d as defineCustomElement$j } from './p-E4GiU6Fx.js';
import { d as defineCustomElement$i } from './p-DQ7v6WT-.js';
import { d as defineCustomElement$h } from './p-RSgE4CBK.js';
import { d as defineCustomElement$g } from './p-hPCB4r-t.js';
import { d as defineCustomElement$f } from './p-BXqO7Mxu.js';
import { d as defineCustomElement$e } from './p-CgqRIP0M.js';
import { d as defineCustomElement$d } from './p-s9JMr6UQ.js';
import { d as defineCustomElement$c } from './p-BrEVQ5h5.js';
import { d as defineCustomElement$b } from './p-Cqe6LD24.js';
import { d as defineCustomElement$a } from './p-CJVymxK-.js';
import { d as defineCustomElement$9 } from './p-D-fLcdga.js';
import { d as defineCustomElement$8 } from './p-D_es2aRD.js';
import { d as defineCustomElement$7 } from './p-BVyufZh8.js';
import { d as defineCustomElement$6 } from './p-DPEFUsDq.js';
import { d as defineCustomElement$5 } from './p-sG4FxOig.js';
import { d as defineCustomElement$4 } from './p-DAwVf8zA.js';
import { d as defineCustomElement$3 } from './p-DdZmrasC.js';
import { d as defineCustomElement$2 } from './p-DFBbXuLI.js';
import { d as defineCustomElement$1 } from './p-BkX0eEtL.js';
const TIME_RANGE_UPDATE_INTERVAL = 10000;
const CUSTOMIZE_INTERVAL_LABEL = 'Custom Interval';
const TIMEZONES_PLACEHOLDER = 'Select a timezone';
const TIMEZONES_SEARCH_PLACEHOLDER = 'Search for a timezone';
const DEFAULT_TIMEZONE_GROUP_NAME = 'system-timezone';
const DEFAULT_TIMEZONE_GROUP_LABEL = 'System Timezone - Default';
const OTHER_TIMEZONES_GROUP_NAME = 'other-timezones';
const OTHER_TIMEZONES_GROUP_LABEL = 'Other Timezones';
const BOTTOM_OPTIONS_HEIGHT = 41;
const SELECT_OPTION_HEIGHT = 32;
const GROUP_GAP = 12; //spacing-3x
const MAX_HEIGHT = 347;
const PADDING_SIZE = 16; //spacing-4x
const buildRelativeTimeSelectOptions = (options, timeZone = getDefaultTimezone()) => {
return options.map(group => buildRelativeTimeGroupOptions(group, timeZone));
};
const buildRelativeTimeGroupOptions = (options, timeZone) => {
return options.map(option => {
const dayjsRange = buildOptionRange(option, timeZone);
return Object.assign(Object.assign({ key: option.value }, option), { description: buildDateRangeDescription(dayjsRange, option.labelRangeFormatter), range: buildTimestampRange(dayjsRange) });
});
};
/**
* Builds the description of the date
* @param startDate start date
* @param endDate end date
* @param formatObject specifies how the dates and the separators should be read
* @returns description of the range accordingly with the format object
*/
const buildDateRangeDescription = ([startDate, endDate], formatObject) => {
const startDateDescription = !isEmpty(formatObject.startDateFormatter) ? startDate.format(formatObject.startDateFormatter) : '';
const separator = !isEmpty(formatObject.separator) ? ` ${formatObject.separator} ` : '';
const endDateDescription = !isEmpty(formatObject.endDateFormatter) ? endDate.format(formatObject.endDateFormatter) : '';
return `${startDateDescription}${separator}${endDateDescription}`;
};
const getSelectedKeyRange = (options, key) => {
var _a;
const selectedItem = options.flat().find(item => item.key === key);
return (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.range) !== null && _a !== void 0 ? _a : [];
};
const hasRangeChanged = (selectedRange, currentRange) => {
if (isEmpty(selectedRange))
return true;
const currentRangeStartDate = getDateTimeWithResetedSeconds(currentRange[0]);
const currentRangeEndDate = getDateTimeWithResetedSeconds(currentRange[1]);
const selectedRangeStartDate = getDateTimeWithResetedSeconds(selectedRange[0]);
const selectedRangeEndDate = getDateTimeWithResetedSeconds(selectedRange[1]);
if (currentRangeStartDate !== selectedRangeStartDate || currentRangeEndDate !== selectedRangeEndDate) {
return true;
}
return false;
};
const getDateTimeWithResetedSeconds = (date) => {
return dayjs(date).set('second', 0).format();
};
const isScrollNeeded = (options, displayingCustomizeOption, displayingTimezoneDropdown) => {
const optionsListHeight = options.reduce((acc, group) => {
const groupSize = group.length * SELECT_OPTION_HEIGHT;
return acc + groupSize + GROUP_GAP;
}, 0);
const customizeOptionHeight = displayingCustomizeOption ? BOTTOM_OPTIONS_HEIGHT : 0;
const dropdownOptionHeight = displayingTimezoneDropdown ? BOTTOM_OPTIONS_HEIGHT : 0;
return optionsListHeight > MAX_HEIGHT - customizeOptionHeight - dropdownOptionHeight - 2 * PADDING_SIZE;
};
const buildTimezonesDropdownOptions = (timezones) => {
let defaultTimezoneGroup = {};
const defaultTimezone = getDefaultTimezone();
let otherTimezones = [...timezones];
const defaultTimezoneIndex = otherTimezones.findIndex(({ name }) => name === defaultTimezone);
if (defaultTimezoneIndex !== -1) {
const timezone = otherTimezones[defaultTimezoneIndex];
otherTimezones.splice(defaultTimezoneIndex, 1);
defaultTimezoneGroup = {
[DEFAULT_TIMEZONE_GROUP_NAME]: {
label: DEFAULT_TIMEZONE_GROUP_LABEL,
value: DEFAULT_TIMEZONE_GROUP_NAME,
options: {
[timezone.name]: {
value: timezone.name,
label: timezone.label
}
}
}
};
}
let otherTimezoneGroup = {};
if (!isEmpty(otherTimezones)) {
otherTimezoneGroup = {
[OTHER_TIMEZONES_GROUP_NAME]: {
label: OTHER_TIMEZONES_GROUP_LABEL,
value: OTHER_TIMEZONES_GROUP_NAME,
options: otherTimezones.reduce((accumulator, { label, name }) => {
var _a;
accumulator[name] = (_a = accumulator[name]) !== null && _a !== void 0 ? _a : {
value: name,
label
};
return accumulator;
}, {})
}
};
}
const options = Object.assign(Object.assign({}, defaultTimezoneGroup), otherTimezoneGroup);
// Check if there's only one group
if (Object.keys(options).length === 1) {
const [groupKey] = Object.keys(options);
return options[groupKey].options;
}
return options;
};
const relativeTimePickerCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}:host{--background-color:var(--background-container-elevated-slider);--min-height:233px}.relative-time-container{display:flex;flex-direction:column;width:328px;max-height:var(--max-height);background-color:var(--background-color)}.relative-time-container .relative-time-selector{padding:var(--padding-size) 0;display:flex;flex-direction:column;gap:var(--group-gap);overflow:auto;min-height:var(--min-height)}.relative-time-container .relative-time-selector::-webkit-scrollbar{width:15px;height:15px}.relative-time-container .relative-time-selector::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--scrollbar-thumb-default);border:4px solid transparent;background-clip:content-box}.relative-time-container .relative-time-selector::-webkit-scrollbar-corner{background-color:transparent}.relative-time-container .relative-time-selector kv-time-picker-select-option{--time-picker-select-option-height:var(--option-height)}.relative-time-container .relative-time-selector--has-scroll kv-time-picker-select-option{--time-picker-select-option-padding:0 var(--spacing-xs) 0 var(--spacing-2xl)}.relative-time-container .selectable{border-top:1px solid var(--slider-border-color-default);padding:var(--spacing-xs) 0}.relative-time-container .selectable kv-single-select-dropdown{--dropdown-max-height:210px}";
const KvRelativeTimePicker = /*@__PURE__*/ proxyCustomElement(class KvRelativeTimePicker extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.selectedRelativeTimeChange = createEvent(this, "selectedRelativeTimeChange", 7);
this.customizeIntervalClicked = createEvent(this, "customizeIntervalClicked", 7);
this.timezoneChange = createEvent(this, "timezoneChange", 7);
this.timezoneInputClicked = createEvent(this, "timezoneInputClicked", 7);
this.timezoneDropdownStateChange = createEvent(this, "timezoneDropdownStateChange", 3);
/** @inheritdoc */
this.options = DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS;
/** @inheritdoc */
this.timezones = buildTimezoneByOffset(getTimezonesNames());
/** @inheritdoc */
this.customIntervalOptionEnabled = true;
/** @inheritdoc */
this.timezoneSelectionEnabled = true;
/** @inheritdoc */
this.timezoneContentVisible = false;
/** @inheritdoc */
this.disableTimezoneSelection = false;
/** @inheritdoc */
this.customClass = '';
/** State that keeps the relative options that are constantly updated if the time
* changes
*/
this.relativeTimeOptions = [];
/** Timezone dropdown management states */
this.timezonesSearchTerm = '';
/** State to determine if a scrollbar is needed to display all the options */
this.hasScroll = false;
this.onTimezoneSearchTermChange = ({ detail: newSearchTerm }) => {
this.timezonesSearchTerm = newSearchTerm;
};
this.onTimezoneSelected = ({ detail: newSelectedTimezone }) => {
this.timezoneChange.emit({
name: newSelectedTimezone,
offset: getTimezoneOffset(newSelectedTimezone)
});
};
this.onSelectRelativeOption = ({ detail: newOption }, range) => {
this.hasSelectedKeyRangeChanged(range, newOption);
};
this.hasSelectedKeyRangeChanged = (newRange, optionSelected) => {
if (hasRangeChanged(this.selectedOptionRange, newRange) || optionSelected !== this.selectedTimeKey) {
this.selectedOptionRange = newRange;
this.selectedRelativeTimeChange.emit({
key: optionSelected,
range: newRange
});
}
};
this.onSelectCustomizeIntervalOption = ({ detail: newOption }) => {
this.selectedOptionRange = [];
this.customizeIntervalClicked.emit(newOption);
};
this.handleShowTimezoneContent = () => {
this.timezoneInputClicked.emit(true);
};
this.getSelectedTimezone = () => {
if (this.selectedTimezone !== undefined) {
return this.selectedTimezone;
}
return getDefaultTimezone();
};
this.getSelectedTimezoneTitle = () => {
const timezone = this.getSelectedTimezone();
return timezone ? formatTimezoneName(timezone) : '';
};
this.onTimezoneChange = ({ detail: openState }) => {
this.timezoneDropdownStateChange.emit(openState);
};
}
handleRelativeTimeOptionsChanges() {
var _a;
const optionsToBuild = (_a = this.options) !== null && _a !== void 0 ? _a : DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS;
const dropdownOptions = buildRelativeTimeSelectOptions(optionsToBuild, this.getSelectedTimezone());
this.relativeTimeOptions = dropdownOptions;
if (!isEmpty(this.selectedTimeKey) && this.selectedTimeKey !== CUSTOM_TIME_RANGE_KEY) {
const currentRange = getSelectedKeyRange(dropdownOptions, this.selectedTimeKey);
this.hasSelectedKeyRangeChanged(currentRange, this.selectedTimeKey);
}
if (this.relativeTimeOptions && this.relativeTimeOptions.length === 0)
return;
this.hasScroll = isScrollNeeded(this.options, this.customIntervalOptionEnabled, this.timezoneSelectionEnabled);
}
onTimezonesChange(timezones) {
this.timezoneDropdownOptions = buildTimezonesDropdownOptions(timezones);
}
onTimezoneSearch(searchTerm) {
this.timezoneFilteredDropdownOptions = searchDropdownOptions(searchTerm, this.timezoneDropdownOptions);
}
onSelectedTimeKeyChange(newKey) {
if (newKey !== CUSTOM_TIME_RANGE_KEY) {
this.selectedOptionRange = getSelectedKeyRange(this.relativeTimeOptions, this.selectedTimeKey);
}
}
onSelectedTimezoneChange() {
this.handleRelativeTimeOptionsChanges();
}
componentWillLoad() {
this.handleRelativeTimeOptionsChanges();
}
connectedCallback() {
this.timezoneDropdownOptions = buildTimezonesDropdownOptions(this.timezones);
this.intervalID = window.setInterval(() => {
this.handleRelativeTimeOptionsChanges();
}, TIME_RANGE_UPDATE_INTERVAL);
}
disconnectedCallback() {
window.clearInterval(this.intervalID);
}
render() {
return (h(Host, { key: '09ccf5ace7573c7d8f2761ce74bc6648d0de8c07' }, h("div", { key: '8dfc4236cb2d635b3ff1799199e2fe494e8feb28', class: Object.assign(Object.assign({}, getClassMap(this.customClass)), { 'relative-time-container': true }), style: {
['--max-height']: `${MAX_HEIGHT}px`,
['--group-gap']: `${GROUP_GAP}px`
} }, h("div", { key: 'f5ac7995121a6053377531686e64b429d8867ce3', class: {
'relative-time-selector': true,
'relative-time-selector--has-scroll': this.hasScroll
}, style: {
['--option-height']: `${SELECT_OPTION_HEIGHT}px`,
['--padding-size']: `${PADDING_SIZE}px`
} }, this.relativeTimeOptions.map((group, index) => (h("div", { key: index, class: "relative-time-group" }, group.map(({ label, value, description, range }) => (h("kv-time-picker-select-option", { key: label, label: label, value: value, description: description, selected: value === this.selectedTimeKey, onItemSelected: detail => this.onSelectRelativeOption(detail, range) }))))))), this.customIntervalOptionEnabled && (h("div", { key: '08f8e53eb06409eb4bc89882d4f34c0669ce99e3', class: "selectable" }, h("kv-select-option", { key: CUSTOM_TIME_RANGE_KEY, label: CUSTOMIZE_INTERVAL_LABEL, value: CUSTOM_TIME_RANGE_KEY, selected: CUSTOM_TIME_RANGE_KEY === this.selectedTimeKey, onItemSelected: this.onSelectCustomizeIntervalOption }))), this.timezoneSelectionEnabled && (h("div", { key: 'bbc7ade1139b5ffaf821050052b214ff923da208', class: "selectable" }, h("kv-input-wrapper", { key: '683512aa689c3418cec1e001e54913a8b959015e', contentVisible: this.timezoneContentVisible, contentHidden: this.disableTimezoneSelection, label: this.getSelectedTimezoneTitle(), icon: EIconName.Edit, onContentClick: this.handleShowTimezoneContent }, h("kv-single-select-dropdown", { key: '4071c243a08f49f673916396daccc2940676054b', searchable: true, icon: EIconName.Time, placeholder: TIMEZONES_PLACEHOLDER, inputSize: EComponentSize.Small, searchPlaceholder: TIMEZONES_SEARCH_PLACEHOLDER, options: this.timezoneDropdownOptions, filteredOptions: this.timezoneFilteredDropdownOptions, selectedOption: this.getSelectedTimezone(), onSearchChange: this.onTimezoneSearchTermChange, onOptionSelected: this.onTimezoneSelected, onOpenStateChange: this.onTimezoneChange })))))));
}
static get watchers() { return {
"options": ["handleRelativeTimeOptionsChanges"],
"timezones": ["onTimezonesChange"],
"timezonesSearchTerm": ["onTimezoneSearch"],
"selectedTimeKey": ["onSelectedTimeKeyChange"],
"selectedTimezone": ["onSelectedTimezoneChange"]
}; }
static get style() { return relativeTimePickerCss; }
}, [257, "kv-relative-time-picker", {
"selectedTimeKey": [513, "selected-time-key"],
"options": [16],
"selectedTimezone": [1, "selected-timezone"],
"timezones": [16],
"customIntervalOptionEnabled": [4, "custom-interval-option-enabled"],
"timezoneSelectionEnabled": [4, "timezone-selection-enabled"],
"timezoneContentVisible": [516, "timezone-content-visible"],
"disableTimezoneSelection": [516, "disable-timezone-selection"],
"customClass": [513, "custom-class"],
"relativeTimeOptions": [32],
"timezonesSearchTerm": [32],
"timezoneDropdownOptions": [32],
"timezoneFilteredDropdownOptions": [32],
"hasScroll": [32],
"selectedOptionRange": [32]
}, undefined, {
"options": ["handleRelativeTimeOptionsChanges"],
"timezones": ["onTimezonesChange"],
"timezonesSearchTerm": ["onTimezoneSearch"],
"selectedTimeKey": ["onSelectedTimeKeyChange"],
"selectedTimezone": ["onSelectedTimezoneChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["kv-relative-time-picker", "kv-action-button", "kv-action-button-icon", "kv-action-button-text", "kv-badge", "kv-checkbox", "kv-dirty-dot", "kv-dropdown", "kv-dropdown-base", "kv-form-help-text", "kv-form-label", "kv-icon", "kv-illustration", "kv-illustration-message", "kv-input-wrapper", "kv-portal", "kv-radio", "kv-search", "kv-select", "kv-select-create-option", "kv-select-multi-options", "kv-select-option", "kv-select-shortcuts-label", "kv-single-select-dropdown", "kv-text-field", "kv-time-picker-select-option", "kv-tooltip", "kv-tooltip-text", "kv-virtualized-list"];
components.forEach(tagName => { switch (tagName) {
case "kv-relative-time-picker":
if (!customElements.get(tagName)) {
customElements.define(tagName, KvRelativeTimePicker);
}
break;
case "kv-action-button":
if (!customElements.get(tagName)) {
defineCustomElement$s();
}
break;
case "kv-action-button-icon":
if (!customElements.get(tagName)) {
defineCustomElement$r();
}
break;
case "kv-action-button-text":
if (!customElements.get(tagName)) {
defineCustomElement$q();
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$p();
}
break;
case "kv-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$o();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$n();
}
break;
case "kv-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$m();
}
break;
case "kv-dropdown-base":
if (!customElements.get(tagName)) {
defineCustomElement$l();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$k();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$j();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$i();
}
break;
case "kv-illustration":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "kv-illustration-message":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "kv-input-wrapper":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "kv-portal":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "kv-radio":
if (!customElements.get(tagName)) {
defineCustomElement$d();
}
break;
case "kv-search":
if (!customElements.get(tagName)) {
defineCustomElement$c();
}
break;
case "kv-select":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "kv-select-create-option":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "kv-select-multi-options":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "kv-select-option":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "kv-select-shortcuts-label":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "kv-single-select-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "kv-text-field":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "kv-time-picker-select-option":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "kv-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "kv-tooltip-text":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "kv-virtualized-list":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
defineCustomElement();
export { KvRelativeTimePicker as K, defineCustomElement as d };