diff --git a/doric-js/bundle/doric-lib.es5.js b/doric-js/bundle/doric-lib.es5.js
index 66e9764a..40c59752 100644
--- a/doric-js/bundle/doric-lib.es5.js
+++ b/doric-js/bundle/doric-lib.es5.js
@@ -124,7 +124,7 @@ function logw() {
     nativeLog('w', out);
 }
 
-var __extends$j = (undefined && undefined.__extends) || (function () {
+var __extends$k = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -139,13 +139,13 @@ var __extends$j = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
     else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$f = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$g = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
 var __values$5 = (undefined && undefined.__values) || function(o) {
@@ -460,106 +460,106 @@ var View = /** @class */ (function () {
     View.isViewClass = function () {
         return true;
     };
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "width", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "height", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "x", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "y", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Object)
+        __metadata$g("design:type", Object)
     ], View.prototype, "backgroundColor", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Object)
+        __metadata$g("design:type", Object)
     ], View.prototype, "corners", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Object)
+        __metadata$g("design:type", Object)
     ], View.prototype, "border", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Object)
+        __metadata$g("design:type", Object)
     ], View.prototype, "shadow", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "alpha", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Boolean)
+        __metadata$g("design:type", Boolean)
     ], View.prototype, "hidden", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Object)
+        __metadata$g("design:type", Object)
     ], View.prototype, "padding", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Object)
+        __metadata$g("design:type", Object)
     ], View.prototype, "layoutConfig", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Function)
+        __metadata$g("design:type", Function)
     ], View.prototype, "onClick", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "translationX", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "translationY", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "scaleX", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "scaleY", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "pivotX", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "pivotY", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "rotation", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "rotationX", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "rotationY", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Number)
+        __metadata$g("design:type", Number)
     ], View.prototype, "perspective", void 0);
-    __decorate$f([
+    __decorate$g([
         Property,
-        __metadata$f("design:type", Object)
+        __metadata$g("design:type", Object)
     ], View.prototype, "flexConfig", void 0);
     return View;
 }());
 var Superview = /** @class */ (function (_super) {
-    __extends$j(Superview, _super);
+    __extends$k(Superview, _super);
     function Superview() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -675,7 +675,7 @@ var Superview = /** @class */ (function (_super) {
     return Superview;
 }(View));
 var Group = /** @class */ (function (_super) {
-    __extends$j(Group, _super);
+    __extends$k(Group, _super);
     function Group() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.children = [];
@@ -897,7 +897,7 @@ function layoutConfig() {
     return new LayoutConfigImpl;
 }
 
-var __extends$i = (undefined && undefined.__extends) || (function () {
+var __extends$j = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -912,13 +912,13 @@ var __extends$i = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
     else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$e = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$f = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
 var __values$4 = (undefined && undefined.__values) || function(o) {
@@ -933,43 +933,43 @@ var __values$4 = (undefined && undefined.__values) || function(o) {
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
 var Stack = /** @class */ (function (_super) {
-    __extends$i(Stack, _super);
+    __extends$j(Stack, _super);
     function Stack() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     return Stack;
 }(Group));
 var Root = /** @class */ (function (_super) {
-    __extends$i(Root, _super);
+    __extends$j(Root, _super);
     function Root() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     return Root;
 }(Stack));
 var LinearLayout = /** @class */ (function (_super) {
-    __extends$i(LinearLayout, _super);
+    __extends$j(LinearLayout, _super);
     function LinearLayout() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$e([
+    __decorate$f([
         Property,
-        __metadata$e("design:type", Number)
+        __metadata$f("design:type", Number)
     ], LinearLayout.prototype, "space", void 0);
-    __decorate$e([
+    __decorate$f([
         Property,
-        __metadata$e("design:type", Gravity)
+        __metadata$f("design:type", Gravity)
     ], LinearLayout.prototype, "gravity", void 0);
     return LinearLayout;
 }(Group));
 var VLayout = /** @class */ (function (_super) {
-    __extends$i(VLayout, _super);
+    __extends$j(VLayout, _super);
     function VLayout() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     return VLayout;
 }(LinearLayout));
 var HLayout = /** @class */ (function (_super) {
-    __extends$i(HLayout, _super);
+    __extends$j(HLayout, _super);
     function HLayout() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1042,7 +1042,7 @@ function vlayout(views, config) {
     return ret;
 }
 var FlexLayout = /** @class */ (function (_super) {
-    __extends$i(FlexLayout, _super);
+    __extends$j(FlexLayout, _super);
     function FlexLayout() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -1071,13 +1071,13 @@ function flexlayout(views, config) {
     return ret;
 }
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
     else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$e = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
 var __values$3 = (undefined && undefined.__values) || function(o) {
@@ -1091,7 +1091,7 @@ var __values$3 = (undefined && undefined.__values) || function(o) {
     }; }
     throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
 };
-var __read$2 = (undefined && undefined.__read) || function (o, n) {
+var __read$3 = (undefined && undefined.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) { return o; }
     var i = m.call(o), r, ar = [], e;
@@ -1107,7 +1107,7 @@ var __read$2 = (undefined && undefined.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray$2 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+var __spreadArray$3 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) { for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) { ar = Array.prototype.slice.call(from, 0, i); }
@@ -1259,7 +1259,7 @@ var Panel = /** @class */ (function () {
         return this.renderSnapshots.length;
     };
     Panel.prototype.__restoreRenderSnapshot__ = function (idx) {
-        return __spreadArray$2([], __read$2(this.renderSnapshots), false).slice(0, idx);
+        return __spreadArray$3([], __read$3(this.renderSnapshots), false).slice(0, idx);
     };
     Panel.prototype.__enableSnapshot__ = function () {
         this.snapshotEnabled = true;
@@ -1335,71 +1335,71 @@ var Panel = /** @class */ (function () {
     Panel.prototype.addOnRenderFinishedCallback = function (cb) {
         this.onRenderFinishedCallback.push(cb);
     };
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", [String]),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", [String]),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__init__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", []),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", []),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__onCreate__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", []),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", []),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__onDestroy__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", []),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", []),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__onShow__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", []),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", []),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__onHidden__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", [Object]),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", [Object]),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__build__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", []),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", []),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__onEnvChanged__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", [Array, String]),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", [Array, String]),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__response__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", []),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", []),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__renderSnapshotDepth__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", [Number]),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", [Number]),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__restoreRenderSnapshot__", null);
-    __decorate$d([
+    __decorate$e([
         NativeCall,
-        __metadata$d("design:type", Function),
-        __metadata$d("design:paramtypes", []),
-        __metadata$d("design:returntype", void 0)
+        __metadata$e("design:type", Function),
+        __metadata$e("design:paramtypes", []),
+        __metadata$e("design:returntype", void 0)
     ], Panel.prototype, "__enableSnapshot__", null);
     return Panel;
 }());
@@ -1495,7 +1495,7 @@ exports.GradientOrientation = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __extends$h = (undefined && undefined.__extends) || (function () {
+var __extends$i = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -1611,7 +1611,7 @@ var Animation = /** @class */ (function () {
     return Animation;
 }());
 var ScaleAnimation = /** @class */ (function (_super) {
-    __extends$h(ScaleAnimation, _super);
+    __extends$i(ScaleAnimation, _super);
     function ScaleAnimation() {
         var _this = _super.call(this) || this;
         _this.scaleXChangeable = {
@@ -1685,7 +1685,7 @@ var ScaleAnimation = /** @class */ (function (_super) {
     return ScaleAnimation;
 }(Animation));
 var TranslationAnimation = /** @class */ (function (_super) {
-    __extends$h(TranslationAnimation, _super);
+    __extends$i(TranslationAnimation, _super);
     function TranslationAnimation() {
         var _this = _super.call(this) || this;
         _this.translationXChangeable = {
@@ -1762,7 +1762,7 @@ var TranslationAnimation = /** @class */ (function (_super) {
  * Rotation range is [0..2]
  */
 var RotationAnimation = /** @class */ (function (_super) {
-    __extends$h(RotationAnimation, _super);
+    __extends$i(RotationAnimation, _super);
     function RotationAnimation() {
         var _this = _super.call(this) || this;
         _this.rotationChaneable = {
@@ -1806,7 +1806,7 @@ var RotationAnimation = /** @class */ (function (_super) {
  * Rotation range is [0..2]
  */
 var RotationXAnimation = /** @class */ (function (_super) {
-    __extends$h(RotationXAnimation, _super);
+    __extends$i(RotationXAnimation, _super);
     function RotationXAnimation() {
         var _this = _super.call(this) || this;
         _this.rotationChaneable = {
@@ -1850,7 +1850,7 @@ var RotationXAnimation = /** @class */ (function (_super) {
  * Rotation range is [0..2]
  */
 var RotationYAnimation = /** @class */ (function (_super) {
-    __extends$h(RotationYAnimation, _super);
+    __extends$i(RotationYAnimation, _super);
     function RotationYAnimation() {
         var _this = _super.call(this) || this;
         _this.rotationChaneable = {
@@ -1891,7 +1891,7 @@ var RotationYAnimation = /** @class */ (function (_super) {
     return RotationYAnimation;
 }(Animation));
 var BackgroundColorAnimation = /** @class */ (function (_super) {
-    __extends$h(BackgroundColorAnimation, _super);
+    __extends$i(BackgroundColorAnimation, _super);
     function BackgroundColorAnimation() {
         var _this = _super.call(this) || this;
         _this.backgroundColorChangeable = {
@@ -1935,7 +1935,7 @@ var BackgroundColorAnimation = /** @class */ (function (_super) {
  * Alpha range is [0..1]
  */
 var AlphaAnimation = /** @class */ (function (_super) {
-    __extends$h(AlphaAnimation, _super);
+    __extends$i(AlphaAnimation, _super);
     function AlphaAnimation() {
         var _this = _super.call(this) || this;
         _this.opacityChangeable = {
@@ -2007,7 +2007,7 @@ var AnimationSet = /** @class */ (function () {
     return AnimationSet;
 }());
 
-var __extends$g = (undefined && undefined.__extends) || (function () {
+var __extends$h = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -2022,13 +2022,13 @@ var __extends$g = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
     else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$c = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
 exports.TruncateAt = void 0;
@@ -2039,7 +2039,7 @@ exports.TruncateAt = void 0;
     TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
 })(exports.TruncateAt || (exports.TruncateAt = {}));
 var Text = /** @class */ (function (_super) {
-    __extends$g(Text, _super);
+    __extends$h(Text, _super);
     function Text() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -2050,61 +2050,61 @@ var Text = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", String)
+        __metadata$d("design:type", String)
     ], Text.prototype, "text", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Object)
+        __metadata$d("design:type", Object)
     ], Text.prototype, "textColor", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Number)
+        __metadata$d("design:type", Number)
     ], Text.prototype, "textSize", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Number)
+        __metadata$d("design:type", Number)
     ], Text.prototype, "maxLines", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Gravity)
+        __metadata$d("design:type", Gravity)
     ], Text.prototype, "textAlignment", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", String)
+        __metadata$d("design:type", String)
     ], Text.prototype, "fontStyle", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Object)
+        __metadata$d("design:type", Object)
     ], Text.prototype, "font", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Number)
+        __metadata$d("design:type", Number)
     ], Text.prototype, "maxWidth", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Number)
+        __metadata$d("design:type", Number)
     ], Text.prototype, "maxHeight", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Number)
+        __metadata$d("design:type", Number)
     ], Text.prototype, "lineSpacing", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Boolean)
+        __metadata$d("design:type", Boolean)
     ], Text.prototype, "strikethrough", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Boolean)
+        __metadata$d("design:type", Boolean)
     ], Text.prototype, "underline", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", String)
+        __metadata$d("design:type", String)
     ], Text.prototype, "htmlText", void 0);
-    __decorate$c([
+    __decorate$d([
         Property,
-        __metadata$c("design:type", Number)
+        __metadata$d("design:type", Number)
     ], Text.prototype, "truncateAt", void 0);
     return Text;
 }(View));
@@ -2115,7 +2115,7 @@ function text(config) {
     return ret;
 }
 
-var __extends$f = (undefined && undefined.__extends) || (function () {
+var __extends$g = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -2146,21 +2146,21 @@ var Resource = /** @class */ (function () {
     return Resource;
 }());
 var LocalResource = /** @class */ (function (_super) {
-    __extends$f(LocalResource, _super);
+    __extends$g(LocalResource, _super);
     function LocalResource(path) {
         return _super.call(this, "local", path) || this;
     }
     return LocalResource;
 }(Resource));
 var RemoteResource = /** @class */ (function (_super) {
-    __extends$f(RemoteResource, _super);
+    __extends$g(RemoteResource, _super);
     function RemoteResource(url) {
         return _super.call(this, "remote", url) || this;
     }
     return RemoteResource;
 }(Resource));
 var Base64Resource = /** @class */ (function (_super) {
-    __extends$f(Base64Resource, _super);
+    __extends$g(Base64Resource, _super);
     function Base64Resource(content) {
         return _super.call(this, "base64", content) || this;
     }
@@ -2170,21 +2170,21 @@ var Base64Resource = /** @class */ (function (_super) {
  * Resources belong to assets dir.
  */
 var AssetsResource = /** @class */ (function (_super) {
-    __extends$f(AssetsResource, _super);
+    __extends$g(AssetsResource, _super);
     function AssetsResource(content) {
         return _super.call(this, "doric_assets", content) || this;
     }
     return AssetsResource;
 }(Resource));
 var AndroidResource = /** @class */ (function (_super) {
-    __extends$f(AndroidResource, _super);
+    __extends$g(AndroidResource, _super);
     function AndroidResource() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     return AndroidResource;
 }(Resource));
 var iOSResource = /** @class */ (function (_super) {
-    __extends$f(iOSResource, _super);
+    __extends$g(iOSResource, _super);
     function iOSResource() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -2194,21 +2194,21 @@ var iOSResource = /** @class */ (function (_super) {
  * This is for android platform
  */
 var DrawableResource = /** @class */ (function (_super) {
-    __extends$f(DrawableResource, _super);
+    __extends$g(DrawableResource, _super);
     function DrawableResource(name) {
         return _super.call(this, "drawable", name) || this;
     }
     return DrawableResource;
 }(AndroidResource));
 var RawResource = /** @class */ (function (_super) {
-    __extends$f(RawResource, _super);
+    __extends$g(RawResource, _super);
     function RawResource(name) {
         return _super.call(this, "raw", name) || this;
     }
     return RawResource;
 }(AndroidResource));
 var AndroidAssetsResource = /** @class */ (function (_super) {
-    __extends$f(AndroidAssetsResource, _super);
+    __extends$g(AndroidAssetsResource, _super);
     function AndroidAssetsResource(path) {
         return _super.call(this, "android_assets", path) || this;
     }
@@ -2218,21 +2218,21 @@ var AndroidAssetsResource = /** @class */ (function (_super) {
  * This is for iOS platform
  */
 var MainBundleResource = /** @class */ (function (_super) {
-    __extends$f(MainBundleResource, _super);
+    __extends$g(MainBundleResource, _super);
     function MainBundleResource(fileName) {
         return _super.call(this, "mainBundle", fileName) || this;
     }
     return MainBundleResource;
 }(iOSResource));
 var BundleResource = /** @class */ (function (_super) {
-    __extends$f(BundleResource, _super);
+    __extends$g(BundleResource, _super);
     function BundleResource(bundleName, fileName) {
         return _super.call(this, "bundle", "".concat(bundleName, "://").concat(fileName)) || this;
     }
     return BundleResource;
 }(iOSResource));
 var ArrayBufferResource = /** @class */ (function (_super) {
-    __extends$f(ArrayBufferResource, _super);
+    __extends$g(ArrayBufferResource, _super);
     function ArrayBufferResource(data) {
         var _this = _super.call(this, "arrayBuffer", uniqueId("buffer")) || this;
         _this.data = data;
@@ -2246,7 +2246,7 @@ var ArrayBufferResource = /** @class */ (function (_super) {
     return ArrayBufferResource;
 }(Resource));
 
-var __extends$e = (undefined && undefined.__extends) || (function () {
+var __extends$f = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -2261,13 +2261,13 @@ var __extends$e = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
     else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$b = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$c = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
 exports.ScaleType = void 0;
@@ -2278,7 +2278,7 @@ exports.ScaleType = void 0;
     ScaleType[ScaleType["Tile"] = 3] = "Tile";
 })(exports.ScaleType || (exports.ScaleType = {}));
 var Image = /** @class */ (function (_super) {
-    __extends$e(Image, _super);
+    __extends$f(Image, _super);
     function Image() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -2300,86 +2300,86 @@ var Image = /** @class */ (function (_super) {
     Image.prototype.setImagePixels = function (context, image) {
         return this.nativeChannel(context, "setImagePixels")(image);
     };
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Object)
+        __metadata$c("design:type", Object)
     ], Image.prototype, "imagePixels", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Resource)
+        __metadata$c("design:type", Resource)
     ], Image.prototype, "image", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "imageUrl", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "imageFilePath", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "imagePath", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "imageRes", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "imageBase64", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Number)
+        __metadata$c("design:type", Number)
     ], Image.prototype, "scaleType", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Boolean)
+        __metadata$c("design:type", Boolean)
     ], Image.prototype, "isBlur", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "placeHolderImage", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "placeHolderImageBase64", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Color
+        __metadata$c("design:type", Color
         /**
          * Display while image is failed to load
          * It can be file name in local path
          */
         )
     ], Image.prototype, "placeHolderColor", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "errorImage", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", String)
+        __metadata$c("design:type", String)
     ], Image.prototype, "errorImageBase64", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Color)
+        __metadata$c("design:type", Color)
     ], Image.prototype, "errorColor", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Function)
+        __metadata$c("design:type", Function)
     ], Image.prototype, "loadCallback", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Number)
+        __metadata$c("design:type", Number)
     ], Image.prototype, "imageScale", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Object)
+        __metadata$c("design:type", Object)
     ], Image.prototype, "stretchInset", void 0);
-    __decorate$b([
+    __decorate$c([
         Property,
-        __metadata$b("design:type", Function)
+        __metadata$c("design:type", Function)
     ], Image.prototype, "onAnimationEnd", void 0);
     return Image;
 }(View));
@@ -2405,7 +2405,7 @@ function image(config) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __extends$d = (undefined && undefined.__extends) || (function () {
+var __extends$e = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -2420,16 +2420,16 @@ var __extends$d = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
     else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$a = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$b = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
-var __read$1 = (undefined && undefined.__read) || function (o, n) {
+var __read$2 = (undefined && undefined.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) { return o; }
     var i = m.call(o), r, ar = [], e;
@@ -2445,7 +2445,7 @@ var __read$1 = (undefined && undefined.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+var __spreadArray$2 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) { for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) { ar = Array.prototype.slice.call(from, 0, i); }
@@ -2455,22 +2455,22 @@ var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, fr
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 var ListItem = /** @class */ (function (_super) {
-    __extends$d(ListItem, _super);
+    __extends$e(ListItem, _super);
     function ListItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", String)
+        __metadata$b("design:type", String)
     ], ListItem.prototype, "identifier", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Array)
+        __metadata$b("design:type", Array)
     ], ListItem.prototype, "actions", void 0);
     return ListItem;
 }(Stack));
 var List = /** @class */ (function (_super) {
-    __extends$d(List, _super);
+    __extends$e(List, _super);
     function List() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.cachedViews = new Map;
@@ -2479,7 +2479,7 @@ var List = /** @class */ (function (_super) {
         return _this;
     }
     List.prototype.allSubviews = function () {
-        var ret = __spreadArray$1([], __read$1(this.cachedViews.values()), false);
+        var ret = __spreadArray$2([], __read$2(this.cachedViews.values()), false);
         if (this.loadMoreView) {
             ret.push(this.loadMoreView);
         }
@@ -2534,65 +2534,65 @@ var List = /** @class */ (function (_super) {
         }
         return _super.prototype.toModel.call(this);
     };
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Object)
+        __metadata$b("design:type", Object)
     ], List.prototype, "itemCount", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Function)
+        __metadata$b("design:type", Function)
     ], List.prototype, "renderItem", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Object)
+        __metadata$b("design:type", Object)
     ], List.prototype, "batchCount", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Function)
+        __metadata$b("design:type", Function)
     ], List.prototype, "onLoadMore", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Boolean)
+        __metadata$b("design:type", Boolean)
     ], List.prototype, "loadMore", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", ListItem)
+        __metadata$b("design:type", ListItem)
     ], List.prototype, "loadMoreView", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Function)
+        __metadata$b("design:type", Function)
     ], List.prototype, "onScroll", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Function)
+        __metadata$b("design:type", Function)
     ], List.prototype, "onScrollEnd", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Number)
+        __metadata$b("design:type", Number)
     ], List.prototype, "scrolledPosition", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Boolean)
+        __metadata$b("design:type", Boolean)
     ], List.prototype, "scrollable", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Boolean)
+        __metadata$b("design:type", Boolean)
     ], List.prototype, "bounces", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Boolean)
+        __metadata$b("design:type", Boolean)
     ], List.prototype, "canDrag", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Function)
+        __metadata$b("design:type", Function)
     ], List.prototype, "beforeDragging", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Function)
+        __metadata$b("design:type", Function)
     ], List.prototype, "onDragging", void 0);
-    __decorate$a([
+    __decorate$b([
         Property,
-        __metadata$a("design:type", Function)
+        __metadata$b("design:type", Function)
     ], List.prototype, "onDragged", void 0);
     return List;
 }(Superview));
@@ -2618,7 +2618,7 @@ function listItem(item, config) {
     });
 }
 
-var __extends$c = (undefined && undefined.__extends) || (function () {
+var __extends$d = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -2633,28 +2633,28 @@ var __extends$c = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
     else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$9 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$a = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
 var SlideItem = /** @class */ (function (_super) {
-    __extends$c(SlideItem, _super);
+    __extends$d(SlideItem, _super);
     function SlideItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", String)
+        __metadata$a("design:type", String)
     ], SlideItem.prototype, "identifier", void 0);
     return SlideItem;
 }(Stack));
 var Slider = /** @class */ (function (_super) {
-    __extends$c(Slider, _super);
+    __extends$d(Slider, _super);
     function Slider() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.cachedViews = new Map;
@@ -2697,37 +2697,37 @@ var Slider = /** @class */ (function (_super) {
     Slider.prototype.getSlidedPage = function (context) {
         return this.nativeChannel(context, "getSlidedPage")();
     };
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", Object)
+        __metadata$a("design:type", Object)
     ], Slider.prototype, "itemCount", void 0);
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", Function)
+        __metadata$a("design:type", Function)
     ], Slider.prototype, "renderPage", void 0);
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", Object)
+        __metadata$a("design:type", Object)
     ], Slider.prototype, "batchCount", void 0);
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", Function)
+        __metadata$a("design:type", Function)
     ], Slider.prototype, "onPageSlided", void 0);
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", Boolean)
+        __metadata$a("design:type", Boolean)
     ], Slider.prototype, "loop", void 0);
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", Boolean)
+        __metadata$a("design:type", Boolean)
     ], Slider.prototype, "scrollable", void 0);
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", Boolean)
+        __metadata$a("design:type", Boolean)
     ], Slider.prototype, "bounces", void 0);
