guify/lib/guify.js

A simple GUI for inspecting and changing JS variables

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else {
		var a = factory();
		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
	}
})(self, function() {
return /******/ (() => { // webpackBootstrap
/******/ 	var __webpack_modules__ = ({

/***/ "./node_modules/add-px-to-style/index.js":
/*!***********************************************!*\
  !*** ./node_modules/add-px-to-style/index.js ***!
  \***********************************************/
/***/ ((module) => {

/* The following list is defined in React's core */
var IS_UNITLESS = {
  animationIterationCount: true,
  boxFlex: true,
  boxFlexGroup: true,
  boxOrdinalGroup: true,
  columnCount: true,
  flex: true,
  flexGrow: true,
  flexPositive: true,
  flexShrink: true,
  flexNegative: true,
  flexOrder: true,
  gridRow: true,
  gridColumn: true,
  fontWeight: true,
  lineClamp: true,
  lineHeight: true,
  opacity: true,
  order: true,
  orphans: true,
  tabSize: true,
  widows: true,
  zIndex: true,
  zoom: true,

  // SVG-related properties
  fillOpacity: true,
  stopOpacity: true,
  strokeDashoffset: true,
  strokeOpacity: true,
  strokeWidth: true
};

module.exports = function(name, value) {
  if(typeof value === 'number' && !IS_UNITLESS[ name ]) {
    return value + 'px';
  } else {
    return value;
  }
};

/***/ }),

/***/ "./src/component-manager.js":
/*!**********************************!*\
  !*** ./src/component-manager.js ***!
  \**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "ComponentManager": () => (/* binding */ ComponentManager)
/* harmony export */ });
/* harmony import */ var _components_public_title__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./components/public/title */ "./src/components/public/title.js");
/* harmony import */ var _components_public_range__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./components/public/range */ "./src/components/public/range.js");
/* harmony import */ var _components_public_button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/public/button */ "./src/components/public/button.js");
/* harmony import */ var _components_public_checkbox__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/public/checkbox */ "./src/components/public/checkbox.js");
/* harmony import */ var _components_public_select__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/public/select */ "./src/components/public/select.js");
/* harmony import */ var _components_public_text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/public/text */ "./src/components/public/text.js");
/* harmony import */ var _components_public_color__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./components/public/color */ "./src/components/public/color.js");
/* harmony import */ var _components_public_folder__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./components/public/folder */ "./src/components/public/folder.js");
/* harmony import */ var _components_public_file__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./components/public/file */ "./src/components/public/file.js");
/* harmony import */ var _components_public_display__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/public/display */ "./src/components/public/display.js");
/* harmony import */ var _components_public_interval__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/public/interval */ "./src/components/public/interval.js");
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }












/**
 * Manages the loading and instantiation of Components.
 */

var ComponentManager = /*#__PURE__*/function () {
  function ComponentManager(theme) {
    _classCallCheck(this, ComponentManager);

    this.theme = theme;
    this.components = {
      "title": _components_public_title__WEBPACK_IMPORTED_MODULE_0__["default"],
      "range": _components_public_range__WEBPACK_IMPORTED_MODULE_1__["default"],
      "button": _components_public_button__WEBPACK_IMPORTED_MODULE_2__["default"],
      "checkbox": _components_public_checkbox__WEBPACK_IMPORTED_MODULE_3__["default"],
      "select": _components_public_select__WEBPACK_IMPORTED_MODULE_4__["default"],
      "text": _components_public_text__WEBPACK_IMPORTED_MODULE_5__["default"],
      "color": _components_public_color__WEBPACK_IMPORTED_MODULE_6__["default"],
      "folder": _components_public_folder__WEBPACK_IMPORTED_MODULE_7__["default"],
      "file": _components_public_file__WEBPACK_IMPORTED_MODULE_8__["default"],
      "display": _components_public_display__WEBPACK_IMPORTED_MODULE_9__["default"],
      "interval": _components_public_interval__WEBPACK_IMPORTED_MODULE_10__["default"]
    };
  }
  /**
   * Creates the component specified by `opts` and appends it to the
   * document as a child of `root`.
   *
   * @param {HTMLElement} [root] Parent of the created component
   * @param {Object} [opts] Options used to create the component
   */


  _createClass(ComponentManager, [{
    key: "Create",
    value: function Create(root, opts) {
      var initializer = this.components[opts.type];

      if (initializer === undefined) {
        throw new Error("No component type named '".concat(opts.type, "' exists."));
      }

      var newComponent = new initializer(root, opts, this.theme);
      return newComponent;
    }
  }]);

  return ComponentManager;
}();

