js: define text color with gradient

doric-demo/src/TextDemo.ts

@@ -1,4 +1,4 @@
-import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, input, text, Color, Text, InputType, hlayout } from "doric";
+import { Panel, Group, scroller, vlayout, layoutConfig, LayoutSpec, Input, Gravity, log, input, text, Color, Text, InputType, hlayout, GradientOrientation } from "doric";
 import { title } from "./utils";
 @Entry
 class TextDemo extends Panel {
@@ -38,6 +38,95 @@ class TextDemo extends Panel {
                     text({
                         text: "This is normal text",
                     }),
+                    hlayout([
+                        text({
+                            text: "T_B",
+                            textSize: 80,
+                            textColor: {
+                                start: Color.RED,
+                                end: Color.GREEN,
+                                orientation: GradientOrientation.TOP_BOTTOM,
+                            }
+                        }),
+                        text({
+                            text: "TR_BL",
+                            textSize: 80,
+                            textColor: {
+                                start: Color.RED,
+                                end: Color.GREEN,
+                                orientation: GradientOrientation.TR_BL,
+                            }
+                        }),
+                        text({
+                            text: "R_L",
+                            textSize: 80,
+                            textColor: {
+                                start: Color.RED,
+                                end: Color.GREEN,
+                                orientation: GradientOrientation.RIGHT_LEFT,
+                            }
+                        }),
+                        text({
+                            text: "BR_TL",
+                            textSize: 80,
+                            textColor: {
+                                start: Color.RED,
+                                end: Color.GREEN,
+                                orientation: GradientOrientation.BR_TL,
+                            }
+                        }),
+                    ], {
+                        space: 20
+                    }),
+                    hlayout([
+                        text({
+                            text: "B_T",
+                            textSize: 80,
+                            textColor: {
+                                start: Color.RED,
+                                end: Color.GREEN,
+                                orientation: GradientOrientation.BOTTOM_TOP,
+                            }
+                        }),
+                        text({
+                            text: "BL_TR",
+                            textSize: 80,
+                            textColor: {
+                                start: Color.RED,
+                                end: Color.GREEN,
+                                orientation: GradientOrientation.BL_TR,
+                            }
+                        }),
+                        text({
+                            text: "L_R",
+                            textSize: 80,
+                            textColor: {
+                                start: Color.RED,
+                                end: Color.GREEN,
+                                orientation: GradientOrientation.LEFT_RIGHT,
+                            }
+                        }),
+                        text({
+                            text: "TL_BR",
+                            textSize: 80,
+                            textColor: {
+                                start: Color.RED,
+                                end: Color.GREEN,
+                                orientation: GradientOrientation.TL_BR,
+                            }
+                        }),
+                    ], {
+                        space: 20
+                    }),
+                    text({
+                        text: "grad",
+                        textSize: 120,
+                        textColor: {
+                            colors: [Color.GREEN, Color.WHITE, Color.RED],
+                            locations: [0, 0.5, 1],
+                            orientation: GradientOrientation.TOP_BOTTOM
+                        }
+                    }),
                     text({
                         text: "This is normal text with shadow ",
                         textSize: 20,

doric-js/bundle/doric-lib.es5.js

@@ -1764,6 +1764,109 @@ var AnimationSet = /** @class */ (function () {
     return AnimationSet;
 }());
 
+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$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$a = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
+};
+exports.TruncateAt = void 0;
+(function (TruncateAt) {
+    TruncateAt[TruncateAt["End"] = 0] = "End";
+    TruncateAt[TruncateAt["Middle"] = 1] = "Middle";
+    TruncateAt[TruncateAt["Start"] = 2] = "Start";
+    TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
+})(exports.TruncateAt || (exports.TruncateAt = {}));
+var Text = /** @class */ (function (_super) {
+    __extends$c(Text, _super);
+    function Text() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", String)
+    ], Text.prototype, "text", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Object)
+    ], Text.prototype, "textColor", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Number)
+    ], Text.prototype, "textSize", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Number)
+    ], Text.prototype, "maxLines", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Gravity)
+    ], Text.prototype, "textAlignment", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", String)
+    ], Text.prototype, "fontStyle", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", String)
+    ], Text.prototype, "font", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Number)
+    ], Text.prototype, "maxWidth", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Number)
+    ], Text.prototype, "maxHeight", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Number)
+    ], Text.prototype, "lineSpacing", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Boolean)
+    ], Text.prototype, "strikethrough", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Boolean)
+    ], Text.prototype, "underline", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", String)
+    ], Text.prototype, "htmlText", void 0);
+    __decorate$a([
+        Property,
+        __metadata$a("design:type", Number)
+    ], Text.prototype, "truncateAt", void 0);
+    return Text;
+}(View));
+function text(config) {
+    var ret = new Text;
+    ret.layoutConfig = layoutConfig().fit();
+    for (var key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+
 /**
  *  Store color as format AARRGGBB or RRGGBB
  */
@@ -1840,109 +1943,6 @@ exports.GradientOrientation = void 0;
     GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
 })(exports.GradientOrientation || (exports.GradientOrientation = {}));
 