-    __decorate$9([
+    __decorate$a([
         Property,
-        __metadata$9("design:type", Object)
+        __metadata$a("design:type", Object)
     ], Slider.prototype, "slideStyle", void 0);
     return Slider;
 }(Superview));
@@ -2755,6 +2755,87 @@ function slideItem(item, config) {
     });
 }
 
+var __extends$c = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) { if (Object.prototype.hasOwnProperty.call(b, p)) { d[p] = b[p]; } } };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            { throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); }
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
+    else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$9 = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
+};
+function scroller(content, config) {
+    return (new Scroller).also(function (v) {
+        v.layoutConfig = layoutConfig().fit();
+        if (config) {
+            v.apply(config);
+        }
+        v.content = content;
+    });
+}
+var Scroller = /** @class */ (function (_super) {
+    __extends$c(Scroller, _super);
+    function Scroller() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Scroller.prototype.allSubviews = function () {
+        return [this.content];
+    };
+    Scroller.prototype.toModel = function () {
+        this.dirtyProps.content = this.content.viewId;
+        return _super.prototype.toModel.call(this);
+    };
+    Scroller.prototype.scrollTo = function (context, offset, animated) {
+        return this.nativeChannel(context, "scrollTo")({ offset: offset, animated: animated });
+    };
+    Scroller.prototype.scrollBy = function (context, offset, animated) {
+        return this.nativeChannel(context, "scrollBy")({ offset: offset, animated: animated });
+    };
+    Object.defineProperty(Scroller.prototype, "innerElement", {
+        set: function (e) {
+            this.content = e;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    __decorate$9([
+        Property,
+        __metadata$9("design:type", Object)
+    ], Scroller.prototype, "contentOffset", void 0);
+    __decorate$9([
+        Property,
+        __metadata$9("design:type", Function)
+    ], Scroller.prototype, "onScroll", void 0);
+    __decorate$9([
+        Property,
+        __metadata$9("design:type", Function)
+    ], Scroller.prototype, "onScrollEnd", void 0);
+    __decorate$9([
+        Property,
+        __metadata$9("design:type", Boolean)
+    ], Scroller.prototype, "scrollable", void 0);
+    __decorate$9([
+        Property,
+        __metadata$9("design:type", Boolean)
+    ], Scroller.prototype, "bounces", void 0);
+    return Scroller;
+}(Superview));
+
 var __extends$b = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -2779,89 +2860,8 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$8 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
-function scroller(content, config) {
-    return (new Scroller).also(function (v) {
-        v.layoutConfig = layoutConfig().fit();
-        if (config) {
-            v.apply(config);
-        }
-        v.content = content;
-    });
-}
-var Scroller = /** @class */ (function (_super) {
-    __extends$b(Scroller, _super);
-    function Scroller() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Scroller.prototype.allSubviews = function () {
-        return [this.content];
-    };
-    Scroller.prototype.toModel = function () {
-        this.dirtyProps.content = this.content.viewId;
-        return _super.prototype.toModel.call(this);
-    };
-    Scroller.prototype.scrollTo = function (context, offset, animated) {
-        return this.nativeChannel(context, "scrollTo")({ offset: offset, animated: animated });
-    };
-    Scroller.prototype.scrollBy = function (context, offset, animated) {
-        return this.nativeChannel(context, "scrollBy")({ offset: offset, animated: animated });
-    };
-    Object.defineProperty(Scroller.prototype, "innerElement", {
-        set: function (e) {
-            this.content = e;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    __decorate$8([
-        Property,
-        __metadata$8("design:type", Object)
-    ], Scroller.prototype, "contentOffset", void 0);
-    __decorate$8([
-        Property,
-        __metadata$8("design:type", Function)
-    ], Scroller.prototype, "onScroll", void 0);
-    __decorate$8([
-        Property,
-        __metadata$8("design:type", Function)
-    ], Scroller.prototype, "onScrollEnd", void 0);
-    __decorate$8([
-        Property,
-        __metadata$8("design:type", Boolean)
-    ], Scroller.prototype, "scrollable", void 0);
-    __decorate$8([
-        Property,
-        __metadata$8("design:type", Boolean)
-    ], Scroller.prototype, "bounces", void 0);
-    return Scroller;
-}(Superview));
-
-var __extends$a = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) { if (Object.prototype.hasOwnProperty.call(b, p)) { d[p] = b[p]; } } };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            { throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); }
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
-    else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata$7 = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
-};
 var Refreshable = /** @class */ (function (_super) {
-    __extends$a(Refreshable, _super);
+    __extends$b(Refreshable, _super);
     function Refreshable() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
@@ -2902,9 +2902,9 @@ var Refreshable = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    __decorate$7([
+    __decorate$8([
         Property,
-        __metadata$7("design:type", Function)
+        __metadata$8("design:type", Function)
     ], Refreshable.prototype, "onRefresh", void 0);
     return Refreshable;
 }(Superview));
@@ -3008,7 +3008,7 @@ exports.Display = void 0;
     Display[Display["NONE"] = 1] = "NONE";
 })(exports.Display || (exports.Display = {}));
 
-var __extends$9 = (undefined && undefined.__extends) || (function () {
+var __extends$a = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -3073,7 +3073,7 @@ exports.jsx = void 0;
     }
     jsx.createElement = createElement;
     var Fragment = /** @class */ (function (_super) {
-        __extends$9(Fragment, _super);
+        __extends$a(Fragment, _super);
         function Fragment() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
@@ -3082,7 +3082,7 @@ exports.jsx = void 0;
     jsx.Fragment = Fragment;
 })(exports.jsx || (exports.jsx = {}));
 
-var __extends$8 = (undefined && undefined.__extends) || (function () {
+var __extends$9 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -3097,16 +3097,16 @@ var __extends$8 = (undefined && undefined.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
     else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$6 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$7 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
-var __read = (undefined && undefined.__read) || function (o, n) {
+var __read$1 = (undefined && undefined.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
     if (!m) { return o; }
     var i = m.call(o), r, ar = [], e;
@@ -3122,7 +3122,7 @@ var __read = (undefined && undefined.__read) || function (o, n) {
     }
     return ar;
 };
-var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+var __spreadArray$1 = (undefined && undefined.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) { for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
             if (!ar) { ar = Array.prototype.slice.call(from, 0, i); }
@@ -3132,22 +3132,22 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 var FlowLayoutItem = /** @class */ (function (_super) {
-    __extends$8(FlowLayoutItem, _super);
+    __extends$9(FlowLayoutItem, _super);
     function FlowLayoutItem() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", String)
+        __metadata$7("design:type", String)
     ], FlowLayoutItem.prototype, "identifier", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Boolean)
+        __metadata$7("design:type", Boolean)
     ], FlowLayoutItem.prototype, "fullSpan", void 0);
     return FlowLayoutItem;
 }(Stack));
 var FlowLayout = /** @class */ (function (_super) {
-    __extends$8(FlowLayout, _super);
+    __extends$9(FlowLayout, _super);
     function FlowLayout() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.cachedViews = new Map;
@@ -3157,7 +3157,7 @@ var FlowLayout = /** @class */ (function (_super) {
         return _this;
     }
     FlowLayout.prototype.allSubviews = function () {
-        var ret = __spreadArray([], __read(this.cachedViews.values()), false);
+        var ret = __spreadArray$1([], __read$1(this.cachedViews.values()), false);
         if (this.loadMoreView) {
             ret.push(this.loadMoreView);
         }
@@ -3208,57 +3208,57 @@ var FlowLayout = /** @class */ (function (_super) {
         }
         return _super.prototype.toModel.call(this);
     };
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Object)
+        __metadata$7("design:type", Object)
     ], FlowLayout.prototype, "columnCount", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Number)
+        __metadata$7("design:type", Number)
     ], FlowLayout.prototype, "columnSpace", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Number)
+        __metadata$7("design:type", Number)
     ], FlowLayout.prototype, "rowSpace", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Object)
+        __metadata$7("design:type", Object)
     ], FlowLayout.prototype, "itemCount", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Function)
