import { aD as jsxRuntimeExports, am as LazyLoad, v as i18n$1, w as appContext, i as __read, s as __assign$1, G as GEO_TYPES, jz as GeometryType, I as Icon, J as Scrollbar, ar as Tooltip, a6 as Input, aC as Select, bA as RadioGroup, t as toastApi } from './MapEditView-24782753.js';
import * as React from 'react';
import { useMemo, useCallback, useRef, useEffect } from 'react';
import { observer } from 'mobx-react';
import classNames from 'classnames';
import 'perfect-scrollbar';
import { forEach } from 'lodash';
import { M as MapDrawerHeader } from './MapDrawerHeader-7a75b579.js';
import { T as Transfer, a as TransferMode } from './Transfer-f55a5877.js';
import chroma from 'chroma-js';
import 'maptalks';
import 'uuid';
import 'mobx';
import 'lz-string';
import 'dayjs';
import 'react-dom';
import 'react-is';
import '@loadable/component';
import 'js-beautify';
import 'axios';
import 'superstruct';
import '@tanem/react-nprogress';
import 'jquery';
import 'js-cookie';
import 'is-email';
import 'is-uuid';
import 'is-url';
import 'anymatch';
import 'perf-request';
import '@syncpoint/wkx';
import 'buffer';
import '@turf/turf';
import '@mapbox/polylabel';
import 'turf-multipolygon';
import 'turf-polygon';
import 'gcoord';
import 'eventemitter2';
import 'geobuf';
import 'localforage';
import 'rc-menu';
import 'ahooks';
import 'jszip';
import 'file-saver';
import 'screenfull';
import 'sql-formatter-fork';
import 'array-move';
import 'turf-multilinestring';
import 'copy-to-clipboard';
import 'maptalks.three';
import 'ajv';
import 'spark-md5';
import 'react-draggable';
import 'react-virtualized';
import 'turf-point';
import 'decamelize';
import 'rbush';
import 'qs';
import 'maptalks.snap';
import 'react-use';
import 'react-rnd';
import 'react-beautiful-dnd';

var __assign = undefined && undefined.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = undefined && undefined.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var prefixCls$1 = 'dmc-toggle';

var Checked = function Checked() {
  return jsxRuntimeExports.jsx("svg", __assign({
    width: "8",
    height: "6",
    viewBox: "0 0 8 6",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    className: "dmc-inner-icon"
  }, {
    children: jsxRuntimeExports.jsx("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M3.39537 5.75209C3.22775 5.91708 3.00967 6 2.79074 6C2.57181 6 2.35288 5.91708 2.18611 5.75209L0.250788 3.83733C-0.0835961 3.50735 -0.0835961 2.97176 0.250788 2.64093C0.585173 2.3101 1.12566 2.3101 1.46005 2.64093L2.79074 3.95748L6.53995 0.248123C6.87434 -0.0827076 7.41483 -0.0827076 7.74921 0.248123C8.0836 0.578953 8.0836 1.1137 7.74921 1.44453L3.39537 5.75209Z",
      fill: "currentColor"
    }, void 0)
  }), void 0);
};

var Uncheck = function Uncheck() {
  return jsxRuntimeExports.jsx("svg", __assign({
    width: "6",
    height: "6",
    viewBox: "0 0 6 6",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    className: "dmc-inner-icon"
  }, {
    children: jsxRuntimeExports.jsx("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M5.7702 4.66227C6.0766 4.96869 6.0766 5.46397 5.7702 5.77038C5.6174 5.9232 5.41679 6 5.21618 6C5.01557 6 4.81497 5.9232 4.66216 5.77038L3.0001 4.10821L1.33725 5.77038C1.18445 5.9232 0.983838 6 0.78323 6C0.582623 6 0.382799 5.9232 0.22921 5.77038C-0.0764032 5.46397 -0.0764032 4.96869 0.22921 4.66227L1.89127 3.0001L0.22921 1.33793C-0.0764032 1.03151 -0.0764032 0.535445 0.22921 0.229812C0.535606 -0.0766041 1.03164 -0.0766041 1.33725 0.229812L3.0001 1.89198L4.66216 0.229812C4.96856 -0.0766041 5.46381 -0.0766041 5.7702 0.229812C6.0766 0.535445 6.0766 1.03151 5.7702 1.33793L4.10814 3.0001L5.7702 4.66227Z",
      fill: "currentColor"
    }, void 0)
  }), void 0);
};