-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$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$a = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") { return Reflect.metadata(k, v); }
-};
-exports.TruncateAt = void 0;
-(function (TruncateAt) {
-    TruncateAt[TruncateAt["End"] = 0] = "End";
-    TruncateAt[TruncateAt["Middle"] = 1] = "Middle";
-    TruncateAt[TruncateAt["Start"] = 2] = "Start";
-    TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
-})(exports.TruncateAt || (exports.TruncateAt = {}));
-var Text = /** @class */ (function (_super) {
-    __extends$c(Text, _super);
-    function Text() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", String)
-    ], Text.prototype, "text", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Color)
-    ], Text.prototype, "textColor", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Number)
-    ], Text.prototype, "textSize", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Number)
-    ], Text.prototype, "maxLines", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Gravity)
-    ], Text.prototype, "textAlignment", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", String)
-    ], Text.prototype, "fontStyle", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", String)
-    ], Text.prototype, "font", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Number)
-    ], Text.prototype, "maxWidth", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Number)
-    ], Text.prototype, "maxHeight", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Number)
-    ], Text.prototype, "lineSpacing", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Boolean)
-    ], Text.prototype, "strikethrough", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Boolean)
-    ], Text.prototype, "underline", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", String)
-    ], Text.prototype, "htmlText", void 0);
-    __decorate$a([
-        Property,
-        __metadata$a("design:type", Number)
-    ], Text.prototype, "truncateAt", void 0);
-    return Text;
-}(View));
-function text(config) {
-    var ret = new Text;
-    ret.layoutConfig = layoutConfig().fit();
-    for (var key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
-    }
-    return ret;
-}
-
 var __extends$b = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||

doric-js/bundle/doric-lib.js

@@ -1335,6 +1335,89 @@ class AnimationSet {
     }
 }
 
+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$a = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+exports.TruncateAt = void 0;
+(function (TruncateAt) {
+    TruncateAt[TruncateAt["End"] = 0] = "End";
+    TruncateAt[TruncateAt["Middle"] = 1] = "Middle";
+    TruncateAt[TruncateAt["Start"] = 2] = "Start";
+    TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
+})(exports.TruncateAt || (exports.TruncateAt = {}));
+class Text extends View {
+}
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "text", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Object)
+], Text.prototype, "textColor", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "textSize", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxLines", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Gravity)
+], Text.prototype, "textAlignment", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "fontStyle", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "font", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxWidth", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxHeight", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "lineSpacing", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Boolean)
+], Text.prototype, "strikethrough", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Boolean)
+], Text.prototype, "underline", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "htmlText", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "truncateAt", void 0);
+function text(config) {
+    const ret = new Text;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+
 /**
  *  Store color as format AARRGGBB or RRGGBB
  */
@@ -1409,89 +1492,6 @@ exports.GradientOrientation = void 0;
     GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
 })(exports.GradientOrientation || (exports.GradientOrientation = {}));
 
-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$a = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-exports.TruncateAt = void 0;
-(function (TruncateAt) {
-    TruncateAt[TruncateAt["End"] = 0] = "End";
-    TruncateAt[TruncateAt["Middle"] = 1] = "Middle";
-    TruncateAt[TruncateAt["Start"] = 2] = "Start";
-    TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
-})(exports.TruncateAt || (exports.TruncateAt = {}));
-class Text extends View {
-}
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "text", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Color)
-], Text.prototype, "textColor", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "textSize", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxLines", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Gravity)
-], Text.prototype, "textAlignment", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "fontStyle", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "font", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxWidth", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxHeight", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "lineSpacing", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Boolean)
-], Text.prototype, "strikethrough", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Boolean)
-], Text.prototype, "underline", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "htmlText", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "truncateAt", void 0);
-function text(config) {
-    const ret = new Text;
-    ret.layoutConfig = layoutConfig().fit();
-    for (let key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
-    }
-    return ret;
-}
-
 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);

doric-js/bundle/doric-vm.js

@@ -2856,6 +2856,89 @@ class AnimationSet {
     }
 }
 