+        __metadata$7("design:type", Function)
     ], FlowLayout.prototype, "renderItem", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Object)
+        __metadata$7("design:type", Object)
     ], FlowLayout.prototype, "batchCount", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Function)
+        __metadata$7("design:type", Function)
     ], FlowLayout.prototype, "onLoadMore", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Boolean)
+        __metadata$7("design:type", Boolean)
     ], FlowLayout.prototype, "loadMore", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", FlowLayoutItem)
+        __metadata$7("design:type", FlowLayoutItem)
     ], FlowLayout.prototype, "loadMoreView", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Function)
+        __metadata$7("design:type", Function)
     ], FlowLayout.prototype, "onScroll", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Function)
+        __metadata$7("design:type", Function)
     ], FlowLayout.prototype, "onScrollEnd", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Boolean)
+        __metadata$7("design:type", Boolean)
     ], FlowLayout.prototype, "scrollable", void 0);
-    __decorate$6([
+    __decorate$7([
         Property,
-        __metadata$6("design:type", Boolean)
+        __metadata$7("design:type", Boolean)
     ], FlowLayout.prototype, "bounces", void 0);
     return FlowLayout;
 }(Superview));
@@ -3286,6 +3286,160 @@ function flowItem(item, config) {
     });
 }
 
+var __extends$8 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) { if (Object.prototype.hasOwnProperty.call(b, p)) { d[p] = b[p]; } } };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            { throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); }
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
+    else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata$6 = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
+};
+exports.ReturnKeyType = void 0;
+(function (ReturnKeyType) {
+    ReturnKeyType[ReturnKeyType["Default"] = 0] = "Default";
+    ReturnKeyType[ReturnKeyType["Done"] = 1] = "Done";
+    ReturnKeyType[ReturnKeyType["Search"] = 2] = "Search";
+    ReturnKeyType[ReturnKeyType["Next"] = 3] = "Next";
+    ReturnKeyType[ReturnKeyType["Go"] = 4] = "Go";
+    ReturnKeyType[ReturnKeyType["Send"] = 5] = "Send";
+})(exports.ReturnKeyType || (exports.ReturnKeyType = {}));
+var Input = /** @class */ (function (_super) {
+    __extends$8(Input, _super);
+    function Input() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Input.prototype.getText = function (context) {
+        return this.nativeChannel(context, 'getText')();
+    };
+    Input.prototype.setSelection = function (context, start, end) {
+        if (end === void 0) { end = start; }
+        return this.nativeChannel(context, 'setSelection')({
+            start: start,
+            end: end,
+        });
+    };
+    Input.prototype.getSelection = function (context) {
+        return this.nativeChannel(context, 'getSelection')();
+    };
+    Input.prototype.requestFocus = function (context) {
+        return this.nativeChannel(context, 'requestFocus')();
+    };
+    Input.prototype.releaseFocus = function (context) {
+        return this.nativeChannel(context, 'releaseFocus')();
+    };
+    __decorate$6([
+        InconsistProperty,
+        __metadata$6("design:type", String)
+    ], Input.prototype, "text", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Color)
+    ], Input.prototype, "textColor", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Number)
+    ], Input.prototype, "textSize", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", String)
+    ], Input.prototype, "font", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", String)
+    ], Input.prototype, "hintText", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", String)
+    ], Input.prototype, "hintFont", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Number)
+    ], Input.prototype, "inputType", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Color)
+    ], Input.prototype, "hintTextColor", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Boolean)
+    ], Input.prototype, "multiline", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Gravity)
+    ], Input.prototype, "textAlignment", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Function)
+    ], Input.prototype, "onTextChange", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Function)
+    ], Input.prototype, "onFocusChange", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Number)
+    ], Input.prototype, "maxLength", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Boolean)
+    ], Input.prototype, "password", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Boolean)
+    ], Input.prototype, "editable", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Number)
+    ], Input.prototype, "returnKeyType", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Function)
+    ], Input.prototype, "onSubmitEditing", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Boolean)
+    ], Input.prototype, "enableHorizontalScrollBar", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Boolean)
+    ], Input.prototype, "enableVerticalScrollBar", void 0);
+    __decorate$6([
+        Property,
+        __metadata$6("design:type", Function)
+    ], Input.prototype, "beforeTextChange", void 0);
+    return Input;
+}(View));
+exports.InputType = void 0;
+(function (InputType) {
+    InputType[InputType["Default"] = 0] = "Default";
+    InputType[InputType["Number"] = 1] = "Number";
+    InputType[InputType["Decimal"] = 2] = "Decimal";
+    InputType[InputType["Alphabet"] = 3] = "Alphabet";
+    InputType[InputType["Phone"] = 4] = "Phone";
+})(exports.InputType || (exports.InputType = {}));
+function input(config) {
+    var ret = new Input;
+    ret.layoutConfig = layoutConfig().just();
+    ret.apply(config);
+    return ret;
+}
+
 var __extends$7 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -3310,135 +3464,35 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$5 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
-exports.ReturnKeyType = void 0;
-(function (ReturnKeyType) {
-    ReturnKeyType[ReturnKeyType["Default"] = 0] = "Default";
-    ReturnKeyType[ReturnKeyType["Done"] = 1] = "Done";
-    ReturnKeyType[ReturnKeyType["Search"] = 2] = "Search";
-    ReturnKeyType[ReturnKeyType["Next"] = 3] = "Next";
-    ReturnKeyType[ReturnKeyType["Go"] = 4] = "Go";
-    ReturnKeyType[ReturnKeyType["Send"] = 5] = "Send";
-})(exports.ReturnKeyType || (exports.ReturnKeyType = {}));
-var Input = /** @class */ (function (_super) {
-    __extends$7(Input, _super);
-    function Input() {
+var NestedSlider = /** @class */ (function (_super) {
+    __extends$7(NestedSlider, _super);
+    function NestedSlider() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    Input.prototype.getText = function (context) {
-        return this.nativeChannel(context, 'getText')();
+    NestedSlider.prototype.addSlideItem = function (view) {
+        this.addChild(view);
     };
-    Input.prototype.setSelection = function (context, start, end) {
-        if (end === void 0) { end = start; }
-        return this.nativeChannel(context, 'setSelection')({
-            start: start,
-            end: end,
-        });
+    NestedSlider.prototype.slidePage = function (context, page, smooth) {
+        if (smooth === void 0) { smooth = false; }
+        return this.nativeChannel(context, "slidePage")({ page: page, smooth: smooth });
     };
-    Input.prototype.getSelection = function (context) {
-        return this.nativeChannel(context, 'getSelection')();
+    NestedSlider.prototype.getSlidedPage = function (context) {
+        return this.nativeChannel(context, "getSlidedPage")();
     };
-    Input.prototype.requestFocus = function (context) {
-        return this.nativeChannel(context, 'requestFocus')();
-    };
-    Input.prototype.releaseFocus = function (context) {
-        return this.nativeChannel(context, 'releaseFocus')();
-    };
-    __decorate$5([
-        InconsistProperty,
-        __metadata$5("design:type", String)
-    ], Input.prototype, "text", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Color)
-    ], Input.prototype, "textColor", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Number)
-    ], Input.prototype, "textSize", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", String)
-    ], Input.prototype, "font", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", String)
-    ], Input.prototype, "hintText", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", String)
-    ], Input.prototype, "hintFont", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Number)
-    ], Input.prototype, "inputType", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Color)
-    ], Input.prototype, "hintTextColor", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Boolean)
-    ], Input.prototype, "multiline", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Gravity)
-    ], Input.prototype, "textAlignment", void 0);
     __decorate$5([
         Property,
         __metadata$5("design:type", Function)
-    ], Input.prototype, "onTextChange", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Function)
-    ], Input.prototype, "onFocusChange", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Number)
-    ], Input.prototype, "maxLength", void 0);
+    ], NestedSlider.prototype, "onPageSlided", void 0);
     __decorate$5([
         Property,
         __metadata$5("design:type", Boolean)
-    ], Input.prototype, "password", void 0);
+    ], NestedSlider.prototype, "scrollable", void 0);
     __decorate$5([
         Property,
         __metadata$5("design:type", Boolean)
-    ], Input.prototype, "editable", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Number)
-    ], Input.prototype, "returnKeyType", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Function)
-    ], Input.prototype, "onSubmitEditing", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Boolean)
-    ], Input.prototype, "enableHorizontalScrollBar", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Boolean)
-    ], Input.prototype, "enableVerticalScrollBar", void 0);
-    __decorate$5([
-        Property,
-        __metadata$5("design:type", Function)
-    ], Input.prototype, "beforeTextChange", void 0);
-    return Input;
-}(View));
-exports.InputType = void 0;
-(function (InputType) {
-    InputType[InputType["Default"] = 0] = "Default";
-    InputType[InputType["Number"] = 1] = "Number";
-    InputType[InputType["Decimal"] = 2] = "Decimal";
-    InputType[InputType["Alphabet"] = 3] = "Alphabet";
-    InputType[InputType["Phone"] = 4] = "Phone";
-})(exports.InputType || (exports.InputType = {}));
-function input(config) {
-    var ret = new Input;
-    ret.layoutConfig = layoutConfig().just();
-    ret.apply(config);
-    return ret;
-}
+    ], NestedSlider.prototype, "bounces", void 0);
+    return NestedSlider;
+}(Group));
 
 var __extends$6 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -3464,35 +3518,39 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$4 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
-var NestedSlider = /** @class */ (function (_super) {
-    __extends$6(NestedSlider, _super);
-    function NestedSlider() {
+/**
+ * @deprecated The class should not be used, please use GestureContainer class instead
+ */
+var Draggable = /** @class */ (function (_super) {
+    __extends$6(Draggable, _super);
+    function Draggable() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    NestedSlider.prototype.addSlideItem = function (view) {
-        this.addChild(view);
-    };
-    NestedSlider.prototype.slidePage = function (context, page, smooth) {
-        if (smooth === void 0) { smooth = false; }
-        return this.nativeChannel(context, "slidePage")({ page: page, smooth: smooth });
-    };
-    NestedSlider.prototype.getSlidedPage = function (context) {
-        return this.nativeChannel(context, "getSlidedPage")();
-    };
     __decorate$4([
         Property,
         __metadata$4("design:type", Function)
-    ], NestedSlider.prototype, "onPageSlided", void 0);
-    __decorate$4([
-        Property,
-        __metadata$4("design:type", Boolean)
-    ], NestedSlider.prototype, "scrollable", void 0);
-    __decorate$4([
-        Property,
-        __metadata$4("design:type", Boolean)
-    ], NestedSlider.prototype, "bounces", void 0);
-    return NestedSlider;
-}(Group));
+    ], Draggable.prototype, "onDrag", void 0);
+    return Draggable;
+}(Stack));
+/**
+ * @deprecated The function should not be used, please use gestureContainer function instead
+ */
+function draggable(views, config) {
+    var ret = new Draggable;
+    ret.layoutConfig = layoutConfig().fit();
+    if (views instanceof View) {
+        ret.addChild(views);
+    }
+    else {
+        views.forEach(function (e) {
+            ret.addChild(e);
+        });
+    }
+    if (config) {
+        ret.apply(config);
+    }
+    return ret;
+}
 
 var __extends$5 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -3518,37 +3576,39 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$3 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