var Loading = function Loading() {
  return jsxRuntimeExports.jsx("svg", __assign({
    width: "10",
    height: "10",
    viewBox: "0 0 10 10",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    className: "dmc-toggle-loading-icon"
  }, {
    children: jsxRuntimeExports.jsx("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M0.520813 4.99998C0.520813 2.5262 2.5262 0.520813 4.99998 0.520813C5.03167 0.520813 5.0633 0.521143 5.09486 0.5218C7.52495 0.572411 9.47915 2.55792 9.47915 4.99998C9.47915 7.47376 7.47376 9.47915 4.99998 9.47915C4.71233 9.47915 4.47915 9.24596 4.47915 8.95831C4.47915 8.67066 4.71233 8.43748 4.99998 8.43748C6.89846 8.43748 8.43748 6.89846 8.43748 4.99998C8.43748 3.12595 6.93773 1.60207 5.07317 1.56324C5.04884 1.56273 5.02445 1.56248 4.99998 1.56248C3.1015 1.56248 1.56248 3.1015 1.56248 4.99998C1.56248 5.28763 1.32929 5.52081 1.04165 5.52081C0.753998 5.52081 0.520813 5.28763 0.520813 4.99998Z",
      fill: "currentColor"
    }, void 0)
  }), void 0);
};

var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _a;

  var size = props.size,
      disabled = props.disabled,
      className = props.className,
      onChange = props.onChange,
      checked = props.checked,
      defaultChecked = props.defaultChecked,
      checkedChildren = props.checkedChildren,
      unCheckedChildren = props.unCheckedChildren,
      showText = props.showText,
      checkedText = props.checkedText,
      unCheckedText = props.unCheckedText,
      loading = props.loading,
      enableChangeLoading = props.enableChangeLoading,
      restProps = __rest(props, ["size", "disabled", "className", "onChange", "checked", "defaultChecked", "checkedChildren", "unCheckedChildren", "showText", "checkedText", "unCheckedText", "loading", "enableChangeLoading"]);

  var _b = React.useState(defaultChecked || false),
      unControlVal = _b[0],
      setUnControlVal = _b[1];

  var isControl = ('checked' in props);
  var val = !!(isControl ? checked : unControlVal);

  var _c = React.useState(false),
      changing = _c[0],
      setChanging = _c[1];

  var wrapperCls = classNames(prefixCls$1, (_a = {}, _a[prefixCls$1 + "-" + size] = size, _a[prefixCls$1 + "-disabled"] = disabled, _a[prefixCls$1 + "-on"] = val, _a), className);

  var handleChange = function handleChange(e) {
    !isControl && setUnControlVal(!val);

    if (enableChangeLoading) {
      setChanging(true);
      onChange && onChange(!val, e, function () {
        setChanging(false);
      });
    } else {
      onChange && onChange(!val, e);
    }
  };

  var node = loading || changing ? jsxRuntimeExports.jsx(Loading, {}, void 0) : val ? checkedChildren || jsxRuntimeExports.jsx(Checked, {}, void 0) : unCheckedChildren || jsxRuntimeExports.jsx(Uncheck, {}, void 0);
  var text = val ? checkedText : unCheckedText;
  var onClick = loading || changing || disabled ? undefined : handleChange;
  return jsxRuntimeExports.jsxs("div", __assign({}, restProps, {
    ref: ref,
    className: wrapperCls
  }, {
    children: [showText && jsxRuntimeExports.jsx("div", __assign({
      className: prefixCls$1 + "-text"
    }, {
      children: text
    }), void 0), jsxRuntimeExports.jsx("button", __assign({
      className: prefixCls$1 + "-button",
      onClick: onClick,
      type: "button"
    }, {
      children: jsxRuntimeExports.jsx("span", __assign({
        className: prefixCls$1 + "-button-inner"
      }, {
        children: node
      }), void 0)
    }), void 0)]
  }), void 0);
});
Toggle.displayName = 'Toggle';
var ToggleMemo = /*#__PURE__*/React.memo(Toggle);
ToggleMemo.displayName = 'ToggleMemo';

