UNPKG

@kelvininc/ui-components

Version:
565 lines (560 loc) 30.9 kB
import { H as proxyCustomElement, I as H, J as createEvent, f as ETooltipPosition, D as ETimePickerView, C as CUSTOM_TIME_RANGE_KEY, K as h, i as EAbsoluteTimePickerMode, e as EComponentSize, m as EActionButtonType, L as Host } from './p-BP5CxQcH.js'; import { D as DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS, T as TIME_PICKER_PORTAL_Z_INDEX, g as getLast24HoursRange, e as DEFAULT_SELECTED_TIME_KEY, f as getTimestampFromDateRange, i as getTimePickerEventPayload, c as createTimestampInTimezoneFromFormattedDate, h as hasRangeChanged, F as FULL_RANGE_SIZE, A as APPLY_BUTTON_ERROR_TOOLTIP_TEXT, a as buildCustomIntervalTimeRange, j as getRelativeTimeLabel, b as buildTooltipText, d as DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG, k as getAbsoluteTimePickerRangeDates, l as getRelativeTimeInputText, v as validateNewRange } from './p-58Jj-JHl.js'; import { b as buildTimezoneByOffset, u as getTimezonesNames, n as getDefaultTimezone, t as getTimezoneOffset, H as dayjs } from './p-BS8xGxWJ.js'; import { C as CALENDAR_DATE_TIME_MASK, D as DATETIME_INPUT_MASK, c as DEFAULT_HEADER_TITLE } from './p-BWl-z3SO.js'; import { D as DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS } from './p-BEbvpiII.js'; import { d as defineCustomElement$z } from './p-Bcu5R5me.js'; import { d as defineCustomElement$y } from './p-0XA6IHyr.js'; import { d as defineCustomElement$x } from './p-DFvvqEwa.js'; import { d as defineCustomElement$w } from './p-DviRLduP.js'; import { d as defineCustomElement$v } from './p-CJTppmYq.js'; import { d as defineCustomElement$u } from './p-DvAWw3VB.js'; import { d as defineCustomElement$t } from './p-DRIdNOSH.js'; import { d as defineCustomElement$s } from './p-Cblno6rQ.js'; import { d as defineCustomElement$r } from './p-Bo7D4REV.js'; import { d as defineCustomElement$q } from './p-CcHqOBLS.js'; import { d as defineCustomElement$p } from './p-DzkvH5wF.js'; import { d as defineCustomElement$o } from './p-BfW2hU_X.js'; import { d as defineCustomElement$n } from './p-BOKt4LQl.js'; import { d as defineCustomElement$m } from './p-E4GiU6Fx.js'; import { d as defineCustomElement$l } from './p-DQ7v6WT-.js'; import { d as defineCustomElement$k } from './p-RSgE4CBK.js'; import { d as defineCustomElement$j } from './p-hPCB4r-t.js'; import { d as defineCustomElement$i } from './p-BXqO7Mxu.js'; import { d as defineCustomElement$h } from './p-CgqRIP0M.js'; import { d as defineCustomElement$g } from './p-s9JMr6UQ.js'; import { d as defineCustomElement$f } from './p-DW_Z15kI.js'; import { d as defineCustomElement$e } from './p-BrEVQ5h5.js'; import { d as defineCustomElement$d } from './p-Cqe6LD24.js'; import { d as defineCustomElement$c } from './p-CJVymxK-.js'; import { d as defineCustomElement$b } from './p-D-fLcdga.js'; import { d as defineCustomElement$a } from './p-D_es2aRD.js'; import { d as defineCustomElement$9 } from './p-BVyufZh8.js'; import { d as defineCustomElement$8 } from './p-DPEFUsDq.js'; import { d as defineCustomElement$7 } from './p-CjvXv7e2.js'; import { d as defineCustomElement$6 } from './p-sG4FxOig.js'; import { d as defineCustomElement$5 } from './p-DAwVf8zA.js'; import { d as defineCustomElement$4 } from './p-DdZmrasC.js'; import { d as defineCustomElement$3 } from './p-DFBbXuLI.js'; import { d as defineCustomElement$2 } from './p-BkX0eEtL.js'; import { i as isEmpty } from './p-BZNGlO8m.js'; import { i as isNumber } from './p-C9bG1i86.js'; import { m as merge } from './p-597Q-QFb.js'; const timePickerCss = "@property --rotation{syntax:\"<angle>\";initial-value:0deg;inherits:false}@keyframes rotate-border{to{--rotation:360deg}}kv-dropdown-base:not(.hydrated)>[slot=list]{display:none}.time-range-content{background-color:var(--background-container-elevated-slider);border:1px solid var(--slider-border-color-default);border-radius:var(--radius-md);width:max-content}.time-range-content .content-wrapper{position:relative;display:flex;overflow:hidden;transition:all 0.3s ease-in-out}.time-range-content .content-wrapper--relative{height:347px;width:328px}.time-range-content .content-wrapper--absolute{height:377px;width:448px}.time-range-content .content-wrapper--full-view{height:347px;width:779px}.time-range-content .relative-range{position:absolute}.time-range-content .relative-range kv-relative-time-picker{--background-color:transparent}.time-range-content .relative-range--full-view{border-right:1px solid var(--slider-border-color-default)}.time-range-content .calendar-range{position:absolute;right:-448px;z-index:1;transition:all 0.3s ease-in-out;background-color:var(--background-container-elevated-slider);border-top-right-radius:var(--radius-md);border-top-left-radius:var(--radius-md)}.time-range-content .calendar-range--visible{right:0}.time-range-content .calendar-range--full-view{right:0}.time-range-content kv-absolute-time-picker .absolute-time-picker-container{background-color:transparent}.footer{display:flex;justify-content:space-between;padding:var(--spacing-2xl);border-top:1px solid var(--slider-border-color-default)}.footer .toggle-wrapper{display:flex}.footer .show-calendar-toggle{display:flex;gap:var(--spacing-md);align-items:center}.footer .show-calendar-toggle .toggle-text{font-family:Proxima Nova;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0;color:var(--text-surface-neutral-tertiary)}.footer .actions{display:flex;gap:var(--spacing-md)}"; const KvTimePicker$1 = /*@__PURE__*/ proxyCustomElement(class KvTimePicker extends H { constructor() { super(); this.__registerHost(); this.timeRangeChange = createEvent(this, "timeRangeChange", 7); this.dropdownStateChange = createEvent(this, "dropdownStateChange", 7); this.cancelClicked = createEvent(this, "cancelClicked", 7); this.showCalendarStateChange = createEvent(this, "showCalendarStateChange", 7); /** @inheritdoc */ this.inputConfig = {}; /** @inheritdoc */ this.dropdownPositionOptions = DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS; /** @inheritdoc */ this.disabled = false; /** @inheritdoc */ this.showCalendar = false; /** @inheritdoc */ this.relativeTimePickerOptions = DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS; /** @inheritdoc */ this.timezones = buildTimezoneByOffset(getTimezonesNames()); /** @inheritdoc */ this.disableTimezoneSelection = false; /** @inheritdoc */ this.displayCustomizeInterval = true; /** @inheritdoc */ this.displayTimezoneDropdown = true; /** @inheritdoc */ this.zIndex = TIME_PICKER_PORTAL_Z_INDEX; /** @inheritdoc */ this.tooltipPosition = ETooltipPosition.TopStart; // Defines what content is being displayed this.timePickerView = ETimePickerView.RelativeTimePicker; // Dropdown open state this.dropdownOpen = false; // Apply button tooltip text this.applyButtontooltipText = ''; // Defines if calendar is locked when the user is in full view and clicked customize interval this.calendarViewLocked = false; // Defines if the timezone dropdown is visible in the input wrapper this.timezoneSelectionContentVisible = false; this.internalDropdownsOpen = false; this.resetDefaultSelectedTimeState = () => { this.selectedTimeState = { key: DEFAULT_SELECTED_TIME_KEY, range: getLast24HoursRange(), timezone: this.getSelectedTimezone() }; }; this.getSelectedTimezone = () => { var _a; if (((_a = this.selectedTimeState) === null || _a === void 0 ? void 0 : _a.timezone) !== undefined) { return this.selectedTimeState.timezone; } const defaultTimezone = getDefaultTimezone(); return { name: defaultTimezone, offset: getTimezoneOffset(defaultTimezone) }; }; this.onDropdownChange = ({ detail: isDropdownOpen }) => { this.dropdownOpen = isDropdownOpen; this.dropdownStateChange.emit(isDropdownOpen); if (!this.isApplyButtonDisabled() && !isDropdownOpen) { if (isEmpty(this.selectedTimeOption)) { this.resetDefaultSelectedTimeState(); } if (this.timePickerView !== ETimePickerView.FullView) { this.timePickerView = ETimePickerView.RelativeTimePicker; } } this.timezoneSelectionContentVisible = false; }; this.onSelectedRelativeTimeChange = ({ detail: timeOption }) => { this.selectedTimeState = { key: timeOption.key, range: timeOption.range, timezone: this.getSelectedTimezone() }; this.calendarViewLocked = false; }; this.onClickSeeCustomInterval = ({ detail: key }) => { if (this.selectedTimeState && this.selectedTimeState.key !== CUSTOM_TIME_RANGE_KEY) { this.selectedTimeState = { key, range: [], timezone: this.getSelectedTimezone() }; } if (!this.showCalendar) { this.timePickerView = ETimePickerView.AbsoluteTimePicker; } else { this.calendarViewLocked = true; } }; this.onSelectedTimezoneChange = ({ detail: timezone }) => { var _a, _b; const previousTimezone = this.getSelectedTimezone().name; const range = this.selectedTimeState.key === CUSTOM_TIME_RANGE_KEY && ((_b = (_a = this.selectedTimeState) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.length) > 0 ? getTimestampFromDateRange(this.selectedTimeState.range, previousTimezone, timezone.name) : this.selectedTimeState.range; this.selectedTimeState = Object.assign(Object.assign({}, this.selectedTimeState), { range, timezone }); }; this.onClickApply = () => { const eventPayload = getTimePickerEventPayload(this.selectedTimeState, this.getSelectedTimezone()); this.timeRangeChange.emit(eventPayload); this.dropdownStateChange.emit(false); this.dropdownOpen = false; this.timezoneSelectionContentVisible = false; if (this.timePickerView !== ETimePickerView.FullView) { this.timePickerView = ETimePickerView.RelativeTimePicker; this.calendarViewLocked = false; } }; this.onClickBack = () => { this.undoLastChanges(); this.calendarViewLocked = false; }; this.onClickCancel = (event) => { this.undoLastChanges(); this.cancelClicked.emit(event); this.dropdownOpen = false; this.timezoneSelectionContentVisible = false; }; this.undoLastChanges = () => { if (!isEmpty(this.selectedTimeOption)) { this.selectedTimeState = this.selectedTimeOption; } else { this.resetDefaultSelectedTimeState(); } this.applyButtontooltipText = ''; if (this.timePickerView !== ETimePickerView.FullView) { this.calendarViewLocked = false; this.timePickerView = ETimePickerView.RelativeTimePicker; } }; this.onShowCalendarClick = () => { if (!this.calendarViewLocked) { this.showCalendarStateChange.emit(!this.showCalendar); } }; this.handleRelativeTimeConfigReset = () => { this.calendarViewLocked = true; this.selectedTimeState = { key: CUSTOM_TIME_RANGE_KEY, range: [], timezone: this.getSelectedTimezone() }; }; this.handleAbsoluteDatesChange = ({ detail }) => { const range = detail.range; if (!this.calendarViewLocked) { this.calendarViewLocked = true; } const [from, to] = range; const timezone = this.getSelectedTimezone(); const fromDate = createTimestampInTimezoneFromFormattedDate(from, timezone.name, CALENDAR_DATE_TIME_MASK); const toDate = createTimestampInTimezoneFromFormattedDate(to, timezone.name, CALENDAR_DATE_TIME_MASK); if (hasRangeChanged([fromDate, toDate], this.selectedTimeState.range)) { this.selectedTimeState = { key: CUSTOM_TIME_RANGE_KEY, range: range.length === FULL_RANGE_SIZE ? [fromDate, toDate] : [fromDate], timezone }; this.updateApplyButtonConfig(range); } }; this.displayInputWrapperContent = () => { this.timezoneSelectionContentVisible = true; }; this.getCalendarLimitDatesFormatted = (date) => { if (!isNumber(date)) return; const selectedTimezone = this.getSelectedTimezone(); return dayjs(date).tz(selectedTimezone.name).format(DATETIME_INPUT_MASK); }; this.updateApplyButtonConfig = (range) => { if (range && range.length === FULL_RANGE_SIZE) { this.applyButtontooltipText = ''; } else { this.applyButtontooltipText = APPLY_BUTTON_ERROR_TOOLTIP_TEXT; } }; this.getDropdownInputValue = () => { var _a, _b; if (((_a = this.selectedTimeOption) === null || _a === void 0 ? void 0 : _a.key) === CUSTOM_TIME_RANGE_KEY) { return buildCustomIntervalTimeRange(this.selectedTimeOption.range, this.selectedTimeOption.timezone.name); } if (!isEmpty(this.selectedTimeOption)) { return getRelativeTimeLabel((_b = this.selectedTimeOption) === null || _b === void 0 ? void 0 : _b.key, this.relativeTimePickerOptions); } return ''; }; this.getTextFieldTooltip = () => { var _a; if (((_a = this.selectedTimeState) === null || _a === void 0 ? void 0 : _a.key) === CUSTOM_TIME_RANGE_KEY) { return buildTooltipText(this.selectedTimeState.range, this.getSelectedTimezone(), this.timezones); } }; this.getFormattedSelectedTime = () => { var _a, _b; if (((_a = this.selectedTimeState) === null || _a === void 0 ? void 0 : _a.key) === CUSTOM_TIME_RANGE_KEY) { return DEFAULT_HEADER_TITLE; } return getRelativeTimeLabel((_b = this.selectedTimeState) === null || _b === void 0 ? void 0 : _b.key, this.relativeTimePickerOptions); }; this.getInputConfig = () => { return merge({}, DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG, this.inputConfig, { value: this.getDropdownInputValue(), tooltipConfig: { text: this.getTextFieldTooltip(), position: this.tooltipPosition }, inputDisabled: this.disabled }); }; /** * Returns the apply button tooltip helptext * @returns apply button help text */ this.getApplyButtonTooltipText = () => { return this.isApplyButtonDisabled() ? this.applyButtontooltipText : ''; }; /** * Transforms the timestamp into absolute-time-picker dates in the format: YYYY/MM/DD HH:mm:ss * @returns formatted dates to the absolute time picker component */ this.getAbsoluteRange = () => { const defaultTimezone = this.getSelectedTimezone(); return getAbsoluteTimePickerRangeDates(this.selectedTimeState, defaultTimezone); }; this.onInternalDropdownsStateChange = ({ detail: openState }) => { this.internalDropdownsOpen = openState; }; } handleSelectTimeStateChange(timeState) { var _a; this.selectedTimeState = Object.assign(Object.assign({}, timeState), { timezone: (_a = timeState === null || timeState === void 0 ? void 0 : timeState.timezone) !== null && _a !== void 0 ? _a : this.getSelectedTimezone() }); } handleShowCalendarChange(value) { this.syncShowCalendarViewState(value); } componentWillLoad() { if (isEmpty(this.selectedTimeOption)) { this.resetDefaultSelectedTimeState(); } else { this.syncTimeStateWithTimeOption(); } this.syncShowCalendarViewState(this.showCalendar); } syncShowCalendarViewState(value) { this.timePickerView = value ? ETimePickerView.FullView : ETimePickerView.RelativeTimePicker; } syncTimeStateWithTimeOption() { var _a; this.selectedTimeState = Object.assign(Object.assign({}, this.selectedTimeOption), { timezone: (_a = this.selectedTimeOption.timezone) !== null && _a !== void 0 ? _a : this.getSelectedTimezone() }); } getRelativeTimeInputConfig() { var _a; if (((_a = this.selectedTimeState) === null || _a === void 0 ? void 0 : _a.key) !== CUSTOM_TIME_RANGE_KEY) { return getRelativeTimeInputText(this.relativeTimePickerOptions, this.selectedTimeState, this.getSelectedTimezone().name); } } // Components config methods isApplyButtonDisabled() { var _a, _b, _c, _d; const { range: stateRange, timezone: selectedTimezone } = this.selectedTimeState; if (stateRange.length > 0 && validateNewRange(stateRange)) { if (((_b = (_a = this.selectedTimeOption) === null || _a === void 0 ? void 0 : _a.range) === null || _b === void 0 ? void 0 : _b.length) > 0) { const { range: propRange } = this.selectedTimeOption; if (stateRange.length === FULL_RANGE_SIZE && hasRangeChanged(stateRange, propRange)) { return false; } } if (((_d = (_c = this.selectedTimeOption) === null || _c === void 0 ? void 0 : _c.timezone) === null || _d === void 0 ? void 0 : _d.name) !== (selectedTimezone === null || selectedTimezone === void 0 ? void 0 : selectedTimezone.name)) { return false; } } return true; } render() { var _a; const dropdownPositionConfig = this.dropdownPositionOptions; const inputConfig = this.getInputConfig(); return (h(Host, { key: 'ca2b9b8351e3dac25906cc041184e9686b19f4f5' }, h("kv-dropdown", { key: 'd0589482ba1f9a9232e11f9f29279da27660884e', isOpen: this.dropdownOpen, onOpenStateChange: this.onDropdownChange, inputConfig: inputConfig, options: dropdownPositionConfig, disabled: this.disabled, zIndex: this.zIndex, clickOutsideClose: !this.internalDropdownsOpen }, h("div", { key: '2929b2820d6a80fdea59f66969c6a6ecb1790dbf', class: "time-range-content" }, h("div", { key: 'f611d902bc6d59d5507bcc0d55280e1e0f32969c', class: { 'content-wrapper': true, 'content-wrapper--relative': this.timePickerView === ETimePickerView.RelativeTimePicker, 'content-wrapper--absolute': this.timePickerView === ETimePickerView.AbsoluteTimePicker, 'content-wrapper--full-view': this.timePickerView === ETimePickerView.FullView } }, h("div", { key: '5aaf81e7a00fc3fd00e6cd4e7b4b0d2fb3284545', class: { 'relative-range': true, 'relative-range--full-view': this.timePickerView === ETimePickerView.FullView } }, h("kv-relative-time-picker", { key: '767d1c2b382125d5077e39c66cafc2b34d467925', options: this.relativeTimePickerOptions, timezones: this.timezones, selectedTimezone: this.getSelectedTimezone().name, selectedTimeKey: (_a = this.selectedTimeState) === null || _a === void 0 ? void 0 : _a.key, customIntervalOptionEnabled: this.displayCustomizeInterval, timezoneSelectionEnabled: this.displayTimezoneDropdown, timezoneContentVisible: this.timezoneSelectionContentVisible, disableTimezoneSelection: this.disableTimezoneSelection, onCustomizeIntervalClicked: this.onClickSeeCustomInterval, onSelectedRelativeTimeChange: this.onSelectedRelativeTimeChange, onTimezoneChange: this.onSelectedTimezoneChange, onTimezoneInputClicked: this.displayInputWrapperContent, onTimezoneDropdownStateChange: this.onInternalDropdownsStateChange })), h("div", { key: 'cb531264b11aa24e1306aa68d40460c8735bc94a', class: { 'calendar-range': true, 'calendar-range--visible': this.timePickerView === ETimePickerView.AbsoluteTimePicker, 'calendar-range--full-view': this.timePickerView === ETimePickerView.FullView } }, h("kv-absolute-time-picker", { key: 'fe8b8776f384112ca803c79e17f8886ac22c2637', mode: EAbsoluteTimePickerMode.Range, headerTitle: this.getFormattedSelectedTime(), selectedDates: this.getAbsoluteRange(), relativeTimeConfig: this.getRelativeTimeInputConfig(), displayBackButton: this.timePickerView === ETimePickerView.AbsoluteTimePicker, onBackButtonClicked: this.onClickBack, onSelectedDatesChange: this.handleAbsoluteDatesChange, onRelativeTimeConfigReset: this.handleRelativeTimeConfigReset, onRelativeTimeConfigChange: this.handleAbsoluteDatesChange, calendarInputMinDate: this.getCalendarLimitDatesFormatted(this.calendarInputMinDate), calendarInputMaxDate: this.getCalendarLimitDatesFormatted(this.calendarInputMaxDate) }))), h("div", { key: '1be6724e2fc5b354e5106396fe10b9d557b7e024', class: "footer" }, h("div", { key: 'e240f86c537252f61b992c6e60e004491d1c4044', class: "toggle-wrapper" }, this.timePickerView !== ETimePickerView.AbsoluteTimePicker && (h("div", { key: '587d8319767058907904c32dbc1cbf1e6afb620d', class: "show-calendar-toggle" }, h("kv-switch-button", { key: '7b269be7102bb2151b9fcb85f49bfc4b6059117c', checked: this.showCalendar, size: EComponentSize.Small, onClick: this.onShowCalendarClick, disabled: this.calendarViewLocked }), h("div", { key: 'efe916b63c5c80efe600a2f2f5e9727c4f940fc3', class: "toggle-text" }, "Show Calendar")))), h("div", { key: '48e4c8c414b9317f18b3e782b8675ca05cb33879', class: "actions" }, h("kv-action-button-text", { key: 'e8163c4c46ebff9c4bf0f5263f862eba9c71d89f', type: EActionButtonType.Tertiary, size: EComponentSize.Small, text: "Cancel", onClickButton: this.onClickCancel }), h("kv-tooltip", { key: '59248031114fbb21c528106cbcccca1e4cbcaffa', text: this.getApplyButtonTooltipText(), position: ETooltipPosition.TopStart }, h("kv-action-button-text", { key: 'c38210a98bc7fad26f3dc1d88ea016f447a2368a', type: EActionButtonType.Primary, size: EComponentSize.Small, text: "Apply", disabled: this.isApplyButtonDisabled(), onClickButton: this.onClickApply })))))))); } static get watchers() { return { "selectedTimeOption": ["handleSelectTimeStateChange"], "showCalendar": ["handleShowCalendarChange"] }; } static get style() { return timePickerCss; } }, [256, "kv-time-picker", { "inputConfig": [16, "input-config"], "dropdownPositionOptions": [16, "dropdown-position-options"], "disabled": [516], "showCalendar": [516, "show-calendar"], "selectedTimeOption": [16, "selected-time-option"], "relativeTimePickerOptions": [16, "relative-time-picker-options"], "timezones": [16], "disableTimezoneSelection": [516, "disable-timezone-selection"], "displayCustomizeInterval": [516, "display-customize-interval"], "displayTimezoneDropdown": [516, "display-timezone-dropdown"], "calendarInputMinDate": [2, "calendar-input-min-date"], "calendarInputMaxDate": [2, "calendar-input-max-date"], "zIndex": [2, "z-index"], "tooltipPosition": [1, "tooltip-position"], "timePickerView": [32], "selectedTimeState": [32], "dropdownOpen": [32], "applyButtontooltipText": [32], "calendarViewLocked": [32], "timezoneSelectionContentVisible": [32], "internalDropdownsOpen": [32] }, undefined, { "selectedTimeOption": ["handleSelectTimeStateChange"], "showCalendar": ["handleShowCalendarChange"] }]); function defineCustomElement$1() { if (typeof customElements === "undefined") { return; } const components = ["kv-time-picker", "kv-absolute-time-picker", "kv-action-button", "kv-action-button-icon", "kv-action-button-text", "kv-badge", "kv-calendar", "kv-calendar-day", "kv-checkbox", "kv-date-time-input", "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-relative-time-picker", "kv-search", "kv-select", "kv-select-create-option", "kv-select-multi-options", "kv-select-option", "kv-select-shortcuts-label", "kv-single-select-dropdown", "kv-switch-button", "kv-text-field", "kv-time-picker-select-option", "kv-tooltip", "kv-tooltip-text", "kv-virtualized-list"]; components.forEach(tagName => { switch (tagName) { case "kv-time-picker": if (!customElements.get(tagName)) { customElements.define(tagName, KvTimePicker$1); } break; case "kv-absolute-time-picker": if (!customElements.get(tagName)) { defineCustomElement$z(); } break; case "kv-action-button": if (!customElements.get(tagName)) { defineCustomElement$y(); } break; case "kv-action-button-icon": if (!customElements.get(tagName)) { defineCustomElement$x(); } break; case "kv-action-button-text": if (!customElements.get(tagName)) { defineCustomElement$w(); } break; case "kv-badge": if (!customElements.get(tagName)) { defineCustomElement$v(); } break; case "kv-calendar": if (!customElements.get(tagName)) { defineCustomElement$u(); } break; case "kv-calendar-day": if (!customElements.get(tagName)) { defineCustomElement$t(); } break; case "kv-checkbox": if (!customElements.get(tagName)) { defineCustomElement$s(); } break; case "kv-date-time-input": if (!customElements.get(tagName)) { defineCustomElement$r(); } break; case "kv-dirty-dot": if (!customElements.get(tagName)) { defineCustomElement$q(); } break; case "kv-dropdown": if (!customElements.get(tagName)) { defineCustomElement$p(); } break; case "kv-dropdown-base": if (!customElements.get(tagName)) { defineCustomElement$o(); } break; case "kv-form-help-text": if (!customElements.get(tagName)) { defineCustomElement$n(); } break; case "kv-form-label": if (!customElements.get(tagName)) { defineCustomElement$m(); } break; case "kv-icon": if (!customElements.get(tagName)) { defineCustomElement$l(); } break; case "kv-illustration": if (!customElements.get(tagName)) { defineCustomElement$k(); } break; case "kv-illustration-message": if (!customElements.get(tagName)) { defineCustomElement$j(); } break; case "kv-input-wrapper": if (!customElements.get(tagName)) { defineCustomElement$i(); } break; case "kv-portal": if (!customElements.get(tagName)) { defineCustomElement$h(); } break; case "kv-radio": if (!customElements.get(tagName)) { defineCustomElement$g(); } break; case "kv-relative-time-picker": if (!customElements.get(tagName)) { defineCustomElement$f(); } break; case "kv-search": if (!customElements.get(tagName)) { defineCustomElement$e(); } break; case "kv-select": if (!customElements.get(tagName)) { defineCustomElement$d(); } break; case "kv-select-create-option": if (!customElements.get(tagName)) { defineCustomElement$c(); } break; case "kv-select-multi-options": if (!customElements.get(tagName)) { defineCustomElement$b(); } break; case "kv-select-option": if (!customElements.get(tagName)) { defineCustomElement$a(); } break; case "kv-select-shortcuts-label": if (!customElements.get(tagName)) { defineCustomElement$9(); } break; case "kv-single-select-dropdown": if (!customElements.get(tagName)) { defineCustomElement$8(); } break; case "kv-switch-button": if (!customElements.get(tagName)) { defineCustomElement$7(); } break; case "kv-text-field": if (!customElements.get(tagName)) { defineCustomElement$6(); } break; case "kv-time-picker-select-option": if (!customElements.get(tagName)) { defineCustomElement$5(); } break; case "kv-tooltip": if (!customElements.get(tagName)) { defineCustomElement$4(); } break; case "kv-tooltip-text": if (!customElements.get(tagName)) { defineCustomElement$3(); } break; case "kv-virtualized-list": if (!customElements.get(tagName)) { defineCustomElement$2(); } break; } }); } defineCustomElement$1(); const KvTimePicker = KvTimePicker$1; const defineCustomElement = defineCustomElement$1; export { KvTimePicker, defineCustomElement };