-/**
- * @deprecated The class should not be used, please use GestureContainer class instead
- */
-var Draggable = /** @class */ (function (_super) {
-    __extends$5(Draggable, _super);
-    function Draggable() {
+var Switch = /** @class */ (function (_super) {
+    __extends$5(Switch, _super);
+    function Switch() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate$3([
+        InconsistProperty,
+        __metadata$3("design:type", Boolean)
+    ], Switch.prototype, "state", void 0);
     __decorate$3([
         Property,
         __metadata$3("design:type", Function)
-    ], Draggable.prototype, "onDrag", void 0);
-    return Draggable;
-}(Stack));
-/**
- * @deprecated The function should not be used, please use gestureContainer function instead
- */
-function draggable(views, config) {
-    var ret = new Draggable;
-    ret.layoutConfig = layoutConfig().fit();
-    if (views instanceof View) {
-        ret.addChild(views);
-    }
-    else {
-        views.forEach(function (e) {
-            ret.addChild(e);
-        });
-    }
-    if (config) {
-        ret.apply(config);
-    }
+    ], Switch.prototype, "onSwitch", void 0);
+    __decorate$3([
+        Property,
+        __metadata$3("design:type", Color)
+    ], Switch.prototype, "offTintColor", void 0);
+    __decorate$3([
+        Property,
+        __metadata$3("design:type", Color)
+    ], Switch.prototype, "onTintColor", void 0);
+    __decorate$3([
+        Property,
+        __metadata$3("design:type", Color)
+    ], Switch.prototype, "thumbTintColor", void 0);
+    return Switch;
+}(View));
+function switchView(config) {
+    var ret = new Switch;
+    ret.layoutConfig = layoutConfig().just();
+    ret.width = 50;
+    ret.height = 30;
+    ret.apply(config);
     return ret;
 }
 
@@ -3576,39 +3636,78 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
-var Switch = /** @class */ (function (_super) {
-    __extends$4(Switch, _super);
-    function Switch() {
+exports.SwipeOrientation = void 0;
+(function (SwipeOrientation) {
+    SwipeOrientation[SwipeOrientation["LEFT"] = 0] = "LEFT";
+    SwipeOrientation[SwipeOrientation["RIGHT"] = 1] = "RIGHT";
+    SwipeOrientation[SwipeOrientation["TOP"] = 2] = "TOP";
+    SwipeOrientation[SwipeOrientation["BOTTOM"] = 3] = "BOTTOM";
+})(exports.SwipeOrientation || (exports.SwipeOrientation = {}));
+var GestureContainer = /** @class */ (function (_super) {
+    __extends$4(GestureContainer, _super);
+    function GestureContainer() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     __decorate$2([
-        InconsistProperty,
-        __metadata$2("design:type", Boolean)
-    ], Switch.prototype, "state", void 0);
+        Property,
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onSingleTap", void 0);
     __decorate$2([
         Property,
         __metadata$2("design:type", Function)
-    ], Switch.prototype, "onSwitch", void 0);
+    ], GestureContainer.prototype, "onDoubleTap", void 0);
     __decorate$2([
         Property,
-        __metadata$2("design:type", Color)
-    ], Switch.prototype, "offTintColor", void 0);
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onLongPress", void 0);
     __decorate$2([
         Property,
-        __metadata$2("design:type", Color)
-    ], Switch.prototype, "onTintColor", void 0);
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onPinch", void 0);
     __decorate$2([
         Property,
-        __metadata$2("design:type", Color)
-    ], Switch.prototype, "thumbTintColor", void 0);
-    return Switch;
-}(View));
-function switchView(config) {
-    var ret = new Switch;
-    ret.layoutConfig = layoutConfig().just();
-    ret.width = 50;
-    ret.height = 30;
-    ret.apply(config);
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onPan", void 0);
+    __decorate$2([
+        Property,
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onRotate", void 0);
+    __decorate$2([
+        Property,
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onSwipe", void 0);
+    __decorate$2([
+        Property,
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onTouchDown", void 0);
+    __decorate$2([
+        Property,
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onTouchMove", void 0);
+    __decorate$2([
+        Property,
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onTouchUp", void 0);
+    __decorate$2([
+        Property,
+        __metadata$2("design:type", Function)
+    ], GestureContainer.prototype, "onTouchCancel", void 0);
+    return GestureContainer;
+}(Stack));
+function gestureContainer(views, config) {
+    var ret = new GestureContainer;
+    ret.layoutConfig = layoutConfig().fit();
+    if (views instanceof View) {
+        ret.addChild(views);
+    }
+    else {
+        views.forEach(function (e) {
+            ret.addChild(e);
+        });
+    }
+    if (config) {
+        ret.apply(config);
+    }
     return ret;
 }
 
@@ -3636,132 +3735,33 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
 var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
 };
-exports.SwipeOrientation = void 0;
-(function (SwipeOrientation) {
-    SwipeOrientation[SwipeOrientation["LEFT"] = 0] = "LEFT";
-    SwipeOrientation[SwipeOrientation["RIGHT"] = 1] = "RIGHT";
-    SwipeOrientation[SwipeOrientation["TOP"] = 2] = "TOP";
-    SwipeOrientation[SwipeOrientation["BOTTOM"] = 3] = "BOTTOM";
-})(exports.SwipeOrientation || (exports.SwipeOrientation = {}));
-var GestureContainer = /** @class */ (function (_super) {
-    __extends$3(GestureContainer, _super);
-    function GestureContainer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onSingleTap", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onDoubleTap", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onLongPress", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onPinch", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onPan", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onRotate", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onSwipe", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onTouchDown", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onTouchMove", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onTouchUp", void 0);
-    __decorate$1([
-        Property,
-        __metadata$1("design:type", Function)
-    ], GestureContainer.prototype, "onTouchCancel", void 0);
-    return GestureContainer;
-}(Stack));
-function gestureContainer(views, config) {
-    var ret = new GestureContainer;
-    ret.layoutConfig = layoutConfig().fit();
-    if (views instanceof View) {
-        ret.addChild(views);
-    }
-    else {
-        views.forEach(function (e) {
-            ret.addChild(e);
-        });
-    }
-    if (config) {
-        ret.apply(config);
-    }
-    return ret;
-}
-
-var __extends$2 = (undefined && undefined.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) { if (Object.prototype.hasOwnProperty.call(b, p)) { d[p] = b[p]; } } };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            { throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); }
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
-    else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
-};
 var BlurEffect = /** @class */ (function (_super) {
-    __extends$2(BlurEffect, _super);
+    __extends$3(BlurEffect, _super);
     function BlurEffect() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate([
+    __decorate$1([
         Property,
-        __metadata("design:type", Object)
+        __metadata$1("design:type", Object)
     ], BlurEffect.prototype, "effectiveRect", void 0);
-    __decorate([
+    __decorate$1([
         Property,
-        __metadata("design:type", Number)
+        __metadata$1("design:type", Number)
     ], BlurEffect.prototype, "radius", void 0);
     return BlurEffect;
 }(Stack));
 var AeroEffect = /** @class */ (function (_super) {
-    __extends$2(AeroEffect, _super);
+    __extends$3(AeroEffect, _super);
     function AeroEffect() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
-    __decorate([
+    __decorate$1([
         Property,
-        __metadata("design:type", Object)
+        __metadata$1("design:type", Object)
     ], AeroEffect.prototype, "effectiveRect", void 0);
-    __decorate([
+    __decorate$1([
         Property,
-        __metadata("design:type", String)
+        __metadata$1("design:type", String)
     ], AeroEffect.prototype, "style", void 0);
     return AeroEffect;
 }(Stack));
@@ -3798,6 +3798,230 @@ function aeroEffect(views, config) {
     return ret;
 }
 
+/*
+ * Copyright [2022] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __extends$2 = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) { if (Object.prototype.hasOwnProperty.call(b, p)) { d[p] = b[p]; } } };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            { throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); }
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") { r = Reflect.decorate(decorators, target, key, desc); }
+    else { for (var i = decorators.length - 1; i >= 0; i--) { if (d = decorators[i]) { r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; } } }
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
+};
+var __read = (undefined && undefined.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) { return o; }
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) { ar.push(r.value); }
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) { m.call(i); }
+        }
+        finally { if (e) { throw e.error; } }
+    }
+    return ar;
+};
+var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) { for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) { ar = Array.prototype.slice.call(from, 0, i); }
+            ar[i] = from[i];
+        }
+    } }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var HorizontalListItem = /** @class */ (function (_super) {
+    __extends$2(HorizontalListItem, _super);
+    function HorizontalListItem() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property,
+        __metadata("design:type", String)
+    ], HorizontalListItem.prototype, "identifier", void 0);
+    return HorizontalListItem;
+}(Stack));
+var HorizontalList = /** @class */ (function (_super) {
+    __extends$2(HorizontalList, _super);
+    function HorizontalList() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.cachedViews = new Map;
+        _this.itemCount = 0;
+        _this.batchCount = 15;
+        return _this;
+    }
+    HorizontalList.prototype.allSubviews = function () {
+        var ret = __spreadArray([], __read(this.cachedViews.values()), false);
+        if (this.loadMoreView) {
+            ret.push(this.loadMoreView);
+        }
+        return ret;
+    };
+    HorizontalList.prototype.scrollToItem = function (context, index, config) {
+        var animated = config === null || config === void 0 ? void 0 : config.animated;
+        return this.nativeChannel(context, 'scrollToItem')({ index: index, animated: animated, });
+    };
+    /**
+     * @param context
+     * @returns Returns array of visible view's index.
+     */
+    HorizontalList.prototype.findVisibleItems = function (context) {
+        return this.nativeChannel(context, 'findVisibleItems')();
+    };
+    /**
+     * @param context
+     * @returns Returns array of completely visible view's index.
+     */
+    HorizontalList.prototype.findCompletelyVisibleItems = function (context) {
+        return this.nativeChannel(context, 'findCompletelyVisibleItems')();
+    };
+    /**
+     * Reload all list items.
+     * @param context
+     * @returns
+     */
+    HorizontalList.prototype.reload = function (context) {
+        return this.nativeChannel(context, 'reload')();
+    };
+    HorizontalList.prototype.reset = function () {
+        this.cachedViews.clear();
+        this.itemCount = 0;
+    };
+    HorizontalList.prototype.getItem = function (itemIdx) {
+        var view = this.renderItem(itemIdx);
+        view.superview = this;
+        this.cachedViews.set("".concat(itemIdx), view);
+        return view;
+    };
+    HorizontalList.prototype.renderBunchedItems = function (start, length) {
+        var _this = this;
+        return new Array(Math.max(0, Math.min(length, this.itemCount - start))).fill(0).map(function (_, idx) {
+            var listItem = _this.getItem(start + idx);
+            return listItem.toModel();
+        });
+    };
+    HorizontalList.prototype.toModel = function () {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
+        }
+        return _super.prototype.toModel.call(this);
+    };
+    __decorate([
+        Property,
+        __metadata("design:type", Object)
+    ], HorizontalList.prototype, "itemCount", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], HorizontalList.prototype, "renderItem", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Object)
+    ], HorizontalList.prototype, "batchCount", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], HorizontalList.prototype, "onLoadMore", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Boolean)
+    ], HorizontalList.prototype, "loadMore", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", HorizontalListItem)
+    ], HorizontalList.prototype, "loadMoreView", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], HorizontalList.prototype, "onScroll", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], HorizontalList.prototype, "onScrollEnd", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Number)
+    ], HorizontalList.prototype, "scrolledPosition", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Boolean)
+    ], HorizontalList.prototype, "scrollable", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Boolean)
+    ], HorizontalList.prototype, "bounces", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Boolean)
+    ], HorizontalList.prototype, "canDrag", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], HorizontalList.prototype, "beforeDragging", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], HorizontalList.prototype, "onDragging", void 0);
+    __decorate([
+        Property,
+        __metadata("design:type", Function)
+    ], HorizontalList.prototype, "onDragged", void 0);
+    return HorizontalList;
+}(Superview));
+function horizontalList(config) {
+    var ret = new HorizontalList;
+    ret.apply(config);
+    return ret;
+}
+function horizontalListItem(item, config) {
+    return (new HorizontalListItem).also(function (it) {
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
+            it.addChild(item);
+        }
+        else {
+            item.forEach(function (e) {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            it.apply(config);
+        }
+    });
+}
+
 function modal(context) {
     return {
         toast: function (msg, gravity) {
@@ -4706,6 +4930,8 @@ exports.GestureContainer = GestureContainer;
 exports.Gravity = Gravity;
 exports.Group = Group;
 exports.HLayout = HLayout;
+exports.HorizontalList = HorizontalList;
+exports.HorizontalListItem = HorizontalListItem;
 exports.Image = Image;
 exports.InconsistProperty = InconsistProperty;
 exports.Input = Input;
@@ -4763,6 +4989,8 @@ exports.flowlayout = flowlayout;
 exports.gestureContainer = gestureContainer;
 exports.gravity = gravity;
 exports.hlayout = hlayout;
+exports.horizontalList = horizontalList;
+exports.horizontalListItem = horizontalListItem;
 exports.iOSResource = iOSResource;
 exports.image = image;
 exports.imageDecoder = imageDecoder;
diff --git a/doric-js/bundle/doric-lib.js b/doric-js/bundle/doric-lib.js
index b8e0ef4a..2fc80db2 100644
--- a/doric-js/bundle/doric-lib.js
+++ b/doric-js/bundle/doric-lib.js
@@ -119,13 +119,13 @@ function logw(...message) {
     nativeLog('w', out);
 }
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$f = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$g = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 const PROP_CONSIST = 1;
@@ -375,101 +375,101 @@ class View {
         return true;
     }
 }
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "width", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "height", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "x", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "y", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "backgroundColor", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "corners", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "border", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "shadow", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "alpha", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Boolean)
+    __metadata$g("design:type", Boolean)
 ], View.prototype, "hidden", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "padding", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "layoutConfig", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Function)
