devextreme
Version:
JavaScript/TypeScript Component Suite for Responsive Web Development
1,047 lines (1,044 loc) • 38.7 kB
JavaScript
/**
* DevExtreme (cjs/__internal/ui/drop_down_editor/drop_down_editor.js)
* Version: 26.1.3
* Build date: Wed Jun 10 2026
*
* Copyright (c) 2012 - 2026 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.DROP_DOWN_EDITOR_DEPRECATED_OPTIONS = exports.DROP_DOWN_EDITOR_CLASS = exports.DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON = exports.DROP_DOWN_EDITOR_AFTER_FIELD_ADDON = void 0;
var _position = _interopRequireDefault(require("../../../common/core/animation/position"));
var _translator = require("../../../common/core/animation/translator");
var _click = require("../../../common/core/events/click");
var _events_engine = _interopRequireDefault(require("../../../common/core/events/core/events_engine"));
var _index = require("../../../common/core/events/utils/index");
var _message = _interopRequireDefault(require("../../../common/core/localization/message"));
var _component_registrator = _interopRequireDefault(require("../../../core/component_registrator"));
var _devices = _interopRequireDefault(require("../../../core/devices"));
var _element = require("../../../core/element");
var _guid = _interopRequireDefault(require("../../../core/guid"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _function_template = require("../../../core/templates/function_template");
var _browser = _interopRequireDefault(require("../../../core/utils/browser"));
var _common = require("../../../core/utils/common");
var _extend = require("../../../core/utils/extend");
var _position2 = require("../../../core/utils/position");
var _type = require("../../../core/utils/type");
var _window = require("../../../core/utils/window");
var _ui = _interopRequireDefault(require("../../../ui/popup/ui.popup"));
var _ui2 = _interopRequireDefault(require("../../../ui/widget/ui.errors"));
var _ui3 = _interopRequireDefault(require("../../../ui/widget/ui.widget"));
var _m_selectors = require("../../core/utils/m_selectors");
var _text_box = _interopRequireDefault(require("../../ui/text_box/text_box"));
var _drop_down_button = _interopRequireDefault(require("./drop_down_button"));
var _utils = require("./utils");
function _interopRequireDefault(e) {
return e && e.__esModule ? e : {
default: e
}
}
const DROP_DOWN_EDITOR_CLASS = exports.DROP_DOWN_EDITOR_CLASS = "dx-dropdowneditor";
const DROP_DOWN_EDITOR_INPUT_WRAPPER = "dx-dropdowneditor-input-wrapper";
const DROP_DOWN_EDITOR_BUTTON_ICON = "dx-dropdowneditor-icon";
const DROP_DOWN_EDITOR_OVERLAY = "dx-dropdowneditor-overlay";
const DROP_DOWN_EDITOR_OVERLAY_FLIPPED = "dx-dropdowneditor-overlay-flipped";
const DROP_DOWN_EDITOR_ACTIVE = "dx-dropdowneditor-active";
const DROP_DOWN_EDITOR_FIELD_CLICKABLE = "dx-dropdowneditor-field-clickable";
const DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER = "dx-dropdowneditor-field-template-wrapper";
const DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON = exports.DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON = "dx-dropdowneditor-field-before-template-wrapper";
const DROP_DOWN_EDITOR_AFTER_FIELD_ADDON = exports.DROP_DOWN_EDITOR_AFTER_FIELD_ADDON = "dx-dropdowneditor-field-after-template-wrapper";
const OVERLAY_CONTENT_LABEL = "Dropdown";
const isIOs = "ios" === _devices.default.current().platform;
const DROP_DOWN_EDITOR_DEPRECATED_OPTIONS = exports.DROP_DOWN_EDITOR_DEPRECATED_OPTIONS = {
fieldTemplate: {
since: "25.2",
message: "Use the 'fieldAddons' option instead"
}
};
function createTemplateWrapperElement() {
return (0, _renderer.default)("<div>").addClass(DROP_DOWN_EDITOR_FIELD_TEMPLATE_WRAPPER)
}
class DropDownEditor extends _text_box.default {
_supportedKeys() {
return Object.assign({}, super._supportedKeys(), {
tab: e => {
var _this$_popup;
const {
opened: opened
} = this.option();
if (!opened) {
return
}
if (!(null !== (_this$_popup = this._popup) && void 0 !== _this$_popup && _this$_popup.getFocusableElements().length)) {
this.close();
return
}
const $focusableElement = e.shiftKey ? this._getLastPopupElement() : this._getFirstPopupElement();
if ($focusableElement) {
_events_engine.default.trigger($focusableElement, "focus");
$focusableElement.select()
}
e.preventDefault()
},
escape: e => {
const {
opened: opened
} = this.option();
if (opened) {
e.preventDefault()
}
this.close();
return true
},
upArrow: e => {
if (!(0, _index.isCommandKeyPressed)(e)) {
e.preventDefault();
e.stopPropagation();
if (e.altKey) {
this.close();
return false
}
}
return true
},
downArrow: e => {
if (!(0, _index.isCommandKeyPressed)(e)) {
e.preventDefault();
e.stopPropagation();
if (e.altKey) {
this._validatedOpening();
return false
}
}
return true
},
enter: e => {
const {
opened: opened
} = this.option();
if (opened) {
e.preventDefault();
this._valueChangeEventHandler(e)
}
return true
}
})
}
_getDefaultButtons() {
return super._getDefaultButtons().concat([{
name: "dropDown",
Ctor: _drop_down_button.default
}])
}
_getDefaultOptions() {
return Object.assign({}, super._getDefaultOptions(), {
value: null,
onOpened: null,
onClosed: null,
opened: false,
acceptCustomValue: true,
applyValueMode: "instantly",
deferRendering: true,
activeStateEnabled: true,
dropDownButtonTemplate: "dropDownButton",
fieldTemplate: null,
fieldAddons: null,
openOnFieldClick: false,
showDropDownButton: true,
buttons: void 0,
dropDownOptions: {
showTitle: false
},
popupPosition: this._getDefaultPopupPosition(),
onPopupInitialized: null,
applyButtonText: _message.default.format("OK"),
cancelButtonText: _message.default.format("Cancel"),
buttonsLocation: "default",
useHiddenSubmitElement: false,
validationMessagePosition: "auto",
_cached_dropDownOptions: {}
})
}
_useTemplates() {
return true
}
_getDefaultPopupPosition(isRtlEnabled) {
const position = (0, _position2.getDefaultAlignment)(isRtlEnabled);
return {
offset: {
h: 0,
v: -1
},
my: `${position} top`,
at: `${position} bottom`,
collision: "flip flip"
}
}
_defaultOptionsRules() {
return super._defaultOptionsRules().concat([{
device(device) {
const isGeneric = "generic" === device.platform;
return isGeneric
},
options: {
popupPosition: {
offset: {
v: 0
}
}
}
}])
}
_inputWrapper() {
return this.$element().find(`.${DROP_DOWN_EDITOR_INPUT_WRAPPER}`).first()
}
_init() {
super._init();
this._initVisibilityActions();
this._initPopupInitializedAction();
const {
rtlEnabled: rtlEnabled,
dropDownOptions: dropDownOptions
} = this.option();
this._updatePopupPosition(rtlEnabled);
this._options.cache("dropDownOptions", dropDownOptions)
}
_updatePopupPosition(isRtlEnabled) {
const {
my: my,
at: at
} = this._getDefaultPopupPosition(isRtlEnabled);
const {
popupPosition: currentPosition
} = this.option();
this.option("popupPosition", (0, _extend.extend)({}, currentPosition, {
my: my,
at: at
}))
}
_initVisibilityActions() {
this._openAction = this._createActionByOption("onOpened", {
excludeValidators: ["disabled", "readOnly"]
});
this._closeAction = this._createActionByOption("onClosed", {
excludeValidators: ["disabled", "readOnly"]
})
}
_initPopupInitializedAction() {
this._popupInitializedAction = this._createActionByOption("onPopupInitialized", {
excludeValidators: ["disabled", "readOnly"]
})
}
_initMarkup() {
this._renderSubmitElement();
super._initMarkup();
this.$element().addClass(DROP_DOWN_EDITOR_CLASS);
this.setAria("role", this._getAriaRole())
}
_render() {
this._detachFocusEvents();
super._render();
this._renderOpenHandler();
this._attachFocusOutHandler();
this._renderOpenedState()
}
_renderContentImpl() {
const {
deferRendering: deferRendering
} = this.option();
if (!deferRendering) {
this._createPopup()
}
}
_renderInput() {
super._renderInput();
this._renderTemplateWrapper();
this._renderFieldAddons();
this._wrapInput();
this._setDefaultAria()
}
_wrapInput() {
this._$container = this.$element().wrapInner((0, _renderer.default)("<div>").addClass(DROP_DOWN_EDITOR_INPUT_WRAPPER)).children().eq(0)
}
_getAriaHasPopup() {
return "true"
}
_getAriaAutocomplete() {
return "none"
}
_getAriaRole() {
return "combobox"
}
_setDefaultAria() {
this.setAria({
haspopup: this._getAriaHasPopup(),
autocomplete: this._getAriaAutocomplete(),
role: this._getAriaRole()
})
}
_readOnlyPropValue() {
return !this._isEditable() || super._readOnlyPropValue()
}
_cleanFocusState() {
super._cleanFocusState();
const {
fieldTemplate: fieldTemplate
} = this.option();
if (fieldTemplate) {
this._detachFocusEvents()
}
}
_getFieldTemplate() {
const {
fieldTemplate: fieldTemplate
} = this.option();
if (!fieldTemplate) {
return
}
return this._getTemplate(fieldTemplate)
}
_renderMask() {
const {
fieldTemplate: fieldTemplate
} = this.option();
if (fieldTemplate) {
return
}
super._renderMask()
}
_renderField() {
const fieldAddonsTemplates = this._getFieldAddonsTemplates();
if (fieldAddonsTemplates) {
this._renderFieldAddonsContent(fieldAddonsTemplates);
return
}
const fieldTemplate = this._getFieldTemplate();
if (fieldTemplate) {
this._renderTemplatedField(fieldTemplate, this._fieldRenderData())
}
}
_renderPlaceholder() {
const hasFieldTemplate = !!this._getFieldTemplate();
if (!hasFieldTemplate) {
super._renderPlaceholder()
}
}
_renderValue() {
const {
useHiddenSubmitElement: useHiddenSubmitElement
} = this.option();
if (useHiddenSubmitElement) {
this._setSubmitValue()
}
const promise = super._renderValue();
return promise.always(this._renderField.bind(this))
}
_getButtonsContainer() {
const fieldTemplate = this._getFieldTemplate();
return fieldTemplate ? this._$container : this._$textEditorContainer
}
_renderBeforeFieldAddon() {
if (!this._$beforeFieldAddon && this._$textEditorContainer) {
this._$beforeFieldAddon = (0, _renderer.default)("<div>").addClass(DROP_DOWN_EDITOR_BEFORE_FIELD_ADDON).insertBefore(this._$textEditorContainer)
}
}
_renderAfterFieldAddon() {
if (!this._$afterFieldAddon && this._$textEditorContainer) {
this._$afterFieldAddon = (0, _renderer.default)("<div>").addClass(DROP_DOWN_EDITOR_AFTER_FIELD_ADDON).insertAfter(this._$textEditorContainer)
}
}
_renderFieldAddons() {
const {
fieldAddons: fieldAddons
} = this.option();
if (!fieldAddons) {
return
}
this._renderBeforeFieldAddon();
this._renderAfterFieldAddon()
}
_renderTemplateWrapper() {
const fieldTemplate = this._getFieldTemplate();
if (!fieldTemplate) {
return
}
this._$templateWrapper ?? (this._$templateWrapper = createTemplateWrapperElement().prependTo(this.$element()))
}
_renderTemplatedField(fieldTemplate, data) {
var _this$_$textEditorCon, _this$_$templateWrapp;
const isFocused = (0, _m_selectors.focused)(this._input());
this._detachKeyboardEvents();
this._detachFocusEvents();
null === (_this$_$textEditorCon = this._$textEditorContainer) || void 0 === _this$_$textEditorCon || _this$_$textEditorCon.remove();
const $newTemplateWrapper = createTemplateWrapperElement();
null === (_this$_$templateWrapp = this._$templateWrapper) || void 0 === _this$_$templateWrapp || _this$_$templateWrapp.replaceWith($newTemplateWrapper);
this._$templateWrapper = $newTemplateWrapper;
const currentRenderContext = Symbol("renderContext");
this._activeRenderContext = currentRenderContext;
fieldTemplate.render({
model: data,
container: (0, _element.getPublicElement)(this._$templateWrapper),
onRendered: () => {
if (this._activeRenderContext !== currentRenderContext) {
return
}
const $input = this._input();
if (!$input.length) {
throw _ui2.default.Error("E1010")
}
this._integrateInput();
if (!isFocused) {
return
}
if (_browser.default.mozilla) {
const inputElement = $input.get(0);
inputElement.focus({
preventScroll: true
})
} else {
_events_engine.default.trigger($input, "focus")
}
}
})
}
_getFieldAddonsTemplates() {
const {
fieldAddons: fieldAddons
} = this.option();
if (!fieldAddons) {
return null
}
const {
beforeTemplate: before,
afterTemplate: after
} = fieldAddons;
const beforeTemplate = before ? this._getTemplate(before) : null;
const afterTemplate = after ? this._getTemplate(after) : null;
return {
beforeTemplate: beforeTemplate,
afterTemplate: afterTemplate
}
}
_clearFieldAddons(removeField) {
var _this$_$beforeFieldAd, _this$_$afterFieldAdd;
null === (_this$_$beforeFieldAd = this._$beforeFieldAddon) || void 0 === _this$_$beforeFieldAd || _this$_$beforeFieldAd.empty();
null === (_this$_$afterFieldAdd = this._$afterFieldAddon) || void 0 === _this$_$afterFieldAdd || _this$_$afterFieldAdd.empty();
if (removeField) {
this._$beforeFieldAddon = null;
this._$afterFieldAddon = null
}
}
_renderBeforeFieldAddonContent(beforeTemplate) {
if (beforeTemplate && this._$beforeFieldAddon) {
beforeTemplate.render({
model: this._fieldRenderData(),
container: (0, _element.getPublicElement)(this._$beforeFieldAddon)
})
}
}
_renderAfterFieldAddonContent(afterTemplate) {
if (afterTemplate && this._$afterFieldAddon) {
afterTemplate.render({
model: this._fieldRenderData(),
container: (0, _element.getPublicElement)(this._$afterFieldAddon)
})
}
}
_renderFieldAddonsContent(fieldAddonsTemplates) {
this._clearFieldAddons();
if (!fieldAddonsTemplates) {
return
}
const {
beforeTemplate: beforeTemplate,
afterTemplate: afterTemplate
} = fieldAddonsTemplates;
this._renderBeforeFieldAddonContent(beforeTemplate);
this._renderAfterFieldAddonContent(afterTemplate)
}
_integrateInput() {
const {
isValid: isValid
} = this.option();
this._renderFocusState();
this._refreshValueChangeEvent();
this._refreshEvents();
this._refreshEmptinessEvent();
this._setDefaultAria();
this._setFieldAria();
this._toggleValidationClasses(!isValid);
const {
_onMarkupRendered: markupRendered
} = this.option();
null === markupRendered || void 0 === markupRendered || markupRendered()
}
_refreshEmptinessEvent() {
_events_engine.default.off(this._input(), "input blur", this._toggleEmptinessEventHandler);
this._renderEmptinessEvent()
}
_fieldRenderData() {
const {
value: value
} = this.option();
return value
}
_initTemplates() {
this._templateManager.addDefaultTemplates({
dropDownButton: new _function_template.FunctionTemplate(options => {
const $icon = (0, _renderer.default)("<div>").addClass("dx-dropdowneditor-icon");
(0, _renderer.default)(options.container).append($icon)
})
});
super._initTemplates()
}
_renderOpenHandler() {
const $inputWrapper = this._inputWrapper();
const eventName = (0, _index.addNamespace)(_click.name, this.NAME);
const {
openOnFieldClick: openOnFieldClick
} = this.option();
_events_engine.default.off($inputWrapper, eventName);
_events_engine.default.on($inputWrapper, eventName, this._getInputClickHandler(openOnFieldClick));
this.$element().toggleClass(DROP_DOWN_EDITOR_FIELD_CLICKABLE, openOnFieldClick);
if (openOnFieldClick) {
this._openOnFieldClickAction = this._createAction(this._openHandler.bind(this))
}
}
_attachFocusOutHandler() {
if (isIOs) {
this._detachFocusOutEvents();
_events_engine.default.on(this._inputWrapper(), (0, _index.addNamespace)("focusout", this.NAME), event => {
const newTarget = event.relatedTarget;
const {
opened: opened
} = this.option();
if (newTarget && opened) {
const isNewTargetOutside = this._isTargetOutOfComponent(newTarget);
if (isNewTargetOutside) {
this.close()
}
}
})
}
}
_isTargetOutOfComponent(newTarget) {
const popupWrapper = this.content ? (0, _renderer.default)(this.content()).closest(`.${DROP_DOWN_EDITOR_OVERLAY}`) : this._$popup;
const isTargetOutsidePopup = 0 === (0, _renderer.default)(newTarget).closest(`.${DROP_DOWN_EDITOR_OVERLAY}`, popupWrapper).length;
return isTargetOutsidePopup
}
_detachFocusOutEvents() {
if (!isIOs) {
return
}
_events_engine.default.off(this._inputWrapper(), (0, _index.addNamespace)("focusout", this.NAME))
}
_getInputClickHandler(openOnFieldClick) {
return openOnFieldClick ? e => {
this._executeOpenAction(e)
} : () => {
this._focusInput()
}
}
_openHandler() {
this._toggleOpenState()
}
_executeOpenAction(e) {
var _this$_openOnFieldCli;
null === (_this$_openOnFieldCli = this._openOnFieldClickAction) || void 0 === _this$_openOnFieldCli || _this$_openOnFieldCli.call(this, {
event: e
})
}
_keyboardEventBindingTarget() {
return this._input()
}
_focusInput() {
const {
disabled: disabled,
focusStateEnabled: focusStateEnabled
} = this.option();
if (disabled) {
return false
}
if (focusStateEnabled && !(0, _m_selectors.focused)(this._input())) {
this._resetCaretPosition();
_events_engine.default.trigger(this._input(), "focus")
}
return true
}
_resetCaretPosition() {
let ignoreEditable = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : false;
const inputElement = this._input().get(0);
if (inputElement) {
const {
value: value
} = inputElement;
const caretPosition = (0, _type.isDefined)(value) && (ignoreEditable || this._isEditable()) ? value.length : 0;
this._caret({
start: caretPosition,
end: caretPosition
}, true)
}
}
_isEditable() {
const {
acceptCustomValue: acceptCustomValue
} = this.option();
return acceptCustomValue
}
_toggleOpenState(isVisible) {
if (!this._focusInput()) {
return
}
const {
readOnly: readOnly,
opened: opened
} = this.option();
if (!readOnly) {
this.option("opened", isVisible ?? !opened)
}
}
_getControlsAria() {
return this._popup && this._popupContentId
}
_renderOpenedState() {
const {
opened: opened
} = this.option();
if (opened) {
this._createPopup()
}
this.$element().toggleClass(DROP_DOWN_EDITOR_ACTIVE, opened);
this._setPopupOption("visible", opened);
const arias = {
expanded: opened,
controls: this._getControlsAria()
};
this.setAria(arias);
this.setAria("owns", opened ? this._popupContentId : void 0, this.$element())
}
_createPopup() {
if (this._$popup) {
return
}
this._$popup = (0, _renderer.default)("<div>").addClass(DROP_DOWN_EDITOR_OVERLAY).appendTo(this.$element());
this._renderPopup();
this._renderPopupContent();
this._setPopupAriaLabel()
}
_setPopupAriaLabel() {
var _this$_popup2;
const $overlayContent = null === (_this$_popup2 = this._popup) || void 0 === _this$_popup2 ? void 0 : _this$_popup2.$overlayContent();
this.setAria("label", "Dropdown", $overlayContent)
}
_renderPopupContent() {}
_renderPopup() {
const defaultOptions = this._popupConfig();
const cachedOptions = this._options.cache("dropDownOptions");
const popupConfig = (0, _extend.extend)(defaultOptions, cachedOptions);
this._popup = this._createComponent(this._$popup, _ui.default, popupConfig);
this._popup.on({
showing: this._popupShowingHandler.bind(this),
shown: this._popupShownHandler.bind(this),
hiding: this._popupHidingHandler.bind(this),
hidden: this._popupHiddenHandler.bind(this),
contentReady: this._contentReadyHandler.bind(this)
});
this._attachPopupKeyHandler();
this._contentReadyHandler();
this._setPopupContentId(this._popup.$content());
this._bindInnerWidgetOptions(this._popup, "dropDownOptions")
}
_attachPopupKeyHandler() {
var _this$_popup3;
_events_engine.default.on(null === (_this$_popup3 = this._popup) || void 0 === _this$_popup3 ? void 0 : _this$_popup3.$overlayContent(), (0, _index.addNamespace)("keydown", this.NAME), e => this._popupKeyHandler(e))
}
_popupKeyHandler(e) {
switch ((0, _index.normalizeKeyName)(e)) {
case "tab":
this._popupTabHandler(e);
break;
case "escape":
this._popupEscHandler()
}
}
_popupTabHandler(e) {
const $target = (0, _renderer.default)(e.target);
const moveBackward = e.shiftKey && $target.is(this._getFirstPopupElement());
const moveForward = !e.shiftKey && $target.is(this._getLastPopupElement());
if (moveForward || moveBackward) {
_events_engine.default.trigger(this.field(), "focus");
e.preventDefault()
}
}
_popupEscHandler() {
_events_engine.default.trigger(this._input(), "focus");
this.close()
}
_setPopupContentId($popupContent) {
this._popupContentId = `dx-${new _guid.default}`;
this.setAria("id", this._popupContentId, $popupContent)
}
_contentReadyHandler() {}
_popupConfig() {
const {
popupPosition: popupPosition,
dropDownOptions: dropDownOptions
} = this.option();
const config = {
onInitialized: this._getPopupInitializedHandler(),
position: (0, _extend.extend)(popupPosition, {
of: this.$element()
}),
showTitle: null === dropDownOptions || void 0 === dropDownOptions ? void 0 : dropDownOptions.showTitle,
width: (0, _utils.getElementWidth)(this.$element()),
height: "auto",
shading: false,
hideOnParentScroll: true,
hideOnOutsideClick: e => this._closeOutsideDropDownHandler(e),
animation: {
show: {
type: "fade",
duration: 0,
from: 0,
to: 1
},
hide: {
type: "fade",
duration: 400,
from: 1,
to: 0
}
},
deferRendering: false,
focusStateEnabled: false,
showCloseButton: false,
dragEnabled: false,
toolbarItems: this._getPopupToolbarItems(),
onPositioned: this._popupPositionedHandler.bind(this),
fullScreen: false,
contentTemplate: null,
_hideOnParentScrollTarget: this.$element(),
_wrapperClassExternal: DROP_DOWN_EDITOR_OVERLAY,
_ignorePreventScrollEventsDeprecation: true
};
return config
}
_popupInitializedHandler() {}
_getPopupInitializedHandler() {
const {
onPopupInitialized: onPopupInitialized
} = this.option();
return e => {
this._popupInitializedHandler();
if (onPopupInitialized) {
this._popupInitializedAction({
popup: e.component
})
}
}
}
_dimensionChanged() {
if ((0, _window.hasWindow)() && !this.$element().is(":visible")) {
this.close();
return
}
this._updatePopupWidth()
}
_updatePopupWidth() {
var _this$_options$cache;
const width = null === (_this$_options$cache = this._options.cache("dropDownOptions")) || void 0 === _this$_options$cache ? void 0 : _this$_options$cache.width;
if (void 0 === width) {
this._setPopupOption("width", (0, _utils.getElementWidth)(this.$element()))
}
}
_popupPositionedHandler(e) {
var _e$position;
const {
labelMode: labelMode,
stylingMode: stylingMode
} = this.option();
if (!this._popup) {
return
}
const $popupOverlayContent = this._popup.$overlayContent();
const isOverlayFlipped = null === (_e$position = e.position) || void 0 === _e$position || null === (_e$position = _e$position.v) || void 0 === _e$position ? void 0 : _e$position.flip;
const shouldIndentForLabel = "hidden" !== labelMode && "outside" !== labelMode && "outlined" === stylingMode;
if (e.position) {
$popupOverlayContent.toggleClass(DROP_DOWN_EDITOR_OVERLAY_FLIPPED, isOverlayFlipped)
}
if (isOverlayFlipped && shouldIndentForLabel && this._label.isVisible()) {
const $label = this._label.$element();
(0, _translator.move)($popupOverlayContent, {
top: (0, _translator.locate)($popupOverlayContent).top - parseInt($label.css("fontSize") ?? "0", 10)
})
}
}
_popupShowingHandler() {}
_popupHidingHandler() {
this.option("opened", false)
}
_popupShownHandler() {
var _this$_validationMess;
this._openAction();
null === (_this$_validationMess = this._validationMessage) || void 0 === _this$_validationMess || _this$_validationMess.option("positionSide", this._getValidationMessagePositionSide())
}
_popupHiddenHandler() {
var _this$_validationMess2;
this._closeAction();
null === (_this$_validationMess2 = this._validationMessage) || void 0 === _this$_validationMess2 || _this$_validationMess2.option("positionSide", this._getValidationMessagePositionSide())
}
_getValidationMessagePositionSide() {
var _this$_popup4;
const {
validationMessagePosition: validationMessagePosition
} = this.option();
if (validationMessagePosition && "auto" !== validationMessagePosition) {
return validationMessagePosition
}
let positionSide = "bottom";
if (null !== (_this$_popup4 = this._popup) && void 0 !== _this$_popup4 && _this$_popup4.option("visible")) {
const {
top: myTop
} = _position.default.setup(this.$element());
const {
top: popupTop
} = _position.default.setup(this._popup.$content());
const {
popupPosition: popupPosition
} = this.option();
positionSide = myTop + popupPosition.offset.v > popupTop ? "bottom" : "top"
}
return positionSide
}
_closeOutsideDropDownHandler(event) {
const {
target: target
} = event;
const $target = (0, _renderer.default)(target);
const dropDownButton = this.getButton("dropDown");
const $dropDownButton = null === dropDownButton || void 0 === dropDownButton ? void 0 : dropDownButton.$element();
const isInputClicked = Boolean($target.closest(this.$element()).length);
const isDropDownButtonClicked = Boolean($target.closest($dropDownButton).length);
const isOutsideClick = !isInputClicked && !isDropDownButtonClicked;
return isOutsideClick
}
_clean() {
var _this$_$popup;
this._clearFieldAddons(true);
null === (_this$_$popup = this._$popup) || void 0 === _this$_$popup || _this$_$popup.remove();
this._openOnFieldClickAction = void 0;
this._$templateWrapper = void 0;
this._popup = void 0;
this._$popup = void 0;
super._clean()
}
_setPopupOption() {
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key]
}
this._setWidgetOption("_popup", args)
}
_validatedOpening() {
const {
readOnly: readOnly
} = this.option();
if (!readOnly) {
this._toggleOpenState(true)
}
}
_getPopupToolbarItems() {
const {
applyValueMode: applyValueMode
} = this.option();
return "useButtons" === applyValueMode ? this._popupToolbarItemsConfig() : []
}
_getFirstPopupElement() {
var _this$_popup5;
return (0, _renderer.default)(null === (_this$_popup5 = this._popup) || void 0 === _this$_popup5 ? void 0 : _this$_popup5.getFocusableElements()).first()
}
_getLastPopupElement() {
var _this$_popup6;
return (0, _renderer.default)(null === (_this$_popup6 = this._popup) || void 0 === _this$_popup6 ? void 0 : _this$_popup6.getFocusableElements()).last()
}
_popupToolbarItemsConfig() {
const {
applyButtonText: applyButtonText,
cancelButtonText: cancelButtonText
} = this.option();
const buttonsConfig = [{
shortcut: "done",
options: {
onClick: this._applyButtonHandler.bind(this),
text: applyButtonText
}
}, {
shortcut: "cancel",
options: {
onClick: this._cancelButtonHandler.bind(this),
text: cancelButtonText
}
}];
return this._applyButtonsLocation(buttonsConfig)
}
_applyButtonsLocation(buttonsConfig) {
const {
buttonsLocation: buttonsLocation
} = this.option();
const resultConfig = buttonsConfig;
if ("default" !== buttonsLocation) {
const position = (0, _common.splitPair)(buttonsLocation);
resultConfig.forEach(element => {
(0, _extend.extend)(element, {
toolbar: position[0],
location: position[1]
})
})
}
return resultConfig
}
_applyButtonHandler(e) {
this.close();
const {
focusStateEnabled: focusStateEnabled
} = this.option();
if (focusStateEnabled) {
this.focus()
}
}
_cancelButtonHandler() {
this.close();
const {
focusStateEnabled: focusStateEnabled
} = this.option();
if (focusStateEnabled) {
this.focus()
}
}
_popupOptionChanged(args) {
const options = _ui3.default.getOptionsFromContainer(args);
this._setPopupOption(options);
const optionsKeys = Object.keys(options);
if (optionsKeys.includes("width") || optionsKeys.includes("height")) {
this._dimensionChanged()
}
}
_renderSubmitElement() {
const {
useHiddenSubmitElement: useHiddenSubmitElement
} = this.option();
if (useHiddenSubmitElement) {
this._$submitElement = (0, _renderer.default)("<input>").attr("type", "hidden").appendTo(this.$element())
}
}
_setSubmitValue() {
const {
value: value
} = this.option();
this._getSubmitElement().val(value)
}
_getSubmitElement() {
const {
useHiddenSubmitElement: useHiddenSubmitElement
} = this.option();
if (useHiddenSubmitElement) {
return this._$submitElement
}
return super._getSubmitElement()
}
_shouldLogFieldTemplateDeprecationWarning() {
return false
}
_setDeprecatedOptions() {
super._setDeprecatedOptions();
if (this._shouldLogFieldTemplateDeprecationWarning()) {
(0, _extend.extend)(this._deprecatedOptions, DROP_DOWN_EDITOR_DEPRECATED_OPTIONS)
}
}
_dispose() {
this._detachFocusOutEvents();
super._dispose()
}
_optionChanged(args) {
var _this$_popup7;
const {
name: name,
value: value
} = args;
switch (name) {
case "width":
case "height":
super._optionChanged(args);
this._updatePopupWidth();
null === (_this$_popup7 = this._popup) || void 0 === _this$_popup7 || _this$_popup7.repaint();
break;
case "opened":
this._renderOpenedState();
break;
case "onOpened":
case "onClosed":
this._initVisibilityActions();
break;
case "onPopupInitialized":
this._initPopupInitializedAction();
break;
case "fieldAddons":
case "fieldTemplate":
case "acceptCustomValue":
case "openOnFieldClick":
this._invalidate();
break;
case "dropDownButtonTemplate":
case "showDropDownButton":
this._updateButtons(["dropDown"]);
break;
case "dropDownOptions":
this._popupOptionChanged(args);
this._innerWidgetOptionChanged(this._popup, args);
break;
case "_cached_dropDownOptions":
case "popupPosition":
break;
case "deferRendering":
if ((0, _window.hasWindow)()) {
this._createPopup()
}
break;
case "applyValueMode":
case "applyButtonText":
case "cancelButtonText":
case "buttonsLocation":
this._setPopupOption("toolbarItems", this._getPopupToolbarItems());
break;
case "useHiddenSubmitElement":
if (this._$submitElement) {
this._$submitElement.remove();
this._$submitElement = void 0
}
this._renderSubmitElement();
break;
case "rtlEnabled":
this._updatePopupPosition(value);
super._optionChanged(args);
break;
default:
super._optionChanged(args)
}
}
open() {
this.option("opened", true)
}
close() {
this.option("opened", false)
}
field() {
return (0, _element.getPublicElement)(this._input())
}
content() {
return this._popup ? this._popup.content() : null
}
}(0, _component_registrator.default)("dxDropDownEditor", DropDownEditor);
var _default = exports.default = DropDownEditor;