/***/ }),

/***/ "./src/components/component-base.js":
/*!******************************************!*\
  !*** ./src/components/component-base.js ***!
  \******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ ComponentBase)
/* harmony export */ });
/* harmony import */ var wolfy87_eventemitter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! wolfy87-eventemitter */ "./node_modules/wolfy87-eventemitter/EventEmitter.js");
/* harmony import */ var wolfy87_eventemitter__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(wolfy87_eventemitter__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! uuid */ "./node_modules/uuid/index.js");
/* harmony import */ var uuid__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(uuid__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _partials_container__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./partials/container */ "./src/components/partials/container.js");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }





var ComponentBase = /*#__PURE__*/function (_EventEmitter) {
  _inherits(ComponentBase, _EventEmitter);

  var _super = _createSuper(ComponentBase);

  function ComponentBase(root, opts, theme) {
    var _this;

    var makeContainer = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;

    _classCallCheck(this, ComponentBase);

    _this = _super.call(this);
    _this.root = root;
    _this.opts = opts;
    _this.theme = theme;
    _this.uuid = (0,uuid__WEBPACK_IMPORTED_MODULE_1__.v4)();

    if (makeContainer) {
      _this.container = (0,_partials_container__WEBPACK_IMPORTED_MODULE_2__["default"])(root, opts.label, theme);
    }

    _this.SetEnabled(opts.enabled || true);

    return _this;
  }

  _createClass(ComponentBase, [{
    key: "SetEnabled",
    value: function SetEnabled(enabled) {
      this.enabled = enabled;

      if (enabled) {
        var _this$container;

        (_this$container = this.container) === null || _this$container === void 0 ? void 0 : _this$container.classList.remove("disabled");
      } else {
        var _this$container2;

        (_this$container2 = this.container) === null || _this$container2 === void 0 ? void 0 : _this$container2.classList.add("disabled");
      }
    }
  }, {
    key: "Remove",
    value: function Remove() {
      if (this.container) {
        this.container.parentNode.removeChild(this.container);
      }
    }
  }]);

  return ComponentBase;
}((wolfy87_eventemitter__WEBPACK_IMPORTED_MODULE_0___default()));



/***/ }),

/***/ "./src/components/internal/menu-bar.js":
/*!*********************************************!*\
  !*** ./src/components/internal/menu-bar.js ***!
  \*********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "MenuBar": () => (/* binding */ MenuBar)
/* harmony export */ });
/* harmony import */ var _component_base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../component-base.js */ "./src/components/component-base.js");
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! dom-css */ "./node_modules/dom-css/index.js");
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dom_css__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var screenfull__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! screenfull */ "./node_modules/screenfull/dist/screenfull.js");
/* harmony import */ var screenfull__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(screenfull__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _menu_bar_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./menu-bar.css */ "./src/components/internal/menu-bar.css");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }





