molstar 3.3.0 → 3.5.0

package/lib/commonjs/mol-plugin-ui/base.js

@@ -9,12 +9,12 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var common_1 = require("./controls/common");
 var icons_1 = require("./controls/icons");
 exports.PluginReactContext = React.createContext(void 0);
 var PluginUIComponent = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PluginUIComponent, _super);
+    tslib_1.__extends(PluginUIComponent, _super);
     function PluginUIComponent(props, context) {
         var _this = _super.call(this, props) || this;
         _this.subs = void 0;
@@ -42,7 +42,7 @@ var PluginUIComponent = /** @class */ (function (_super) {
 }(React.Component));
 exports.PluginUIComponent = PluginUIComponent;
 var PurePluginUIComponent = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PurePluginUIComponent, _super);
+    tslib_1.__extends(PurePluginUIComponent, _super);
     function PurePluginUIComponent(props, context) {
         var _this = _super.call(this, props, context) || this;
         _this.subs = void 0;
@@ -70,7 +70,7 @@ var PurePluginUIComponent = /** @class */ (function (_super) {
 }(React.PureComponent));
 exports.PurePluginUIComponent = PurePluginUIComponent;
 var CollapsableControls = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(CollapsableControls, _super);
+    tslib_1.__extends(CollapsableControls, _super);
     function CollapsableControls(props, context) {
         var _this = _super.call(this, props, context) || this;
         _this.toggleCollapsed = function () {
@@ -96,7 +96,7 @@ var CollapsableControls = /** @class */ (function (_super) {
         var wrapClass = this.state.isCollapsed
             ? 'msp-transform-wrapper msp-transform-wrapper-collapsed'
             : 'msp-transform-wrapper';
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: wrapClass }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ icon: this.state.brand ? void 0 : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: this.state.brand ? "msp-transform-header-brand msp-transform-header-brand-".concat(this.state.brand.accent) : void 0, title: "Click to ".concat(this.state.isCollapsed ? 'expand' : 'collapse') }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: (_a = this.state.brand) === null || _a === void 0 ? void 0 : _a.svg, inline: true }, void 0), this.state.header, (0, jsx_runtime_1.jsx)("small", (0, tslib_1.__assign)({ style: { margin: '0 6px' } }, { children: this.state.isCollapsed ? '' : this.state.description }), void 0)] }), void 0) }), void 0), !this.state.isCollapsed && this.renderControls()] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: wrapClass }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-transform-header' }, { children: (0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ icon: this.state.brand ? void 0 : this.state.isCollapsed ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg, noOverflow: true, onClick: this.toggleCollapsed, className: this.state.brand ? "msp-transform-header-brand msp-transform-header-brand-".concat(this.state.brand.accent) : void 0, title: "Click to ".concat(this.state.isCollapsed ? 'expand' : 'collapse') }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: (_a = this.state.brand) === null || _a === void 0 ? void 0 : _a.svg, inline: true }), this.state.header, (0, jsx_runtime_1.jsx)("small", tslib_1.__assign({ style: { margin: '0 6px' } }, { children: this.state.isCollapsed ? '' : this.state.description }))] })) })), !this.state.isCollapsed && this.renderControls()] }));
     };
     return CollapsableControls;
 }(PluginUIComponent));

package/lib/commonjs/mol-plugin-ui/context.js

@@ -9,7 +9,7 @@ exports.PluginUIContext = void 0;
 var tslib_1 = require("tslib");
 var context_1 = require("../mol-plugin/context");
 var PluginUIContext = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(PluginUIContext, _super);
+    tslib_1.__extends(PluginUIContext, _super);
     function PluginUIContext(spec) {
         var _this = _super.call(this, spec) || this;
         _this.spec = spec;

package/lib/commonjs/mol-plugin-ui/controls/action-menu.js

@@ -9,11 +9,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  * @author David Sehnal <david.sehnal@gmail.com>
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var common_1 = require("./common");
 var icons_1 = require("./icons");
 var ActionMenu = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ActionMenu, _super);
