@kelvininc/ui-components
Version:
Kelvin UI Components
794 lines (793 loc) • 38.3 kB
JavaScript
import { Host, h } from "@stencil/core";
import { EActionButtonType } from "../action-button/action-button.types";
import { isEmpty, isNumber, merge } from "lodash-es";
import { APPLY_BUTTON_ERROR_TOOLTIP_TEXT, DEFAULT_SELECTED_TIME_KEY, DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS, DEFAULT_TIME_RANGE_PICKER_INPUT_CONFIG, FULL_RANGE_SIZE, TIME_PICKER_PORTAL_Z_INDEX } from "./time-picker.config";
import { ETimePickerView } from "./time-picker.types";
import { EAbsoluteTimePickerMode, EComponentSize, ETooltipPosition } from "../../types";
import { buildTimezoneByOffset, getDefaultTimezone, getTimezoneOffset, getTimezonesNames } from "../../utils/date/date.helper";
import { buildCustomIntervalTimeRange, buildTooltipText, createTimestampInTimezoneFromFormattedDate, getAbsoluteTimePickerRangeDates, getLast24HoursRange, getRelativeTimeInputText, getRelativeTimeLabel, getTimePickerEventPayload, getTimestampFromDateRange, hasRangeChanged, validateNewRange } from "./time-picker.helper";
import { CALENDAR_DATE_TIME_MASK, DATETIME_INPUT_MASK, DEFAULT_HEADER_TITLE } from "../absolute-time-picker/absolute-time-picker.config";
import dayjs from "dayjs";
import { CUSTOM_TIME_RANGE_KEY, DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS } from "../../utils/relative-time";
export class KvTimePicker {
constructor() {
/** @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 is() { return "kv-time-picker"; }
static get originalStyleUrls() {
return {
"$": ["time-picker.scss"]
};
}
static get styleUrls() {
return {
"$": ["time-picker.css"]
};
}
static get properties() {
return {
"inputConfig": {
"type": "unknown",
"attribute": "input-config",
"mutable": false,
"complexType": {
"original": "Partial<ITextField>",
"resolved": "{ type?: EInputFieldType; label?: string; icon?: EIconName; actionIcon?: EIconName; inputName?: string; examples?: string[]; placeholder?: string; maxLength?: number; minLength?: number; max?: string | number; min?: string | number; step?: string | number; size?: EComponentSize; inputDisabled?: boolean; inputRequired?: boolean; loading?: boolean; state?: EValidationState; helpText?: string | string[]; value?: string | number; valuePrefix?: string; badge?: string; inputReadonly?: boolean; forcedFocus?: boolean; tooltipConfig?: Partial<ITooltip>; useInputMask?: boolean; inputMaskRegex?: string; fitContent?: boolean; customStyle?: { [key: string]: string; }; isDirty?: boolean; hideBadge?: boolean; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ITextField": {
"location": "import",
"path": "../text-field/text-field.types",
"id": "src/components/text-field/text-field.types.ts::ITextField"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Configuration of the dropdown input"
},
"getter": false,
"setter": false,
"defaultValue": "{}"
},
"dropdownPositionOptions": {
"type": "unknown",
"attribute": "dropdown-position-options",
"mutable": false,
"complexType": {
"original": "Partial<ComputePositionConfig>",
"resolved": "{ strategy?: Strategy; placement?: Placement; middleware?: (false | { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<MiddlewareReturn>; })[]; platform?: Platform; }",
"references": {
"Partial": {
"location": "global",
"id": "global::Partial"
},
"ComputePositionConfig": {
"location": "import",
"path": "@floating-ui/dom",
"id": "../../node_modules/.pnpm/@floating-ui+dom@1.6.11/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::ComputePositionConfig"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Dropdown possible positions"
},
"getter": false,
"setter": false,
"defaultValue": "DEFAULT_TIME_RANGE_DROPDOWN_POSITION_OPTIONS"
},
"disabled": {
"type": "boolean",
"attribute": "disabled",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Defines if the dropdown is disabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"showCalendar": {
"type": "boolean",
"attribute": "show-calendar",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Determines if the show calendar toggle is enabled"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"selectedTimeOption": {
"type": "unknown",
"attribute": "selected-time-option",
"mutable": false,
"complexType": {
"original": "ITimePickerTimeState | ITimePickerTime",
"resolved": "ITimePickerTime | ITimePickerTimeState",
"references": {
"ITimePickerTimeState": {
"location": "import",
"path": "./time-picker.types",
"id": "src/components/time-picker/time-picker.types.ts::ITimePickerTimeState"
},
"ITimePickerTime": {
"location": "import",
"path": "./time-picker.types",
"id": "src/components/time-picker/time-picker.types.ts::ITimePickerTime"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Selected time key"
},
"getter": false,
"setter": false
},
"relativeTimePickerOptions": {
"type": "unknown",
"attribute": "relative-time-picker-options",
"mutable": false,
"complexType": {
"original": "IRelativeTimePickerOption[][]",
"resolved": "IRelativeTimePickerOption[][]",
"references": {
"IRelativeTimePickerOption": {
"location": "import",
"path": "../relative-time-picker/relative-time-picker.types",
"id": "src/components/relative-time-picker/relative-time-picker.types.ts::IRelativeTimePickerOption"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Relative time picker options"
},
"getter": false,
"setter": false,
"defaultValue": "DEFAULT_RELATIVE_TIME_OPTIONS_GROUPS"
},
"timezones": {
"type": "unknown",
"attribute": "timezones",
"mutable": false,
"complexType": {
"original": "ITimezoneOffset[]",
"resolved": "ITimezoneOffset[]",
"references": {
"ITimezoneOffset": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::ITimezoneOffset"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Timezones"
},
"getter": false,
"setter": false,
"defaultValue": "buildTimezoneByOffset(getTimezonesNames())"
},
"disableTimezoneSelection": {
"type": "boolean",
"attribute": "disable-timezone-selection",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Lets the timezone visible but doens't let the user change it"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "false"
},
"displayCustomizeInterval": {
"type": "boolean",
"attribute": "display-customize-interval",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Determines if the customize interval otion is visible"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"displayTimezoneDropdown": {
"type": "boolean",
"attribute": "display-timezone-dropdown",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Determines if the timezone dropdown is visible"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
},
"calendarInputMinDate": {
"type": "number",
"attribute": "calendar-input-min-date",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) calendar minimum date to be navigated"
},
"getter": false,
"setter": false,
"reflect": false
},
"calendarInputMaxDate": {
"type": "number",
"attribute": "calendar-input-max-date",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) calendar maximum date to be navigated"
},
"getter": false,
"setter": false,
"reflect": false
},
"zIndex": {
"type": "number",
"attribute": "z-index",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) The time picker's z-index (default: 9003)"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "TIME_PICKER_PORTAL_Z_INDEX"
},
"tooltipPosition": {
"type": "string",
"attribute": "tooltip-position",
"mutable": false,
"complexType": {
"original": "ETooltipPosition",
"resolved": "ETooltipPosition.Bottom | ETooltipPosition.BottomEnd | ETooltipPosition.BottomStart | ETooltipPosition.Left | ETooltipPosition.LeftEnd | ETooltipPosition.LeftStart | ETooltipPosition.Right | ETooltipPosition.RightEnd | ETooltipPosition.RightStart | ETooltipPosition.Top | ETooltipPosition.TopEnd | ETooltipPosition.TopStart",
"references": {
"ETooltipPosition": {
"location": "import",
"path": "../../types",
"id": "src/types.ts::ETooltipPosition"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Positioning of the tooltip"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "ETooltipPosition.TopStart"
}
};
}
static get states() {
return {
"timePickerView": {},
"selectedTimeState": {},
"dropdownOpen": {},
"applyButtontooltipText": {},
"calendarViewLocked": {},
"timezoneSelectionContentVisible": {},
"internalDropdownsOpen": {}
};
}
static get events() {
return [{
"method": "timeRangeChange",
"name": "timeRangeChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when time range changes"
},
"complexType": {
"original": "ITimePickerTime",
"resolved": "ITimePickerTime",
"references": {
"ITimePickerTime": {
"location": "import",
"path": "./time-picker.types",
"id": "src/components/time-picker/time-picker.types.ts::ITimePickerTime"
}
}
}
}, {
"method": "dropdownStateChange",
"name": "dropdownStateChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when dropdown state changes"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}, {
"method": "cancelClicked",
"name": "cancelClicked",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when cancel button is clicked"
},
"complexType": {
"original": "CustomEvent<MouseEvent>",
"resolved": "CustomEvent<MouseEvent>",
"references": {
"CustomEvent": {
"location": "global",
"id": "global::CustomEvent"
},
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "showCalendarStateChange",
"name": "showCalendarStateChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when show calendar button state changes"
},
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "selectedTimeOption",
"methodName": "handleSelectTimeStateChange"
}, {
"propName": "showCalendar",
"methodName": "handleShowCalendarChange"
}];
}
}