var MenuBar = /*#__PURE__*/function (_ComponentBase) {
  _inherits(MenuBar, _ComponentBase);

  var _super = _createSuper(MenuBar);

  function MenuBar(root, opts, theme) {
    var _this;

    _classCallCheck(this, MenuBar);

    _this = _super.call(this, root, opts, theme, false); // Create menu bar

    _this.element = document.createElement("div");

    _this.element.classList.add("guify-bar");

    root.appendChild(_this.element);

    if (opts.title) {
      // Create a text label inside of the bar
      var text = _this.element.appendChild(document.createElement("div"));

      text.classList.add("guify-bar-title");
      text.innerHTML = opts.title;
      _this.label = text;
    } // Make the menu collapse button


    var menuButton = _this.element.appendChild(document.createElement("button"));

    menuButton.classList.add("guify-bar-button");
    menuButton.innerHTML = "Controls";
    dom_css__WEBPACK_IMPORTED_MODULE_1___default()(menuButton, {
      left: opts.align == "left" ? "0" : "unset",
      right: opts.align == "left" ? "unset" : "0"
    });

    menuButton.onclick = function () {
      _this.emit("ontogglepanel");
    }; // Make the fullscreen button


    if ((screenfull__WEBPACK_IMPORTED_MODULE_2___default().isEnabled)) {
      var fullscreenButton = _this.element.appendChild(document.createElement("button"));

      fullscreenButton.classList.add("guify-bar-button");
      fullscreenButton.innerHTML = "「　」";
      fullscreenButton.setAttribute("aria-label", "Toggle Fullscreen");
      dom_css__WEBPACK_IMPORTED_MODULE_1___default()(fullscreenButton, {
        left: opts.align == "left" ? "unset" : "0",
        // Place on opposite side from menuButton
        right: opts.align == "left" ? "0" : "unset"
      });

      fullscreenButton.onclick = function () {
        _this.emit("onfullscreenrequested");
      };
    }

    return _this;
  }

  _createClass(MenuBar, [{
    key: "SetVisible",
    value: function SetVisible(show) {
      this.element.style.display = show ? "block" : "none";
    }
  }]);

  return MenuBar;
}(_component_base_js__WEBPACK_IMPORTED_MODULE_0__["default"]);

/***/ }),

/***/ "./src/components/internal/panel.js":
/*!******************************************!*\
  !*** ./src/components/internal/panel.js ***!
  \******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "Panel": () => (/* binding */ Panel)
/* harmony export */ });
/* harmony import */ var _component_base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../component-base.js */ "./src/components/component-base.js");
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! dom-css */ "./node_modules/dom-css/index.js");
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dom_css__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _panel_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./panel.css */ "./src/components/internal/panel.css");
/* harmony import */ var _partials_header__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../partials/header */ "./src/components/partials/header.js");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }





var Panel = /*#__PURE__*/function (_ComponentBase) {
  _inherits(Panel, _ComponentBase);

  var _super = _createSuper(Panel);

  function Panel(root, opts, theme) {
    var _this;

    _classCallCheck(this, Panel);

    _this = _super.call(this, root, opts, theme, false); // Container the panel will sit in

    _this.container = root.appendChild(document.createElement("div"));

    _this.container.classList.add("guify-panel-container");

    dom_css__WEBPACK_IMPORTED_MODULE_1___default()(_this.container, {
      width: opts.width,
      opacity: opts.opacity || 1.0
    });

    if (opts.align == "left") {
      if (opts.panelMode == "outer") {
        _this.container.classList.add("guify-panel-container-left-outer");
      } else if (opts.panelMode == "inner") {
        _this.container.classList.add("guify-panel-container-left-inner");
      }
    } else {
      if (opts.panelMode == "outer") {
        _this.container.classList.add("guify-panel-container-right-outer");
      } else if (opts.panelMode == "inner") {
        _this.container.classList.add("guify-panel-container-right-inner");
      }
    }

    if (opts.panelOverflowBehavior == "scroll") {
      _this.container.classList.add("guify-panel-container-scrollable");
    }

    if (opts.barMode === "none") {
      // this._MakeToggleButton();
      dom_css__WEBPACK_IMPORTED_MODULE_1___default()(_this.container, {
        maxHeight: "100%"
      });
    } // Create panel inside container


    _this.panel = _this.container.appendChild(document.createElement("div"));

    _this.panel.classList.add("guify-panel"); // Add a title to the panel


    if (opts.barMode === "none" && opts.title) (0,_partials_header__WEBPACK_IMPORTED_MODULE_3__["default"])(_this.panel, opts.title, theme);
    return _this;
  }
  /**
   * Makes the panel visible based on the truthiness of `show`.
   * @param {Bool} [show]
   */


  _createClass(Panel, [{
    key: "SetVisible",
    value: function SetVisible(show) {
      if (show) {
        // this.panel.style.height = Array.prototype.reduce.call(this.panel.childNodes, function(p, c) {return p + (c.offsetHeight || 0) + 5 + 1;}, 0) + 'px';
        // this.panel.style.paddingTop = '14px';
        // this.panel.style.paddingBottom = '8px';
        this.panel.classList.remove("guify-panel-hidden");
        if (this.menuButton) this.menuButton.setAttribute("alt", "Close GUI");
      } else {
        // this.panel.style.height = '0px';
        // this.panel.style.paddingTop = '0px';
        // this.panel.style.paddingBottom = '0px';
        this.panel.classList.add("guify-panel-hidden");
        if (this.menuButton) this.menuButton.setAttribute("alt", "Open GUI");
      }
    }
    /**
     * Toggles the visibility of the panel.
     */

  }, {
    key: "ToggleVisible",
    value: function ToggleVisible() {
      if (this.panel.classList.contains("guify-panel-hidden")) this.SetVisible(true);else this.SetVisible(false);
    }
    /**
     * Makes a show/hide button that sits at the bottom of the panel.
     */

  }, {
    key: "_MakeToggleButton",
    value: function _MakeToggleButton() {
      var _this2 = this;

      // Make the menu collapse button
      this.menuButton = this.container.appendChild(document.createElement("button"));
      this.menuButton.className = "guify-panel-toggle-button";
      dom_css__WEBPACK_IMPORTED_MODULE_1___default()(this.menuButton, {
        left: this.opts.align == "left" ? "0px" : "unset",
        right: this.opts.align == "left" ? "unset" : "0px"
      });

      this.menuButton.onclick = function () {
        _this2.ToggleVisible();
      }; // Defocus on mouse up (for non-accessibility users)


      this.menuButton.addEventListener("mouseup", function () {
        _this2.menuButton.blur();
      });
      this.menuButton.innerHTML = "\n        <svg width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n            <rect x=\"10%\" y=\"10%\" width=\"80%\" height=\"80%\"/>\n        </svg>\n        ";
    }
  }]);

  return Panel;
}(_component_base_js__WEBPACK_IMPORTED_MODULE_0__["default"]);

/***/ }),

/***/ "./src/components/internal/toast-area.js":
/*!***********************************************!*\
  !*** ./src/components/internal/toast-area.js ***!
  \***********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "ToastArea": () => (/* binding */ ToastArea)
/* harmony export */ });
/* harmony import */ var _component_base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../component-base.js */ "./src/components/component-base.js");
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! dom-css */ "./node_modules/dom-css/index.js");
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(dom_css__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _toast_area_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./toast-area.css */ "./src/components/internal/toast-area.css");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }




/**
 * Represents a container div that creates and holds toast notifications.
 */