+    tslib_1.__extends(ActionMenu, _super);
     function ActionMenu() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.hide = function () { return _this.props.onSelect(void 0); };
@@ -21,19 +21,19 @@ var ActionMenu = /** @class */ (function (_super) {
     }
     ActionMenu.prototype.render = function () {
         var cmd = this.props;
-        var section = (0, jsx_runtime_1.jsx)(Section, { items: cmd.items, onSelect: cmd.onSelect, current: cmd.current, multiselect: this.props.multiselect, noOffset: this.props.noOffset, noAccent: this.props.noAccent }, void 0);
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "msp-action-menu-options".concat(cmd.header ? '' : ' msp-action-menu-options-no-header') }, { children: [cmd.header && (0, jsx_runtime_1.jsx)(common_1.ControlGroup, (0, tslib_1.__assign)({ header: cmd.header, title: cmd.title, initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.hide, topRightIcon: icons_1.CloseSvg }, { children: section }), void 0), !cmd.header && section] }), void 0);
+        var section = (0, jsx_runtime_1.jsx)(Section, { items: cmd.items, onSelect: cmd.onSelect, current: cmd.current, multiselect: this.props.multiselect, noOffset: this.props.noOffset, noAccent: this.props.noAccent });
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "msp-action-menu-options".concat(cmd.header ? '' : ' msp-action-menu-options-no-header') }, { children: [cmd.header && (0, jsx_runtime_1.jsx)(common_1.ControlGroup, tslib_1.__assign({ header: cmd.header, title: cmd.title, initialExpanded: true, hideExpander: true, hideOffset: true, onHeaderClick: this.hide, topRightIcon: icons_1.CloseSvg }, { children: section })), !cmd.header && section] }));
     };
     return ActionMenu;
 }(React.PureComponent));
 exports.ActionMenu = ActionMenu;
 (function (ActionMenu) {
     function Header(label, options) {
-        return options ? (0, tslib_1.__assign)({ kind: 'header', label: label }, options) : { kind: 'header', label: label };
+        return options ? tslib_1.__assign({ kind: 'header', label: label }, options) : { kind: 'header', label: label };
     }
     ActionMenu.Header = Header;
     function Item(label, value, options) {
-        return (0, tslib_1.__assign)({ kind: 'item', label: label, value: value }, options);
+        return tslib_1.__assign({ kind: 'item', label: label, value: value }, options);
     }
     ActionMenu.Item = Item;
     function createItems(xs, params) {
@@ -71,7 +71,7 @@ exports.ActionMenu = ActionMenu;
     ActionMenu.createItems = createItems;
     var _selectOptions = { value: function (o) { return o[0]; }, label: function (o) { return o[1]; }, category: function (o) { return o[2]; } };
     function createItemsFromSelectOptions(options, params) {
-        return createItems(options, params ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, _selectOptions), params) : _selectOptions);
+        return createItems(options, params ? tslib_1.__assign(tslib_1.__assign({}, _selectOptions), params) : _selectOptions);
     }
     ActionMenu.createItemsFromSelectOptions = createItemsFromSelectOptions;
     function hasSelectedItem(items) {
@@ -143,7 +143,7 @@ exports.ActionMenu = ActionMenu;
 })(ActionMenu = exports.ActionMenu || (exports.ActionMenu = {}));
 exports.ActionMenu = ActionMenu;
 var Section = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(Section, _super);
+    tslib_1.__extends(Section, _super);
     function Section() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = Section.createState(_this.props);
