"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var React = _interopRequireWildcard(require("react"));

require("./custom-style-edit.css");

var _ColorEditor = _interopRequireDefault(require("./ColorEditor"));

var _createPopUp = _interopRequireDefault(require("./createPopUp"));

var _FontSizeCommandMenuButton = require("./FontSizeCommandMenuButton");

var _FontTypeMarkSpec = require("../FontTypeMarkSpec");

var _toCSSLineSpacing = require("./toCSSLineSpacing");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

// Values to show in indent drop-down
const INDENT_VALUES = [{
  label: 'None',
  value: 'None'
}, {
  label: '- 1',
  value: '1'
}, {
  label: '- - 2',
  value: '2'
}, {
  label: '- - - 3',
  value: '3'
}, {
  label: '- - - - 4',
  value: '4'
}, {
  label: '- - - - - 5',
  value: '5'
}, {
  label: '- - - - - - 6',
  value: '6'
}, {
  label: '- - - - - - - 7',
  value: '7'
}, {
  label: '- - - - - - - - 8',
  value: '8'
}]; // Values to show in Linespacing drop-down

const LINE_SPACE = ['Single', '1.15', '1.5', 'Double']; // Values to show in numbering drop-down

const LEVEL_VALUES = ['None', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
const SAMPLE_TEXT = `Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample
Sample Text Sample Text Sample Text Sample Text Sample Text`;

class CustomStyleEditor extends React.PureComponent {
  constructor(props) {
    super(props);

    _defineProperty(this, "_unmounted", false);

    _defineProperty(this, "_popUp", null);

    _defineProperty(this, "_cancel", () => {
      this.props.close();
    });

    _defineProperty(this, "_save", () => {
      if ('' != this.state.stylename) {
        this.props.close(this.state);
      }
    });

    this.state = _objectSpread({}, props);
  }

  componentWillUnmount() {
    this._unmounted = true;
  } // To set the selected style values


  onStyleClick(style, event) {
    switch (style) {
      case 'strong':
        this.setState({
          styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
            strong: !this.state.styles.strong
          })
        });
        break;

      case 'em':
        this.setState({
          styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
            em: !this.state.styles.em
          })
        });
        break;

      case 'strike':
        this.setState({
          styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
            strike: !this.state.styles.strike
          })
        });
        break;

      case 'super':
        this.setState({
          styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
            super: !this.state.styles.super
          })
        });
        break;

      case 'underline':
        this.setState({
          styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
            underline: !this.state.styles.underline
          })
        });
        break;

      case 'name':
        if (undefined !== event) {
          this.setState({
            stylename: event.target.value
          });
        }

        break;

      case 'description':
        if (undefined !== event) {
          this.setState({
            description: event.target.value
          });
        }

        break;

      case 'before':
        if (undefined !== event) {
          this.setState({
            styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
              spacebefore: event.target.value
            })
          });
        }

        break;

      case 'after':
        if (undefined !== event) {
          this.setState({
            styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
              spaceafter: event.target.value
            })
          });
        }

        break;

      default:
        break;
    }

    this.buildStyle();
  } // Build styles to display the example piece


  buildStyle() {
    const style = {};

    if (this.state.styles.fontname) {
      style.fontFamily = this.state.styles.fontname;
    }

    if (this.state.styles.fontsize) {
      style.fontSize = `${this.state.styles.fontsize}px`;
    }

    if (this.state.styles.strong) {
      style.fontWeight = 'bold';
    }

    if (this.state.styles.color) {
      style.color = this.state.styles.color;
    }

    if (this.state.styles.underline) {
      style.textDecoration = undefined !== style.textDecoration ? `${style.textDecoration}${' underline'}` : 'underline';
    }

    if (this.state.styles.strike) {
      style.textDecoration = undefined !== style.textDecoration ? `${style.textDecoration}${' line-through'}` : 'line-through';
    }

    if (this.state.styles.em) {
      style.fontStyle = 'italic';
    }

    if (this.state.styles.texthighlight) {
      style.backgroundColor = this.state.styles.texthighlight;
    }

    if (this.state.styles.align) {
      style.textAlign = this.state.styles.align;
    }

    if (this.state.styles.lineheight) {
      // [FS] IRAD-1104 2020-11-13
      // Issue fix : Linespacing Double and Single not applied in the sample text paragrapgh
      style.lineHeight = (0, _toCSSLineSpacing.getLineSpacingValue)(this.state.styles.lineheight);
    }

    if (this.state.styles.indent) {
      style.marginLeft = `${this.state.styles.indent * 2}px`;
    }

    if (this.state.styles.level) {
      if (document.getElementById('sampletextdiv')) {
        document.getElementById('sampletextdiv').innerText = `${this.state.styles.level}${SAMPLE_TEXT}`;
      }
    }

    return style;
  } // handles font name change


  onFontNameChange(e) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        fontname: e.target.value
      })
    });
  } // handles font name change


  onIndentRadioChanged(e) {
    const val = e.target.checked;

    if ('0' == e.target.value) {
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          islevelbased: val
        })
      });
    } else {
      this.setState({
        styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
          islevelspecified: val
        })
      });
    }
  } // handles font size change


  onFontSizeChange(e) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        fontsize: e.target.value
      })
    });
  } // handles line space  change


  onLineSpaceChange(e) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        lineheight: e.target.value
      })
    });
  } // handles Level drop down change


  onLevelChange(e) {
    const val = 'None' === e.target.value ? null : e.target.value;
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        level: val
      })
    });
  } // handles indentt dropdown change


  onIndentChange(e) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        indent: e.target.value
      })
    });
  } // shows color dialog based on input text-color/text-heighlight


  showColorDialog(isTextColor, event) {
    const anchor = event ? event.currentTarget : null;
    const hex = null;
    this._popUp = (0, _createPopUp.default)(_ColorEditor.default, {
      hex
    }, {
      anchor,
      autoDismiss: true,
      IsChildDialog: true,
      onClose: val => {
        if (this._popUp) {
          this._popUp = null;

          if (undefined !== val) {
            if (isTextColor) {
              this.setState({
                styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
                  color: val
                })
              });
            } else {
              this.setState({
                styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
                  texthighlight: val
                })
              });
            }
          }
        }
      }
    });
  } //handles the option button click, close the popup with selected values


  onAlignButtonClick(val, event) {
    // this.props.close(val);
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        align: val
      })
    });
  }

  handleNumbering(val, event) {
    this.setState({
      styles: _objectSpread(_objectSpread({}, this.state.styles), {}, {
        hasnumbering: val.target.checked
      })
    });
  }

  componentDidMount() {
    const acc = document.getElementsByClassName('accordion');
    let i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener('click', function () {
        this.classList.toggle('accactive');
        const panel = this.nextElementSibling;

        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + 'px';
        }
      });
    }

    const mp = document.getElementsByClassName('panel')[0];
    mp.style.maxHeight = mp.scrollHeight + 'px';
    const ac = document.getElementById('accordion1');
    ac.classList.toggle('accactive');
  }

  render() {
    return /*#__PURE__*/React.createElement("div", {
      className: "customedit-div"
    }, /*#__PURE__*/React.createElement("div", {
      className: "customedit-head"
    }, /*#__PURE__*/React.createElement("strong", null, this.state.mode == 0 ? 'Create Style' : 'Edit Style')), /*#__PURE__*/React.createElement("div", {
      className: "customedit-body container"
    }, /*#__PURE__*/React.createElement("div", {
      className: "sectiondiv"
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Style Name:"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      className: "stylenameinput",
      key: "name",
      onChange: this.onStyleClick.bind(this, 'name'),
      type: "text",
      value: this.state.stylename
    })), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Description:"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      className: "stylenameinput",
      key: "description",
      onChange: this.onStyleClick.bind(this, 'description'),
      type: "text",
      value: this.state.description
    })), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Preview:"), /*#__PURE__*/React.createElement("div", {
      className: "textareadiv",
      name: "body"
    }, /*#__PURE__*/React.createElement("div", {
      className: "sampletext"
    }, "Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph"), /*#__PURE__*/React.createElement("div", {
      className: this.state.styles.super ? 'hide-sampletext' : 'visible-sampletext',
      id: "sampletextdiv",
      style: this.buildStyle()
    }, SAMPLE_TEXT), /*#__PURE__*/React.createElement("sup", {
      className: this.state.styles.super ? 'visible-sampletext' : 'hide-sampletext',
      id: "mo-sup",
      style: this.buildStyle()
    }, SAMPLE_TEXT), /*#__PURE__*/React.createElement("div", {
      className: "sampletext"
    }, "Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph"))), /*#__PURE__*/React.createElement("div", {
      className: "sectiondiv editorsection"
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Style Attributes:"), /*#__PURE__*/React.createElement("div", {
      style: {
        height: '329px',
        overflow: 'hidden auto',
        overflowX: 'hidden',
        border: '1px solid'
      }
    }, /*#__PURE__*/React.createElement("button", {
      className: "accordion",
      id: "accordion1"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon text_format"
    }, "text_format"), " Font"), /*#__PURE__*/React.createElement("div", {
      className: "panel"
    }, /*#__PURE__*/React.createElement("div", {
      className: "sectiondiv"
    }, /*#__PURE__*/React.createElement("select", {
      className: "fonttype",
      onChange: this.onFontNameChange.bind(this),
      value: this.state.styles.fontname
    }, _FontTypeMarkSpec.FONT_TYPE_NAMES.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value))), /*#__PURE__*/React.createElement("select", {
      className: "fontsize",
      onChange: this.onFontSizeChange.bind(this),
      value: this.state.styles.fontsize
    }, _FontSizeCommandMenuButton.FONT_PT_SIZES.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value)))), /*#__PURE__*/React.createElement("div", {
      className: "font-buttons"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-label": " Bold",
      className: "czi-tooltip-surface",
      "data-tooltip": " Bold",
      id: "86ba3aa0-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.onStyleClick.bind(this, 'strong'),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.strong ? 'czi-custom-button use-icon active markbuttons' : 'czi-custom-button use-icon markbuttons',
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_bold"
    }, "format_bold"))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Italic",
      className: "czi-tooltip-surface fontstyle",
      "data-tooltip": " Italic",
      id: "86ba61b0-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.onStyleClick.bind(this, 'em'),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.em ? 'czi-custom-button use-icon active markbuttons' : 'czi-custom-button use-icon markbuttons',
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_italic"
    }, "format_italic"), /*#__PURE__*/React.createElement("span", null, "  "))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Underline",
      className: "czi-tooltip-surface fontstyle",
      "data-tooltip": " Underline",
      id: "86ba88c0-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.onStyleClick.bind(this, 'underline'),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.underline ? 'czi-custom-button use-icon active markbuttons' : 'czi-custom-button use-icon markbuttons',
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon  format_underline"
    }, "format_underline"), /*#__PURE__*/React.createElement("span", null, "  "))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Text color",
      className: "czi-tooltip-surface fontstyle",
      "data-tooltip": " Text color",
      id: "86bad6e1-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.showColorDialog.bind(this, true),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: "czi-custom-button use-icon markbuttons",
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_color_text",
      style: {
        color: this.state.styles.color
      }
    }, "format_color_text"), /*#__PURE__*/React.createElement("span", null, "  "))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Highlight color",
      className: "czi-tooltip-surface fontstyle",
      "data-tooltip": " Highlight color",
      id: "86bafdf0-ff11-11ea-930a-95c69ca4f97f",
      onClick: this.showColorDialog.bind(this, false),
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: "czi-custom-button use-icon markbuttons",
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: " iconspan czi-icon border_color",
      style: {
        color: this.state.styles.texthighlight
      }
    }, "border_color"), /*#__PURE__*/React.createElement("span", null, "  "))))), /*#__PURE__*/React.createElement("button", {
      className: "accordion"
    }, " ", /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_textdirection_l_to_r"
    }, "format_textdirection_l_to_r"), " PARAGRAPH"), /*#__PURE__*/React.createElement("div", {
      className: "panel1"
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Alignment:"), /*#__PURE__*/React.createElement("div", {
      className: "czi-custom-buttons"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-label": " Align Left",
      className: "czi-tooltip-surface",
      "data-tooltip": " Align Left",
      id: "86ba3aa0-ff11-11ea-930a-95c69ca4f97f",
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.align == 'left' ? 'czi-custom-button use-icon activealignbuttons' : 'czi-custom-button alignbuttons',
      onClick: this.onAlignButtonClick.bind(this, 'left'),
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_align_left"
    }, "format_align_left"))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Align Center",
      className: "czi-tooltip-surface alignbuttons",
      "data-tooltip": " Align Center",
      id: "86ba61b0-ff11-11ea-930a-95c69ca4f97f",
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.align == 'center' ? 'czi-custom-button use-icon activealignbuttons' : 'czi-custom-button  alignbuttons',
      onClick: this.onAlignButtonClick.bind(this, 'center'),
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_align_center"
    }, "format_align_center"))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Align Right",
      className: "czi-tooltip-surface alignbuttons",
      "data-tooltip": " Align Right",
      id: "86ba88c0-ff11-11ea-930a-95c69ca4f97f",
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.align == 'right' ? 'czi-custom-button use-icon activealignbuttons' : 'czi-custom-button  alignbuttons',
      onClick: this.onAlignButtonClick.bind(this, 'right'),
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_align_right"
    }, "format_align_right"))), /*#__PURE__*/React.createElement("span", {
      "aria-label": " Justify",
      className: "czi-tooltip-surface alignbuttons",
      "data-tooltip": " Justify",
      id: "86baafd0-ff11-11ea-930a-95c69ca4f97f",
      role: "tooltip"
    }, /*#__PURE__*/React.createElement("span", {
      "aria-disabled": "false",
      "aria-pressed": "false",
      className: this.state.styles.align == 'justify' ? 'czi-custom-button use-icon activealignbuttons' : 'czi-custom-button  alignbuttons',
      onClick: this.onAlignButtonClick.bind(this, 'justify'),
      role: "button"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon format_align_justify"
    }, "format_align_justify")))), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Line Spacing:"), /*#__PURE__*/React.createElement("select", {
      className: "linespacing",
      onChange: this.onLineSpaceChange.bind(this),
      value: this.state.styles.lineheight
    }, LINE_SPACE.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value))), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Paragraph Spacing:"), /*#__PURE__*/React.createElement("div", {
      className: "spacingdiv"
    }, /*#__PURE__*/React.createElement("label", null, "Before: "), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      className: "spacinginput",
      key: "before",
      onChange: this.onStyleClick.bind(this, 'before'),
      type: "text",
      value: this.state.styles.spacebefore
    })), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '0'
      }
    }, " pts"), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '23px'
      }
    }, "After: "), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
      className: "spacinginput",
      key: "after",
      onChange: this.onStyleClick.bind(this, 'after'),
      type: "text",
      value: this.state.styles.spaceafter
    })), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '3px'
      }
    }, "pts"))), /*#__PURE__*/React.createElement("button", {
      className: "accordion"
    }, /*#__PURE__*/React.createElement("span", {
      className: "iconspan czi-icon account_tree"
    }, "account_tree"), "HIERARCHY"), /*#__PURE__*/React.createElement("div", {
      className: "panel2 formp"
    }, /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Level:"), /*#__PURE__*/React.createElement("div", {
      className: "hierarchydiv"
    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("select", {
      className: "leveltype",
      onChange: this.onLevelChange.bind(this),
      value: this.state.styles.level
    }, LEVEL_VALUES.map(value => /*#__PURE__*/React.createElement("option", {
      key: value,
      value: value
    }, value)))), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.hasnumbering,
      className: "chknumbering",
      disabled: this.state.styles.level ? false : true,
      onChange: this.handleNumbering.bind(this),
      type: "checkbox"
    }), "Numbering(1.1)"))), /*#__PURE__*/React.createElement("p", {
      className: "formp"
    }, "Indenting:"), /*#__PURE__*/React.createElement("div", {
      className: "hierarchydiv"
    }, /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.islevelbased,
      name: "indenting",
      onChange: this.onIndentRadioChanged.bind(this),
      type: "radio",
      value: "0"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0'
      }
    }, "Based On Level")), /*#__PURE__*/React.createElement("div", {
      className: "indentdiv"
    }, /*#__PURE__*/React.createElement("input", {
      checked: this.state.styles.islevelspecified,
      name: "indenting",
      onChange: this.onIndentRadioChanged.bind(this),
      type: "radio",
      value: "1"
    }), /*#__PURE__*/React.createElement("label", {
      style: {
        marginLeft: '4px',
        marginTop: '3px',
        marginBottom: '0'
      }
    }, "Specified"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("select", {
      className: "leveltype specifiedindent",
      onChange: this.onIndentChange.bind(this),
      value: this.state.styles.indent
    }, INDENT_VALUES.map((_ref) => {
      let {
        label,
        value
      } = _ref;
      return /*#__PURE__*/React.createElement("option", {
        key: value,
        value: value
      }, label);
    }))))))))), /*#__PURE__*/React.createElement("div", {
      className: "btns"
    }, /*#__PURE__*/React.createElement("button", {
      onClick: this._cancel
    }, "Cancel"), /*#__PURE__*/React.createElement("button", {
      className: "btnsave",
      onClick: this._save.bind(this)
    }, "Save")));
  }

}

var _default = CustomStyleEditor;
exports.default = _default;