@wcardinal/wcardinal-ui 0.158.0 → 0.161.0

package/dist/wcardinal-ui.cjs.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.158.0
+ Winter Cardinal UI v0.161.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -1698,7 +1698,7 @@ var EShapeFillImpl = /** @class */ (function () {
         };
     };
     EShapeFillImpl.prototype.serialize = function (manager) {
-        var stringified = "[" + (this._enable ? 1 : 0) + "," + this._color + "," + this._alpha + "]";
+        var stringified = "[".concat(this._enable ? 1 : 0, ",").concat(this._color, ",").concat(this._alpha, "]");
         return manager.addResource(stringified);
     };
     EShapeFillImpl.prototype.deserialize = function (target, manager) {
@@ -2090,7 +2090,7 @@ var EShapeBarPoints = /** @class */ (function () {
         return result;
     };
     EShapeBarPoints.prototype.serialize = function (manager) {
-        return manager.addResource("[" + this._position + "," + this._size + "," + this._style + "]");
+        return manager.addResource("[".concat(this._position, ",").concat(this._size, ",").concat(this._style, "]"));
     };
     EShapeBarPoints.prototype.deserialize = function (resourceId, manager) {
         if (0 <= resourceId && resourceId < manager.resources.length) {
@@ -3710,10 +3710,10 @@ var hitTestBBox = function (x, y, ax, ay) {
  */
 var toGradientSerialized = function (gradient) {
     var points = gradient.points;
-    var result = "[" + gradient.direction;
+    var result = "[".concat(gradient.direction);
     for (var i = 0, imax = points.length, j = 1; i < imax; i += 1, j += 3) {
         var point = points[i];
-        result += "," + point.color + "," + point.alpha + "," + point.position;
+        result += ",".concat(point.color, ",").concat(point.alpha, ",").concat(point.position);
     }
     result += "]";
     return result;
@@ -4605,7 +4605,7 @@ var EShapeStrokeImpl = /** @class */ (function () {
     };
     EShapeStrokeImpl.prototype.serialize = function (manager) {
         var enable = this._enable ? 1 : 0;
-        var serialized = "[" + enable + "," + this._color + "," + this._alpha + "," + this._width + "," + this._align + "," + this._side + "," + this._style + "]";
+        var serialized = "[".concat(enable, ",").concat(this._color, ",").concat(this._alpha, ",").concat(this._width, ",").concat(this._align, ",").concat(this._side, ",").concat(this._style, "]");
         return manager.addResource(serialized);
     };
     EShapeStrokeImpl.prototype.deserialize = function (target, manager) {
@@ -4835,7 +4835,7 @@ var EShapeDataValueRangeImpl = /** @class */ (function () {
         };
     };
     EShapeDataValueRangeImpl.prototype.serialize = function (manager) {
-        var serialized = "[" + this._type + "," + this._from + "," + this._to + "]";
+        var serialized = "[".concat(this._type, ",").concat(this._from, ",").concat(this._to, "]");
         return manager.addResource(serialized);
     };
     EShapeDataValueRangeImpl.prototype.deserialize = function (target, manager) {
@@ -5345,7 +5345,7 @@ var EShapeDataValueImpl = /** @class */ (function () {
         var initialSerialized = manager.addResource(this.initial);
         var formatSerialized = manager.addResource(this.format.trim());
         var rangeSerialized = this.range.serialize(manager);
-        return manager.addResource("[" + idSerialized + "," + initialSerialized + "," + formatSerialized + "," + rangeSerialized + "," + this._capacity + "," + this._order + "]");
+        return manager.addResource("[".concat(idSerialized, ",").concat(initialSerialized, ",").concat(formatSerialized, ",").concat(rangeSerialized, ",").concat(this._capacity, ",").concat(this._order, "]"));
     };
     EShapeDataValueImpl.prototype.deserialize = function (target, manager) {
         var resources = manager.resources;
@@ -5585,9 +5585,9 @@ var EShapeDataImpl = /** @class */ (function () {
             return manager.addResource("[]");
         }
         else {
-            var serialized = "[" + values[0].serialize(manager);
+            var serialized = "[".concat(values[0].serialize(manager));
             for (var i = 1, imax = values.length; i < imax; ++i) {
-                serialized += "," + values[i].serialize(manager);
+                serialized += ",".concat(values[i].serialize(manager));
             }
             serialized += "]";
             return manager.addResource(serialized);
@@ -5677,7 +5677,7 @@ var EShapeTextAlignImpl = /** @class */ (function () {
         };
     };
     EShapeTextAlignImpl.prototype.serialize = function (manager) {
-        return manager.addResource("[" + this._horizontal + "," + this._vertical + "]");
+        return manager.addResource("[".concat(this._horizontal, ",").concat(this._vertical, "]"));
     };
     EShapeTextAlignImpl.prototype.deserialize = function (target, manager) {
         var resources = manager.resources;
@@ -5758,7 +5758,7 @@ var EShapeTextOffsetImpl = /** @class */ (function () {
         };
     };
     EShapeTextOffsetImpl.prototype.serialize = function (manager) {
-        return manager.addResource("[" + this._horizontal + "," + this._vertical + "]");
+        return manager.addResource("[".concat(this._horizontal, ",").concat(this._vertical, "]"));
     };
     EShapeTextOffsetImpl.prototype.deserialize = function (target, manager) {
         var resources = manager.resources;
@@ -5880,7 +5880,7 @@ var EShapeTextOutlineImpl = /** @class */ (function () {
         };
     };
     EShapeTextOutlineImpl.prototype.serialize = function (manager) {
-        var serialized = "[" + (this._enable ? 1 : 0) + "," + this._color + "," + this._alpha + "," + this._width + "]";
+        var serialized = "[".concat(this._enable ? 1 : 0, ",").concat(this._color, ",").concat(this._alpha, ",").concat(this._width, "]");
         return manager.addResource(serialized);
     };
     EShapeTextOutlineImpl.prototype.deserialize = function (target, manager) {
@@ -6164,9 +6164,9 @@ var EShapeTextImpl = /** @class */ (function () {
         var outlineId = this.outline.serialize(manager);
         var spacingId = this.spacing.serialize(manager);
         var paddingId = this.padding.serialize(manager);
-        var serialized = "[" + valueId + "," + this._color + "," + this._alpha + "," + familyId + "," + this._size + "," +
-            (this._weight + "," + alignId + "," + offsetId + "," + this._style + "," + outlineId + ",") +
-            (spacingId + "," + this._direction + "," + paddingId + "," + (this._clipping ? 1 : 0) + "]");
+        var serialized = "[".concat(valueId, ",").concat(this._color, ",").concat(this._alpha, ",").concat(familyId, ",").concat(this._size, ",") +
+            "".concat(this._weight, ",").concat(alignId, ",").concat(offsetId, ",").concat(this._style, ",").concat(outlineId, ",") +
+            "".concat(spacingId, ",").concat(this._direction, ",").concat(paddingId, ",").concat(this._clipping ? 1 : 0, "]");
         return manager.addResource(serialized);
     };
     EShapeTextImpl.prototype.deserialize = function (target, manager) {
@@ -6978,7 +6978,7 @@ var UtilRgb = /** @class */ (function () {
     UtilRgb.fromCode = function (code) {
         var trimmed = code.trim().toLowerCase();
         if (trimmed.length === 6) {
-            var color = Number("0x" + trimmed);
+            var color = Number("0x".concat(trimmed));
             if (color === color) {
                 return color;
             }
@@ -7603,13 +7603,13 @@ var EShapeActionExpressions = /** @class */ (function () {
                 "with( shape ) {" +
                 "with( state ) {" +
                 (nullable ?
-                    ("var result = (" + expression + ");" +
-                        ("return (result != null ? " + caster + "(result) : null);")) :
-                    "return " + caster + "(" + expression + ");") +
+                    ("var result = (".concat(expression, ");") +
+                        "return (result != null ? ".concat(caster, "(result) : null);")) :
+                    "return ".concat(caster, "(").concat(expression, ");")) +
                 "}" +
                 "}" +
                 "} catch( e ) {" +
-                ("return " + defLiteral + ";") +
+                "return ".concat(defLiteral, ";") +
                 "}";
             /* eslint-enable prettier/prettier */
             if (parameter == null) {
@@ -8006,7 +8006,7 @@ var EShapeActionValueBlink = /** @class */ (function (_super) {
     };
     EShapeActionValueBlink.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + this.interval + "," + this.color + "," + this.alpha + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(this.interval, ",").concat(this.color, ",").concat(this.alpha, "]"));
     };
     EShapeActionValueBlink.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -8320,7 +8320,7 @@ var EShapeActionValueChangeColor = /** @class */ (function (_super) {
     EShapeActionValueChangeColor.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
         var blendId = manager.addResource(this.blend);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + this.target + "," + this.color + "," + this.alpha + "," + blendId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(this.target, ",").concat(this.color, ",").concat(this.alpha, ",").concat(blendId, "]"));
     };
     EShapeActionValueChangeColor.deserialize = function (serialized, manager) {
         var subtype = EShapeActionValueChangeColorTypes.from(serialized);
@@ -8405,7 +8405,7 @@ var EShapeActionValueChangeColorBrightness = /** @class */ (function (_super) {
         var conditionId = manager.addResource(this.condition);
         var target = EShapeActionValueChangeColorTarget.BRIGHTNESS;
         var brightnessId = manager.addResource(this.brightness);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + target + "," + brightnessId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(target, ",").concat(brightnessId, "]"));
     };
     EShapeActionValueChangeColorBrightness.deserialize = function (serialized, manager) {
         var subtype = EShapeActionValueChangeColorTypes.from(serialized);
@@ -8469,7 +8469,7 @@ var EShapeActionValueChangeColorCode = /** @class */ (function (_super) {
         var colorId = manager.addResource(this.color);
         var alphaId = manager.addResource(this.alpha);
         var blendId = manager.addResource(this.blend);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + target + "," + colorId + "," + alphaId + "," + blendId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(target, ",").concat(colorId, ",").concat(alphaId, ",").concat(blendId, "]"));
     };
     EShapeActionValueChangeColorCode.deserialize = function (serialized, manager) {
         var subtype = EShapeActionValueChangeColorTypes.from(serialized);
@@ -8527,7 +8527,7 @@ var EShapeActionValueChangeCursor = /** @class */ (function (_super) {
     EShapeActionValueChangeCursor.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
         var nameId = manager.addResource(this.name);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + nameId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(nameId, "]"));
     };
     EShapeActionValueChangeCursor.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -8584,7 +8584,7 @@ var FormatNoded = /** @class */ (function () {
     function FormatNoded() {
     }
     FormatNoded.prototype.format = function (target, step, date) {
-        return "" + (target | 0);
+        return "".concat(target | 0);
     };
     return FormatNoded;
 }());
@@ -8706,7 +8706,7 @@ var FormatNodefsi = /** @class */ (function (_super) {
     };
     FormatNodefsi.prototype.format_ = function (target, unitInverse, postfix) {
         var value = target * unitInverse;
-        return "" + value.toFixed(this.precision) + postfix;
+        return "".concat(value.toFixed(this.precision)).concat(postfix);
     };
     return FormatNodefsi;
 }(FormatNodePrecision));
@@ -8799,7 +8799,7 @@ var FormatNodeP = /** @class */ (function () {
     function FormatNodeP() {
     }
     FormatNodeP.prototype.format = function (target, step, date) {
-        return ((target * 100) | 0) + "%";
+        return "".concat((target * 100) | 0, "%");
     };
     return FormatNodeP;
 }());
@@ -8812,7 +8812,7 @@ var FormatNodep = /** @class */ (function () {
     function FormatNodep() {
     }
     FormatNodep.prototype.format = function (target, step, date) {
-        return (target | 0) + "%";
+        return "".concat(target | 0, "%");
     };
     return FormatNodep;
 }());
@@ -8844,7 +8844,7 @@ var FormatNodeParenthesis = /** @class */ (function () {
     FormatNodeParenthesis.prototype.format = function (target, step, date) {
         var result = this.node.format(target, step, date);
         if (0 < result.length && result[0] === "-") {
-            return "(" + result.substring(1, result.length) + ")";
+            return "(".concat(result.substring(1, result.length), ")");
         }
         return result;
     };
@@ -8862,7 +8862,7 @@ var FormatNodePlus = /** @class */ (function () {
     FormatNodePlus.prototype.format = function (target, step, date) {
         var result = this.node.format(target, step, date);
         if (0 < result.length && result[0] !== "-") {
-            return "+" + result;
+            return "+".concat(result);
         }
         return result;
     };
@@ -8877,7 +8877,7 @@ var FormatNodeRP = /** @class */ (function () {
     function FormatNodeRP() {
     }
     FormatNodeRP.prototype.format = function (target, step, date) {
-        return Math.round(target * 100) + "%";
+        return "".concat(Math.round(target * 100), "%");
     };
     return FormatNodeRP;
 }());
@@ -8890,7 +8890,7 @@ var FormatNoderp = /** @class */ (function () {
     function FormatNoderp() {
     }
     FormatNoderp.prototype.format = function (target, step, date) {
-        return Math.round(target) + "%";
+        return "".concat(Math.round(target), "%");
     };
     return FormatNoderp;
 }());
@@ -8911,24 +8911,24 @@ var FormatNodesdt = /** @class */ (function () {
     }
     FormatNodesdt.prototype.format = function (target, step, date) {
         if (step < 1000) {
-            return this.s.format(target, step, date) + "." + this.mi.format(target, step, date);
+            return "".concat(this.s.format(target, step, date), ".").concat(this.mi.format(target, step, date));
         }
         else if (step < 60000) {
-            return this.m.format(target, step, date) + ":" + this.s.format(target, step, date);
+            return "".concat(this.m.format(target, step, date), ":").concat(this.s.format(target, step, date));
         }
         else if (step < 3600000) {
-            return this.H.format(target, step, date) + ":" + this.m.format(target, step, date);
+            return "".concat(this.H.format(target, step, date), ":").concat(this.m.format(target, step, date));
         }
         else if (step < 86400000) {
             var M = this.M.format(target, step, date);
             var D = this.D.format(target, step, date);
-            return M + "/" + D + " " + this.H.format(target, step, date);
+            return "".concat(M, "/").concat(D, " ").concat(this.H.format(target, step, date));
         }
         else if (step < 2592000000) {
-            return this.M.format(target, step, date) + "/" + this.D.format(target, step, date);
+            return "".concat(this.M.format(target, step, date), "/").concat(this.D.format(target, step, date));
         }
         else {
-            return this.Y.format(target, step, date) + "/" + this.M.format(target, step, date);
+            return "".concat(this.Y.format(target, step, date), "/").concat(this.M.format(target, step, date));
         }
     };
     return FormatNodesdt;
@@ -8945,7 +8945,7 @@ var FormatNodeSpace = /** @class */ (function () {
     FormatNodeSpace.prototype.format = function (target, step, date) {
         var result = this.node.format(target, step, date);
         if (0 < result.length && result[0] !== "-") {
-            return " " + result;
+            return " ".concat(result);
         }
         return result;
     };
@@ -9019,7 +9019,7 @@ var FormatNodez = /** @class */ (function () {
         var tzs = z <= 0 ? "+" : "-";
         var tzh = toPadded(String(Math.floor(Math.abs(z) / 60)), 2, "0");
         var tzm = toPadded(String(Math.floor(Math.abs(z) % 60)), 2, "0");
-        return "" + tzs + tzh + ":" + tzm;
+        return "".concat(tzs).concat(tzh, ":").concat(tzm);
     };
     return FormatNodez;
 }());
@@ -9032,7 +9032,7 @@ var FormatNoderd = /** @class */ (function () {
     function FormatNoderd() {
     }
     FormatNoderd.prototype.format = function (target, step, date) {
-        return "" + Math.round(target);
+        return "".concat(Math.round(target));
     };
     return FormatNoderd;
 }());
@@ -9397,7 +9397,7 @@ var EShapeActionValueChangeText = /** @class */ (function (_super) {
     EShapeActionValueChangeText.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
         var valueId = manager.addResource(this.value);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + valueId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(valueId, "]"));
     };
     EShapeActionValueChangeText.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -11334,7 +11334,7 @@ var DScalarExpression = /** @class */ (function () {
                 return;
             }
         }
-        throw new Error("Failed to parse '" + expression + "'");
+        throw new Error("Failed to parse '".concat(expression, "'"));
     }
     DScalarExpression.prototype.toParensesis = function (nodes, ifrom) {
         var ito = nodes.length;
@@ -11487,7 +11487,7 @@ var DScalarExpression = /** @class */ (function () {
                         continue;
                     }
                 }
-                throw new Error("Malformed operands for the operator " + node);
+                throw new Error("Malformed operands for the operator ".concat(node));
             }
             else {
                 this.toArithmeticNode(node, operatorA, operatorB);
@@ -11508,7 +11508,7 @@ var DScalarExpression = /** @class */ (function () {
                 else {
                     var parsedToken = parseFloat(token);
                     if (parsedToken !== parsedToken) {
-                        throw new Error("Unexpected token '" + token + "' at " + matched.index + " in '" + expression + "'");
+                        throw new Error("Unexpected token '".concat(token, "' at ").concat(matched.index, " in '").concat(expression, "'"));
                     }
                     var tokenTypeLiteral = this.toTokenLiteral(token);
                     if (tokenTypeLiteral != null) {
@@ -12143,8 +12143,9 @@ var toShortcuts = function (options) {
 var DBase = /** @class */ (function (_super) {
     __extends(DBase, _super);
     function DBase(options) {
+        var _this = this;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         // Transform
         var transform = _this.transform;
         _this._position = new DBasePoint(transform.position, function (newX, newY, oldX, oldY) {
@@ -13591,8 +13592,9 @@ var DAnimationTimings = /** @class */ (function () {
 var DAnimationBase = /** @class */ (function (_super) {
     __extends(DAnimationBase, _super);
     function DAnimationBase(options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this._id = null;
         _this._target = (_a = options === null || options === void 0 ? void 0 : options.target) !== null && _a !== void 0 ? _a : null;
         _this._startTime = 0;
@@ -14787,7 +14789,7 @@ var EShapeActionValueEmitEvent = /** @class */ (function (_super) {
     EShapeActionValueEmitEvent.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
         var nameId = manager.addResource(this.name);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + nameId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(nameId, "]"));
     };
     EShapeActionValueEmitEvent.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -15553,8 +15555,9 @@ var EShapeActionRuntimeMiscHtmlElement = /** @class */ (function (_super) {
 var UtilInput = /** @class */ (function (_super) {
     __extends(UtilInput, _super);
     function UtilInput(target, operation, theme, options) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        var _this = _super.call(this, target, operation, theme, options) || this;
+        var _this = this;
+        var _a, _b, _c, _d, _e, _f;
+        _this = _super.call(this, target, operation, theme, options) || this;
         _this._operation = operation;
         _this._onInputKeyDownBound = function (e) {
             _this.onInputKeyDown(e);
@@ -15568,9 +15571,9 @@ var UtilInput = /** @class */ (function (_super) {
         _this._description = (_a = options === null || options === void 0 ? void 0 : options.description) !== null && _a !== void 0 ? _a : "";
         var editing = options === null || options === void 0 ? void 0 : options.editing;
         _this._editingFormatter =
-            (_e = (_b = editing === null || editing === void 0 ? void 0 : editing.formatter) !== null && _b !== void 0 ? _b : (_d = (_c = options) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d.formatter) !== null && _e !== void 0 ? _e : theme.getEditingFormatter();
-        _this._editingUnformatter = (_f = editing === null || editing === void 0 ? void 0 : editing.unformatter) !== null && _f !== void 0 ? _f : theme.getEditingUnformatter();
-        _this._editingValidator = (_g = editing === null || editing === void 0 ? void 0 : editing.validator) !== null && _g !== void 0 ? _g : theme.getEditingValidator();
+            (_d = (_b = editing === null || editing === void 0 ? void 0 : editing.formatter) !== null && _b !== void 0 ? _b : (_c = options === null || options === void 0 ? void 0 : options.text) === null || _c === void 0 ? void 0 : _c.formatter) !== null && _d !== void 0 ? _d : theme.getEditingFormatter();
+        _this._editingUnformatter = (_e = editing === null || editing === void 0 ? void 0 : editing.unformatter) !== null && _e !== void 0 ? _e : theme.getEditingUnformatter();
+        _this._editingValidator = (_f = editing === null || editing === void 0 ? void 0 : editing.validator) !== null && _f !== void 0 ? _f : theme.getEditingValidator();
         return _this;
     }
     UtilInput.prototype.onEnd = function () {
@@ -15687,8 +15690,9 @@ var UtilInputInput = /** @class */ (function (_super) {
 var UtilInputNumber = /** @class */ (function (_super) {
     __extends(UtilInputNumber, _super);
     function UtilInputNumber(target, operation, theme, options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this, target, operation, theme, options) || this;
+        _this = _super.call(this, target, operation, theme, options) || this;
         _this._step = (_a = options === null || options === void 0 ? void 0 : options.step) !== null && _a !== void 0 ? _a : theme.getStep();
         _this._min = (_b = options === null || options === void 0 ? void 0 : options.min) !== null && _b !== void 0 ? _b : theme.getMin();
         _this._max = (_c = options === null || options === void 0 ? void 0 : options.max) !== null && _c !== void 0 ? _c : theme.getMax();
@@ -15781,7 +15785,7 @@ var UtilInputNumber = /** @class */ (function (_super) {
     UtilInputNumber.prototype.updateStep = function (input) {
         var step = this.step;
         if (step != null) {
-            input.step = "" + step;
+            input.step = "".concat(step);
         }
         else {
             input.step = "any";
@@ -15790,7 +15794,7 @@ var UtilInputNumber = /** @class */ (function (_super) {
     UtilInputNumber.prototype.updateMin = function (input) {
         var min = this.min;
         if (min != null) {
-            input.min = "" + min;
+            input.min = "".concat(min);
         }
         else {
             input.removeAttribute("min");
@@ -15799,7 +15803,7 @@ var UtilInputNumber = /** @class */ (function (_super) {
     UtilInputNumber.prototype.updateMax = function (input) {
         var max = this.max;
         if (max != null) {
-            input.max = "" + max;
+            input.max = "".concat(max);
         }
         else {
             input.removeAttribute("max");
@@ -16119,7 +16123,7 @@ var EShapeActionValueMisc = /** @class */ (function (_super) {
         var conditionId = manager.addResource(this.condition);
         var targetId = manager.addResource(this.target);
         var valueId = manager.addResource(this.value);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + targetId + "," + this.onInputAction + "," + valueId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(targetId, ",").concat(this.onInputAction, ",").concat(valueId, "]"));
     };
     EShapeActionValueMisc.deserialize = function (serialized, manager) {
         var resources = manager.resources;
@@ -16240,7 +16244,7 @@ var EShapeActionValueMiscGesture = /** @class */ (function (_super) {
     };
     EShapeActionValueMiscGesture.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + this.gestureType + "," + this.scaleMin + "," + this.scaleMax + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(this.gestureType, ",").concat(this.scaleMin, ",").concat(this.scaleMax, "]"));
     };
     EShapeActionValueMiscGesture.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -16667,7 +16671,7 @@ var DynamicSDFFontGenerator = /** @class */ (function () {
             gl.compileShader(shader);
             if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                 console &&
-                    console.error("Failed to compile the shader: " + gl.getShaderInfoLog(shader));
+                    console.error("Failed to compile the shader: ".concat(gl.getShaderInfoLog(shader)));
                 return null;
             }
         }
@@ -16687,7 +16691,7 @@ var DynamicSDFFontGenerator = /** @class */ (function () {
                         gl.linkProgram(shaderProgram);
                         if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                             console &&
-                                console.error("Failed to link the program: " + gl.getError());
+                                console.error("Failed to link the program: ".concat(gl.getError()));
                             gl.deleteShader(vertexShader);
                             gl.deleteShader(fragmentShader);
                             return null;
@@ -16891,7 +16895,7 @@ var DynamicSDFFontGenerator = /** @class */ (function () {
  */
 var DynamicSDFFontAtlas = /** @class */ (function () {
     function DynamicSDFFontAtlas(fontFamily) {
-        this._id = "font-atlas:" + fontFamily;
+        this._id = "font-atlas:".concat(fontFamily);
         this._generator = DynamicSDFFontGenerator.getInstance().init();
         this._canvas = document.createElement("canvas");
         this._font = {
@@ -18201,7 +18205,7 @@ var EShapeActionValueMiscLayerGesture = /** @class */ (function (_super) {
     };
     EShapeActionValueMiscLayerGesture.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + this.gestureType + "," + this.scaleMin + "," + this.scaleMax + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(this.gestureType, ",").concat(this.scaleMin, ",").concat(this.scaleMax, "]"));
     };
     EShapeActionValueMiscLayerGesture.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -18290,7 +18294,7 @@ var EShapeActionValueMiscLayerShowHide = /** @class */ (function (_super) {
         var conditionId = manager.addResource(this.condition);
         var layersId = this.serializeLayers(manager);
         var bringToFrontId = this.bringToFront ? 1 : 0;
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + layersId + "," + bringToFrontId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(layersId, ",").concat(bringToFrontId, "]"));
     };
     EShapeActionValueMiscLayerShowHide.prototype.serializeLayers = function (manager) {
         var layers = this.layers;
@@ -18972,9 +18976,14 @@ var DImagePieceLayouterPartContainer = /** @class */ (function () {
         var middle = this.middle;
         var bottom = this.bottom;
         var text = this.text;
-        if (text) {
+        if (text !== undefined) {
             var textX = 0;
-            var textWidth = text.width;
+            var textWidth = 0;
+            var textHeight = 0;
+            if (text != null) {
+                textWidth = text.width;
+                textHeight = text.height;
+            }
             switch (textAlign.horizontal) {
                 case DAlignHorizontal.LEFT:
                     textX = pleft + left.size;
@@ -18990,7 +18999,6 @@ var DImagePieceLayouterPartContainer = /** @class */ (function () {
                     break;
             }
             var textY = 0;
-            var textHeight = text.height;
             switch (textAlign.vertical) {
                 case DAlignVertical.TOP:
                     textY = ptop + top.size;
@@ -19005,8 +19013,10 @@ var DImagePieceLayouterPartContainer = /** @class */ (function () {
                     textY = height - pbottom - bottom.size - textHeight;
                     break;
             }
-            text.position.set(textX, textY);
-            text.setClippingDelta(left.size + right.size, top.size + bottom.size);
+            if (text != null) {
+                text.position.set(textX, textY);
+                text.setClippingDelta(left.size + right.size, top.size + bottom.size);
+            }
             left.execute(textX - left.size, true);
             center.execute(0, 0, textX * 2 + textWidth);
             right.execute(0, textX + textWidth + right.size, true);
@@ -19908,7 +19918,7 @@ var DDynamicTextStyle = /** @class */ (function () {
         }
     };
     DDynamicTextStyle.prototype.newFontId = function () {
-        return this._fontStyle + " " + this._fontVariant + " " + this._fontWeight + " " + this._fontSize + "px " + this._fontFamily;
+        return "".concat(this._fontStyle, " ").concat(this._fontVariant, " ").concat(this._fontWeight, " ").concat(this._fontSize, "px ").concat(this._fontFamily);
     };
     Object.defineProperty(DDynamicTextStyle.prototype, "clipping", {
         get: function () {
@@ -20533,6 +20543,9 @@ var DImageBase = /** @class */ (function (_super) {
             this.updateTextColor(text);
             layouter.set(text);
         }
+        else {
+            layouter.set(null);
+        }
         var auto = this._auto;
         layouter.execute(this._padding, this._textAlign, auto.width.isOn ? null : this.width, auto.height.isOn ? null : this.height);
         layouter.clear();
@@ -20761,8 +20774,9 @@ var DButtonPrimary = /** @class */ (function (_super) {
 var DAnimationFadeIn = /** @class */ (function (_super) {
     __extends(DAnimationFadeIn, _super);
     function DAnimationFadeIn(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._storedX = 0;
         _this._storedY = 0;
         _this._storedAlpha = 0;
@@ -21125,7 +21139,7 @@ var DDialog = /** @class */ (function (_super) {
         this._onPrerenderBound = function () {
             _this.onPrerender();
         };
-        // Modeless
+        // Mode
         var theme = this.theme;
         var mode = toEnum((_a = options === null || options === void 0 ? void 0 : options.mode) !== null && _a !== void 0 ? _a : theme.getMode(), DDialogMode);
         this._mode = mode;
@@ -24927,7 +24941,7 @@ var EShapeActionValueOpen = /** @class */ (function (_super) {
         var conditionId = manager.addResource(this.condition);
         var targetId = manager.addResource(this.target);
         var initialId = manager.addResource(this.initial);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + targetId + "," + this.onInputAction + "," + initialId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(targetId, ",").concat(this.onInputAction, ",").concat(initialId, "]"));
     };
     EShapeActionValueOpen.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -24981,7 +24995,7 @@ var EShapeActionValueShowHide = /** @class */ (function (_super) {
     };
     EShapeActionValueShowHide.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, "]"));
     };
     EShapeActionValueShowHide.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -25217,7 +25231,7 @@ var EShapeActionValueTransformMove = /** @class */ (function (_super) {
     EShapeActionValueTransformMove.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
         var amountId = manager.addResource(this.amount);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + this.opetype + "," + amountId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(this.opetype, ",").concat(amountId, "]"));
     };
     EShapeActionValueTransformMove.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -25502,7 +25516,7 @@ var EShapeActionValueTransformResize = /** @class */ (function (_super) {
     EShapeActionValueTransformResize.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
         var amountId = manager.addResource(this.amount);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + this.opetype + "," + this.originX + "," + this.originY + "," + amountId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(this.opetype, ",").concat(this.originX, ",").concat(this.originY, ",").concat(amountId, "]"));
     };
     EShapeActionValueTransformResize.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -25522,7 +25536,7 @@ var EShapeActionRuntimeTransformRotate = /** @class */ (function (_super) {
         var _this = _super.call(this, value, reset) || this;
         _this.originX = value.originX;
         _this.originY = value.originY;
-        _this.amount = EShapeActionExpressions.ofNumber("(" + value.amount + ") * (Math.PI / 180)");
+        _this.amount = EShapeActionExpressions.ofNumber("(".concat(value.amount, ") * (Math.PI / 180)"));
         return _this;
     }
     EShapeActionRuntimeTransformRotate.prototype.adjustPosition = function (shape, runtime, oldRotation, newRotation, originX, originY) {
@@ -25633,7 +25647,7 @@ var EShapeActionValueTransformRotate = /** @class */ (function (_super) {
     EShapeActionValueTransformRotate.prototype.serialize = function (manager) {
         var conditionId = manager.addResource(this.condition);
         var amountId = manager.addResource(this.amount);
-        return manager.addResource("[" + this.type + "," + conditionId + "," + this.subtype + "," + this.opetype + "," + this.originX + "," + this.originY + "," + amountId + "]");
+        return manager.addResource("[".concat(this.type, ",").concat(conditionId, ",").concat(this.subtype, ",").concat(this.opetype, ",").concat(this.originX, ",").concat(this.originY, ",").concat(amountId, "]"));
     };
     EShapeActionValueTransformRotate.deserialize = function (serialized, manager) {
         var condition = EShapeActionValues.toResource(1, serialized, manager.resources);
@@ -27349,7 +27363,7 @@ var EShapeButton = /** @class */ (function (_super) {
         var result = _super.prototype.serialize.call(this, manager);
         var isToggle = this._isToggle ? 1 : 0;
         var isGrouped = this._isGrouped ? 2 : 0;
-        result[15] = manager.addResource("[" + (isToggle | isGrouped) + "]");
+        result[15] = manager.addResource("[".concat(isToggle | isGrouped, "]"));
         return result;
     };
     return EShapeButton;
@@ -29642,7 +29656,7 @@ var EShapePointsMarkerBase = /** @class */ (function () {
     EShapePointsMarkerBase.prototype.serialize = function (manager) {
         var size = this._size;
         var fillId = this._fill.serialize(manager);
-        return manager.addResource("[" + this._type + "," + size.x + "," + size.y + "," + fillId + "]");
+        return manager.addResource("[".concat(this._type, ",").concat(size.x, ",").concat(size.y, ",").concat(fillId, "]"));
     };
     EShapePointsMarkerBase.prototype.deserialize = function (resourceId, manager) {
         var resources = manager.resources;
@@ -29791,7 +29805,7 @@ var EShapePointsMarkerContainerImpl = /** @class */ (function () {
     EShapePointsMarkerContainerImpl.prototype.serialize = function (manager) {
         var headId = this._head.serialize(manager);
         var tailId = this._tail.serialize(manager);
-        return manager.addResource("[" + headId + "," + tailId + "]");
+        return manager.addResource("[".concat(headId, ",").concat(tailId, "]"));
     };
     EShapePointsMarkerContainerImpl.prototype.deserialize = function (resourceId, manager) {
         var resources = manager.resources;
@@ -30253,7 +30267,7 @@ var EShapeLinePoints = /** @class */ (function () {
         if (marker) {
             markerId = marker.serialize(manager);
         }
-        return manager.addResource("[" + values + "," + segments + "," + style + "," + markerId + "]");
+        return manager.addResource("[".concat(values, ",").concat(segments, ",").concat(style, ",").concat(markerId, "]"));
     };
     EShapeLinePoints.prototype.deserialize = function (resourceId, manager) {
         var resources = manager.resources;
@@ -31260,7 +31274,7 @@ var EShapeConnectorEdgeImpl = /** @class */ (function () {
         var edge = acceptor.edge;
         var edgeId = edge != null ? manager.addResource(edge) : -1;
         var local = this._local;
-        return manager.addResource("[" + shapeUuid + "," + edgeId + "," + local.x + "," + local.y + "," + this._margin + "]");
+        return manager.addResource("[".concat(shapeUuid, ",").concat(edgeId, ",").concat(local.x, ",").concat(local.y, ",").concat(this._margin, "]"));
     };
     EShapeConnectorEdgeImpl.prototype.deserialize = function (resourceId, mapping, manager) {
         var resources = manager.resources;
@@ -31430,7 +31444,7 @@ var EShapeConnectorEdgeContainerImpl = /** @class */ (function () {
     EShapeConnectorEdgeContainerImpl.prototype.serialize = function (manager) {
         var tailId = this._tail.serialize(manager);
         var headId = this._head.serialize(manager);
-        return manager.addResource("[" + tailId + "," + headId + "]");
+        return manager.addResource("[".concat(tailId, ",").concat(headId, "]"));
     };
     EShapeConnectorEdgeContainerImpl.prototype.deserialize = function (resourceId, mapping, manager) {
         var resources = manager.resources;
@@ -31763,7 +31777,7 @@ var EShapeConnectorLine = /** @class */ (function (_super) {
         var edgeId = this._edge.serialize(manager);
         var bodyId = this._body.serialize(manager);
         var pointsId = this._points.serialize(manager);
-        result[15] = manager.addResource("[" + edgeId + "," + pointsId + "," + bodyId + "]");
+        result[15] = manager.addResource("[".concat(edgeId, ",").concat(pointsId, ",").concat(bodyId, "]"));
         return result;
     };
     return EShapeConnectorLine;
@@ -38713,7 +38727,7 @@ var EShapeRectanglePivoted = /** @class */ (function (_super) {
  * SPDX-License-Identifier: Apache-2.0
  */
 var toSvgUrl = function (svg) {
-    return "data:image/svg+xml;base64," + btoa(svg);
+    return "data:image/svg+xml;base64,".concat(btoa(svg));
 };
 
 /*
@@ -38729,7 +38743,7 @@ var toGradientImageUrl = function (gradient) {
         var color = UtilRgb.toCode(point.color);
         var alpha = point.alpha;
         var offset = point.position * 100;
-        stops += "<stop offset=\"" + offset + "%\" stop-color=\"#" + color + "\" stop-opacity=\"" + alpha + "\" />";
+        stops += "<stop offset=\"".concat(offset, "%\" stop-color=\"#").concat(color, "\" stop-opacity=\"").concat(alpha, "\" />");
     }
     var radian = (direction * Math.PI) / 180;
     var dx = 0.5 * Math.cos(radian);
@@ -38738,7 +38752,7 @@ var toGradientImageUrl = function (gradient) {
     /* eslint-disable prettier/prettier */
     "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\">" +
         "<defs>" +
-        ("<linearGradient id=\"o2glkm3aeu2oio\" x1=\"" + (0.5 - dx) + "\" x2=\"" + (0.5 + dx) + "\" y1=\"" + (0.5 - dy) + "\" y2=\"" + (0.5 + dy) + "\">") +
+        "<linearGradient id=\"o2glkm3aeu2oio\" x1=\"".concat(0.5 - dx, "\" x2=\"").concat(0.5 + dx, "\" y1=\"").concat(0.5 - dy, "\" y2=\"").concat(0.5 + dy, "\">") +
         stops +
         "</linearGradient>" +
         "</defs>" +
@@ -38905,8 +38919,9 @@ var DImage = /** @class */ (function (_super) {
 var DMenuItemBase = /** @class */ (function (_super) {
     __extends(DMenuItemBase, _super);
     function DMenuItemBase(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._value = (_a = options === null || options === void 0 ? void 0 : options.value) !== null && _a !== void 0 ? _a : null;
         return _this;
     }
@@ -39186,7 +39201,7 @@ var DMenus = /** @class */ (function () {
                     parent.addChild(created);
                 }
                 else {
-                    throw new Error("No matching menu item creator found: " + JSON.stringify(item));
+                    throw new Error("No matching menu item creator found: ".concat(JSON.stringify(item)));
                 }
             }
         }
@@ -41847,7 +41862,7 @@ var UtilSvgAtlasBuilder = /** @class */ (function () {
             frames[name] = new pixi_js.Rectangle(x, y, width, height);
             // Svg
             var ratio = this._ratio;
-            this._svg += "<g transform=\"translate(" + x * ratio + "," + y * ratio + ")\">" + path + "</g>";
+            this._svg += "<g transform=\"translate(".concat(x * ratio, ",").concat(y * ratio, ")\">").concat(path, "</g>");
             return true;
         }
         return false;
@@ -41872,11 +41887,11 @@ var UtilSvgAtlasBuilder = /** @class */ (function () {
             var realWidth = width * resolution;
             var realHeight = height * resolution;
             var ratio = this._ratio;
-            var attrWidth = "width=\"" + realWidth + "\"";
-            var attrHeight = "height=\"" + realHeight + "\"";
-            var attrViewBox = "viewBox=\"0 0 " + width * ratio + " " + height * ratio + "\"";
+            var attrWidth = "width=\"".concat(realWidth, "\"");
+            var attrHeight = "height=\"".concat(realHeight, "\"");
+            var attrViewBox = "viewBox=\"0 0 ".concat(width * ratio, " ").concat(height * ratio, "\"");
             var attrXmlns = "xmlns=\"http://www.w3.org/2000/svg\"";
-            var url = toSvgUrl("<svg " + attrWidth + " " + attrHeight + " " + attrViewBox + " " + attrXmlns + ">" + this._svg + "</svg>");
+            var url = toSvgUrl("<svg ".concat(attrWidth, " ").concat(attrHeight, " ").concat(attrViewBox, " ").concat(attrXmlns, ">").concat(this._svg, "</svg>"));
             var scaleMode = (_c = options === null || options === void 0 ? void 0 : options.scaling) !== null && _c !== void 0 ? _c : pixi_js.SCALE_MODES.NEAREST;
             var baseTexture = pixi_js.BaseTexture.from(url, {
                 resolution: resolution,
@@ -41919,7 +41934,7 @@ var DThemeWhite = /** @class */ (function () {
                 return instance;
             }
             else {
-                throw new Error("No theme for the type '" + type + "'");
+                throw new Error("No theme for the type '".concat(type, "'"));
             }
         }
     };
@@ -42047,12 +42062,12 @@ var newShadow$1 = function (id, radius, opacity) {
     /* eslint-disable prettier/prettier */
     DThemeWhiteAtlas.add(id, d, d, "<g>" +
         "<defs>" +
-        ("<radialGradient id=\"" + id + "_filter\">") +
-        ("<stop offset=\"0%\" stop-color=\"black\" stop-opacity=\"" + opacity + "\" />") +
+        "<radialGradient id=\"".concat(id, "_filter\">") +
+        "<stop offset=\"0%\" stop-color=\"black\" stop-opacity=\"".concat(opacity, "\" />") +
         "<stop offset=\"100%\" stop-color=\"black\" stop-opacity=\"0\" />" +
         "</radialGradient>" +
         "</defs>" +
-        ("<rect x=\"0\" y=\"0\" width=\"" + d + "\" height=\"" + d + "\" fill=\"url(#" + id + "_filter)\"/>") +
+        "<rect x=\"0\" y=\"0\" width=\"".concat(d, "\" height=\"").concat(d, "\" fill=\"url(#").concat(id, "_filter)\"/>") +
         "</g>");
     /* eslint-enable prettier/prettier */
 };
@@ -42664,7 +42679,7 @@ DThemeWhiteAtlas.add("button_color_sample", 21, 21, "<g transform=\"scale(0.875,
     "</g>");
 /* eslint-enable prettier/prettier */
 var formatter$l = function (colorAndAlpha) {
-    return "#" + UtilRgb.toCode(colorAndAlpha.color) + " A" + colorAndAlpha.alpha.toFixed(2);
+    return "#".concat(UtilRgb.toCode(colorAndAlpha.color), " A").concat(colorAndAlpha.alpha.toFixed(2));
 };
 var DThemeWhiteButtonColor = /** @class */ (function (_super) {
     __extends(DThemeWhiteButtonColor, _super);
@@ -42713,11 +42728,24 @@ var DThemeWhiteDialog = /** @class */ (function (_super) {
     DThemeWhiteDialog.prototype.getOffsetY = function () {
         return 5;
     };
-    DThemeWhiteDialog.prototype.getBackgroundColor = function () {
-        return DThemeWhiteConstants.BACKGROUND_COLOR;
+    DThemeWhiteDialog.prototype.getBackgroundColor = function (state) {
+        if (state.is(DDialogState.MENU)) {
+            return DThemeWhiteConstants.BACKGROUND_COLOR_ON_BOARD;
+        }
+        else {
+            return DThemeWhiteConstants.BACKGROUND_COLOR;
+        }
     };
     DThemeWhiteDialog.prototype.getBorderColor = function (state) {
-        return 0xfafafa;
+        if (state.is(DDialogState.MENU)) {
+            return null;
+        }
+        else {
+            return 0xfafafa;
+        }
+    };
+    DThemeWhiteDialog.prototype.getOutlineColor = function (state) {
+        return null;
     };
     DThemeWhiteDialog.prototype.getPaddingLeft = function () {
         return 16;
@@ -42820,7 +42848,7 @@ var makeCheckerboard$1 = function (width, height) {
     for (var ih = 0; ih < height; ++ih) {
         for (var iw = 0; iw < width; ++iw) {
             var color = (iw + ih) % 2 === 0 ? LIGHT : DARK;
-            result += "<rect x=\"" + 9 * iw + "\" y=\"" + 9 * ih + "\" width=\"9\" height=\"9\" fill=\"" + color + "\" />";
+            result += "<rect x=\"".concat(9 * iw, "\" y=\"").concat(9 * ih, "\" width=\"9\" height=\"9\" fill=\"").concat(color, "\" />");
         }
     }
     result += "</g>";
@@ -43557,7 +43585,7 @@ var DPickerDates = /** @class */ (function () {
         var y = toPadded(String(date.getFullYear()), 4, "0");
         var M = toPadded(String(date.getMonth() + 1), 2, "0");
         var S = toPadded(String(date.getDate()), 2, "0");
-        return y + "/" + M + "/" + S;
+        return "".concat(y, "/").concat(M, "/").concat(S);
     };
     return DPickerDates;
 }());
@@ -43688,7 +43716,7 @@ var MONTH_LABELS$1 = [
 ];
 var DAY_LABELS$1 = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 var defaultLabelFormatter$1 = function (date) {
-    return MONTH_LABELS$1[date.getMonth()] + " " + date.getFullYear();
+    return "".concat(MONTH_LABELS$1[date.getMonth()], " ").concat(date.getFullYear());
 };
 var defaultDateDecorator$1 = function () {
     /* DO NOTHING*/
@@ -44043,10 +44071,10 @@ var DPickerDatetimes = /** @class */ (function () {
     DPickerDatetimes.format = function (date, mask) {
         var hms = DPickerTimes.format(date, mask);
         if (0 < hms.length) {
-            return DPickerDates.format(date) + " " + hms;
+            return "".concat(DPickerDates.format(date), " ").concat(hms);
         }
         else {
-            return "" + DPickerDates.format(date);
+            return "".concat(DPickerDates.format(date));
         }
     };
     DPickerDatetimes.toMask = function (options) {
@@ -45724,20 +45752,20 @@ var EThemeWhiteShapeActionValue = /** @class */ (function () {
         return this.toTypedLabel(type, value);
     };
     EThemeWhiteShapeActionValue.prototype.toTypedLabel = function (type, value) {
-        return this.toTypeLabel(type) + ": " + this.toConditionLabel(value.condition);
+        return "".concat(this.toTypeLabel(type), ": ").concat(this.toConditionLabel(value.condition));
     };
     EThemeWhiteShapeActionValue.prototype.toSubtypedLabel = function (type, subtype, value) {
         var typeLabel = this.toTypeLabel(type);
         switch (type) {
             case EShapeActionValueType.SHOW_HIDE:
-                return "" + this.toShowHideTypeLabel(subtype);
+                return "".concat(this.toShowHideTypeLabel(subtype));
             case EShapeActionValueType.BLINK:
-                return typeLabel + ": " + this.toBlinkTypeLabel(subtype);
+                return "".concat(typeLabel, ": ").concat(this.toBlinkTypeLabel(subtype));
             case EShapeActionValueType.CHANGE_COLOR:
             case EShapeActionValueType.CHANGE_COLOR_LEGACY:
-                return typeLabel + ": " + this.toChangeColorTypeLabel(subtype);
+                return "".concat(typeLabel, ": ").concat(this.toChangeColorTypeLabel(subtype));
             case EShapeActionValueType.MISC:
-                return typeLabel + ": " + this.toMiscTypeLabel(subtype);
+                return "".concat(typeLabel, ": ").concat(this.toMiscTypeLabel(subtype));
         }
         return null;
     };
@@ -45747,11 +45775,11 @@ var EThemeWhiteShapeActionValue = /** @class */ (function () {
                 var subtypeLabel = this.toTransformTypeLabel(subtype);
                 switch (subtype) {
                     case EShapeActionValueTransformType.ROTATE:
-                        return subtypeLabel + ": " + this.toTransformRotateTypeLabel(opetype);
+                        return "".concat(subtypeLabel, ": ").concat(this.toTransformRotateTypeLabel(opetype));
                     case EShapeActionValueTransformType.MOVE:
-                        return subtypeLabel + ": " + this.toTransformMoveTypeLabel(opetype);
+                        return "".concat(subtypeLabel, ": ").concat(this.toTransformMoveTypeLabel(opetype));
                     case EShapeActionValueTransformType.RESIZE:
-                        return subtypeLabel + ": " + this.toTransformResizeTypeLabel(opetype);
+                        return "".concat(subtypeLabel, ": ").concat(this.toTransformResizeTypeLabel(opetype));
                 }
         }
         return null;
@@ -46602,11 +46630,11 @@ var DThemeWhiteHtmlElement = /** @class */ (function (_super) {
     DThemeWhiteHtmlElement.prototype.getElementStylePadding = function (state, padding) {
         if (padding) {
             if ("getLeft" in padding) {
-                return ("padding: " + padding.getTop() + "px " + padding.getRight() + "px " +
-                    (padding.getBottom() + "px " + padding.getLeft() + "px;"));
+                return ("padding: ".concat(padding.getTop(), "px ").concat(padding.getRight(), "px ") +
+                    "".concat(padding.getBottom(), "px ").concat(padding.getLeft(), "px;"));
             }
             else {
-                return "padding: " + padding.vertical + "px " + padding.horizontal + "px;";
+                return "padding: ".concat(padding.vertical, "px ").concat(padding.horizontal, "px;");
             }
         }
         return "padding: 0px;";
@@ -46619,21 +46647,21 @@ var DThemeWhiteHtmlElement = /** @class */ (function (_super) {
             if (clipperRect) {
                 var left = elementRect.x - clipperRect.x;
                 var top_1 = elementRect.y - clipperRect.y;
-                return "left:" + left + "px; top:" + top_1 + "px;";
+                return "left:".concat(left, "px; top:").concat(top_1, "px;");
             }
-            return "left:" + elementRect.x + "px; top: " + elementRect.y + "px;";
+            return "left:".concat(elementRect.x, "px; top: ").concat(elementRect.y, "px;");
         }
         return "left: 0px; top: 0px;";
     };
     DThemeWhiteHtmlElement.prototype.getElementStylePositionSize = function (rect) {
         if (rect) {
-            return "width: " + rect.width + "px; height: " + rect.height + "px;";
+            return "width: ".concat(rect.width, "px; height: ").concat(rect.height, "px;");
         }
         return "width: 0px; height: 0px;";
     };
     DThemeWhiteHtmlElement.prototype.getElementStylePositionTransform = function (matrix) {
         if (matrix) {
-            return "transform: matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.tx + "," + matrix.ty + ");";
+            return "transform: matrix(".concat(matrix.a, ",").concat(matrix.b, ",").concat(matrix.c, ",").concat(matrix.d, ",").concat(matrix.tx, ",").concat(matrix.ty, ");");
         }
         return "";
     };
@@ -46644,10 +46672,10 @@ var DThemeWhiteHtmlElement = /** @class */ (function (_super) {
             this.getElementStylePositionTransform(elementMatrix));
     };
     DThemeWhiteHtmlElement.prototype.getElementStyleText = function (state) {
-        return ("font-family: " + this.getFontFamilly() + ";" +
-            ("font-size: " + this.getFontSize() + "px;") +
-            ("color: #" + this.getColor(state).toString(16) + ";") +
-            ("line-height: " + this.getLineHeight() + "px;") +
+        return ("font-family: ".concat(this.getFontFamilly(), ";") +
+            "font-size: ".concat(this.getFontSize(), "px;") +
+            "color: #".concat(this.getColor(state).toString(16), ";") +
+            "line-height: ".concat(this.getLineHeight(), "px;") +
             "-moz-tab-size: 4; -o-tab-size: 4; tab-size: 4;");
     };
     DThemeWhiteHtmlElement.prototype.getElementStyleMargin = function (state) {
@@ -46671,14 +46699,14 @@ var DThemeWhiteHtmlElement = /** @class */ (function (_super) {
     };
     DThemeWhiteHtmlElement.prototype.getClipperStylePositionPosition = function (rect) {
         if (rect) {
-            return "left: " + rect.x + "px; top: " + rect.y + "px;";
+            return "left: ".concat(rect.x, "px; top: ").concat(rect.y, "px;");
         }
         return "left: 0px; top: 0px;";
     };
     DThemeWhiteHtmlElement.prototype.getClipperStylePositionSize = function (rect) {
         if (rect) {
-            return ("width: " + rect.width + "px; height: " + rect.height + "px;" +
-                ("line-height: " + rect.height + "px;"));
+            return ("width: ".concat(rect.width, "px; height: ").concat(rect.height, "px;") +
+                "line-height: ".concat(rect.height, "px;"));
         }
         return "width: 0px; height: 0px;";
     };
@@ -46918,7 +46946,7 @@ var DThemeWhiteInput = /** @class */ (function (_super) {
  * SPDX-License-Identifier: Apache-2.0
  */
 var CREATOR_CLASSNAME$3 = "d-theme-white-input-input";
-var CREATOR_CLASSNAME_ELEMENT$3 = CREATOR_CLASSNAME$3 + "-element";
+var CREATOR_CLASSNAME_ELEMENT$3 = "".concat(CREATOR_CLASSNAME$3, "-element");
 var elementCreator$3 = function (container) {
     var found = container.getElementsByClassName(CREATOR_CLASSNAME_ELEMENT$3);
     if (0 < found.length) {
@@ -46940,15 +46968,15 @@ var divCreator$4 = function (container, classname) {
     container.appendChild(result);
     return result;
 };
-var CREATOR_CLASSNAME_CLIPPER$3 = CREATOR_CLASSNAME$3 + "-clipper";
+var CREATOR_CLASSNAME_CLIPPER$3 = "".concat(CREATOR_CLASSNAME$3, "-clipper");
 var clipperCreator$3 = function (container) {
     return divCreator$4(container, CREATOR_CLASSNAME_CLIPPER$3);
 };
-var CREATOR_CLASSNAME_BEFORE$3 = CREATOR_CLASSNAME$3 + "-before";
+var CREATOR_CLASSNAME_BEFORE$3 = "".concat(CREATOR_CLASSNAME$3, "-before");
 var beforeCreator$3 = function (container) {
     return divCreator$4(container, CREATOR_CLASSNAME_BEFORE$3);
 };
-var CREATOR_CLASSNAME_AFTER$3 = CREATOR_CLASSNAME$3 + "-after";
+var CREATOR_CLASSNAME_AFTER$3 = "".concat(CREATOR_CLASSNAME$3, "-after");
 var afterCreator$3 = function (container) {
     return divCreator$4(container, CREATOR_CLASSNAME_AFTER$3);
 };
@@ -47160,7 +47188,7 @@ var loadThemeWhiteInputText = function () {
  * SPDX-License-Identifier: Apache-2.0
  */
 var CREATOR_CLASSNAME$2 = "d-theme-white-input-text-area";
-var CREATOR_CLASSNAME_ELEMENT$2 = CREATOR_CLASSNAME$2 + "-element";
+var CREATOR_CLASSNAME_ELEMENT$2 = "".concat(CREATOR_CLASSNAME$2, "-element");
 var elementCreator$2 = function (container) {
     var found = container.getElementsByClassName(CREATOR_CLASSNAME_ELEMENT$2);
     if (0 < found.length) {
@@ -47182,15 +47210,15 @@ var divCreator$3 = function (container, classname) {
     container.appendChild(result);
     return result;
 };
-var CREATOR_CLASSNAME_CLIPPER$2 = CREATOR_CLASSNAME$2 + "-clipper";
+var CREATOR_CLASSNAME_CLIPPER$2 = "".concat(CREATOR_CLASSNAME$2, "-clipper");
 var clipperCreator$2 = function (container) {
     return divCreator$3(container, CREATOR_CLASSNAME_CLIPPER$2);
 };
-var CREATOR_CLASSNAME_BEFORE$2 = CREATOR_CLASSNAME$2 + "-before";
+var CREATOR_CLASSNAME_BEFORE$2 = "".concat(CREATOR_CLASSNAME$2, "-before");
 var beforeCreator$2 = function (container) {
     return divCreator$3(container, CREATOR_CLASSNAME_BEFORE$2);
 };
-var CREATOR_CLASSNAME_AFTER$2 = CREATOR_CLASSNAME$2 + "-after";
+var CREATOR_CLASSNAME_AFTER$2 = "".concat(CREATOR_CLASSNAME$2, "-after");
 var afterCreator$2 = function (container) {
     return divCreator$3(container, CREATOR_CLASSNAME_AFTER$2);
 };
@@ -47404,7 +47432,7 @@ var DThemeWhiteMenu = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DThemeWhiteMenu.prototype.getBackgroundColor = function (state) {
-        return 0xffffff;
+        return DThemeWhiteConstants.BACKGROUND_COLOR_ON_BOARD;
     };
     DThemeWhiteMenu.prototype.getOffsetX = function () {
         return 5;
@@ -50999,7 +51027,7 @@ var DThemeDark = /** @class */ (function () {
                 return instance;
             }
             else {
-                throw new Error("No theme for the type '" + type + "'");
+                throw new Error("No theme for the type '".concat(type, "'"));
             }
         }
     };
@@ -51094,12 +51122,12 @@ var newShadow = function (id, radius, opacity) {
     /* eslint-disable prettier/prettier */
     DThemeDarkAtlas.add(id, d, d, "<g>" +
         "<defs>" +
-        ("<radialGradient id=\"" + id + "_filter\">") +
-        ("<stop offset=\"0%\" stop-color=\"black\" stop-opacity=\"" + opacity + "\" />") +
+        "<radialGradient id=\"".concat(id, "_filter\">") +
+        "<stop offset=\"0%\" stop-color=\"black\" stop-opacity=\"".concat(opacity, "\" />") +
         "<stop offset=\"100%\" stop-color=\"black\" stop-opacity=\"0\" />" +
         "</radialGradient>" +
         "</defs>" +
-        ("<rect x=\"0\" y=\"0\" width=\"" + d + "\" height=\"" + d + "\" fill=\"url(#" + id + "_filter)\"/>") +
+        "<rect x=\"0\" y=\"0\" width=\"".concat(d, "\" height=\"").concat(d, "\" fill=\"url(#").concat(id, "_filter)\"/>") +
         "</g>");
     /* eslint-enable prettier/prettier */
 };
@@ -51693,7 +51721,7 @@ DThemeDarkAtlas.add("button_color_sample", 21, 21, "<g transform=\"scale(0.875,0
     "</g>");
 /* eslint-enable prettier/prettier */
 var formatter$a = function (colorAndAlpha) {
-    return "#" + UtilRgb.toCode(colorAndAlpha.color) + " A" + colorAndAlpha.alpha.toFixed(2);
+    return "#".concat(UtilRgb.toCode(colorAndAlpha.color), " A").concat(colorAndAlpha.alpha.toFixed(2));
 };
 var DThemeDarkButtonColor = /** @class */ (function (_super) {
     __extends(DThemeDarkButtonColor, _super);
@@ -51742,11 +51770,24 @@ var DThemeDarkDialog = /** @class */ (function (_super) {
     DThemeDarkDialog.prototype.getOffsetY = function () {
         return 5;
     };
-    DThemeDarkDialog.prototype.getBackgroundColor = function () {
-        return DThemeDarkConstants.BACKGROUND_COLOR;
+    DThemeDarkDialog.prototype.getBackgroundColor = function (state) {
+        if (state.is(DDialogState.MENU)) {
+            return DThemeDarkConstants.BACKGROUND_COLOR_ON_BOARD;
+        }
+        else {
+            return DThemeDarkConstants.BACKGROUND_COLOR;
+        }
     };
     DThemeDarkDialog.prototype.getBorderColor = function (state) {
-        return 0x393939;
+        if (state.is(DDialogState.MENU)) {
+            return null;
+        }
+        else {
+            return 0x393939;
+        }
+    };
+    DThemeDarkDialog.prototype.getOutlineColor = function (state) {
+        return null;
     };
     DThemeDarkDialog.prototype.getPaddingLeft = function () {
         return 16;
@@ -51849,7 +51890,7 @@ var makeCheckerboard = function (width, height) {
     for (var ih = 0; ih < height; ++ih) {
         for (var iw = 0; iw < width; ++iw) {
             var color = (iw + ih) % 2 === 0 ? LIGHT : DARK;
-            result += "<rect x=\"" + 9 * iw + "\" y=\"" + 9 * ih + "\" width=\"9\" height=\"9\" fill=\"" + color + "\" />";
+            result += "<rect x=\"".concat(9 * iw, "\" y=\"").concat(9 * ih, "\" width=\"9\" height=\"9\" fill=\"").concat(color, "\" />");
         }
     }
     result += "</g>";
@@ -52374,7 +52415,7 @@ var MONTH_LABELS = [
 ];
 var DAY_LABELS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
 var defaultLabelFormatter = function (date) {
-    return MONTH_LABELS[date.getMonth()] + " " + date.getFullYear();
+    return "".concat(MONTH_LABELS[date.getMonth()], " ").concat(date.getFullYear());
 };
 var defaultDateDecorator = function () {
     /* DO NOTHING*/
@@ -54332,20 +54373,20 @@ var EThemeDarkShapeActionValue = /** @class */ (function () {
         return this.toTypedLabel(type, value);
     };
     EThemeDarkShapeActionValue.prototype.toTypedLabel = function (type, value) {
-        return this.toTypeLabel(type) + ": " + this.toConditionLabel(value.condition);
+        return "".concat(this.toTypeLabel(type), ": ").concat(this.toConditionLabel(value.condition));
     };
     EThemeDarkShapeActionValue.prototype.toSubtypedLabel = function (type, subtype, value) {
         var typeLabel = this.toTypeLabel(type);
         switch (type) {
             case EShapeActionValueType.SHOW_HIDE:
-                return "" + this.toShowHideTypeLabel(subtype);
+                return "".concat(this.toShowHideTypeLabel(subtype));
             case EShapeActionValueType.BLINK:
-                return typeLabel + ": " + this.toBlinkTypeLabel(subtype);
+                return "".concat(typeLabel, ": ").concat(this.toBlinkTypeLabel(subtype));
             case EShapeActionValueType.CHANGE_COLOR:
             case EShapeActionValueType.CHANGE_COLOR_LEGACY:
-                return typeLabel + ": " + this.toChangeColorTypeLabel(subtype);
+                return "".concat(typeLabel, ": ").concat(this.toChangeColorTypeLabel(subtype));
             case EShapeActionValueType.MISC:
-                return typeLabel + ": " + this.toMiscTypeLabel(subtype);
+                return "".concat(typeLabel, ": ").concat(this.toMiscTypeLabel(subtype));
         }
         return null;
     };
@@ -54355,11 +54396,11 @@ var EThemeDarkShapeActionValue = /** @class */ (function () {
                 var subtypeLabel = this.toTransformTypeLabel(subtype);
                 switch (subtype) {
                     case EShapeActionValueTransformType.ROTATE:
-                        return subtypeLabel + ": " + this.toTransformRotateTypeLabel(opetype);
+                        return "".concat(subtypeLabel, ": ").concat(this.toTransformRotateTypeLabel(opetype));
                     case EShapeActionValueTransformType.MOVE:
-                        return subtypeLabel + ": " + this.toTransformMoveTypeLabel(opetype);
+                        return "".concat(subtypeLabel, ": ").concat(this.toTransformMoveTypeLabel(opetype));
                     case EShapeActionValueTransformType.RESIZE:
-                        return subtypeLabel + ": " + this.toTransformResizeTypeLabel(opetype);
+                        return "".concat(subtypeLabel, ": ").concat(this.toTransformResizeTypeLabel(opetype));
                 }
         }
         return null;
@@ -55210,11 +55251,11 @@ var DThemeDarkHtmlElement = /** @class */ (function (_super) {
     DThemeDarkHtmlElement.prototype.getElementStylePadding = function (state, padding) {
         if (padding) {
             if ("getLeft" in padding) {
-                return ("padding: " + padding.getTop() + "px " + padding.getRight() + "px " +
-                    (padding.getBottom() + "px " + padding.getLeft() + "px;"));
+                return ("padding: ".concat(padding.getTop(), "px ").concat(padding.getRight(), "px ") +
+                    "".concat(padding.getBottom(), "px ").concat(padding.getLeft(), "px;"));
             }
             else {
-                return "padding: " + padding.vertical + "px " + padding.horizontal + "px;";
+                return "padding: ".concat(padding.vertical, "px ").concat(padding.horizontal, "px;");
             }
         }
         return "padding: 0px;";
@@ -55227,21 +55268,21 @@ var DThemeDarkHtmlElement = /** @class */ (function (_super) {
             if (clipperRect) {
                 var left = elementRect.x - clipperRect.x;
                 var top_1 = elementRect.y - clipperRect.y;
-                return "left:" + left + "px; top:" + top_1 + "px;";
+                return "left:".concat(left, "px; top:").concat(top_1, "px;");
             }
-            return "left:" + elementRect.x + "px; top: " + elementRect.y + "px;";
+            return "left:".concat(elementRect.x, "px; top: ").concat(elementRect.y, "px;");
         }
         return "left: 0px; top: 0px;";
     };
     DThemeDarkHtmlElement.prototype.getElementStylePositionSize = function (rect) {
         if (rect) {
-            return "width: " + rect.width + "px; height: " + rect.height + "px;";
+            return "width: ".concat(rect.width, "px; height: ").concat(rect.height, "px;");
         }
         return "width: 0px; height: 0px;";
     };
     DThemeDarkHtmlElement.prototype.getElementStylePositionTransform = function (matrix) {
         if (matrix) {
-            return "transform: matrix(" + matrix.a + "," + matrix.b + "," + matrix.c + "," + matrix.d + "," + matrix.tx + "," + matrix.ty + ");";
+            return "transform: matrix(".concat(matrix.a, ",").concat(matrix.b, ",").concat(matrix.c, ",").concat(matrix.d, ",").concat(matrix.tx, ",").concat(matrix.ty, ");");
         }
         return "";
     };
@@ -55252,10 +55293,10 @@ var DThemeDarkHtmlElement = /** @class */ (function (_super) {
             this.getElementStylePositionTransform(elementMatrix));
     };
     DThemeDarkHtmlElement.prototype.getElementStyleText = function (state) {
-        return ("font-family: " + this.getFontFamilly() + ";" +
-            ("font-size: " + this.getFontSize() + "px;") +
-            ("color: #" + this.getColor(state).toString(16) + ";") +
-            ("line-height: " + this.getLineHeight() + "px;") +
+        return ("font-family: ".concat(this.getFontFamilly(), ";") +
+            "font-size: ".concat(this.getFontSize(), "px;") +
+            "color: #".concat(this.getColor(state).toString(16), ";") +
+            "line-height: ".concat(this.getLineHeight(), "px;") +
             "-moz-tab-size: 4; -o-tab-size: 4; tab-size: 4;");
     };
     DThemeDarkHtmlElement.prototype.getElementStyleMargin = function (state) {
@@ -55279,14 +55320,14 @@ var DThemeDarkHtmlElement = /** @class */ (function (_super) {
     };
     DThemeDarkHtmlElement.prototype.getClipperStylePositionPosition = function (rect) {
         if (rect) {
-            return "left: " + rect.x + "px; top: " + rect.y + "px;";
+            return "left: ".concat(rect.x, "px; top: ").concat(rect.y, "px;");
         }
         return "left: 0px; top: 0px;";
     };
     DThemeDarkHtmlElement.prototype.getClipperStylePositionSize = function (rect) {
         if (rect) {
-            return ("width: " + rect.width + "px; height: " + rect.height + "px;" +
-                ("line-height: " + rect.height + "px;"));
+            return ("width: ".concat(rect.width, "px; height: ").concat(rect.height, "px;") +
+                "line-height: ".concat(rect.height, "px;"));
         }
         return "width: 0px; height: 0px;";
     };
@@ -55526,7 +55567,7 @@ var DThemeDarkInput = /** @class */ (function (_super) {
  * SPDX-License-Identifier: Apache-2.0
  */
 var CREATOR_CLASSNAME$1 = "d-theme-dark-input";
-var CREATOR_CLASSNAME_ELEMENT$1 = CREATOR_CLASSNAME$1 + "-element";
+var CREATOR_CLASSNAME_ELEMENT$1 = "".concat(CREATOR_CLASSNAME$1, "-element");
 var elementCreator$1 = function (container) {
     var found = container.getElementsByClassName(CREATOR_CLASSNAME_ELEMENT$1);
     if (0 < found.length) {
@@ -55548,15 +55589,15 @@ var divCreator$1 = function (container, classname) {
     container.appendChild(result);
     return result;
 };
-var CREATOR_CLASSNAME_CLIPPER$1 = CREATOR_CLASSNAME$1 + "-clipper";
+var CREATOR_CLASSNAME_CLIPPER$1 = "".concat(CREATOR_CLASSNAME$1, "-clipper");
 var clipperCreator$1 = function (container) {
     return divCreator$1(container, CREATOR_CLASSNAME_CLIPPER$1);
 };
-var CREATOR_CLASSNAME_BEFORE$1 = CREATOR_CLASSNAME$1 + "-before";
+var CREATOR_CLASSNAME_BEFORE$1 = "".concat(CREATOR_CLASSNAME$1, "-before");
 var beforeCreator$1 = function (container) {
     return divCreator$1(container, CREATOR_CLASSNAME_BEFORE$1);
 };
-var CREATOR_CLASSNAME_AFTER$1 = CREATOR_CLASSNAME$1 + "-after";
+var CREATOR_CLASSNAME_AFTER$1 = "".concat(CREATOR_CLASSNAME$1, "-after");
 var afterCreator$1 = function (container) {
     return divCreator$1(container, CREATOR_CLASSNAME_AFTER$1);
 };
@@ -55768,7 +55809,7 @@ var loadThemeDarkInputText = function () {
  * SPDX-License-Identifier: Apache-2.0
  */
 var CREATOR_CLASSNAME = "d-theme-dark-input-text-area";
-var CREATOR_CLASSNAME_ELEMENT = CREATOR_CLASSNAME + "-element";
+var CREATOR_CLASSNAME_ELEMENT = "".concat(CREATOR_CLASSNAME, "-element");
 var elementCreator = function (container) {
     var found = container.getElementsByClassName(CREATOR_CLASSNAME_ELEMENT);
     if (0 < found.length) {
@@ -55790,15 +55831,15 @@ var divCreator = function (container, classname) {
     container.appendChild(result);
     return result;
 };
-var CREATOR_CLASSNAME_CLIPPER = CREATOR_CLASSNAME + "-clipper";
+var CREATOR_CLASSNAME_CLIPPER = "".concat(CREATOR_CLASSNAME, "-clipper");
 var clipperCreator = function (container) {
     return divCreator(container, CREATOR_CLASSNAME_CLIPPER);
 };
-var CREATOR_CLASSNAME_BEFORE = CREATOR_CLASSNAME + "-before";
+var CREATOR_CLASSNAME_BEFORE = "".concat(CREATOR_CLASSNAME, "-before");
 var beforeCreator = function (container) {
     return divCreator(container, CREATOR_CLASSNAME_BEFORE);
 };
-var CREATOR_CLASSNAME_AFTER = CREATOR_CLASSNAME + "-after";
+var CREATOR_CLASSNAME_AFTER = "".concat(CREATOR_CLASSNAME, "-after");
 var afterCreator = function (container) {
     return divCreator(container, CREATOR_CLASSNAME_AFTER);
 };
@@ -60443,11 +60484,11 @@ var UtilName = /** @class */ (function () {
     UtilName.create = function (type) {
         var mapping = this._mapping;
         if (type in mapping) {
-            return type + " " + ++mapping[type];
+            return "".concat(type, " ").concat(++mapping[type]);
         }
         else {
             mapping[type] = 1;
-            return type + " 1";
+            return "".concat(type, " 1");
         }
     };
     UtilName._mapping = {};
@@ -60465,7 +60506,7 @@ var UtilRgba = /** @class */ (function () {
         var r = (color >> 16) & 0xff;
         var g = (color >> 8) & 0xff;
         var b = color & 0xff;
-        return "rgba(" + r + "," + g + "," + b + "," + alpha + ")";
+        return "rgba(".concat(r, ",").concat(g, ",").concat(b, ",").concat(alpha, ")");
     };
     return UtilRgba;
 }());
@@ -60751,8 +60792,9 @@ var UtilWheelEvent = /** @class */ (function () {
 var DAnimationEmpty = /** @class */ (function (_super) {
     __extends(DAnimationEmpty, _super);
     function DAnimationEmpty(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this._target = (_a = options === null || options === void 0 ? void 0 : options.target) !== null && _a !== void 0 ? _a : null;
         _this._reverse = false;
         _this._isStarted = false;
@@ -63354,12 +63396,15 @@ var DPickerColorGradientView = /** @class */ (function (_super) {
         return indices;
     };
     DPickerColorGradientView.prototype._calculateBounds = function () {
+        var worldTransform = this.transform.worldTransform;
         var rect = this._parts[0].rect;
         var bounds = this._bounds;
         var work = this._workPoint;
         work.set(rect.x, rect.y);
+        worldTransform.apply(work, work);
         bounds.addPoint(work);
         work.set(rect.x + rect.width, rect.y + rect.height);
+        worldTransform.apply(work, work);
         bounds.addPoint(work);
     };
     DPickerColorGradientView.prototype.update = function () {
@@ -63864,21 +63909,34 @@ var DButtonColorGradient = /** @class */ (function (_super) {
         _super.prototype.onActivate.call(this, e);
         var value = this._textValueComputed;
         var dialog = this.dialog;
-        dialog.value.fromObject(value);
-        dialog.open().then(function () {
-            var newValue = dialog.value;
-            var oldValue = new DColorGradientObservable().fromObject(value);
-            value.fromObject(newValue);
-            var view = _this._view;
-            if (view != null) {
-                view.update();
-            }
-            _this.onTextChange();
-            _this.createOrUpdateText();
-            DApplications.update(_this);
-            _this.emit("change", newValue, oldValue, _this);
+        if (value != null) {
+            dialog.value.fromObject(value);
+        }
+        dialog.open(this).then(function (newValue) {
+            _this.onValueChange(newValue, _this.toClone(value));
         });
     };
+    DButtonColorGradient.prototype.toClone = function (value) {
+        var result = new DColorGradientObservable();
+        if (value != null) {
+            result.fromObject(value);
+        }
+        return result;
+    };
+    DButtonColorGradient.prototype.onValueChange = function (newValue, oldValue) {
+        var value = this._textValueComputed;
+        if (value != null) {
+            value.fromObject(newValue);
+        }
+        var view = this._view;
+        if (view != null) {
+            view.update();
+        }
+        this.onTextChange();
+        this.createOrUpdateText();
+        DApplications.update(this);
+        this.emit("change", newValue, oldValue, this);
+    };
     Object.defineProperty(DButtonColorGradient.prototype, "dialog", {
         get: function () {
             var _a;
@@ -63886,11 +63944,14 @@ var DButtonColorGradient = /** @class */ (function (_super) {
             if (dialog == null) {
                 var options = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog;
                 if (options) {
-                    dialog = new DDialogColorGradient(options);
+                    dialog = this.newDialog(options);
                 }
                 else {
                     if (DButtonColorGradient.DIALOG == null) {
-                        DButtonColorGradient.DIALOG = new DDialogColorGradient();
+                        DButtonColorGradient.DIALOG = this.newDialog({
+                            mode: "MENU",
+                            sticky: true
+                        });
                     }
                     dialog = DButtonColorGradient.DIALOG;
                 }
@@ -63901,6 +63962,9 @@ var DButtonColorGradient = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DButtonColorGradient.prototype.newDialog = function (options) {
+        return new DDialogColorGradient(options);
+    };
     Object.defineProperty(DButtonColorGradient.prototype, "value", {
         get: function () {
             return this._textValueComputed;
@@ -63987,34 +64051,21 @@ var DButtonColor = /** @class */ (function (_super) {
     function DButtonColor() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    DButtonColor.prototype.init = function (options) {
-        var _this = this;
-        _super.prototype.init.call(this, options);
-        var value = this._textValueComputed;
-        this._value = new DPickerColorAndAlpha(value, function (color) {
-            value.color = color;
-            _this.onColorChange();
-        }, function (alpha) {
-            value.alpha = alpha;
-            _this.updateTextForcibly();
-        });
-    };
     DButtonColor.prototype.onActivate = function (e) {
         var _this = this;
         _super.prototype.onActivate.call(this, e);
-        var value = this._textValueComputed;
         var dialog = this.dialog;
-        var dialogCurrent = dialog.current;
-        var dialogNew = dialog.new;
-        dialogCurrent.color = value.color;
-        dialogCurrent.alpha = value.alpha;
-        dialogNew.color = value.color;
-        dialogNew.alpha = value.alpha;
-        dialog.open().then(function () {
-            value.color = dialogNew.color;
-            value.alpha = dialogNew.alpha;
-            _this.onColorChange();
-            _this.onValueChange(_this.toClone(dialogNew), _this.toClone(dialogCurrent));
+        var value = this._textValueComputed;
+        if (value != null) {
+            var dialogCurrent = dialog.current;
+            dialogCurrent.color = value.color;
+            dialogCurrent.alpha = value.alpha;
+            var dialogNew = dialog.new;
+            dialogNew.color = value.color;
+            dialogNew.alpha = value.alpha;
+        }
+        dialog.open(this).then(function () {
+            _this.onValueChange(_this.toClone(dialog.new), _this.toClone(dialog.current));
         });
     };
     DButtonColor.prototype.toClone = function (value) {
@@ -64024,6 +64075,12 @@ var DButtonColor = /** @class */ (function (_super) {
         };
     };
     DButtonColor.prototype.onValueChange = function (newValue, oldValue) {
+        var value = this._textValueComputed;
+        if (value != null) {
+            value.color = newValue.color;
+            value.alpha = newValue.alpha;
+        }
+        this.onColorChange();
         this.emit("change", newValue, oldValue, this);
     };
     DButtonColor.prototype.toImageTintOptions = function (tint) {
@@ -64069,11 +64126,14 @@ var DButtonColor = /** @class */ (function (_super) {
             if (dialog == null) {
                 var options = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog;
                 if (options) {
-                    dialog = new DDialogColor(options);
+                    dialog = this.newDialog(options);
                 }
                 else {
                     if (DButtonColor.DIALOG == null) {
-                        DButtonColor.DIALOG = new DDialogColor();
+                        DButtonColor.DIALOG = this.newDialog({
+                            mode: "MENU",
+                            sticky: true
+                        });
                     }
                     dialog = DButtonColor.DIALOG;
                 }
@@ -64084,13 +64144,32 @@ var DButtonColor = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DButtonColor.prototype.newDialog = function (options) {
+        return new DDialogColor(options);
+    };
     Object.defineProperty(DButtonColor.prototype, "value", {
         get: function () {
-            return this._value;
+            var result = this._value;
+            if (result == null) {
+                result = this.newValue();
+                this._value = result;
+            }
+            return result;
         },
         enumerable: false,
         configurable: true
     });
+    DButtonColor.prototype.newValue = function () {
+        var _this = this;
+        var value = this._textValueComputed;
+        return new DPickerColorAndAlpha(value, function (color) {
+            value.color = color;
+            _this.onColorChange();
+        }, function (alpha) {
+            value.alpha = alpha;
+            _this.updateTextForcibly();
+        });
+    };
     DButtonColor.prototype.getType = function () {
         return "DButtonColor";
     };
@@ -64112,22 +64191,6 @@ var DButtonDanger = /** @class */ (function (_super) {
     return DButtonDanger;
 }(DButton));
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var DDialogDates = /** @class */ (function () {
-    function DDialogDates() {
-    }
-    DDialogDates.getInstance = function () {
-        if (DDialogDates.INSTANCE == null) {
-            DDialogDates.INSTANCE = new DDialogDate();
-        }
-        return DDialogDates.INSTANCE;
-    };
-    return DDialogDates;
-}());
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -64146,13 +64209,14 @@ var DButtonDate = /** @class */ (function (_super) {
         dialog.current = new Date(value);
         dialog.new = new Date(value);
         dialog.page = new Date(value);
-        dialog.open().then(function () {
-            var newValue = dialog.new;
-            var oldValue = dialog.current;
-            _this.text = new Date(newValue.getTime());
-            _this.emit("change", newValue, oldValue, _this);
+        dialog.open(this).then(function () {
+            _this.onValueChange(dialog.new, dialog.current);
         });
     };
+    DButtonDate.prototype.onValueChange = function (newValue, oldValue) {
+        this.text = new Date(newValue.getTime());
+        this.emit("change", newValue, oldValue, this);
+    };
     Object.defineProperty(DButtonDate.prototype, "dialog", {
         get: function () {
             var _a;
@@ -64160,10 +64224,16 @@ var DButtonDate = /** @class */ (function (_super) {
             if (dialog == null) {
                 var options = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog;
                 if (options) {
-                    dialog = new DDialogDate(options);
+                    dialog = this.newDialog(options);
                 }
                 else {
-                    dialog = DDialogDates.getInstance();
+                    if (DButtonDate.DIALOG == null) {
+                        DButtonDate.DIALOG = this.newDialog({
+                            mode: "MENU",
+                            sticky: true
+                        });
+                    }
+                    dialog = DButtonDate.DIALOG;
                 }
                 this._dialog = dialog;
             }
@@ -64172,6 +64242,9 @@ var DButtonDate = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DButtonDate.prototype.newDialog = function (options) {
+        return new DDialogDate(options);
+    };
     Object.defineProperty(DButtonDate.prototype, "value", {
         get: function () {
             var _a;
@@ -64192,22 +64265,6 @@ var DButtonDate = /** @class */ (function (_super) {
     return DButtonDate;
 }(DButton));
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var DDialogDatetimes = /** @class */ (function () {
-    function DDialogDatetimes() {
-    }
-    DDialogDatetimes.getInstance = function () {
-        if (DDialogDatetimes.INSTANCE == null) {
-            DDialogDatetimes.INSTANCE = new DDialogDatetime();
-        }
-        return DDialogDatetimes.INSTANCE;
-    };
-    return DDialogDatetimes;
-}());
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -64226,13 +64283,14 @@ var DButtonDatetime = /** @class */ (function (_super) {
         dialog.current = new Date(value);
         dialog.new = new Date(value);
         dialog.page = new Date(value);
-        dialog.open().then(function () {
-            var newValue = dialog.new;
-            var oldValue = dialog.current;
-            _this.text = new Date(newValue.getTime());
-            _this.emit("change", newValue, oldValue, _this);
+        dialog.open(this).then(function () {
+            _this.onValueChange(dialog.new, dialog.current);
         });
     };
+    DButtonDatetime.prototype.onValueChange = function (newValue, oldValue) {
+        this.text = new Date(newValue.getTime());
+        this.emit("change", newValue, oldValue, this);
+    };
     DButtonDatetime.prototype.getDatetimeMask = function () {
         var _a, _b;
         var result = this._datetimeMask;
@@ -64249,10 +64307,16 @@ var DButtonDatetime = /** @class */ (function (_super) {
             if (dialog == null) {
                 var options = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog;
                 if (options) {
-                    dialog = new DDialogDatetime(options);
+                    dialog = this.newDialog(options);
                 }
                 else {
-                    dialog = DDialogDatetimes.getInstance();
+                    if (DButtonDatetime.DIALOG == null) {
+                        DButtonDatetime.DIALOG = this.newDialog({
+                            mode: "MENU",
+                            sticky: true
+                        });
+                    }
+                    dialog = DButtonDatetime.DIALOG;
                 }
                 this._dialog = dialog;
             }
@@ -64261,6 +64325,9 @@ var DButtonDatetime = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DButtonDatetime.prototype.newDialog = function (options) {
+        return new DDialogDatetime(options);
+    };
     Object.defineProperty(DButtonDatetime.prototype, "value", {
         get: function () {
             var _a;
@@ -65870,8 +65937,9 @@ var DContent = /** @class */ (function (_super) {
 var DScrollBar = /** @class */ (function (_super) {
     __extends(DScrollBar, _super);
     function DScrollBar(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._start = 0;
         _this._end = 1;
         _this.visible = false;
@@ -66335,8 +66403,9 @@ var DPaneScrollBar = /** @class */ (function () {
 var DPane = /** @class */ (function (_super) {
     __extends(DPane, _super);
     function DPane(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         // Mask
         var theme = _this.theme;
         if ((_a = options === null || options === void 0 ? void 0 : options.mask) !== null && _a !== void 0 ? _a : theme.isOverflowMaskEnabled()) {
@@ -67192,8 +67261,9 @@ var toOptions = function (options) {
 var DButtonSelect = /** @class */ (function (_super) {
     __extends(DButtonSelect, _super);
     function DButtonSelect(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, toOptions(options)) || this;
+        _this = _super.call(this, toOptions(options)) || this;
         _this._dialogGetter = (_a = options === null || options === void 0 ? void 0 : options.getter) !== null && _a !== void 0 ? _a : defaultGetter$1;
         _this._dialogSetter = (_b = options === null || options === void 0 ? void 0 : options.setter) !== null && _b !== void 0 ? _b : defaultSetter$1;
         return _this;
@@ -67250,22 +67320,6 @@ var DButtonSelect = /** @class */ (function (_super) {
     return DButtonSelect;
 }(DButton));
 
-/*
- * Copyright (C) 2019 Toshiba Corporation
- * SPDX-License-Identifier: Apache-2.0
- */
-var DDialogTimes = /** @class */ (function () {
-    function DDialogTimes() {
-    }
-    DDialogTimes.getInstance = function () {
-        if (DDialogTimes.INSTANCE == null) {
-            DDialogTimes.INSTANCE = new DDialogTime();
-        }
-        return DDialogTimes.INSTANCE;
-    };
-    return DDialogTimes;
-}());
-
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -67283,13 +67337,14 @@ var DButtonTime = /** @class */ (function (_super) {
         var dialog = this.dialog;
         dialog.current = new Date(value);
         dialog.new = new Date(value);
-        dialog.open().then(function () {
-            var newValue = dialog.new;
-            var oldValue = dialog.current;
-            _this.text = new Date(newValue.getTime());
-            _this.emit("change", newValue, oldValue, _this);
+        dialog.open(this).then(function () {
+            _this.onValueChange(dialog.new, dialog.current);
         });
     };
+    DButtonTime.prototype.onValueChange = function (newValue, oldValue) {
+        this.text = new Date(newValue.getTime());
+        this.emit("change", newValue, oldValue, this);
+    };
     DButtonTime.prototype.getDatetimeMask = function () {
         var _a, _b;
         var result = this._datetimeMask;
@@ -67306,10 +67361,16 @@ var DButtonTime = /** @class */ (function (_super) {
             if (dialog == null) {
                 var options = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog;
                 if (options) {
-                    dialog = new DDialogTime(options);
+                    dialog = this.newDialog(options);
                 }
                 else {
-                    dialog = DDialogTimes.getInstance();
+                    if (DButtonTime.DIALOG == null) {
+                        DButtonTime.DIALOG = this.newDialog({
+                            mode: "MENU",
+                            sticky: true
+                        });
+                    }
+                    dialog = DButtonTime.DIALOG;
                 }
                 this._dialog = dialog;
             }
@@ -67318,6 +67379,9 @@ var DButtonTime = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DButtonTime.prototype.newDialog = function (options) {
+        return new DDialogTime(options);
+    };
     Object.defineProperty(DButtonTime.prototype, "value", {
         get: function () {
             var _a;
@@ -70278,8 +70342,9 @@ var DChartSelectionPoint = {
 var DChartSelectionSubImpl = /** @class */ (function (_super) {
     __extends(DChartSelectionSubImpl, _super);
     function DChartSelectionSubImpl(options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this._container = null;
         _this._series = null;
         _this._isEnabled = (_a = options.enable) !== null && _a !== void 0 ? _a : true;
@@ -70440,8 +70505,9 @@ var DChartSelectionSubImpl = /** @class */ (function (_super) {
 var DChartSelectionSimple = /** @class */ (function (_super) {
     __extends(DChartSelectionSimple, _super);
     function DChartSelectionSimple(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this._container = null;
         var point = toEnum((_a = options === null || options === void 0 ? void 0 : options.point) !== null && _a !== void 0 ? _a : DChartSelectionPoint.CLOSER, DChartSelectionPoint);
         _this._selected = _this.newSelected(point, options === null || options === void 0 ? void 0 : options.selected);
@@ -71306,8 +71372,9 @@ var DChartSeriesLineOfTriangleRoundeds = /** @class */ (function (_super) {
 var DChartSeriesLine = /** @class */ (function (_super) {
     __extends(DChartSeriesLine, _super);
     function DChartSeriesLine(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._line = null;
         _this._options = options;
         _this._points = (_a = options === null || options === void 0 ? void 0 : options.points) !== null && _a !== void 0 ? _a : [];
@@ -72230,8 +72297,9 @@ var DDiagramSnapshot = /** @class */ (function (_super) {
 var DDiagramBase = /** @class */ (function (_super) {
     __extends(DDiagramBase, _super);
     function DDiagramBase(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._serialized = null;
         _this._tileFactory = options === null || options === void 0 ? void 0 : options.tile;
         _this._controller = options === null || options === void 0 ? void 0 : options.controller;
@@ -74284,10 +74352,10 @@ var DDiagram = /** @class */ (function (_super) {
                             var formatter = Function("value", 
                             /* eslint-disable prettier/prettier */
                             "try {" +
-                                ("return (" + datumFormat + ");") +
+                                "return (".concat(datumFormat, ");") +
                                 "} catch( e1 ) {" +
                                 "try {" +
-                                ("return (" + (0 < datumInitial.length ? datumInitial : 0) + ");") +
+                                "return (".concat(0 < datumInitial.length ? datumInitial : 0, ");") +
                                 "} catch( e2 ) {" +
                                 "return 0;" +
                                 "}" +
@@ -74310,7 +74378,7 @@ var DDiagram = /** @class */ (function (_super) {
                             shapeDatum.value = initialMap[datumInitial] = Function(
                             /* eslint-disable prettier/prettier */
                             "try {" +
-                                ("return (" + datumInitial + ");") +
+                                "return (".concat(datumInitial, ");") +
                                 "} catch( e ) {" +
                                 "return 0;" +
                                 "}"
@@ -74542,8 +74610,9 @@ var DDialogProcessingMessage = /** @class */ (function (_super) {
 var DDialogProcessing = /** @class */ (function (_super) {
     __extends(DDialogProcessing, _super);
     function DDialogProcessing(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._isDone = true;
         _this._startTime = 0;
         var delay = options === null || options === void 0 ? void 0 : options.delay;
@@ -75989,20 +76058,20 @@ var DMapTilePyramidImpl = /** @class */ (function (_super) {
  */
 var DMapTileUrlBuilderKokudo = function (tz, tx, ty) {
     if (5 <= tz) {
-        return "https://cyberjapandata.gsi.go.jp/xyz/pale/" + tz + "/" + tx + "/" + ty + ".png";
+        return "https://cyberjapandata.gsi.go.jp/xyz/pale/".concat(tz, "/").concat(tx, "/").concat(ty, ".png");
     }
     else if (2 <= tz) {
-        return "https://cyberjapandata.gsi.go.jp/xyz/std/" + tz + "/" + tx + "/" + ty + ".png";
+        return "https://cyberjapandata.gsi.go.jp/xyz/std/".concat(tz, "/").concat(tx, "/").concat(ty, ".png");
     }
     else {
-        return "https://cyberjapandata.gsi.go.jp/xyz/earthhillshade/" + tz + "/" + tx + "/" + ty + ".png";
+        return "https://cyberjapandata.gsi.go.jp/xyz/earthhillshade/".concat(tz, "/").concat(tx, "/").concat(ty, ".png");
     }
 };
 var DMapTileUrlBuilderOsm = function (tz, tx, ty) {
-    return "https://" + "abc"[(tx + ty) % 3] + ".tile.openstreetmap.org/" + tz + "/" + tx + "/" + ty + ".png";
+    return "https://".concat("abc"[(tx + ty) % 3], ".tile.openstreetmap.org/").concat(tz, "/").concat(tx, "/").concat(ty, ".png");
 };
 var DMapTileUrlBuilderOsmfj = function (tz, tx, ty) {
-    return "https://j.tile.openstreetmap.jp/" + tz + "/" + tx + "/" + ty + ".png";
+    return "https://j.tile.openstreetmap.jp/".concat(tz, "/").concat(tx, "/").concat(ty, ".png");
 };
 var DMapTilePyramids = /** @class */ (function () {
     function DMapTilePyramids() {
@@ -76189,8 +76258,9 @@ var defaultFilter = function () { return true; };
 var DMenuSidedSelection = /** @class */ (function (_super) {
     __extends(DMenuSidedSelection, _super);
     function DMenuSidedSelection(content, options) {
+        var _this = this;
         var _a, _b, _c;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this._content = content;
         _this._item = null;
         _this._isDirty = true;
@@ -76311,8 +76381,9 @@ var DMenuSidedSelection = /** @class */ (function (_super) {
 var DMenuSided = /** @class */ (function (_super) {
     __extends(DMenuSided, _super);
     function DMenuSided(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         var context = new DMenuContext(_this);
         _this._context = context;
         context.add(_this);
@@ -76540,8 +76611,9 @@ var DPaginationPage = /** @class */ (function (_super) {
 var DPagination = /** @class */ (function (_super) {
     __extends(DPagination, _super);
     function DPagination(options) {
+        var _this = this;
         var _a, _b, _c, _d;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         if (options != null) {
             _this._size = (_b = (_a = options.size) !== null && _a !== void 0 ? _a : options.total) !== null && _b !== void 0 ? _b : 10;
             _this._value = (_d = (_c = options.value) !== null && _c !== void 0 ? _c : options.selected) !== null && _d !== void 0 ? _d : 0;
@@ -77473,7 +77545,7 @@ var DSlider = /** @class */ (function (_super) {
         var text = options.text || {};
         options.text = text;
         if (text.value == null) {
-            text.value = "" + options.value;
+            text.value = "".concat(options.value);
         }
         return options;
     };
@@ -77488,7 +77560,7 @@ var DSlider = /** @class */ (function (_super) {
         var text = options.text || {};
         options.text = text;
         if (text.value == null) {
-            text.value = "" + options.value;
+            text.value = "".concat(options.value);
         }
         return options;
     };
@@ -77915,8 +77987,9 @@ var DTableBodyCells = /** @class */ (function () {
 var DTableBodyCellSelectDialog = /** @class */ (function (_super) {
     __extends(DTableBodyCellSelectDialog, _super);
     function DTableBodyCellSelectDialog(columnIndex, column, onChange, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._rowIndex = -1;
         _this._columnIndex = columnIndex;
         _this._column = column;
@@ -78120,8 +78193,9 @@ var DTableBodyCellActionMenu = /** @class */ (function (_super) {
 var DTableBodyCellSelectPromise = /** @class */ (function (_super) {
     __extends(DTableBodyCellSelectPromise, _super);
     function DTableBodyCellSelectPromise(columnIndex, column, onChange, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._rowIndex = -1;
         _this._columnIndex = columnIndex;
         _this._column = column;
@@ -78310,8 +78384,9 @@ var DTableBodyCellText = /** @class */ (function (_super) {
 var DTableBodyCellButton = /** @class */ (function (_super) {
     __extends(DTableBodyCellButton, _super);
     function DTableBodyCellButton(columnIndex, column, onChange, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, columnIndex, column, onChange, options) || this;
+        _this = _super.call(this, columnIndex, column, onChange, options) || this;
         var when = toEnum((_a = options === null || options === void 0 ? void 0 : options.when) !== null && _a !== void 0 ? _a : DButtonBaseWhen.CLICKED, DButtonBaseWhen);
         _this._when = when;
         _this.initOnClick(when, _this.theme, options);
@@ -78530,6 +78605,9 @@ var DTableBodyCellColor = /** @class */ (function (_super) {
             _super.prototype.onValueChange.call(this, newValue, oldValue);
             this._onChange(newValue, oldValue, row, rowIndex, columnIndex, this);
         }
+        else {
+            _super.prototype.onValueChange.call(this, newValue, oldValue);
+        }
     };
     Object.defineProperty(DTableBodyCellColor.prototype, "row", {
         get: function () {
@@ -78562,7 +78640,7 @@ var DTableBodyCellColor = /** @class */ (function (_super) {
     DTableBodyCellColor.prototype.set = function (newValue, row, supplimental, rowIndex, columnIndex, forcibly) {
         this._row = row;
         this._rowIndex = rowIndex;
-        var value = this._value;
+        var value = this.value;
         if (isNumber(newValue)) {
             value.color = newValue;
             value.alpha = 1;
@@ -78610,48 +78688,19 @@ var DTableBodyCellDate = /** @class */ (function (_super) {
         _this._onChange = onChange;
         return _this;
     }
-    DTableBodyCellDate.prototype.onActivate = function (e) {
-        var _this = this;
-        var _a, _b;
-        _super.prototype.onActivate.call(this, e);
-        var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
-        var dialog = this.dialog;
-        dialog.current = new Date(value);
-        dialog.new = new Date(value);
-        dialog.page = new Date(value);
-        dialog.open().then(function () {
-            var newValue = dialog.new;
-            var oldValue = dialog.current;
-            _this.text = new Date(newValue.getTime());
-            var row = _this._row;
-            if (row !== undefined) {
-                var rowIndex = _this._rowIndex;
-                var columnIndex = _this._columnIndex;
-                _this._column.setter(row, columnIndex, newValue);
-                _this.emit("change", newValue, oldValue, _this);
-                _this._onChange(newValue, oldValue, row, rowIndex, columnIndex, _this);
-            }
-        });
+    DTableBodyCellDate.prototype.onValueChange = function (newValue, oldValue) {
+        var row = this._row;
+        if (row !== undefined) {
+            var rowIndex = this._rowIndex;
+            var columnIndex = this._columnIndex;
+            this._column.setter(row, columnIndex, newValue);
+            _super.prototype.onValueChange.call(this, newValue, oldValue);
+            this._onChange(newValue, oldValue, row, rowIndex, columnIndex, this);
+        }
+        else {
+            _super.prototype.onValueChange.call(this, newValue, oldValue);
+        }
     };
-    Object.defineProperty(DTableBodyCellDate.prototype, "dialog", {
-        get: function () {
-            var _a;
-            var dialog = this._dialog;
-            if (dialog == null) {
-                var options = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog;
-                if (options) {
-                    dialog = new DDialogDate(options);
-                }
-                else {
-                    dialog = DDialogDates.getInstance();
-                }
-                this._dialog = dialog;
-            }
-            return dialog;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(DTableBodyCellDate.prototype, "row", {
         get: function () {
             return this._row;
@@ -78717,7 +78766,7 @@ var DTableBodyCellDate = /** @class */ (function (_super) {
         return "DTableBodyCellDate";
     };
     return DTableBodyCellDate;
-}(DButton));
+}(DButtonDate));
 
 /*
  * Copyright (C) 2019 Toshiba Corporation
@@ -78733,57 +78782,19 @@ var DTableBodyCellDatetime = /** @class */ (function (_super) {
         _this._onChange = onChange;
         return _this;
     }
-    DTableBodyCellDatetime.prototype.onActivate = function (e) {
-        var _this = this;
-        var _a, _b;
-        _super.prototype.onActivate.call(this, e);
-        var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
-        var dialog = this.dialog;
-        dialog.current = new Date(value);
-        dialog.new = new Date(value);
-        dialog.page = new Date(value);
-        dialog.open().then(function () {
-            var newValue = dialog.new;
-            var oldValue = dialog.current;
-            _this.text = new Date(newValue.getTime());
-            var row = _this._row;
-            if (row !== undefined) {
-                var rowIndex = _this._rowIndex;
-                var columnIndex = _this._columnIndex;
-                _this._column.setter(row, columnIndex, newValue);
-                _this.emit("change", newValue, oldValue, _this);
-                _this._onChange(newValue, oldValue, row, rowIndex, columnIndex, _this);
-            }
-        });
-    };
-    DTableBodyCellDatetime.prototype.getDatetimeMask = function () {
-        var _a, _b;
-        var result = this._datetimeMask;
-        if (result == null) {
-            result = DPickerDatetimes.toMask((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog) === null || _b === void 0 ? void 0 : _b.picker);
-            this._datetimeMask = result;
+    DTableBodyCellDatetime.prototype.onValueChange = function (newValue, oldValue) {
+        var row = this._row;
+        if (row !== undefined) {
+            var rowIndex = this._rowIndex;
+            var columnIndex = this._columnIndex;
+            this._column.setter(row, columnIndex, newValue);
+            _super.prototype.onValueChange.call(this, newValue, oldValue);
+            this._onChange(newValue, oldValue, row, rowIndex, columnIndex, this);
+        }
+        else {
+            _super.prototype.onValueChange.call(this, newValue, oldValue);
         }
-        return result;
     };
-    Object.defineProperty(DTableBodyCellDatetime.prototype, "dialog", {
-        get: function () {
-            var _a;
-            var dialog = this._dialog;
-            if (dialog == null) {
-                var options = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog;
-                if (options) {
-                    dialog = new DDialogDatetime(options);
-                }
-                else {
-                    dialog = DDialogDatetimes.getInstance();
-                }
-                this._dialog = dialog;
-            }
-            return dialog;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(DTableBodyCellDatetime.prototype, "row", {
         get: function () {
             return this._row;
@@ -78849,7 +78860,7 @@ var DTableBodyCellDatetime = /** @class */ (function (_super) {
         return "DTableBodyCellDatetime";
     };
     return DTableBodyCellDatetime;
-}(DButton));
+}(DButtonDatetime));
 
 /*
  * Copyright (C) 2019 Toshiba Corporation
@@ -79568,56 +79579,19 @@ var DTableBodyCellTime = /** @class */ (function (_super) {
         _this._onChange = onChange;
         return _this;
     }
-    DTableBodyCellTime.prototype.onActivate = function (e) {
-        var _this = this;
-        var _a, _b;
-        _super.prototype.onActivate.call(this, e);
-        var value = (_b = (_a = this._textValueComputed) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : Date.now();
-        var dialog = this.dialog;
-        dialog.current = new Date(value);
-        dialog.new = new Date(value);
-        dialog.open().then(function () {
-            var newValue = dialog.new;
-            var oldValue = dialog.current;
-            _this.text = new Date(newValue.getTime());
-            var row = _this._row;
-            if (row !== undefined) {
-                var rowIndex = _this._rowIndex;
-                var columnIndex = _this._columnIndex;
-                _this._column.setter(row, columnIndex, newValue);
-                _this.emit("change", newValue, oldValue, _this);
-                _this._onChange(newValue, oldValue, row, rowIndex, columnIndex, _this);
-            }
-        });
-    };
-    DTableBodyCellTime.prototype.getDatetimeMask = function () {
-        var _a, _b;
-        var result = this._datetimeMask;
-        if (result == null) {
-            result = DPickerTimes.toMask((_b = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog) === null || _b === void 0 ? void 0 : _b.picker);
-            this._datetimeMask = result;
+    DTableBodyCellTime.prototype.onValueChange = function (newValue, oldValue) {
+        var row = this._row;
+        if (row !== undefined) {
+            var rowIndex = this._rowIndex;
+            var columnIndex = this._columnIndex;
+            this._column.setter(row, columnIndex, newValue);
+            _super.prototype.onValueChange.call(this, newValue, oldValue);
+            this._onChange(newValue, oldValue, row, rowIndex, columnIndex, this);
+        }
+        else {
+            _super.prototype.onValueChange.call(this, newValue, oldValue);
         }
-        return result;
     };
-    Object.defineProperty(DTableBodyCellTime.prototype, "dialog", {
-        get: function () {
-            var _a;
-            var dialog = this._dialog;
-            if (dialog == null) {
-                var options = (_a = this._options) === null || _a === void 0 ? void 0 : _a.dialog;
-                if (options) {
-                    dialog = new DDialogTime(options);
-                }
-                else {
-                    dialog = DDialogTimes.getInstance();
-                }
-                this._dialog = dialog;
-            }
-            return dialog;
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(DTableBodyCellTime.prototype, "row", {
         get: function () {
             return this._row;
@@ -79683,7 +79657,7 @@ var DTableBodyCellTime = /** @class */ (function (_super) {
         return "DTableBodyCellTime";
     };
     return DTableBodyCellTime;
-}(DButton));
+}(DButtonTime));
 
 /*
  * Copyright (C) 2019 Toshiba Corporation
@@ -79692,8 +79666,9 @@ var DTableBodyCellTime = /** @class */ (function (_super) {
 var DTableBodyCellTree = /** @class */ (function (_super) {
     __extends(DTableBodyCellTree, _super);
     function DTableBodyCellTree(columnIndex, column, onChange, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, columnIndex, column, onChange, DLinks.toStateOptions((_a = options === null || options === void 0 ? void 0 : options.link) === null || _a === void 0 ? void 0 : _a.target, options)) || this;
+        _this = _super.call(this, columnIndex, column, onChange, DLinks.toStateOptions((_a = options === null || options === void 0 ? void 0 : options.link) === null || _a === void 0 ? void 0 : _a.target, options)) || this;
         _this._padding = new DBasePaddingAdjustable(_this._padding);
         return _this;
     }
@@ -79819,8 +79794,9 @@ var DTableDataSelectionType = {
 var DTableRow = /** @class */ (function (_super) {
     __extends(DTableRow, _super);
     function DTableRow(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._reverse = true;
         _this._frozen = (_a = options.frozen) !== null && _a !== void 0 ? _a : 0;
         _this._columns = (_b = options.columns) !== null && _b !== void 0 ? _b : [];
@@ -80427,8 +80403,9 @@ var COMPARATOR$1 = function (a, b) {
 var DTableDataListSelection = /** @class */ (function (_super) {
     __extends(DTableDataListSelection, _super);
     function DTableDataListSelection(parent, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this._parent = parent;
         _this._type = toEnum((_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : DTableDataSelectionType.NONE, DTableDataSelectionType);
         _this._indices = new Set();
@@ -81107,8 +81084,9 @@ var toRowOptions = function (theme, options, selectionType) {
 var DTableBody = /** @class */ (function (_super) {
     __extends(DTableBody, _super);
     function DTableBody(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this.transform.position.y = (_a = options.offset) !== null && _a !== void 0 ? _a : 0;
         var data = _this.toData(options.data);
         _this._data = data;
@@ -81495,8 +81473,9 @@ var DTableCategoryCell = /** @class */ (function (_super) {
 var DTableCategory = /** @class */ (function (_super) {
     __extends(DTableCategory, _super);
     function DTableCategory(options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         var offset = (_a = options.offset) !== null && _a !== void 0 ? _a : 0;
         _this._offset = offset;
         _this.transform.position.y = offset;
@@ -81754,8 +81733,9 @@ var COMPARATOR = function (a, b) {
 var DTableDataTreeSelectionImpl = /** @class */ (function (_super) {
     __extends(DTableDataTreeSelectionImpl, _super);
     function DTableDataTreeSelectionImpl(parent, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this) || this;
+        _this = _super.call(this) || this;
         _this._parent = parent;
         _this._type = toEnum((_a = options === null || options === void 0 ? void 0 : options.type) !== null && _a !== void 0 ? _a : DTableDataSelectionType.NONE, DTableDataSelectionType);
         _this._rows = new Set();
@@ -82729,8 +82709,9 @@ var DTableHeaderCell = /** @class */ (function (_super) {
 var DTableHeader = /** @class */ (function (_super) {
     __extends(DTableHeader, _super);
     function DTableHeader(options) {
+        var _this = this;
         var _a, _b;
-        var _this = _super.call(this, options) || this;
+        _this = _super.call(this, options) || this;
         _this._table = (_a = options.table) !== null && _a !== void 0 ? _a : null;
         var offset = (_b = options.offset) !== null && _b !== void 0 ? _b : 0;
         _this._offset = offset;
@@ -84764,8 +84745,9 @@ var DTreeItemText = /** @class */ (function (_super) {
 var DTreeItemButton = /** @class */ (function (_super) {
     __extends(DTreeItemButton, _super);
     function DTreeItemButton(data, options) {
+        var _this = this;
         var _a;
-        var _this = _super.call(this, data, options) || this;
+        _this = _super.call(this, data, options) || this;
         var when = toEnum((_a = options === null || options === void 0 ? void 0 : options.when) !== null && _a !== void 0 ? _a : DButtonBaseWhen.CLICKED, DButtonBaseWhen);
         _this._when = when;
         _this.initOnClick(when, _this.theme, options);
@@ -85230,9 +85212,7 @@ exports.DDialogConfirmDelete = DDialogConfirmDelete;
 exports.DDialogConfirmDiscard = DDialogConfirmDiscard;
 exports.DDialogConfirmMessage = DDialogConfirmMessage;
 exports.DDialogDate = DDialogDate;
-exports.DDialogDates = DDialogDates;
 exports.DDialogDatetime = DDialogDatetime;
-exports.DDialogDatetimes = DDialogDatetimes;
 exports.DDialogInput = DDialogInput;
 exports.DDialogInputBoolean = DDialogInputBoolean;
 exports.DDialogInputInteger = DDialogInputInteger;
@@ -85250,7 +85230,6 @@ exports.DDialogSelectListItemUpdater = DDialogSelectListItemUpdater;
 exports.DDialogSelectSearh = DDialogSelectSearh;
 exports.DDialogState = DDialogState;
 exports.DDialogTime = DDialogTime;
-exports.DDialogTimes = DDialogTimes;
 exports.DDropdown = DDropdown;
 exports.DDropdownBase = DDropdownBase;
 exports.DDynamicText = DDynamicText;
@@ -85269,6 +85248,15 @@ exports.DImageBase = DImageBase;
 exports.DImageBaseThemeWrapperSecondary = DImageBaseThemeWrapperSecondary;
 exports.DImageBaseThemeWrapperTertiary = DImageBaseThemeWrapperTertiary;
 exports.DImagePiece = DImagePiece;
+exports.DImagePieceLayouter = DImagePieceLayouter;
+exports.DImagePieceLayouterPart = DImagePieceLayouterPart;
+exports.DImagePieceLayouterPartBottom = DImagePieceLayouterPartBottom;
+exports.DImagePieceLayouterPartCenter = DImagePieceLayouterPartCenter;
+exports.DImagePieceLayouterPartContainer = DImagePieceLayouterPartContainer;
+exports.DImagePieceLayouterPartLeft = DImagePieceLayouterPartLeft;
+exports.DImagePieceLayouterPartMiddle = DImagePieceLayouterPartMiddle;
+exports.DImagePieceLayouterPartRight = DImagePieceLayouterPartRight;
+exports.DImagePieceLayouterPartTop = DImagePieceLayouterPartTop;
 exports.DInput = DInput;
 exports.DInputAndLabel = DInputAndLabel;
 exports.DInputBoolean = DInputBoolean;