var ToastArea = /*#__PURE__*/function (_ComponentBase) {
  _inherits(ToastArea, _ComponentBase);

  var _super = _createSuper(ToastArea);

  function ToastArea(root, opts, theme) {
    var _this;

    _classCallCheck(this, ToastArea);

    _this = _super.call(this, root, opts, theme, false); // Make toast area

    _this.element = root.appendChild(document.createElement("div"));

    _this.element.classList.add("guify-toast-area");

    dom_css__WEBPACK_IMPORTED_MODULE_1___default()(_this.element, {
      position: "absolute",
      "width": "100%"
    });
    return _this;
  }
  /**
   * Makes a message that appears under the menu bar. Transitions out
   * over `transitionMS` milliseconds after `stayMS` milliseconds have passed.
   */


  _createClass(ToastArea, [{
    key: "CreateToast",
    value: function CreateToast(message) {
      var stayMS = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 5000;
      var transitionMS = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
      console.log("[Toast] " + message);
      var toast = this.element.appendChild(document.createElement("div"));
      toast.classList.add("guify-toast-notification");
      toast.setAttribute("aria-live", "polite");
      toast.innerHTML = message;
      dom_css__WEBPACK_IMPORTED_MODULE_1___default()(toast, {// Animation stuff
        // '-webkit-transition': 'opacity ' + transitionMS + 'ms linear',
        // 'transition': 'opacity ' + transitionMS + 'ms linear',
      }); // Make close button in toast

      var closeButton = toast.appendChild(document.createElement("button"));
      closeButton.innerHTML = "&#10006;";
      closeButton.classList.add("guify-toast-close-button");
      var timeout;

      var TransitionOut = function TransitionOut() {
        toast.blur();
        dom_css__WEBPACK_IMPORTED_MODULE_1___default()(toast, {
          //'transform-style': 'flat',
          //'transform-style': 'preserve-3d',
          // Slide up
          // '-webkit-transition': '-webkit-transform ' + transitionMS + 'ms linear',
          // 'transition': 'transform ' + transitionMS + 'ms linear',
          // '-webkit-transform': 'translate3d(0, -100%, 0)',
          // 'transform:': 'translate3d(0, -100%, 0)',
          // Fade out
          //'-webkit-transition': '-webkit-opacity ' + transitionMS + 'ms linear',
          //'transition': 'opacity ' + transitionMS + 'ms linear',
          "opacity": "0"
        });
        clearTimeout(timeout);
        timeout = setTimeout(function () {
          if (toast) toast.parentNode.removeChild(toast);
        }, transitionMS);
      };

      timeout = setTimeout(TransitionOut, stayMS);
      closeButton.onclick = TransitionOut;
    }
  }]);

  return ToastArea;
}(_component_base_js__WEBPACK_IMPORTED_MODULE_0__["default"]);

/***/ }),

/***/ "./src/components/partials/container.js":
/*!**********************************************!*\
  !*** ./src/components/partials/container.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _container_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./container.css */ "./src/components/partials/container.css");
 // eslint-disable-next-line no-unused-vars

var Container = function Container(root, label, theme) {
  var container = root.appendChild(document.createElement("div"));
  container.classList.add("guify-component-container");
  return container;
};

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Container);

/***/ }),

/***/ "./src/components/partials/header.js":
/*!*******************************************!*\
  !*** ./src/components/partials/header.js ***!
  \*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* export default binding */ __WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! dom-css */ "./node_modules/dom-css/index.js");
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(dom_css__WEBPACK_IMPORTED_MODULE_0__);

/* harmony default export */ function __WEBPACK_DEFAULT_EXPORT__(root, text, theme) {
  var title = root.appendChild(document.createElement("div"));
  title.innerHTML = text;
  dom_css__WEBPACK_IMPORTED_MODULE_0___default()(title, {
    width: "100%",
    textAlign: "center",
    color: theme.colors.textSecondary,
    height: "20px",
    marginBottom: "4px"
  });
  return title;
}

/***/ }),

/***/ "./src/components/partials/label.js":
/*!******************************************!*\
  !*** ./src/components/partials/label.js ***!
  \******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _label_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./label.css */ "./src/components/partials/label.css");
 // eslint-disable-next-line no-unused-vars

/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (function (root, text, theme) {
  var label = root.appendChild(document.createElement("div"));
  label.classList.add("guify-component-label");
  label.innerHTML = text;
  return label;
});

/***/ }),

/***/ "./src/components/partials/value.js":
/*!******************************************!*\
  !*** ./src/components/partials/value.js ***!
  \******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! dom-css */ "./node_modules/dom-css/index.js");
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(dom_css__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _value_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./value.css */ "./src/components/partials/value.css");


/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (function (root, text, theme, width, left) {
  var input = root.appendChild(document.createElement("input"));
  input.type = "text";
  input.classList.add("guify-value-input");
  input.value = text;

  if (!left) {
    input.classList.add("guify-value-input-right");
  }

  dom_css__WEBPACK_IMPORTED_MODULE_0___default()(input, {
    "width": width
  });
  return input;
});

/***/ }),

