@nebula.js/sn-action-button 1.14.0

package/dist/sn-action-button.esm.js

@@ -0,0 +1,4291 @@
+/*
+* @nebula.js/sn-action-button v1.14.0
+* Copyright (c) 2021 QlikTech International AB
+* Released under the MIT license.
+*/
+
+import { useElement, useTheme, useMemo, useStaleLayout, useApp, useConstraints, useEffect, useImperativeHandle } from '@nebula.js/stardust';
+
+var properties = {
+  /**
+   * @type {boolean}
+   */
+  showTitles: false,
+
+  /**
+   * @type {string}
+   */
+  title: '',
+
+  /**
+   * @type {string}
+   */
+  subtitle: '',
+
+  /**
+   * @type {string}
+   */
+  footnote: '',
+
+  /**
+   * @type {boolean}
+   */
+  useEnabledCondition: false,
+
+  /**
+   * @type {number}
+   */
+  enabledCondition: 1,
+
+  /**
+   * @type {object}
+   */
+  navigation: {
+    action: 'none'
+  },
+
+  /**
+   * @type {object}
+   */
+  style: {
+    /**
+     * @type {string}
+     */
+    label: 'Button',
+
+    /**
+     * @type {object}
+     */
+    font: {
+      /**
+       * @type {number}
+       */
+      size: 0.5,
+
+      /**
+       * @type {boolean}
+       */
+      useColorExpression: false,
+
+      /**
+       * @type {object}
+       */
+      color: {
+        index: -1,
+        color: null
+      },
+
+      /**
+       * @type {string}
+       */
+      colorExpression: '',
+
+      /**
+       * @type {object}
+       */
+      style: {
+        bold: true,
+        italic: false,
+        underline: false
+      },
+
+      /**
+       * @type {string}
+       */
+      align: 'center'
+    },
+
+    /**
+     * @type {object}
+     */
+    background: {
+      /**
+       * @type {boolean}
+       */
+      useColorExpression: false,
+
+      /**
+       * @type {object}
+       */
+      color: {
+        index: -1,
+        color: null
+      },
+
+      /**
+       * @type {string}
+       */
+      colorExpression: '',
+
+      /**
+       * @type {boolean}
+       */
+      useImage: false,
+
+      /**
+       * @type {object}
+       */
+      url: {
+        /**
+         * @type {object}
+         */
+        qStaticContentUrlDef: {
+          /**
+           * @type {string}
+           */
+          qUrl: ''
+        }
+      },
+
+      /**
+       * @type {string}
+       */
+      size: 'auto',
+
+      /**
+       * @type {string}
+       */
+      position: 'centerCenter'
+    },
+
+    /**
+     * @type {object}
+     */
+    border: {
+      /**
+       * @type {boolean}
+       */
+      useBorder: false,
+
+      /**
+       * @type {number}
+       */
+      radius: 0,
+
+      /**
+       * @type {number}
+       */
+      width: 0,
+
+      /**
+       * @type {boolean}
+       */
+      useColorExpression: false,
+
+      /**
+       * @type {object}
+       */
+      color: {
+        index: -1,
+        color: null
+      },
+
+      /**
+       * @type {string}
+       */
+      colorExpression: ''
+    },
+
+    /**
+     * @type {object}
+     */
+    icon: {
+      /**
+       * @type {boolean}
+       */
+      useIcon: false,
+
+      /**
+       * @type {string}
+       */
+      iconType: '',
+
+      /**
+       * @type {string}
+       */
+      position: 'left'
+    }
+  },
+
+  /**
+   * @type {array}
+   */
+  actions: []
+};
+
+var data = {
+  targets: []
+};
+
+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 _objectSpread2(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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+function _asyncToGenerator(fn) {
+  return function () {
+    var self = this,
+        args = arguments;
+    return new Promise(function (resolve, reject) {
+      var gen = fn.apply(self, args);
+
+      function _next(value) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+      }
+
+      function _throw(err) {
+        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+      }
+
+      _next(undefined);
+    });
+  };
+}
+
+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;
+}
+
+var getValueList = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(app, values, isDate) {
+    var valuesArray, dateExpression, convertedDates;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            valuesArray = values.split(';');
+
+            if (!isDate) {
+              _context.next = 8;
+              break;
+            }
+
+            dateExpression = '';
+            valuesArray.forEach(function (date) {
+              dateExpression += "Num('".concat(date, "')&';'&");
+            });
+            _context.next = 6;
+            return app.evaluate(dateExpression.slice(0, -5));
+
+          case 6:
+            convertedDates = _context.sent;
+            valuesArray = convertedDates.split(';');
+
+          case 8:
+            return _context.abrupt("return", valuesArray.map(function (value) {
+              return Number.isNaN(+value) ? {
+                qText: value
+              } : {
+                qIsNumeric: true,
+                qNumber: Number(value)
+              };
+            }));
+
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function getValueList(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var actions = [{
+  value: 'applyBookmark',
+  translation: 'Object.ActionButton.ApplyBookmark',
+  group: 'bookmark',
+  getActionCall: function getActionCall(_ref2) {
+    var app = _ref2.app,
+        bookmark = _ref2.bookmark;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var bookMarks, findBm;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return app.getBookmarkList();
+
+            case 2:
+              bookMarks = _context2.sent;
+              findBm = bookMarks.find(function (bm) {
+                return bm.qData.title === bookmark;
+              });
+              _context2.t0 = bookmark;
+
+              if (!_context2.t0) {
+                _context2.next = 8;
+                break;
+              }
+
+              _context2.next = 8;
+              return app.applyBookmark(findBm && findBm.qInfo && findBm.qInfo.qId || bookmark);
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+  },
+  requiredInput: ['bookmark']
+}, {
+  value: 'back',
+  translation: 'Object.ActionButton.MoveBackward',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref4) {
+    var app = _ref4.app;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return app.back();
+
+            case 2:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+  },
+  requiredInput: []
+}, {
+  value: 'forward',
+  translation: 'Object.ActionButton.MoveForward',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref6) {
+    var app = _ref6.app;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return app.forward();
+
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+  },
+  requiredInput: []
+}, {
+  value: 'clearAll',
+  translation: 'Object.ActionButton.ClearAll',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref8) {
+    var app = _ref8.app,
+        softLock = _ref8.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return app.clearAll(softLock);
+
+            case 2:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    }));
+  },
+  requiredInput: ['softLock']
+}, {
+  value: 'clearAllButThis',
+  translation: 'Object.ActionButton.ClearAllButThis',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref10) {
+    var app = _ref10.app,
+        qStateName = _ref10.qStateName,
+        field = _ref10.field,
+        softLock = _ref10.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              if (!field) {
+                _context6.next = 6;
+                break;
+              }
+
+              _context6.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context6.sent;
+              _context6.next = 6;
+              return fieldObj.clearAllButThis(softLock);
+
+            case 6:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    }));
+  },
+  requiredInput: ['field', 'softLock']
+}, {
+  value: 'clearField',
+  translation: 'Object.ActionButton.ClearSelectionInField',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref12) {
+    var app = _ref12.app,
+        qStateName = _ref12.qStateName,
+        field = _ref12.field;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee7$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              if (!field) {
+                _context7.next = 6;
+                break;
+              }
+
+              _context7.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context7.sent;
+              _context7.next = 6;
+              return fieldObj.clear();
+
+            case 6:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee7);
+    }));
+  },
+  requiredInput: ['field']
+}, {
+  value: 'selectAll',
+  translation: 'Object.ActionButton.SelectAllInField',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref14) {
+    var app = _ref14.app,
+        qStateName = _ref14.qStateName,
+        field = _ref14.field,
+        softLock = _ref14.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee8$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              if (!field) {
+                _context8.next = 6;
+                break;
+              }
+
+              _context8.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context8.sent;
+              _context8.next = 6;
+              return fieldObj.selectAll(softLock);
+
+            case 6:
+            case "end":
+              return _context8.stop();
+          }
+        }
+      }, _callee8);
+    }));
+  },
+  requiredInput: ['field', 'softLock']
+}, {
+  value: 'selectValues',
+  translation: 'Object.ActionButton.SelectValuesInField',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref16) {
+    var app = _ref16.app,
+        qStateName = _ref16.qStateName,
+        field = _ref16.field,
+        value = _ref16.value,
+        softLock = _ref16.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
+      var fieldObj, fieldInfo, valueList;
+      return regeneratorRuntime.wrap(function _callee9$(_context9) {
+        while (1) {
+          switch (_context9.prev = _context9.next) {
+            case 0:
+              if (!(field && value)) {
+                _context9.next = 12;
+                break;
+              }
+
+              _context9.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context9.sent;
+              _context9.next = 6;
+              return app.getFieldDescription(field);
+
+            case 6:
+              fieldInfo = _context9.sent;
+              _context9.next = 9;
+              return getValueList(app, value, fieldInfo.qTags.includes('$date'));
+
+            case 9:
+              valueList = _context9.sent;
+              _context9.next = 12;
+              return fieldObj.selectValues(valueList, false, softLock);
+
+            case 12:
+            case "end":
+              return _context9.stop();
+          }
+        }
+      }, _callee9);
+    }));
+  },
+  requiredInput: ['field', 'value', 'softLock']
+}, {
+  value: 'selectMatchingValues',
+  translation: 'Object.ActionButton.SelectMatchingValues',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref18) {
+    var app = _ref18.app,
+        qStateName = _ref18.qStateName,
+        field = _ref18.field,
+        value = _ref18.value,
+        softLock = _ref18.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee10$(_context10) {
+        while (1) {
+          switch (_context10.prev = _context10.next) {
+            case 0:
+              if (!(field && value)) {
+                _context10.next = 6;
+                break;
+              }
+
+              _context10.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context10.sent;
+              _context10.next = 6;
+              return fieldObj.select(value, false, softLock);
+
+            case 6:
+            case "end":
+              return _context10.stop();
+          }
+        }
+      }, _callee10);
+    }));
+  },
+  requiredInput: ['field', 'value', 'softLock']
+}, {
+  value: 'selectAlternative',
+  translation: 'Object.ActionButton.SelectAlternatives',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref20) {
+    var app = _ref20.app,
+        qStateName = _ref20.qStateName,
+        field = _ref20.field,
+        softLock = _ref20.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee11$(_context11) {
+        while (1) {
+          switch (_context11.prev = _context11.next) {
+            case 0:
+              if (!field) {
+                _context11.next = 6;
+                break;
+              }
+
+              _context11.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context11.sent;
+              _context11.next = 6;
+              return fieldObj.selectAlternative(softLock);
+
+            case 6:
+            case "end":
+              return _context11.stop();
+          }
+        }
+      }, _callee11);
+    }));
+  },
+  requiredInput: ['field', 'softLock']
+}, {
+  value: 'selectExcluded',
+  translation: 'Object.ActionButton.SelectExcluded',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref22) {
+    var app = _ref22.app,
+        qStateName = _ref22.qStateName,
+        field = _ref22.field,
+        softLock = _ref22.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee12$(_context12) {
+        while (1) {
+          switch (_context12.prev = _context12.next) {
+            case 0:
+              if (!field) {
+                _context12.next = 6;
+                break;
+              }
+
+              _context12.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context12.sent;
+              _context12.next = 6;
+              return fieldObj.selectExcluded(softLock);
+
+            case 6:
+            case "end":
+              return _context12.stop();
+          }
+        }
+      }, _callee12);
+    }));
+  },
+  requiredInput: ['field', 'softLock']
+}, {
+  value: 'selectPossible',
+  translation: 'Object.ActionButton.SelectPossibleValues',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref24) {
+    var app = _ref24.app,
+        qStateName = _ref24.qStateName,
+        field = _ref24.field,
+        softLock = _ref24.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee13$(_context13) {
+        while (1) {
+          switch (_context13.prev = _context13.next) {
+            case 0:
+              if (!field) {
+                _context13.next = 6;
+                break;
+              }
+
+              _context13.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context13.sent;
+              _context13.next = 6;
+              return fieldObj.selectPossible(softLock);
+
+            case 6:
+            case "end":
+              return _context13.stop();
+          }
+        }
+      }, _callee13);
+    }));
+  },
+  requiredInput: ['field', 'softLock']
+}, {
+  value: 'toggleSelect',
+  translation: 'Object.ActionButton.ToggleFieldSelection',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref26) {
+    var app = _ref26.app,
+        qStateName = _ref26.qStateName,
+        field = _ref26.field,
+        value = _ref26.value,
+        softLock = _ref26.softLock;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee14() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              if (!(field && value)) {
+                _context14.next = 6;
+                break;
+              }
+
+              _context14.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context14.sent;
+              _context14.next = 6;
+              return fieldObj.toggleSelect(value, softLock);
+
+            case 6:
+            case "end":
+              return _context14.stop();
+          }
+        }
+      }, _callee14);
+    }));
+  },
+  requiredInput: ['field', 'value', 'softLock']
+}, {
+  value: 'lockAll',
+  translation: 'Object.ActionButton.LockAllSelections',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref28) {
+    var app = _ref28.app;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee15() {
+      return regeneratorRuntime.wrap(function _callee15$(_context15) {
+        while (1) {
+          switch (_context15.prev = _context15.next) {
+            case 0:
+              _context15.next = 2;
+              return app.lockAll();
+
+            case 2:
+            case "end":
+              return _context15.stop();
+          }
+        }
+      }, _callee15);
+    }));
+  },
+  requiredInput: []
+}, {
+  value: 'lockField',
+  translation: 'Object.ActionButton.LockField',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref30) {
+    var app = _ref30.app,
+        qStateName = _ref30.qStateName,
+        field = _ref30.field;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee16() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              if (!field) {
+                _context16.next = 6;
+                break;
+              }
+
+              _context16.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context16.sent;
+              _context16.next = 6;
+              return fieldObj.lock();
+
+            case 6:
+            case "end":
+              return _context16.stop();
+          }
+        }
+      }, _callee16);
+    }));
+  },
+  requiredInput: ['field']
+}, {
+  value: 'unlockAll',
+  translation: 'Object.ActionButton.UnlockAllSelections',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref32) {
+    var app = _ref32.app;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee17() {
+      return regeneratorRuntime.wrap(function _callee17$(_context17) {
+        while (1) {
+          switch (_context17.prev = _context17.next) {
+            case 0:
+              _context17.next = 2;
+              return app.unlockAll();
+
+            case 2:
+            case "end":
+              return _context17.stop();
+          }
+        }
+      }, _callee17);
+    }));
+  },
+  requiredInput: []
+}, {
+  value: 'unlockField',
+  translation: 'Object.ActionButton.UnlockAField',
+  group: 'selection',
+  getActionCall: function getActionCall(_ref34) {
+    var app = _ref34.app,
+        qStateName = _ref34.qStateName,
+        field = _ref34.field;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee18() {
+      var fieldObj;
+      return regeneratorRuntime.wrap(function _callee18$(_context18) {
+        while (1) {
+          switch (_context18.prev = _context18.next) {
+            case 0:
+              if (!field) {
+                _context18.next = 6;
+                break;
+              }
+
+              _context18.next = 3;
+              return app.getField(field, qStateName);
+
+            case 3:
+              fieldObj = _context18.sent;
+              _context18.next = 6;
+              return fieldObj.unlock();
+
+            case 6:
+            case "end":
+              return _context18.stop();
+          }
+        }
+      }, _callee18);
+    }));
+  },
+  requiredInput: ['field']
+}, {
+  value: 'setVariable',
+  translation: 'Object.ActionButton.SetVariable',
+  group: 'variables',
+  getActionCall: function getActionCall(_ref36) {
+    var app = _ref36.app,
+        variable = _ref36.variable,
+        value = _ref36.value;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee19() {
+      var variableObj;
+      return regeneratorRuntime.wrap(function _callee19$(_context19) {
+        while (1) {
+          switch (_context19.prev = _context19.next) {
+            case 0:
+              if (!(variable && value)) {
+                _context19.next = 11;
+                break;
+              }
+
+              _context19.prev = 1;
+              _context19.next = 4;
+              return app.getVariableByName(variable);
+
+            case 4:
+              variableObj = _context19.sent;
+              _context19.next = 7;
+              return variableObj.setStringValue(value);
+
+            case 7:
+              _context19.next = 11;
+              break;
+
+            case 9:
+              _context19.prev = 9;
+              _context19.t0 = _context19["catch"](1);
+
+            case 11:
+            case "end":
+              return _context19.stop();
+          }
+        }
+      }, _callee19, null, [[1, 9]]);
+    }));
+  },
+  requiredInput: ['variable', 'value']
+}, {
+  value: 'doReload',
+  translation: 'Object.ActionButton.DoReload',
+  group: 'reload',
+  getActionCall: function getActionCall(_ref38) {
+    var app = _ref38.app,
+        partial = _ref38.partial;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee20() {
+      var e;
+      return regeneratorRuntime.wrap(function _callee20$(_context20) {
+        while (1) {
+          switch (_context20.prev = _context20.next) {
+            case 0:
+              _context20.next = 2;
+              return app.doReload(0, !!partial, false);
+
+            case 2:
+              e = _context20.sent;
+
+              if (!e) {
+                _context20.next = 6;
+                break;
+              }
+
+              _context20.next = 6;
+              return app.doSave();
+
+            case 6:
+            case "end":
+              return _context20.stop();
+          }
+        }
+      }, _callee20);
+    }));
+  },
+  requiredInput: ['partial']
+}, {
+  /** *************************************
+   * Execute Automation contacts internal urls to obtain automation
+   * information and execute the automation selected in the property panel in
+   * edit mode.
+   *
+   * ARGS
+   * app - Reference to current app inherited from index.js
+   * automation - the item id of the automation to contact the items api
+   * automationPostData - boolean value. If true, creates a bookmark of the
+   * current selections and sends the resulting bookmark id as an input
+   * parameter to the selected automation.
+   */
+  translation: 'Object.ActionButton.ExecuteAutomation',
+  value: 'executeAutomation',
+  getActionCall: function getActionCall(_ref40) {
+    var app = _ref40.app,
+        automation = _ref40.automation,
+        automationPostData = _ref40.automationPostData;
+    return /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee21() {
+      var itemInfo, autoInfo, executePath, inputBlock, newDate, bmkProp, bmk;
+      return regeneratorRuntime.wrap(function _callee21$(_context21) {
+        while (1) {
+          switch (_context21.prev = _context21.next) {
+            case 0:
+              if (!(automation !== undefined)) {
+                _context21.next = 26;
+                break;
+              }
+
+              _context21.prev = 1;
+              automation = encodeURIComponent(automation);
+              _context21.next = 5;
+              return fetch("../api/v1/items/".concat(automation)).then(function (response) {
+                return response.json();
+              });
+
+            case 5:
+              itemInfo = _context21.sent;
+              _context21.next = 8;
+              return fetch("../api/v1/automations/".concat(itemInfo.resourceId)).then(function (response) {
+                return response.json();
+              });
+
+            case 8:
+              autoInfo = _context21.sent;
+              executePath = "../api/v1/automations/".concat(autoInfo.guid, "/actions/execute?X-Execution-Token=").concat(autoInfo.execution_token);
+
+              if (!(automationPostData && autoInfo.hasinputs)) {
+                _context21.next = 20;
+                break;
+              }
+
+              _context21.next = 13;
+              return fetch("../api/v1/automations/".concat(itemInfo.resourceId, "/blocks")).then(function (response) {
+                return response.json();
+              }).then(function (blocks) {
+                var item;
+
+                for (var i = 0; i < blocks.blocks.length; i++) {
+                  if (blocks.blocks[i].displayName === 'Inputs') {
+                    item = blocks.blocks[i];
+                    break;
+                  }
+                }
+
+                return item.form[0].label.toLowerCase();
+              });
+
+            case 13:
+              inputBlock = _context21.sent;
+              newDate = new Date();
+              bmkProp = {
+                qProp: {
+                  qInfo: {
+                    qId: "automation_".concat(app.id, "_").concat(automation, "_").concat(newDate.getTime()),
+                    qType: 'bookmark'
+                  },
+                  qMetaDef: {
+                    title: "Generated automation bookmark on ".concat(newDate.toISOString()),
+                    description: 'Generated to provide target automation with bookmark to get current selection state',
+                    _createdBy: 'sn-action-button',
+                    _createdFor: 'automation',
+                    _createdOn: "".concat(newDate.toISOString()),
+                    _id: "automation_".concat(encodeURIComponent(app.id), "_").concat(automation, "_").concat(newDate.getTime())
+                  }
+                }
+              };
+              _context21.next = 18;
+              return app.createBookmark(bmkProp).then(function (bookmark) {
+                return bookmark.getLayout();
+              }).then(function (layout) {
+                return layout.qInfo.qId;
+              });
+
+            case 18:
+              bmk = _context21.sent;
+              executePath = "".concat(executePath, "&").concat(inputBlock, "=").concat(bmk);
+
+            case 20:
+              _context21.next = 22;
+              return fetch(executePath).then(function (response) {
+                return response.json();
+              });
+
+            case 22:
+              _context21.next = 26;
+              break;
+
+            case 24:
+              _context21.prev = 24;
+              _context21.t0 = _context21["catch"](1);
+
+            case 26:
+            case "end":
+              return _context21.stop();
+          }
+        }
+      }, _callee21, null, [[1, 24]]);
+    }));
+  },
+  requiredInput: ['automation']
+}];
+function checkShowAction(data, field) {
+  var act = actions.find(function (action) {
+    return data.actionType === action.value;
+  });
+  return act && act.requiredInput && act.requiredInput.indexOf(field) !== -1;
+}
+
+function evaluateCondition(condition) {
+  // case condition is commented
+  if (condition && condition.length >= 2 && condition[0] === '/' && condition[1] === '/') {
+    return true;
+  } // convert to numeric with -1 (true) as the default
+
+
+  var condVal = condition ? +condition : -1; // handle the string 'true' as true and all other strings as false
+
+  if (Number.isNaN(+condVal)) {
+    return condition.toLowerCase() === 'true';
+  }
+
+  return condVal !== 0;
+}
+
+var Util = {
+  evaluateCondition: evaluateCondition
+};
+
+var inIframe = function inIframe() {
+  try {
+    return window.self !== window.top;
+  } catch (error) {
+    return true;
+  }
+};
+var getOrderedVisibleSheet = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(app) {
+    var sheets, visibleSheets;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return app.getSheetList();
+
+          case 2:
+            sheets = _context2.sent;
+            visibleSheets = sheets.filter(function (sheet) {
+              return Util.evaluateCondition(sheet.qData.showCondition);
+            });
+            return _context2.abrupt("return", visibleSheets.sort(function (current, next) {
+              return current.qData.rank - next.qData.rank;
+            }));
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  return function getOrderedVisibleSheet(_x2) {
+    return _ref2.apply(this, arguments);
+  };
+}();
+var navigationActions = [{
+  translation: 'Object.ActionButton.NoNavigation',
+  value: 'none'
+}, {
+  translation: 'Object.ActionButton.GoToNextSheet',
+  value: 'nextSheet',
+  navigationCall: function () {
+    var _navigationCall = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_ref3) {
+      var senseNavigation;
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              senseNavigation = _ref3.senseNavigation;
+              _context3.next = 3;
+              return senseNavigation.nextSheet();
+
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    function navigationCall(_x3) {
+      return _navigationCall.apply(this, arguments);
+    }
+
+    return navigationCall;
+  }(),
+  requiredInput: []
+}, {
+  translation: 'Object.ActionButton.GoToPreviousSheet',
+  value: 'prevSheet',
+  navigationCall: function () {
+    var _navigationCall2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4(_ref4) {
+      var senseNavigation;
+      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              senseNavigation = _ref4.senseNavigation;
+              _context4.next = 3;
+              return senseNavigation.prevSheet();
+
+            case 3:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }));
+
+    function navigationCall(_x4) {
+      return _navigationCall2.apply(this, arguments);
+    }
+
+    return navigationCall;
+  }(),
+  requiredInput: []
+}, {
+  translation: 'Object.ActionButton.GoToLastSheet',
+  value: 'lastSheet',
+  navigationCall: function () {
+    var _navigationCall3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(_ref5) {
+      var app, senseNavigation, sheets;
+      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              app = _ref5.app, senseNavigation = _ref5.senseNavigation;
+              _context5.next = 3;
+              return getOrderedVisibleSheet(app);
+
+            case 3:
+              sheets = _context5.sent;
+              _context5.next = 6;
+              return senseNavigation.goToSheet(sheets[sheets.length - 1].qInfo.qId);
+
+            case 6:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    }));
+
+    function navigationCall(_x5) {
+      return _navigationCall3.apply(this, arguments);
+    }
+
+    return navigationCall;
+  }(),
+  requiredInput: []
+}, {
+  translation: 'Object.ActionButton.GoToFirstSheet',
+  value: 'firstSheet',
+  navigationCall: function () {
+    var _navigationCall4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(_ref6) {
+      var app, senseNavigation, sheets;
+      return regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) {
+          switch (_context6.prev = _context6.next) {
+            case 0:
+              app = _ref6.app, senseNavigation = _ref6.senseNavigation;
+              _context6.next = 3;
+              return getOrderedVisibleSheet(app);
+
+            case 3:
+              sheets = _context6.sent;
+              _context6.next = 6;
+              return senseNavigation.goToSheet(sheets[0].qInfo.qId);
+
+            case 6:
+            case "end":
+              return _context6.stop();
+          }
+        }
+      }, _callee6);
+    }));
+
+    function navigationCall(_x6) {
+      return _navigationCall4.apply(this, arguments);
+    }
+
+    return navigationCall;
+  }(),
+  requiredInput: []
+}, {
+  translation: 'Object.ActionButton.GoToASheet',
+  value: 'goToSheet',
+  navigationCall: function () {
+    var _navigationCall5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7(_ref7) {
+      var senseNavigation, sheet;
+      return regeneratorRuntime.wrap(function _callee7$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              senseNavigation = _ref7.senseNavigation, sheet = _ref7.sheet;
+              _context7.t0 = sheet;
+
+              if (!_context7.t0) {
+                _context7.next = 5;
+                break;
+              }
+
+              _context7.next = 5;
+              return senseNavigation.goToSheet(sheet);
+
+            case 5:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee7);
+    }));
+
+    function navigationCall(_x7) {
+      return _navigationCall5.apply(this, arguments);
+    }
+
+    return navigationCall;
+  }(),
+  // TODO replace by searchable dropdown
+  requiredInput: ['sheet']
+}, {
+  translation: 'Object.ActionButton.GoToSheetById',
+  value: 'goToSheetById',
+  navigationCall: function () {
+    var _navigationCall6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8(_ref8) {
+      var senseNavigation, sheet;
+      return regeneratorRuntime.wrap(function _callee8$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              senseNavigation = _ref8.senseNavigation, sheet = _ref8.sheet;
+              _context8.t0 = sheet;
+
+              if (!_context8.t0) {
+                _context8.next = 5;
+                break;
+              }
+
+              _context8.next = 5;
+              return senseNavigation.goToSheet(sheet);
+
+            case 5:
+            case "end":
+              return _context8.stop();
+          }
+        }
+      }, _callee8);
+    }));
+
+    function navigationCall(_x8) {
+      return _navigationCall6.apply(this, arguments);
+    }
+
+    return navigationCall;
+  }(),
+  // TODO replace by searchable dropdown
+  requiredInput: ['sheetId']
+}, {
+  translation: 'Object.ActionButton.GoToStory',
+  value: 'goToStory',
+  navigationCall: function () {
+    var _navigationCall7 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9(_ref9) {
+      var senseNavigation, story;
+      return regeneratorRuntime.wrap(function _callee9$(_context9) {
+        while (1) {
+          switch (_context9.prev = _context9.next) {
+            case 0:
+              senseNavigation = _ref9.senseNavigation, story = _ref9.story;
+              _context9.t0 = story;
+
+              if (!_context9.t0) {
+                _context9.next = 5;
+                break;
+              }
+
+              _context9.next = 5;
+              return senseNavigation.goToStory(story);
+
+            case 5:
+            case "end":
+              return _context9.stop();
+          }
+        }
+      }, _callee9);
+    }));
+
+    function navigationCall(_x9) {
+      return _navigationCall7.apply(this, arguments);
+    }
+
+    return navigationCall;
+  }(),
+  requiredInput: ['story']
+}, {
+  translation: 'Object.ActionButton.OpenWebsiteEmail',
+  value: 'openWebsite',
+  navigationCall: function () {
+    var _navigationCall8 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(_ref10) {
+      var websiteUrl, sameWindow, url, target;
+      return regeneratorRuntime.wrap(function _callee10$(_context10) {
+        while (1) {
+          switch (_context10.prev = _context10.next) {
+            case 0:
+              websiteUrl = _ref10.websiteUrl, sameWindow = _ref10.sameWindow;
+
+              try {
+                if (websiteUrl) {
+                  url = websiteUrl.match(/^(https?:\/\/|mailto:)/) ? websiteUrl : "http://".concat(websiteUrl);
+                  target = '';
+
+                  if (sameWindow) {
+                    target = inIframe() ? '_parent' : '_self';
+                  }
+
+                  window.open(url, target);
+                }
+              } catch (error) {// no-op
+              }
+
+            case 2:
+            case "end":
+              return _context10.stop();
+          }
+        }
+      }, _callee10);
+    }));
+
+    function navigationCall(_x10) {
+      return _navigationCall8.apply(this, arguments);
+    }
+
+    return navigationCall;
+  }(),
+  requiredInput: ['websiteUrl']
+}];
+var checkShowNavigation = function checkShowNavigation(data, field) {
+  var nav = navigationActions.find(function (navigation) {
+    return data.navigation.action === navigation.value;
+  });
+  return nav && nav.requiredInput && nav.requiredInput.indexOf(field) !== -1;
+};
+
+function getValue(dataContainer, reference, defaultValue) {
+  var steps = reference.split('.');
+  var i;
+
+  if (dataContainer === undefined) {
+    return defaultValue;
+  }
+
+  for (i = 0; i < steps.length; ++i) {
+    if (typeof dataContainer[steps[i]] === 'undefined') {
+      return defaultValue;
+    }
+
+    dataContainer = dataContainer[steps[i]];
+  }
+
+  return dataContainer;
+}
+
+var propertyResolver = {
+  getValue: getValue
+};
+
+function convertAction(action, newProperties) {
+  var newAction = {
+    actionType: action.actionType,
+    bookmark: action.selectedBookmark,
+    // Will need to convert field selected by expression
+    field: action.selectedField,
+    // Need to convert expression for variable
+    variable: action.variable,
+    value: action.value,
+    softLock: action.softLock,
+    cId: action.cId
+  };
+
+  switch (action.actionType) {
+    case 'clearOther':
+      newAction.actionType = 'clearAllButThis';
+      break;
+
+    case 'unlockAllAndClearAll':
+      newAction.actionType = 'clearAll';
+      newAction.softLock = true;
+      break;
+
+    case 'selectField':
+      newAction.actionType = 'selectMatchingValues';
+      break;
+
+    case 'selectAndLockField':
+      newProperties.actions.push(_objectSpread2(_objectSpread2({}, newAction), {}, {
+        cId: null,
+        actionType: 'selectMatchingValues'
+      }));
+      newAction.actionType = 'lockField';
+      break;
+  }
+
+  return newProperties.actions.push(newAction);
+}
+function convertNavigation(oldType) {
+  switch (oldType) {
+    case 'gotoSheet':
+      return 'goToSheet';
+
+    case 'gotoSheetById':
+      return 'goToSheetById';
+
+    case 'gotoStory':
+      return 'goToStory';
+
+    case 'switchToEdit':
+      return 'none';
+
+    default:
+      return oldType;
+  }
+}
+
+var importProperties = function importProperties(exportedFmt, initialProperties) {
+  var newPropertyTree = {
+    qChildren: []
+  };
+
+  var newProperties = _objectSpread2({
+    actions: [],
+    // Adding props to avoid errors from old navigation button. Converting to any other chart will still give these errors
+    props: {
+      useEnabledCondition: null,
+      fullWidth: 'auto'
+    },
+    qLayoutExclude: {
+      disabled: {}
+    }
+  }, initialProperties);
+
+  if (exportedFmt && exportedFmt.properties.visualization === 'qlik-button-for-navigation') {
+    Object.keys(exportedFmt.properties).forEach(function (key) {
+      var props;
+
+      switch (key) {
+        case 'props':
+          props = exportedFmt.properties[key];
+          newProperties.style.label = props.buttonLabel;
+          newProperties.style.icon.useIcon = props.buttonShowIcon;
+          newProperties.style.icon.iconType = props.buttonIconLui;
+          newProperties.style.font.align = props.buttonTextAlign;
+          newProperties.useEnabledCondition = props.useEnabledCondition;
+          newProperties.enabledCondition = props.enabledCondition;
+          props.actionItems && props.actionItems.forEach(function (actionItem) {
+            convertAction(actionItem, newProperties);
+          });
+          newProperties.navigation = {
+            action: convertNavigation(props.navigationAction),
+            // Need to convert sheet from expression
+            sheet: props.navigationAction === 'gotoSheetById' ? props.sheetId : props.selectedSheet,
+            story: props.selectedStory,
+            websiteUrl: props.websiteUrl,
+            sameWindow: props.sameWindow
+          };
+          break;
+
+        case 'qStateName':
+        case 'showTitles':
+        case 'title':
+        case 'subtitle':
+        case 'footnote':
+          newProperties[key] = exportedFmt.properties[key];
+          break;
+      }
+    });
+  }
+
+  newPropertyTree.qProperty = newProperties;
+  return newPropertyTree;
+};
+
+var luiIcons = [{
+  value: 'image',
+  icon: 'image',
+  label: 'Image'
+}, {
+  value: 'back',
+  icon: 'back',
+  label: 'Back'
+}, {
+  value: 'forward',
+  icon: 'forward',
+  label: 'Forward'
+}, {
+  value: 'history',
+  icon: 'history',
+  label: 'History'
+}, {
+  value: 'help',
+  icon: 'help',
+  label: 'Help'
+}, {
+  value: 'info',
+  icon: 'info',
+  label: 'Info'
+}, {
+  value: 'text',
+  icon: 'text',
+  label: 'Text'
+}, {
+  value: 'group',
+  icon: 'group',
+  label: 'Group'
+}, {
+  value: 'search',
+  icon: 'search',
+  label: 'Search'
+}, {
+  value: 'zoom-in',
+  icon: 'zoom-in',
+  label: 'Zoom in'
+}, {
+  value: 'zoom-out',
+  icon: 'zoom-out',
+  label: 'Zoom out'
+}, {
+  value: 'export',
+  icon: 'export',
+  label: 'Export'
+}, {
+  value: 'import',
+  icon: 'import',
+  label: 'Import'
+}, {
+  value: 'field',
+  icon: 'field',
+  label: 'Field'
+}, {
+  value: 'lock',
+  icon: 'lock',
+  label: 'Lock'
+}, {
+  value: 'unlock',
+  icon: 'unlock',
+  label: 'Unlock'
+}, {
+  value: 'database',
+  icon: 'database',
+  label: 'Database'
+}, {
+  value: 'calendar',
+  icon: 'calendar',
+  label: 'Calendar'
+}, {
+  value: 'bookmark',
+  icon: 'bookmark',
+  label: 'Bookmark'
+}, {
+  value: 'library',
+  icon: 'library',
+  label: 'Library'
+}, {
+  value: 'star',
+  icon: 'star',
+  label: 'Star'
+}, {
+  value: 'print',
+  icon: 'print',
+  label: 'Print'
+}, {
+  value: 'remove',
+  icon: 'remove',
+  label: 'Remove'
+}, {
+  value: 'handle',
+  icon: 'handle',
+  label: 'Handle'
+}, {
+  value: 'handle-horizontal',
+  icon: 'handle-horizontal',
+  label: 'Handle horizontal'
+}, {
+  value: 'menu',
+  icon: 'menu',
+  label: 'Menu'
+}, {
+  value: 'list',
+  icon: 'list',
+  label: 'List'
+}, {
+  value: 'unordered-list',
+  icon: 'unordered-list',
+  label: 'Unordered list'
+}, {
+  value: 'clock',
+  icon: 'clock',
+  label: 'Clock'
+}, {
+  value: 'puzzle',
+  icon: 'puzzle',
+  label: 'Puzzle'
+}, {
+  value: 'filterpane',
+  icon: 'filterpane',
+  label: 'Filterpane'
+}, {
+  value: 'plus',
+  icon: 'plus',
+  label: 'Plus'
+}, {
+  value: 'minus',
+  icon: 'minus',
+  label: 'Minus'
+}, {
+  value: 'triangle-top',
+  icon: 'triangle-top',
+  label: 'Triangle top'
+}, {
+  value: 'triangle-bottom',
+  icon: 'triangle-bottom',
+  label: 'Triangle bottom'
+}, {
+  value: 'triangle-left',
+  icon: 'triangle-left',
+  label: 'Triangle left'
+}, {
+  value: 'triangle-right',
+  icon: 'triangle-right',
+  label: 'Triangle right'
+}, {
+  value: 'tick',
+  icon: 'tick',
+  label: 'Tick'
+}, {
+  value: 'cogwheel',
+  icon: 'cogwheel',
+  label: 'Cogwheel'
+}, {
+  value: 'settings',
+  icon: 'settings',
+  label: 'Settings'
+}, {
+  value: 'cut',
+  icon: 'cut',
+  label: 'Cut'
+}, {
+  value: 'copy',
+  icon: 'copy',
+  label: 'Copy'
+}, {
+  value: 'paste',
+  icon: 'paste',
+  label: 'Paste'
+}, {
+  value: 'camera',
+  icon: 'camera',
+  label: 'Camera'
+}, {
+  value: 'slide-show',
+  icon: 'slide-show',
+  label: 'Slide show'
+}, {
+  value: 'palette',
+  icon: 'palette',
+  label: 'Palette'
+}, {
+  value: 'shapes',
+  icon: 'shapes',
+  label: 'Shapes'
+}, {
+  value: 'effects',
+  icon: 'effects',
+  label: 'Effects'
+}, {
+  value: 'file',
+  icon: 'file',
+  label: 'File'
+}, {
+  value: 'expand',
+  icon: 'expand',
+  label: 'Expand'
+}, {
+  value: 'collapse',
+  icon: 'collapse',
+  label: 'Collapse'
+}, {
+  value: 'bin',
+  icon: 'bin',
+  label: 'Bin'
+}, {
+  value: 'link',
+  icon: 'link',
+  label: 'Link'
+}, {
+  value: 'pivot',
+  icon: 'pivot',
+  label: 'Pivot'
+}, {
+  value: 'reload',
+  icon: 'reload',
+  label: 'Reload'
+}, {
+  value: 'add',
+  icon: 'add',
+  label: 'Add'
+}, {
+  value: 'edit',
+  icon: 'edit',
+  label: 'Edit'
+}, {
+  value: 'key',
+  icon: 'key',
+  label: 'Key'
+}, {
+  value: 'box',
+  icon: 'box',
+  label: 'Box'
+}, {
+  value: 'home',
+  icon: 'home',
+  label: 'Home'
+}, {
+  value: 'person',
+  icon: 'person',
+  label: 'Person'
+}, {
+  value: 'grid',
+  icon: 'grid',
+  label: 'Grid'
+}, {
+  value: 'cloud',
+  icon: 'cloud',
+  label: 'Cloud'
+}, {
+  value: 'more',
+  icon: 'more',
+  label: 'More'
+}, {
+  value: 'folder',
+  icon: 'folder',
+  label: 'Folder'
+}, {
+  value: 'drop',
+  icon: 'drop',
+  label: 'Drop'
+}, {
+  value: 'play',
+  icon: 'play',
+  label: 'Play'
+}, {
+  value: 'tag',
+  icon: 'tag',
+  label: 'Tag'
+}, {
+  value: 'close',
+  icon: 'close',
+  label: 'Close'
+}, {
+  value: 'warning',
+  icon: 'warning',
+  label: 'Warning'
+}, {
+  value: 'warning-triangle',
+  icon: 'warning-triangle',
+  label: 'Warning triangle'
+}, {
+  value: 'share',
+  icon: 'share',
+  label: 'Share'
+}, {
+  value: 'top',
+  icon: 'top',
+  label: 'Top'
+}, {
+  value: 'low-resolution',
+  icon: 'low-resolution',
+  label: 'Low resolution'
+}, {
+  value: 'high-resolution',
+  icon: 'high-resolution',
+  label: 'High resolution'
+}, {
+  value: 'view',
+  icon: 'view',
+  label: 'View'
+}, {
+  value: 'control',
+  icon: 'control',
+  label: 'Control'
+}, {
+  value: 'code',
+  icon: 'code',
+  label: 'Code'
+}, {
+  value: 'upload',
+  icon: 'upload',
+  label: 'Upload'
+}, {
+  value: 'repair',
+  icon: 'repair',
+  label: 'Repair'
+}, {
+  value: 'split',
+  icon: 'split',
+  label: 'Split'
+}, {
+  value: 'up-down',
+  icon: 'up-down',
+  label: 'Up down'
+}, {
+  value: 'disconnect',
+  icon: 'disconnect',
+  label: 'Disconnect'
+}, {
+  value: 'photo-library',
+  icon: 'photo-library',
+  label: 'Photo library'
+}, {
+  value: 'application',
+  icon: 'application',
+  label: 'Application'
+}, {
+  value: 'new-tab',
+  icon: 'new-tab',
+  label: 'New tab'
+}, {
+  value: 'ascending',
+  icon: 'ascending',
+  label: 'Ascending'
+}, {
+  value: 'descending',
+  icon: 'descending',
+  label: 'Descending'
+}, {
+  value: 'arrow-up',
+  icon: 'arrow-up',
+  label: 'Arrow up'
+}, {
+  value: 'arrow-down',
+  icon: 'arrow-down',
+  label: 'Arrow down'
+}, {
+  value: 'arrow-right',
+  icon: 'arrow-right',
+  label: 'Arrow right'
+}, {
+  value: 'arrow-left',
+  icon: 'arrow-left',
+  label: 'Arrow left'
+}, {
+  value: 'sync',
+  icon: 'sync',
+  label: 'Sync'
+}, {
+  value: 'draggable',
+  icon: 'draggable',
+  label: 'Draggable'
+}, {
+  value: 'book',
+  icon: 'book',
+  label: 'Book'
+}, {
+  value: 'measure',
+  icon: 'measure',
+  label: 'Measure'
+}, {
+  value: 'download',
+  icon: 'download',
+  label: 'Download'
+}, {
+  value: 'more-rounded',
+  icon: 'more-rounded',
+  label: 'More rounded'
+}, {
+  value: 'align-object-left',
+  icon: 'align-object-left',
+  label: 'Align object-left'
+}, {
+  value: 'align-object-center',
+  icon: 'align-object-center',
+  label: 'Align object-center'
+}, {
+  value: 'align-object-right',
+  icon: 'align-object-right',
+  label: 'Align object-right'
+}, {
+  value: 'submit',
+  icon: 'submit',
+  label: 'Submit'
+}, {
+  value: 'operators',
+  icon: 'operators',
+  label: 'Operators'
+}, {
+  value: 'general-data-class',
+  icon: 'general-data-class',
+  label: 'General data-class'
+}, {
+  value: 'building',
+  icon: 'building',
+  label: 'Building'
+}, {
+  value: 'bell',
+  icon: 'bell',
+  label: 'Bell'
+}, {
+  value: 'unlink',
+  icon: 'unlink',
+  label: 'Unlink'
+}, {
+  value: 'lightbulb',
+  icon: 'lightbulb',
+  label: 'Lightbulb'
+}, {
+  value: 'log-in',
+  icon: 'log-in',
+  label: 'Log in'
+}, {
+  value: 'log-out',
+  icon: 'log-out',
+  label: 'Log out'
+}, {
+  value: 'previous',
+  icon: 'previous',
+  label: 'Previous'
+}, {
+  value: 'goto',
+  icon: 'goto',
+  label: 'Goto'
+}, {
+  value: 'save',
+  icon: 'save',
+  label: 'Save'
+}, {
+  value: 'pause',
+  icon: 'pause',
+  label: 'Pause'
+}, {
+  value: 'stop',
+  icon: 'stop',
+  label: 'Stop'
+}, {
+  value: 'step-in',
+  icon: 'step-in',
+  label: 'Step in'
+}, {
+  value: 'comment',
+  icon: 'comment',
+  label: 'Comment'
+}, {
+  value: 'indent',
+  icon: 'indent',
+  label: 'Indent'
+}, {
+  value: 'undent',
+  icon: 'undent',
+  label: 'Undent'
+}, {
+  value: 'filter',
+  icon: 'filter',
+  label: 'Filter'
+}, {
+  value: 'clear-filter',
+  icon: 'clear-filter',
+  label: 'Clear filter'
+}, {
+  value: 'insert',
+  icon: 'insert',
+  label: 'Insert'
+}, {
+  value: 'direction-left',
+  icon: 'direction-left',
+  label: 'Direction left'
+}, {
+  value: 'swap',
+  icon: 'swap',
+  label: 'Swap'
+}, {
+  value: 'bubbles',
+  icon: 'bubbles',
+  label: 'Bubbles'
+}, {
+  value: 'sheet',
+  icon: 'sheet',
+  label: 'Sheet'
+}, {
+  value: 'object',
+  icon: 'object',
+  label: 'Object'
+}, {
+  value: 'clear-selections',
+  icon: 'clear-selections',
+  label: 'Clear selections'
+}, {
+  value: 'selections-tool',
+  icon: 'selections-tool',
+  label: 'Selections tool'
+}, {
+  value: 'selections-reload',
+  icon: 'selections-reload',
+  label: 'Selections reload'
+}, {
+  value: 'selections-back',
+  icon: 'selections-back',
+  label: 'Selections back'
+}, {
+  value: 'selections-forward',
+  icon: 'selections-forward',
+  label: 'Selections forward'
+}, {
+  value: 'expression',
+  icon: 'expression',
+  label: 'Expression'
+}, {
+  value: 'select-alternative',
+  icon: 'select-alternative',
+  label: 'Select alternative'
+}, {
+  value: 'select-possible',
+  icon: 'select-possible',
+  label: 'Select possible'
+}, {
+  value: 'select-excluded',
+  icon: 'select-excluded',
+  label: 'Select excluded'
+}, {
+  value: 'select-all',
+  icon: 'select-all',
+  label: 'Select all'
+}, {
+  value: 'bar-chart',
+  icon: 'bar-chart',
+  label: 'Bar chart'
+}, {
+  value: 'bar-chart-horizontal',
+  icon: 'bar-chart-horizontal',
+  label: 'Bar chart-horizontal'
+}, {
+  value: 'line-chart',
+  icon: 'line-chart',
+  label: 'Line chart'
+}, {
+  value: 'pie-chart',
+  icon: 'pie-chart',
+  label: 'Pie chart'
+}, {
+  value: 'gauge-chart',
+  icon: 'gauge-chart',
+  label: 'Gauge chart'
+}, {
+  value: 'kpi',
+  icon: 'kpi',
+  label: 'Kpi'
+}, {
+  value: 'scatter-chart',
+  icon: 'scatter-chart',
+  label: 'Scatter chart'
+}, {
+  value: 'map',
+  icon: 'map',
+  label: 'Map'
+}, {
+  value: 'table',
+  icon: 'table',
+  label: 'Table'
+}, {
+  value: 'pivot-table',
+  icon: 'pivot-table',
+  label: 'Pivot table'
+}, {
+  value: 'treemap',
+  icon: 'treemap',
+  label: 'Treemap'
+}, {
+  value: 'combo-chart',
+  icon: 'combo-chart',
+  label: 'Combo chart'
+}, {
+  value: 'boxplot',
+  icon: 'boxplot',
+  label: 'Boxplot'
+}, {
+  value: 'distributionplot',
+  icon: 'distributionplot',
+  label: 'Distributionplot'
+}, {
+  value: 'histogram',
+  icon: 'histogram',
+  label: 'Histogram'
+}, {
+  value: 'direct-discovery',
+  icon: 'direct-discovery',
+  label: 'Direct discovery'
+}, {
+  value: 'data-model',
+  icon: 'data-model',
+  label: 'Data model'
+}, {
+  value: 'script',
+  icon: 'script',
+  label: 'Script'
+}, {
+  value: 'script-ok',
+  icon: 'script-ok',
+  label: 'Script ok'
+}, {
+  value: 'debug',
+  icon: 'debug',
+  label: 'Debug'
+}, {
+  value: 'auto-layout',
+  icon: 'auto-layout',
+  label: 'Auto layout'
+}];
+
+var colorOptions = [{
+  value: false,
+  translation: 'properties.colorMode.primary'
+}, {
+  value: true,
+  translation: 'properties.colorMode.byExpression'
+}];
+var toggleOptions = [{
+  value: true,
+  translation: 'properties.on'
+}, {
+  value: false,
+  translation: 'properties.off'
+}];
+function ext(_ref) {
+  var translator = _ref.translator,
+      automationsEnabled = _ref.automationsEnabled;
+  return {
+    definition: {
+      type: 'items',
+      component: 'accordion',
+      items: {
+        actions: {
+          type: 'items',
+          translation: 'Object.ActionButton.ActionsAndNavigation',
+          grouped: true,
+          items: {
+            actions: {
+              type: 'array',
+              translation: 'Object.ActionButton.Actions',
+              ref: 'actions',
+              itemTitleRef: function itemTitleRef(data) {
+                if (data.actionLabel) {
+                  return data.actionLabel;
+                } // If actionType exists but it's not found in the actions list,
+                // the action is invalid for the current version of the button
+
+
+                var fallbackTitle = data.actionType ? 'Object.ActionButton.InvalidAction' : 'Object.ActionButton.NewAction';
+                var action = actions.find(function (act) {
+                  return data.actionType === act.value;
+                });
+                return translator.get(action && action.translation || fallbackTitle);
+              },
+              allowAdd: true,
+              allowRemove: true,
+              allowMove: true,
+              addTranslation: 'Object.ActionButton.AddAction',
+              items: {
+                label: {
+                  component: 'string',
+                  ref: 'actionLabel',
+                  translation: 'Common.Label',
+                  expression: 'optional',
+                  defaultValue: ''
+                },
+                actionType: {
+                  type: 'string',
+                  ref: 'actionType',
+                  component: 'expression-with-dropdown',
+                  translation: 'Object.ActionButton.Action',
+                  defaultValue: '',
+                  options: actions.filter(function (action) {
+                    return action.value !== 'executeAutomation' || automationsEnabled;
+                  }),
+                  dropdownOnly: true
+                },
+                bookmark: {
+                  type: 'string',
+                  ref: 'bookmark',
+                  component: 'expression-with-dropdown',
+                  translation: 'ExpressionEditor.SetExpresions.Bookmark',
+                  defaultValue: '',
+                  dropdownOnly: true,
+                  options: function () {
+                    var _options = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(action, hyperCubeHandler) {
+                      var bms;
+                      return regeneratorRuntime.wrap(function _callee$(_context) {
+                        while (1) {
+                          switch (_context.prev = _context.next) {
+                            case 0:
+                              _context.next = 2;
+                              return hyperCubeHandler.app.getBookmarkList();
+
+                            case 2:
+                              bms = _context.sent;
+                              return _context.abrupt("return", bms.map(function (bookmark) {
+                                return {
+                                  label: bookmark.qData.title,
+                                  value: bookmark.qInfo.qId
+                                };
+                              }));
+
+                            case 4:
+                            case "end":
+                              return _context.stop();
+                          }
+                        }
+                      }, _callee);
+                    }));
+
+                    function options(_x, _x2) {
+                      return _options.apply(this, arguments);
+                    }
+
+                    return options;
+                  }(),
+                  show: function show(data) {
+                    return checkShowAction(data, 'bookmark');
+                  }
+                },
+                field: {
+                  type: 'string',
+                  ref: 'field',
+                  component: 'expression-with-dropdown',
+                  translation: 'Common.Field',
+                  defaultValue: '',
+                  dropdownOnly: true,
+                  options: function () {
+                    var _options2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(action, hyperCubeHandler) {
+                      var fields;
+                      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+                        while (1) {
+                          switch (_context2.prev = _context2.next) {
+                            case 0:
+                              _context2.next = 2;
+                              return hyperCubeHandler.app.getFieldList();
+
+                            case 2:
+                              fields = _context2.sent;
+                              return _context2.abrupt("return", fields.map(function (field) {
+                                return {
+                                  label: field.qName,
+                                  value: field.qName
+                                };
+                              }));
+
+                            case 4:
+                            case "end":
+                              return _context2.stop();
+                          }
+                        }
+                      }, _callee2);
+                    }));
+
+                    function options(_x3, _x4) {
+                      return _options2.apply(this, arguments);
+                    }
+
+                    return options;
+                  }(),
+                  show: function show(data) {
+                    return checkShowAction(data, 'field');
+                  }
+                },
+                variable: {
+                  type: 'string',
+                  ref: 'variable',
+                  component: 'expression-with-dropdown',
+                  translation: 'Common.Variable',
+                  defaultValue: '',
+                  expressionType: 'StringExpression',
+                  options: function () {
+                    var _options3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(action, hyperCubeHandler) {
+                      var variables;
+                      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+                        while (1) {
+                          switch (_context3.prev = _context3.next) {
+                            case 0:
+                              _context3.next = 2;
+                              return hyperCubeHandler.app.getVariableList();
+
+                            case 2:
+                              variables = _context3.sent;
+                              return _context3.abrupt("return", variables.filter(function (v) {
+                                return !v.qIsReserved || v.qIsReserved && action.showSystemVariables;
+                              }).map(function (v) {
+                                return {
+                                  label: v.qName,
+                                  value: v.qName
+                                };
+                              }));
+
+                            case 4:
+                            case "end":
+                              return _context3.stop();
+                          }
+                        }
+                      }, _callee3);
+                    }));
+
+                    function options(_x5, _x6) {
+                      return _options3.apply(this, arguments);
+                    }
+
+                    return options;
+                  }(),
+                  show: function show(data) {
+                    return checkShowAction(data, 'variable');
+                  }
+                },
+                showSystemVariables: {
+                  type: 'boolean',
+                  ref: 'showSystemVariables',
+                  translation: 'ExpressionEditor.SystemVariables',
+                  defaultValue: false,
+                  show: function show(data) {
+                    return checkShowAction(data, 'variable');
+                  }
+                },
+                softLock: {
+                  type: 'boolean',
+                  ref: 'softLock',
+                  translation: 'Object.ActionButton.Softlock',
+                  defaultValue: false,
+                  show: function show(data) {
+                    return checkShowAction(data, 'softLock');
+                  }
+                },
+                value: {
+                  type: 'string',
+                  ref: 'value',
+                  component: 'string',
+                  translation: 'properties.value',
+                  expression: 'optional',
+                  show: function show(data) {
+                    return checkShowAction(data, 'value');
+                  }
+                },
+                partial: {
+                  type: 'boolean',
+                  ref: 'partial',
+                  translation: 'Object.ActionButton.Partial',
+                  defaultValue: false,
+                  show: function show(data) {
+                    return checkShowAction(data, 'partial');
+                  }
+                },
+                // adds automation to actions and adds a dropdown property panel
+                // item to select the automation for the button to trigger
+                automation: {
+                  type: 'string',
+                  component: 'dropdown',
+                  translation: 'Object.ActionButton.Automation',
+                  ref: 'automation',
+                  options: function () {
+                    var _options4 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+                      var automations;
+                      return regeneratorRuntime.wrap(function _callee4$(_context4) {
+                        while (1) {
+                          switch (_context4.prev = _context4.next) {
+                            case 0:
+                              _context4.next = 2;
+                              return fetch('../api/v1/items?resourceType=automation').then(function (response) {
+                                return response.json();
+                              });
+
+                            case 2:
+                              automations = _context4.sent;
+                              return _context4.abrupt("return", automations.data.map(function (blend) {
+                                return {
+                                  value: blend.id,
+                                  label: blend.name
+                                };
+                              }));
+
+                            case 4:
+                            case "end":
+                              return _context4.stop();
+                          }
+                        }
+                      }, _callee4);
+                    }));
+
+                    function options() {
+                      return _options4.apply(this, arguments);
+                    }
+
+                    return options;
+                  }(),
+                  show: function show(data) {
+                    return checkShowAction(data, 'automation');
+                  }
+                },
+                // Boolean property to instruct the automation action to create a
+                // bookmark and send it to the selected automation in the
+                // property panel.
+                automationPostData: {
+                  type: 'boolean',
+                  ref: 'automationPostData',
+                  translation: 'Object.ActionButton.Automation.SendSelections',
+                  show: function show(data) {
+                    return checkShowAction(data, 'automation');
+                  },
+                  defaultValue: false
+                }
+              }
+            },
+            navigation: {
+              translation: 'Object.ActionButton.Navigation',
+              type: 'items',
+              items: {
+                action: {
+                  ref: 'navigation.action',
+                  translation: 'Object.ActionButton.Navigation',
+                  component: 'expression-with-dropdown',
+                  defaultValue: null,
+                  options: navigationActions,
+                  dropdownOnly: true
+                },
+                sheetId: {
+                  type: 'string',
+                  ref: 'navigation.sheet',
+                  translation: 'properties.sheet',
+                  expression: 'optional',
+                  show: function show(data) {
+                    return checkShowNavigation(data, 'sheetId');
+                  }
+                },
+                sheet: {
+                  type: 'string',
+                  ref: 'navigation.sheet',
+                  translation: 'properties.sheet',
+                  component: 'expression-with-dropdown',
+                  expressionType: 'StringExpression',
+                  show: function show(data) {
+                    return checkShowNavigation(data, 'sheet');
+                  },
+                  options: function () {
+                    var _options5 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5(action, hyperCubeHandler) {
+                      var sheets;
+                      return regeneratorRuntime.wrap(function _callee5$(_context5) {
+                        while (1) {
+                          switch (_context5.prev = _context5.next) {
+                            case 0:
+                              _context5.next = 2;
+                              return hyperCubeHandler.app.getSheetList();
+
+                            case 2:
+                              sheets = _context5.sent;
+                              return _context5.abrupt("return", sheets.map(function (sheet) {
+                                return {
+                                  value: sheet.qInfo.qId,
+                                  label: sheet.qMeta.title,
+                                  showCondition: sheet.qData.showCondition
+                                };
+                              }));
+
+                            case 4:
+                            case "end":
+                              return _context5.stop();
+                          }
+                        }
+                      }, _callee5);
+                    }));
+
+                    function options(_x7, _x8) {
+                      return _options5.apply(this, arguments);
+                    }
+
+                    return options;
+                  }()
+                },
+                story: {
+                  type: 'string',
+                  ref: 'navigation.story',
+                  translation: 'properties.story',
+                  component: 'expression-with-dropdown',
+                  expressionType: 'StringExpression',
+                  show: function show(data) {
+                    return checkShowNavigation(data, 'story');
+                  },
+                  options: function () {
+                    var _options6 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6(action, hyperCubeHandler) {
+                      var stories;
+                      return regeneratorRuntime.wrap(function _callee6$(_context6) {
+                        while (1) {
+                          switch (_context6.prev = _context6.next) {
+                            case 0:
+                              _context6.next = 2;
+                              return hyperCubeHandler.app.getStoryList();
+
+                            case 2:
+                              stories = _context6.sent;
+                              return _context6.abrupt("return", stories.map(function (story) {
+                                return {
+                                  value: story.qInfo.qId,
+                                  label: story.qMeta.title
+                                };
+                              }));
+
+                            case 4:
+                            case "end":
+                              return _context6.stop();
+                          }
+                        }
+                      }, _callee6);
+                    }));
+
+                    function options(_x9, _x10) {
+                      return _options6.apply(this, arguments);
+                    }
+
+                    return options;
+                  }()
+                },
+                websiteUrl: {
+                  type: 'string',
+                  expression: 'optional',
+                  ref: 'navigation.websiteUrl',
+                  translation: 'properties.website',
+                  show: function show(data) {
+                    return checkShowNavigation(data, 'websiteUrl');
+                  }
+                },
+                sameWindow: {
+                  type: 'boolean',
+                  ref: 'navigation.sameWindow',
+                  translation: 'properties.sameWindow',
+                  show: function show(data) {
+                    return checkShowNavigation(data, 'websiteUrl');
+                  },
+                  defaultValue: false
+                }
+              }
+            }
+          }
+        },
+        enableCondition: {
+          type: 'items',
+          translation: 'properties.enableConditionSection',
+          items: {
+            useCondition: {
+              type: 'boolean',
+              component: 'switch',
+              translation: 'properties.enableToggle',
+              ref: 'useEnabledCondition',
+              options: [{
+                value: true,
+                translation: 'properties.on'
+              }, {
+                value: false,
+                translation: 'properties.off'
+              }]
+            },
+            condition: {
+              ref: 'enabledCondition',
+              translation: 'properties.enableCondition',
+              type: 'integer',
+              expression: 'optional',
+              show: function show(data) {
+                return data.useEnabledCondition;
+              }
+            }
+          }
+        },
+        settings: {
+          component: 'expandable-items',
+          translation: 'Common.Appearance',
+          uses: 'settings',
+          items: {
+            general: {
+              type: 'items',
+              translation: 'properties.general',
+              items: {
+                showTitles: {},
+                details: {
+                  show: false
+                },
+                label: {
+                  component: 'string',
+                  ref: 'style.label',
+                  translation: 'Common.Label',
+                  expression: 'optional'
+                }
+              }
+            },
+            font: {
+              grouped: true,
+              type: 'items',
+              translation: 'properties.font',
+              items: {
+                sizeAndColor: {
+                  type: 'items',
+                  items: {
+                    fontSize: {
+                      component: 'slider',
+                      type: 'number',
+                      ref: 'style.font.size',
+                      translation: 'properties.fontSize',
+                      min: 0.2,
+                      max: 1,
+                      step: 0.01
+                    },
+                    useFontColorExpression: {
+                      ref: 'style.font.useColorExpression',
+                      type: 'boolean',
+                      translation: 'properties.fontColor',
+                      component: 'dropdown',
+                      options: colorOptions
+                    },
+                    colorPicker: {
+                      component: 'color-picker',
+                      type: 'object',
+                      ref: 'style.font.color',
+                      translation: 'properties.color',
+                      dualOutput: true,
+                      show: function show(data) {
+                        return !propertyResolver.getValue(data, 'style.font.useColorExpression');
+                      }
+                    },
+                    colorExpression: {
+                      component: 'string',
+                      type: 'string',
+                      ref: 'style.font.colorExpression',
+                      translation: 'Common.Expression',
+                      expression: 'optional',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.font.useColorExpression');
+                      }
+                    }
+                  }
+                },
+                stylingAndAlign: {
+                  type: 'items',
+                  items: {
+                    fontStyling: {
+                      component: 'item-selection-list',
+                      type: 'string',
+                      ref: 'style.font.style',
+                      translation: 'properties.textStyle',
+                      horizontal: true,
+                      multipleSelect: true,
+                      items: [{
+                        component: 'icon-item',
+                        icon: 'bold',
+                        value: 'bold',
+                        translation: 'Common.bold',
+                        labelPlacement: 'bottom'
+                      }, {
+                        component: 'icon-item',
+                        icon: 'italic',
+                        value: 'italic',
+                        translation: 'Common.italic',
+                        labelPlacement: 'bottom'
+                      }, {
+                        component: 'icon-item',
+                        icon: 'underline',
+                        value: 'underline',
+                        translation: 'Common.underline',
+                        labelPlacement: 'bottom'
+                      }]
+                    },
+                    textAlign: {
+                      component: 'item-selection-list',
+                      type: 'string',
+                      ref: 'style.font.align',
+                      translation: 'properties.Alignment',
+                      horizontal: true,
+                      items: [{
+                        component: 'icon-item',
+                        icon: 'align_left',
+                        value: 'left',
+                        translation: 'properties.dock.left',
+                        labelPlacement: 'bottom'
+                      }, {
+                        component: 'icon-item',
+                        icon: 'align_center',
+                        value: 'center',
+                        translation: 'Common.Center',
+                        labelPlacement: 'bottom'
+                      }, {
+                        component: 'icon-item',
+                        icon: 'align_right',
+                        value: 'right',
+                        translation: 'properties.dock.right',
+                        labelPlacement: 'bottom'
+                      }]
+                    }
+                  }
+                }
+              }
+            },
+            background: {
+              grouped: true,
+              type: 'items',
+              translation: 'properties.background',
+              items: {
+                backgroundColor: {
+                  type: 'items',
+                  items: {
+                    useColorExpression: {
+                      ref: 'style.background.useColorExpression',
+                      type: 'boolean',
+                      translation: 'AppDetails.SheetBackgroundColor',
+                      component: 'dropdown',
+                      options: colorOptions
+                    },
+                    colorPicker: {
+                      component: 'color-picker',
+                      type: 'object',
+                      ref: 'style.background.color',
+                      translation: 'properties.color',
+                      dualOutput: true,
+                      show: function show(data) {
+                        return !propertyResolver.getValue(data, 'style.background.useColorExpression');
+                      }
+                    },
+                    colorExpression: {
+                      component: 'string',
+                      type: 'string',
+                      ref: 'style.background.colorExpression',
+                      translation: 'Common.Expression',
+                      expression: 'optional',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.background.useColorExpression');
+                      }
+                    }
+                  }
+                },
+                backgroundImage: {
+                  type: 'items',
+                  items: {
+                    useBackgroundImage: {
+                      ref: 'style.background.useImage',
+                      type: 'boolean',
+                      translation: 'properties.backgroundImage.use',
+                      component: 'switch',
+                      options: toggleOptions
+                    },
+                    backgroundUrl: {
+                      ref: 'style.background.url.qStaticContentUrlDef.qUrl',
+                      layoutRef: 'style.background.url.qStaticContentUrl.qUrl',
+                      schemaIgnore: true,
+                      translation: 'Common.Image',
+                      tooltip: {
+                        select: 'properties.media.select',
+                        remove: 'properties.media.removeBackground'
+                      },
+                      type: 'string',
+                      component: 'media',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.background.useImage');
+                      }
+                    },
+                    backgroundSize: {
+                      ref: 'style.background.size',
+                      translation: 'properties.backgroundImage.size',
+                      type: 'string',
+                      component: 'dropdown',
+                      options: [{
+                        value: 'auto',
+                        translation: 'properties.backgroundImage.originalSize'
+                      }, {
+                        value: 'alwaysFit',
+                        translation: 'properties.backgroundImage.sizeAlwaysFit'
+                      }, {
+                        value: 'fitWidth',
+                        translation: 'properties.backgroundImage.sizeFitWidth'
+                      }, {
+                        value: 'fitHeight',
+                        translation: 'properties.backgroundImage.sizeFitHeight'
+                      }, {
+                        value: 'fill',
+                        translation: 'properties.backgroundImage.sizeStretch'
+                      }, {
+                        value: 'alwaysFill',
+                        translation: 'properties.backgroundImage.sizeAlwaysFill'
+                      }],
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.background.useImage') && !!propertyResolver.getValue(data, 'style.background.url.qStaticContentUrlDef.qUrl');
+                      }
+                    },
+                    backgroundPosition: {
+                      ref: 'style.background.position',
+                      translation: 'Common.Position',
+                      type: 'string',
+                      component: 'align-matrix',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.background.useImage') && propertyResolver.getValue(data, 'style.background.url.qStaticContentUrlDef.qUrl') && propertyResolver.getValue(data, 'style.background.size') !== 'fill';
+                      },
+                      currentSize: function currentSize(data) {
+                        return propertyResolver.getValue(data, 'style.background.size');
+                      }
+                    }
+                  }
+                }
+              }
+            },
+            border: {
+              type: 'items',
+              grouped: true,
+              translation: 'properties.border',
+              items: {
+                borderSettings: {
+                  type: 'items',
+                  items: {
+                    useBorder: {
+                      ref: 'style.border.useBorder',
+                      type: 'boolean',
+                      translation: 'properties.border.use',
+                      component: 'switch',
+                      options: toggleOptions
+                    },
+                    borderRadius: {
+                      component: 'slider',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.border.useBorder');
+                      },
+                      translation: 'properties.border.radius',
+                      type: 'number',
+                      ref: 'style.border.radius',
+                      min: 0,
+                      max: 1,
+                      step: 0.01
+                    },
+                    borderWidth: {
+                      component: 'slider',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.border.useBorder');
+                      },
+                      type: 'number',
+                      ref: 'style.border.width',
+                      translation: 'properties.border.width',
+                      min: 0,
+                      max: 0.5,
+                      step: 0.005
+                    },
+                    colorDropdown: {
+                      type: 'string',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.border.useBorder');
+                      },
+                      component: 'dropdown',
+                      translation: 'properties.border.color',
+                      ref: 'style.border.useColorExpression',
+                      options: colorOptions
+                    },
+                    colorPicker: {
+                      component: 'color-picker',
+                      type: 'object',
+                      ref: 'style.border.color',
+                      translation: 'properties.color',
+                      dualOutput: true,
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.border.useBorder') && !propertyResolver.getValue(data, 'style.border.useColorExpression');
+                      }
+                    },
+                    colorExpression: {
+                      component: 'string',
+                      type: 'string',
+                      ref: 'style.border.colorExpression',
+                      translation: 'Common.Expression',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.border.useBorder') && propertyResolver.getValue(data, 'style.border.useColorExpression');
+                      },
+                      expression: 'optional'
+                    }
+                  }
+                }
+              }
+            },
+            icon: {
+              type: 'items',
+              grouped: true,
+              translation: 'properties.icon',
+              items: {
+                iconSettings: {
+                  type: 'items',
+                  items: {
+                    useIcon: {
+                      ref: 'style.icon.useIcon',
+                      type: 'boolean',
+                      translation: 'properties.icon.use',
+                      component: 'switch',
+                      options: toggleOptions
+                    },
+                    iconType: {
+                      ref: 'style.icon.iconType',
+                      component: 'expression-with-dropdown',
+                      translation: 'properties.icon',
+                      defaultValue: '',
+                      options: luiIcons,
+                      expressionType: 'StringExpression',
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.icon.useIcon');
+                      }
+                    },
+                    iconPosition: {
+                      ref: 'style.icon.position',
+                      component: 'dropdown',
+                      translation: 'Common.Position',
+                      options: [{
+                        translation: 'properties.dock.left',
+                        value: 'left'
+                      }, {
+                        translation: 'properties.dock.right',
+                        value: 'right'
+                      }],
+                      show: function show(data) {
+                        return propertyResolver.getValue(data, 'style.icon.useIcon');
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    importProperties: importProperties,
+    exportProperties: null,
+    support: {
+      export: !1,
+      exportData: !1,
+      snapshot: !1,
+      viewData: !1,
+      quickMobile: !0
+    }
+  };
+}
+
+var colorStruct = {
+  aliceblue: {
+    r: 240,
+    g: 248,
+    b: 255
+  },
+  antiquewhite: {
+    r: 250,
+    g: 235,
+    b: 215
+  },
+  aqua: {
+    r: 0,
+    g: 255,
+    b: 255
+  },
+  aquamarine: {
+    r: 127,
+    g: 255,
+    b: 212
+  },
+  azure: {
+    r: 240,
+    g: 255,
+    b: 255
+  },
+  beige: {
+    r: 245,
+    g: 245,
+    b: 220
+  },
+  bisque: {
+    r: 255,
+    g: 228,
+    b: 196
+  },
+  black: {
+    r: 0,
+    g: 0,
+    b: 0
+  },
+  blanchedalmond: {
+    r: 255,
+    g: 235,
+    b: 205
+  },
+  blue: {
+    r: 0,
+    g: 0,
+    b: 255
+  },
+  blueviolet: {
+    r: 138,
+    g: 43,
+    b: 226
+  },
+  brown: {
+    r: 165,
+    g: 42,
+    b: 42
+  },
+  burlywood: {
+    r: 222,
+    g: 184,
+    b: 135
+  },
+  cadetblue: {
+    r: 95,
+    g: 158,
+    b: 160
+  },
+  chartreuse: {
+    r: 127,
+    g: 255,
+    b: 0
+  },
+  chocolate: {
+    r: 210,
+    g: 105,
+    b: 30
+  },
+  coral: {
+    r: 255,
+    g: 127,
+    b: 80
+  },
+  cornflowerblue: {
+    r: 100,
+    g: 149,
+    b: 237
+  },
+  cornsilk: {
+    r: 255,
+    g: 248,
+    b: 220
+  },
+  crimson: {
+    r: 220,
+    g: 20,
+    b: 60
+  },
+  cyan: {
+    r: 0,
+    g: 255,
+    b: 255
+  },
+  darkblue: {
+    r: 0,
+    g: 0,
+    b: 139
+  },
+  darkcyan: {
+    r: 0,
+    g: 139,
+    b: 139
+  },
+  darkgoldenrod: {
+    r: 184,
+    g: 134,
+    b: 11
+  },
+  darkgray: {
+    r: 169,
+    g: 169,
+    b: 169
+  },
+  darkgreen: {
+    r: 0,
+    g: 100,
+    b: 0
+  },
+  darkgrey: {
+    r: 169,
+    g: 169,
+    b: 169
+  },
+  darkkhaki: {
+    r: 189,
+    g: 183,
+    b: 107
+  },
+  darkmagenta: {
+    r: 139,
+    g: 0,
+    b: 139
+  },
+  darkolivegreen: {
+    r: 85,
+    g: 107,
+    b: 47
+  },
+  darkorange: {
+    r: 255,
+    g: 140,
+    b: 0
+  },
+  darkorchid: {
+    r: 153,
+    g: 50,
+    b: 204
+  },
+  darkred: {
+    r: 139,
+    g: 0,
+    b: 0
+  },
+  darksalmon: {
+    r: 233,
+    g: 150,
+    b: 122
+  },
+  darkseagreen: {
+    r: 143,
+    g: 188,
+    b: 143
+  },
+  darkslateblue: {
+    r: 72,
+    g: 61,
+    b: 139
+  },
+  darkslategray: {
+    r: 47,
+    g: 79,
+    b: 79
+  },
+  darkslategrey: {
+    r: 47,
+    g: 79,
+    b: 79
+  },
+  darkturquoise: {
+    r: 0,
+    g: 206,
+    b: 209
+  },
+  darkviolet: {
+    r: 148,
+    g: 0,
+    b: 211
+  },
+  deeppink: {
+    r: 255,
+    g: 20,
+    b: 147
+  },
+  deepskyblue: {
+    r: 0,
+    g: 191,
+    b: 255
+  },
+  dimgray: {
+    r: 105,
+    g: 105,
+    b: 105
+  },
+  dimgrey: {
+    r: 105,
+    g: 105,
+    b: 105
+  },
+  dodgerblue: {
+    r: 30,
+    g: 144,
+    b: 255
+  },
+  firebrick: {
+    r: 178,
+    g: 34,
+    b: 34
+  },
+  floralwhite: {
+    r: 255,
+    g: 250,
+    b: 240
+  },
+  forestgreen: {
+    r: 34,
+    g: 139,
+    b: 34
+  },
+  fuchsia: {
+    r: 255,
+    g: 0,
+    b: 255
+  },
+  gainsboro: {
+    r: 220,
+    g: 220,
+    b: 220
+  },
+  ghostwhite: {
+    r: 248,
+    g: 248,
+    b: 255
+  },
+  gold: {
+    r: 255,
+    g: 215,
+    b: 0
+  },
+  goldenrod: {
+    r: 218,
+    g: 165,
+    b: 32
+  },
+  gray: {
+    r: 128,
+    g: 128,
+    b: 128
+  },
+  green: {
+    r: 0,
+    g: 128,
+    b: 0
+  },
+  greenyellow: {
+    r: 173,
+    g: 255,
+    b: 47
+  },
+  grey: {
+    r: 128,
+    g: 128,
+    b: 128
+  },
+  honeydew: {
+    r: 240,
+    g: 255,
+    b: 240
+  },
+  hotpink: {
+    r: 255,
+    g: 105,
+    b: 180
+  },
+  indianred: {
+    r: 205,
+    g: 92,
+    b: 92
+  },
+  indigo: {
+    r: 75,
+    g: 0,
+    b: 130
+  },
+  ivory: {
+    r: 255,
+    g: 255,
+    b: 240
+  },
+  khaki: {
+    r: 240,
+    g: 230,
+    b: 140
+  },
+  lavender: {
+    r: 230,
+    g: 230,
+    b: 250
+  },
+  lavenderblush: {
+    r: 255,
+    g: 240,
+    b: 245
+  },
+  lawngreen: {
+    r: 124,
+    g: 252,
+    b: 0
+  },
+  lemonchiffon: {
+    r: 255,
+    g: 250,
+    b: 205
+  },
+  lightblue: {
+    r: 173,
+    g: 216,
+    b: 230
+  },
+  lightcoral: {
+    r: 240,
+    g: 128,
+    b: 128
+  },
+  lightcyan: {
+    r: 224,
+    g: 255,
+    b: 255
+  },
+  lightgoldenrodyellow: {
+    r: 250,
+    g: 250,
+    b: 210
+  },
+  lightgray: {
+    r: 211,
+    g: 211,
+    b: 211
+  },
+  lightgreen: {
+    r: 144,
+    g: 238,
+    b: 144
+  },
+  lightgrey: {
+    r: 211,
+    g: 211,
+    b: 211
+  },
+  lightpink: {
+    r: 255,
+    g: 182,
+    b: 193
+  },
+  lightsalmon: {
+    r: 255,
+    g: 160,
+    b: 122
+  },
+  lightseagreen: {
+    r: 32,
+    g: 178,
+    b: 170
+  },
+  lightskyblue: {
+    r: 135,
+    g: 206,
+    b: 250
+  },
+  lightslategray: {
+    r: 119,
+    g: 136,
+    b: 153
+  },
+  lightslategrey: {
+    r: 119,
+    g: 136,
+    b: 153
+  },
+  lightsteelblue: {
+    r: 176,
+    g: 196,
+    b: 222
+  },
+  lightyellow: {
+    r: 255,
+    g: 255,
+    b: 224
+  },
+  lime: {
+    r: 0,
+    g: 255,
+    b: 0
+  },
+  limegreen: {
+    r: 50,
+    g: 205,
+    b: 50
+  },
+  linen: {
+    r: 250,
+    g: 240,
+    b: 230
+  },
+  magenta: {
+    r: 255,
+    g: 0,
+    b: 255
+  },
+  maroon: {
+    r: 128,
+    g: 0,
+    b: 0
+  },
+  mediumaquamarine: {
+    r: 102,
+    g: 205,
+    b: 170
+  },
+  mediumblue: {
+    r: 0,
+    g: 0,
+    b: 205
+  },
+  mediumorchid: {
+    r: 186,
+    g: 85,
+    b: 211
+  },
+  mediumpurple: {
+    r: 147,
+    g: 112,
+    b: 219
+  },
+  mediumseagreen: {
+    r: 60,
+    g: 179,
+    b: 113
+  },
+  mediumslateblue: {
+    r: 123,
+    g: 104,
+    b: 238
+  },
+  mediumspringgreen: {
+    r: 0,
+    g: 250,
+    b: 154
+  },
+  mediumturquoise: {
+    r: 72,
+    g: 209,
+    b: 204
+  },
+  mediumvioletred: {
+    r: 199,
+    g: 21,
+    b: 133
+  },
+  midnightblue: {
+    r: 25,
+    g: 25,
+    b: 112
+  },
+  mintcream: {
+    r: 245,
+    g: 255,
+    b: 250
+  },
+  mistyrose: {
+    r: 255,
+    g: 228,
+    b: 225
+  },
+  moccasin: {
+    r: 255,
+    g: 228,
+    b: 181
+  },
+  navajowhite: {
+    r: 255,
+    g: 222,
+    b: 173
+  },
+  navy: {
+    r: 0,
+    g: 0,
+    b: 128
+  },
+  oldlace: {
+    r: 253,
+    g: 245,
+    b: 230
+  },
+  olive: {
+    r: 128,
+    g: 128,
+    b: 0
+  },
+  olivedrab: {
+    r: 107,
+    g: 142,
+    b: 35
+  },
+  orange: {
+    r: 255,
+    g: 165,
+    b: 0
+  },
+  orangered: {
+    r: 255,
+    g: 69,
+    b: 0
+  },
+  orchid: {
+    r: 218,
+    g: 112,
+    b: 214
+  },
+  palegoldenrod: {
+    r: 238,
+    g: 232,
+    b: 170
+  },
+  palegreen: {
+    r: 152,
+    g: 251,
+    b: 152
+  },
+  paleturquoise: {
+    r: 175,
+    g: 238,
+    b: 238
+  },
+  palevioletred: {
+    r: 219,
+    g: 112,
+    b: 147
+  },
+  papayawhip: {
+    r: 255,
+    g: 239,
+    b: 213
+  },
+  peachpuff: {
+    r: 255,
+    g: 218,
+    b: 185
+  },
+  peru: {
+    r: 205,
+    g: 133,
+    b: 63
+  },
+  pink: {
+    r: 255,
+    g: 192,
+    b: 203
+  },
+  plum: {
+    r: 221,
+    g: 160,
+    b: 221
+  },
+  powderblue: {
+    r: 176,
+    g: 224,
+    b: 230
+  },
+  purple: {
+    r: 128,
+    g: 0,
+    b: 128
+  },
+  rebeccapurple: {
+    r: 102,
+    g: 51,
+    b: 153
+  },
+  red: {
+    r: 255,
+    g: 0,
+    b: 0
+  },
+  rosybrown: {
+    r: 188,
+    g: 143,
+    b: 143
+  },
+  royalblue: {
+    r: 65,
+    g: 105,
+    b: 225
+  },
+  saddlebrown: {
+    r: 139,
+    g: 69,
+    b: 19
+  },
+  salmon: {
+    r: 250,
+    g: 128,
+    b: 114
+  },
+  sandybrown: {
+    r: 244,
+    g: 164,
+    b: 96
+  },
+  seagreen: {
+    r: 46,
+    g: 139,
+    b: 87
+  },
+  seashell: {
+    r: 255,
+    g: 245,
+    b: 238
+  },
+  sienna: {
+    r: 160,
+    g: 82,
+    b: 45
+  },
+  silver: {
+    r: 192,
+    g: 192,
+    b: 192
+  },
+  skyblue: {
+    r: 135,
+    g: 206,
+    b: 235
+  },
+  slateblue: {
+    r: 106,
+    g: 90,
+    b: 205
+  },
+  slategray: {
+    r: 112,
+    g: 128,
+    b: 144
+  },
+  slategrey: {
+    r: 112,
+    g: 128,
+    b: 144
+  },
+  snow: {
+    r: 255,
+    g: 250,
+    b: 250
+  },
+  springgreen: {
+    r: 0,
+    g: 255,
+    b: 127
+  },
+  steelblue: {
+    r: 70,
+    g: 130,
+    b: 180
+  },
+  tan: {
+    r: 210,
+    g: 180,
+    b: 140
+  },
+  teal: {
+    r: 0,
+    g: 128,
+    b: 128
+  },
+  thistle: {
+    r: 216,
+    g: 191,
+    b: 216
+  },
+  tomato: {
+    r: 255,
+    g: 99,
+    b: 71
+  },
+  transparent: {
+    r: 255,
+    g: 255,
+    b: 255,
+    a: 0
+  },
+  turquoise: {
+    r: 64,
+    g: 224,
+    b: 208
+  },
+  violet: {
+    r: 238,
+    g: 130,
+    b: 238
+  },
+  wheat: {
+    r: 245,
+    g: 222,
+    b: 179
+  },
+  white: {
+    r: 255,
+    g: 255,
+    b: 255
+  },
+  whitesmoke: {
+    r: 245,
+    g: 245,
+    b: 245
+  },
+  yellow: {
+    r: 255,
+    g: 255,
+    b: 0
+  },
+  yellowgreen: {
+    r: 154,
+    g: 205,
+    b: 50
+  }
+};
+
+/* eslint-disable no-cond-assign */
+var colorUtils = {
+  resolveExpression: function resolveExpression(input) {
+    // rgb
+    var matches = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(input);
+
+    if (matches) {
+      return "rgb(".concat(matches[1], ",").concat(matches[2], ",").concat(matches[3], ")");
+    } // argb
+
+
+    matches = /^argb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i.exec(input);
+
+    if (matches) {
+      var a = Math.round(matches[1] / 255 * 100) / 100;
+      return "rgba(".concat(matches[2], ",").concat(matches[3], ",").concat(matches[4], ",").concat(a, ")");
+    } // hex
+
+
+    matches = /^#([A-f0-9]{2})([A-f0-9]{2})([A-f0-9]{2})$/i.exec(input);
+
+    if (matches) {
+      return input;
+    } // css color
+
+
+    var color = input && colorStruct[input.toLowerCase()];
+
+    if (color) {
+      var _a = color.a !== undefined ? color.a : 1;
+
+      return "rgba(".concat(color.r, ",").concat(color.g, ",").concat(color.b, ",").concat(_a, ")");
+    } // invalid
+
+
+    return 'none';
+  },
+  getFadedColor: function getFadedColor(color) {
+    var percent = 0.15;
+    var f;
+    var R;
+    var B;
+    var G;
+
+    if (color.length > 7) {
+      f = color.split(',');
+      var rgba = f[0].indexOf('a') !== -1;
+      R = rgba ? parseInt(f[0].slice(5), 10) : parseInt(f[0].slice(4), 10);
+      G = parseInt(f[1], 10);
+      B = parseInt(f[2], 10);
+      return "".concat((rgba ? 'rgba(' : 'rgb(') + (Math.round((0 - R) * percent) + R), ",").concat(Math.round((0 - G) * percent) + G, ",").concat(Math.round((0 - B) * percent) + B).concat(rgba ? ",".concat(f[3]) : ')');
+    }
+
+    f = parseInt(color.slice(1), 16);
+    R = f >> 16;
+    G = f >> 8 & 0x00FF;
+    B = f & 0x0000FF;
+    return "#".concat((0x1000000 + (Math.round((0 - R) * percent) + R) * 0x10000 + (Math.round((0 - G) * percent) + G) * 0x100 + (Math.round((0 - B) * percent) + B)).toString(16).slice(1));
+  }
+};
+
+var getImageUrl = function getImageUrl(imgUrl) {
+  imgUrl.replace(/^\.\.\//i, '/');
+  imgUrl = imgUrl.replace(/"/g, '\\"');
+  imgUrl = imgUrl.replace(/'/g, "\\'");
+  var a = document.createElement('a');
+  a.href = '../';
+  var rootPath = a.href;
+  imgUrl = rootPath + (imgUrl[0] === '/' ? imgUrl.substr(1) : imgUrl);
+  return imgUrl;
+};
+
+var urlUtils = {
+  getImageUrl: getImageUrl
+};
+
+var backgroundSize = {
+  auto: 'auto auto',
+  alwaysFit: 'contain',
+  fitWidth: '100% auto',
+  fitHeight: 'auto 100%',
+  fill: '100% 100%',
+  alwaysFill: 'cover'
+};
+var backgroundPosition = {
+  topLeft: '0% 0%',
+  // top left
+  centerLeft: '50% 0%',
+  // center left
+  bottomLeft: '100% 0%',
+  // bottom left
+  topCenter: '0% 50%',
+  // top center
+  centerCenter: '50% 50%',
+  // center center
+  bottomCenter: '100% 50%',
+  // bottom center
+  topRight: '0% 100%',
+  // top right
+  centerRight: '50% 100%',
+  // center right
+  bottomRight: '100% 100%' // bottom right
+
+};
+
+var formatProperty = function formatProperty(path, setting) {
+  return "".concat(path, ": ").concat(setting, ";");
+};
+
+var getColor = function getColor(_ref, defaultColor, theme) {
+  var useColorExpression = _ref.useColorExpression,
+      colorExpression = _ref.colorExpression,
+      color = _ref.color;
+  var resolvedColor;
+
+  if (useColorExpression) {
+    resolvedColor = colorUtils.resolveExpression(colorExpression);
+  } else if (typeof color === 'string') {
+    resolvedColor = color;
+  } else if (color) {
+    resolvedColor = theme.getColorPickerColor(color);
+  }
+
+  return !resolvedColor || resolvedColor === 'none' ? defaultColor : resolvedColor;
+};
+
+var styleFormatter = {
+  getStyles: function getStyles(_ref2) {
+    var style = _ref2.style,
+        disabled = _ref2.disabled,
+        theme = _ref2.theme,
+        element = _ref2.element;
+    var styles = 'width: 100%;height: 100%;transition: transform .1s ease-in-out;position: absolute;';
+    var font = style.font,
+        background = style.background,
+        border = style.border;
+    var primaryColor = theme.getDataColorSpecials().primary; // enable
+
+    styles += disabled ? formatProperty('opacity', 0.4) : formatProperty('cursor', 'pointer'); // font
+
+    styles += formatProperty('color', getColor(font, '#ffffff', theme));
+    font.style.bold && (styles += formatProperty('font-weight', 'bold'));
+    font.style.italic && (styles += formatProperty('font-style', 'italic')); // background
+
+    var backgroundColor = getColor(background, primaryColor, theme);
+    styles += formatProperty('background-color', backgroundColor);
+
+    if (background.useImage && background.url.qStaticContentUrl) {
+      var bgUrl = background.url.qStaticContentUrl.qUrl;
+
+      if (bgUrl) {
+        bgUrl = urlUtils.getImageUrl(bgUrl);
+        styles += formatProperty('background-image', "url('".concat(bgUrl, "')"));
+        styles += formatProperty('background-size', backgroundSize[background.size]);
+        styles += formatProperty('background-position', backgroundPosition[background.position]);
+        styles += formatProperty('background-repeat', 'no-repeat');
+      }
+    } // border
+
+
+    if (border.useBorder) {
+      var lengthShortSide = Math.min(element.offsetWidth, element.offsetHeight);
+      var borderColor = getColor(border, colorUtils.getFadedColor(backgroundColor), theme);
+      var borderSize = border.width * lengthShortSide / 2;
+      styles += formatProperty('border', "".concat(borderSize, "px solid ").concat(borderColor));
+      styles += formatProperty('border-radius', "".concat(border.radius * lengthShortSide / 2, "px"));
+    } else {
+      styles += 'border: none;';
+    }
+
+    return styles;
+  },
+  createLabelAndIcon: function createLabelAndIcon(_ref3) {
+    var button = _ref3.button,
+        theme = _ref3.theme,
+        style = _ref3.style,
+        isSense = _ref3.isSense;
+    var icon = style.icon,
+        font = style.font,
+        label = style.label; // text element wrapping label and icon
+
+    var text = document.createElement('text');
+    text.style.whiteSpace = 'nowrap';
+    text.style.fontFamily = theme.getStyle('', '', 'fontFamily'); // label
+
+    var textSpan = document.createElement('span');
+    textSpan.textContent = label;
+    textSpan.style.whiteSpace = 'nowrap';
+    textSpan.style.textOverflow = 'ellipsis';
+    textSpan.style.overflow = 'visible';
+    font.style.underline && (textSpan.style.textDecoration = 'underline');
+    text.appendChild(textSpan); // icon
+
+    var hasIcon = isSense && icon.useIcon && icon.iconType !== '';
+
+    if (hasIcon) {
+      var iconSpan = document.createElement('span');
+      var iconType = luiIcons.find(function (iconObj) {
+        return iconObj.label === icon.iconType || iconObj.value === icon.iconType;
+      });
+      iconSpan.style.textDecoration = 'none';
+      iconSpan.style.fontSize = 'inherit';
+      iconSpan.setAttribute('class', "lui-icon lui-icon--".concat(iconType ? iconType.value : ''));
+      icon.position === 'left' ? text.insertBefore(iconSpan, textSpan) : text.appendChild(iconSpan);
+    }
+
+    button.innerHTML = '';
+    button.appendChild(text); // Calculations on font size.
+    // 1. Setting font size to height of button container
+
+    text.style.fontSize = "".concat(button.clientHeight, "px"); // 2. Adjust the font size to the height ratio between button container and text box
+
+    var newFontsize = button.clientHeight / text.offsetHeight * button.clientHeight;
+    text.style.fontSize = "".concat(newFontsize, "px"); // 3. Adjust the font size to the width ratio between button container and text box
+
+    if (text.offsetWidth > button.clientWidth) {
+      newFontsize *= button.clientWidth / text.offsetWidth;
+    } // 4. Setting final font size by scaling with the font size from the layout + other font styling
+
+
+    if (font.style.italic) {
+      if (hasIcon) {
+        text.style.fontSize = "".concat(Math.max(newFontsize * font.size * 0.84, 8), "px");
+        text.children[0].style.marginRight = "".concat(text.offsetWidth * 0.04, "px");
+        text.children[1].style.marginRight = "".concat(text.offsetWidth * 0.04, "px");
+      } else {
+        text.style.fontSize = "".concat(Math.max(newFontsize * font.size * 0.9, 8), "px");
+        text.children[0].style.marginRight = "".concat(text.offsetWidth * 0.02, "px");
+      }
+    } else if (hasIcon) {
+      text.style.fontSize = "".concat(Math.max(newFontsize * font.size * 0.88, 8), "px");
+      text.children[0].style.marginRight = "".concat(text.offsetWidth * 0.04, "px");
+    } else {
+      text.style.fontSize = "".concat(Math.max(newFontsize * font.size * 0.92, 8), "px");
+    } // hide overflow when there can be overflow
+
+
+    if (text.style.fontSize === '8px') {
+      text.children.forEach(function (child) {
+        child.style.overflow = 'hidden';
+      });
+    }
+
+    text.style.margin = '0 3%';
+    text.style.display = 'flex';
+    text.style.alignItems = 'center';
+    text.style.justifyContent = font.align === 'left' ? 'flex-start' : font.align === 'right' ? 'flex-end' : 'center';
+  }
+};
+
+var runActions = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(actionList) {
+    var i;
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            i = 0;
+
+          case 1:
+            if (!(i < actionList.length)) {
+              _context.next = 7;
+              break;
+            }
+
+            _context.next = 4;
+            return actionList[i]();
+
+          case 4:
+            i++;
+            _context.next = 1;
+            break;
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function runActions(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+function renderButton(_ref2) {
+  var layout = _ref2.layout,
+      theme = _ref2.theme,
+      app = _ref2.app,
+      constraints = _ref2.constraints,
+      senseNavigation = _ref2.senseNavigation,
+      element = _ref2.element;
+  var isSense = !!senseNavigation;
+  var button = element.firstElementChild;
+  var style = layout.style,
+      qStateName = layout.qStateName;
+  var disabled = layout.useEnabledCondition && layout.enabledCondition === 0;
+  var isClickable = !disabled && !constraints.active;
+  var formattedStyles = styleFormatter.getStyles({
+    style: style,
+    disabled: disabled,
+    theme: theme,
+    element: element
+  });
+  button.setAttribute('style', formattedStyles);
+  styleFormatter.createLabelAndIcon({
+    button: button,
+    theme: theme,
+    style: style,
+    isSense: isSense
+  });
+  button.onclick = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+    var actionCallList, actions$1, navigation, navigationObject;
+    return regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!isClickable) {
+              _context2.next = 14;
+              break;
+            }
+
+            actionCallList = [];
+            actions$1 = layout.actions;
+            actions$1.forEach(function (action) {
+              var actionObj = actions.find(function (act) {
+                return act.value === action.actionType;
+              });
+              actionObj && actionCallList.push(actionObj.getActionCall(_objectSpread2({
+                app: app,
+                qStateName: qStateName
+              }, action)));
+            });
+            button.setAttribute('disabled', true);
+            _context2.next = 7;
+            return runActions(actionCallList);
+
+          case 7:
+            if (!(senseNavigation && !senseNavigation.getCurrentStoryId())) {
+              _context2.next = 13;
+              break;
+            }
+
+            navigation = layout.navigation;
+            navigationObject = navigation && navigationActions.find(function (nav) {
+              return nav.value === navigation.action;
+            });
+
+            if (!(senseNavigation && navigationObject && typeof navigationObject.navigationCall === 'function')) {
+              _context2.next = 13;
+              break;
+            }
+
+            _context2.next = 13;
+            return navigationObject.navigationCall(_objectSpread2({
+              app: app,
+              senseNavigation: senseNavigation
+            }, navigation));
+
+          case 13:
+            button.removeAttribute('disabled');
+
+          case 14:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
+
+  var scale = function scale() {
+    if (isClickable) {
+      var offsetWidth = button.offsetWidth,
+          offsetHeight = button.offsetHeight;
+      button.style.transform = offsetHeight > offsetWidth ? "scale(".concat(0.98, ", ", 1 - offsetWidth / offsetHeight * 0.02, ")") : "scale(".concat(1 - offsetHeight / offsetWidth * 0.02, ", ", 0.98, ")");
+    }
+  };
+
+  var resetScale = function resetScale() {
+    var transform = button.style.transform;
+
+    if (isClickable && transform !== '' && transform !== 'scale(1)') {
+      button.style.transform = 'scale(1)';
+    }
+  };
+
+  button.onmousedown = function (event) {
+    if (event.button === 0) {
+      scale();
+    }
+  };
+
+  button.onmouseup = resetScale;
+  button.onmouseleave = resetScale;
+  button.ontouchstart = scale;
+  button.ontouchend = resetScale;
+  button.ontouchcancel = resetScale;
+  return function () {
+    button.onclick = undefined;
+    button.onmousedown = undefined;
+    button.onmouseup = undefined;
+    button.onmouseleave = undefined;
+    button.ontouchstart = undefined;
+    button.ontouchend = undefined;
+    button.ontouchcancel = undefined;
+  };
+}
+
+function supernova(env) {
+  var sense = env.sense,
+      translator = env.translator,
+      isEnabled = env.flags.isEnabled;
+  var senseNavigation = sense && sense.navigation;
+  var automationsEnabled = isEnabled('ACTION_BUTTON_AUTOMATIONS');
+  properties.style.label = sense ? translator.get('Object.ActionButton') : 'Button';
+  return {
+    qae: {
+      properties: properties,
+      data: data
+    },
+    component: function component() {
+      var element = useElement();
+      var theme = useTheme();
+      useMemo(function () {
+        var button = document.createElement('button');
+        button.appendChild(document.createElement('text'));
+        element.appendChild(button);
+      }, []);
+      var layout = useStaleLayout();
+      var app = useApp();
+      var constraints = useConstraints();
+      var cleanup = renderButton({
+        element: element,
+        layout: layout,
+        constraints: constraints,
+        theme: theme,
+        app: app,
+        senseNavigation: senseNavigation,
+        automationsEnabled: automationsEnabled
+      });
+      useEffect(function () {
+        return function () {
+          cleanup();
+        };
+      }, [element]);
+      useImperativeHandle(function () {
+        return {
+          focus: function focus() {
+            element.firstElementChild.onclick();
+          }
+        };
+      }, [element]);
+    },
+    ext: ext({
+      translator: translator,
+      automationsEnabled: automationsEnabled
+    })
+  };
+}
+
+export { supernova as default };
+//# sourceMappingURL=sn-action-button.esm.js.map