+    __metadata$g("design:type", Function)
 ], View.prototype, "onClick", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "translationX", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "translationY", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "scaleX", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "scaleY", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "pivotX", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "pivotY", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "rotation", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "rotationX", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "rotationY", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "perspective", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "flexConfig", void 0);
 class Superview extends View {
     subviewById(id) {
@@ -768,13 +768,13 @@ function layoutConfig() {
     return new LayoutConfigImpl;
 }
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$e = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$f = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class Stack extends Group {
@@ -783,13 +783,13 @@ class Root extends Stack {
 }
 class LinearLayout extends Group {
 }
-__decorate$e([
+__decorate$f([
     Property,
-    __metadata$e("design:type", Number)
+    __metadata$f("design:type", Number)
 ], LinearLayout.prototype, "space", void 0);
-__decorate$e([
+__decorate$f([
     Property,
-    __metadata$e("design:type", Gravity)
+    __metadata$f("design:type", Gravity)
 ], LinearLayout.prototype, "gravity", void 0);
 class VLayout extends LinearLayout {
 }
@@ -842,13 +842,13 @@ function flexlayout(views, config) {
     return ret;
 }
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$e = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 function NativeCall(target, propertyKey, descriptor) {
@@ -1035,71 +1035,71 @@ class Panel {
         this.onRenderFinishedCallback.push(cb);
     }
 }
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", [String]),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", [String]),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__init__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onCreate__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onDestroy__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onShow__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onHidden__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", [Object]),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", [Object]),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__build__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onEnvChanged__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", [Array, String]),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", [Array, String]),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__response__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__renderSnapshotDepth__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", [Number]),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", [Number]),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__restoreRenderSnapshot__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__enableSnapshot__", null);
 
 /**
@@ -1531,13 +1531,13 @@ class AnimationSet {
     }
 }
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$c = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 exports.TruncateAt = void 0;
@@ -1552,61 +1552,61 @@ class Text extends View {
         this.text = e;
     }
 }
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", String)
+    __metadata$d("design:type", String)
 ], Text.prototype, "text", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Object)
+    __metadata$d("design:type", Object)
 ], Text.prototype, "textColor", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "textSize", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "maxLines", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Gravity)
+    __metadata$d("design:type", Gravity)
 ], Text.prototype, "textAlignment", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", String)
+    __metadata$d("design:type", String)
 ], Text.prototype, "fontStyle", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Object)
+    __metadata$d("design:type", Object)
 ], Text.prototype, "font", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "maxWidth", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "maxHeight", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "lineSpacing", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Boolean)
+    __metadata$d("design:type", Boolean)
 ], Text.prototype, "strikethrough", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Boolean)
+    __metadata$d("design:type", Boolean)
 ], Text.prototype, "underline", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", String)
+    __metadata$d("design:type", String)
 ], Text.prototype, "htmlText", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "truncateAt", void 0);
 function text(config) {
     const ret = new Text;
@@ -1699,13 +1699,13 @@ class ArrayBufferResource extends Resource {
     }
 }
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$b = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$c = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 exports.ScaleType = void 0;
@@ -1735,86 +1735,86 @@ class Image extends View {
         return this.nativeChannel(context, "setImagePixels")(image);
     }
 }
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Object)
+    __metadata$c("design:type", Object)
 ], Image.prototype, "imagePixels", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Resource)
+    __metadata$c("design:type", Resource)
 ], Image.prototype, "image", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imageUrl", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imageFilePath", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imagePath", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imageRes", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imageBase64", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Number)
+    __metadata$c("design:type", Number)
 ], Image.prototype, "scaleType", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Boolean)
+    __metadata$c("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "placeHolderImage", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "placeHolderImageBase64", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Color
+    __metadata$c("design:type", Color
     /**
      * Display while image is failed to load
      * It can be file name in local path
      */
     )
 ], Image.prototype, "placeHolderColor", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "errorImage", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "errorImageBase64", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Color)
+    __metadata$c("design:type", Color)
 ], Image.prototype, "errorColor", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Function)
+    __metadata$c("design:type", Function)
 ], Image.prototype, "loadCallback", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Number)
+    __metadata$c("design:type", Number)
 ], Image.prototype, "imageScale", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Object)
+    __metadata$c("design:type", Object)
 ], Image.prototype, "stretchInset", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Function)
+    __metadata$c("design:type", Function)
 ], Image.prototype, "onAnimationEnd", void 0);
 function image(config) {
     const ret = new Image;
@@ -1838,24 +1838,24 @@ function image(config) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$a = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$b = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class ListItem extends Stack {
 }
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", String)
+    __metadata$b("design:type", String)
 ], ListItem.prototype, "identifier", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Array)
+    __metadata$b("design:type", Array)
 ], ListItem.prototype, "actions", void 0);
 class List extends Superview {
     constructor() {
@@ -1920,65 +1920,65 @@ class List extends Superview {
         return super.toModel();
     }
 }
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Object)
+    __metadata$b("design:type", Object)
 ], List.prototype, "itemCount", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "renderItem", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Object)
+    __metadata$b("design:type", Object)
 ], List.prototype, "batchCount", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onLoadMore", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Boolean)
+    __metadata$b("design:type", Boolean)
 ], List.prototype, "loadMore", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", ListItem)
+    __metadata$b("design:type", ListItem)
 ], List.prototype, "loadMoreView", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onScroll", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onScrollEnd", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Number)
+    __metadata$b("design:type", Number)
 ], List.prototype, "scrolledPosition", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Boolean)
+    __metadata$b("design:type", Boolean)
 ], List.prototype, "scrollable", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Boolean)
+    __metadata$b("design:type", Boolean)
 ], List.prototype, "bounces", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Boolean)
+    __metadata$b("design:type", Boolean)
 ], List.prototype, "canDrag", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "beforeDragging", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onDragging", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onDragged", void 0);
 function list(config) {
     const ret = new List;
@@ -2002,20 +2002,20 @@ function listItem(item, config) {
     });
 }
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$9 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$a = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class SlideItem extends Stack {
 }
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", String)
+    __metadata$a("design:type", String)
 ], SlideItem.prototype, "identifier", void 0);
 class Slider extends Superview {
     constructor() {
@@ -2058,37 +2058,37 @@ class Slider extends Superview {
         return this.nativeChannel(context, "getSlidedPage")();
     }
 }
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Object)
+    __metadata$a("design:type", Object)
 ], Slider.prototype, "itemCount", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Function)
+    __metadata$a("design:type", Function)
 ], Slider.prototype, "renderPage", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Object)
+    __metadata$a("design:type", Object)
 ], Slider.prototype, "batchCount", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Function)
+    __metadata$a("design:type", Function)
 ], Slider.prototype, "onPageSlided", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Boolean)
+    __metadata$a("design:type", Boolean)
 ], Slider.prototype, "loop", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Boolean)
+    __metadata$a("design:type", Boolean)
 ], Slider.prototype, "scrollable", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Boolean)
+    __metadata$a("design:type", Boolean)
 ], Slider.prototype, "bounces", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Object)
+    __metadata$a("design:type", Object)
 ], Slider.prototype, "slideStyle", void 0);
 function slider(config) {
     const ret = new Slider;
@@ -2114,13 +2114,13 @@ function slideItem(item, config) {
     });
 }
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$8 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$9 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 function scroller(content, config) {
@@ -2150,34 +2150,34 @@ class Scroller extends Superview {
         this.content = e;
     }
 }
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Object)
+    __metadata$9("design:type", Object)
 ], Scroller.prototype, "contentOffset", void 0);
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Function)
+    __metadata$9("design:type", Function)
 ], Scroller.prototype, "onScroll", void 0);
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Function)
+    __metadata$9("design:type", Function)
 ], Scroller.prototype, "onScrollEnd", void 0);
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Boolean)
+    __metadata$9("design:type", Boolean)
 ], Scroller.prototype, "scrollable", void 0);
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Boolean)
+    __metadata$9("design:type", Boolean)
 ], Scroller.prototype, "bounces", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$7 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$8 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class Refreshable extends Superview {
@@ -2215,9 +2215,9 @@ class Refreshable extends Superview {
         }
     }
 }
-__decorate$7([
+__decorate$8([
     Property,
-    __metadata$7("design:type", Function)
+    __metadata$8("design:type", Function)
 ], Refreshable.prototype, "onRefresh", void 0);
 function refreshable(config) {
     const ret = new Refreshable;
@@ -2366,24 +2366,24 @@ exports.jsx = void 0;
     jsx.Fragment = Fragment;
 })(exports.jsx || (exports.jsx = {}));
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$6 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$7 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class FlowLayoutItem extends Stack {
 }
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", String)
+    __metadata$7("design:type", String)
 ], FlowLayoutItem.prototype, "identifier", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Boolean)
+    __metadata$7("design:type", Boolean)
 ], FlowLayoutItem.prototype, "fullSpan", void 0);
 class FlowLayout extends Superview {
     constructor() {
@@ -2445,57 +2445,57 @@ class FlowLayout extends Superview {
         return super.toModel();
     }
 }
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Object)
+    __metadata$7("design:type", Object)
 ], FlowLayout.prototype, "columnCount", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Number)
+    __metadata$7("design:type", Number)
 ], FlowLayout.prototype, "columnSpace", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Number)
+    __metadata$7("design:type", Number)
 ], FlowLayout.prototype, "rowSpace", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Object)
+    __metadata$7("design:type", Object)
 ], FlowLayout.prototype, "itemCount", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Function)
+    __metadata$7("design:type", Function)
 ], FlowLayout.prototype, "renderItem", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Object)
+    __metadata$7("design:type", Object)
 ], FlowLayout.prototype, "batchCount", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Function)
+    __metadata$7("design:type", Function)
 ], FlowLayout.prototype, "onLoadMore", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Boolean)
+    __metadata$7("design:type", Boolean)
 ], FlowLayout.prototype, "loadMore", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", FlowLayoutItem)
+    __metadata$7("design:type", FlowLayoutItem)
 ], FlowLayout.prototype, "loadMoreView", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Function)
+    __metadata$7("design:type", Function)
 ], FlowLayout.prototype, "onScroll", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Function)
+    __metadata$7("design:type", Function)
 ], FlowLayout.prototype, "onScrollEnd", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Boolean)
+    __metadata$7("design:type", Boolean)
 ], FlowLayout.prototype, "scrollable", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Boolean)
+    __metadata$7("design:type", Boolean)
 ], FlowLayout.prototype, "bounces", void 0);
 function flowlayout(config) {
     const ret = new FlowLayout;
@@ -2521,13 +2521,13 @@ function flowItem(item, config) {
     });
 }
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$5 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$6 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 exports.ReturnKeyType = void 0;
@@ -2559,85 +2559,85 @@ class Input extends View {
         return this.nativeChannel(context, 'releaseFocus')();
     }
 }
-__decorate$5([
+__decorate$6([
     InconsistProperty,
-    __metadata$5("design:type", String)
+    __metadata$6("design:type", String)
 ], Input.prototype, "text", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Color)
+    __metadata$6("design:type", Color)
 ], Input.prototype, "textColor", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Number)
+    __metadata$6("design:type", Number)
 ], Input.prototype, "textSize", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", String)
+    __metadata$6("design:type", String)
 ], Input.prototype, "font", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", String)
+    __metadata$6("design:type", String)
 ], Input.prototype, "hintText", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", String)
+    __metadata$6("design:type", String)
 ], Input.prototype, "hintFont", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Number)
+    __metadata$6("design:type", Number)
 ], Input.prototype, "inputType", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Color)
+    __metadata$6("design:type", Color)
 ], Input.prototype, "hintTextColor", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "multiline", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Gravity)
+    __metadata$6("design:type", Gravity)
 ], Input.prototype, "textAlignment", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Function)
+    __metadata$6("design:type", Function)
 ], Input.prototype, "onTextChange", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Function)
+    __metadata$6("design:type", Function)
 ], Input.prototype, "onFocusChange", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Number)
+    __metadata$6("design:type", Number)
 ], Input.prototype, "maxLength", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "password", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "editable", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Number)
+    __metadata$6("design:type", Number)
 ], Input.prototype, "returnKeyType", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Function)
+    __metadata$6("design:type", Function)
 ], Input.prototype, "onSubmitEditing", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "enableHorizontalScrollBar", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "enableVerticalScrollBar", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Function)