@@ -186,7 +186,7 @@ var Section = /** @class */ (function (_super) {
     Object.defineProperty(Section.prototype, "multiselectHeader", {
         get: function () {
             var _a = this.state, header = _a.header, hasCurrent = _a.hasCurrent;
-            return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-flex-row msp-control-group-header' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg, flex: true, noOverflow: true, onClick: this.toggleExpanded, title: "Click to ".concat(this.state.isExpanded ? 'collapse' : 'expand', ".").concat((header === null || header === void 0 ? void 0 : header.description) ? " ".concat(header === null || header === void 0 ? void 0 : header.description) : '') }, { children: hasCurrent ? (0, jsx_runtime_1.jsx)("b", { children: header === null || header === void 0 ? void 0 : header.label }, void 0) : header === null || header === void 0 ? void 0 : header.label }), void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.CheckSvg, flex: true, onClick: this.selectAll, style: { flex: '0 0 50px', textAlign: 'right' } }, { children: "All" }), void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ icon: icons_1.CloseSvg, flex: true, onClick: this.selectNone, style: { flex: '0 0 50px', textAlign: 'right' } }, { children: "None" }), void 0)] }), void 0);
+            return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-flex-row msp-control-group-header' }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg, flex: true, noOverflow: true, onClick: this.toggleExpanded, title: "Click to ".concat(this.state.isExpanded ? 'collapse' : 'expand', ".").concat((header === null || header === void 0 ? void 0 : header.description) ? " ".concat(header === null || header === void 0 ? void 0 : header.description) : '') }, { children: hasCurrent ? (0, jsx_runtime_1.jsx)("b", { children: header === null || header === void 0 ? void 0 : header.label }) : header === null || header === void 0 ? void 0 : header.label })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.CheckSvg, flex: true, onClick: this.selectAll, style: { flex: '0 0 50px', textAlign: 'right' } }, { children: "All" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ icon: icons_1.CloseSvg, flex: true, onClick: this.selectNone, style: { flex: '0 0 50px', textAlign: 'right' } }, { children: "None" }))] }));
         },
         enumerable: false,
         configurable: true
@@ -194,7 +194,7 @@ var Section = /** @class */ (function (_super) {
     Object.defineProperty(Section.prototype, "basicHeader", {
         get: function () {
             var _a = this.state, header = _a.header, hasCurrent = _a.hasCurrent;
-            return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header', style: { marginTop: '1px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ noOverflow: true, icon: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg, onClick: this.toggleExpanded, title: "Click to ".concat(this.state.isExpanded ? 'collapse' : 'expand', ". ").concat((header === null || header === void 0 ? void 0 : header.description) ? header === null || header === void 0 ? void 0 : header.description : '') }, { children: hasCurrent ? (0, jsx_runtime_1.jsx)("b", { children: header === null || header === void 0 ? void 0 : header.label }, void 0) : header === null || header === void 0 ? void 0 : header.label }), void 0) }), void 0);
+            return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-group-header', style: { marginTop: '1px' } }, { children: (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ noOverflow: true, icon: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg, onClick: this.toggleExpanded, title: "Click to ".concat(this.state.isExpanded ? 'collapse' : 'expand', ". ").concat((header === null || header === void 0 ? void 0 : header.description) ? header === null || header === void 0 ? void 0 : header.description : '') }, { children: hasCurrent ? (0, jsx_runtime_1.jsx)("b", { children: header === null || header === void 0 ? void 0 : header.label }) : header === null || header === void 0 ? void 0 : header.label })) }));
         },
         enumerable: false,
         configurable: true
@@ -205,15 +205,15 @@ var Section = /** @class */ (function (_super) {
         if (isHeader(items))
             return null;
         if (isItem(items))
-            return (0, jsx_runtime_1.jsx)(Action, { item: items, onSelect: onSelect, current: current, multiselect: this.props.multiselect }, void 0);
+            return (0, jsx_runtime_1.jsx)(Action, { item: items, onSelect: onSelect, current: current, multiselect: this.props.multiselect });
         var header = this.state.header;
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [header && (this.props.multiselect && this.state.isExpanded ? this.multiselectHeader : this.basicHeader), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: this.props.noOffset ? void 0 : this.props.noAccent ? 'msp-control-offset' : 'msp-accent-offset' }, { children: (!header || this.state.isExpanded) && items.map(function (x, i) {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [header && (this.props.multiselect && this.state.isExpanded ? this.multiselectHeader : this.basicHeader), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: this.props.noOffset ? void 0 : this.props.noAccent ? 'msp-control-offset' : 'msp-accent-offset' }, { children: (!header || this.state.isExpanded) && items.map(function (x, i) {
                         if (isHeader(x))
                             return null;
                         if (isItem(x))
                             return (0, jsx_runtime_1.jsx)(Action, { item: x, onSelect: onSelect, current: current, multiselect: _this.props.multiselect }, i);
                         return (0, jsx_runtime_1.jsx)(Section, { items: x, onSelect: onSelect, current: current, multiselect: _this.props.multiselect, noAccent: true }, i);
-                    }) }), void 0)] }, void 0);
+                    }) }))] });
     };
     return Section;
 }(React.PureComponent));