var ColorPickerWrapper = LazyLoad(function () { return import('./index-7c04fb6e.js'); });
var prefixCls = 'visual-field-settings';
var useState = React.useState;
var i18n = i18n$1.mapEdit.displayFieldsSetting;
var i18nSettingPanel = i18n$1.mapEdit.settingsPanel;
var fontFractionSelOptions = [
    { label: i18nSettingPanel.none, value: -1, key: -1 },
    { label: i18nSettingPanel.noDigit, value: 0, key: 0 },
    { label: '1', value: 1, key: 1 },
    { label: '2', value: 2, key: 2 },
    { label: '4', value: 4, key: 4 },
];
var wrapWidthOptions = [
    { label: i18nSettingPanel.none, value: -1, key: -1 },
    { label: '100', value: 100, key: 100 },
    { label: '200', value: 200, key: 200 },
    { label: '300', value: 300, key: 300 },
];
var fontSizeSelOptions = [
    { label: '12', value: 12, key: 12 },
    { label: '14', value: 14, key: 14 },
    { label: '16', value: 16, key: 16 },
    { label: '18', value: 18, key: 18 },
    { label: '20', value: 20, key: 20 },
    { label: '24', value: 24, key: 24 },
];
var fieldStyleOptions = [
    {
        label: i18nSettingPanel.halo,
        value: 'halo',
        key: 'halo',
    },
    {
        label: i18nSettingPanel.background,
        value: 'background',
        key: 'background',
        disabled: true,
    },
];
var handleErrorColor = function () {
    toastApi.error(i18nSettingPanel.colorError);
};
var ColorPickInput = function (_a) {
    var fontColor = _a.fontColor, handleColorChange = _a.handleColorChange, handleColorValidChange = _a.handleColorValidChange, _b = _a.disabled, disabled = _b === void 0 ? true : _b, _c = _a.inputClassName, inputClassName = _c === void 0 ? '' : _c;
    // 首次渲染默认为 valid
    var _d = __read(useState(true), 2), colorValid = _d[0], setColorValid = _d[1];
    var _e = __read(useState(fontColor), 2), _fontColor = _e[0], setFontColor = _e[1];
    var colorRef = useRef(fontColor);
    // const colorFromRef = useRef<'inner' | 'outer'>('outer');
    useEffect(function () {
        if (colorRef.current !== fontColor) {
            setColorValid(chroma.valid(fontColor));
            colorRef.current = fontColor;
            setFontColor(fontColor);
            // colorFromRef.current = 'outer';
        }
    }, [fontColor]);
    return (React.createElement(Input, { size: "compact", className: inputClassName, value: _fontColor, status: !colorValid ? 'error' : undefined, onChange: function (e) {
            setFontColor(e.target.value);
            // colorFromRef.current = 'inner';
        }, disabled: disabled, onBlur: function (e) {
            var v = e.target.value;
            var isColorValid = chroma.valid(v);
            handleColorValidChange === null || handleColorValidChange === void 0 ? void 0 : handleColorValidChange(isColorValid);
            if (isColorValid) {
                e.target.value = chroma(v).hex().toUpperCase();
                handleColorChange === null || handleColorChange === void 0 ? void 0 : handleColorChange(v);
            }
            else {
                handleErrorColor();
            }
        } }));
};
var FieldsSelect = function (_a) {
    var values = _a.values, options = _a.options, handleListChange = _a.handleListChange, handleSortChange = _a.handleSortChange;
    return (React.createElement(Transfer, { showCount: false, allowClear: true, mode: TransferMode.plain, value: values, options: options, sortable: true, sortListDescriptionText: i18nSettingPanel.fieldsSelected, checkListDescriptionText: i18n.displayFieldsHint, onChange: handleListChange, onRemove: handleSortChange, checkListDynamicRowHeight: true }));
};
var VisualFieldSetting = observer(function (props) {
    var _a;
    var routeStore = React.useContext(appContext.getContext()).routeStore;
    var CardsStore = routeStore.CardsStore, SuppFiltersStore = routeStore.SuppFiltersStore, MapSettingStore = routeStore.MapSettingStore;
    var getCard = CardsStore.getCard;
    var getColList = SuppFiltersStore.getColList, getCol = SuppFiltersStore.getCol, getColUuid = SuppFiltersStore.getColUuid, getColClassification = SuppFiltersStore.getColClassification, getSuppPackage = SuppFiltersStore.getSuppPackage;
    var textFollowLine = MapSettingStore.textFollowLine;
    var mapInstanceCanvas = React.useContext(appContext.getContext()).routeStore.mapInstanceCanvas;
    var cardId = props.cardId, onCancel = props.onCancel;
    var ref = React.useRef(null);
    var getPopupContainer = function () { return ref.current; };
    var card = getCard(cardId);
    var _b = card || {}, textVisual = _b.textVisual, updateTextVisual = _b.updateTextVisual, uuid = _b.uuid;
    var suppPackage = getSuppPackage(uuid || '');
    var geometryType = suppPackage === null || suppPackage === void 0 ? void 0 : suppPackage.geometryType;
    var _c = __read(useState(__assign$1(__assign$1({}, (textVisual || {})), { fontSize: (textVisual === null || textVisual === void 0 ? void 0 : textVisual.fontSize) || 14, fontDy: (textVisual === null || textVisual === void 0 ? void 0 : textVisual.fontDy) || 14, fontColor: (textVisual === null || textVisual === void 0 ? void 0 : textVisual.fontColor) || '#FFF', haloColor: (textVisual === null || textVisual === void 0 ? void 0 : textVisual.haloColor) || '#000', showHalo: (_a = textVisual === null || textVisual === void 0 ? void 0 : textVisual.showHalo) !== null && _a !== void 0 ? _a : true })), 2), _textVisual = _c[0], setTextVisual = _c[1];
    // 字体颜色有效
    var _d = __read(useState(true), 2), fontColorValid = _d[0], setColorValid = _d[1];
    // bg / halo 颜色有效
    var _e = __read(useState(true), 2), bgOrHaloColorValid = _e[0], setBgOrHaloColorValid = _e[1];
    var _f = _textVisual, fontSize = _f.fontSize, fontDy = _f.fontDy, _g = _f.fontFraction, fontFraction = _g === void 0 ? -1 : _g, fields = _f.fields, 
    // iconTimes,
    fontColor = _f.fontColor, fontBgColor = _f.fontBgColor, showFontBg = _f.showFontBg, haloColor = _f.haloColor, showHalo = _f.showHalo, withName = _f.withName, allowOverlap = _f.allowOverlap, _h = _f.wrapWidth, wrapWidth = _h === void 0 ? -1 : _h;
    // TODO 后期可能需要根据数据类型显示不同配置
    // const geometryType = getCurrentSuppFilter()?.geometryType || '';
    // 当前字段样式
    var _j = __read(useState(showFontBg ? 'background' : showHalo ? 'halo' : 'halo'), 2), curFieldStyle = _j[0], setCurFieldStyle = _j[1];
    var _k = __read(useState((curFieldStyle === 'halo' ? haloColor : fontBgColor) || '#000'), 2), fontBgOrHaloColor = _k[0], setFontBgOrHaloColor = _k[1];
    var _change = function (val, key) {
        var _a;
        console.log('update: ', key, val);
        var fs = __assign$1(__assign$1({}, _textVisual), (_a = {}, _a[key] = val, _a));
        setTextVisual(fs);
    };
    var columnList = useMemo(function () {
        var _a = (getColList({ uuid: uuid, noBottomTable: true }) || {}).noBottomList, noBottomList = _a === void 0 ? [] : _a;
        return noBottomList.map(function (col) { return ({
            title: col,
            // key: getColUuid({ uuid, col }),
            key: col,
            type: getColClassification({ uuid: uuid, col: col }),
        }); });
    }, [getColClassification, getColList, uuid]);
    var transferValues = useMemo(function () { return (fields || []).map(function (i) { return getCol({ uuid: uuid, fieldId: i }); }); }, [fields, getCol, uuid]);
    var _listChange = useCallback(function (col) {
        var fields = [];
        forEach(col, function (c) {
            var id = getColUuid({ uuid: uuid, col: c });
            fields.push(id);
        });
        setTextVisual(function (prevS) { return (__assign$1(__assign$1({}, prevS), { fields: fields })); });
    }, [getColUuid, uuid]);
    var _sortChange = useCallback(function (items) {
        var fields = [];
        forEach(items, function (c) {
            var id = getColUuid({ uuid: uuid, col: c });
            fields.push(id);
        });
        setTextVisual(function (prevS) { return (__assign$1(__assign$1({}, prevS), { fields: fields })); });
    }, [getColUuid, uuid]);
    var _ok = function () {
        if (fontColorValid && bgOrHaloColorValid) {
            updateTextVisual(_textVisual);
            onCancel();
        }
        else {
            handleErrorColor();
        }
    };
    var FieldsSelectComp = useMemo(function () { return (React.createElement(FieldsSelect, { values: transferValues, options: columnList, handleListChange: _listChange, handleSortChange: _sortChange })); }, [_listChange, _sortChange, columnList, transferValues]);
    return (React.createElement("div", { className: prefixCls, ref: ref },
        React.createElement(MapDrawerHeader, { title: i18nSettingPanel.displayFieldSetting, okText: i18n$1.mapEdit.okText, cancelText: i18n$1.mapEdit.cancelText, onOk: _ok, onCancel: onCancel }),
        React.createElement("div", { className: "".concat(prefixCls, "-content") },
            React.createElement("div", { className: "".concat(prefixCls, "-content-left") },
                React.createElement(React.Fragment, null,
                    textFollowLine && geometryType === GEO_TYPES[GeometryType.line] && (React.createElement("div", { className: "".concat(prefixCls, "-content-left-display-field-hint") },
                        React.createElement(Icon, { icon: "info-outlined", size: 14 }),
                        React.createElement("span", null, i18nSettingPanel.displayFieldHint))),
                    FieldsSelectComp)),
            React.createElement("div", { className: "property-settings" },
                React.createElement("span", { className: "title" }, i18nSettingPanel.propertiesSettings),
                React.createElement(Scrollbar, null,
                    React.createElement("div", { className: "property-sets" },
                        React.createElement("span", { className: "field-style-title" }, i18nSettingPanel.fieldStyle),
                        React.createElement("div", { className: "property" },
                            React.createElement("div", { className: "property-name" }, i18nSettingPanel.showFieldName),
                            React.createElement("div", { className: "property-values" }, textFollowLine && geometryType === GEO_TYPES[GeometryType.line] ? (React.createElement(Tooltip, { placement: "top", title: i18nSettingPanel.disallowOverlapTooltip, getPopupContainer: getPopupContainer },
                                React.createElement("div", { className: "property-value" },
                                    React.createElement(Toggle, { checked: withName, onChange: function (checked) { return _change(checked, 'withName'); } })))) : (React.createElement("div", { className: "property-value" },
                                React.createElement(Toggle, { checked: withName, onChange: function (checked) { return _change(checked, 'withName'); } }))))),
                        React.createElement("div", { className: "property" },
                            React.createElement("div", { className: "property-name" }, i18nSettingPanel.disallowOverlap),
                            React.createElement("div", { className: "property-values" },
                                React.createElement("div", { className: "property-value" },
                                    React.createElement(Toggle, { checked: !allowOverlap, onChange: function (checked) { return _change(!checked, 'allowOverlap'); } })))),
                        React.createElement("div", { className: "property" },
                            React.createElement("div", { className: "property-name" }, i18nSettingPanel.fontDy),
                            React.createElement("div", { className: "property-values" },
                                React.createElement("div", { className: "property-value" },
                                    React.createElement(Input, { size: "compact", allowClear: false, defaultValue: fontDy, onChange: function (e) { return _change(e.target.value, 'fontDy'); } })))),
                        React.createElement("div", { className: "property" },
                            React.createElement("div", { className: "property-name" }, i18nSettingPanel.fontStyle),
                            React.createElement("div", { className: "property-values" },
                                React.createElement("div", { className: "property-value" },
                                    React.createElement(Select, { createAble: true, size: "compact", value: fontSize, options: fontSizeSelOptions, placeholder: i18nSettingPanel.none, onSelect: function (val) { return _change(val, 'fontSize'); }, getPopupContainer: getPopupContainer })),
                                React.createElement("div", { className: "property-value" },
                                    React.createElement("div", { className: "multi-column" },
                                        React.createElement(ColorPickerWrapper, { color: fontColor, onChange: function (color) {
                                                _change(color, 'fontColor');
                                                setColorValid(true);
                                            }, pickColorFromMap: true, toMeasureCanvas: mapInstanceCanvas, getPopupContainer: getPopupContainer }),
                                        React.createElement(ColorPickInput, { fontColor: chroma.valid(fontColor)
                                                ? chroma(fontColor).hex().toUpperCase()
                                                : fontColor, handleColorChange: function (newColor) { return _change(newColor, 'fontColor'); }, handleColorValidChange: setColorValid }))))),
                        React.createElement("div", { className: "property wrap" },
                            React.createElement("div", { className: "property-name" }, i18nSettingPanel.fieldStyle),
                            React.createElement("div", { className: "property-values" },
                                React.createElement("div", { className: "property-value" },
                                    React.createElement(RadioGroup, { onChange: function (v) {
                                            var updateKey = v === 'background' ? 'showFontBg' : 'showHalo';
                                            setCurFieldStyle(v);
                                            _change(true, updateKey);
                                        }, value: curFieldStyle, options: fieldStyleOptions }))),
                            React.createElement("div", { className: "property-values fill-line" },
                                React.createElement("div", { className: "property-value justify" },
                                    React.createElement(ColorPickerWrapper, { disabled: !curFieldStyle, color: fontBgOrHaloColor, onChange: function (color) {
                                            if (curFieldStyle === 'background') {
                                                _change(color, 'fontBgColor');
                                            }
                                            else if (curFieldStyle === 'halo') {
                                                _change(color, 'haloColor');
                                            }
                                            setBgOrHaloColorValid(true);
                                            setFontBgOrHaloColor(color);
                                        }, pickColorFromMap: true, getPopupContainer: getPopupContainer, toMeasureCanvas: mapInstanceCanvas }),
                                    React.createElement(ColorPickInput, { fontColor: chroma.valid(fontBgOrHaloColor)
                                            ? chroma(fontBgOrHaloColor).hex('rgb').toUpperCase()
                                            : fontBgOrHaloColor, 
                                        // handleColorChange={(newColor) => _change(newColor, 'fontColor')}
                                        // handleColorValidChange={setBgOrHaloColorValid}
                                        inputClassName: "field-style-rgb" }),
                                    React.createElement(Input, { size: "compact", value: chroma.valid(fontBgOrHaloColor)
                                            ? chroma(fontBgOrHaloColor).alpha() * 100
                                            : '', disabled: true, suffix: "%", className: "field-style-alpha" }))))),
                    React.createElement("div", { className: "property-sets" },
                        React.createElement("span", { className: "sub-title" }, i18nSettingPanel.fontFraction),
                        React.createElement(Select, { createAble: true, size: "compact", value: fontFraction, placeholder: i18nSettingPanel.none, options: fontFractionSelOptions, onSelect: function (val) { return _change(val, 'fontFraction'); }, className: "select", getPopupContainer: getPopupContainer }),
                        React.createElement("div", { className: "hint" }, i18nSettingPanel.decimalSettingHint)),
                    React.createElement("div", { className: "property-sets" },
                        React.createElement("span", { className: "sub-title" }, i18nSettingPanel.wrapWidth),
                        React.createElement(Select, { createAble: true, size: "compact", value: wrapWidth, placeholder: i18nSettingPanel.none, options: wrapWidthOptions, onSelect: function (val) { return _change(val, 'wrapWidth'); }, className: "select", getPopupContainer: getPopupContainer })))))));
});
var VisualFieldSetting$1 = VisualFieldSetting;

export { VisualFieldSetting$1 as default };