+    __metadata$6("design:type", Function)
 ], Input.prototype, "beforeTextChange", void 0);
 exports.InputType = void 0;
 (function (InputType) {
@@ -2654,13 +2654,13 @@ function input(config) {
     return ret;
 }
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$4 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$5 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class NestedSlider extends Group {
@@ -2674,26 +2674,26 @@ class NestedSlider extends Group {
         return this.nativeChannel(context, "getSlidedPage")();
     }
 }
-__decorate$4([
+__decorate$5([
     Property,
-    __metadata$4("design:type", Function)
+    __metadata$5("design:type", Function)
 ], NestedSlider.prototype, "onPageSlided", void 0);
-__decorate$4([
+__decorate$5([
     Property,
-    __metadata$4("design:type", Boolean)
+    __metadata$5("design:type", Boolean)
 ], NestedSlider.prototype, "scrollable", void 0);
-__decorate$4([
+__decorate$5([
     Property,
-    __metadata$4("design:type", Boolean)
+    __metadata$5("design:type", Boolean)
 ], NestedSlider.prototype, "bounces", void 0);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$3 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$4 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 /**
@@ -2701,9 +2701,9 @@ var __metadata$3 = (undefined && undefined.__metadata) || function (k, v) {
  */
 class Draggable extends Stack {
 }
-__decorate$3([
+__decorate$4([
     Property,
-    __metadata$3("design:type", Function)
+    __metadata$4("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
 /**
  * @deprecated The function should not be used, please use gestureContainer function instead
@@ -2725,36 +2725,36 @@ function draggable(views, config) {
     return ret;
 }
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$3 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class Switch extends View {
 }
-__decorate$2([
+__decorate$3([
     InconsistProperty,
-    __metadata$2("design:type", Boolean)
+    __metadata$3("design:type", Boolean)
 ], Switch.prototype, "state", void 0);
-__decorate$2([
+__decorate$3([
     Property,
-    __metadata$2("design:type", Function)
+    __metadata$3("design:type", Function)
 ], Switch.prototype, "onSwitch", void 0);
-__decorate$2([
+__decorate$3([
     Property,
-    __metadata$2("design:type", Color)
+    __metadata$3("design:type", Color)
 ], Switch.prototype, "offTintColor", void 0);
-__decorate$2([
+__decorate$3([
     Property,
-    __metadata$2("design:type", Color)
+    __metadata$3("design:type", Color)
 ], Switch.prototype, "onTintColor", void 0);
-__decorate$2([
+__decorate$3([
     Property,
-    __metadata$2("design:type", Color)
+    __metadata$3("design:type", Color)
 ], Switch.prototype, "thumbTintColor", void 0);
 function switchView(config) {
     const ret = new Switch;
@@ -2765,13 +2765,13 @@ function switchView(config) {
     return ret;
 }
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 exports.SwipeOrientation = void 0;
@@ -2783,49 +2783,49 @@ exports.SwipeOrientation = void 0;
 })(exports.SwipeOrientation || (exports.SwipeOrientation = {}));
 class GestureContainer extends Stack {
 }
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onSingleTap", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onDoubleTap", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onLongPress", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onPinch", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onPan", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onRotate", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onSwipe", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onTouchDown", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onTouchMove", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onTouchUp", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onTouchCancel", void 0);
 function gestureContainer(views, config) {
     const ret = new GestureContainer;
@@ -2844,34 +2844,34 @@ function gestureContainer(views, config) {
     return ret;
 }
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class BlurEffect extends Stack {
 }
-__decorate([
+__decorate$1([
     Property,
-    __metadata("design:type", Object)
+    __metadata$1("design:type", Object)
 ], BlurEffect.prototype, "effectiveRect", void 0);
-__decorate([
+__decorate$1([
     Property,
-    __metadata("design:type", Number)
+    __metadata$1("design:type", Number)
 ], BlurEffect.prototype, "radius", void 0);
 class AeroEffect extends Stack {
 }
-__decorate([
+__decorate$1([
     Property,
-    __metadata("design:type", Object)
+    __metadata$1("design:type", Object)
 ], AeroEffect.prototype, "effectiveRect", void 0);
-__decorate([
+__decorate$1([
     Property,
-    __metadata("design:type", String)
+    __metadata$1("design:type", String)
 ], AeroEffect.prototype, "style", void 0);
 function blurEffect(views, config) {
     const ret = new BlurEffect;
@@ -2906,6 +2906,181 @@ function aeroEffect(views, config) {
     return ret;
 }
 
+/*
+ * Copyright [2022] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+class HorizontalListItem extends Stack {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], HorizontalListItem.prototype, "identifier", void 0);
+class HorizontalList extends Superview {
+    constructor() {
+        super(...arguments);
+        this.cachedViews = new Map;
+        this.itemCount = 0;
+        this.batchCount = 15;
+    }
+    allSubviews() {
+        const ret = [...this.cachedViews.values()];
+        if (this.loadMoreView) {
+            ret.push(this.loadMoreView);
+        }
+        return ret;
+    }
+    scrollToItem(context, index, config) {
+        const animated = config === null || config === void 0 ? void 0 : config.animated;
+        return this.nativeChannel(context, 'scrollToItem')({ index, animated, });
+    }
+    /**
+     * @param context
+     * @returns Returns array of visible view's index.
+     */
+    findVisibleItems(context) {
+        return this.nativeChannel(context, 'findVisibleItems')();
+    }
+    /**
+     * @param context
+     * @returns Returns array of completely visible view's index.
+     */
+    findCompletelyVisibleItems(context) {
+        return this.nativeChannel(context, 'findCompletelyVisibleItems')();
+    }
+    /**
+     * Reload all list items.
+     * @param context
+     * @returns
+     */
+    reload(context) {
+        return this.nativeChannel(context, 'reload')();
+    }
+    reset() {
+        this.cachedViews.clear();
+        this.itemCount = 0;
+    }
+    getItem(itemIdx) {
+        let view = this.renderItem(itemIdx);
+        view.superview = this;
+        this.cachedViews.set(`${itemIdx}`, view);
+        return view;
+    }
+    renderBunchedItems(start, length) {
+        return new Array(Math.max(0, Math.min(length, this.itemCount - start))).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx);
+            return listItem.toModel();
+        });
+    }
+    toModel() {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
+        }
+        return super.toModel();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], HorizontalList.prototype, "itemCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "renderItem", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], HorizontalList.prototype, "batchCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onLoadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "loadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", HorizontalListItem)
+], HorizontalList.prototype, "loadMoreView", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onScroll", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onScrollEnd", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], HorizontalList.prototype, "scrolledPosition", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "scrollable", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "bounces", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "canDrag", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "beforeDragging", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onDragging", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onDragged", void 0);
+function horizontalList(config) {
+    const ret = new HorizontalList;
+    ret.apply(config);
+    return ret;
+}
+function horizontalListItem(item, config) {
+    return (new HorizontalListItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
+            it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            it.apply(config);
+        }
+    });
+}
+
 function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
@@ -3624,6 +3799,8 @@ exports.GestureContainer = GestureContainer;
 exports.Gravity = Gravity;
 exports.Group = Group;
 exports.HLayout = HLayout;
+exports.HorizontalList = HorizontalList;
+exports.HorizontalListItem = HorizontalListItem;
 exports.Image = Image;
 exports.InconsistProperty = InconsistProperty;
 exports.Input = Input;
@@ -3681,6 +3858,8 @@ exports.flowlayout = flowlayout;
 exports.gestureContainer = gestureContainer;
 exports.gravity = gravity;
 exports.hlayout = hlayout;
+exports.horizontalList = horizontalList;
+exports.horizontalListItem = horizontalListItem;
 exports.iOSResource = iOSResource;
 exports.image = image;
 exports.imageDecoder = imageDecoder;
diff --git a/doric-js/bundle/doric-vm.js b/doric-js/bundle/doric-vm.js
index 8d84268a..0ce9237b 100644
--- a/doric-js/bundle/doric-vm.js
+++ b/doric-js/bundle/doric-vm.js
@@ -1649,13 +1649,13 @@ class Mutable {
     }
 }
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$f = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$g = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 const PROP_CONSIST = 1;
@@ -1905,101 +1905,101 @@ class View {
         return true;
     }
 }
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "width", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "height", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "x", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "y", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "backgroundColor", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "corners", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "border", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "shadow", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "alpha", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Boolean)
+    __metadata$g("design:type", Boolean)
 ], View.prototype, "hidden", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "padding", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "layoutConfig", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Function)
+    __metadata$g("design:type", Function)
 ], View.prototype, "onClick", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "translationX", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "translationY", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "scaleX", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "scaleY", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "pivotX", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "pivotY", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "rotation", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "rotationX", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "rotationY", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Number)
+    __metadata$g("design:type", Number)
 ], View.prototype, "perspective", void 0);
-__decorate$f([
+__decorate$g([
     Property,
-    __metadata$f("design:type", Object)
+    __metadata$g("design:type", Object)
 ], View.prototype, "flexConfig", void 0);
 class Superview extends View {
     subviewById(id) {
@@ -2298,13 +2298,13 @@ function layoutConfig() {
     return new LayoutConfigImpl;
 }
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$e = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$f = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class Stack extends Group {
@@ -2313,13 +2313,13 @@ class Root extends Stack {
 }
 class LinearLayout extends Group {
 }
-__decorate$e([
+__decorate$f([
     Property,
-    __metadata$e("design:type", Number)
+    __metadata$f("design:type", Number)
 ], LinearLayout.prototype, "space", void 0);
-__decorate$e([
+__decorate$f([
     Property,
-    __metadata$e("design:type", Gravity)
+    __metadata$f("design:type", Gravity)
 ], LinearLayout.prototype, "gravity", void 0);
 class VLayout extends LinearLayout {
 }
@@ -2372,13 +2372,13 @@ function flexlayout(views, config) {
     return ret;
 }
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$e = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 function NativeCall(target, propertyKey, descriptor) {
@@ -2565,71 +2565,71 @@ class Panel {
         this.onRenderFinishedCallback.push(cb);
     }
 }
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", [String]),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", [String]),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__init__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onCreate__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onDestroy__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onShow__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onHidden__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", [Object]),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", [Object]),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__build__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__onEnvChanged__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", [Array, String]),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", [Array, String]),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__response__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__renderSnapshotDepth__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", [Number]),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", [Number]),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__restoreRenderSnapshot__", null);
-__decorate$d([
+__decorate$e([
     NativeCall,
-    __metadata$d("design:type", Function),
-    __metadata$d("design:paramtypes", []),
-    __metadata$d("design:returntype", void 0)
+    __metadata$e("design:type", Function),
+    __metadata$e("design:paramtypes", []),
+    __metadata$e("design:returntype", void 0)
 ], Panel.prototype, "__enableSnapshot__", null);
 
 /**
@@ -3061,13 +3061,13 @@ class AnimationSet {
     }
 }
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$c = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$d = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 exports.TruncateAt = void 0;
@@ -3082,61 +3082,61 @@ class Text extends View {
         this.text = e;
     }
 }
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", String)
+    __metadata$d("design:type", String)
 ], Text.prototype, "text", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Object)
+    __metadata$d("design:type", Object)
 ], Text.prototype, "textColor", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "textSize", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "maxLines", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Gravity)
+    __metadata$d("design:type", Gravity)
 ], Text.prototype, "textAlignment", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", String)
+    __metadata$d("design:type", String)
 ], Text.prototype, "fontStyle", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Object)
+    __metadata$d("design:type", Object)
 ], Text.prototype, "font", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "maxWidth", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "maxHeight", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "lineSpacing", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Boolean)
+    __metadata$d("design:type", Boolean)
 ], Text.prototype, "strikethrough", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Boolean)
+    __metadata$d("design:type", Boolean)
 ], Text.prototype, "underline", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", String)
+    __metadata$d("design:type", String)
 ], Text.prototype, "htmlText", void 0);
-__decorate$c([
+__decorate$d([
     Property,
-    __metadata$c("design:type", Number)
+    __metadata$d("design:type", Number)
 ], Text.prototype, "truncateAt", void 0);
 function text(config) {
     const ret = new Text;
@@ -3229,13 +3229,13 @@ class ArrayBufferResource extends Resource {
     }
 }
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$b = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$c = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 exports.ScaleType = void 0;
@@ -3265,86 +3265,86 @@ class Image extends View {
         return this.nativeChannel(context, "setImagePixels")(image);
     }
 }
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Object)
+    __metadata$c("design:type", Object)
 ], Image.prototype, "imagePixels", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Resource)
+    __metadata$c("design:type", Resource)
 ], Image.prototype, "image", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imageUrl", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imageFilePath", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imagePath", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imageRes", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "imageBase64", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Number)
+    __metadata$c("design:type", Number)
 ], Image.prototype, "scaleType", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Boolean)
+    __metadata$c("design:type", Boolean)
 ], Image.prototype, "isBlur", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "placeHolderImage", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "placeHolderImageBase64", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Color
+    __metadata$c("design:type", Color
     /**
      * Display while image is failed to load
      * It can be file name in local path
      */
     )
 ], Image.prototype, "placeHolderColor", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "errorImage", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", String)
+    __metadata$c("design:type", String)
 ], Image.prototype, "errorImageBase64", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Color)
+    __metadata$c("design:type", Color)
 ], Image.prototype, "errorColor", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Function)
+    __metadata$c("design:type", Function)
 ], Image.prototype, "loadCallback", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Number)
+    __metadata$c("design:type", Number)
 ], Image.prototype, "imageScale", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Object)
+    __metadata$c("design:type", Object)
 ], Image.prototype, "stretchInset", void 0);
-__decorate$b([
+__decorate$c([
     Property,
-    __metadata$b("design:type", Function)
+    __metadata$c("design:type", Function)
 ], Image.prototype, "onAnimationEnd", void 0);
 function image(config) {
     const ret = new Image;
@@ -3368,24 +3368,24 @@ function image(config) {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$a = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$b = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class ListItem extends Stack {
 }
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", String)
+    __metadata$b("design:type", String)
 ], ListItem.prototype, "identifier", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Array)
+    __metadata$b("design:type", Array)
 ], ListItem.prototype, "actions", void 0);
 class List extends Superview {
     constructor() {
@@ -3450,65 +3450,65 @@ class List extends Superview {
         return super.toModel();
     }
 }
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Object)
+    __metadata$b("design:type", Object)
 ], List.prototype, "itemCount", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "renderItem", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Object)
+    __metadata$b("design:type", Object)
 ], List.prototype, "batchCount", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onLoadMore", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Boolean)
+    __metadata$b("design:type", Boolean)
 ], List.prototype, "loadMore", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", ListItem)
+    __metadata$b("design:type", ListItem)
 ], List.prototype, "loadMoreView", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onScroll", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onScrollEnd", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Number)
+    __metadata$b("design:type", Number)
 ], List.prototype, "scrolledPosition", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Boolean)
+    __metadata$b("design:type", Boolean)
 ], List.prototype, "scrollable", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Boolean)
+    __metadata$b("design:type", Boolean)
 ], List.prototype, "bounces", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Boolean)
+    __metadata$b("design:type", Boolean)
 ], List.prototype, "canDrag", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "beforeDragging", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onDragging", void 0);
-__decorate$a([
+__decorate$b([
     Property,
-    __metadata$a("design:type", Function)
+    __metadata$b("design:type", Function)
 ], List.prototype, "onDragged", void 0);
 function list(config) {
     const ret = new List;
@@ -3532,20 +3532,20 @@ function listItem(item, config) {
     });
 }
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$9 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$a = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class SlideItem extends Stack {
 }
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", String)
+    __metadata$a("design:type", String)
 ], SlideItem.prototype, "identifier", void 0);
 class Slider extends Superview {
     constructor() {
@@ -3588,37 +3588,37 @@ class Slider extends Superview {
         return this.nativeChannel(context, "getSlidedPage")();
     }
 }
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Object)
+    __metadata$a("design:type", Object)
 ], Slider.prototype, "itemCount", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Function)
+    __metadata$a("design:type", Function)
 ], Slider.prototype, "renderPage", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Object)
+    __metadata$a("design:type", Object)
 ], Slider.prototype, "batchCount", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Function)