@@ -221,7 +221,7 @@ var Action = function (_a) {
     var item = _a.item, onSelect = _a.onSelect, current = _a.current, multiselect = _a.multiselect;
     var isCurrent = current === item;
     var style = item.addOn ? { position: 'relative' } : void 0;
-    return (0, jsx_runtime_1.jsxs)(common_1.Button, (0, tslib_1.__assign)({ icon: item.icon, noOverflow: true, className: 'msp-action-menu-button', onClick: function (e) { return onSelect(multiselect ? [item] : item, e); }, disabled: item.disabled, style: style, title: item.description }, { children: [isCurrent || item.selected ? (0, jsx_runtime_1.jsx)("b", { children: item.label }, void 0) : item.label, item.addOn] }), void 0);
+    return (0, jsx_runtime_1.jsxs)(common_1.Button, tslib_1.__assign({ icon: item.icon, noOverflow: true, className: 'msp-action-menu-button', onClick: function (e) { return onSelect(multiselect ? [item] : item, e); }, disabled: item.disabled, style: style, title: item.description }, { children: [isCurrent || item.selected ? (0, jsx_runtime_1.jsx)("b", { children: item.label }) : item.label, item.addOn] }));
 };
 function isItems(x) {
     return !!x && Array.isArray(x);

package/lib/commonjs/mol-plugin-ui/controls/color.js

@@ -11,11 +11,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  */
 var color_1 = require("../../mol-util/color");
 var string_1 = require("../../mol-util/string");
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var common_1 = require("./common");
 var swatches_1 = require("../../mol-util/color/swatches");
 var CombinedColorControl = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(CombinedColorControl, _super);
+    tslib_1.__extends(CombinedColorControl, _super);
     function CombinedColorControl() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {
@@ -65,12 +65,12 @@ var CombinedColorControl = /** @class */ (function (_super) {
     };
     CombinedColorControl.prototype.swatch = function () {
         var _this = this;
-        return (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-combined-color-swatch' }, { children: swatches_1.DefaultColorSwatch.map(function (c) { return (0, jsx_runtime_1.jsx)(common_1.Button, { inline: true, "data-color": c[1], onClick: _this.onClickSwatch, style: { background: color_1.Color.toStyle(c[1]) } }, c[1]); }) }), void 0);
+        return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-combined-color-swatch' }, { children: swatches_1.DefaultColorSwatch.map(function (c) { return (0, jsx_runtime_1.jsx)(common_1.Button, { inline: true, "data-color": c[1], onClick: _this.onClickSwatch, style: { background: color_1.Color.toStyle(c[1]) } }, c[1]); }) }));
     };
     CombinedColorControl.prototype.render = function () {
         var label = this.props.param.label || (0, string_1.camelCaseToWords)(this.props.name);
         var _a = color_1.Color.toRgb(this.props.value), r = _a[0], g = _a[1], b = _a[2];
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { title: this.props.param.description, label: label, control: (0, jsx_runtime_1.jsx)(common_1.Button, { onClick: this.toggleExpanded, inline: true, className: 'msp-combined-color-button', style: { background: color_1.Color.toStyle(this.props.value) } }, void 0) }, void 0), this.state.isExpanded && (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: [this.swatch(), (0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: 'RGB', className: 'msp-control-label-short', control: (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { display: 'flex', textAlignLast: 'center', left: '80px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onR, numeric: true, value: r, delayMs: 250, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onG, numeric: true, value: g, delayMs: 250, style: { order: 2, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0), (0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onB, numeric: true, value: b, delayMs: 250, style: { order: 3, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }, void 0)] }), void 0) }, void 0), (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.onLighten, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Lighten" }), void 0), (0, jsx_runtime_1.jsx)(common_1.Button, (0, tslib_1.__assign)({ onClick: this.onDarken, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Darken" }), void 0)] }), void 0)] }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(common_1.ControlRow, { title: this.props.param.description, label: label, control: (0, jsx_runtime_1.jsx)(common_1.Button, { onClick: this.toggleExpanded, inline: true, className: 'msp-combined-color-button', style: { background: color_1.Color.toStyle(this.props.value) } }) }), this.state.isExpanded && (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: [this.swatch(), (0, jsx_runtime_1.jsx)(common_1.ControlRow, { label: 'RGB', className: 'msp-control-label-short', control: (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { display: 'flex', textAlignLast: 'center', left: '80px' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onR, numeric: true, value: r, delayMs: 250, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }), (0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onG, numeric: true, value: g, delayMs: 250, style: { order: 2, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true }), (0, jsx_runtime_1.jsx)(common_1.TextInput, { onChange: this.onB, numeric: true, value: b, delayMs: 250, style: { order: 3, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control', onEnter: this.props.onEnter, blurOnEnter: true, blurOnEscape: true })] })) }), (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ style: { display: 'flex', textAlignLast: 'center' } }, { children: [(0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.onLighten, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Lighten" })), (0, jsx_runtime_1.jsx)(common_1.Button, tslib_1.__assign({ onClick: this.onDarken, style: { order: 1, flex: '1 1 auto', minWidth: 0 }, className: 'msp-form-control' }, { children: "Darken" }))] }))] }))] });
     };
     return CombinedColorControl;
 }(React.PureComponent));
@@ -80,8 +80,8 @@ function ColorOptions() {
     if (_colors)
         return _colors;
     _colors = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: swatches_1.DefaultColorSwatch.map(function (v) {
-            return (0, jsx_runtime_1.jsx)("option", (0, tslib_1.__assign)({ value: v[1], style: { background: "".concat(color_1.Color.toStyle(v[1])) } }, { children: (0, string_1.stringToWords)(v[0]) }), v[1]);
-        }) }, void 0);
+            return (0, jsx_runtime_1.jsx)("option", tslib_1.__assign({ value: v[1], style: { background: "".concat(color_1.Color.toStyle(v[1])) } }, { children: (0, string_1.stringToWords)(v[0]) }), v[1]);
+        }) });
     return _colors;
 }
 exports.ColorOptions = ColorOptions;