+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$a = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+exports.TruncateAt = void 0;
+(function (TruncateAt) {
+    TruncateAt[TruncateAt["End"] = 0] = "End";
+    TruncateAt[TruncateAt["Middle"] = 1] = "Middle";
+    TruncateAt[TruncateAt["Start"] = 2] = "Start";
+    TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
+})(exports.TruncateAt || (exports.TruncateAt = {}));
+class Text extends View {
+}
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "text", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Object)
+], Text.prototype, "textColor", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "textSize", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxLines", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Gravity)
+], Text.prototype, "textAlignment", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "fontStyle", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "font", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxWidth", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxHeight", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "lineSpacing", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Boolean)
+], Text.prototype, "strikethrough", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Boolean)
+], Text.prototype, "underline", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "htmlText", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "truncateAt", void 0);
+function text(config) {
+    const ret = new Text;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+
 /**
  *  Store color as format AARRGGBB or RRGGBB
  */
@@ -2930,89 +3013,6 @@ exports.GradientOrientation = void 0;
     GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
 })(exports.GradientOrientation || (exports.GradientOrientation = {}));
 
-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$a = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-exports.TruncateAt = void 0;
-(function (TruncateAt) {
-    TruncateAt[TruncateAt["End"] = 0] = "End";
-    TruncateAt[TruncateAt["Middle"] = 1] = "Middle";
-    TruncateAt[TruncateAt["Start"] = 2] = "Start";
-    TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
-})(exports.TruncateAt || (exports.TruncateAt = {}));
-class Text extends View {
-}
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "text", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Color)
-], Text.prototype, "textColor", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "textSize", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxLines", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Gravity)
-], Text.prototype, "textAlignment", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "fontStyle", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "font", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxWidth", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxHeight", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "lineSpacing", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Boolean)
-], Text.prototype, "strikethrough", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Boolean)
-], Text.prototype, "underline", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "htmlText", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "truncateAt", void 0);
-function text(config) {
-    const ret = new Text;
-    ret.layoutConfig = layoutConfig().fit();
-    for (let key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
-    }
-    return ret;
-}
-
 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);

doric-js/index.d.ts

@@ -491,7 +491,7 @@ declare module 'doric/lib/src/widget/layouts' {
 
 declare module 'doric/lib/src/widget/text' {
     import { View } from "doric/lib/src/ui/view";
-    import { Color } from "doric/lib/src/util/color";
+    import { Color, GradientColor } from "doric/lib/src/util/color";
     import { Gravity } from "doric/lib/src/util/gravity";
     export enum TruncateAt {
         End = 0,
@@ -501,7 +501,7 @@ declare module 'doric/lib/src/widget/text' {
     }
     export class Text extends View {
         text?: string;
-        textColor?: Color;
+        textColor?: Color | GradientColor;
         textSize?: number;
         maxLines?: number;
         textAlignment?: Gravity;

doric-js/lib/src/widget/text.d.ts

@@ -1,5 +1,5 @@
 import { View } from "../ui/view";
-import { Color } from "../util/color";
+import { Color, GradientColor } from "../util/color";
 import { Gravity } from "../util/gravity";
 export declare enum TruncateAt {
     End = 0,
@@ -9,7 +9,7 @@ export declare enum TruncateAt {
 }
 export declare class Text extends View {
     text?: string;
-    textColor?: Color;
+    textColor?: Color | GradientColor;
     textSize?: number;
     maxLines?: number;
     textAlignment?: Gravity;

doric-js/lib/src/widget/text.js

@@ -23,7 +23,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
  * limitations under the License.
  */
 import { View, Property } from "../ui/view";
-import { Color } from "../util/color";
 import { Gravity } from "../util/gravity";
 import { layoutConfig } from "../util/layoutconfig";
 export var TruncateAt;
@@ -41,7 +40,7 @@ __decorate([
 ], Text.prototype, "text", void 0);
 __decorate([
     Property,
-    __metadata("design:type", Color)
+    __metadata("design:type", Object)
 ], Text.prototype, "textColor", void 0);
 __decorate([
     Property,

doric-js/src/widget/text.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { View, Property } from "../ui/view"
-import { Color } from "../util/color"
+import { Color, GradientColor } from "../util/color"
 import { Gravity } from "../util/gravity"
 import { layoutConfig } from "../util/layoutconfig"
 
@@ -30,7 +30,7 @@ export class Text extends View {
     text?: string
 
     @Property
-    textColor?: Color
+    textColor?: Color | GradientColor
 
     @Property
     textSize?: number

doric-web/dist/index.js

@@ -2910,6 +2910,89 @@ class AnimationSet {
     }
 }
 
+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$a = (undefined && undefined.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+exports.TruncateAt = void 0;
+(function (TruncateAt) {
+    TruncateAt[TruncateAt["End"] = 0] = "End";
+    TruncateAt[TruncateAt["Middle"] = 1] = "Middle";
+    TruncateAt[TruncateAt["Start"] = 2] = "Start";
+    TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
+})(exports.TruncateAt || (exports.TruncateAt = {}));
+class Text extends View {
+}
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "text", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Object)
+], Text.prototype, "textColor", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "textSize", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxLines", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Gravity)
+], Text.prototype, "textAlignment", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "fontStyle", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "font", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxWidth", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "maxHeight", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "lineSpacing", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Boolean)
+], Text.prototype, "strikethrough", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Boolean)
+], Text.prototype, "underline", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", String)
+], Text.prototype, "htmlText", void 0);
+__decorate$a([
+    Property,
+    __metadata$a("design:type", Number)
+], Text.prototype, "truncateAt", void 0);
+function text(config) {
+    const ret = new Text;
+    ret.layoutConfig = layoutConfig().fit();
+    for (let key in config) {
+        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
+    }
+    return ret;
+}
+
 /**
  *  Store color as format AARRGGBB or RRGGBB
  */
@@ -2984,89 +3067,6 @@ exports.GradientOrientation = void 0;
     GradientOrientation[GradientOrientation["TL_BR"] = 7] = "TL_BR";
 })(exports.GradientOrientation || (exports.GradientOrientation = {}));
 
