@kelvininc/ui-components
Version:
Kelvin UI Components
299 lines (291 loc) • 19.5 kB
JavaScript
'use strict';
var index = require('./index-DpuMIXDY.js');
var relativeTimePicker_config = require('./relative-time-picker.config-BBTpZn3r.js');
var icon_types = require('./icon.types-B8lvUrX_.js');
var date_helper = require('./date.helper-DwNTBYV0.js');
var relativeTime_helper = require('./relative-time.helper-CcP_k3Vo.js');
var isEmpty = require('./isEmpty-C_HQvGy-.js');
var components = require('./components-D2lyDQ_a.js');
require('./lib-config-QLtHwxiM.js');
require('./action-button.types-BYOe6st0.js');
require('./absolute-time-picker-dropdown.types-mPwO9zQk.js');
require('./summary-card.types-W26sTdH1.js');
require('./toaster.types-DlSCye8T.js');
require('./tree-item.types-C2yRoORC.js');
require('./tag-alarm.types-BeZw-7PT.js');
require('./wizard.types-DTbE-B6d.js');
var cssClass_helper = require('./css-class.helper-B7G6WFT7.js');
var select_helper = require('./select.helper-CeQKEbrG.js');
var config = require('./config-CX2UH6bG.js');
var throttle = require('./throttle-U8vjnKpb.js');
require('./_commonjsHelpers-BJu3ubxk.js');
require('./_Set-BIUoGFN6.js');
require('./_Map-DiT24PAz.js');
require('./isObject-COPdF2vE.js');
require('./string.helper-B1KQeZk_.js');
require('./isSymbol-D9AiXf1V.js');
const buildRelativeTimeSelectOptions = (options, timeZone = date_helper.getDefaultTimezone()) => {
return options.map(group => buildRelativeTimeGroupOptions(group, timeZone));
};
const buildRelativeTimeGroupOptions = (options, timeZone) => {
return options.map(option => {
const dayjsRange = relativeTime_helper.buildOptionRange(option, timeZone);
return Object.assign(Object.assign({ key: option.value }, option), { description: buildDateRangeDescription(dayjsRange, option.labelRangeFormatter), range: relativeTime_helper.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.isEmpty(formatObject.startDateFormatter) ? startDate.format(formatObject.startDateFormatter) : '';
const separator = !isEmpty.isEmpty(formatObject.separator) ? ` ${formatObject.separator} ` : '';
const endDateDescription = !isEmpty.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.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 date_helper.dayjs(date).set('second', 0).format();
};
const isScrollNeeded = (options, displayingCustomizeOption, displayingTimezoneDropdown) => {
const optionsListHeight = options.reduce((acc, group) => {
const groupSize = group.length * relativeTimePicker_config.SELECT_OPTION_HEIGHT;
return acc + groupSize + relativeTimePicker_config.GROUP_GAP;
}, 0);
const customizeOptionHeight = displayingCustomizeOption ? relativeTimePicker_config.BOTTOM_OPTIONS_HEIGHT : 0;
const dropdownOptionHeight = displayingTimezoneDropdown ? relativeTimePicker_config.BOTTOM_OPTIONS_HEIGHT : 0;
return optionsListHeight > relativeTimePicker_config.MAX_HEIGHT - customizeOptionHeight - dropdownOptionHeight - 2 * relativeTimePicker_config.PADDING_SIZE;
};
const buildTimezonesDropdownOptions = (timezones) => {
let defaultTimezoneGroup = {};
const defaultTimezone = date_helper.getDefaultTimezone();
let otherTimezones = [...timezones];
const defaultTimezoneIndex = otherTimezones.findIndex(({ name }) => name === defaultTimezone);
if (defaultTimezoneIndex !== -1) {
const timezone = otherTimezones[defaultTimezoneIndex];
otherTimezones.splice(defaultTimezoneIndex, 1);
defaultTimezoneGroup = {
[relativeTimePicker_config.DEFAULT_TIMEZONE_GROUP_NAME]: {
label: relativeTimePicker_config.DEFAULT_TIMEZONE_GROUP_LABEL,
value: relativeTimePicker_config.DEFAULT_TIMEZONE_GROUP_NAME,
options: {
[timezone.name]: {
value: timezone.name,
label: timezone.label
}
}
}
};
}
let otherTimezoneGroup = {};
if (!isEmpty.isEmpty(otherTimezones)) {
otherTimezoneGroup = {
[relativeTimePicker_config.OTHER_TIMEZONES_GROUP_NAME]: {
label: relativeTimePicker_config.OTHER_TIMEZONES_GROUP_LABEL,
value: relativeTimePicker_config.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) {
index.registerInstance(this, hostRef);
this.selectedRelativeTimeChange = index.createEvent(this, "selectedRelativeTimeChange", 7);
this.customizeIntervalClicked = index.createEvent(this, "customizeIntervalClicked", 7);
this.timezoneChange = index.createEvent(this, "timezoneChange", 7);
this.timezoneInputClicked = index.createEvent(this, "timezoneInputClicked", 7);
this.timezoneDropdownStateChange = index.createEvent(this, "timezoneDropdownStateChange", 3);
/** @inheritdoc */
this.options = relativeTimePicker_config.DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS;
/** @inheritdoc */
this.timezones = date_helper.buildTimezoneByOffset(date_helper.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: date_helper.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 date_helper.getDefaultTimezone();
};
this.getSelectedTimezoneTitle = () => {
const timezone = this.getSelectedTimezone();
return timezone ? date_helper.formatTimezoneName(timezone) : '';
};
this.onTimezoneChange = ({ detail: openState }) => {
this.timezoneDropdownStateChange.emit(openState);
};
}
handleRelativeTimeOptionsChanges() {
var _a;
const optionsToBuild = (_a = this.options) !== null && _a !== void 0 ? _a : relativeTimePicker_config.DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS;
const dropdownOptions = buildRelativeTimeSelectOptions(optionsToBuild, this.getSelectedTimezone());
this.relativeTimeOptions = dropdownOptions;
if (!isEmpty.isEmpty(this.selectedTimeKey) && this.selectedTimeKey !== relativeTimePicker_config.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 = select_helper.searchDropdownOptions(searchTerm, this.timezoneDropdownOptions);
}
onSelectedTimeKeyChange(newKey) {
if (newKey !== relativeTimePicker_config.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();
}, relativeTimePicker_config.TIME_RANGE_UPDATE_INTERVAL);
}
disconnectedCallback() {
window.clearInterval(this.intervalID);
}
render() {
return (index.h(index.Host, { key: '159ef2bf1c3c804bb4e55830b3a44cb68da5df81' }, index.h("div", { key: '87e0efe593ace59a3e6ba2c775e0dbad8e3e38db', class: Object.assign(Object.assign({}, cssClass_helper.getClassMap(this.customClass)), { 'relative-time-container': true }), style: {
['--max-height']: `${relativeTimePicker_config.MAX_HEIGHT}px`,
['--group-gap']: `${relativeTimePicker_config.GROUP_GAP}px`
} }, index.h("div", { key: '13a3d0ae03e84d4f511041439f031fb6a321c378', class: {
'relative-time-selector': true,
'relative-time-selector--has-scroll': this.hasScroll
}, style: {
['--option-height']: `${relativeTimePicker_config.SELECT_OPTION_HEIGHT}px`,
['--padding-size']: `${relativeTimePicker_config.PADDING_SIZE}px`
} }, this.relativeTimeOptions.map((group, index$1) => (index.h("div", { key: index$1, class: "relative-time-group" }, group.map(({ label, value, description, range }) => (index.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 && (index.h("div", { key: 'bb65f776eb7f73ccbe4e3e04a8474a1c16069ed5', class: "selectable" }, index.h("kv-select-option", { key: relativeTimePicker_config.CUSTOMIZE_INTERVAL_KEY, label: relativeTimePicker_config.CUSTOMIZE_INTERVAL_LABEL, value: relativeTimePicker_config.CUSTOMIZE_INTERVAL_KEY, selected: relativeTimePicker_config.CUSTOMIZE_INTERVAL_KEY === this.selectedTimeKey, onItemSelected: this.onSelectCustomizeIntervalOption }))), this.timezoneSelectionEnabled && (index.h("div", { key: 'd0dd57d61c78b2b942fc9887c9ddbed06f65c8d9', class: "selectable" }, index.h("kv-input-wrapper", { key: '79ca55c922e3ca1737c35bda3f936fdda4115eea', contentVisible: this.timezoneContentVisible, contentHidden: this.disableTimezoneSelection, label: this.getSelectedTimezoneTitle(), icon: icon_types.EIconName.Edit, onContentClick: this.handleShowTimezoneContent }, index.h("kv-single-select-dropdown", { key: 'bd31dbb789b3d64cf14432c8758c17b6c30e8e2c', searchable: true, icon: icon_types.EIconName.Time, placeholder: relativeTimePicker_config.TIMEZONES_PLACEHOLDER, inputSize: components.EComponentSize.Small, searchPlaceholder: relativeTimePicker_config.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) {
index.registerInstance(this, hostRef);
this.switchChange = index.createEvent(this, "switchChange", 7);
/** @inheritdoc */
this.disabled = false;
/** @inheritdoc */
this.checked = false;
/** @inheritdoc */
this.size = components.EComponentSize.Large;
}
onStateChange() {
if (this.disabled) {
return;
}
this.checked = !this.checked;
this.switchChange.emit(this.checked);
}
connectedCallback() {
this.onSwitchClick = throttle.throttle(() => this.onStateChange(), config.DEFAULT_THROTTLE_WAIT);
}
render() {
const iconName = this.disabled ? icon_types.EIconName.Lock : icon_types.EIconName.DoneAll;
return (index.h(index.Host, { key: '34f0a04060c25d556253bdb0a31350180fdcb560' }, index.h("slot", { key: 'adfffd71bb675a3e50e6ce765308bdb4e9a716ce', name: "left-slot" }), index.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 }, index.h("div", { key: '9d07c60351217da43c60dec6c8d6a03e3d70c419', class: "icon-square", part: "icon-square" }, index.h("kv-icon", { key: 'f901cb72307f1137e5dff79497ef020d7d9bb7dd', name: iconName, part: "icon-svg" }))), index.h("slot", { key: '1a3eddf7f7ea2cb25e13c37f07f75d4898fe3250', name: "right-slot" })));
}
};
KvSwitchButton.style = switchButtonCss;
exports.kv_relative_time_picker = KvRelativeTimePicker;
exports.kv_switch_button = KvSwitchButton;