@@ -94,6 +94,6 @@ var DefaultColorSwatchMap = (function () {
     return map;
 })();
 function ColorValueOption(color) {
-    return !DefaultColorSwatchMap.has(color) ? (0, jsx_runtime_1.jsx)("option", (0, tslib_1.__assign)({ value: color, style: { background: "".concat(color_1.Color.toStyle(color)) } }, { children: color_1.Color.toRgbString(color) }), color_1.Color.toHexString(color)) : null;
+    return !DefaultColorSwatchMap.has(color) ? (0, jsx_runtime_1.jsx)("option", tslib_1.__assign({ value: color, style: { background: "".concat(color_1.Color.toStyle(color)) } }, { children: color_1.Color.toRgbString(color) }), color_1.Color.toHexString(color)) : null;
 }
 exports.ColorValueOption = ColorValueOption;

package/lib/commonjs/mol-plugin-ui/controls/common.js

@@ -8,11 +8,11 @@ var jsx_runtime_1 = require("react/jsx-runtime");
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var color_1 = require("../../mol-util/color");
 var icons_1 = require("./icons");
 var ControlGroup = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ControlGroup, _super);
+    tslib_1.__extends(ControlGroup, _super);
     function ControlGroup() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isExpanded: !!_this.props.initialExpanded };