/***/ "./src/components/public/button.js":
/*!*****************************************!*\
  !*** ./src/components/public/button.js ***!
  \*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ Button)
/* harmony export */ });
/* harmony import */ var _component_base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../component-base.js */ "./src/components/component-base.js");
/* harmony import */ var _partials_label__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../partials/label */ "./src/components/partials/label.js");
/* harmony import */ var _button_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./button.css */ "./src/components/public/button.css");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }





var Button = /*#__PURE__*/function (_ComponentBase) {
  _inherits(Button, _ComponentBase);

  var _super = _createSuper(Button);

  function Button(root, opts, theme) {
    var _this;

    _classCallCheck(this, Button);

    _this = _super.call(this, root, opts, theme);
    _this.label = (0,_partials_label__WEBPACK_IMPORTED_MODULE_1__["default"])(_this.container, "", theme);
    _this.input = _this.container.appendChild(document.createElement("button"));

    _this.input.classList.add("guify-button");

    _this.input.textContent = opts.label;
    _this.button = _this.input;

    _this.input.addEventListener("click", opts.action); // Defocus on mouse up (for non-accessibility users)


    _this.input.addEventListener("mouseup", function () {
      _this.input.blur();
    });

    return _this;
  }

  return Button;
}(_component_base_js__WEBPACK_IMPORTED_MODULE_0__["default"]);



/***/ }),

/***/ "./src/components/public/checkbox.js":
/*!*******************************************!*\
  !*** ./src/components/public/checkbox.js ***!
  \*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ Checkbox)
/* harmony export */ });
/* harmony import */ var _component_base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../component-base.js */ "./src/components/component-base.js");
/* harmony import */ var _partials_label__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../partials/label */ "./src/components/partials/label.js");
/* harmony import */ var _checkbox_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./checkbox.css */ "./src/components/public/checkbox.css");
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }





var Checkbox = /*#__PURE__*/function (_ComponentBase) {
  _inherits(Checkbox, _ComponentBase);

  var _super = _createSuper(Checkbox);

  function Checkbox(root, opts, theme) {
    var _this;

    _classCallCheck(this, Checkbox);

    _this = _super.call(this, root, opts, theme);
    _this.label = (0,_partials_label__WEBPACK_IMPORTED_MODULE_1__["default"])(_this.container, opts.label, theme);
    _this.input = _this.container.appendChild(document.createElement("input"));
    _this.input.id = "guify-checkbox-" + opts.label + _this.uuid;
    _this.input.type = "checkbox";
    _this.input.checked = opts.initial;

    _this.input.classList.add("guify-checkbox"); // Add ARIA attribute to input based on label text


    if (opts.label) _this.input.setAttribute("aria-label", opts.label); // This is a HTML `<label>` element, not a LabelPartial.

    var labelElement = _this.container.appendChild(document.createElement("label"));

    labelElement.htmlFor = _this.input.id;
    setTimeout(function () {
      _this.emit("initialized", _this.input.checked);
    });

    _this.input.onchange = function (data) {
      _this.emit("input", data.target.checked);
    };

    return _this;
  }

  _createClass(Checkbox, [{
    key: "SetValue",
    value: function SetValue(value) {
      this.input.checked = value;
    }
  }, {
    key: "GetValue",
    value: function GetValue() {
      return this.input.checked;
    }
  }]);

  return Checkbox;
}(_component_base_js__WEBPACK_IMPORTED_MODULE_0__["default"]);



/***/ }),

/***/ "./src/components/public/color.js":
/*!****************************************!*\
  !*** ./src/components/public/color.js ***!
  \****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ Color)
/* harmony export */ });
/* harmony import */ var _component_base_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../component-base.js */ "./src/components/component-base.js");
/* harmony import */ var simple_color_picker__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! simple-color-picker */ "./node_modules/simple-color-picker/dist/simple-color-picker.module.js");
/* harmony import */ var tinycolor2__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! tinycolor2 */ "./node_modules/tinycolor2/tinycolor.js");
/* harmony import */ var tinycolor2__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(tinycolor2__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var dom_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*!