@kelvininc/ui-components
Version:
Kelvin UI Components
441 lines (436 loc) • 22.9 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-D6GMjtmE.js';
import { G as GROUP_GAP, M as MAX_HEIGHT, P as PADDING_SIZE, O as OTHER_TIMEZONES_GROUP_NAME, a as OTHER_TIMEZONES_GROUP_LABEL, S as SELECT_OPTION_HEIGHT, B as BOTTOM_OPTIONS_HEIGHT, b as DEFAULT_TIMEZONE_GROUP_NAME, c as DEFAULT_TIMEZONE_GROUP_LABEL, D as DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS, C as CUSTOMIZE_INTERVAL_KEY, T as TIME_RANGE_UPDATE_INTERVAL, d as CUSTOMIZE_INTERVAL_LABEL, e as TIMEZONES_SEARCH_PLACEHOLDER, f as TIMEZONES_PLACEHOLDER } from './p-zjJfMcH8.js';
import { b as EIconName } from './p-DBphUUgi.js';
import { c as getDefaultTimezone, a as dayjs, b as buildTimezoneByOffset, g as getTimezonesNames, e as getTimezoneOffset, D as formatTimezoneName } from './p-Ba4zaTTd.js';
import { b as buildOptionRange, a as buildTimestampRange } from './p-fPdjvgbF.js';
import { i as isEmpty } from './p-BZNGlO8m.js';
import { a as EComponentSize } from './p-BRgmvbuh.js';
import './p-BcMhjKoS.js';
import './p-BQDwJ0uF.js';
import { g as getClassMap } from './p-DKOxy79t.js';
import { f as searchDropdownOptions } from './p-BEfnHAoy.js';
import { d as defineCustomElement$q } from './p-CsQJZTqg.js';
import { d as defineCustomElement$p } from './p-C7UGguL_.js';
import { d as defineCustomElement$o } from './p-BOySlV0g.js';
import { d as defineCustomElement$n } from './p-BAnY2f0R.js';
import { d as defineCustomElement$m } from './p-BJSKhyhi.js';
import { d as defineCustomElement$l } from './p-DVrmG2A8.js';
import { d as defineCustomElement$k } from './p-z6Xl-2s2.js';
import { d as defineCustomElement$j } from './p-BYJ5hjZN.js';
import { d as defineCustomElement$i } from './p-Bu3_3dFw.js';
import { d as defineCustomElement$h } from './p-B41PGLQm.js';
import { d as defineCustomElement$g } from './p-BMp30lyC.js';
import { d as defineCustomElement$f } from './p-Bi2u2KUW.js';
import { d as defineCustomElement$e } from './p-DESwXpke.js';
import { d as defineCustomElement$d } from './p-BIWUEm1f.js';
import { d as defineCustomElement$c } from './p-DrAjMjwv.js';
import { d as defineCustomElement$b } from './p-6evrDshf.js';
import { d as defineCustomElement$a } from './p-pSs-P0wB.js';
import { d as defineCustomElement$9 } from './p-CKO4h8cf.js';
import { d as defineCustomElement$8 } from './p-BGPTa9b0.js';
import { d as defineCustomElement$7 } from './p-C97qgeMO.js';
import { d as defineCustomElement$6 } from './p-CVqlIG8a.js';
import { d as defineCustomElement$5 } from './p-DMity2tp.js';
import { d as defineCustomElement$4 } from './p-DYYdbkc7.js';
import { d as defineCustomElement$3 } from './p-GHnCHOez.js';
import { d as defineCustomElement$2 } from './p-BuaFqlfN.js';
import { d as defineCustomElement$1 } from './p-C8hKWhkk.js';
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}}:host{--background-color:var(--kv-neutral-7, #2a2a2a);--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(--kv-neutral-6, #3f3f3f);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(--kv-spacing, 4px) 0 var(--kv-spacing-4x, 16px)}.relative-time-container .selectable{border-top:1px solid var(--kv-neutral-6, #3f3f3f);padding:var(--kv-spacing, 4px) 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 !== CUSTOMIZE_INTERVAL_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 !== CUSTOMIZE_INTERVAL_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: '159ef2bf1c3c804bb4e55830b3a44cb68da5df81' }, h("div", { key: '87e0efe593ace59a3e6ba2c775e0dbad8e3e38db', 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: '13a3d0ae03e84d4f511041439f031fb6a321c378', 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: 'bb65f776eb7f73ccbe4e3e04a8474a1c16069ed5', class: "selectable" }, h("kv-select-option", { key: CUSTOMIZE_INTERVAL_KEY, label: CUSTOMIZE_INTERVAL_LABEL, value: CUSTOMIZE_INTERVAL_KEY, selected: CUSTOMIZE_INTERVAL_KEY === this.selectedTimeKey, onItemSelected: this.onSelectCustomizeIntervalOption }))), this.timezoneSelectionEnabled && (h("div", { key: 'd0dd57d61c78b2b942fc9887c9ddbed06f65c8d9', class: "selectable" }, h("kv-input-wrapper", { key: '79ca55c922e3ca1737c35bda3f936fdda4115eea', contentVisible: this.timezoneContentVisible, contentHidden: this.disableTimezoneSelection, label: this.getSelectedTimezoneTitle(), icon: EIconName.Edit, onContentClick: this.handleShowTimezoneContent }, h("kv-single-select-dropdown", { key: 'bd31dbb789b3d64cf14432c8758c17b6c30e8e2c', 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; }
}, [1, "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-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-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$q();
}
break;
case "kv-action-button-icon":
if (!customElements.get(tagName)) {
defineCustomElement$p();
}
break;
case "kv-badge":
if (!customElements.get(tagName)) {
defineCustomElement$o();
}
break;
case "kv-checkbox":
if (!customElements.get(tagName)) {
defineCustomElement$n();
}
break;
case "kv-dirty-dot":
if (!customElements.get(tagName)) {
defineCustomElement$m();
}
break;
case "kv-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$l();
}
break;
case "kv-dropdown-base":
if (!customElements.get(tagName)) {
defineCustomElement$k();
}
break;
case "kv-form-help-text":
if (!customElements.get(tagName)) {
defineCustomElement$j();
}
break;
case "kv-form-label":
if (!customElements.get(tagName)) {
defineCustomElement$i();
}
break;
case "kv-icon":
if (!customElements.get(tagName)) {
defineCustomElement$h();
}
break;
case "kv-illustration":
if (!customElements.get(tagName)) {
defineCustomElement$g();
}
break;
case "kv-illustration-message":
if (!customElements.get(tagName)) {
defineCustomElement$f();
}
break;
case "kv-input-wrapper":
if (!customElements.get(tagName)) {
defineCustomElement$e();
}
break;
case "kv-portal":
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 };