@@ -31,14 +31,14 @@ var ControlGroup = /** @class */ (function (_super) {
         if (this.props.childrenClassName)
             groupClassName += ' ' + this.props.childrenClassName;
         // TODO: customize header style (bg color, togle button etc)
-        return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-wrapper', style: { position: 'relative', marginTop: this.props.noTopMargin ? 0 : void 0 } }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header', style: { marginLeft: this.props.headerLeftMargin }, title: this.props.title }, { children: (0, jsx_runtime_1.jsxs)(Button, (0, tslib_1.__assign)({ onClick: this.headerClicked }, { children: [!this.props.hideExpander && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg }, void 0), this.props.topRightIcon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.props.topRightIcon, style: { position: 'absolute', right: '2px', top: 0 } }, void 0), (0, jsx_runtime_1.jsx)("b", { children: this.props.header }, void 0)] }), void 0) }), void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: groupClassName, style: { display: this.state.isExpanded ? 'block' : 'none', maxHeight: this.props.maxHeight, overflow: 'hidden', overflowY: 'auto' } }, { children: this.props.children }), void 0)] }), void 0);
+        return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: 'msp-control-group-wrapper', style: { position: 'relative', marginTop: this.props.noTopMargin ? 0 : void 0 } }, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-group-header', style: { marginLeft: this.props.headerLeftMargin }, title: this.props.title }, { children: (0, jsx_runtime_1.jsxs)(Button, tslib_1.__assign({ onClick: this.headerClicked }, { children: [!this.props.hideExpander && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowRightSvg : icons_1.ArrowDropDownSvg }), this.props.topRightIcon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.props.topRightIcon, style: { position: 'absolute', right: '2px', top: 0 } }), (0, jsx_runtime_1.jsx)("b", { children: this.props.header })] })) })), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: groupClassName, style: { display: this.state.isExpanded ? 'block' : 'none', maxHeight: this.props.maxHeight, overflow: 'hidden', overflowY: 'auto' } }, { children: this.props.children }))] }));
     };
     return ControlGroup;
 }(React.Component));
 exports.ControlGroup = ControlGroup;
 function _id(x) { return x; }
 var TextInput = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(TextInput, _super);
+    tslib_1.__extends(TextInput, _super);
     function TextInput() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.input = React.createRef();
@@ -126,13 +126,13 @@ var TextInput = /** @class */ (function (_super) {
         return { originalValue: value, value: value };
     };
     TextInput.prototype.render = function () {
-        return (0, jsx_runtime_1.jsx)("input", { type: 'text', className: this.props.className, style: this.props.style, ref: this.input, onBlur: this.onBlur, value: this.state.value, placeholder: this.props.placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter || this.props.blurOnEnter || this.props.blurOnEscape ? this.onKeyPress : void 0, onKeyDown: this.props.blurOnEscape ? this.onKeyUp : void 0, disabled: !!this.props.isDisabled }, void 0);
+        return (0, jsx_runtime_1.jsx)("input", { type: 'text', className: this.props.className, style: this.props.style, ref: this.input, onBlur: this.onBlur, value: this.state.value, placeholder: this.props.placeholder, onChange: this.onChange, onKeyPress: this.props.onEnter || this.props.blurOnEnter || this.props.blurOnEscape ? this.onKeyPress : void 0, onKeyDown: this.props.blurOnEscape ? this.onKeyUp : void 0, disabled: !!this.props.isDisabled });
     };
     return TextInput;
 }(React.PureComponent));
 exports.TextInput = TextInput;
 var ExpandableControlRow = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ExpandableControlRow, _super);