+    __metadata$a("design:type", Function)
 ], Slider.prototype, "onPageSlided", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Boolean)
+    __metadata$a("design:type", Boolean)
 ], Slider.prototype, "loop", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Boolean)
+    __metadata$a("design:type", Boolean)
 ], Slider.prototype, "scrollable", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Boolean)
+    __metadata$a("design:type", Boolean)
 ], Slider.prototype, "bounces", void 0);
-__decorate$9([
+__decorate$a([
     Property,
-    __metadata$9("design:type", Object)
+    __metadata$a("design:type", Object)
 ], Slider.prototype, "slideStyle", void 0);
 function slider(config) {
     const ret = new Slider;
@@ -3644,13 +3644,13 @@ function slideItem(item, config) {
     });
 }
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$8 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$9 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 function scroller(content, config) {
@@ -3680,34 +3680,34 @@ class Scroller extends Superview {
         this.content = e;
     }
 }
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Object)
+    __metadata$9("design:type", Object)
 ], Scroller.prototype, "contentOffset", void 0);
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Function)
+    __metadata$9("design:type", Function)
 ], Scroller.prototype, "onScroll", void 0);
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Function)
+    __metadata$9("design:type", Function)
 ], Scroller.prototype, "onScrollEnd", void 0);
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Boolean)
+    __metadata$9("design:type", Boolean)
 ], Scroller.prototype, "scrollable", void 0);
-__decorate$8([
+__decorate$9([
     Property,
-    __metadata$8("design:type", Boolean)
+    __metadata$9("design:type", Boolean)
 ], Scroller.prototype, "bounces", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$7 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$8 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class Refreshable extends Superview {
@@ -3745,9 +3745,9 @@ class Refreshable extends Superview {
         }
     }
 }
-__decorate$7([
+__decorate$8([
     Property,
-    __metadata$7("design:type", Function)
+    __metadata$8("design:type", Function)
 ], Refreshable.prototype, "onRefresh", void 0);
 function refreshable(config) {
     const ret = new Refreshable;
@@ -3896,24 +3896,24 @@ exports.jsx = void 0;
     jsx.Fragment = Fragment;
 })(exports.jsx || (exports.jsx = {}));
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$6 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$7 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class FlowLayoutItem extends Stack {
 }
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", String)
+    __metadata$7("design:type", String)
 ], FlowLayoutItem.prototype, "identifier", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Boolean)
+    __metadata$7("design:type", Boolean)
 ], FlowLayoutItem.prototype, "fullSpan", void 0);
 class FlowLayout extends Superview {
     constructor() {
@@ -3975,57 +3975,57 @@ class FlowLayout extends Superview {
         return super.toModel();
     }
 }
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Object)
+    __metadata$7("design:type", Object)
 ], FlowLayout.prototype, "columnCount", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Number)
+    __metadata$7("design:type", Number)
 ], FlowLayout.prototype, "columnSpace", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Number)
+    __metadata$7("design:type", Number)
 ], FlowLayout.prototype, "rowSpace", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Object)
+    __metadata$7("design:type", Object)
 ], FlowLayout.prototype, "itemCount", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Function)
+    __metadata$7("design:type", Function)
 ], FlowLayout.prototype, "renderItem", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Object)
+    __metadata$7("design:type", Object)
 ], FlowLayout.prototype, "batchCount", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Function)
+    __metadata$7("design:type", Function)
 ], FlowLayout.prototype, "onLoadMore", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Boolean)
+    __metadata$7("design:type", Boolean)
 ], FlowLayout.prototype, "loadMore", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", FlowLayoutItem)
+    __metadata$7("design:type", FlowLayoutItem)
 ], FlowLayout.prototype, "loadMoreView", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Function)
+    __metadata$7("design:type", Function)
 ], FlowLayout.prototype, "onScroll", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Function)
+    __metadata$7("design:type", Function)
 ], FlowLayout.prototype, "onScrollEnd", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Boolean)
+    __metadata$7("design:type", Boolean)
 ], FlowLayout.prototype, "scrollable", void 0);
-__decorate$6([
+__decorate$7([
     Property,
-    __metadata$6("design:type", Boolean)
+    __metadata$7("design:type", Boolean)
 ], FlowLayout.prototype, "bounces", void 0);
 function flowlayout(config) {
     const ret = new FlowLayout;
@@ -4051,13 +4051,13 @@ function flowItem(item, config) {
     });
 }
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$5 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$6 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 exports.ReturnKeyType = void 0;
@@ -4089,85 +4089,85 @@ class Input extends View {
         return this.nativeChannel(context, 'releaseFocus')();
     }
 }
-__decorate$5([
+__decorate$6([
     InconsistProperty,
-    __metadata$5("design:type", String)
+    __metadata$6("design:type", String)
 ], Input.prototype, "text", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Color)
+    __metadata$6("design:type", Color)
 ], Input.prototype, "textColor", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Number)
+    __metadata$6("design:type", Number)
 ], Input.prototype, "textSize", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", String)
+    __metadata$6("design:type", String)
 ], Input.prototype, "font", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", String)
+    __metadata$6("design:type", String)
 ], Input.prototype, "hintText", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", String)
+    __metadata$6("design:type", String)
 ], Input.prototype, "hintFont", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Number)
+    __metadata$6("design:type", Number)
 ], Input.prototype, "inputType", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Color)
+    __metadata$6("design:type", Color)
 ], Input.prototype, "hintTextColor", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "multiline", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Gravity)
+    __metadata$6("design:type", Gravity)
 ], Input.prototype, "textAlignment", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Function)
+    __metadata$6("design:type", Function)
 ], Input.prototype, "onTextChange", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Function)
+    __metadata$6("design:type", Function)
 ], Input.prototype, "onFocusChange", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Number)
+    __metadata$6("design:type", Number)
 ], Input.prototype, "maxLength", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "password", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "editable", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Number)
+    __metadata$6("design:type", Number)
 ], Input.prototype, "returnKeyType", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Function)
+    __metadata$6("design:type", Function)
 ], Input.prototype, "onSubmitEditing", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "enableHorizontalScrollBar", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Boolean)
+    __metadata$6("design:type", Boolean)
 ], Input.prototype, "enableVerticalScrollBar", void 0);
