@kelvininc/ui-components
Version:
Kelvin UI Components
296 lines (289 loc) • 19 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-D-JVwta2.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 './relative-time-picker.config-DDiFT6uo.js';
import { E as EIconName } from './icon.types-SVedE_O8.js';
import { c as getDefaultTimezone, a as dayjs, b as buildTimezoneByOffset, g as getTimezonesNames, e as getTimezoneOffset, l as formatTimezoneName } from './date.helper-D0D1COyq.js';
import { b as buildOptionRange, a as buildTimestampRange } from './relative-time.helper-CN_dB5dm.js';
import { i as isEmpty } from './isEmpty-BAGi1PqI.js';
import { a as EComponentSize } from './components-DzZLIMy0.js';
import './lib-config-DwRzddFC.js';
import './action-button.types-DVds6a5Z.js';
import './absolute-time-picker-dropdown.types-CojoW2Y2.js';
import './summary-card.types-BcMhjKoS.js';
import './toaster.types-vhHhaF4Q.js';
import './tree-item.types-CBuzk8fR.js';
import './tag-alarm.types-DHk26cGe.js';
import './wizard.types-7ioMFMb5.js';
import { g as getClassMap } from './css-class.helper-DKOxy79t.js';
import { a as searchDropdownOptions } from './select.helper-D_nHTFPl.js';
import { D as DEFAULT_THROTTLE_WAIT } from './config-YDhuCIKq.js';
import { t as throttle } from './throttle-CI91gV45.js';
import './_commonjsHelpers-BFTU3MAI.js';
import './_Set-B7Zkvu4X.js';
import './_Map-B6Xd0L4K.js';
import './isObject-Dkd2PDJ-.js';
import './string.helper-BMAMF_sW.js';
import './isSymbol-CfrylQep.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 = 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 !== 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"]
}; }
};
KvRelativeTimePicker.style = relativeTimePickerCss;
const switchButtonCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}:host{--off-background-color:var(--kv-neutral-5, #707070);--on-background-color:var(--kv-primary, #005cc7);--sqr-background-color:var(--kv-primary-contrast, #fff);display:flex;align-items:center;gap:var(--kv-spacing-2x, 8px)}.switch-button{display:flex;box-sizing:border-box;cursor:pointer;border-radius:4px;background-color:var(--off-background-color);transition:background-color 0.3s ease-out}.switch-button--disabled{cursor:not-allowed;user-select:none}.switch-button--on{background-color:var(--on-background-color)}.switch-button--on .icon-square kv-icon::part(icon){fill:var(--on-background-color)}.switch-button--large{height:20px;width:40px;padding:2px 2px}.switch-button--large .icon-square{height:16px;width:16px}.switch-button--large .icon-square kv-icon{--icon-width:12px;--icon-height:12px}.switch-button--large.switch-button--on .icon-square{transform:translateX(20px)}.switch-button--small{height:16px;width:32px;padding:2.5px 2.5px}.switch-button--small .icon-square{height:11px;width:11px}.switch-button--small .icon-square kv-icon{--icon-width:8px;--icon-height:8px}.switch-button--small.switch-button--on .icon-square{transform:translateX(16px)}.icon-square{display:inline-flex;align-items:center;justify-content:center;transition:transform 0.3s ease-out;border-radius:2px;background-color:var(--sqr-background-color);font-size:0}.icon-square kv-icon{--icon-color:var(--off-background-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() {
const iconName = this.disabled ? EIconName.Lock : EIconName.DoneAll;
return (h(Host, { key: '34f0a04060c25d556253bdb0a31350180fdcb560' }, h("slot", { key: 'adfffd71bb675a3e50e6ce765308bdb4e9a716ce', name: "left-slot" }), h("div", { key: '8d4739d60a8c1157be500384cdc1cd383df46de6', 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: '9d07c60351217da43c60dec6c8d6a03e3d70c419', class: "icon-square", part: "icon-square" }, h("kv-icon", { key: 'f901cb72307f1137e5dff79497ef020d7d9bb7dd', name: iconName, part: "icon-svg" }))), h("slot", { key: '1a3eddf7f7ea2cb25e13c37f07f75d4898fe3250', name: "right-slot" })));
}
};
KvSwitchButton.style = switchButtonCss;
export { KvRelativeTimePicker as kv_relative_time_picker, KvSwitchButton as kv_switch_button };