@wcardinal/wcardinal-ui 0.398.0 → 0.400.0

package/dist/wcardinal-ui.js

@@ -1,5 +1,5 @@
 /*
- Winter Cardinal UI v0.398.0
+ Winter Cardinal UI v0.400.0
  Copyright (C) 2019 Toshiba Corporation
  SPDX-License-Identifier: Apache-2.0
 
@@ -2671,6 +2671,7 @@
         GESTURING: "GESTURING",
         PRESSED: "PRESSED",
         INVALID: "INVALID",
+        PROCESSING: "PROCESSING",
         SUCCEEDED: "SUCCEEDED",
         FAILED: "FAILED",
         WARNED: "WARNED",
@@ -3735,6 +3736,37 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DBaseStateSetImpl.prototype, "isProcessing", {
+            get: function () {
+                return this.is(DBaseState.PROCESSING);
+            },
+            set: function (processing) {
+                this.set(DBaseState.PROCESSING, processing);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DBaseStateSetImpl.prototype, "inProcessing", {
+            get: function () {
+                return this.in(DBaseState.PROCESSING);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DBaseStateSetImpl.prototype, "onProcessing", {
+            get: function () {
+                return this.on(DBaseState.PROCESSING);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DBaseStateSetImpl.prototype, "underProcessing", {
+            get: function () {
+                return this.under(DBaseState.PROCESSING);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DBaseStateSetImpl.prototype, "isSucceeded", {
             get: function () {
                 return this.is(DBaseState.SUCCEEDED);
@@ -14822,11 +14854,35 @@
                 for (var i = 0, imax = children.length; i < imax; ++i) {
                     var child = children[i];
                     if (child.visible) {
-                        if (this.hasRefitableWidth(child)) {
-                            width = Math.max(width, child.x + child.width);
-                        }
-                        if (this.hasRefitableHeight(child)) {
-                            height = Math.max(height, child.y + child.height);
+                        var rw = this.hasRefitableWidth(child);
+                        var rh = this.hasRefitableHeight(child);
+                        if (rw || rh) {
+                            if (child instanceof DBase) {
+                                if (rw) {
+                                    width = Math.max(width, child.x + child.width);
+                                }
+                                if (rh) {
+                                    height = Math.max(height, child.y + child.height);
+                                }
+                            }
+                            else if (child instanceof pixi_js.Container) {
+                                var bound = child.getLocalBounds(undefined, true);
+                                if (rw) {
+                                    width = Math.max(width, child.x + bound.x + bound.width);
+                                }
+                                if (rh) {
+                                    height = Math.max(height, child.y + bound.y + bound.height);
+                                }
+                            }
+                            else {
+                                var bound = child.getLocalBounds();
+                                if (rw) {
+                                    width = Math.max(width, child.x + bound.x + bound.width);
+                                }
+                                if (rh) {
+                                    height = Math.max(height, child.y + bound.y + bound.height);
+                                }
+                            }
                         }
                     }
                 }
@@ -14839,7 +14895,17 @@
                 for (var i = 0, imax = children.length; i < imax; ++i) {
                     var child = children[i];
                     if (child.visible && this.hasRefitableWidth(child)) {
-                        width = Math.max(width, child.x + child.width);
+                        if (child instanceof DBase) {
+                            width = Math.max(width, child.x + child.width);
+                        }
+                        else if (child instanceof pixi_js.Container) {
+                            var bound = child.getLocalBounds(undefined, true);
+                            width = Math.max(width, child.x + bound.x + bound.width);
+                        }
+                        else {
+                            var bound = child.getLocalBounds();
+                            width = Math.max(width, child.x + bound.x + bound.width);
+                        }
                     }
                 }
                 this.resize(width + this.padding.getRight(), undefined);
@@ -14850,7 +14916,17 @@
                 for (var i = 0, imax = children.length; i < imax; ++i) {
                     var child = children[i];
                     if (child.visible && this.hasRefitableHeight(child)) {
-                        height = Math.max(height, child.y + child.height);
+                        if (child instanceof DBase) {
+                            height = Math.max(height, child.y + child.height);
+                        }
+                        else if (child instanceof pixi_js.Container) {
+                            var bound = child.getLocalBounds(undefined, true);
+                            height = Math.max(height, child.y + bound.y + bound.height);
+                        }
+                        else {
+                            var bound = child.getLocalBounds();
+                            height = Math.max(height, child.y + bound.y + bound.height);
+                        }
                     }
                 }
                 this.resize(undefined, height + this.padding.getBottom());
@@ -14859,9 +14935,21 @@
         DBase.prototype.isRefitable = function (target) {
             return target instanceof DBase;
         };
+        /**
+         * Returns true if the given target has a height that doesn't depend on its parent height.
+         *
+         * @param target a target
+         * @returns true if the given target has a height that doesn't depend on its parent height.
+         */
         DBase.prototype.hasRefitableHeight = function (target) {
             return (this.isRefitable(target) && !(target instanceof DBase && isFunction(target.getHeight())));
         };
+        /**
+         * Returns true if the given target has a width that doesn't depend on its parent width.
+         *
+         * @param target a target
+         * @returns true if the given target has a width that doesn't depend on its parent width.
+         */
         DBase.prototype.hasRefitableWidth = function (target) {
             return (this.isRefitable(target) && !(target instanceof DBase && isFunction(target.getWidth())));
         };
@@ -27569,67 +27657,15 @@
         DOUBLE_CLICKED: 1
     };
 