+    tslib_1.__extends(ExpandableControlRow, _super);
     function ExpandableControlRow() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isExpanded: false };
@@ -142,13 +142,13 @@ var ExpandableControlRow = /** @class */ (function (_super) {
     ExpandableControlRow.prototype.render = function () {
         var _a = this.props, label = _a.label, pivot = _a.pivot, controls = _a.controls;
         // TODO: fix the inline CSS
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlRow, (0, tslib_1.__assign)({ label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, (0, jsx_runtime_1.jsx)("button", (0, tslib_1.__assign)({ className: 'msp-btn-link msp-btn-icon msp-control-group-expander', onClick: this.toggleExpanded, title: "".concat(this.state.isExpanded ? 'Less' : 'More', " options"), style: { background: 'transparent', textAlign: 'left', padding: '0' } }, { children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.RemoveSvg : icons_1.AddSvg, style: { display: 'inline-block' } }, void 0) }), void 0)] }, void 0), control: pivot }, { children: this.props.colorStripe && (0, jsx_runtime_1.jsx)("div", { className: 'msp-expandable-group-color-stripe', style: { backgroundColor: color_1.Color.toStyle(this.props.colorStripe) } }, void 0) }), void 0), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-offset' }, { children: controls }), void 0)] }, void 0);
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlRow, tslib_1.__assign({ label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, (0, jsx_runtime_1.jsx)("button", tslib_1.__assign({ className: 'msp-btn-link msp-btn-icon msp-control-group-expander', onClick: this.toggleExpanded, title: "".concat(this.state.isExpanded ? 'Less' : 'More', " options"), style: { background: 'transparent', textAlign: 'left', padding: '0' } }, { children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.RemoveSvg : icons_1.AddSvg, style: { display: 'inline-block' } }) }))] }), control: pivot }, { children: this.props.colorStripe && (0, jsx_runtime_1.jsx)("div", { className: 'msp-expandable-group-color-stripe', style: { backgroundColor: color_1.Color.toStyle(this.props.colorStripe) } }) })), this.state.isExpanded && (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-offset' }, { children: controls }))] });
     };
     return ExpandableControlRow;
 }(React.Component));
 exports.ExpandableControlRow = ExpandableControlRow;
 function SectionHeader(props) {
-    return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: "msp-section-header".concat(props.accent ? ' msp-transform-header-brand-' + props.accent : '') }, { children: [props.icon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.icon }, void 0), props.title, " ", (0, jsx_runtime_1.jsx)("small", { children: props.desc }, void 0)] }), void 0);
+    return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: "msp-section-header".concat(props.accent ? ' msp-transform-header-brand-' + props.accent : '') }, { children: [props.icon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.icon }), props.title, " ", (0, jsx_runtime_1.jsx)("small", { children: props.desc })] }));
 }
 exports.SectionHeader = SectionHeader;
 function Button(props) {
@@ -180,7 +180,7 @@ function Button(props) {
         else
             style = props.style;
     }
-    return (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ onClick: props.onClick, title: props.title, disabled: props.disabled, style: style, className: className, "data-id": props['data-id'], "data-color": props['data-color'], onContextMenu: props.onContextMenu, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, { children: [props.icon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.icon }, void 0), props.children] }), void 0);
+    return (0, jsx_runtime_1.jsxs)("button", tslib_1.__assign({ onClick: props.onClick, title: props.title, disabled: props.disabled, style: style, className: className, "data-id": props['data-id'], "data-color": props['data-color'], onContextMenu: props.onContextMenu, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave }, { children: [props.icon && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.icon }), props.children] }));
 }
 exports.Button = Button;
 function IconButton(props) {
@@ -206,11 +206,11 @@ function IconButton(props) {
         else
             style = props.style;
     }
-    return (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: className, onClick: props.onClick, title: props.title, disabled: props.disabled, "data-id": props['data-id'], style: style }, { children: [props.svg && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.svg }, void 0), props.extraContent] }), void 0);
+    return (0, jsx_runtime_1.jsxs)("button", tslib_1.__assign({ className: className, onClick: props.onClick, title: props.title, disabled: props.disabled, "data-id": props['data-id'], style: style }, { children: [props.svg && (0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: props.svg }), props.extraContent] }));
 }
 exports.IconButton = IconButton;
 var ToggleButton = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ToggleButton, _super);
