@kelvininc/ui-components
Version:
Kelvin UI Components
296 lines (288 loc) • 19.9 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-BOTigrTZ.js';
import { C as CUSTOM_TIME_RANGE_KEY, o as EIconName, c as EComponentSize } from './wizard.types-COrzvkrr.js';
import { n as getDefaultTimezone, H as dayjs, b as buildTimezoneByOffset, u as getTimezonesNames, t as getTimezoneOffset, g as formatTimezoneName } from './date.helper-CiW9uy7b.js';
import { c as buildOptionRange, h as buildTimestampRange, D as DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS } from './relative-time.helper-CEymGdgK.js';
import { i as isEmpty } from './isEmpty-DYR6-7ab.js';
import { a as getClassMap } from './css-class.helper-DCOsOAOy.js';
import { m as searchDropdownOptions } from './select.helper-Be3m0bpR.js';
import { D as DEFAULT_THROTTLE_WAIT } from './config-YDhuCIKq.js';
import { t as throttle } from './throttle-Ddn7tNe4.js';
import './_commonjsHelpers-B85MJLTf.js';
import './isObject-Dkd2PDJ-.js';
import './string.helper-rZ6JCPsX.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 = class {
constructor(hostRef) {
registerInstance(this, hostRef);
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"]
}; }
};
KvRelativeTimePicker.style = relativeTimePickerCss;
const switchButtonCss = "@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{--off-background-color:var(--switch-background-off);--on-background-color:var(--switch-background-on);--disabled-background-color:var(--switch-background-disabled);--switch-icon-color:var(--switch-icon-color-default);--switch-disabled-icon-color:var(--switch-icon-color-disabled);--switch-height-large:var(--switch-height-regular);--switch-height-small:var(--switch-height-compact);--switch-width-large:var(--switch-width-regular);--switch-width-small:var(--switch-width-compact);--switch-icon-size-large:var(--switch-icon-size-regular);--switch-icon-size-small:var(--switch-icon-size-compact);--switch-padding-large:var(--spacing-2xs);--switch-padding-small:2.5px;display:flex;align-items:center;gap:var(--spacing-md)}.switch-button{display:flex;box-sizing:border-box;border-radius:var(--switch-radius-default);background-color:var(--off-background-color);transition:background-color 0.3s ease-out;cursor:pointer}.switch-button--disabled{background-color:var(--disabled-background-color);cursor:not-allowed;user-select:none}.switch-button--disabled .icon-square kv-icon{--icon-color:var(--switch-disabled-icon-color)}.switch-button--on:not(.switch-button--disabled){background-color:var(--on-background-color)}.switch-button--large{height:var(--switch-height-large);width:var(--switch-width-large)}.switch-button--large .icon-square{width:var(--switch-icon-size-large);height:var(--switch-icon-size-large);padding:var(--switch-padding-large)}.switch-button--large .icon-square kv-icon{--icon-width:calc(var(--switch-icon-size-large) - var(--switch-padding-large) * 2);--icon-height:calc(var(--switch-icon-size-large) - var(--switch-padding-large) * 2)}.switch-button--large.switch-button--on .icon-square{transform:translateX(calc(var(--switch-width-large) - var(--switch-icon-size-large)))}.switch-button--small{height:var(--switch-height-small);width:var(--switch-width-small)}.switch-button--small .icon-square{width:var(--switch-icon-size-small);height:var(--switch-icon-size-small);padding:var(--switch-padding-small)}.switch-button--small .icon-square kv-icon{--icon-width:calc(var(--switch-icon-size-small) - var(--switch-padding-small) * 2);--icon-height:calc(var(--switch-icon-size-small) - var(--switch-padding-small) * 2)}.switch-button--small.switch-button--on .icon-square{transform:translateX(calc(var(--switch-width-small) - var(--switch-icon-size-small)))}.icon-square{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;transition:transform 0.3s ease-out}.icon-square kv-icon{--icon-color:var(--switch-icon-color)}";
const KvSwitchButton = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.switchChange = createEvent(this, "switchChange", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.size = EComponentSize.Large;
}
onStateChange() {
if (this.disabled) {
return;
}
this.checked = !this.checked;
this.switchChange.emit(this.checked);
}
connectedCallback() {
this.onSwitchClick = throttle(() => this.onStateChange(), DEFAULT_THROTTLE_WAIT);
}
render() {
return (h(Host, { key: '7736911aa53d3e8763a7dd0a71fd72edf34e9d55' }, h("slot", { key: '667c99e44b9a358354ab436cef71788043062769', name: "left-slot" }), h("div", { key: '20ccf041d5282a6f6a07b509e9e3e57ab7c4f898', class: {
'switch-button': true,
'switch-button--disabled': this.disabled,
'switch-button--on': this.checked,
[`switch-button--${this.size}`]: true
}, part: "button", onClick: this.onSwitchClick }, h("div", { key: '7e9206b97182a94f1fb74b490ee4e06396e6db33', class: "icon-square", part: "icon-square" }, h("kv-icon", { key: '6130a01087284d9fc14c8954d35d54d019f9d2d0', name: EIconName.CheckState, part: "icon-svg" }))), h("slot", { key: '17367d117ac247c86990d4f6ef59c2dafa114ec0', name: "right-slot" })));
}
};
KvSwitchButton.style = switchButtonCss;
export { KvRelativeTimePicker as kv_relative_time_picker, KvSwitchButton as kv_switch_button };