-__decorate$5([
+__decorate$6([
     Property,
-    __metadata$5("design:type", Function)
+    __metadata$6("design:type", Function)
 ], Input.prototype, "beforeTextChange", void 0);
 exports.InputType = void 0;
 (function (InputType) {
@@ -4184,13 +4184,13 @@ function input(config) {
     return ret;
 }
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$4 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$5 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class NestedSlider extends Group {
@@ -4204,26 +4204,26 @@ class NestedSlider extends Group {
         return this.nativeChannel(context, "getSlidedPage")();
     }
 }
-__decorate$4([
+__decorate$5([
     Property,
-    __metadata$4("design:type", Function)
+    __metadata$5("design:type", Function)
 ], NestedSlider.prototype, "onPageSlided", void 0);
-__decorate$4([
+__decorate$5([
     Property,
-    __metadata$4("design:type", Boolean)
+    __metadata$5("design:type", Boolean)
 ], NestedSlider.prototype, "scrollable", void 0);
-__decorate$4([
+__decorate$5([
     Property,
-    __metadata$4("design:type", Boolean)
+    __metadata$5("design:type", Boolean)
 ], NestedSlider.prototype, "bounces", void 0);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$3 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$4 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 /**
@@ -4231,9 +4231,9 @@ var __metadata$3 = (undefined && undefined.__metadata) || function (k, v) {
  */
 class Draggable extends Stack {
 }
-__decorate$3([
+__decorate$4([
     Property,
-    __metadata$3("design:type", Function)
+    __metadata$4("design:type", Function)
 ], Draggable.prototype, "onDrag", void 0);
 /**
  * @deprecated The function should not be used, please use gestureContainer function instead
@@ -4255,36 +4255,36 @@ function draggable(views, config) {
     return ret;
 }
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$3 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class Switch extends View {
 }
-__decorate$2([
+__decorate$3([
     InconsistProperty,
-    __metadata$2("design:type", Boolean)
+    __metadata$3("design:type", Boolean)
 ], Switch.prototype, "state", void 0);
-__decorate$2([
+__decorate$3([
     Property,
-    __metadata$2("design:type", Function)
+    __metadata$3("design:type", Function)
 ], Switch.prototype, "onSwitch", void 0);
-__decorate$2([
+__decorate$3([
     Property,
-    __metadata$2("design:type", Color)
+    __metadata$3("design:type", Color)
 ], Switch.prototype, "offTintColor", void 0);
-__decorate$2([
+__decorate$3([
     Property,
-    __metadata$2("design:type", Color)
+    __metadata$3("design:type", Color)
 ], Switch.prototype, "onTintColor", void 0);
-__decorate$2([
+__decorate$3([
     Property,
-    __metadata$2("design:type", Color)
+    __metadata$3("design:type", Color)
 ], Switch.prototype, "thumbTintColor", void 0);
 function switchView(config) {
     const ret = new Switch;
@@ -4295,13 +4295,13 @@ function switchView(config) {
     return ret;
 }
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 exports.SwipeOrientation = void 0;
@@ -4313,49 +4313,49 @@ exports.SwipeOrientation = void 0;
 })(exports.SwipeOrientation || (exports.SwipeOrientation = {}));
 class GestureContainer extends Stack {
 }
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onSingleTap", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onDoubleTap", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onLongPress", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onPinch", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onPan", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onRotate", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onSwipe", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onTouchDown", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onTouchMove", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onTouchUp", void 0);
-__decorate$1([
+__decorate$2([
     Property,
-    __metadata$1("design:type", Function)
+    __metadata$2("design:type", Function)
 ], GestureContainer.prototype, "onTouchCancel", void 0);
 function gestureContainer(views, config) {
     const ret = new GestureContainer;
@@ -4374,34 +4374,34 @@ function gestureContainer(views, config) {
     return ret;
 }
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+var __metadata$1 = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 class BlurEffect extends Stack {
 }
-__decorate([
+__decorate$1([
     Property,
-    __metadata("design:type", Object)
+    __metadata$1("design:type", Object)
 ], BlurEffect.prototype, "effectiveRect", void 0);
-__decorate([
+__decorate$1([
     Property,
-    __metadata("design:type", Number)
+    __metadata$1("design:type", Number)
 ], BlurEffect.prototype, "radius", void 0);
 class AeroEffect extends Stack {
 }
-__decorate([
+__decorate$1([
     Property,
-    __metadata("design:type", Object)
+    __metadata$1("design:type", Object)
 ], AeroEffect.prototype, "effectiveRect", void 0);
-__decorate([
+__decorate$1([
     Property,
-    __metadata("design:type", String)
+    __metadata$1("design:type", String)
 ], AeroEffect.prototype, "style", void 0);
 function blurEffect(views, config) {
     const ret = new BlurEffect;
@@ -4436,6 +4436,181 @@ function aeroEffect(views, config) {
     return ret;
 }
 
+/*
+ * Copyright [2022] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+class HorizontalListItem extends Stack {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], HorizontalListItem.prototype, "identifier", void 0);
+class HorizontalList extends Superview {
+    constructor() {
+        super(...arguments);
+        this.cachedViews = new Map;
+        this.itemCount = 0;
+        this.batchCount = 15;
+    }
+    allSubviews() {
+        const ret = [...this.cachedViews.values()];
+        if (this.loadMoreView) {
+            ret.push(this.loadMoreView);
+        }
+        return ret;
+    }
+    scrollToItem(context, index, config) {
+        const animated = config === null || config === void 0 ? void 0 : config.animated;
+        return this.nativeChannel(context, 'scrollToItem')({ index, animated, });
+    }
+    /**
+     * @param context
+     * @returns Returns array of visible view's index.
+     */
+    findVisibleItems(context) {
+        return this.nativeChannel(context, 'findVisibleItems')();
+    }
+    /**
+     * @param context
+     * @returns Returns array of completely visible view's index.
+     */
+    findCompletelyVisibleItems(context) {
+        return this.nativeChannel(context, 'findCompletelyVisibleItems')();
+    }
+    /**
+     * Reload all list items.
+     * @param context
+     * @returns
+     */
+    reload(context) {
+        return this.nativeChannel(context, 'reload')();
+    }
+    reset() {
+        this.cachedViews.clear();
+        this.itemCount = 0;
+    }
+    getItem(itemIdx) {
+        let view = this.renderItem(itemIdx);
+        view.superview = this;
+        this.cachedViews.set(`${itemIdx}`, view);
+        return view;
+    }
+    renderBunchedItems(start, length) {
+        return new Array(Math.max(0, Math.min(length, this.itemCount - start))).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx);
+            return listItem.toModel();
+        });
+    }
+    toModel() {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
+        }
+        return super.toModel();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], HorizontalList.prototype, "itemCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "renderItem", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], HorizontalList.prototype, "batchCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onLoadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "loadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", HorizontalListItem)
+], HorizontalList.prototype, "loadMoreView", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onScroll", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onScrollEnd", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], HorizontalList.prototype, "scrolledPosition", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "scrollable", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "bounces", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "canDrag", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "beforeDragging", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onDragging", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onDragged", void 0);
+function horizontalList(config) {
+    const ret = new HorizontalList;
+    ret.apply(config);
+    return ret;
+}
+function horizontalListItem(item, config) {
+    return (new HorizontalListItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
+            it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            it.apply(config);
+        }
+    });
+}
+
 function modal(context) {
     return {
         toast: (msg, gravity = Gravity.Bottom) => {
@@ -5395,6 +5570,8 @@ exports.GestureContainer = GestureContainer;
 exports.Gravity = Gravity;
 exports.Group = Group;
 exports.HLayout = HLayout;
+exports.HorizontalList = HorizontalList;
+exports.HorizontalListItem = HorizontalListItem;
 exports.Image = Image;
 exports.InconsistProperty = InconsistProperty;
 exports.Input = Input;
@@ -5452,6 +5629,8 @@ exports.flowlayout = flowlayout;
 exports.gestureContainer = gestureContainer;
 exports.gravity = gravity;
 exports.hlayout = hlayout;
+exports.horizontalList = horizontalList;
+exports.horizontalListItem = horizontalListItem;
 exports.iOSResource = iOSResource;
 exports.image = image;
 exports.imageDecoder = imageDecoder;
diff --git a/doric-js/index.d.ts b/doric-js/index.d.ts
index 4af6f9b7..ca3e4e1f 100644
--- a/doric-js/index.d.ts
+++ b/doric-js/index.d.ts
@@ -1408,6 +1408,65 @@ declare module "doric" {
 	}
 	export function blurEffect(views: View | View[], config?: Partial<BlurEffect>): BlurEffect;
 	export function aeroEffect(views: View | View[], config?: Partial<AeroEffect>): AeroEffect;
+	export class HorizontalListItem extends Stack {
+		/**
+		 * Set to reuse native view
+		 */
+		identifier?: string;
+	}
+	export class HorizontalList extends Superview {
+		private cachedViews;
+		allSubviews(): HorizontalListItem[];
+		itemCount: number;
+		renderItem: (index: number) => HorizontalListItem;
+		batchCount: number;
+		onLoadMore?: () => void;
+		loadMore?: boolean;
+		loadMoreView?: HorizontalListItem;
+		onScroll?: (offset: {
+			x: number;
+			y: number;
+		}) => void;
+		onScrollEnd?: (offset: {
+			x: number;
+			y: number;
+		}) => void;
+		scrolledPosition?: number;
+		scrollable?: boolean;
+		/**
+		 * Take effect only on iOS
+		 */
+		bounces?: boolean;
+		canDrag?: boolean;
+		beforeDragging?: (from: number) => void;
+		onDragging?: (from: number, to: number) => void;
+		onDragged?: (from: number, to: number) => void;
+		scrollToItem(context: BridgeContext, index: number, config?: {
+			animated?: boolean;
+		}): Promise<any>;
+		/**
+		 * @param context
+		 * @returns Returns array of visible view's index.
+		 */
+		findVisibleItems(context: BridgeContext): Promise<number[]>;
+		/**
+		 * @param context
+		 * @returns Returns array of completely visible view's index.
+		 */
+		findCompletelyVisibleItems(context: BridgeContext): Promise<number[]>;
+		/**
+		 * Reload all list items.
+		 * @param context
+		 * @returns
+		 */
+		reload(context: BridgeContext): Promise<void>;
+		reset(): void;
+		private getItem;
+		private renderBunchedItems;
+		toModel(): NativeViewModel;
+	}
+	export function horizontalList(config: Partial<HorizontalList>): HorizontalList;
+	export function horizontalListItem(item: View | View[], config?: Partial<HorizontalListItem>): HorizontalListItem;
 	export function modal(context: BridgeContext): {
 		toast: (msg: string, gravity?: Gravity) => void;
 		alert: (arg: string | {
diff --git a/doric-js/lib/src/widget/horizontalList.d.ts b/doric-js/lib/src/widget/horizontalList.d.ts
new file mode 100644
index 00000000..004cbf1a
--- /dev/null
+++ b/doric-js/lib/src/widget/horizontalList.d.ts
@@ -0,0 +1,62 @@
+import { View, Superview, NativeViewModel } from "../ui/view";
+import { Stack } from "./layouts";
+import { BridgeContext } from "../runtime/global";
+export declare class HorizontalListItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    identifier?: string;
+}
+export declare class HorizontalList extends Superview {
+    private cachedViews;
+    allSubviews(): HorizontalListItem[];
+    itemCount: number;
+    renderItem: (index: number) => HorizontalListItem;
+    batchCount: number;
+    onLoadMore?: () => void;
+    loadMore?: boolean;
+    loadMoreView?: HorizontalListItem;
+    onScroll?: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    onScrollEnd?: (offset: {
+        x: number;
+        y: number;
+    }) => void;
+    scrolledPosition?: number;
+    scrollable?: boolean;
+    /**
+     * Take effect only on iOS
+     */
+    bounces?: boolean;
+    canDrag?: boolean;
+    beforeDragging?: (from: number) => void;
+    onDragging?: (from: number, to: number) => void;
+    onDragged?: (from: number, to: number) => void;
+    scrollToItem(context: BridgeContext, index: number, config?: {
+        animated?: boolean;
+    }): Promise<any>;
+    /**
+     * @param context
+     * @returns Returns array of visible view's index.
+     */
+    findVisibleItems(context: BridgeContext): Promise<number[]>;
+    /**
+     * @param context
+     * @returns Returns array of completely visible view's index.
+     */
+    findCompletelyVisibleItems(context: BridgeContext): Promise<number[]>;
+    /**
+     * Reload all list items.
+     * @param context
+     * @returns
+     */
+    reload(context: BridgeContext): Promise<void>;
+    reset(): void;
+    private getItem;
+    private renderBunchedItems;
+    toModel(): NativeViewModel;
+}
+export declare function horizontalList(config: Partial<HorizontalList>): HorizontalList;
+export declare function horizontalListItem(item: View | View[], config?: Partial<HorizontalListItem>): HorizontalListItem;
diff --git a/doric-js/lib/src/widget/horizontalList.js b/doric-js/lib/src/widget/horizontalList.js
new file mode 100644
index 00000000..3bfebf52
--- /dev/null
+++ b/doric-js/lib/src/widget/horizontalList.js
@@ -0,0 +1,177 @@
+/*
+ * Copyright [2022] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { View, Property, Superview } from "../ui/view";
+import { Stack } from "./layouts";
+import { layoutConfig } from "../util/layoutconfig";
+export class HorizontalListItem extends Stack {
+}
+__decorate([
+    Property,
+    __metadata("design:type", String)
+], HorizontalListItem.prototype, "identifier", void 0);
+export class HorizontalList extends Superview {
+    constructor() {
+        super(...arguments);
+        this.cachedViews = new Map;
+        this.itemCount = 0;
+        this.batchCount = 15;
+    }
+    allSubviews() {
+        const ret = [...this.cachedViews.values()];
+        if (this.loadMoreView) {
+            ret.push(this.loadMoreView);
+        }
+        return ret;
+    }
+    scrollToItem(context, index, config) {
+        const animated = config === null || config === void 0 ? void 0 : config.animated;
+        return this.nativeChannel(context, 'scrollToItem')({ index, animated, });
+    }
+    /**
+     * @param context
+     * @returns Returns array of visible view's index.
+     */
+    findVisibleItems(context) {
+        return this.nativeChannel(context, 'findVisibleItems')();
+    }
+    /**
+     * @param context
+     * @returns Returns array of completely visible view's index.
+     */
+    findCompletelyVisibleItems(context) {
+        return this.nativeChannel(context, 'findCompletelyVisibleItems')();
+    }
+    /**
+     * Reload all list items.
+     * @param context
+     * @returns
+     */
+    reload(context) {
+        return this.nativeChannel(context, 'reload')();
+    }
+    reset() {
+        this.cachedViews.clear();
+        this.itemCount = 0;
+    }
+    getItem(itemIdx) {
+        let view = this.renderItem(itemIdx);
+        view.superview = this;
+        this.cachedViews.set(`${itemIdx}`, view);
+        return view;
+    }
+    renderBunchedItems(start, length) {
+        return new Array(Math.max(0, Math.min(length, this.itemCount - start))).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx);
+            return listItem.toModel();
+        });
+    }
+    toModel() {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId;
+        }
+        return super.toModel();
+    }
+}
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], HorizontalList.prototype, "itemCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "renderItem", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Object)
+], HorizontalList.prototype, "batchCount", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onLoadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "loadMore", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", HorizontalListItem)
+], HorizontalList.prototype, "loadMoreView", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onScroll", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onScrollEnd", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Number)
+], HorizontalList.prototype, "scrolledPosition", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "scrollable", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "bounces", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Boolean)
+], HorizontalList.prototype, "canDrag", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "beforeDragging", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onDragging", void 0);
+__decorate([
+    Property,
+    __metadata("design:type", Function)
+], HorizontalList.prototype, "onDragged", void 0);
+export function horizontalList(config) {
+    const ret = new HorizontalList;
+    ret.apply(config);
+    return ret;
+}
+export function horizontalListItem(item, config) {
+    return (new HorizontalListItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit();
+        if (item instanceof View) {
+            it.addChild(item);
+        }
+        else {
+            item.forEach(e => {
+                it.addChild(e);
+            });
+        }
+        if (config) {
+            it.apply(config);
+        }
+    });
+}
diff --git a/doric-js/lib/src/widget/index.widget.d.ts b/doric-js/lib/src/widget/index.widget.d.ts
index b655b340..41a7c109 100644
--- a/doric-js/lib/src/widget/index.widget.d.ts
+++ b/doric-js/lib/src/widget/index.widget.d.ts
@@ -12,3 +12,4 @@ export * from './draggable';
 export * from './switch';
 export * from './gesture';
 export * from './effect';
+export * from './horizontalList';
diff --git a/doric-js/lib/src/widget/index.widget.js b/doric-js/lib/src/widget/index.widget.js
index 7d638b5a..165dbf75 100644
--- a/doric-js/lib/src/widget/index.widget.js
+++ b/doric-js/lib/src/widget/index.widget.js
@@ -27,3 +27,4 @@ export * from './draggable';
 export * from './switch';
 export * from './gesture';
 export * from './effect';
+export * from './horizontalList';
diff --git a/doric-js/src/widget/horizontalList.ts b/doric-js/src/widget/horizontalList.ts
new file mode 100644
index 00000000..9414819b
--- /dev/null
+++ b/doric-js/src/widget/horizontalList.ts
@@ -0,0 +1,172 @@
+/*
+ * Copyright [2022] [Doric.Pub]
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { View, Property, Superview, NativeViewModel } from "../ui/view";
+import { Stack } from "./layouts";
+import { layoutConfig } from "../util/layoutconfig";
+import { BridgeContext } from "../runtime/global";
+import { Color } from "../util/color";
+
+export class HorizontalListItem extends Stack {
+    /**
+     * Set to reuse native view
+     */
+    @Property
+    identifier?: string
+
+    // @Property
+    // actions?: {
+    //     title: string,
+    //     backgroundColor?: Color,
+    //     callback: () => void,
+    // }[]
+}
+
+export class HorizontalList extends Superview {
+    private cachedViews: Map<string, HorizontalListItem> = new Map
+
+    allSubviews() {
+        const ret = [...this.cachedViews.values()]
+        if (this.loadMoreView) {
+            ret.push(this.loadMoreView)
+        }
+        return ret
+    }
+
+    @Property
+    itemCount = 0
+
+    @Property
+    renderItem!: (index: number) => HorizontalListItem
+
+    @Property
+    batchCount = 15
+
+    @Property
+    onLoadMore?: () => void
+
+    @Property
+    loadMore?: boolean
+
+    @Property
+    loadMoreView?: HorizontalListItem
+
+    @Property
+    onScroll?: (offset: { x: number, y: number }) => void
+
+    @Property
+    onScrollEnd?: (offset: { x: number, y: number }) => void
+
+    @Property
+    scrolledPosition?: number
+
+    @Property
+    scrollable?: boolean
+    /**
+     * Take effect only on iOS
+     */
+    @Property
+    bounces?: boolean
+
+    @Property
+    canDrag?: boolean
+
+    @Property
+    beforeDragging?: (from: number) => void
+
+    @Property
+    onDragging?: (from: number, to: number) => void
+
+    @Property
+    onDragged?: (from: number, to: number) => void
+
+    scrollToItem(context: BridgeContext, index: number, config?: { animated?: boolean, }) {
+        const animated = config?.animated
+        return this.nativeChannel(context, 'scrollToItem')({ index, animated, }) as Promise<any>
+    }
+    /**
+     * @param context 
+     * @returns Returns array of visible view's index.
+     */
+    findVisibleItems(context: BridgeContext) {
+        return this.nativeChannel(context, 'findVisibleItems')() as Promise<number[]>
+    }
+    /**
+     * @param context 
+     * @returns Returns array of completely visible view's index.
+     */
+    findCompletelyVisibleItems(context: BridgeContext) {
+        return this.nativeChannel(context, 'findCompletelyVisibleItems')() as Promise<number[]>
+    }
+
+    /**
+     * Reload all list items.
+     * @param context 
+     * @returns 
+     */
+    reload(context: BridgeContext) {
+        return this.nativeChannel(context, 'reload')() as Promise<void>
+    }
+
+    reset() {
+        this.cachedViews.clear()
+        this.itemCount = 0
+    }
+
+    private getItem(itemIdx: number) {
+        let view = this.renderItem(itemIdx)
+        view.superview = this
+        this.cachedViews.set(`${itemIdx}`, view)
+        return view
+    }
+
+    private renderBunchedItems(start: number, length: number) {
+        return new Array(Math.max(0, Math.min(length, this.itemCount - start))).fill(0).map((_, idx) => {
+            const listItem = this.getItem(start + idx)
+            return listItem.toModel()
+        })
+    }
+
+    toModel(): NativeViewModel {
+        if (this.loadMoreView) {
+            this.dirtyProps['loadMoreView'] = this.loadMoreView.viewId
+        }
+        return super.toModel()
+    }
+}
+
+export function horizontalList(config: Partial<HorizontalList>) {
+    const ret = new HorizontalList
+    ret.apply(config)
+    return ret
+}
+
+export function horizontalListItem(item: View | View[], config?: Partial<HorizontalListItem>) {
+    return (new HorizontalListItem).also((it) => {
+        it.layoutConfig = layoutConfig().fit()
+        if (item instanceof View) {
+            it.addChild(item)
+        } else {
+            item.forEach(e => {
+                it.addChild(e)
+            })
+        }
+        if (config) {
+            it.apply(config)
+        }
+    })
+}
+
diff --git a/doric-js/src/widget/index.widget.ts b/doric-js/src/widget/index.widget.ts
index 4649e352..f487969b 100644
--- a/doric-js/src/widget/index.widget.ts
+++ b/doric-js/src/widget/index.widget.ts
@@ -26,4 +26,5 @@ export * from './nestedSlider'
 export * from './draggable'
 export * from './switch'
 export * from './gesture'
-export * from './effect'
\ No newline at end of file
+export * from './effect'
+export * from './horizontalList'
\ No newline at end of file