-    var DImageBaseThemeWrapperSecondary = /** @class */ (function () {
-        function DImageBaseThemeWrapperSecondary(theme) {
-            this._theme = theme;
-        }
-        DImageBaseThemeWrapperSecondary.prototype.getImageAlignHorizontal = function () {
-            return this._theme.getSecondaryImageAlignHorizontal();
-        };
-        DImageBaseThemeWrapperSecondary.prototype.getImageAlignVertical = function () {
-            return this._theme.getSecondaryImageAlignVertical();
-        };
-        DImageBaseThemeWrapperSecondary.prototype.getImageAlignWith = function () {
-            return this._theme.getSecondaryImageAlignWith();
-        };
-        DImageBaseThemeWrapperSecondary.prototype.getImageMarginHorizontal = function () {
-            return this._theme.getSecondaryImageMarginHorizontal();
-        };
-        DImageBaseThemeWrapperSecondary.prototype.getImageMarginVertial = function () {
-            return this._theme.getSecondaryImageMarginVertial();
-        };
-        DImageBaseThemeWrapperSecondary.prototype.getImageTintColor = function (state) {
-            return this._theme.getSecondaryImageTintColor(state);
-        };
-        DImageBaseThemeWrapperSecondary.prototype.getImageTintAlpha = function (state) {
-            return this._theme.getSecondaryImageTintAlpha(state);
-        };
-        DImageBaseThemeWrapperSecondary.prototype.getImageSource = function (state) {
-            return this._theme.getSecondaryImageSource(state);
-        };
-        return DImageBaseThemeWrapperSecondary;
-    }());
-
-    var DImageBaseThemeWrapperTertiary = /** @class */ (function () {
-        function DImageBaseThemeWrapperTertiary(theme) {
-            this._theme = theme;
-        }
-        DImageBaseThemeWrapperTertiary.prototype.getImageAlignHorizontal = function () {
-            return this._theme.getTertiaryImageAlignHorizontal();
-        };
-        DImageBaseThemeWrapperTertiary.prototype.getImageAlignVertical = function () {
-            return this._theme.getTertiaryImageAlignVertical();
-        };
-        DImageBaseThemeWrapperTertiary.prototype.getImageAlignWith = function () {
-            return this._theme.getTertiaryImageAlignWith();
-        };
-        DImageBaseThemeWrapperTertiary.prototype.getImageMarginHorizontal = function () {
-            return this._theme.getTertiaryImageMarginHorizontal();
-        };
-        DImageBaseThemeWrapperTertiary.prototype.getImageMarginVertial = function () {
-            return this._theme.getTertiaryImageMarginVertial();
-        };
-        DImageBaseThemeWrapperTertiary.prototype.getImageTintColor = function (state) {
-            return this._theme.getTertiaryImageTintColor(state);
-        };
-        DImageBaseThemeWrapperTertiary.prototype.getImageTintAlpha = function (state) {
-            return this._theme.getTertiaryImageTintAlpha(state);
-        };
-        DImageBaseThemeWrapperTertiary.prototype.getImageSource = function (state) {
-            return this._theme.getTertiaryImageSource(state);
-        };
-        return DImageBaseThemeWrapperTertiary;
-    }());
+    /*
+     * Copyright (C) 2019 Toshiba Corporation
+     * SPDX-License-Identifier: Apache-2.0
+     */
+    var DAlignWith = {
+        TEXT: 0,
+        PADDING: 1,
+        BORDER: 2
+    };
 
     /*
      * Copyright (C) 2019 Toshiba Corporation
@@ -27651,314 +27687,20 @@
         BOTTOM: 2
     };
 
-    /*
-     * Copyright (C) 2019 Toshiba Corporation
-     * SPDX-License-Identifier: Apache-2.0
-     */
-    var DAlignWith = {
-        TEXT: 0,
-        PADDING: 1,
-        BORDER: 2
-    };
-
-    var toImageAlign = function (theme, options) {
-        var _a, _b, _c;
-        var align = options === null || options === void 0 ? void 0 : options.align;
-        return {
-            with: toEnum((_a = align === null || align === void 0 ? void 0 : align.with) !== null && _a !== void 0 ? _a : theme.getImageAlignWith(), DAlignWith),
-            vertical: toEnum((_b = align === null || align === void 0 ? void 0 : align.vertical) !== null && _b !== void 0 ? _b : theme.getImageAlignVertical(), DAlignVertical),
-            horizontal: toEnum((_c = align === null || align === void 0 ? void 0 : align.horizontal) !== null && _c !== void 0 ? _c : theme.getImageAlignHorizontal(), DAlignHorizontal)
-        };
-    };
-    var toImageMargin = function (theme, options) {
-        var _a, _b;
-        var margin = options === null || options === void 0 ? void 0 : options.margin;
-        return {
-            vertical: (_a = margin === null || margin === void 0 ? void 0 : margin.vertical) !== null && _a !== void 0 ? _a : theme.getImageMarginVertial(),
-            horizontal: (_b = margin === null || margin === void 0 ? void 0 : margin.horizontal) !== null && _b !== void 0 ? _b : theme.getImageMarginHorizontal()
-        };
-    };
-    var DImagePiece = /** @class */ (function () {
-        function DImagePiece(parent, theme, textAlign, options) {
-            var _this = this;
-            this._parent = parent;
-            this._theme = theme;
-            this._textAlign = textAlign;
-            this._image = null;
-            this._align = toImageAlign(theme, options);
-            this._margin = toImageMargin(theme, options);
-            this._tint = options === null || options === void 0 ? void 0 : options.tint;
-            this._bound = new pixi_js.Rectangle();
-            this._source = options === null || options === void 0 ? void 0 : options.source;
-            this._computed = null;
-            this._onUpdateBound = function () {
-                _this.onUpdate();
-            };
-        }
-        Object.defineProperty(DImagePiece.prototype, "image", {
-            get: function () {
-                return this._image;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DImagePiece.prototype, "align", {
-            get: function () {
-                return this._align;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DImagePiece.prototype, "margin", {
-            get: function () {
-                return this._margin;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DImagePiece.prototype, "bound", {
-            get: function () {
-                return this._bound;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(DImagePiece.prototype, "source", {
-            get: function () {
-                return this._source;
-            },
-            set: function (source) {
-                if (this._source !== source) {
-                    this._source = source;
-                    this.onUpdate();
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        DImagePiece.prototype.computeSource = function () {
-            var source = this._source;
-            if (source !== undefined) {
-                if (isFunction(source)) {
-                    var result = source(this._parent.state);
-                    if (result !== undefined) {
-                        return result;
-                    }
-                }
-                else {
-                    return source;
-                }
-            }
-            return this._theme.getImageSource(this._parent.state);
-        };
-        DImagePiece.prototype.onStateChange = function (newState, oldState) {
-            this.updateTint();
-        };
-        DImagePiece.prototype.updateBound = function () {
-            var bound = this._bound;
-            var image = this._image;
-            if (image != null) {
-                image.updateTransform();
-                image.getLocalBounds(bound);
-                var bl = bound.left;
-                var bt = bound.top;
-                var br = bound.right;
-                var bb = bound.bottom;
-                var localTransform = image.localTransform;
-                var a = localTransform.a;
-                var b = localTransform.b;
-                var c = localTransform.c;
-                var d = localTransform.d;
-                var x0 = a * bl + c * bt;
-                var y0 = b * bl + d * bt;
-                var x1 = a * br + c * bt;
-                var y1 = b * br + d * bt;
-                var x2 = a * br + c * bb;
-                var y2 = b * br + d * bb;
-                var x3 = a * bl + c * bb;
-                var y3 = b * bl + d * bb;
-                var xmin = Math.min(x0, x1, x2, x3);
-                var xmax = Math.max(x0, x1, x2, x3);
-                var ymin = Math.min(y0, y1, y2, y3);
-                var ymax = Math.max(y0, y1, y2, y3);
-                bound.x = xmin + localTransform.tx;
-                bound.y = ymin + localTransform.ty;
-                bound.width = xmax - xmin;
-                bound.height = ymax - ymin;
-            }
-            else {
-                bound.x = 0;
-                bound.y = 0;
-                bound.width = 0;
-                bound.height = 0;
-            }
-        };
-        DImagePiece.prototype.isTintAware = function (target) {
-            return target != null && "tint" in target;
-        };
-        DImagePiece.prototype.toTintColor = function (theme, state) {
-            var tint = this._tint;
-            if (tint) {
-                var color = tint.color;
-                if (color !== undefined) {
-                    if (isFunction(color)) {
-                        var result = color(state);
-                        if (result !== undefined) {
-                            return result;
-                        }
-                    }
-                    else {
-                        return color;
-                    }
-                }
-            }
-            return theme.getImageTintColor(state);
-        };
-        DImagePiece.prototype.toTintAlpha = function (theme, state) {
-            var tint = this._tint;
-            if (tint) {
-                var alpha = tint.alpha;
-                if (alpha !== undefined) {
-                    if (isFunction(alpha)) {
-                        var result = alpha(state);
-                        if (result !== undefined) {
-                            return result;
-                        }
-                    }
-                    else {
-                        return alpha;
-                    }
-                }
-            }
-            return theme.getImageTintAlpha(state);
-        };
-        /**
-         * Updates the tint.
-         *
-         * @returns True if the tint is changed.
-         */
-        DImagePiece.prototype.updateTint = function () {
-            var image = this._image;
-            if (image) {
-                if (this.isTintAware(image)) {
-                    var theme = this._theme;
-                    var state = this._parent.state;
-                    var color = this.toTintColor(theme, state);
-                    if (color != null) {
-                        var result = false;
-                        if (image.tint !== color) {
-                            image.tint = color;
-                            result = true;
-                        }
-                        var alpha = this.toTintAlpha(theme, state);
-                        if (image.alpha !== alpha) {
-                            image.alpha = alpha;
-                            result = true;
-                        }
-                        return result;
-                    }
-                }
-            }
-            return false;
-        };
-        /**
-         * Updates the computed source.
-         *
-         * @returns True if the computed source is changed
-         */
-        DImagePiece.prototype.updateSource = function () {
-            var newComputed = this.computeSource();
-            var oldComputed = this._computed;
-            if (newComputed !== oldComputed) {
-                this._computed = newComputed;
-                var parent_1 = this._parent;
-                var oldImage = this._image;
-                var onUpdateBound = this._onUpdateBound;
-                if (newComputed instanceof pixi_js.Texture) {
-                    if (oldComputed instanceof pixi_js.Texture) {
-                        oldComputed.off("update", onUpdateBound);
-                        if (oldImage instanceof pixi_js.Sprite) {
-                            oldImage.texture = newComputed;
-                            newComputed.on("update", onUpdateBound);
-                        }
-                    }
-                    else {
-                        if (oldImage != null) {
-                            parent_1.removeChild(oldImage);
-                        }
-                        var newImage = new pixi_js.Sprite(newComputed);
-                        var overflowMask = parent_1.getOverflowMask();
-                        if (overflowMask) {
-                            newImage.mask = overflowMask;
-                        }
-                        newComputed.on("update", onUpdateBound);
-                        parent_1.addChild(newImage);
-                        this._image = newImage;
-                    }
-                }
-                else {
-                    if (oldComputed instanceof pixi_js.Texture) {
-                        oldComputed.off("update", onUpdateBound);
-                        if (oldImage != null) {
-                            parent_1.removeChild(oldImage);
-                            oldImage.destroy();
-                        }
-                    }
-                    else if (oldImage != null) {
-                        parent_1.removeChild(oldImage);
-                    }
-                    if (newComputed != null) {
-                        var overflowMask = parent_1.getOverflowMask();
-                        if (overflowMask) {
-                            newComputed.mask = overflowMask;
-                        }
-                        parent_1.addChild(newComputed);
-                    }
-                    this._image = newComputed;
-                }
-                return true;
-            }
-            return false;
-        };
-        DImagePiece.prototype.isRefitable = function (target) {
-            return target != null && target === this._image;
-        };
-        DImagePiece.prototype.destroy = function () {
-            var image = this._image;
-            if (image) {
-                this._image = null;
-                var computed = this._computed;
-                if (computed instanceof pixi_js.Texture) {
-                    computed.off("update", this._onUpdateBound, this);
-                    image.destroy();
-                }
-            }
-        };
-        DImagePiece.prototype.onUpdate = function () {
-            this._parent.toDirty();
-            DApplications.update(this._parent);
-        };
-        return DImagePiece;
-    }());
-
     var DImagePieceLayouterPart = /** @class */ (function () {
         function DImagePieceLayouterPart() {
             this._pieces = [];
+            this._bounds = [];
             this._size = 0;
             this._margin = 0;
         }
         DImagePieceLayouterPart.prototype.clear = function () {
             this._pieces.length = 0;
+            this._bounds.length = 0;
             this._size = 0;
             this._margin = 0;
             this._text = undefined;
         };
-        DImagePieceLayouterPart.prototype.add = function (image, size, margin) {
-            var pieces = this._pieces;
-            pieces.push(image);
-            this._size += margin + size;
-            this._margin = margin;
-        };
         DImagePieceLayouterPart.prototype.set = function (text) {
             this._text = text;
         };
@@ -27977,23 +27719,34 @@
         function DImagePieceLayouterPartBottom() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        DImagePieceLayouterPartBottom.prototype.add = function (image, bound, margin) {
+            this._pieces.push(image);
+            this._bounds.push(bound);
+            this._size += margin + bound.height;
+            this._margin = margin;
+        };
         DImagePieceLayouterPartBottom.prototype.execute = function (pbottom, height) {
             var pieces = this._pieces;
+            var bounds = this._bounds;
             var y = height - pbottom;
             if (this._text !== undefined) {
                 var margin = 0;
                 for (var i = 0, imax = pieces.length; i < imax; ++i) {
                     var piece = pieces[i];
-                    y -= margin + piece.bound.height;
-                    piece.image.y = y;
+                    var bound = bounds[i];
+                    var object = piece.object;
+                    y -= margin + bound.height;
+                    object.y = y - bound.y;
                     margin = piece.margin.horizontal;
                 }
             }
             else {
                 for (var i = 0, imax = pieces.length; i < imax; ++i) {
                     var piece = pieces[i];
-                    y -= piece.margin.horizontal + piece.bound.height;
-                    piece.image.y = y;
+                    var bound = bounds[i];
+                    var object = piece.object;
+                    y -= piece.margin.horizontal + bound.height;
+                    object.y = y - bound.y;
                 }
             }
         };
@@ -28005,17 +27758,20 @@
         function DImagePieceLayouterPartCenter() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        DImagePieceLayouterPartCenter.prototype.add = function (image, size, margin) {
-            var pieces = this._pieces;
-            pieces.push(image);
-            this._size = Math.max(this.size, size);
+        DImagePieceLayouterPartCenter.prototype.add = function (image, bound, margin) {
+            this._pieces.push(image);
+            this._bounds.push(bound);
+            this._size = Math.max(this.size, bound.width);
         };
         DImagePieceLayouterPartCenter.prototype.execute = function (pleft, pright, width) {
             var c = pleft + (width - pleft - pright) * 0.5;
             var pieces = this._pieces;
+            var bounds = this._bounds;
             for (var i = 0, imax = pieces.length; i < imax; ++i) {
                 var piece = pieces[i];
-                piece.image.x = c - piece.bound.width * 0.5;
+                var bound = bounds[i];
+                var object = piece.object;
+                object.x = c - bound.x - bound.width * 0.5;
             }
         };
         return DImagePieceLayouterPartCenter;
@@ -28026,22 +27782,33 @@
         function DImagePieceLayouterPartLeft() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        DImagePieceLayouterPartLeft.prototype.add = function (image, bound, margin) {
+            this._pieces.push(image);
+            this._bounds.push(bound);
+            this._size += margin + bound.width;
+            this._margin = margin;
+        };
         DImagePieceLayouterPartLeft.prototype.execute = function (pleft) {
             var pieces = this._pieces;
+            var bounds = this._bounds;
             var x = pleft;
             if (this._text !== undefined) {
                 for (var i = 0, imax = pieces.length; i < imax; ++i) {
                     var piece = pieces[i];
-                    piece.image.x = x;
-                    x += piece.bound.width + piece.margin.horizontal;
+                    var bound = bounds[i];
+                    var object = piece.object;
+                    object.x = x - bound.x;
+                    x += bound.width + piece.margin.horizontal;
                 }
             }
             else {
                 for (var i = 0, imax = pieces.length; i < imax; ++i) {
                     var piece = pieces[i];
+                    var bound = bounds[i];
+                    var object = piece.object;
                     x += piece.margin.horizontal;
-                    piece.image.x = x;
-                    x += piece.bound.width;
+                    object.x = x - bound.x;
+                    x += bound.width;
                 }
             }
         };
@@ -28053,17 +27820,20 @@
         function DImagePieceLayouterPartMiddle() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        DImagePieceLayouterPartMiddle.prototype.add = function (image, size, margin) {
-            var pieces = this._pieces;
-            pieces.push(image);
-            this._size = Math.max(this.size, size);
+        DImagePieceLayouterPartMiddle.prototype.add = function (image, bound, margin) {
+            this._pieces.push(image);
+            this._bounds.push(bound);
+            this._size = Math.max(this.size, bound.height);
         };
         DImagePieceLayouterPartMiddle.prototype.execute = function (ptop, pbottom, height) {
             var c = ptop + (height - ptop - pbottom) * 0.5;
             var pieces = this._pieces;
+            var bounds = this._bounds;
             for (var i = 0, imax = pieces.length; i < imax; ++i) {
                 var piece = pieces[i];
-                piece.image.y = c - piece.bound.height * 0.5;
+                var bound = bounds[i];
+                var object = piece.object;
+                object.y = c - bound.y - bound.height * 0.5;
             }
         };
         return DImagePieceLayouterPartMiddle;
@@ -28074,23 +27844,34 @@
         function DImagePieceLayouterPartRight() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        DImagePieceLayouterPartRight.prototype.add = function (image, bound, margin) {
+            this._pieces.push(image);
+            this._bounds.push(bound);
+            this._size += margin + bound.width;
+            this._margin = margin;
+        };
         DImagePieceLayouterPartRight.prototype.execute = function (pright, width) {
             var pieces = this._pieces;
+            var bounds = this._bounds;
             var x = width - pright;
             if (this._text !== undefined) {
                 var margin = 0;
                 for (var i = 0, imax = pieces.length; i < imax; ++i) {
                     var piece = pieces[i];
-                    x -= margin + piece.bound.width;
-                    piece.image.x = x;
+                    var bound = bounds[i];
+                    var object = piece.object;
+                    x -= margin + bound.width;
+                    object.x = x - bound.x;
                     margin = piece.margin.horizontal;
                 }
             }
             else {
                 for (var i = 0, imax = pieces.length; i < imax; ++i) {
                     var piece = pieces[i];
-                    x -= piece.margin.horizontal + piece.bound.width;
-                    piece.image.x = x;
+                    var bound = bounds[i];
+                    var object = piece.object;
+                    x -= piece.margin.horizontal + bound.width;
+                    object.x = x - bound.x;
                 }
             }
         };
@@ -28102,24 +27883,35 @@
         function DImagePieceLayouterPartTop() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        DImagePieceLayouterPartTop.prototype.add = function (image, bound, margin) {
+            this._pieces.push(image);
+            this._bounds.push(bound);
+            this._size += margin + bound.height;
+            this._margin = margin;
+        };
         DImagePieceLayouterPartTop.prototype.execute = function (ptop) {
             var pieces = this._pieces;
+            var bounds = this._bounds;
             var y = ptop;
             if (this._text !== undefined) {
                 var margin = 0;
                 for (var i = 0, imax = pieces.length; i < imax; ++i) {
                     var piece = pieces[i];
-                    piece.image.y = margin + y;
-                    y += piece.bound.height;
+                    var bound = bounds[i];
+                    var object = piece.object;
+                    object.y = margin + y - bound.y;
+                    y += bound.height;
                     margin = piece.margin.vertical;
                 }
             }
             else {
                 for (var i = 0, imax = pieces.length; i < imax; ++i) {
                     var piece = pieces[i];
+                    var bound = bounds[i];
+                    var object = piece.object;
                     y += piece.margin.vertical;
-                    piece.image.y = y;
-                    y += piece.bound.height;
+                    object.y = y - bound.y;
+                    y += bound.height;
                 }
             }
         };
@@ -28145,35 +27937,31 @@
             this.text = undefined;
         };
         DImagePieceLayouterPartContainer.prototype.add = function (image) {
-            var imageImage = image.image;
-            if (imageImage != null) {
-                var imageBound = image.bound;
-                var imageBoundWidth = imageBound.width;
-                var imageBoundHeight = imageBound.height;
-                var imageMargin = image.margin;
-                var imageMarginHorizontal = imageMargin.horizontal;
-                var imageMarginVertical = imageMargin.vertical;
-                var imageAlign = image.align;
-                switch (imageAlign.horizontal) {
+            var object = image.object;
+            if (object != null) {
+                var bound = object.getLocalBounds();
+                var margin = image.margin;
+                var align = image.align;
+                switch (align.horizontal) {
                     case DAlignHorizontal.LEFT:
-                        this.left.add(image, imageBoundWidth, imageMarginHorizontal);
+                        this.left.add(image, bound, margin.horizontal);
                         break;
                     case DAlignHorizontal.CENTER:
-                        this.center.add(image, imageBoundWidth, imageMarginHorizontal);
+                        this.center.add(image, bound, margin.horizontal);
                         break;
                     case DAlignHorizontal.RIGHT:
-                        this.right.add(image, imageBoundWidth, imageMarginHorizontal);
+                        this.right.add(image, bound, margin.horizontal);
                         break;
                 }
-                switch (imageAlign.vertical) {
+                switch (align.vertical) {
                     case DAlignVertical.TOP:
-                        this.top.add(image, imageBoundHeight, imageMarginVertical);
+                        this.top.add(image, bound, margin.vertical);
                         break;
                     case DAlignVertical.MIDDLE:
-                        this.middle.add(image, imageBoundHeight, imageMarginVertical);
+                        this.middle.add(image, bound, margin.vertical);
                         break;
                     case DAlignVertical.BOTTOM:
-                        this.bottom.add(image, imageBoundHeight, imageMarginVertical);
+                        this.bottom.add(image, bound, margin.vertical);
                         break;
                 }
             }
@@ -28319,8 +28107,8 @@
             this.border.clear();
         };
         DImagePieceLayouter.prototype.add = function (image) {
-            var imageImage = image.image;
-            if (imageImage) {
+            var object = image.object;
+            if (object) {
                 switch (image.align.with) {
                     case DAlignWith.TEXT:
                         this.text.add(image);
@@ -29820,12 +29608,20 @@
                         DApplications.update(this);
                     }
                 }
-                else {
+                else if (text.text !== formatted) {
                     text.text = formatted;
                     this.toDirty();
                     DApplications.update(this);
                 }
             }
+            else {
+                var text = this._text;
+                if (text != null && text.text !== "") {
+                    text.text = "";
+                    this.toDirty();
+                    DApplications.update(this);
+                }
+            }
         };
         DTextBase.prototype.newText = function () {
             return new DDynamicText(this._textStyle);
@@ -29987,16 +29783,670 @@
         return DTextBase;
     }(DBase));
 
+    var DImageBaseThemeWrapperOther = /** @class */ (function () {
+        function DImageBaseThemeWrapperOther(theme) {
+            this._theme = theme;
+        }
+        DImageBaseThemeWrapperOther.prototype.getImageAlignHorizontal = function () {
+            return this._theme.getImageAlignHorizontal();
+        };
+        DImageBaseThemeWrapperOther.prototype.getImageAlignVertical = function () {
+            return this._theme.getImageAlignVertical();
+        };
+        DImageBaseThemeWrapperOther.prototype.getImageAlignWith = function () {
+            return this._theme.getImageAlignWith();
+        };
+        DImageBaseThemeWrapperOther.prototype.getImageMarginHorizontal = function () {
+            return this._theme.getImageMarginHorizontal();
+        };
+        DImageBaseThemeWrapperOther.prototype.getImageMarginVertial = function () {
+            return this._theme.getImageMarginVertial();
+        };
+        DImageBaseThemeWrapperOther.prototype.getImageTintColor = function (state) {
+            return this._theme.getImageTintColor(state);
+        };
+        DImageBaseThemeWrapperOther.prototype.getImageTintAlpha = function (state) {
+            return this._theme.getImageTintAlpha(state);
+        };
+        DImageBaseThemeWrapperOther.prototype.getImageRotation = function (state) {
+            return this._theme.getImageRotation(state);
+        };
+        DImageBaseThemeWrapperOther.prototype.getImageSource = function (state) {
+            return null;
+        };
+        return DImageBaseThemeWrapperOther;
+    }());
+
+    var DImageBaseThemeWrapperSecondary = /** @class */ (function () {
+        function DImageBaseThemeWrapperSecondary(theme) {
+            this._theme = theme;
+        }
+        DImageBaseThemeWrapperSecondary.prototype.getImageAlignHorizontal = function () {
+            return this._theme.getSecondaryImageAlignHorizontal();
+        };
+        DImageBaseThemeWrapperSecondary.prototype.getImageAlignVertical = function () {
+            return this._theme.getSecondaryImageAlignVertical();
+        };
+        DImageBaseThemeWrapperSecondary.prototype.getImageAlignWith = function () {
+            return this._theme.getSecondaryImageAlignWith();
+        };
+        DImageBaseThemeWrapperSecondary.prototype.getImageMarginHorizontal = function () {
+            return this._theme.getSecondaryImageMarginHorizontal();
+        };
+        DImageBaseThemeWrapperSecondary.prototype.getImageMarginVertial = function () {
+            return this._theme.getSecondaryImageMarginVertial();
+        };
+        DImageBaseThemeWrapperSecondary.prototype.getImageTintColor = function (state) {
+            return this._theme.getSecondaryImageTintColor(state);
+        };
+        DImageBaseThemeWrapperSecondary.prototype.getImageTintAlpha = function (state) {
+            return this._theme.getSecondaryImageTintAlpha(state);
+        };
+        DImageBaseThemeWrapperSecondary.prototype.getImageRotation = function (state) {
+            return this._theme.getSecondaryImageRotation(state);
+        };
+        DImageBaseThemeWrapperSecondary.prototype.getImageSource = function (state) {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = this._theme).getSecondaryImageSource) === null || _b === void 0 ? void 0 : _b.call(_a, state)) !== null && _c !== void 0 ? _c : null;
+        };
+        return DImageBaseThemeWrapperSecondary;
+    }());
+
+    var DImageBaseThemeWrapperTertiary = /** @class */ (function () {
+        function DImageBaseThemeWrapperTertiary(theme) {
+            this._theme = theme;
+        }
+        DImageBaseThemeWrapperTertiary.prototype.getImageAlignHorizontal = function () {
+            return this._theme.getTertiaryImageAlignHorizontal();
+        };
+        DImageBaseThemeWrapperTertiary.prototype.getImageAlignVertical = function () {
+            return this._theme.getTertiaryImageAlignVertical();
+        };
+        DImageBaseThemeWrapperTertiary.prototype.getImageAlignWith = function () {
+            return this._theme.getTertiaryImageAlignWith();
+        };
+        DImageBaseThemeWrapperTertiary.prototype.getImageMarginHorizontal = function () {
+            return this._theme.getTertiaryImageMarginHorizontal();
+        };
+        DImageBaseThemeWrapperTertiary.prototype.getImageMarginVertial = function () {
+            return this._theme.getTertiaryImageMarginVertial();
+        };
+        DImageBaseThemeWrapperTertiary.prototype.getImageTintColor = function (state) {
+            return this._theme.getTertiaryImageTintColor(state);
+        };
+        DImageBaseThemeWrapperTertiary.prototype.getImageTintAlpha = function (state) {
+            return this._theme.getTertiaryImageTintAlpha(state);
+        };
+        DImageBaseThemeWrapperTertiary.prototype.getImageRotation = function (state) {
+            return this._theme.getTertiaryImageRotation(state);
+        };
+        DImageBaseThemeWrapperTertiary.prototype.getImageSource = function (state) {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = this._theme).getTertiaryImageSource) === null || _b === void 0 ? void 0 : _b.call(_a, state)) !== null && _c !== void 0 ? _c : null;
+        };
+        return DImageBaseThemeWrapperTertiary;
+    }());
+
+    var DImagePieceTintImpl = /** @class */ (function () {
+        function DImagePieceTintImpl(parent, theme, options) {
+            this._parent = parent;
+            if (options != null) {
+                this._color = options.color;
+                this._alpha = options.alpha;
+            }
+            this._theme = theme;
+        }
+        Object.defineProperty(DImagePieceTintImpl.prototype, "color", {
+            get: function () {
+                return this._color;
+            },
+            set: function (color) {
+                if (this._color !== color) {
+                    this._color = color;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DImagePieceTintImpl.prototype.getColor = function (state) {
+            var color = this._color;
+            if (color !== undefined) {
+                if (isFunction(color)) {
+                    var result = color(state);
+                    if (result !== undefined) {
+                        return result;
+                    }
+                }
+                else {
+                    return color;
+                }
+            }
+            return this._theme.getImageTintColor(state);
+        };
+        Object.defineProperty(DImagePieceTintImpl.prototype, "alpha", {
+            get: function () {
+                return this._alpha;
+            },
+            set: function (alpha) {
+                if (this._alpha !== alpha) {
+                    this._alpha = alpha;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DImagePieceTintImpl.prototype.getAlpha = function (state) {
+            var alpha = this._alpha;
+            if (alpha !== undefined) {
+                if (isFunction(alpha)) {
+                    var result = alpha(state);
+                    if (result !== undefined) {
+                        return result;
+                    }
+                }
+                else {
+                    return alpha;
+                }
+            }
+            return this._theme.getImageTintAlpha(state);
+        };
+        DImagePieceTintImpl.prototype.set = function (color, alpha) {
+            var isChanged = false;
+            if (color != null && this._color !== color) {
+                this._color = color;
+                isChanged = true;
+            }
+            if (alpha != null && this._alpha !== alpha) {
+                this._alpha = alpha;
+                isChanged = true;
+            }
+            if (isChanged) {
+                this.onChange();
+            }
+            return this;
+        };
+        DImagePieceTintImpl.prototype.onChange = function () {
+            this._parent.updateTint();
+            DApplications.update(this._parent);
+        };
+        return DImagePieceTintImpl;
+    }());
+
+    var DImagePieceMarginImpl = /** @class */ (function () {
+        function DImagePieceMarginImpl(parent, theme, options) {
+            var _a, _b;
+            this._parent = parent;
+            this._vertical = (_a = options === null || options === void 0 ? void 0 : options.vertical) !== null && _a !== void 0 ? _a : theme.getImageMarginVertial();
+            this._horizontal = (_b = options === null || options === void 0 ? void 0 : options.horizontal) !== null && _b !== void 0 ? _b : theme.getImageMarginHorizontal();
+        }
+        Object.defineProperty(DImagePieceMarginImpl.prototype, "vertical", {
+            get: function () {
+                return this._vertical;
+            },
+            set: function (vertical) {
+                if (this._vertical !== vertical) {
+                    this._vertical = vertical;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceMarginImpl.prototype, "horizontal", {
+            get: function () {
+                return this._horizontal;
+            },
+            set: function (horizontal) {
+                if (this._horizontal !== horizontal) {
+                    this._horizontal = horizontal;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DImagePieceMarginImpl.prototype.set = function (vertical, horizontal) {
+            var isChanged = false;
+            if (vertical != null && this._vertical !== vertical) {
+                this._vertical = vertical;
+                isChanged = true;
+            }
+            if (horizontal != null && this._horizontal !== horizontal) {
+                this._horizontal = horizontal;
+                isChanged = true;
+            }
+            if (isChanged) {
+                this.onChange();
+            }
+            return this;
+        };
+        DImagePieceMarginImpl.prototype.onChange = function () {
+            this._parent.onUpdate();
+        };
+        return DImagePieceMarginImpl;
+    }());
+
+    var DImagePieceAlignImpl = /** @class */ (function () {
+        function DImagePieceAlignImpl(parent, theme, options) {
+            var _a, _b, _c;
+            this._parent = parent;
+            this._with = toEnum((_a = options === null || options === void 0 ? void 0 : options.with) !== null && _a !== void 0 ? _a : theme.getImageAlignWith(), DAlignWith);
+            this._vertical = toEnum((_b = options === null || options === void 0 ? void 0 : options.vertical) !== null && _b !== void 0 ? _b : theme.getImageAlignVertical(), DAlignVertical);
+            this._horizontal = toEnum((_c = options === null || options === void 0 ? void 0 : options.horizontal) !== null && _c !== void 0 ? _c : theme.getImageAlignHorizontal(), DAlignHorizontal);
+        }
+        Object.defineProperty(DImagePieceAlignImpl.prototype, "with", {
+            get: function () {
+                return this._with;
+            },
+            set: function (w) {
+                w = toEnum(w, DAlignWith);
+                if (this._with !== w) {
+                    this._with = w;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceAlignImpl.prototype, "vertical", {
+            get: function () {
+                return this._vertical;
+            },
+            set: function (vertical) {
+                vertical = toEnum(vertical, DAlignVertical);
+                if (this._vertical !== vertical) {
+                    this._vertical = vertical;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceAlignImpl.prototype, "horizontal", {
+            get: function () {
+                return this._horizontal;
+            },
+            set: function (horizontal) {
+                horizontal = toEnum(horizontal, DAlignHorizontal);
+                if (this._horizontal !== horizontal) {
+                    this._horizontal = horizontal;
+                    this.onChange();
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DImagePieceAlignImpl.prototype.set = function (w, vertical, horizontal) {
+            var isChanged = false;
+            if (w != null) {
+                w = toEnum(w, DAlignWith);
+                if (this._with !== w) {
+                    this._with = w;
+                    isChanged = true;
+                }
+            }
+            if (vertical != null) {
+                vertical = toEnum(vertical, DAlignVertical);
+                if (this._vertical !== vertical) {
+                    this._vertical = vertical;
+                    isChanged = true;
+                }
+            }
+            if (horizontal != null) {
+                horizontal = toEnum(horizontal, DAlignHorizontal);
+                if (this._horizontal !== horizontal) {
+                    this._horizontal = horizontal;
+                    isChanged = true;
+                }
+            }
+            if (isChanged) {
+                this.onChange();
+            }
+            return this;
+        };
+        DImagePieceAlignImpl.prototype.onChange = function () {
+            this._parent.onUpdate();
+        };
+        return DImagePieceAlignImpl;
+    }());
+
+    var DImagePieceImpl = /** @class */ (function () {
+        function DImagePieceImpl(parent, theme, options) {
+            var _this = this;
+            this._parent = parent;
+            this._theme = theme;
+            this._object = null;
+            this._align = new DImagePieceAlignImpl(this, theme, options === null || options === void 0 ? void 0 : options.align);
+            this._margin = new DImagePieceMarginImpl(this, theme, options === null || options === void 0 ? void 0 : options.margin);
+            this._tint = new DImagePieceTintImpl(this, theme, options === null || options === void 0 ? void 0 : options.tint);
+            this._rotation = options === null || options === void 0 ? void 0 : options.rotation;
+            this._source = options === null || options === void 0 ? void 0 : options.source;
+            this._computed = null;
+            this._onUpdateBound = function () {
+                _this.onUpdate();
+            };
+        }
+        Object.defineProperty(DImagePieceImpl.prototype, "object", {
+            get: function () {
+                return this._object;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceImpl.prototype, "align", {
+            get: function () {
+                return this._align;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceImpl.prototype, "margin", {
+            get: function () {
+                return this._margin;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceImpl.prototype, "tint", {
+            get: function () {
+                return this._tint;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceImpl.prototype, "source", {
+            get: function () {
+                return this._source;
+            },
+            set: function (source) {
+                if (this._source !== source) {
+                    this._source = source;
+                    if (this.updateSource()) {
+                        this.onUpdate();
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DImagePieceImpl.prototype, "rotation", {
+            get: function () {
+                return this._rotation;
+            },
+            set: function (rotation) {
+                if (this._rotation !== rotation) {
+                    this._rotation = rotation;
+                    if (this.updateRotation()) {
+                        DApplications.update(this._parent);
+                    }
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        DImagePieceImpl.prototype.computeSource = function () {
+            var source = this._source;
+            if (source !== undefined) {
+                if (isFunction(source)) {
+                    var result = source(this._parent.state);
+                    if (result !== undefined) {
+                        return result;
+                    }
+                }
+                else {
+                    return source;
+                }
+            }
+            return this._theme.getImageSource(this._parent.state);
+        };
+        DImagePieceImpl.prototype.onStateChange = function (newState, oldState) {
+            this.updateTint();
+            this.updateRotation();
+        };
+        DImagePieceImpl.prototype.isTintAware = function (target) {
+            return target != null && "tint" in target;
+        };
+        /**
+         * Updates the tint.
+         *
+         * @returns True if the tint is changed.
+         */
+        DImagePieceImpl.prototype.updateTint = function () {
+            var object = this._object;
+            if (object) {
+                if (this.isTintAware(object)) {
+                    var state = this._parent.state;
+                    var color = this._tint.getColor(state);
+                    if (color != null) {
+                        var result = false;
+                        if (object.tint !== color) {
+                            object.tint = color;
+                            result = true;
+                        }
+                        var alpha = this._tint.getAlpha(state);
+                        if (object.alpha !== alpha) {
+                            object.alpha = alpha;
+                            result = true;
+                        }
+                        return result;
+                    }
+                }
+            }
+            return false;
+        };
+        DImagePieceImpl.prototype.toRotation = function (theme, state) {
+            var rotation = this._rotation;
+            if (rotation != null) {
+                if (isFunction(rotation)) {
+                    var result = rotation(state);
+                    if (result !== undefined) {
+                        return result;
+                    }
+                }
+                else {
+                    return rotation;
+                }
+            }
+            return theme.getImageRotation(state);
+        };
+        DImagePieceImpl.prototype.updateRotation = function () {
+            var object = this._object;
+            if (object) {
+                var theme = this._theme;
+                var state = this._parent.state;
+                var rotation = this.toRotation(theme, state);
+                if (rotation != null) {
+                    var transform = object.transform;
+                    if (transform.rotation !== rotation) {
+                        transform.rotation = rotation;
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        /**
+         * Updates the computed source.
+         *
+         * @returns True if the computed source is changed
+         */
+        DImagePieceImpl.prototype.updateSource = function () {
+            var newComputed = this.computeSource();
+            var oldComputed = this._computed;
+            if (newComputed !== oldComputed) {
+                this._computed = newComputed;
+                var parent_1 = this._parent;
+                var oldObject = this._object;
+                var onUpdateBound = this._onUpdateBound;
+                if (newComputed instanceof pixi_js.Texture) {
+                    if (oldComputed instanceof pixi_js.Texture) {
+                        oldComputed.off("update", onUpdateBound);
+                        if (oldObject instanceof pixi_js.Sprite) {
+                            oldObject.texture = newComputed;
+                            newComputed.on("update", onUpdateBound);
+                        }
+                    }
+                    else {
+                        if (oldObject != null) {
+                            parent_1.removeChild(oldObject);
+                        }
+                        var newObject = new pixi_js.Sprite(newComputed);
+                        newObject.anchor.set(0.5, 0.5);
+                        var overflowMask = parent_1.getOverflowMask();
+                        if (overflowMask) {
+                            newObject.mask = overflowMask;
+                        }
+                        newComputed.on("update", onUpdateBound);
+                        parent_1.addChild(newObject);
+                        this._object = newObject;
+                    }
+                }
+                else {
+                    if (oldComputed instanceof pixi_js.Texture) {
+                        oldComputed.off("update", onUpdateBound);
+                        if (oldObject != null) {
+                            parent_1.removeChild(oldObject);
+                            oldObject.destroy();
+                        }
+                    }
+                    else if (oldObject != null) {
+                        parent_1.removeChild(oldObject);
+                    }
+                    if (newComputed != null) {
+                        var overflowMask = parent_1.getOverflowMask();
+                        if (overflowMask) {
+                            newComputed.mask = overflowMask;
+                        }
+                        parent_1.addChild(newComputed);
+                    }
+                    this._object = newComputed;
+                }
+                return true;
+            }
+            return false;
+        };
+        DImagePieceImpl.prototype.isRefitable = function (target) {
+            return target != null && target === this._object;
+        };
+        DImagePieceImpl.prototype.destroy = function () {
+            this.source = null;
+        };
+        DImagePieceImpl.prototype.onUpdate = function () {
+            this._parent.toDirty();
+            DApplications.update(this._parent);
+        };
+        return DImagePieceImpl;
+    }());
+
+    var DImagePieceContainerImpl = /** @class */ (function () {
+        function DImagePieceContainerImpl(parent, theme, options) {
+            this._parent = parent;
+            this._theme = theme;
+            var pieces = [];
+            this._pieces = pieces;
+            if (options != null) {
+                var images = options.images;
+                if (images != null) {
+                    pieces.push(this.newImage(theme, 0 < images.length ? images[0] : undefined));
+                    if (theme.getSecondaryImageSource != null || 1 < images.length) {
+                        pieces.push(this.newImage(new DImageBaseThemeWrapperSecondary(theme), images[1]));
+                    }
+                    if (theme.getTertiaryImageSource != null || 2 < images.length) {
+                        pieces.push(this.newImage(new DImageBaseThemeWrapperTertiary(theme), images[2]));
+                    }
+                    if (3 < images.length) {
+                        var other = new DImageBaseThemeWrapperOther(theme);
+                        for (var i = 3, imax = images.length; i < imax; ++i) {
+                            pieces.push(this.newImage(other, images[i]));
+                        }
+                    }
+                }
+                else {
+                    pieces.push(this.newImage(theme, options.image));
+                    if (theme.getSecondaryImageSource != null) {
+                        pieces.push(this.newImage(new DImageBaseThemeWrapperSecondary(theme)));
+                    }
+                    if (theme.getTertiaryImageSource != null) {
+                        pieces.push(this.newImage(new DImageBaseThemeWrapperTertiary(theme)));
+                    }
+                }
+            }
+            else {
+                pieces.push(this.newImage(theme));
+                if (theme.getSecondaryImageSource != null) {
+                    pieces.push(this.newImage(new DImageBaseThemeWrapperSecondary(theme)));
+                }
+                if (theme.getTertiaryImageSource != null) {
+                    pieces.push(this.newImage(new DImageBaseThemeWrapperTertiary(theme)));
+                }
+            }
+        }
+        DImagePieceContainerImpl.prototype.newImage = function (theme, options) {
+            return new DImagePieceImpl(this._parent, theme, options);
+        };
+        DImagePieceContainerImpl.prototype.onStateChange = function (newState, oldState) {
+            var pieces = this._pieces;
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                pieces[i].onStateChange(newState, oldState);
+            }
+        };
+        DImagePieceContainerImpl.prototype.isRefitable = function (target) {
+            var pieces = this._pieces;
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                if (pieces[i].isRefitable(target)) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        DImagePieceContainerImpl.prototype.updateTextAndImage = function (layouter) {
+            var pieces = this._pieces;
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                var piece = pieces[i];
+                piece.updateSource();
+                piece.updateTint();
+                piece.updateRotation();
+                layouter.add(piece);
+            }
+        };
+        DImagePieceContainerImpl.prototype.add = function (options) {
+            var result = this.newImage(this._theme, options);
+            this._pieces.push(result);
+            return result;
+        };
+        DImagePieceContainerImpl.prototype.get = function (index) {
+            var pieces = this._pieces;
+            if (0 <= index && index < pieces.length) {
+                return pieces[index];
+            }
+            return null;
+        };
+        DImagePieceContainerImpl.prototype.remove = function (index) {
+            var pieces = this._pieces;
+            if (0 <= index && index < pieces.length) {
+                pieces[index].destroy();
+                return true;
+            }
+            return false;
+        };
+        DImagePieceContainerImpl.prototype.size = function () {
+            return this._pieces.length;
+        };
+        DImagePieceContainerImpl.prototype.destroy = function () {
+            var pieces = this._pieces;
+            for (var i = 0, imax = pieces.length; i < imax; ++i) {
+                pieces[i].destroy();
+            }
+        };
+        return DImagePieceContainerImpl;
+    }());
+
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
      */
-    var hasSecondaryImageSource = function (theme) {
-        return !!theme.getSecondaryImageSource;
-    };
-    var hasTertiaryImageSource = function (theme) {
-        return !!theme.getTertiaryImageSource;
-    };
     /**
      * A base class for UI classes with an image support.
      * See {@link DImageBaseEvents} for event details.
@@ -30007,44 +30457,33 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         DImageBase.prototype.init = function (options) {
-            this._images = this.newImages(this.theme, options);
+            this.getImage();
             _super.prototype.init.call(this, options);
         };
-        DImageBase.prototype.newImages = function (theme, options) {
-            var images = [];
-            images.push(this.newImage(theme, this.toImageOptions(theme, options === null || options === void 0 ? void 0 : options.image)));
-            if (hasSecondaryImageSource(theme)) {
-                images.push(this.newImage(new DImageBaseThemeWrapperSecondary(theme)));
-            }
-            if (hasTertiaryImageSource(theme)) {
-                images.push(this.newImage(new DImageBaseThemeWrapperTertiary(theme)));
-            }
-            return images;
-        };
-        DImageBase.prototype.toImageOptions = function (theme, options) {
-            return options;
-        };
-        DImageBase.prototype.newImage = function (theme, options) {
-            return new DImagePiece(this, theme, this._textAlign, options);
-        };
         Object.defineProperty(DImageBase.prototype, "image", {
             get: function () {
-                return this._images[0].source;
+                var _a;
+                return ((_a = this._image) !== null && _a !== void 0 ? _a : (this._image = this.newImage()));
             },
             set: function (imageSource) {
-                var image = this._images[0];
-                image.source = imageSource;
-                image.updateSource();
+                var image = this.image.get(0);
+                if (image != null) {
+                    image.source = imageSource;
+                }
             },
             enumerable: false,
             configurable: true
         });
+        DImageBase.prototype.getImage = function () {
+            var _a;
+            return ((_a = this._image) !== null && _a !== void 0 ? _a : (this._image = this.newImage()));
+        };
+        DImageBase.prototype.newImage = function () {
+            return new DImagePieceContainerImpl(this, this.theme, this.options);
+        };
         DImageBase.prototype.onStateChange = function (newState, oldState) {
             _super.prototype.onStateChange.call(this, newState, oldState);
-            var images = this._images;
-            for (var i = 0, imax = images.length; i < imax; ++i) {
-                images[i].onStateChange(newState, oldState);
-            }
+            this.getImage().onStateChange(newState, oldState);
         };
         DImageBase.prototype.updateText = function () {
             this.updateTextValue();
@@ -30052,15 +30491,8 @@
         };
         DImageBase.prototype.updateTextAndImage = function () {
             var _a;
-            var images = this._images;
             var layouter = ((_a = DImageBase.LAYOUTER) !== null && _a !== void 0 ? _a : (DImageBase.LAYOUTER = new DImagePieceLayouter()));
-            for (var i = 0, imax = images.length; i < imax; ++i) {
-                var image = images[i];
-                image.updateSource();
-                image.updateTint();
-                image.updateBound();
-                layouter.add(image);
-            }
+            this.getImage().updateTextAndImage(layouter);
             var text = this._text;
             if (text != null) {
                 this.updateTextColor(text);
@@ -30077,11 +30509,8 @@
             if (_super.prototype.isRefitable.call(this, target)) {
                 return true;
             }
-            var images = this._images;
-            for (var i = 0, imax = images.length; i < imax; ++i) {
-                if (images[i].isRefitable(target)) {
-                    return true;
-                }
+            if (this.getImage().isRefitable(target)) {
+                return true;
             }
             return false;
         };
@@ -30089,9 +30518,9 @@
             return "DImageBase";
         };
         DImageBase.prototype.destroy = function () {
-            var images = this._images;
-            for (var i = 0, imax = images.length; i < imax; ++i) {
-                images[i].destroy();
+            var image = this._image;
+            if (image != null) {
+                image.destroy();
             }
             _super.prototype.destroy.call(this);
         };
@@ -52569,35 +52998,13 @@
             this.onColorChange();
             this.emit("change", newValue, oldValue, this);
         };
-        DButtonColor.prototype.toImageTintOptions = function (tint) {
-            var _this = this;
-            var color = function () { return _this._textValueComputed.color; };
-            if (tint) {
-                return {
-                    color: tint.color || color,
-                    alpha: tint.alpha
-                };
-            }
-            return {
-                color: color
-            };
-        };
-        DButtonColor.prototype.toImageOptions = function (theme, options) {
-            if (options) {
-                return {
-                    source: options.source,
-                    tint: this.toImageTintOptions(options.tint),
-                    align: options.align,
-                    margin: options.margin
-                };
-            }
-            return {
-                tint: this.toImageTintOptions()
-            };
-        };
         DButtonColor.prototype.onColorChange = function () {
-            if (this._images[0].updateTint()) {
-                DApplications.update(this);
+            var image = this.image.get(0);
+            if (image != null) {
+                var value = this._textValueComputed;
+                if (value != null) {
+                    image.tint.color = value.color;
+                }
             }
             this.updateTextForcibly();
         };
@@ -65247,10 +65654,11 @@
             var _this = _super.call(this, options) || this;
             _this._isDone = true;
             _this._startTime = 0;
+            var theme = _this.theme;
             var delay = options === null || options === void 0 ? void 0 : options.delay;
-            _this._delayDone = (_a = delay === null || delay === void 0 ? void 0 : delay.done) !== null && _a !== void 0 ? _a : _this.theme.getDoneDelay();
+            _this._delayDone = (_a = delay === null || delay === void 0 ? void 0 : delay.done) !== null && _a !== void 0 ? _a : theme.getDoneDelay();
             var delayClose = delay === null || delay === void 0 ? void 0 : delay.close;
-            _this._delayClose = delayClose !== undefined ? delayClose : _this.theme.getCloseDelay();
+            _this._delayClose = delayClose !== undefined ? delayClose : theme.getCloseDelay();
             _this._messageText = _this.message.text;
             return _this;
         }
@@ -65546,6 +65954,219 @@
         return DExpandable;
     }(DLayoutVertical));
 
+    var STATE_INITIAL = 0;
+    var STATE_STARTED = 1;
+    var STATE_RESOLVED = 2;
+    var STATE_REJECTED = 3;
+    var DIndicatorProcessing = /** @class */ (function () {
+        function DIndicatorProcessing(parent, options) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            this._parent = parent;
+            this._state = STATE_INITIAL;
+            this._startTime = 0;
+            // Delay
+            var theme = this.theme;
+            var delay = options === null || options === void 0 ? void 0 : options.delay;
+            this._delayDone = (_a = delay === null || delay === void 0 ? void 0 : delay.done) !== null && _a !== void 0 ? _a : theme.getProcessDoneDelay();
+            var delayClose = delay === null || delay === void 0 ? void 0 : delay.close;
+            this._delayClose = delayClose !== undefined ? delayClose : theme.getProcessCloseDelay();
+            // Text
+            var text = options === null || options === void 0 ? void 0 : options.text;
+            this._isTextEnabled = (_b = text === null || text === void 0 ? void 0 : text.enabled) !== null && _b !== void 0 ? _b : theme.isProcessTextEnabled();
+            this._textValue = (_c = text === null || text === void 0 ? void 0 : text.value) !== null && _c !== void 0 ? _c : theme.newProcessTextValue();
+            // Image
+            var image = options === null || options === void 0 ? void 0 : options.image;
+            this._isImageEnabled = (_d = image === null || image === void 0 ? void 0 : image.enabled) !== null && _d !== void 0 ? _d : theme.isProcessImageEnabled();
+            this._imageIndex = (_e = image === null || image === void 0 ? void 0 : image.index) !== null && _e !== void 0 ? _e : theme.getProcessImageIndex();
+            this._imageSource = (_f = image === null || image === void 0 ? void 0 : image.source) !== null && _f !== void 0 ? _f : theme.newProcessImageSource();
+            this._imageRotation = (_g = image === null || image === void 0 ? void 0 : image.rotation) !== null && _g !== void 0 ? _g : theme.newProcessImageRotation();
+            // State
+            this._wasReadOnly = false;
+        }
+        DIndicatorProcessing.prototype.start = function () {
+            var state = this._state;
+            if (state === STATE_INITIAL) {
+                this._state = STATE_STARTED;
+                this.onBegin();
+            }
+            else if (state === STATE_RESOLVED || state === STATE_REJECTED) {
+                this._state = STATE_STARTED;
+                this.onEnd();
+                this.onBegin();
+            }
+            return this;
+        };
+        DIndicatorProcessing.prototype.onBegin = function () {
+            this._startTime = Date.now();
+            var timeoutId = this._timeoutId;
+            if (timeoutId != null) {
+                clearTimeout(timeoutId);
+            }
+            var closeTimeoutId = this._closeTimeoutId;
+            if (closeTimeoutId != null) {
+                clearTimeout(closeTimeoutId);
+            }
+            var parent = this._parent;
+            var state = parent.state;
+            state.lock();
+            state.ticker.remove(DBaseState.PROCESSING).add(DBaseState.PROCESSING, 32);
+            state.removeAll(DBaseState.SUCCEEDED, DBaseState.FAILED);
+            this._wasReadOnly = state.isReadOnly;
+            if (!this._wasReadOnly) {
+                state.add(DBaseState.READ_ONLY);
+            }
+            state.unlock();
+            if (this._isTextEnabled) {
+                this._textValueBackup = parent.text;
+                var textValue = this._textValue;
+                if (textValue !== undefined) {
+                    parent.text = textValue;
+                }
+            }
+            if (this._isImageEnabled) {
+                var image = parent.image.get(this._imageIndex);
+                if (image != null) {
+                    this._imageSourceBackup = image.source;
+                    this._imageRotationBackup = image.rotation;
+                    var imageSource = this._imageSource;
+                    if (imageSource !== undefined) {
+                        image.source = imageSource;
+                    }
+                    var imageRotation = this._imageRotation;
+                    if (imageRotation !== undefined) {
+                        image.rotation = imageRotation;
+                    }
+                }
+            }
+        };
+        DIndicatorProcessing.prototype.end = function () {
+            var state = this._state;
+            if (state === STATE_STARTED || state === STATE_RESOLVED || state === STATE_REJECTED) {
+                this._state = STATE_INITIAL;
+                this.onEnd();
+            }
+            return this;
+        };
+        DIndicatorProcessing.prototype.onEnd = function () {
+            var timeoutId = this._timeoutId;
+            if (timeoutId != null) {
+                clearTimeout(timeoutId);
+            }
+            var closeTimeoutId = this._closeTimeoutId;
+            if (closeTimeoutId != null) {
+                clearTimeout(closeTimeoutId);
+            }
+            var parent = this._parent;
+            var state = parent.state;
+            state.lock();
+            state.ticker.remove(DBaseState.PROCESSING);
+            state.removeAll(DBaseState.SUCCEEDED, DBaseState.FAILED);
+            if (!this._wasReadOnly) {
+                state.remove(DBaseState.READ_ONLY);
+            }
+            state.unlock();
+            if (this._isTextEnabled) {
+                parent.text = this._textValueBackup;
+            }
+            if (this._isImageEnabled) {
+                var image = parent.image.get(this._imageIndex);
+                if (image != null) {
+                    image.source = this._imageSourceBackup;
+                    image.rotation = this._imageRotationBackup;
+                }
+            }
+        };
+        DIndicatorProcessing.prototype.resolve = function (message) {
+            var _this = this;
+            if (this._state === STATE_STARTED) {
+                this._state = STATE_RESOLVED;
+                var elapsedTime = Date.now() - this._startTime;
+                var delay = this._delayDone - elapsedTime;
+                if (0 < delay) {
+                    this._timeoutId = window.setTimeout(function () {
+                        _this._timeoutId = undefined;
+                        _this.onResolved(message);
+                    }, delay);
+                }
+                else {
+                    this.onResolved(message);
+                }
+            }
+        };
+        DIndicatorProcessing.prototype.onResolved = function (message) {
+            var parent = this._parent;
+            if (this._isTextEnabled && message != null) {
+                parent.text = message;
+            }
+            var state = parent.state;
+            state.lock();
+            state.ticker.remove(DBaseState.PROCESSING);
+            state.add(DBaseState.SUCCEEDED);
+            state.remove(DBaseState.FAILED);
+            if (!this._wasReadOnly) {
+                state.remove(DBaseState.READ_ONLY);
+            }
+            state.unlock();
+            this.onDone(this._delayClose);
+        };
+        DIndicatorProcessing.prototype.reject = function (message) {
+            var _this = this;
+            if (this._state === STATE_STARTED) {
+                this._state = STATE_REJECTED;
+                var elapsedTime = Date.now() - this._startTime;
+                var delay = this._delayDone - elapsedTime;
+                if (0 < delay) {
+                    this._timeoutId = window.setTimeout(function () {
+                        _this._timeoutId = undefined;
+                        _this.onRejected(message);
+                    }, delay);
+                }
+                else {
+                    this.onRejected(message);
+                }
+            }
+        };
+        DIndicatorProcessing.prototype.onRejected = function (message) {
+            var parent = this._parent;
+            if (this._isTextEnabled && message != null) {
+                parent.text = message;
+            }
+            var state = parent.state;
+            state.lock();
+            state.ticker.remove(DBaseState.PROCESSING);
+            state.add(DBaseState.FAILED);
+            state.remove(DBaseState.SUCCEEDED);
+            if (!this._wasReadOnly) {
+                state.remove(DBaseState.READ_ONLY);
+            }
+            state.unlock();
+            this.onDone(this._delayClose);
+        };
+        DIndicatorProcessing.prototype.onDone = function (delay) {
+            var _this = this;
+            if (delay != null) {
+                this._closeTimeoutId = window.setTimeout(function () {
+                    _this._closeTimeoutId = undefined;
+                    _this.end();
+                }, delay);
+            }
+            else {
+                this.end();
+            }
+        };
+        DIndicatorProcessing.prototype.getType = function () {
+            return "DIndicatorProcessing";
+        };
+        Object.defineProperty(DIndicatorProcessing.prototype, "theme", {
+            get: function () {
+                return DThemes.get(this.getType());
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return DIndicatorProcessing;
+    }());
+
     /*
      * Copyright (C) 2019 Toshiba Corporation
      * SPDX-License-Identifier: Apache-2.0
@@ -73451,12 +74072,17 @@
         DTableHeaderCell.prototype.isCheckClicked = function (e) {
             if (e instanceof pixi_js.InteractionEvent && this._check.isEnabled) {
                 if (this.isSortable) {
-                    var image = this._images[1];
-                    if (image && image.image != null) {
+                    var image = this.image.get(1);
+                    if (image) {
                         var position = this.toClickPosition(e);
-                        var bound = image.bound;
-                        var margin = image.margin.horizontal;
-                        return bound.left - margin <= position && position <= bound.right + margin;
+                        var object = image.object;
+                        if (object != null) {
+                            var bound = object.getLocalBounds();
+                            var margin = image.margin.horizontal;
+                            var x = object.x;
+                            return (x + bound.left - margin <= position &&
+                                position <= x + bound.right + margin);
+                        }
                     }
                 }
                 else {
@@ -76774,9 +77400,13 @@
         DExpandable: DExpandable,
         DHtmlElementState: DHtmlElementState,
         DHtmlElement: DHtmlElement,
+        DImageBaseThemeWrapperOther: DImageBaseThemeWrapperOther,
         DImageBaseThemeWrapperSecondary: DImageBaseThemeWrapperSecondary,
         DImageBaseThemeWrapperTertiary: DImageBaseThemeWrapperTertiary,
         DImageBase: DImageBase,
+        DImagePieceAlignImpl: DImagePieceAlignImpl,
+        DImagePieceContainerImpl: DImagePieceContainerImpl,
+        DImagePieceImpl: DImagePieceImpl,
         DImagePieceLayouterPartBottom: DImagePieceLayouterPartBottom,
         DImagePieceLayouterPartCenter: DImagePieceLayouterPartCenter,
         DImagePieceLayouterPartContainer: DImagePieceLayouterPartContainer,
@@ -76786,8 +77416,10 @@
         DImagePieceLayouterPartTop: DImagePieceLayouterPartTop,
         DImagePieceLayouterPart: DImagePieceLayouterPart,
         DImagePieceLayouter: DImagePieceLayouter,
-        DImagePiece: DImagePiece,
+        DImagePieceMarginImpl: DImagePieceMarginImpl,
+        DImagePieceTintImpl: DImagePieceTintImpl,
         DImage: DImage,
+        DIndicatorProcessing: DIndicatorProcessing,
         DInputAndLabel: DInputAndLabel,
         DInputBooleanButtonOff: DInputBooleanButtonOff,
         DInputBooleanButtonOn: DInputBooleanButtonOn,