-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$a = (undefined && undefined.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-exports.TruncateAt = void 0;
-(function (TruncateAt) {
-    TruncateAt[TruncateAt["End"] = 0] = "End";
-    TruncateAt[TruncateAt["Middle"] = 1] = "Middle";
-    TruncateAt[TruncateAt["Start"] = 2] = "Start";
-    TruncateAt[TruncateAt["Clip"] = 3] = "Clip";
-})(exports.TruncateAt || (exports.TruncateAt = {}));
-class Text extends View {
-}
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "text", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Color)
-], Text.prototype, "textColor", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "textSize", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxLines", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Gravity)
-], Text.prototype, "textAlignment", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "fontStyle", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "font", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxWidth", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "maxHeight", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "lineSpacing", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Boolean)
-], Text.prototype, "strikethrough", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Boolean)
-], Text.prototype, "underline", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", String)
-], Text.prototype, "htmlText", void 0);
-__decorate$a([
-    Property,
-    __metadata$a("design:type", Number)
-], Text.prototype, "truncateAt", void 0);
-function text(config) {
-    const ret = new Text;
-    ret.layoutConfig = layoutConfig().fit();
-    for (let key in config) {
-        Reflect.set(ret, key, Reflect.get(config, key, config), ret);
-    }
-    return ret;
-}
-
 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);
@@ -5164,7 +5164,7 @@ var doric_web = (function (exports, axios, sandbox) {
 	}());
 	});
 
-	var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+	var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
 	    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 	    return new (P || (P = Promise))(function (resolve, reject) {
 	        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -5176,7 +5176,7 @@ var doric_web = (function (exports, axios, sandbox) {
 	const loaders = [
 	    {
 	        filter: () => true,
-	        request: (source) => __awaiter(void 0, void 0, void 0, function* () {
+	        request: (source) => __awaiter$1(void 0, void 0, void 0, function* () {
 	            const result = yield axios__default['default'].get(source);
 	            return result.data;
 	        })
@@ -5186,7 +5186,7 @@ var doric_web = (function (exports, axios, sandbox) {
 	    loaders.push(loader);
 	}
 	function loadDoricJSBundle(source) {
-	    return __awaiter(this, void 0, void 0, function* () {
+	    return __awaiter$1(this, void 0, void 0, function* () {
 	        const matched = loaders.filter(e => e.filter(source));
 	        if (matched.length > 0) {
 	            return matched[matched.length - 1].request(source);
@@ -5203,6 +5203,7 @@ var doric_web = (function (exports, axios, sandbox) {
 	    }
 	}
 
+	exports.LayoutSpec = void 0;
 	(function (LayoutSpec) {
 	    LayoutSpec[LayoutSpec["EXACTLY"] = 0] = "EXACTLY";
 	    LayoutSpec[LayoutSpec["WRAP_CONTENT"] = 1] = "WRAP_CONTENT";
@@ -7608,7 +7609,7 @@ ${content}
 	    }
 	}
 
-	var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+	var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
 	    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
 	    return new (P || (P = Promise))(function (resolve, reject) {
 	        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@@ -7622,7 +7623,7 @@ ${content}
 	smoothscroll.polyfill();
 	registerDoricJSLoader({
 	    filter: (source) => source.startsWith("assets://"),
-	    request: (source) => __awaiter$1(void 0, void 0, void 0, function* () {
+	    request: (source) => __awaiter(void 0, void 0, void 0, function* () {
 	        const ret = yield axios__default['default'].get(source.replace("assets://", `${window.location.href}/../../doric-demo/bundle/`));
 	        return ret.data;
 	    })
@@ -7655,6 +7656,8 @@ ${content}
 	exports.toPixelString = toPixelString;
 	exports.toRGBAString = toRGBAString;
 
+	Object.defineProperty(exports, '__esModule', { value: true });
+
 	return exports;
 
 }({}, axios, doric));