Creating Enums in UI5 (https://stackoverflow.com/a/50223688/5846045)

<!DOCTYPE html>
<html style="height: 100%;">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Demo</title>
    <style>
      .sapUiBody .demoControlSquare {
        border: 2px solid;
        border-radius: 6.1%;
        width: 4rem;
        height: 4rem;
      }
    </style>
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
      data-sap-ui-on-init="onUI5Init"
      data-sap-ui-async="true"
      data-sap-ui-resource-roots='{ "my.demo": "./" }'
      data-sap-ui-accessibility="false"
      data-sap-ui-preload-lib-css="!sap.ui.core"
      data-sap-ui-modules="my/demo/control/type/Color,my/demo/control/Square"
    ></script>
    <script>
      globalThis.onUI5Init = () => sap.ui.require([
        "my/demo/control/Square",
      ], Square => new Square({
        selectedColor: "Blue",
      }).placeAt("content"));
    </script>
  </head>
  <body class="sapUiBody" id="content"></body>
</html>

sap.ui.define([
  "sap/ui/base/DataType",
], (DataType) => {
  "use strict";
  const color = {
    Red: "Red",
    Blue: "Blue",
    Yellow: "Yellow",
    Green: "Green",
  };
  DataType.registerEnum("my.demo.control.type.Color", color);
  return Object.freeze(color);
}/*, true*//*no longer needed since UI5 1.120 thx to registerEnum*/);
// Exporting globally (true) is required until 1.119.

sap.ui.define([
  "sap/ui/core/Control",
  "./type/Color",
], function(Control) {
  "use strict";

  return Control.extend("my.demo.control.Square", {
    metadata: {
      properties: {
        "selectedColor": {
          type: "my.demo.control.type.Color",
          bindable: true,
        },
      },
    },

    renderer: { 
      apiVersion: 4,
      render: (renderManager, control) => renderManager
        .openStart("div", control)
        .style("background-color", control.getSelectedColor())
        .class("demoControlSquare")
        .openEnd()
        .close("div")
    },

    // ...
  });
});