+    tslib_1.__extends(ToggleButton, _super);
     function ToggleButton() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.onClick = function (e) {
@@ -223,13 +223,13 @@ var ToggleButton = /** @class */ (function (_super) {
         var props = this.props;
         var label = props.label;
         var className = props.isSelected ? "".concat(props.className || '', " msp-control-current") : props.className;
-        return (0, jsx_runtime_1.jsx)(Button, (0, tslib_1.__assign)({ icon: this.props.icon, onClick: this.onClick, title: this.props.title, inline: this.props.inline, disabled: props.disabled, style: props.style, className: className }, { children: label && this.props.isSelected ? (0, jsx_runtime_1.jsx)("b", { children: label }, void 0) : label }), void 0);
+        return (0, jsx_runtime_1.jsx)(Button, tslib_1.__assign({ icon: this.props.icon, onClick: this.onClick, title: this.props.title, inline: this.props.inline, disabled: props.disabled, style: props.style, className: className }, { children: label && this.props.isSelected ? (0, jsx_runtime_1.jsx)("b", { children: label }) : label }));
     };
     return ToggleButton;
 }(React.PureComponent));
 exports.ToggleButton = ToggleButton;
 var ExpandGroup = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(ExpandGroup, _super);
+    tslib_1.__extends(ExpandGroup, _super);
     function ExpandGroup() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = { isExpanded: !!_this.props.initiallyExpanded };
@@ -237,10 +237,10 @@ var ExpandGroup = /** @class */ (function (_super) {
         return _this;
     }
     ExpandGroup.prototype.render = function () {
-        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-group-header', style: { marginTop: this.props.marginTop !== void 0 ? this.props.marginTop : '1px', marginLeft: this.props.headerLeftMargin } }, { children: (0, jsx_runtime_1.jsxs)("button", (0, tslib_1.__assign)({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded, style: this.props.headerStyle }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg }, void 0), this.props.header] }), void 0) }), void 0), this.state.isExpanded &&
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-group-header', style: { marginTop: this.props.marginTop !== void 0 ? this.props.marginTop : '1px', marginLeft: this.props.headerLeftMargin } }, { children: (0, jsx_runtime_1.jsxs)("button", tslib_1.__assign({ className: 'msp-btn msp-form-control msp-btn-block', onClick: this.toggleExpanded, style: this.props.headerStyle }, { children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { svg: this.state.isExpanded ? icons_1.ArrowDropDownSvg : icons_1.ArrowRightSvg }), this.props.header] })) })), this.state.isExpanded &&
                     (this.props.noOffset
                         ? this.props.children
-                        : (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: this.props.accent ? 'msp-accent-offset' : 'msp-control-offset' }, { children: this.props.children }), void 0))] }, void 0);
+                        : (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: this.props.accent ? 'msp-accent-offset' : 'msp-control-offset' }, { children: this.props.children })))] });
     };
     return ExpandGroup;
 }(React.PureComponent));
@@ -249,6 +249,6 @@ function ControlRow(props) {
     var className = 'msp-control-row';
     if (props.className)
         className += ' ' + props.className;
-    return (0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: className }, { children: [(0, jsx_runtime_1.jsx)("span", (0, tslib_1.__assign)({ className: 'msp-control-row-label', title: props.title }, { children: props.label }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'msp-control-row-ctrl' }, { children: props.control }), void 0), props.children] }), void 0);
+    return (0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ className: 'msp-control-row-label', title: props.title }, { children: props.label })), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ className: 'msp-control-row-ctrl' }, { children: props.control })), props.children] }));
 }
 exports.ControlRow = ControlRow;