@wcardinal/wcardinal-ui 0.442.0 → 0.444.0

package/dist/wcardinal-ui.cjs.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.442.0
+ Winter Cardinal UI v0.444.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -23628,6 +23628,115 @@ var DCanvasContainer = /** @class */ (function (_super) {
     return DCanvasContainer;
 }(DBase));
 
+var UtilExtractorCanvas = /** @class */ (function () {
+    function UtilExtractorCanvas(width, height) {
+        var element = document.createElement("canvas");
+        this._element = element;
+        var context = this._element.getContext("2d", {
+            willReadFrequently: true
+        });
+        this._context = context;
+        element.width = width;
+        element.height = height;
+    }
+    Object.defineProperty(UtilExtractorCanvas.prototype, "element", {
+        get: function () {
+            var result = this._element;
+            if (result != null) {
+                return result;
+            }
+            throw new Error("No Element Available");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    UtilExtractorCanvas.prototype.getElement = function () {
+        return this._element;
+    };
+    Object.defineProperty(UtilExtractorCanvas.prototype, "canvas", {
+        get: function () {
+            return this.element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(UtilExtractorCanvas.prototype, "context", {
+        get: function () {
+            var result = this._context;
+            if (result != null) {
+                return result;
+            }
+            throw new Error("No Context Available");
+        },
+        enumerable: false,
+        configurable: true
+    });
+    UtilExtractorCanvas.prototype.getContext = function () {
+        return this._context;
+    };
+    Object.defineProperty(UtilExtractorCanvas.prototype, "resolution", {
+        get: function () {
+            return 1;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(UtilExtractorCanvas.prototype, "width", {
+        get: function () {
+            var element = this._element;
+            if (element != null) {
+                return element.width;
+            }
+            return 0;
+        },
+        set: function (width) {
+            var element = this._element;
+            if (element != null) {
+                element.width = width;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(UtilExtractorCanvas.prototype, "height", {
+        get: function () {
+            var element = this._element;
+            if (element != null) {
+                return element.height;
+            }
+            return 0;
+        },
+        set: function (height) {
+            var element = this._element;
+            if (element != null) {
+                element.height = height;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
+    UtilExtractorCanvas.prototype.clear = function () {
+        var element = this._element;
+        var context = this._context;
+        if (element != null && context != null) {
+            context.setTransform(1, 0, 0, 1, 0, 0);
+            context.clearRect(0, 0, element.width, element.height);
+        }
+    };
+    UtilExtractorCanvas.prototype.resize = function (width, height) {
+        var element = this._element;
+        if (element != null) {
+            element.width = width;
+            element.height = height;
+        }
+    };
+    UtilExtractorCanvas.prototype.destroy = function () {
+        this._context = null;
+        this._element = null;
+    };
+    return UtilExtractorCanvas;
+}());
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
@@ -23637,9 +23746,11 @@ var UtilExtractor = /** @class */ (function () {
     }
     UtilExtractor.toTexture = function (target, resolution, clear, skipUpdateTransform) {
         var scale = target.transform.scale;
+        var width = Math.max(1, Math.ceil(target.width * scale.x));
+        var height = Math.max(1, Math.ceil(target.height * scale.y));
         var result = pixi_js.RenderTexture.create({
-            width: target.width * scale.x,
-            height: target.height * scale.y,
+            width: width,
+            height: height,
             scaleMode: pixi_js.SCALE_MODES.LINEAR,
             resolution: resolution
         });
@@ -23651,46 +23762,68 @@ var UtilExtractor = /** @class */ (function () {
         return result;
     };
     UtilExtractor.toPixels = function (renderTexture, renderer) {
+        var baseTexture = renderTexture.baseTexture;
+        var realWidth = baseTexture.realWidth;
+        var realHeight = baseTexture.realHeight;
         var resolution = renderTexture.resolution;
         var frame = renderTexture.frame;
-        var width = Math.floor(frame.width * resolution);
-        var height = Math.floor(frame.height * resolution);
+        var x0 = Math.floor(frame.x * resolution);
+        var y0 = Math.floor(frame.y * resolution);
+        var x1 = Math.floor((frame.x + frame.width) * resolution);
+        var y1 = Math.floor((frame.y + frame.height) * resolution);
+        var width = Math.min(x1 - x0, realWidth);
+        var height = Math.min(y1 - y0, realHeight);
         var pixels = new Uint8Array(4 * width * height);
-        var oldRenderTexture = renderer.renderTexture.current;
-        renderer.renderTexture.bind(renderTexture);
-        var gl = renderer.gl;
-        gl.readPixels(frame.x * resolution, frame.y * resolution, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
-        renderer.renderTexture.bind(oldRenderTexture);
+        if (0 < width && 0 < height) {
+            var oldRenderTexture = renderer.renderTexture.current;
+            renderer.renderTexture.bind(renderTexture);
+            var gl = renderer.gl;
+            gl.readPixels(x0, y0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
+            renderer.renderTexture.bind(oldRenderTexture);
+        }
         return {
             width: width,
             height: height,
             array: pixels
         };
     };
-    UtilExtractor.toCanvas = function (pixels, scale, ignorePremutipliedAlpha) {
+    UtilExtractor.toCanvas = function (pixels, scale, ignorePremutipliedAlpha, result) {
         var width = pixels.width;
         var height = pixels.height;
         var array = pixels.array;
-        var canvasRenderTarget = new pixi_js.utils.CanvasRenderTarget(width, height, 1);
-        var imageData = canvasRenderTarget.context.getImageData(0, 0, width, height);
+        if (result == null) {
+            result = new UtilExtractorCanvas(width, height);
+        }
+        else {
+            result.resize(width, height);
+        }
+        if (width <= 0 || height <= 0) {
+            return result;
+        }
+        var context = result.getContext();
+        var element = result.getElement();
+        if (context == null || element == null) {
+            return result;
+        }
+        var imageData = context.getImageData(0, 0, width, height);
         if (ignorePremutipliedAlpha) {
             imageData.data.set(array);
         }
         else {
             pixi_js.Extract.arrayPostDivide(array, imageData.data);
         }
-        canvasRenderTarget.context.putImageData(imageData, 0, 0);
+        context.putImageData(imageData, 0, 0);
         // Scale down
         if (scale != null && scale !== 1) {
-            canvasRenderTarget.context.scale(scale, scale);
-            canvasRenderTarget.context.drawImage(canvasRenderTarget.canvas, 0, 0);
+            context.scale(scale, scale);
+            context.drawImage(element, 0, 0);
             var scaledWidth = Math.floor(width * scale);
             var scaledHeight = Math.floor(height * scale);
-            var scaledImageData = canvasRenderTarget.context.getImageData(0, 0, scaledWidth, scaledHeight);
-            canvasRenderTarget.resize(scaledWidth, scaledHeight);
-            canvasRenderTarget.context.putImageData(scaledImageData, 0, 0);
+            var scaledImageData = context.getImageData(0, 0, scaledWidth, scaledHeight);
+            result.resize(scaledWidth, scaledHeight);
+            context.putImageData(scaledImageData, 0, 0);
         }
-        return canvasRenderTarget;
+        return result;
     };
     UtilExtractor.toBase64 = function (canvas, format, quality) {
         return canvas.toDataURL(format, quality);
@@ -23825,8 +23958,15 @@ var UtilExtract = /** @class */ (function () {
         // Create a render texture
         var target = options.target;
         var scale = target.transform.scale;
-        var width = Math.floor(target.width * scale.x);
-        var height = Math.floor(target.height * scale.y);
+        var width = Math.ceil(target.width * scale.x);
+        var height = Math.ceil(target.height * scale.y);
+        if (width <= 0 || height <= 0) {
+            return {
+                width: width,
+                height: height,
+                array: new Uint8Array(0)
+            };
+        }
         var resolution = toResolution(options);
         var renderTexture = UtilExtract.WORK_RENDER_TEXTURE;
         if (renderTexture == null) {
@@ -23874,16 +24014,27 @@ var UtilExtract = /** @class */ (function () {
         var scale = toScale(pixels, options);
         return UtilExtractor.toCanvas(pixels, scale, ignorePremutipliedAlpha);
     };
+    /**
+     * Extracts Base64 data URL from the target.
+     * This method internally creates a render texture and a canvas render target.
+     * They are used to extract pixels from the target.
+     * To free the allocated render texture and canvas render target, please call {@link destroy()}.
+     *
+     * @param options an extraction options
+     * @returns extracted Base64 data URL
+     */
     UtilExtract.base64 = function (options) {
-        var canvas = this.canvas(options);
-        try {
-            return UtilExtractor.toBase64(canvas.canvas, options.format, options.quality);
-        }
-        finally {
-            if (canvas) {
-                canvas.destroy();
-            }
+        var _a, _b, _c;
+        var pixels = this.pixels(options);
+        var ignorePremutipliedAlpha = (_b = (_a = options.alpha) === null || _a === void 0 ? void 0 : _a.premultiplied) === null || _b === void 0 ? void 0 : _b.ignore;
+        var scale = toScale(pixels, options);
+        var canvas = ((_c = this.WORK_CANVAS) !== null && _c !== void 0 ? _c : (this.WORK_CANVAS = new UtilExtractorCanvas(pixels.width, pixels.height)));
+        UtilExtractor.toCanvas(pixels, scale, ignorePremutipliedAlpha, canvas);
+        var element = canvas.getElement();
+        if (element != null) {
+            return UtilExtractor.toBase64(element, options.format, options.quality);
         }
+        return "data:,";
     };
     UtilExtract.file = function (options) {
         UtilFileDownloader.downloadUrl(options.filename, this.base64(options));
@@ -23897,6 +24048,11 @@ var UtilExtract = /** @class */ (function () {
             this.WORK_RENDER_TEXTURE = undefined;
             texture.destroy(true);
         }
+        var canvas = this.WORK_CANVAS;
+        if (canvas != null) {
+            this.WORK_CANVAS = undefined;
+            canvas.destroy();
+        }
     };
     return UtilExtract;
 }());
@@ -34260,8 +34416,16 @@ var DImagePieceImpl = /** @class */ (function () {
                         object.alpha = alpha;
                         result = true;
                     }
+                    if (!object.visible) {
+                        object.visible = true;
+                        result = true;
+                    }
                     return result;
                 }
+                else if (object.visible) {
+                    object.visible = false;
+                    return true;
+                }
             }
         }
         return false;
@@ -57491,6 +57655,10 @@ var DTableState = {
      * Cells of a right-most frozen column.
      */
     FROZEN_END: "FROZEN_END",
+    /**
+     * Rows with data
+     */
+    HAS_DATA: "HAS_DATA",
     /**
      * Header cells of sortable columns.
      */
@@ -57798,16 +57966,27 @@ var loadThemeWhite = function () {
     DThemes.setDefaultThemeClass(DThemeWhite);
 };
 
+var newSvgRoundedRect = function (x, y, width, height, fill, stroke, strokeWidth, strokeOpacity) {
+    var sw = strokeWidth !== null && strokeWidth !== void 0 ? strokeWidth : 0;
+    var o = sw * 0.5;
+    var r = Math.max(0, 3 - o);
+    var w = width - sw - r - r;
+    var h = height - sw - r - r;
+    x += o + r;
+    y += o;
+    return ("<path d=\"M".concat(x, ",").concat(y, " h").concat(w, " a").concat(r, ",").concat(r, " 0 0 1 ").concat(r, ",").concat(r, " v").concat(h, " a").concat(r, ",").concat(r, " 0 0 1 -").concat(r, ",").concat(r, " h-").concat(w, " a").concat(r, ",").concat(r, " 0 0 1 -").concat(r, ",-").concat(r, " v-").concat(h, " a").concat(r, ",").concat(r, " 0 0 1 ").concat(r, ",-").concat(r, "z\" fill=\"").concat(fill, "\"") +
+        (stroke ? " stroke=\"".concat(stroke, "\"") : "") +
+        (strokeWidth != null ? " stroke-width=\"".concat(strokeWidth, "\"") : "") +
+        (strokeOpacity != null ? " stroke-opacity=\"".concat(strokeOpacity, "\"") : "") +
+        " />");
+};
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-// Material Design icons by Google.
-// Apache license version 2.0.
 /* eslint-disable prettier/prettier */
-DThemeWhiteAtlas.add("button_color_sample", 21, 21, "<g transform=\"scale(0.875,0.875)\">" +
-    "<path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\" fill=\"#fff\"/>" +
-    "</g>");
+DThemeWhiteAtlas.add("button_color_sample", 21, 21, newSvgRoundedRect(3, 3, 15, 15, "#fff", "#eee", 1));
 /* eslint-enable prettier/prettier */
 var formatter$j = function (colorAndAlpha) {
     return "#".concat(UtilRgb.toCode(colorAndAlpha.color), " A").concat(colorAndAlpha.alpha.toFixed(2));
@@ -57818,7 +57997,7 @@ var DThemeWhiteButtonColor = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DThemeWhiteButtonColor.prototype.getImageTintColor = function (state) {
-        return null;
+        return 0xffffff;
     };
     DThemeWhiteButtonColor.prototype.getImageSource = function (state) {
         return DThemeWhiteAtlas.mappings.button_color_sample;
@@ -57856,25 +58035,35 @@ var DColorType = {
     STANDARD: 1
 };
 
+var isPatternInjected = false;
+var newSvgRoundedCheckerboard = function (width, height, color1, color2, stroke, strokeWidth, strokeOpacity) {
+    var result = "";
+    if (!isPatternInjected) {
+        isPatternInjected = true;
+        result =
+            "<defs>" +
+                "<pattern id=\"rounded-checkerboard-pattern\" patternUnits=\"userSpaceOnUse\" width=\"18\" height=\"18\">" +
+                "<rect x=\"0\" y=\"0\" width=\"9\" height=\"9\" fill=\"".concat(color1, "\" />") +
+                "<rect x=\"9\" y=\"0\" width=\"9\" height=\"9\" fill=\"".concat(color2, "\" />") +
+                "<rect x=\"0\" y=\"9\" width=\"9\" height=\"9\" fill=\"".concat(color2, "\" />") +
+                "<rect x=\"9\" y=\"9\" width=\"9\" height=\"9\" fill=\"".concat(color1, "\" />") +
+                "</pattern>" +
+                "</defs>";
+    }
+    result += newSvgRoundedRect(0, 0, width, height, "url(#rounded-checkerboard-pattern)", stroke, strokeWidth, strokeOpacity);
+    return result;
+};
+
+var newWhiteSvgRoundedCheckerboard = function (width, height, stroke, strokeWidth, strokeOpacity) {
+    return newSvgRoundedCheckerboard(width, height, "#bfbfbf", "#a5a5a5", stroke, strokeWidth, strokeOpacity);
+};
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var makeCheckerboard$1 = function (width, height) {
-    var LIGHT = "#bfbfbf";
-    var DARK = "#a5a5a5";
-    var result = "<g>";
-    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=\"".concat(9 * iw, "\" y=\"").concat(9 * ih, "\" width=\"9\" height=\"9\" fill=\"").concat(color, "\" />");
-        }
-    }
-    result += "</g>";
-    return result;
-};
 /* eslint-disable prettier/prettier */
-DThemeWhiteAtlas.add("picker_color_main", 236, 164, "<g>" +
+DThemeWhiteAtlas.add("picker_color_main", 234, 162, "<g>" +
     "<linearGradient id=\"fs7w3iusfdnb\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">" +
     "<stop stop-color=\"#FFFFFF\" stop-opacity=\"0\" offset=\"0\"/>" +
     "<stop stop-color=\"#FFFFFF\" stop-opacity=\"1\" offset=\"1\"/>" +
@@ -57883,13 +58072,11 @@ DThemeWhiteAtlas.add("picker_color_main", 236, 164, "<g>" +
     "<stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"0\"/>" +
     "<stop stop-color=\"#000000\" stop-opacity=\"1\" offset=\"1\"/>" +
     "</linearGradient>" +
-    "<rect x=\"0\" y=\"0\" width=\"236\" height=\"164\" fill=\"url(#fs7w3iusfdnb)\" />" +
-    "<rect x=\"0\" y=\"0\" width=\"236\" height=\"164\" fill=\"url(#2rfcfe9874bw)\" />" +
-    "</g>", 1, 1, 234, 162);
-DThemeWhiteAtlas.add("picker_color_main_base", 236, 164, "<g>" +
-    "<rect x=\"0\" y=\"0\" width=\"236\" height=\"164\" fill=\"#fff\" />" +
-    "</g>", 1, 1, 234, 162);
-DThemeWhiteAtlas.add("picker_color_alpha_checkerboard", 234, 18, makeCheckerboard$1(26, 2));
+    newSvgRoundedRect(0, 0, 234, 162, "url(#fs7w3iusfdnb)") +
+    newSvgRoundedRect(0, 0, 234, 162, "url(#2rfcfe9874bw)") +
+    "</g>");
+DThemeWhiteAtlas.add("picker_color_main_base", 234, 162, "<rect x=\"0\" y=\"0\" width=\"236\" height=\"164\" fill=\"#fff\" />");
+DThemeWhiteAtlas.add("picker_color_alpha_checkerboard", 234, 18, newWhiteSvgRoundedCheckerboard(234, 18));
 DThemeWhiteAtlas.add("picker_color_alpha", 234, 18, "<g>" +
     "<linearGradient id=\"s48afbuh44\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">" +
     "<stop stop-color=\"#FFFFFF\" stop-opacity=\"0\" offset=\"0\"/>" +
@@ -57907,20 +58094,15 @@ DThemeWhiteAtlas.add("picker_color_base", 234, 18, "<g>" +
     "<stop stop-color=\"#FF00FF\" offset=\"0.833\"/>" +
     "<stop stop-color=\"#FF0000\" offset=\"1\"/>" +
     "</linearGradient>" +
-    "<rect x=\"0\" y=\"0\" width=\"234\" height=\"18\" fill=\"url(#ni2rbisdf3)\" />" +
+    newSvgRoundedRect(0, 0, 234, 18, "url(#ni2rbisdf3)") +
     "</g>");
 DThemeWhiteAtlas.add("picker_color_base_pointer", 16.2, 31.8, "<rect x=\"4.5\" y=\"4.5\" width=\"7.2\" height=\"22.8\" stroke=\"#5f5f5f\" stroke-width=\"2.4\" fill=\"none\" />");
 DThemeWhiteAtlas.add("picker_color_pointer", 25.8, 25.8, "<circle cx=\"12.9\" cy=\"12.9\" r=\"4.8\" stroke=\"#5f5f5f\" stroke-width=\"2.4\" fill=\"none\" />" +
     "<circle cx=\"12.9\" cy=\"12.9\" r=\"7.2\" stroke=\"#ffffff\" stroke-width=\"2.4\" fill=\"none\" />");
-DThemeWhiteAtlas.add("picker_color_recent_checkerboard", 36, 36, makeCheckerboard$1(4, 4), 9, 9, 18, 18);
-DThemeWhiteAtlas.add("picker_color_recent", 36, 36, "<g>" +
-    "<rect x=\"0\" y=\"0\" width=\"36\" height=\"36\" fill=\"#fff\" />" +
-    "<path x=\"0\" y=\"0\" d=\"M9 9 h18 v18 h-18 v-18 m1 1 v16 h16 v-16 h-16 z\" fill=\"#eee\" />" +
-    "</g>", 9, 9, 18, 18);
-DThemeWhiteAtlas.add("picker_color_sample_checkerboard", 45, 63, makeCheckerboard$1(5, 7));
-DThemeWhiteAtlas.add("picker_color_sample", 47, 65, "<g>" +
-    "<rect x=\"0\" y=\"0\" width=\"47\" height=\"65\" fill=\"#fff\" />" +
-    "</g>", 1, 1, 45, 63);
+DThemeWhiteAtlas.add("picker_color_recent_checkerboard", 18, 18, newWhiteSvgRoundedCheckerboard(18, 18));
+DThemeWhiteAtlas.add("picker_color_recent", 18, 18, newSvgRoundedRect(0, 0, 18, 18, "#fff", "#eee", 1));
+DThemeWhiteAtlas.add("picker_color_sample_checkerboard", 42, 66, newWhiteSvgRoundedCheckerboard(42, 66, "#fff", 1, 0));
+DThemeWhiteAtlas.add("picker_color_sample", 42, 66, newSvgRoundedRect(0, 0, 42, 66, "#fff", "#eee", 1));
 DThemeWhiteAtlas.add("picker_color_anchor_outlined", 25.8, 25.8, "<circle cx=\"12.9\" cy=\"12.9\" r=\"8.4\" stroke=\"none\" fill=\"#ffffff\" />" +
     "<circle cx=\"12.9\" cy=\"12.9\" r=\"9.6\" stroke=\"#5f5f5f\" stroke-width=\"2.4\" fill=\"none\" />");
 DThemeWhiteAtlas.add("picker_color_anchor", 28.2, 28.2, "<circle cx=\"14.1\" cy=\"14.1\" r=\"6\" stroke=\"none\" fill=\"#ffffff\" />" +
@@ -57928,9 +58110,7 @@ DThemeWhiteAtlas.add("picker_color_anchor", 28.2, 28.2, "<circle cx=\"14.1\" cy=
 DThemeWhiteAtlas.add("picker_color_direction", 12, 30, "<path d=\"M0.6 25.8 L 12.0375 5.9895\" stroke=\"#5f5f5f\" stroke-width=\"1.2\" fill=\"none\" />" +
     "<path d=\"M8.5125 25.8 A 8.475 8.475 0 0 0 4.275 18.4605\" stroke=\"#5f5f5f\" stroke-width=\"1.2\" fill=\"none\" />" +
     "<rect x=\"0.6\" y=\"24.6\" width=\"11.4375\" height=\"1.2\" rx=\"0.6\" ry=\"0.6\" stroke=\"none\" fill=\"#5f5f5f\" />");
-DThemeWhiteAtlas.add("picker_color_standard", 18, 18, "<g>" +
-    "<rect x=\"0\" y=\"0\" width=\"18\" height=\"18\" fill=\"#fff\" stroke-width=\"1\" stroke=\"#eee\" />" +
-    "</g>");
+DThemeWhiteAtlas.add("picker_color_standard", 18, 18, newSvgRoundedRect(0, 0, 18, 18, "#fff", "#eee", 1));
 /* eslint-enable prettier/prettier */
 var DThemeWhitePickerColor = /** @class */ (function (_super) {
     __extends(DThemeWhitePickerColor, _super);
@@ -58022,7 +58202,16 @@ var DThemeWhitePickerColor = /** @class */ (function (_super) {
         return this.getBaseMargin();
     };
     DThemeWhitePickerColor.prototype.getInputLabelWidth = function () {
-        return 15;
+        return 18;
+    };
+    DThemeWhitePickerColor.prototype.getSampleWidth = function () {
+        return 42;
+    };
+    DThemeWhitePickerColor.prototype.getSampleHeight = function () {
+        return 66;
+    };
+    DThemeWhitePickerColor.prototype.getSampleMargin = function () {
+        return this.getBaseMargin();
     };
     DThemeWhitePickerColor.prototype.getSampleCheckerboardOldTexture = function () {
         return DThemeWhiteAtlas.mappings.picker_color_sample_checkerboard;
@@ -58436,12 +58625,8 @@ var DColorGradientObservable = /** @class */ (function (_super) {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-// Material Design icons by Google.
-// Apache license version 2.0.
 /* eslint-disable prettier/prettier */
-DThemeWhiteAtlas.add("button_color_gradient_sample", 21, 21, "<g transform=\"scale(0.875,0.875)\">" +
-    "<path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\" fill=\"#fff\"/>" +
-    "</g>");
+DThemeWhiteAtlas.add("button_color_gradient_sample", 21, 21, newSvgRoundedRect(3, 3, 15, 15, "#fff", "#eee", 1));
 /* eslint-enable prettier/prettier */
 var formatter$i = function () {
     return "";
@@ -60622,8 +60807,13 @@ var DThemeWhiteTableBodyCells = /** @class */ (function () {
         return DThemeWhiteConstants.COLOR;
     };
     DThemeWhiteTableBodyCells.getAlpha = function (state) {
-        if (state.inEnabled) {
-            return 1.0;
+        if (state.in(DTableState.HAS_DATA)) {
+            if (state.inEnabled) {
+                return 1.0;
+            }
+            else {
+                return 0.5;
+            }
         }
         return 0;
     };
@@ -68809,12 +68999,8 @@ var loadThemeDark = function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-// Material Design icons by Google.
-// Apache license version 2.0.
 /* eslint-disable prettier/prettier */
-DThemeDarkAtlas.add("button_color_sample", 21, 21, "<g transform=\"scale(0.875,0.875)\">" +
-    "<path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\" fill=\"#fff\"/>" +
-    "</g>");
+DThemeDarkAtlas.add("button_color_sample", 21, 21, newSvgRoundedRect(3, 3, 15, 15, "#fff", "#eee", 1));
 /* eslint-enable prettier/prettier */
 var formatter$8 = function (colorAndAlpha) {
     return "#".concat(UtilRgb.toCode(colorAndAlpha.color), " A").concat(colorAndAlpha.alpha.toFixed(2));
@@ -68825,7 +69011,7 @@ var DThemeDarkButtonColor = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     DThemeDarkButtonColor.prototype.getImageTintColor = function (state) {
-        return null;
+        return 0xffffff;
     };
     DThemeDarkButtonColor.prototype.getImageSource = function (state) {
         return DThemeDarkAtlas.mappings.button_color_sample;
@@ -68854,25 +69040,16 @@ var DThemeDarkDialogColor = /** @class */ (function (_super) {
     return DThemeDarkDialogColor;
 }(DThemeDarkDialogFitted));
 
+var newDarkSvgRoundedCheckerboard = function (width, height, stroke, strokeWidth, strokeOpacity) {
+    return newSvgRoundedCheckerboard(width, height, "#5f5f5f", "#454545", stroke, strokeWidth, strokeOpacity);
+};
+
 /*
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-var makeCheckerboard = function (width, height) {
-    var LIGHT = "#5f5f5f";
-    var DARK = "#454545";
-    var result = "<g>";
-    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=\"".concat(9 * iw, "\" y=\"").concat(9 * ih, "\" width=\"9\" height=\"9\" fill=\"").concat(color, "\" />");
-        }
-    }
-    result += "</g>";
-    return result;
-};
 /* eslint-disable prettier/prettier */
-DThemeDarkAtlas.add("picker_color_main", 236, 164, "<g>" +
+DThemeDarkAtlas.add("picker_color_main", 234, 162, "<g>" +
     "<linearGradient id=\"fs7w3iusfdnb\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">" +
     "<stop stop-color=\"#FFFFFF\" stop-opacity=\"0\" offset=\"0\"/>" +
     "<stop stop-color=\"#FFFFFF\" stop-opacity=\"1\" offset=\"1\"/>" +
@@ -68881,13 +69058,11 @@ DThemeDarkAtlas.add("picker_color_main", 236, 164, "<g>" +
     "<stop stop-color=\"#000000\" stop-opacity=\"0\" offset=\"0\"/>" +
     "<stop stop-color=\"#000000\" stop-opacity=\"1\" offset=\"1\"/>" +
     "</linearGradient>" +
-    "<rect x=\"0\" y=\"0\" width=\"236\" height=\"164\" fill=\"url(#fs7w3iusfdnb)\" />" +
-    "<rect x=\"0\" y=\"0\" width=\"236\" height=\"164\" fill=\"url(#2rfcfe9874bw)\" />" +
-    "</g>", 1, 1, 234, 162);
-DThemeDarkAtlas.add("picker_color_main_base", 236, 164, "<g>" +
-    "<rect x=\"0\" y=\"0\" width=\"236\" height=\"164\" fill=\"#fff\" />" +
-    "</g>", 1, 1, 234, 162);
-DThemeDarkAtlas.add("picker_color_alpha_checkerboard", 234, 18, makeCheckerboard(26, 2));
+    newSvgRoundedRect(0, 0, 234, 162, "url(#fs7w3iusfdnb)") +
+    newSvgRoundedRect(0, 0, 234, 162, "url(#2rfcfe9874bw)") +
+    "</g>");
+DThemeDarkAtlas.add("picker_color_main_base", 234, 162, "<rect x=\"0\" y=\"0\" width=\"236\" height=\"164\" fill=\"#fff\" />");
+DThemeDarkAtlas.add("picker_color_alpha_checkerboard", 234, 18, newDarkSvgRoundedCheckerboard(234, 18));
 DThemeDarkAtlas.add("picker_color_alpha", 234, 18, "<g>" +
     "<linearGradient id=\"s48afbuh44\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">" +
     "<stop stop-color=\"#FFFFFF\" stop-opacity=\"0\" offset=\"0\"/>" +
@@ -68905,20 +69080,15 @@ DThemeDarkAtlas.add("picker_color_base", 234, 18, "<g>" +
     "<stop stop-color=\"#FF00FF\" offset=\"0.833\"/>" +
     "<stop stop-color=\"#FF0000\" offset=\"1\"/>" +
     "</linearGradient>" +
-    "<rect x=\"0\" y=\"0\" width=\"234\" height=\"18\" fill=\"url(#ni2rbisdf3)\" />" +
+    newSvgRoundedRect(0, 0, 234, 18, "url(#ni2rbisdf3)") +
     "</g>");
 DThemeDarkAtlas.add("picker_color_base_pointer", 16.2, 31.8, "<rect x=\"4.5\" y=\"4.5\" width=\"7.2\" height=\"22.8\" stroke=\"#ffffff\" stroke-width=\"2.4\" fill=\"none\" />");
 DThemeDarkAtlas.add("picker_color_pointer", 25.8, 25.8, "<circle cx=\"12.9\" cy=\"12.9\" r=\"4.8\" stroke=\"#5f5f5f\" stroke-width=\"2.4\" fill=\"none\" />" +
     "<circle cx=\"12.9\" cy=\"12.9\" r=\"7.2\" stroke=\"#ffffff\" stroke-width=\"2.4\" fill=\"none\" />");
-DThemeDarkAtlas.add("picker_color_recent_checkerboard", 36, 36, makeCheckerboard(4, 4), 9, 9, 18, 18);
-DThemeDarkAtlas.add("picker_color_recent", 36, 36, "<g>" +
-    "<rect x=\"0\" y=\"0\" width=\"36\" height=\"36\" fill=\"#fff\" />" +
-    "<path x=\"0\" y=\"0\" d=\"M9 9 h18 v18 h-18 v-18 m1 1 v16 h16 v-16 h-16 z\" fill=\"#eee\" />" +
-    "</g>", 9, 9, 18, 18);
-DThemeDarkAtlas.add("picker_color_sample_checkerboard", 45, 63, makeCheckerboard(5, 7));
-DThemeDarkAtlas.add("picker_color_sample", 47, 65, "<g>" +
-    "<rect x=\"0\" y=\"0\" width=\"47\" height=\"65\" fill=\"#fff\" />" +
-    "</g>", 1, 1, 45, 63);
+DThemeDarkAtlas.add("picker_color_recent_checkerboard", 18, 18, newDarkSvgRoundedCheckerboard(18, 18));
+DThemeDarkAtlas.add("picker_color_recent", 18, 18, newSvgRoundedRect(0, 0, 18, 18, "#fff", "#eee", 1));
+DThemeDarkAtlas.add("picker_color_sample_checkerboard", 42, 66, newDarkSvgRoundedCheckerboard(42, 66, "#fff", 1, 0));
+DThemeDarkAtlas.add("picker_color_sample", 42, 66, newSvgRoundedRect(0, 0, 42, 66, "#fff", "#eee", 1));
 DThemeDarkAtlas.add("picker_color_anchor_outlined", 25.8, 25.8, "<circle cx=\"12.9\" cy=\"12.9\" r=\"8.4\" stroke=\"none\" fill=\"#ffffff\" />" +
     "<circle cx=\"12.9\" cy=\"12.9\" r=\"9.6\" stroke=\"#5f5f5f\" stroke-width=\"2.4\" fill=\"none\" />");
 DThemeDarkAtlas.add("picker_color_anchor", 28.2, 28.2, "<circle cx=\"14.1\" cy=\"14.1\" r=\"6\" stroke=\"none\" fill=\"#ffffff\" />" +
@@ -68926,9 +69096,7 @@ DThemeDarkAtlas.add("picker_color_anchor", 28.2, 28.2, "<circle cx=\"14.1\" cy=\
 DThemeDarkAtlas.add("picker_color_direction", 12, 30, "<path d=\"M0.6 25.8 L 12.0375 5.9895\" stroke=\"#5f5f5f\" stroke-width=\"1.2\" fill=\"none\" />" +
     "<path d=\"M8.5125 25.8 A 8.475 8.475 0 0 0 4.275 18.4605\" stroke=\"#5f5f5f\" stroke-width=\"1.2\" fill=\"none\" />" +
     "<rect x=\"0.6\" y=\"24.6\" width=\"11.4375\" height=\"1.2\" rx=\"0.6\" ry=\"0.6\" stroke=\"none\" fill=\"#5f5f5f\" />");
-DThemeDarkAtlas.add("picker_color_standard", 18, 18, "<g>" +
-    "<rect x=\"0\" y=\"0\" width=\"18\" height=\"18\" fill=\"#fff\" stroke-width=\"1\" stroke=\"#eee\" />" +
-    "</g>");
+DThemeDarkAtlas.add("picker_color_standard", 18, 18, newSvgRoundedRect(0, 0, 18, 18, "#fff", "#eee", 1));
 /* eslint-enable prettier/prettier */
 var DThemeDarkPickerColor = /** @class */ (function (_super) {
     __extends(DThemeDarkPickerColor, _super);
@@ -69020,7 +69188,16 @@ var DThemeDarkPickerColor = /** @class */ (function (_super) {
         return this.getBaseMargin();
     };
     DThemeDarkPickerColor.prototype.getInputLabelWidth = function () {
-        return 15;
+        return 18;
+    };
+    DThemeDarkPickerColor.prototype.getSampleWidth = function () {
+        return 42;
+    };
+    DThemeDarkPickerColor.prototype.getSampleHeight = function () {
+        return 66;
+    };
+    DThemeDarkPickerColor.prototype.getSampleMargin = function () {
+        return this.getBaseMargin();
     };
     DThemeDarkPickerColor.prototype.getSampleCheckerboardOldTexture = function () {
         return DThemeDarkAtlas.mappings.picker_color_sample_checkerboard;
@@ -69115,12 +69292,8 @@ var loadThemeDarkEnUsButtonColor = function () {
  * Copyright (C) 2019 Toshiba Corporation
  * SPDX-License-Identifier: Apache-2.0
  */
-// Material Design icons by Google.
-// Apache license version 2.0.
 /* eslint-disable prettier/prettier */
-DThemeDarkAtlas.add("button_color_gradient_sample", 21, 21, "<g transform=\"scale(0.875,0.875)\">" +
-    "<path d=\"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z\" fill=\"#fff\"/>" +
-    "</g>");
+DThemeDarkAtlas.add("button_color_gradient_sample", 21, 21, newSvgRoundedRect(3, 3, 15, 15, "#fff", "#eee", 1));
 /* eslint-enable prettier/prettier */
 var formatter$7 = function () {
     return "";
@@ -71203,8 +71376,13 @@ var DThemeDarkTableBodyCells = /** @class */ (function () {
         return DThemeDarkConstants.COLOR;
     };
     DThemeDarkTableBodyCells.getAlpha = function (state) {
-        if (state.inEnabled) {
-            return 1.0;
+        if (state.in(DTableState.HAS_DATA)) {
+            if (state.inEnabled) {
+                return 1.0;
+            }
+            else {
+                return 0.5;
+            }
         }
         return 0;
     };
@@ -77361,10 +77539,11 @@ var DPickerColor = /** @class */ (function (_super) {
         });
         this._inputAndLabelAlpha = inputAndLabelAlpha;
         // Samples
-        var sampleWidth = (inputWidth - inputLabelWidth - inputMargin) * 0.5;
-        var sampleHeight = inputHeight + inputMargin + inputHeight;
+        var sampleWidth = theme.getSampleWidth();
+        var sampleHeight = theme.getSampleHeight();
         var sampleX = paddingLeft + (mainWidth - inputMargin) * 0.5 + inputMargin;
         var sampleY = inputY + (inputHeight + inputMargin + inputAndLabelAlpha.height - sampleHeight) * 0.5;
+        var sampleMargin = theme.getSampleMargin();
         var sampleCurrentCheckerboardSprite = new pixi_js.Sprite(theme.getSampleCheckerboardOldTexture());
         this._sampleCurrentCheckerboardSprite = sampleCurrentCheckerboardSprite;
         sampleCurrentCheckerboardSprite.x = sampleX;
@@ -77391,7 +77570,7 @@ var DPickerColor = /** @class */ (function (_super) {
         this.addChild(sampleCurrentSprite);
         var sampleNewCheckerboardSprite = new pixi_js.Sprite(theme.getSampleCheckerboardNewTexture());
         this._sampleNewCheckerboardSprite = sampleNewCheckerboardSprite;
-        sampleNewCheckerboardSprite.x = sampleX + sampleWidth;
+        sampleNewCheckerboardSprite.x = sampleX + sampleWidth + sampleMargin;
         sampleNewCheckerboardSprite.y = sampleY;
         sampleNewCheckerboardSprite.width = sampleWidth;
         sampleNewCheckerboardSprite.height = sampleHeight;
@@ -77399,7 +77578,7 @@ var DPickerColor = /** @class */ (function (_super) {
         this.addChild(sampleNewCheckerboardSprite);
         var sampleNewSprite = new pixi_js.Sprite(theme.getSampleNewTexture());
         this._sampleNewSprite = sampleNewSprite;
-        sampleNewSprite.x = sampleX + sampleWidth;
+        sampleNewSprite.x = sampleX + sampleWidth + sampleMargin;
         sampleNewSprite.y = sampleY;
         sampleNewSprite.tint = this._new.color;
         sampleNewSprite.alpha = this._new.alpha;
@@ -96683,6 +96862,7 @@ var DTableBody = /** @class */ (function (_super) {
             // State
             var rowState = row.state;
             rowState.lock();
+            rowState.add(DTableState.HAS_DATA);
             rowState.set(DTableState.SELECTABLE, isRowSelectable);
             rowState.set(DBaseState.ACTIVE, selection.contains(unmappedIndex));
             rowState.remove(DBaseState.DISABLED);
@@ -96698,7 +96878,7 @@ var DTableBody = /** @class */ (function (_super) {
             var rowState = row.state;
             rowState.lock();
             rowState.add(DBaseState.DISABLED);
-            rowState.removeAll(DTableState.SELECTABLE, DBaseState.ACTIVE);
+            rowState.removeAll(DTableState.HAS_DATA, DTableState.SELECTABLE, DBaseState.ACTIVE);
             rowState.unlock();
             // Data
             row.unset();
@@ -96711,7 +96891,7 @@ var DTableBody = /** @class */ (function (_super) {
             var rowState = row.state;
             rowState.lock();
             rowState.add(DBaseState.DISABLED);
-            rowState.removeAll(DTableState.SELECTABLE, DBaseState.ACTIVE);
+            rowState.removeAll(DTableState.HAS_DATA, DTableState.SELECTABLE, DBaseState.ACTIVE);
             rowState.unlock();
             // Data
             row.unset();
@@ -102973,6 +103153,7 @@ exports.UtilClickOutside = UtilClickOutside;
 exports.UtilClipboard = UtilClipboard;
 exports.UtilExtract = UtilExtract;
 exports.UtilExtractor = UtilExtractor;
+exports.UtilExtractorCanvas = UtilExtractorCanvas;
 exports.UtilFileAs = UtilFileAs;
 exports.UtilFileDownloader = UtilFileDownloader;
 exports.UtilFileOpener = UtilFileOpener;