diff --git a/packages/devextreme/js/__internal/ui/calendar/calendar.ts b/packages/devextreme/js/__internal/ui/calendar/calendar.ts index b647afd107c5..0077942a2d4d 100644 --- a/packages/devextreme/js/__internal/ui/calendar/calendar.ts +++ b/packages/devextreme/js/__internal/ui/calendar/calendar.ts @@ -333,7 +333,6 @@ class Calendar< const cellElement = this._view._getContouredCell().get(0); event.target = cellElement; } - // @ts-expect-error ts-error this._saveValueChangeEvent(event); } this._setDateOption('value', value); diff --git a/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts b/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts index 84fbc4e594cf..08deb3051979 100644 --- a/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts +++ b/packages/devextreme/js/__internal/ui/color_box/m_color_box.ts @@ -1,10 +1,12 @@ -import Color from '@js/color'; import registerComponent from '@js/core/component_registrator'; import type { dxElementWrapper } from '@js/core/renderer'; import $ from '@js/core/renderer'; +import type { DeferredObj } from '@js/core/utils/deferred'; import type { Properties } from '@js/ui/color_box'; import type { OptionChanged } from '@ts/core/widget/types'; +import Color from '@ts/m_color'; import DropDownEditor from '@ts/ui/drop_down_editor/m_drop_down_editor'; +import type { ValueChangedEvent } from '@ts/ui/editor/editor'; import type { PopupProperties } from '../popup/m_popup'; import type Popup from '../popup/m_popup'; @@ -29,14 +31,21 @@ export const DX_ICON_COLOR_DISMISS = 'dx-icon-colordismiss'; const colorEditorPrototype = ColorView.prototype; const colorUtils = { - makeTransparentBackground: colorEditorPrototype._makeTransparentBackground.bind(colorEditorPrototype), + makeTransparentBackground: + colorEditorPrototype._makeTransparentBackground.bind(colorEditorPrototype), makeRgba: colorEditorPrototype._makeRgba.bind(colorEditorPrototype), }; export interface ColorBoxProperties extends Omit { +| 'onCopy' | 'onCut' +| 'onEnterKey' | 'onFocusIn' +| 'onFocusOut' | 'onInput' +| 'onKeyDown' | 'onKeyUp' | 'onPaste' +| 'onValueChanged' | 'validationMessagePosition' +| 'onContentReady' | 'onDisposing' +| 'onOptionChanged' | 'onInitialized'> { + buttonsLocation?: string; } class ColorBox extends DropDownEditor { @@ -55,17 +64,19 @@ class ColorBox extends DropDownEditor { _$colorBoxInputContainer!: dxElementWrapper; _supportedKeys(): Record boolean | undefined> { - // @ts-expect-error ts-error - const arrowHandler = function (e) { + const arrowHandler = (e: KeyboardEvent): boolean => { e.stopPropagation(); - if (this.option('opened')) { + const { opened } = this.option(); + if (opened) { e.preventDefault(); return true; } + return false; }; - const upArrowHandler = function (e) { - if (!this.option('opened')) { + const upArrowHandler = (e: KeyboardEvent): boolean => { + const { opened } = this.option(); + if (!opened) { e.preventDefault(); return false; } @@ -76,12 +87,13 @@ class ColorBox extends DropDownEditor { return true; }; - const downArrowHandler = function (e) { - if (!this.option('opened') && !e.altKey) { + const downArrowHandler = (e: KeyboardEvent): boolean => { + const { opened } = this.option(); + if (!opened && !e.altKey) { e.preventDefault(); return false; } - if (!this.option('opened') && e.altKey) { + if (!opened && e.altKey) { this._validatedOpening(); return false; } @@ -104,7 +116,7 @@ class ColorBox extends DropDownEditor { editAlphaChannel: false, applyValueMode: 'useButtons', keyStep: 1, - // @ts-expect-error ts-error + // @ts-expect-error fieldTemplate is deprecated --- IGNORE --- fieldTemplate: null, buttonsLocation: 'bottom after', }; @@ -112,10 +124,10 @@ class ColorBox extends DropDownEditor { _popupHidingHandler(): void { super._popupHidingHandler(); - const { applyValueMode } = this.option(); + const { applyValueMode, value } = this.option(); if (applyValueMode === 'useButtons') { - this._updateColorViewValue(this.option('value')); + this._updateColorViewValue(value); } } @@ -164,8 +176,8 @@ class ColorBox extends DropDownEditor { this._colorView = this._createComponent($colorView, ColorView, this._colorViewConfig()); } - _applyNewColor(value): void { - this.option('value', value); + _applyNewColor(newValue: string | null | undefined): void { + this.option('value', newValue); this._updateNoColorIndicator(); @@ -184,8 +196,6 @@ class ColorBox extends DropDownEditor { stylingMode, } = this.option(); - const that = this; - return { value, matchValue: value, @@ -194,36 +204,38 @@ class ColorBox extends DropDownEditor { focusStateEnabled, stylingMode, target: this._input(), - onEnterKeyPressed({ event }) { - that._colorViewEnterKeyPressed = true; - if (that._colorView.option('value') !== that.option('value')) { - that._saveValueChangeEvent(event); - that._applyNewColor(that._colorView.option('value')); - that.close(); + onEnterKeyPressed: (e: ValueChangedEvent): void => { + const { event } = e; + const { value: optionValue } = this.option(); + this._colorViewEnterKeyPressed = true; + if (this._colorView.option('value') !== optionValue) { + this._saveValueChangeEvent(event); + const { value: colorViewValue } = this._colorView.option(); + this._applyNewColor(colorViewValue); + this.close(); } }, - onValueChanged({ event, value, previousValue }) { - // @ts-expect-error ts-error - const instantlyMode = that.option('applyValueMode') === 'instantly'; - const isOldValue = colorUtils.makeRgba(value) === previousValue; - const changesApplied = instantlyMode || that._colorViewEnterKeyPressed; - const valueCleared = that._shouldSaveEmptyValue; + onValueChanged: ({ event, value: changedValue, previousValue }): void => { + const { applyValueMode: currentValueMode } = this.option(); + const isInstantlyMode = currentValueMode === 'instantly'; + const isOldValue = colorUtils.makeRgba(changedValue) === previousValue; + const isChangesApplied = isInstantlyMode || this._colorViewEnterKeyPressed; + const isValueCleared = this._shouldSaveEmptyValue; - if (isOldValue || !changesApplied || valueCleared) { + if (isOldValue || !isChangesApplied || isValueCleared) { return; } if (event) { - // @ts-expect-error ts-error - that._saveValueChangeEvent(event); + this._saveValueChangeEvent(event); } - that._applyNewColor(value); + this._applyNewColor(changedValue); }, }; } - _enterKeyHandler(e) { + _enterKeyHandler(e: KeyboardEvent): boolean | undefined { const newValue = this._input().val(); const { value, editAlphaChannel } = this.option(); const oldValue = value && editAlphaChannel ? colorUtils.makeRgba(value) : value; @@ -234,17 +246,16 @@ class ColorBox extends DropDownEditor { if (color.colorIsInvalid) { this._input().val(oldValue === null ? undefined : oldValue); - return; + return false; } - // @ts-expect-error ts-error if (newValue !== oldValue) { this._applyColorFromInput(newValue); this._saveValueChangeEvent(e); - this.option('value', this.option('editAlphaChannel') ? colorUtils.makeRgba(newValue) : newValue); + this.option('value', editAlphaChannel ? colorUtils.makeRgba(newValue) : newValue); } if (this._colorView) { - const colorViewValue = this._colorView.option('value'); + const { value: colorViewValue } = this._colorView.option(); if (value !== colorViewValue) { this._saveValueChangeEvent(e); @@ -256,9 +267,10 @@ class ColorBox extends DropDownEditor { return false; } - _applyButtonHandler(e): void { + _applyButtonHandler(e: ValueChangedEvent): void { this._saveValueChangeEvent(e.event); - this._applyNewColor(this._colorView.option('value')); + const { value } = this._colorView.option(); + this._applyNewColor(value); super._applyButtonHandler(); } @@ -269,7 +281,8 @@ class ColorBox extends DropDownEditor { super._cancelButtonHandler(); } - _getKeyboardListeners() { + // needed to be typed in widget.ts + _getKeyboardListeners(): any[] { return super._getKeyboardListeners().concat([this._colorView]); } @@ -328,7 +341,7 @@ class ColorBox extends DropDownEditor { this._updateNoColorIndicator(); } - _renderValue() { + _renderValue(): DeferredObj { const { value, editAlphaChannel } = this.option(); const shouldConvertToColor = value && editAlphaChannel; const text = shouldConvertToColor ? colorUtils.makeRgba(value) : value; @@ -340,13 +353,12 @@ class ColorBox extends DropDownEditor { _resetInputValue(): void { const $input = this._input(); - const value = this.option('value'); - // @ts-expect-error ts-error - $input.val(value); + const { value } = this.option(); + $input.val(value === null ? undefined : value); this._updateColorViewValue(value); } - _updateColorViewValue(value): void { + _updateColorViewValue(value: string | null | undefined): void { if (this._colorView) { this._colorView.option({ value, @@ -355,7 +367,7 @@ class ColorBox extends DropDownEditor { } } - _valueChangeEventHandler(e): void { + _valueChangeEventHandler(e: ValueChangedEvent): void { let value = this._input().val(); if (value) { @@ -366,13 +378,13 @@ class ColorBox extends DropDownEditor { super._valueChangeEventHandler(e, value); } - _applyColorFromInput(value) { - const { editAlphaChannel } = this.option(); + _applyColorFromInput(value: string): string { + const { editAlphaChannel, value: optionValue } = this.option(); const newColor = new Color(value); if (newColor.colorIsInvalid) { this._resetInputValue(); - return this.option('value'); + return optionValue ?? ''; } if (editAlphaChannel) { diff --git a/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts b/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts index 85529011b12d..d716557dd2cc 100644 --- a/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts +++ b/packages/devextreme/js/__internal/ui/color_box/m_color_view.ts @@ -1,24 +1,25 @@ -import Color from '@js/color'; import type { ApplyValueMode } from '@js/common'; -import { locate, move } from '@js/common/core/animation/translator'; -import { name as clickEventName } from '@js/common/core/events/click'; -import eventsEngine from '@js/common/core/events/core/events_engine'; -import { isCommandKeyPressed } from '@js/common/core/events/utils/index'; -import messageLocalization from '@js/common/core/localization/message'; import registerComponent from '@js/core/component_registrator'; -import devices from '@js/core/devices'; -import Guid from '@js/core/guid'; import type { DefaultOptionsRule } from '@js/core/options/utils'; import type { dxElementWrapper } from '@js/core/renderer'; import $ from '@js/core/renderer'; -import { extend } from '@js/core/utils/extend'; -import { getHeight, getOuterHeight, getWidth } from '@js/core/utils/size'; -import Draggable from '@js/ui/draggable'; +import { locate, move } from '@ts/common/core/animation/translator'; +import messageLocalization from '@ts/core/localization/message'; +import devices from '@ts/core/m_devices'; +import { Guid } from '@ts/core/m_guid'; +import { extend } from '@ts/core/utils/m_extend'; +import { getHeight, getOuterHeight, getWidth } from '@ts/core/utils/m_size'; import type { OptionChanged } from '@ts/core/widget/types'; import type { SupportedKeys } from '@ts/core/widget/widget'; -import type { EditorProperties } from '@ts/ui/editor/editor'; +import eventsEngine from '@ts/events/core/m_events_engine'; +import { name as clickEventName } from '@ts/events/m_click'; +import { isCommandKeyPressed } from '@ts/events/utils/index'; +import Color from '@ts/m_color'; +import Draggable from '@ts/m_draggable'; +import type { EditorProperties, ValueChangedEvent } from '@ts/ui/editor/editor'; import Editor from '@ts/ui/editor/editor'; import NumberBox from '@ts/ui/number_box/m_number_box'; +import { WIDGET_CLASS as NUMBERBOX_CLASS } from '@ts/ui/number_box/m_number_box.base'; import TextBox from '@ts/ui/text_box/m_text_box'; const COLOR_VIEW_CLASS = 'dx-colorview'; @@ -64,9 +65,15 @@ const TEXT_EDITOR_INPUT = 'dx-texteditor-input'; const BLACK_COLOR = '#000000'; +interface PaletteHandlePosition { + top: number; left: number; +} + export interface ColorViewProperties extends EditorProperties { keyStep?: number; + value?: string | null; + matchValue?: string | null; editAlphaChannel?: boolean; @@ -93,6 +100,7 @@ class ColorView extends Editor { _updateByDrag?: boolean; + // need typings and correct class in m_color.ts _currentColor!: any; _isTopColorHue?: boolean; @@ -138,22 +146,30 @@ class ColorView extends Editor { _onEnterKeyPressedAction?: (event: Record) => void; _supportedKeys(): SupportedKeys { - const isRTL = this.option('rtlEnabled'); + const { rtlEnabled: isRTL } = this.option(); - const that = this; - const getHorizontalPaletteStep = function (e) { - let step = 100 / that._paletteWidth; + const getHorizontalPaletteStep = (e: KeyboardEvent): number => { + let step = 100 / this._paletteWidth; if (e.shiftKey) { - const { keyStep } = that.option(); - // @ts-expect-error ts-error - step *= keyStep; + const { keyStep } = this.option(); + step *= keyStep ?? 1; } step = step > 1 ? step : 1; return Math.round(step); }; - const updateHorizontalPaletteValue = function (step) { - let value = that._currentColor.hsv.s + step; + + const updatePaletteValue = (): void => { + this._placePaletteHandle(); + this._updateColorFromHsv( + this._currentColor.hsv.h, + this._currentColor.hsv.s, + this._currentColor.hsv.v, + ); + }; + + const updateHorizontalPaletteValue = (step: number): void => { + let value = this._currentColor.hsv.s + step; if (value > 100) { value = 100; @@ -161,22 +177,21 @@ class ColorView extends Editor { value = 0; } - that._currentColor.hsv.s = value; + this._currentColor.hsv.s = value; updatePaletteValue(); }; - const getVerticalPaletteStep = function (e) { - let step = 100 / that._paletteHeight; + const getVerticalPaletteStep = (e: KeyboardEvent): number => { + let step = 100 / this._paletteHeight; if (e.shiftKey) { - const { keyStep } = that.option(); - // @ts-expect-error ts-error - step *= keyStep; + const { keyStep } = this.option(); + step *= keyStep ?? 1; } step = step > 1 ? step : 1; return Math.round(step); }; - const updateVerticalPaletteValue = function (step) { - let value = that._currentColor.hsv.v + step; + const updateVerticalPaletteValue = (step: number): void => { + let value = this._currentColor.hsv.v + step; if (value > 100) { value = 100; @@ -184,51 +199,43 @@ class ColorView extends Editor { value = 0; } - that._currentColor.hsv.v = value; + this._currentColor.hsv.v = value; updatePaletteValue(); }; - function updatePaletteValue(): void { - that._placePaletteHandle(); - that._updateColorFromHsv( - that._currentColor.hsv.h, - that._currentColor.hsv.s, - that._currentColor.hsv.v, - ); - } - const getHueScaleStep = function (e) { - let step = 360 / (that._hueScaleWrapperHeight - that._hueScaleHandleHeight); + const getHueScaleStep = (e: KeyboardEvent): number => { + let step = 360 / (this._hueScaleWrapperHeight - this._hueScaleHandleHeight); if (e.shiftKey) { - const { keyStep } = that.option(); - // @ts-expect-error ts-error - step *= keyStep; + const { keyStep } = this.option(); + step *= keyStep ?? 1; } step = step > 1 ? step : 1; return step; }; - const updateHueScaleValue = function (step) { - that._currentColor.hsv.h += step; - that._placeHueScaleHandle(); - const handleLocation = locate(that._$hueScaleHandle); - that._updateColorHue(handleLocation.top + that._hueScaleHandleHeight / 2); + const updateHueScaleValue = (step: number): void => { + this._currentColor.hsv.h += step; + this._placeHueScaleHandle(); + const handleLocation = locate(this._$hueScaleHandle); + this._updateColorHue(handleLocation.top + this._hueScaleHandleHeight / 2); }; - const getAlphaScaleStep = function (e) { - let step = 1 / that._alphaChannelScaleWorkWidth; + const getAlphaScaleStep = (e: KeyboardEvent): number => { + let step = 1 / this._alphaChannelScaleWorkWidth; if (e.shiftKey) { - const { keyStep } = that.option(); - // @ts-expect-error ts-error - step *= keyStep; + const { keyStep } = this.option(); + step *= keyStep ?? 1; } step = step > 0.01 ? step : 0.01; step = isRTL ? -step : step; return step; }; - const updateAlphaScaleValue = function (step) { - that._currentColor.a += step; - that._placeAlphaChannelHandle(); - const handleLocation = locate(that._$alphaChannelHandle); - that._calculateColorTransparencyByScaleWidth(handleLocation.left + that._alphaChannelHandleWidth / 2); + const updateAlphaScaleValue = (step: number): void => { + this._currentColor.a += step; + this._placeAlphaChannelHandle(); + const handleLocation = locate(this._$alphaChannelHandle); + this._calculateColorTransparencyByScaleWidth( + handleLocation.left + this._alphaChannelHandleWidth / 2, + ); }; return { @@ -266,8 +273,9 @@ class ColorView extends Editor { rightArrow(e): void { e.preventDefault(); e.stopPropagation(); + const { editAlphaChannel } = this.option(); if (isCommandKeyPressed(e)) { - if (isRTL ? this._currentColor.a < 1 : this._currentColor.a > 0 && this.option('editAlphaChannel')) { + if (isRTL ? this._currentColor.a < 1 : this._currentColor.a > 0 && editAlphaChannel) { this._saveValueChangeEvent(e); updateAlphaScaleValue(-getAlphaScaleStep(e)); } @@ -279,8 +287,9 @@ class ColorView extends Editor { leftArrow(e): void { e.preventDefault(); e.stopPropagation(); + const { editAlphaChannel } = this.option(); if (isCommandKeyPressed(e)) { - if (isRTL ? this._currentColor.a > 0 : this._currentColor.a < 1 && this.option('editAlphaChannel')) { + if (isRTL ? this._currentColor.a > 0 : this._currentColor.a < 1 && editAlphaChannel) { this._saveValueChangeEvent(e); updateAlphaScaleValue(getAlphaScaleStep(e)); } @@ -289,7 +298,7 @@ class ColorView extends Editor { updateHorizontalPaletteValue(-getHorizontalPaletteStep(e)); } }, - enter(e): void { + enter: (e: KeyboardEvent): void => { this._fireEnterKeyPressed(e); }, }; @@ -330,7 +339,7 @@ class ColorView extends Editor { this._onEnterKeyPressedAction = this._createActionByOption('onEnterKeyPressed'); } - _fireEnterKeyPressed(e) { + _fireEnterKeyPressed(e: KeyboardEvent): void { if (!this._onEnterKeyPressedAction) return; this._onEnterKeyPressedAction({ event: e, @@ -338,11 +347,12 @@ class ColorView extends Editor { } _initColorAndOpacity(): void { - this._setCurrentColor(this.option('value')); + const { value } = this.option(); + this._setCurrentColor(value); } - _setCurrentColor(value): void { - value = value || BLACK_COLOR; + _setCurrentColor(currentValue: string | null | undefined): void { + const value = currentValue ?? BLACK_COLOR; const newColor = new Color(value); if (!newColor.colorIsInvalid) { if (!this._currentColor || this._makeRgba(this._currentColor) !== this._makeRgba(newColor)) { @@ -359,14 +369,14 @@ class ColorView extends Editor { } } - _setBaseColor(value): void { - const color = value || BLACK_COLOR; + _setBaseColor(baseValue: string | null | undefined): void { + const color = baseValue ?? BLACK_COLOR; const newColor = new Color(color); if (!newColor.colorIsInvalid) { const { matchValue } = this.option(); - const isBaseColorChanged = this._makeRgba(matchValue !== this._makeRgba(newColor)); + const isBaseColorChanged = matchValue !== this._makeRgba(newColor); if (isBaseColorChanged) { if (this._$baseColor) { this._makeTransparentBackground(this._$baseColor, newColor); @@ -391,7 +401,7 @@ class ColorView extends Editor { this._renderAlphaChannelElements(); } - _makeTransparentBackground($el, color): void { + _makeTransparentBackground($el: dxElementWrapper, color: any): void { if (!(color instanceof Color)) { color = new Color(color); } @@ -399,7 +409,7 @@ class ColorView extends Editor { $el.css('backgroundColor', this._makeRgba(color)); } - _makeRgba(color): string { + _makeRgba(color: any): string { if (!(color instanceof Color)) { color = new Color(color); } @@ -407,7 +417,7 @@ class ColorView extends Editor { return `rgba(${[color.r, color.g, color.b, color.a].join(', ')})`; } - _renderColorPickerContainer() { + _renderColorPickerContainer(): void { const $parent = this.$element(); this._$colorPickerContainer = $('
').addClass(COLOR_VIEW_CONTAINER_CLASS) .appendTo($parent); @@ -415,11 +425,11 @@ class ColorView extends Editor { this._renderHtmlRows(); } - // eslint-disable-next-line @typescript-eslint/no-unused-vars - _renderHtmlRows(updatedOption?): void { + _renderHtmlRows(): void { + const { editAlphaChannel } = this.option(); const $renderedRows = this._$colorPickerContainer.find(`.${COLOR_VIEW_ROW_CLASS}`); const renderedRowsCount = $renderedRows.length; - const rowCount = this.option('editAlphaChannel') ? 2 : 1; + const rowCount = editAlphaChannel ? 2 : 1; let delta = renderedRowsCount - rowCount; if (delta > 0) { @@ -427,10 +437,9 @@ class ColorView extends Editor { } if (delta < 0) { delta = Math.abs(delta); - const rows = []; + const rows: dxElementWrapper[] = []; let i; for (i = 0; i < delta; i++) { - // @ts-expect-error rows.push($('
').addClass(COLOR_VIEW_ROW_CLASS)); } @@ -439,21 +448,28 @@ class ColorView extends Editor { $renderedRows.eq(0).after(rows[i]); } } else { - // @ts-expect-error ts-error this._$colorPickerContainer.append(rows); } } } - _renderHtmlCellInsideRow(index, $rowParent, additionalClass?): dxElementWrapper { + _renderHtmlCellInsideRow( + index: number, + $rowParent: dxElementWrapper, + additionalClass?: string, + ): dxElementWrapper { return $('
') .addClass(COLOR_VIEW_CELL_CLASS) - .addClass(additionalClass) + .addClass(additionalClass ?? '') .appendTo($rowParent.find(`.${COLOR_VIEW_ROW_CLASS}`).eq(index)); } _renderPalette(): void { - const $paletteCell = this._renderHtmlCellInsideRow(0, this._$colorPickerContainer, COLOR_VIEW_PALETTE_CELL_CLASS); + const $paletteCell = this._renderHtmlCellInsideRow( + 0, + this._$colorPickerContainer, + COLOR_VIEW_PALETTE_CELL_CLASS, + ); const $paletteGradientWhite = $('
').addClass([COLOR_VIEW_PALETTE_GRADIENT_CLASS, COLOR_VIEW_PALETTE_GRADIENT_WHITE_CLASS].join(' ')); const $paletteGradientBlack = $('
').addClass([COLOR_VIEW_PALETTE_GRADIENT_CLASS, COLOR_VIEW_PALETTE_GRADIENT_BLACK_CLASS].join(' ')); @@ -466,11 +482,11 @@ class ColorView extends Editor { this._paletteWidth = getWidth(this._$palette); this._renderPaletteHandle(); - // @ts-expect-error ts-error this._$palette.append([$paletteGradientWhite, $paletteGradientBlack]); } _renderPaletteHandle(): void { + const { target } = this.option(); this._$paletteHandle = $('
') .addClass(COLOR_VIEW_PALETTE_HANDLE_CLASS) .appendTo(this._$palette); @@ -482,15 +498,14 @@ class ColorView extends Editor { }; this.setAria(handleAria, this._$paletteHandle); - this.setAria('activedescendant', ariaId, this.option('target')); + this.setAria('activedescendant', ariaId, target); this._createComponent(this._$paletteHandle, Draggable, { contentTemplate: null, + // @ts-expect-error need to fix type for Draggable boundary option boundary: this._$palette, allowMoveByClick: true, - boundOffset: function () { - return -this._paletteHandleHeight / 2; - }.bind(this), + boundOffset: () => -this._paletteHandleHeight / 2, onDragMove: ({ event }) => { const paletteHandlePosition = locate(this._$paletteHandle); this._updateByDrag = true; @@ -511,22 +526,28 @@ class ColorView extends Editor { _placePaletteHandle(): void { move(this._$paletteHandle, { - left: Math.round(this._paletteWidth * this._currentColor.hsv.s / 100 - this._paletteHandleWidth / 2), - top: Math.round(this._paletteHeight - (this._paletteHeight * this._currentColor.hsv.v / 100) - this._paletteHandleHeight / 2), + left: Math.round( + (this._paletteWidth * this._currentColor.hsv.s) / 100 - this._paletteHandleWidth / 2, + ), + top: Math.round( + this._paletteHeight + - ((this._paletteHeight * this._currentColor.hsv.v) / 100) + - this._paletteHandleHeight / 2, + ), }); } - _calculateColorValue(paletteHandlePosition): number { + _calculateColorValue(paletteHandlePosition: PaletteHandlePosition): number { const value = Math.floor(paletteHandlePosition.top + this._paletteHandleHeight / 2); return 100 - Math.round(value * 100 / this._paletteHeight); } - _calculateColorSaturation(paletteHandlePosition): number { + _calculateColorSaturation(paletteHandlePosition: PaletteHandlePosition): number { const saturation = Math.floor(paletteHandlePosition.left + this._paletteHandleWidth / 2); return Math.round(saturation * 100 / this._paletteWidth); } - _updateColorFromHsv(hue, saturation, value): void { + _updateColorFromHsv(hue: number, saturation: number, value: number): void { const { a } = this._currentColor; this._currentColor = new Color(`hsv(${[hue, saturation, value].join(',')})`); this._currentColor.a = a; @@ -535,7 +556,11 @@ class ColorView extends Editor { } _renderHueScale(): void { - const $hueScaleCell = this._renderHtmlCellInsideRow(0, this._$colorPickerContainer, COLOR_VIEW_HUE_SCALE_CELL_CLASS); + const $hueScaleCell = this._renderHtmlCellInsideRow( + 0, + this._$colorPickerContainer, + COLOR_VIEW_HUE_SCALE_CELL_CLASS, + ); this._$hueScaleWrapper = $('
') .addClass(COLOR_VIEW_HUE_SCALE_WRAPPER_CLASS) @@ -552,21 +577,23 @@ class ColorView extends Editor { } _renderHueScaleHandle(): void { - this._$hueScaleHandle = $('
') - .addClass(COLOR_VIEW_HUE_SCALE_HANDLE_CLASS) - // @ts-expect-error ts-error - .appendTo(this._$hueScaleWrapper); - this._createComponent(this._$hueScaleHandle, Draggable, { - contentTemplate: null, - boundary: this._$hueScaleWrapper, - allowMoveByClick: true, - dragDirection: 'vertical', - onDragMove: ({ event }) => { - this._updateByDrag = true; - this._saveValueChangeEvent(event); - this._updateColorHue(locate(this._$hueScaleHandle).top + this._hueScaleHandleHeight / 2); - }, - }); + if (this._$hueScaleWrapper !== undefined) { + this._$hueScaleHandle = $('
') + .addClass(COLOR_VIEW_HUE_SCALE_HANDLE_CLASS) + .appendTo(this._$hueScaleWrapper); + this._createComponent(this._$hueScaleHandle, Draggable, { + contentTemplate: null, + // @ts-expect-error need to fix type for Draggable boundary option + boundary: this._$hueScaleWrapper, + allowMoveByClick: true, + dragDirection: 'vertical', + onDragMove: ({ event }) => { + this._updateByDrag = true; + this._saveValueChangeEvent(event); + this._updateColorHue(locate(this._$hueScaleHandle).top + this._hueScaleHandleHeight / 2); + }, + }); + } this._hueScaleHandleHeight = getHeight(this._$hueScaleHandle); @@ -588,8 +615,11 @@ class ColorView extends Editor { move(this._$hueScaleHandle, { top: Math.round(top) }); } - _updateColorHue(handlePosition): void { - let hue = 360 - Math.round((handlePosition - this._hueScaleHandleHeight / 2) * 360 / (this._hueScaleWrapperHeight - this._hueScaleHandleHeight)); + _updateColorHue(handlePosition: number): void { + let hue = 360 - Math.round( + ((handlePosition - this._hueScaleHandleHeight / 2) * 360) + / (this._hueScaleWrapperHeight - this._hueScaleHandleHeight), + ); const saturation = this._currentColor.hsv.s; const value = this._currentColor.hsv.v; @@ -620,6 +650,7 @@ class ColorView extends Editor { } _renderColorsPreview(): void { + const { matchValue } = this.option(); const $colorsPreviewContainer = $('
') .addClass(COLOR_VIEW_COLOR_PREVIEW_CONTAINER_CLASS) .appendTo(this._$controlsContainer); @@ -631,15 +662,15 @@ class ColorView extends Editor { this._$currentColor = $('
').addClass([COLOR_VIEW_COLOR_PREVIEW, COLOR_VIEW_COLOR_PREVIEW_COLOR_NEW].join(' ')); this._$baseColor = $('
').addClass([COLOR_VIEW_COLOR_PREVIEW, COLOR_VIEW_COLOR_PREVIEW_COLOR_CURRENT].join(' ')); - this._makeTransparentBackground(this._$baseColor, this.option('matchValue')); + this._makeTransparentBackground(this._$baseColor, matchValue); this._makeTransparentBackground(this._$currentColor, this._currentColor); - // @ts-expect-error $colorsPreviewContainerInner.append([this._$baseColor, this._$currentColor]); } - _renderAlphaChannelElements() { - if (this.option('editAlphaChannel')) { + _renderAlphaChannelElements():void { + const { editAlphaChannel } = this.option(); + if (editAlphaChannel) { this._$colorPickerContainer .find(`.${COLOR_VIEW_ROW_CLASS}`) .eq(1) @@ -678,16 +709,12 @@ class ColorView extends Editor { }), ]; - // @ts-expect-error ts-error this._$controlsContainer.append(this._rgbInputsWithLabels); this._rgbInputs = [ - // @ts-expect-error ts-error - this._rgbInputsWithLabels[0].find('.dx-numberbox').dxNumberBox('instance'), - // @ts-expect-error ts-error - this._rgbInputsWithLabels[1].find('.dx-numberbox').dxNumberBox('instance'), - // @ts-expect-error ts-error - this._rgbInputsWithLabels[2].find('.dx-numberbox').dxNumberBox('instance'), + NumberBox.getInstance(this._rgbInputsWithLabels[0].find(`.${NUMBERBOX_CLASS}`)), + NumberBox.getInstance(this._rgbInputsWithLabels[1].find(`.${NUMBERBOX_CLASS}`)), + NumberBox.getInstance(this._rgbInputsWithLabels[2].find(`.${NUMBERBOX_CLASS}`)), ]; } @@ -703,24 +730,24 @@ class ColorView extends Editor { e.preventDefault(); }); - const { editorType } = options; + const { editorType: EditorConstructor } = options; + const { stylingMode } = this.option(); const editorOptions = extend({ value: options.value, onValueChanged: options.onValueChanged, onKeyboardHandled: (opts) => this._keyboardHandler(opts), }, { - stylingMode: this.option('stylingMode'), + stylingMode, }); - if (editorType === NumberBox) { + if (EditorConstructor === NumberBox) { editorOptions.min = options.min || 0; editorOptions.max = options.max || 255; editorOptions.step = options.step || 1; } - // eslint-disable-next-line new-cap - const editor = new editorType($editor, editorOptions); + const editor = new EditorConstructor($editor, editorOptions); editor.registerKeyHandler('enter', (e) => { this._fireEnterKeyPressed(e); @@ -760,7 +787,11 @@ class ColorView extends Editor { } _renderAlphaChannelScale(): void { - const $alphaChannelScaleCell = this._renderHtmlCellInsideRow(1, this._$colorPickerContainer, COLOR_VIEW_ALPHA_CHANNEL_CELL_CLASS); + const $alphaChannelScaleCell = this._renderHtmlCellInsideRow( + 1, + this._$colorPickerContainer, + COLOR_VIEW_ALPHA_CHANNEL_CELL_CLASS, + ); const $alphaChannelBorder = $('
') .addClass(COLOR_VIEW_ALPHA_CHANNEL_BORDER_CLASS) .appendTo($alphaChannelScaleCell); @@ -776,10 +807,10 @@ class ColorView extends Editor { this._renderAlphaChannelHandle($alphaChannelScaleCell); } - _makeCSSLinearGradient($el): void { + _makeCSSLinearGradient($el: dxElementWrapper): void { + const { rtlEnabled } = this.option(); const color = this._currentColor; const colorAsRgb = `${color.r},${color.g},${color.b}`; - const rtlEnabled = this.option('rtlEnabled'); const startColor = `rgba(${colorAsRgb}, ${rtlEnabled ? '1' : '0'})`; const finishColor = `rgba(${colorAsRgb}, ${rtlEnabled ? '0' : '1'})`; const backgroundImage = `linear-gradient(-90deg, ${startColor}, ${finishColor})`; @@ -788,42 +819,41 @@ class ColorView extends Editor { } _renderAlphaChannelInput(): void { - const that = this; const $alphaChannelInputCell = this._renderHtmlCellInsideRow(1, this._$colorPickerContainer); - that._alphaChannelInput = this._renderEditorWithLabel({ + const editorWithLabel = this._renderEditorWithLabel({ editorType: NumberBox, value: this._currentColor.a, max: 1, step: 0.1, - onValueChanged(args) { + onValueChanged: (args) => { let { value } = args; - value = that._currentColor.isValidAlpha(value) ? value : that._currentColor.a; - args.event && that._saveValueChangeEvent(args.event); - that._updateColorTransparency(value); - that._placeAlphaChannelHandle(); + value = this._currentColor.isValidAlpha(value) ? value : this._currentColor.a; + args.event && this._saveValueChangeEvent(args.event); + this._updateColorTransparency(value); + this._placeAlphaChannelHandle(); }, labelClass: COLOR_VIEW_ALPHA_CHANNEL_LABEL_CLASS, labelText: 'Alpha', labelAriaText: messageLocalization.format('dxColorView-ariaAlpha'), }) - .appendTo($alphaChannelInputCell) - .find('.dx-numberbox') - // @ts-expect-error ts-error - .dxNumberBox('instance'); + .appendTo($alphaChannelInputCell); + + this._alphaChannelInput = NumberBox.getInstance(editorWithLabel.find(`.${NUMBERBOX_CLASS}`)); } - _updateColorTransparency(transparency): void { + _updateColorTransparency(transparency: number): void { this._currentColor.a = transparency; this.applyColor(); } - _renderAlphaChannelHandle($parent): void { + _renderAlphaChannelHandle($parent: dxElementWrapper): void { this._$alphaChannelHandle = $('
') .addClass(COLOR_VIEW_ALPHA_CHANNEL_HANDLE_CLASS) .appendTo($parent); this._createComponent(this._$alphaChannelHandle, Draggable, { contentTemplate: null, + // @ts-expect-error need to fix type for Draggable boundary: $parent, allowMoveByClick: true, dragDirection: 'horizontal', @@ -843,17 +873,17 @@ class ColorView extends Editor { this._placeAlphaChannelHandle(); } - _calculateColorTransparencyByScaleWidth(handlePosition) { - let transparency = (handlePosition - this._alphaChannelHandleWidth / 2) / this._alphaChannelScaleWorkWidth; - const rtlEnabled = this.option('rtlEnabled'); + _calculateColorTransparencyByScaleWidth(handlePosition: number): void { + let transparency = (handlePosition - this._alphaChannelHandleWidth / 2) + / this._alphaChannelScaleWorkWidth; + const { rtlEnabled } = this.option(); transparency = rtlEnabled ? transparency : 1 - transparency; if (handlePosition >= (this._alphaChannelScaleWorkWidth + this._alphaChannelHandleWidth / 2)) { transparency = rtlEnabled ? 1 : 0; } else if (transparency < 1) { - // @ts-expect-error ts-error - transparency = transparency.toFixed(2); + transparency = parseFloat(transparency.toFixed(2)); } const previousTransparency = this._alphaChannelInput.option('value'); @@ -869,6 +899,7 @@ class ColorView extends Editor { _placeAlphaChannelHandle(): void { let left = this._alphaChannelScaleWorkWidth * (1 - this._currentColor.a); + const { rtlEnabled } = this.option(); if (left < 0) { left = 0; @@ -878,14 +909,17 @@ class ColorView extends Editor { } move(this._$alphaChannelHandle, { - left: this.option('rtlEnabled') ? this._alphaChannelScaleWorkWidth - left : left, + left: rtlEnabled ? this._alphaChannelScaleWorkWidth - left : left, }); } applyColor(): void { - const previousValue = this.option('value'); - const colorValue = this.option('editAlphaChannel') ? this._makeRgba(this._currentColor) : this._currentColor.toHex(); - this._makeTransparentBackground(this._$currentColor, this._currentColor); + const { value: previousValue, editAlphaChannel } = this.option(); + const colorValue = editAlphaChannel + ? this._makeRgba(this._currentColor) : this._currentColor.toHex(); + if (this._$currentColor) { + this._makeTransparentBackground(this._$currentColor, this._currentColor); + } if (colorValue === previousValue) { this._updateByDrag = false; @@ -899,13 +933,12 @@ class ColorView extends Editor { this._refreshMarkup(); } - _updateColor(isHex, args): void { + _updateColor(isHex: boolean, args: ValueChangedEvent): void { let rgba; - let newColor; + let newColor = ''; if (isHex) { - // eslint-disable-next-line @typescript-eslint/no-base-to-string - newColor = this._validateHex(`#${this._hexInput.option('value')}`); + newColor = this._validateHex(`#${this._hexInput.option('value') as string}`); } else { rgba = this._validateRgb(); if (this._alphaChannelInput) { @@ -924,22 +957,22 @@ class ColorView extends Editor { } } - _validateHex(hex) { - return this._currentColor.isValidHex(hex) ? hex : this._currentColor.toHex(); + _validateHex(hex: string): string { + return this._currentColor.isValidHex(hex) ? hex : this._currentColor.toHex() as string; } _validateRgb(): number[] { - let r = this._rgbInputs[0].option('value'); - let g = this._rgbInputs[1].option('value'); - let b = this._rgbInputs[2].option('value'); + let { value: r } = this._rgbInputs[0].option(); + let { value: g } = this._rgbInputs[1].option(); + let { value: b } = this._rgbInputs[2].option(); if (!this._currentColor.isValidRGB(r, g, b)) { r = this._currentColor.r; g = this._currentColor.g; b = this._currentColor.b; } - // @ts-expect-error ts-error - return [r, g, b]; + + return [r ?? 0, g ?? 0, b ?? 0]; } _refreshMarkup(): void { @@ -954,6 +987,7 @@ class ColorView extends Editor { } _updateColorParamsAndColorPreview(): void { + const { editAlphaChannel } = this.option(); this._suppressEditorsValueUpdating = true; this._hexInput.option('value', this._currentColor.toHex().replace('#', '')); this._rgbInputs[0].option('value', this._currentColor.r); @@ -961,8 +995,8 @@ class ColorView extends Editor { this._rgbInputs[2].option('value', this._currentColor.b); this._suppressEditorsValueUpdating = false; - if (this.option('editAlphaChannel')) { - this._makeCSSLinearGradient.call(this, this._$alphaChannelScale); + if (editAlphaChannel && this._$alphaChannelScale) { + this._makeCSSLinearGradient(this._$alphaChannelScale); this._alphaChannelInput.option('value', this._currentColor.a); } } @@ -978,7 +1012,7 @@ class ColorView extends Editor { } this._updateByDrag = false; - super._optionChanged({ ...args, value: this.option('value') }); + super._optionChanged({ ...args, value: this.option('value') as string | null }); break; case 'matchValue': this._setBaseColor(value); @@ -988,7 +1022,7 @@ class ColorView extends Editor { break; case 'editAlphaChannel': if (this._$colorPickerContainer) { - this._renderHtmlRows('editAlphaChannel'); + this._renderHtmlRows(); this._renderAlphaChannelElements(); } break; diff --git a/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts b/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts index e4eff9a6673f..8ba99098827f 100644 --- a/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts +++ b/packages/devextreme/js/__internal/ui/date_box/date_box.base.ts @@ -824,7 +824,6 @@ class DateBox extends DropDownEditor { const isValueChanged = this._isValueChanged(value); if (isValueChanged && dxEvent) { - // @ts-expect-error editor's ValueChangedEvent should be extended this._saveValueChangeEvent(dxEvent); } diff --git a/packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts b/packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts index 78f7782133e6..66c6ac1e3226 100644 --- a/packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts +++ b/packages/devextreme/js/__internal/ui/date_box/date_box.mask.ts @@ -807,7 +807,6 @@ class DateBoxMask extends DateBoxBase { const { text } = this.option(); if (this._useMaskBehavior()) { - // @ts-expect-error editor's ValueChangedEvent should be extended this._saveValueChangeEvent(e); if (!text) { this._maskValue = null; diff --git a/packages/devextreme/js/__internal/ui/editor/editor.ts b/packages/devextreme/js/__internal/ui/editor/editor.ts index 81e08b2f34ad..b1fbf5a2be98 100644 --- a/packages/devextreme/js/__internal/ui/editor/editor.ts +++ b/packages/devextreme/js/__internal/ui/editor/editor.ts @@ -41,7 +41,8 @@ const VALIDATION_MESSAGE_KEYS_MAP = { }; export type UnresolvedEvents = 'onContentReady' | 'onDisposing' | 'onInitialized' | 'onOptionChanged' | 'onValueChanged'; -export type ValueChangedEvent = NativeEventInfo & ValueChangedInfo; +export type ValueChangedEvent = NativeEventInfo + & ValueChangedInfo; export interface EditorProperties< // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -71,7 +72,7 @@ class Editor< private _valueChangeActionSuppressed?: boolean; - _valueChangeEventInstance?: ValueChangedEvent; + _valueChangeEventInstance?: unknown; _$validationMessage?: dxElementWrapper; @@ -195,11 +196,12 @@ class Editor< return { value, previousValue, - event: this._valueChangeEventInstance, + event: this._valueChangeEventInstance as (NativeEventInfo + & ValueChangedInfo) | undefined, }; } - _saveValueChangeEvent(e: ValueChangedEvent | undefined): void { + _saveValueChangeEvent(e: TEventType | undefined): void { this._valueChangeEventInstance = e; } diff --git a/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts b/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts index b807587be029..31a054e4a33a 100644 --- a/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts +++ b/packages/devextreme/js/__internal/ui/file_uploader/file_uploader.ts @@ -384,7 +384,6 @@ class FileUploader extends Editor { return; } - // @ts-expect-error dxElementWrapper should be extdened const fileName = this._$fileInput.val().replace(/^.*\\/, ''); // @ts-expect-error dxElementWrapper should be extdened const files = this._$fileInput.prop('files'); diff --git a/packages/devextreme/js/__internal/ui/m_select_box.ts b/packages/devextreme/js/__internal/ui/m_select_box.ts index 984c40761828..c876a2d63fb8 100644 --- a/packages/devextreme/js/__internal/ui/m_select_box.ts +++ b/packages/devextreme/js/__internal/ui/m_select_box.ts @@ -561,7 +561,6 @@ class SelectBox< const value = this._displayGetter(initialSelectedItem); const displayValue = value ? String(value) : ''; const inputText = this._searchValue(); - // @ts-expect-error ts-error return displayValue === inputText; } diff --git a/packages/devextreme/js/__internal/ui/m_tag_box.ts b/packages/devextreme/js/__internal/ui/m_tag_box.ts index f3f6526c8c94..89df1d7a2b6b 100644 --- a/packages/devextreme/js/__internal/ui/m_tag_box.ts +++ b/packages/devextreme/js/__internal/ui/m_tag_box.ts @@ -496,7 +496,6 @@ class TagBox< this._getSubmitElement() .empty() - // @ts-expect-error ts-error .append($options); } diff --git a/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts b/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts index 32d06ea1a27d..05693907b6d3 100644 --- a/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts +++ b/packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts @@ -27,7 +27,7 @@ import SpinButtons from './m_number_box.spins'; const math = Math; -const WIDGET_CLASS = 'dx-numberbox'; +export const WIDGET_CLASS = 'dx-numberbox'; const FIREFOX_CONTROL_KEYS = ['tab', 'del', 'backspace', 'leftArrow', 'rightArrow', 'home', 'end', 'enter']; const FORCE_VALUECHANGE_EVENT_NAMESPACE = 'NumberBoxForceValueChange'; diff --git a/packages/devextreme/js/__internal/ui/switch.ts b/packages/devextreme/js/__internal/ui/switch.ts index e07809e22209..31b22fbaa014 100644 --- a/packages/devextreme/js/__internal/ui/switch.ts +++ b/packages/devextreme/js/__internal/ui/switch.ts @@ -70,7 +70,6 @@ class Switch extends Editor { const move = (value: boolean, e: KeyboardEvent): void => { e.preventDefault(); e.stopPropagation(); - // @ts-expect-error ValueChangedEvent should be compatible with KeyboardEvent this._saveValueChangeEvent(e); this._animateValue(value); }; @@ -255,7 +254,6 @@ class Switch extends Editor { _clickHandler(args: NativeEventInfo): void { const { event } = args; - // @ts-expect-error ValueChangedEvent should be compatible with KeyboardEvent this._saveValueChangeEvent(event); if (this._animating || this._swiping) { @@ -360,7 +358,6 @@ class Switch extends Editor { complete: () => { this._swiping = false; const pos = Number(value) + offsetDirection * event.targetOffset; - // @ts-expect-error ValueChangedEvent should be compatible with KeyboardEvent this._saveValueChangeEvent(event); this.option({ value: Boolean(pos) }); this._feedbackDeferred?.resolve(); diff --git a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts index 381113fb4b45..3d0c5e71ea53 100644 --- a/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts +++ b/packages/devextreme/js/__internal/ui/text_box/m_text_editor.base.ts @@ -494,7 +494,6 @@ class TextEditorBase< this.option({ text: textValue }); - // @ts-expect-error @ts-error const inputElementValue = this._input().val() as string | undefined; // fallback to empty string is required to support WebKit native date picker in some basic @@ -894,8 +893,7 @@ class TextEditorBase< } _toggleEmptinessEventHandler(): void { - // @ts-expect-error dxElementWrapper.val() typification - const text = this._input().val() as string; + const text = this._input().val(); const isEmpty = (text === '' || text === null) && this._isValueValid(); diff --git a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.strategy.ts b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.strategy.ts index 47caada3f653..2fb29f7fe3c6 100644 --- a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.strategy.ts +++ b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.strategy.ts @@ -265,7 +265,6 @@ export default class MaskStrategy { // eslint-disable-next-line no-restricted-globals this._dragTimer = setTimeout(() => { - // @ts-expect-error dxElementWrapper.val() const value = this.editor._convertToValue(this._editorInput().val()); this._editorOption('value', value); @@ -309,7 +308,6 @@ export default class MaskStrategy { if (this._isAutoFill()) { this.editor._maskKeyHandler(event, () => { this.editor._handleChain({ - // @ts-expect-error dxElementWrapper.val() text: inputVal, start: 0, length: inputVal.length, diff --git a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts index f11e696c7008..289bdf641bc1 100644 --- a/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts +++ b/packages/devextreme/js/__internal/ui/text_box/text_editor.mask.ts @@ -242,8 +242,7 @@ class TextEditorMask< _changeHandler(e: DxEvent): void { const $input = this._input(); - // @ts-expect-error dxElementWrapper.val() should return string - const inputValue = $input.val() as string; + const inputValue = $input.val(); if (inputValue === this._changedValue) { return; @@ -721,8 +720,7 @@ class TextEditorMask< this._validateMask(); super._optionChanged(args); - // @ts-expect-error dxElementWrapper.val() should return string - this._changedValue = this._input().val() as string; + this._changedValue = this._input().val(); break; case 'maskInvalidMessage': break; diff --git a/packages/devextreme/js/core/renderer.d.ts b/packages/devextreme/js/core/renderer.d.ts index 4e7e938930c1..23e32f048815 100644 --- a/packages/devextreme/js/core/renderer.d.ts +++ b/packages/devextreme/js/core/renderer.d.ts @@ -12,6 +12,7 @@ export interface dxElementWrapper { after(element: Element | dxElementWrapper): this; append(element: Element | dxElementWrapper | string): this; + append(element: Element[] | dxElementWrapper[] | string[]): this; appendTo(element: Element | dxElementWrapper): this; @@ -122,6 +123,7 @@ export interface dxElementWrapper { trim(): this; + val(): string; val(value?: string | string[] | number): this; wrap(wrappingElement: this | Element | string): this; diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index 176ee19d6499..8594eae34810 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -7248,6 +7248,7 @@ declare module DevExpress.core { after(element: Element | dxElementWrapper): this; append(element: Element | dxElementWrapper | string): this; + append(element: Element[] | dxElementWrapper[] | string[]): this; appendTo(element: Element | dxElementWrapper): this; @@ -7360,6 +7361,7 @@ declare module DevExpress.core { trim(): this; + val(): string; val(value?: string | string[] | number): this; wrap(wrappingElement: this | Element | string): this;