@nativescript/core 8.9.0-napi-es5.0 → 8.9.0-napi.1

package/ui/styling/style-properties.js

@@ -50,15 +50,13 @@ function convertToStringCommon(length) {
     if (typeof length === 'number') {
         return length.toString();
     }
-    var val = length.value;
+    let val = length.value;
     if (length.unit === '%') {
         val *= 100;
     }
     return val + length.unit;
 }
-function toDevicePixelsCommon(length, auto, parentAvailableWidth) {
-    if (auto === void 0) { auto = Number.NaN; }
-    if (parentAvailableWidth === void 0) { parentAvailableWidth = Number.NaN; }
+function toDevicePixelsCommon(length, auto = Number.NaN, parentAvailableWidth = Number.NaN) {
     if (length == 'auto') {
         // tslint:disable-line
         return auto;
@@ -87,10 +85,10 @@ export var PercentLength;
             return 'auto';
         }
         if (typeof fromValue === 'string') {
-            var stringValue = fromValue.trim();
-            var percentIndex = stringValue.indexOf('%');
+            let stringValue = fromValue.trim();
+            const percentIndex = stringValue.indexOf('%');
             if (percentIndex !== -1) {
-                var value = void 0;
+                let value;
                 // if only % or % is not last we treat it as invalid value.
                 if (percentIndex !== stringValue.length - 1 || percentIndex === 0) {
                     value = Number.NaN;
@@ -100,22 +98,22 @@ export var PercentLength;
                     value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
                 }
                 if (isNaN(value) || !isFinite(value)) {
-                    throw new Error("Invalid value: ".concat(fromValue));
+                    throw new Error(`Invalid value: ${fromValue}`);
                 }
-                return { unit: '%', value: value };
+                return { unit: '%', value };
             }
             else if (stringValue.indexOf('px') !== -1) {
                 stringValue = stringValue.replace('px', '').trim();
-                var value = parseFloat(stringValue);
+                const value = parseFloat(stringValue);
                 if (isNaN(value) || !isFinite(value)) {
-                    throw new Error("Invalid value: ".concat(fromValue));
+                    throw new Error(`Invalid value: ${fromValue}`);
                 }
-                return { unit: 'px', value: value };
+                return { unit: 'px', value };
             }
             else {
-                var value = parseFloat(stringValue);
+                const value = parseFloat(stringValue);
                 if (isNaN(value) || !isFinite(value)) {
-                    throw new Error("Invalid value: ".concat(fromValue));
+                    throw new Error(`Invalid value: ${fromValue}`);
                 }
                 return value;
             }
@@ -137,19 +135,19 @@ export var Length;
             return 'auto';
         }
         if (typeof fromValue === 'string') {
-            var stringValue = fromValue.trim();
+            let stringValue = fromValue.trim();
             if (stringValue.indexOf('px') !== -1) {
                 stringValue = stringValue.replace('px', '').trim();
-                var value = parseFloat(stringValue);
+                const value = parseFloat(stringValue);
                 if (isNaN(value) || !isFinite(value)) {
-                    throw new Error("Invalid value: ".concat(stringValue));
+                    throw new Error(`Invalid value: ${stringValue}`);
                 }
-                return { unit: 'px', value: value };
+                return { unit: 'px', value };
             }
             else {
-                var value = parseFloat(stringValue);
+                const value = parseFloat(stringValue);
                 if (isNaN(value) || !isFinite(value)) {
-                    throw new Error("Invalid value: ".concat(stringValue));
+                    throw new Error(`Invalid value: ${stringValue}`);
                 }
                 return value;
             }
@@ -163,52 +161,52 @@ export var Length;
     Length.toDevicePixels = toDevicePixelsCommon;
     Length.convertToString = convertToStringCommon;
 })(Length || (Length = {}));
-export var minWidthProperty = new CssProperty({
+export const minWidthProperty = new CssProperty({
     name: 'minWidth',
     cssName: 'min-width',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var view = target.viewRef.get();
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
         if (view) {
             view.effectiveMinWidth = Length.toDevicePixels(newValue, 0);
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
     valueConverter: Length.parse,
 });
 minWidthProperty.register(Style);
-export var minHeightProperty = new CssProperty({
+export const minHeightProperty = new CssProperty({
     name: 'minHeight',
     cssName: 'min-height',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var view = target.viewRef.get();
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
         if (view) {
             view.effectiveMinHeight = Length.toDevicePixels(newValue, 0);
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
     valueConverter: Length.parse,
 });
 minHeightProperty.register(Style);
-export var widthProperty = new CssAnimationProperty({
+export const widthProperty = new CssAnimationProperty({
     name: 'width',
     cssName: 'width',
     defaultValue: 'auto',
     equalityComparer: Length.equals,
     // TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
     //       on the animation property, so fake it here. x_x
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         if (global.isIOS) {
-            var view = target.viewRef.get();
+            const view = target.viewRef.get();
             if (view) {
                 view.requestLayout();
             }
@@ -217,16 +215,16 @@ export var widthProperty = new CssAnimationProperty({
     valueConverter: PercentLength.parse,
 });
 widthProperty.register(Style);
-export var heightProperty = new CssAnimationProperty({
+export const heightProperty = new CssAnimationProperty({
     name: 'height',
     cssName: 'height',
     defaultValue: 'auto',
     equalityComparer: Length.equals,
     // TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
     //       on the animation property, so fake it here. -_-
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         if (global.isIOS) {
-            var view = target.viewRef.get();
+            const view = target.viewRef.get();
             if (view) {
                 view.requestLayout();
             }
@@ -235,19 +233,19 @@ export var heightProperty = new CssAnimationProperty({
     valueConverter: PercentLength.parse,
 });
 heightProperty.register(Style);
-var marginProperty = new ShorthandProperty({
+const marginProperty = new ShorthandProperty({
     name: 'margin',
     cssName: 'margin',
     getter: function () {
         if (PercentLength.equals(this.marginTop, this.marginRight) && PercentLength.equals(this.marginTop, this.marginBottom) && PercentLength.equals(this.marginTop, this.marginLeft)) {
             return this.marginTop;
         }
-        return "".concat(PercentLength.convertToString(this.marginTop), " ").concat(PercentLength.convertToString(this.marginRight), " ").concat(PercentLength.convertToString(this.marginBottom), " ").concat(PercentLength.convertToString(this.marginLeft));
+        return `${PercentLength.convertToString(this.marginTop)} ${PercentLength.convertToString(this.marginRight)} ${PercentLength.convertToString(this.marginBottom)} ${PercentLength.convertToString(this.marginLeft)}`;
     },
     converter: convertToMargins,
 });
 marginProperty.register(Style);
-export var marginLeftProperty = new CssProperty({
+export const marginLeftProperty = new CssProperty({
     name: 'marginLeft',
     cssName: 'margin-left',
     defaultValue: CoreTypes.zeroLength,
@@ -256,7 +254,7 @@ export var marginLeftProperty = new CssProperty({
     valueConverter: PercentLength.parse,
 });
 marginLeftProperty.register(Style);
-export var marginRightProperty = new CssProperty({
+export const marginRightProperty = new CssProperty({
     name: 'marginRight',
     cssName: 'margin-right',
     defaultValue: CoreTypes.zeroLength,
@@ -265,7 +263,7 @@ export var marginRightProperty = new CssProperty({
     valueConverter: PercentLength.parse,
 });
 marginRightProperty.register(Style);
-export var marginTopProperty = new CssProperty({
+export const marginTopProperty = new CssProperty({
     name: 'marginTop',
     cssName: 'margin-top',
     defaultValue: CoreTypes.zeroLength,
@@ -274,7 +272,7 @@ export var marginTopProperty = new CssProperty({
     valueConverter: PercentLength.parse,
 });
 marginTopProperty.register(Style);
-export var marginBottomProperty = new CssProperty({
+export const marginBottomProperty = new CssProperty({
     name: 'marginBottom',
     cssName: 'margin-bottom',
     defaultValue: CoreTypes.zeroLength,
@@ -283,91 +281,91 @@ export var marginBottomProperty = new CssProperty({
     valueConverter: PercentLength.parse,
 });
 marginBottomProperty.register(Style);
-var paddingProperty = new ShorthandProperty({
+const paddingProperty = new ShorthandProperty({
     name: 'padding',
     cssName: 'padding',
     getter: function () {
         if (Length.equals(this.paddingTop, this.paddingRight) && Length.equals(this.paddingTop, this.paddingBottom) && Length.equals(this.paddingTop, this.paddingLeft)) {
             return this.paddingTop;
         }
-        return "".concat(Length.convertToString(this.paddingTop), " ").concat(Length.convertToString(this.paddingRight), " ").concat(Length.convertToString(this.paddingBottom), " ").concat(Length.convertToString(this.paddingLeft));
+        return `${Length.convertToString(this.paddingTop)} ${Length.convertToString(this.paddingRight)} ${Length.convertToString(this.paddingBottom)} ${Length.convertToString(this.paddingLeft)}`;
     },
     converter: convertToPaddings,
 });
 paddingProperty.register(Style);
-export var paddingLeftProperty = new CssProperty({
+export const paddingLeftProperty = new CssProperty({
     name: 'paddingLeft',
     cssName: 'padding-left',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var view = target.viewRef.get();
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
         if (view) {
             view.effectivePaddingLeft = Length.toDevicePixels(newValue, 0);
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
     valueConverter: Length.parse,
 });
 paddingLeftProperty.register(Style);
-export var paddingRightProperty = new CssProperty({
+export const paddingRightProperty = new CssProperty({
     name: 'paddingRight',
     cssName: 'padding-right',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var view = target.viewRef.get();
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
         if (view) {
             view.effectivePaddingRight = Length.toDevicePixels(newValue, 0);
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
     valueConverter: Length.parse,
 });
 paddingRightProperty.register(Style);
-export var paddingTopProperty = new CssProperty({
+export const paddingTopProperty = new CssProperty({
     name: 'paddingTop',
     cssName: 'padding-top',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var view = target.viewRef.get();
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
         if (view) {
             view.effectivePaddingTop = Length.toDevicePixels(newValue, 0);
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
     valueConverter: Length.parse,
 });
 paddingTopProperty.register(Style);
-export var paddingBottomProperty = new CssProperty({
+export const paddingBottomProperty = new CssProperty({
     name: 'paddingBottom',
     cssName: 'padding-bottom',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var view = target.viewRef.get();
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
         if (view) {
             view.effectivePaddingBottom = Length.toDevicePixels(newValue, 0);
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
     valueConverter: Length.parse,
 });
 paddingBottomProperty.register(Style);
-export var horizontalAlignmentProperty = new CssProperty({
+export const horizontalAlignmentProperty = new CssProperty({
     name: 'horizontalAlignment',
     cssName: 'horizontal-align',
     defaultValue: CoreTypes.HorizontalAlignment.stretch,
@@ -375,7 +373,7 @@ export var horizontalAlignmentProperty = new CssProperty({
     valueConverter: CoreTypes.HorizontalAlignment.parse,
 });
 horizontalAlignmentProperty.register(Style);
-export var verticalAlignmentProperty = new CssProperty({
+export const verticalAlignmentProperty = new CssProperty({
     name: 'verticalAlignment',
     cssName: 'vertical-align',
     defaultValue: CoreTypes.VerticalAlignmentText.stretch,
@@ -385,31 +383,31 @@ export var verticalAlignmentProperty = new CssProperty({
 verticalAlignmentProperty.register(Style);
 function parseThickness(value) {
     if (typeof value === 'string') {
-        var arr = value.split(/[ ,]+/);
-        var top_1;
-        var right = void 0;
-        var bottom = void 0;
-        var left = void 0;
+        const arr = value.split(/[ ,]+/);
+        let top;
+        let right;
+        let bottom;
+        let left;
         if (arr.length === 1) {
-            top_1 = arr[0];
+            top = arr[0];
             right = arr[0];
             bottom = arr[0];
             left = arr[0];
         }
         else if (arr.length === 2) {
-            top_1 = arr[0];
+            top = arr[0];
             bottom = arr[0];
             right = arr[1];
             left = arr[1];
         }
         else if (arr.length === 3) {
-            top_1 = arr[0];
+            top = arr[0];
             right = arr[1];
             left = arr[1];
             bottom = arr[2];
         }
         else if (arr.length === 4) {
-            top_1 = arr[0];
+            top = arr[0];
             right = arr[1];
             bottom = arr[2];
             left = arr[3];
@@ -418,7 +416,7 @@ function parseThickness(value) {
             throw new Error('Expected 1, 2, 3 or 4 parameters. Actual: ' + value);
         }
         return {
-            top: top_1,
+            top: top,
             right: right,
             bottom: bottom,
             left: left,
@@ -430,7 +428,7 @@ function parseThickness(value) {
 }
 function convertToMargins(value) {
     if (typeof value === 'string' && value !== 'auto') {
-        var thickness = parseThickness(value);
+        const thickness = parseThickness(value);
         return [
             [marginTopProperty, PercentLength.parse(thickness.top)],
             [marginRightProperty, PercentLength.parse(thickness.right)],
@@ -449,7 +447,7 @@ function convertToMargins(value) {
 }
 function convertToPaddings(value) {
     if (typeof value === 'string' && value !== 'auto') {
-        var thickness = parseThickness(value);
+        const thickness = parseThickness(value);
         return [
             [paddingTopProperty, Length.parse(thickness.top)],
             [paddingRightProperty, Length.parse(thickness.right)],
@@ -466,42 +464,42 @@ function convertToPaddings(value) {
         ];
     }
 }
-export var rotateProperty = new CssAnimationProperty({
+export const rotateProperty = new CssAnimationProperty({
     name: 'rotate',
     cssName: 'rotate',
     defaultValue: 0,
     valueConverter: parseFloat,
 });
 rotateProperty.register(Style);
-export var rotateXProperty = new CssAnimationProperty({
+export const rotateXProperty = new CssAnimationProperty({
     name: 'rotateX',
     cssName: 'rotatex',
     defaultValue: 0,
     valueConverter: parseFloat,
 });
 rotateXProperty.register(Style);
-export var rotateYProperty = new CssAnimationProperty({
+export const rotateYProperty = new CssAnimationProperty({
     name: 'rotateY',
     cssName: 'rotatey',
     defaultValue: 0,
     valueConverter: parseFloat,
 });
 rotateYProperty.register(Style);
-export var perspectiveProperty = new CssAnimationProperty({
+export const perspectiveProperty = new CssAnimationProperty({
     name: 'perspective',
     cssName: 'perspective',
     defaultValue: 1000,
     valueConverter: parseFloat,
 });
 perspectiveProperty.register(Style);
-export var scaleXProperty = new CssAnimationProperty({
+export const scaleXProperty = new CssAnimationProperty({
     name: 'scaleX',
     cssName: 'scaleX',
     defaultValue: 1,
     valueConverter: parseFloat,
 });
 scaleXProperty.register(Style);
-export var scaleYProperty = new CssAnimationProperty({
+export const scaleYProperty = new CssAnimationProperty({
     name: 'scaleY',
     cssName: 'scaleY',
     defaultValue: 1,
@@ -516,118 +514,106 @@ function parseDIPs(value) {
         return parseFloat(value.replace('dip', '').trim());
     }
 }
-export var translateXProperty = new CssAnimationProperty({
+export const translateXProperty = new CssAnimationProperty({
     name: 'translateX',
     cssName: 'translateX',
     defaultValue: 0,
     valueConverter: parseDIPs,
 });
 translateXProperty.register(Style);
-export var translateYProperty = new CssAnimationProperty({
+export const translateYProperty = new CssAnimationProperty({
     name: 'translateY',
     cssName: 'translateY',
     defaultValue: 0,
     valueConverter: parseDIPs,
 });
 translateYProperty.register(Style);
-var transformProperty = new ShorthandProperty({
+const transformProperty = new ShorthandProperty({
     name: 'transform',
     cssName: 'transform',
     getter: function () {
-        var scaleX = this.scaleX;
-        var scaleY = this.scaleY;
-        var translateX = this.translateX;
-        var translateY = this.translateY;
-        var rotate = this.rotate;
-        var rotateX = this.rotateX;
-        var rotateY = this.rotateY;
-        var result = '';
+        const scaleX = this.scaleX;
+        const scaleY = this.scaleY;
+        const translateX = this.translateX;
+        const translateY = this.translateY;
+        const rotate = this.rotate;
+        const rotateX = this.rotateX;
+        const rotateY = this.rotateY;
+        let result = '';
         if (translateX !== 0 || translateY !== 0) {
-            result += "translate(".concat(translateX, ", ").concat(translateY, ") ");
+            result += `translate(${translateX}, ${translateY}) `;
         }
         if (scaleX !== 1 || scaleY !== 1) {
-            result += "scale(".concat(scaleX, ", ").concat(scaleY, ") ");
+            result += `scale(${scaleX}, ${scaleY}) `;
         }
         if (rotateX !== 0 || rotateY !== 0 || rotate !== 0) {
-            result += "rotate(".concat(rotateX, ", ").concat(rotateY, ", ").concat(rotate, ") ");
-            result += "rotate (".concat(rotate, ")");
+            result += `rotate(${rotateX}, ${rotateY}, ${rotate}) `;
+            result += `rotate (${rotate})`;
         }
         return result.trim();
     },
     converter: convertToTransform,
 });
 transformProperty.register(Style);
-var IDENTITY_TRANSFORMATION = {
+const IDENTITY_TRANSFORMATION = {
     translate: { x: 0, y: 0 },
     rotate: { x: 0, y: 0, z: 0 },
     scale: { x: 1, y: 1 },
 };
-var TRANSFORM_SPLITTER = new RegExp(/\s*(.+?)\((.*?)\)/g);
-var TRANSFORMATIONS = Object.freeze(['rotate', 'rotateX', 'rotateY', 'rotate3d', 'translate', 'translate3d', 'translateX', 'translateY', 'scale', 'scale3d', 'scaleX', 'scaleY']);
-var STYLE_TRANSFORMATION_MAP = Object.freeze({
-    scale: function (value) { return ({ property: 'scale', value: value }); },
-    scale3d: function (value) { return ({ property: 'scale', value: value }); },
-    scaleX: function (_a) {
-        var x = _a.x;
-        return ({
-            property: 'scale',
-            value: { x: x, y: IDENTITY_TRANSFORMATION.scale.y },
-        });
-    },
-    scaleY: function (_a) {
-        var y = _a.y;
-        return ({
-            property: 'scale',
-            value: { y: y, x: IDENTITY_TRANSFORMATION.scale.x },
-        });
-    },
-    translate: function (value) { return ({ property: 'translate', value: value }); },
-    translate3d: function (value) { return ({ property: 'translate', value: value }); },
-    translateX: function (_a) {
-        var x = _a.x;
-        return ({
-            property: 'translate',
-            value: { x: x, y: IDENTITY_TRANSFORMATION.translate.y },
-        });
-    },
-    translateY: function (_a) {
-        var y = _a.y;
-        return ({
-            property: 'translate',
-            value: { y: y, x: IDENTITY_TRANSFORMATION.translate.x },
-        });
-    },
-    rotate3d: function (value) { return ({ property: 'rotate', value: value }); },
-    rotateX: function (x) { return ({
+const TRANSFORM_SPLITTER = new RegExp(/\s*(.+?)\((.*?)\)/g);
+const TRANSFORMATIONS = Object.freeze(['rotate', 'rotateX', 'rotateY', 'rotate3d', 'translate', 'translate3d', 'translateX', 'translateY', 'scale', 'scale3d', 'scaleX', 'scaleY']);
+const STYLE_TRANSFORMATION_MAP = Object.freeze({
+    scale: (value) => ({ property: 'scale', value }),
+    scale3d: (value) => ({ property: 'scale', value }),
+    scaleX: ({ x }) => ({
+        property: 'scale',
+        value: { x, y: IDENTITY_TRANSFORMATION.scale.y },
+    }),
+    scaleY: ({ y }) => ({
+        property: 'scale',
+        value: { y, x: IDENTITY_TRANSFORMATION.scale.x },
+    }),
+    translate: (value) => ({ property: 'translate', value }),
+    translate3d: (value) => ({ property: 'translate', value }),
+    translateX: ({ x }) => ({
+        property: 'translate',
+        value: { x, y: IDENTITY_TRANSFORMATION.translate.y },
+    }),
+    translateY: ({ y }) => ({
+        property: 'translate',
+        value: { y, x: IDENTITY_TRANSFORMATION.translate.x },
+    }),
+    rotate3d: (value) => ({ property: 'rotate', value }),
+    rotateX: (x) => ({
         property: 'rotate',
         value: {
-            x: x,
+            x,
             y: IDENTITY_TRANSFORMATION.rotate.y,
             z: IDENTITY_TRANSFORMATION.rotate.z,
         },
-    }); },
-    rotateY: function (y) { return ({
+    }),
+    rotateY: (y) => ({
         property: 'rotate',
         value: {
             x: IDENTITY_TRANSFORMATION.rotate.x,
-            y: y,
+            y,
             z: IDENTITY_TRANSFORMATION.rotate.z,
         },
-    }); },
-    rotate: function (z) { return ({
+    }),
+    rotate: (z) => ({
         property: 'rotate',
         value: {
             x: IDENTITY_TRANSFORMATION.rotate.x,
             y: IDENTITY_TRANSFORMATION.rotate.y,
-            z: z,
+            z,
         },
-    }); },
+    }),
 });
 function convertToTransform(value) {
     if (value === unsetValue) {
         value = 'none';
     }
-    var _a = transformConverter(value), translate = _a.translate, rotate = _a.rotate, scale = _a.scale;
+    const { translate, rotate, scale } = transformConverter(value);
     return [
         [translateXProperty, translate.x],
         [translateYProperty, translate.y],
@@ -639,80 +625,79 @@ function convertToTransform(value) {
     ];
 }
 export function transformConverter(text) {
-    var transformations = parseTransformString(text);
+    const transformations = parseTransformString(text);
     if (text === 'none' || text === '' || !transformations.length) {
         return IDENTITY_TRANSFORMATION;
     }
-    var usedTransforms = transformations.map(function (t) { return t.property; });
+    const usedTransforms = transformations.map((t) => t.property);
     if (!hasDuplicates(usedTransforms)) {
-        var fullTransformations_1 = __assign({}, IDENTITY_TRANSFORMATION);
-        transformations.forEach(function (transform) {
-            fullTransformations_1[transform.property] = transform.value;
+        const fullTransformations = { ...IDENTITY_TRANSFORMATION };
+        transformations.forEach((transform) => {
+            fullTransformations[transform.property] = transform.value;
         });
-        return fullTransformations_1;
+        return fullTransformations;
     }
-    var affineMatrix = transformations.map(getTransformMatrix).reduce(multiplyAffine2d);
-    var cssMatrix = matrixArrayToCssMatrix(affineMatrix);
+    const affineMatrix = transformations.map(getTransformMatrix).reduce(multiplyAffine2d);
+    const cssMatrix = matrixArrayToCssMatrix(affineMatrix);
     return decompose2DTransformMatrix(cssMatrix);
 }
 // using general regex and manually checking the matched
 // properties is faster than using more specific regex
 // https://jsperf.com/cssparse
 function parseTransformString(text) {
-    var matches = [];
-    var match;
+    const matches = [];
+    let match;
     while ((match = TRANSFORM_SPLITTER.exec(text)) !== null) {
-        var property = match[1];
-        var value = convertTransformValue(property, match[2]);
+        const property = match[1];
+        const value = convertTransformValue(property, match[2]);
         if (TRANSFORMATIONS.indexOf(property) !== -1) {
-            matches.push(normalizeTransformation({ property: property, value: value }));
+            matches.push(normalizeTransformation({ property, value }));
         }
     }
     return matches;
 }
-function normalizeTransformation(_a) {
-    var property = _a.property, value = _a.value;
+function normalizeTransformation({ property, value }) {
     return STYLE_TRANSFORMATION_MAP[property](value);
 }
 function convertTransformValue(property, stringValue) {
     // eslint-disable-next-line prefer-const
-    var _a = stringValue.split(',').map(parseFloat), x = _a[0], y = _a[1], z = _a[2];
+    let [x, y, z] = stringValue.split(',').map(parseFloat);
     if (property === 'translate') {
-        y !== null && y !== void 0 ? y : (y = IDENTITY_TRANSFORMATION.translate.y);
+        y ?? (y = IDENTITY_TRANSFORMATION.translate.y);
     }
     else {
-        y !== null && y !== void 0 ? y : (y = x);
-        z !== null && z !== void 0 ? z : (z = y);
+        y ?? (y = x);
+        z ?? (z = y);
     }
     if (property === 'rotate' || property === 'rotateX' || property === 'rotateY') {
         return stringValue.slice(-3) === 'rad' ? radiansToDegrees(x) : x;
     }
-    return { x: x, y: y, z: z };
+    return { x, y, z };
 }
 // Background properties.
-var backgroundProperty = new ShorthandProperty({
+const backgroundProperty = new ShorthandProperty({
     name: 'background',
     cssName: 'background',
     getter: function () {
-        return "".concat(this.backgroundColor, " ").concat(this.backgroundImage, " ").concat(this.backgroundRepeat, " ").concat(this.backgroundPosition);
+        return `${this.backgroundColor} ${this.backgroundImage} ${this.backgroundRepeat} ${this.backgroundPosition}`;
     },
     converter: convertToBackgrounds,
 });
 backgroundProperty.register(Style);
-export var backgroundInternalProperty = new CssProperty({
+export const backgroundInternalProperty = new CssProperty({
     name: 'backgroundInternal',
     cssName: '_backgroundInternal',
     defaultValue: Background.default,
 });
 backgroundInternalProperty.register(Style);
 // const pattern: RegExp = /url\(('|")(.*?)\1\)/;
-export var backgroundImageProperty = new CssProperty({
+export const backgroundImageProperty = new CssProperty({
     name: 'backgroundImage',
     cssName: 'background-image',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withImage(newValue);
     },
-    equalityComparer: function (value1, value2) {
+    equalityComparer: (value1, value2) => {
         if (value1 instanceof LinearGradient && value2 instanceof LinearGradient) {
             return LinearGradient.equals(value1, value2);
         }
@@ -720,9 +705,9 @@ export var backgroundImageProperty = new CssProperty({
             return value1 === value2;
         }
     },
-    valueConverter: function (value) {
+    valueConverter: (value) => {
         if (typeof value === 'string') {
-            var parsed = parseBackground(value);
+            const parsed = parseBackground(value);
             if (parsed) {
                 value = typeof parsed.value.image === 'object' ? LinearGradient.parse(parsed.value.image) : value;
             }
@@ -731,57 +716,57 @@ export var backgroundImageProperty = new CssProperty({
     },
 });
 backgroundImageProperty.register(Style);
-export var backgroundColorProperty = new CssAnimationProperty({
+export const backgroundColorProperty = new CssAnimationProperty({
     name: 'backgroundColor',
     cssName: 'background-color',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withColor(newValue);
     },
     equalityComparer: Color.equals,
-    valueConverter: function (value) { return new Color(value); },
+    valueConverter: (value) => new Color(value),
 });
 backgroundColorProperty.register(Style);
-export var backgroundRepeatProperty = new CssProperty({
+export const backgroundRepeatProperty = new CssProperty({
     name: 'backgroundRepeat',
     cssName: 'background-repeat',
     valueConverter: CoreTypes.BackgroundRepeat.parse,
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withRepeat(newValue);
     },
 });
 backgroundRepeatProperty.register(Style);
-export var backgroundSizeProperty = new CssProperty({
+export const backgroundSizeProperty = new CssProperty({
     name: 'backgroundSize',
     cssName: 'background-size',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withSize(newValue);
     },
 });
 backgroundSizeProperty.register(Style);
-export var backgroundPositionProperty = new CssProperty({
+export const backgroundPositionProperty = new CssProperty({
     name: 'backgroundPosition',
     cssName: 'background-position',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withPosition(newValue);
     },
 });
 backgroundPositionProperty.register(Style);
 function convertToBackgrounds(value) {
     if (typeof value === 'string') {
-        var backgrounds = parseBackground(value).value;
-        var backgroundColor = unsetValue;
+        const backgrounds = parseBackground(value).value;
+        let backgroundColor = unsetValue;
         if (backgrounds.color) {
             backgroundColor = backgrounds.color instanceof Color ? backgrounds.color : new Color(backgrounds.color);
         }
-        var backgroundImage = void 0;
+        let backgroundImage;
         if (typeof backgrounds.image === 'object' && backgrounds.image) {
             backgroundImage = LinearGradient.parse(backgrounds.image);
         }
         else {
             backgroundImage = backgrounds.image || unsetValue;
         }
-        var backgroundRepeat = backgrounds.repeat || unsetValue;
-        var backgroundPosition = backgrounds.position ? backgrounds.position.text : unsetValue;
+        const backgroundRepeat = backgrounds.repeat || unsetValue;
+        const backgroundPosition = backgrounds.position ? backgrounds.position.text : unsetValue;
         return [
             [backgroundColorProperty, backgroundColor],
             [backgroundImageProperty, backgroundImage],
@@ -799,7 +784,7 @@ function convertToBackgrounds(value) {
     }
 }
 function parseBorderColor(value) {
-    var result = {
+    const result = {
         top: undefined,
         right: undefined,
         bottom: undefined,
@@ -809,48 +794,48 @@ function parseBorderColor(value) {
         result.top = result.right = result.bottom = result.left = new Color(value);
         return result;
     }
-    var arr = value.split(/[ ,]+/);
+    const arr = value.split(/[ ,]+/);
     if (arr.length === 1) {
-        var arr0 = new Color(arr[0]);
+        const arr0 = new Color(arr[0]);
         result.top = arr0;
         result.right = arr0;
         result.bottom = arr0;
         result.left = arr0;
     }
     else if (arr.length === 2) {
-        var arr0 = new Color(arr[0]);
-        var arr1 = new Color(arr[1]);
+        const arr0 = new Color(arr[0]);
+        const arr1 = new Color(arr[1]);
         result.top = arr0;
         result.right = arr1;
         result.bottom = arr0;
         result.left = arr1;
     }
     else if (arr.length === 3) {
-        var arr0 = new Color(arr[0]);
-        var arr1 = new Color(arr[1]);
-        var arr2 = new Color(arr[2]);
+        const arr0 = new Color(arr[0]);
+        const arr1 = new Color(arr[1]);
+        const arr2 = new Color(arr[2]);
         result.top = arr0;
         result.right = arr1;
         result.bottom = arr2;
         result.left = arr1;
     }
     else if (arr.length === 4) {
-        var arr0 = new Color(arr[0]);
-        var arr1 = new Color(arr[1]);
-        var arr2 = new Color(arr[2]);
-        var arr3 = new Color(arr[3]);
+        const arr0 = new Color(arr[0]);
+        const arr1 = new Color(arr[1]);
+        const arr2 = new Color(arr[2]);
+        const arr3 = new Color(arr[3]);
         result.top = arr0;
         result.right = arr1;
         result.bottom = arr2;
         result.left = arr3;
     }
     else {
-        throw new Error("Expected 1, 2, 3 or 4 parameters. Actual: ".concat(value));
+        throw new Error(`Expected 1, 2, 3 or 4 parameters. Actual: ${value}`);
     }
     return result;
 }
 // Border Color properties.
-var borderColorProperty = new ShorthandProperty({
+const borderColorProperty = new ShorthandProperty({
     name: 'borderColor',
     cssName: 'border-color',
     getter: function () {
@@ -858,12 +843,12 @@ var borderColorProperty = new ShorthandProperty({
             return this.borderTopColor;
         }
         else {
-            return "".concat(this.borderTopColor, " ").concat(this.borderRightColor, " ").concat(this.borderBottomColor, " ").concat(this.borderLeftColor);
+            return `${this.borderTopColor} ${this.borderRightColor} ${this.borderBottomColor} ${this.borderLeftColor}`;
         }
     },
     converter: function (value) {
         if (typeof value === 'string') {
-            var fourColors = parseBorderColor(value);
+            const fourColors = parseBorderColor(value);
             return [
                 [borderTopColorProperty, fourColors.top],
                 [borderRightColorProperty, fourColors.right],
@@ -882,48 +867,48 @@ var borderColorProperty = new ShorthandProperty({
     },
 });
 borderColorProperty.register(Style);
-export var borderTopColorProperty = new CssProperty({
+export const borderTopColorProperty = new CssProperty({
     name: 'borderTopColor',
     cssName: 'border-top-color',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withBorderTopColor(newValue);
     },
     equalityComparer: Color.equals,
-    valueConverter: function (value) { return new Color(value); },
+    valueConverter: (value) => new Color(value),
 });
 borderTopColorProperty.register(Style);
-export var borderRightColorProperty = new CssProperty({
+export const borderRightColorProperty = new CssProperty({
     name: 'borderRightColor',
     cssName: 'border-right-color',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withBorderRightColor(newValue);
     },
     equalityComparer: Color.equals,
-    valueConverter: function (value) { return new Color(value); },
+    valueConverter: (value) => new Color(value),
 });
 borderRightColorProperty.register(Style);
-export var borderBottomColorProperty = new CssProperty({
+export const borderBottomColorProperty = new CssProperty({
     name: 'borderBottomColor',
     cssName: 'border-bottom-color',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withBorderBottomColor(newValue);
     },
     equalityComparer: Color.equals,
-    valueConverter: function (value) { return new Color(value); },
+    valueConverter: (value) => new Color(value),
 });
 borderBottomColorProperty.register(Style);
-export var borderLeftColorProperty = new CssProperty({
+export const borderLeftColorProperty = new CssProperty({
     name: 'borderLeftColor',
     cssName: 'border-left-color',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withBorderLeftColor(newValue);
     },
     equalityComparer: Color.equals,
-    valueConverter: function (value) { return new Color(value); },
+    valueConverter: (value) => new Color(value),
 });
 borderLeftColorProperty.register(Style);
 // Border Width properties.
-var borderWidthProperty = new ShorthandProperty({
+const borderWidthProperty = new ShorthandProperty({
     name: 'borderWidth',
     cssName: 'border-width',
     getter: function () {
@@ -931,12 +916,12 @@ var borderWidthProperty = new ShorthandProperty({
             return this.borderTopWidth;
         }
         else {
-            return "".concat(Length.convertToString(this.borderTopWidth), " ").concat(Length.convertToString(this.borderRightWidth), " ").concat(Length.convertToString(this.borderBottomWidth), " ").concat(Length.convertToString(this.borderLeftWidth));
+            return `${Length.convertToString(this.borderTopWidth)} ${Length.convertToString(this.borderRightWidth)} ${Length.convertToString(this.borderBottomWidth)} ${Length.convertToString(this.borderLeftWidth)}`;
         }
     },
     converter: function (value) {
         if (typeof value === 'string' && value !== 'auto') {
-            var borderWidths = parseThickness(value);
+            const borderWidths = parseThickness(value);
             return [
                 [borderTopWidthProperty, borderWidths.top],
                 [borderRightWidthProperty, borderWidths.right],
@@ -955,92 +940,92 @@ var borderWidthProperty = new ShorthandProperty({
     },
 });
 borderWidthProperty.register(Style);
-export var borderTopWidthProperty = new CssProperty({
+export const borderTopWidthProperty = new CssProperty({
     name: 'borderTopWidth',
     cssName: 'border-top-width',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var value = Length.toDevicePixels(newValue, 0);
+    valueChanged: (target, oldValue, newValue) => {
+        const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
-            throw new Error("border-top-width should be Non-Negative Finite number. Value: ".concat(value));
+            throw new Error(`border-top-width should be Non-Negative Finite number. Value: ${value}`);
         }
-        var view = target.viewRef.get();
+        const view = target.viewRef.get();
         if (view) {
             view.effectiveBorderTopWidth = value;
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
         target.backgroundInternal = target.backgroundInternal.withBorderTopWidth(value);
     },
     valueConverter: Length.parse,
 });
 borderTopWidthProperty.register(Style);
-export var borderRightWidthProperty = new CssProperty({
+export const borderRightWidthProperty = new CssProperty({
     name: 'borderRightWidth',
     cssName: 'border-right-width',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var value = Length.toDevicePixels(newValue, 0);
+    valueChanged: (target, oldValue, newValue) => {
+        const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
-            throw new Error("border-right-width should be Non-Negative Finite number. Value: ".concat(value));
+            throw new Error(`border-right-width should be Non-Negative Finite number. Value: ${value}`);
         }
-        var view = target.viewRef.get();
+        const view = target.viewRef.get();
         if (view) {
             view.effectiveBorderRightWidth = value;
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
         target.backgroundInternal = target.backgroundInternal.withBorderRightWidth(value);
     },
     valueConverter: Length.parse,
 });
 borderRightWidthProperty.register(Style);
-export var borderBottomWidthProperty = new CssProperty({
+export const borderBottomWidthProperty = new CssProperty({
     name: 'borderBottomWidth',
     cssName: 'border-bottom-width',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var value = Length.toDevicePixels(newValue, 0);
+    valueChanged: (target, oldValue, newValue) => {
+        const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
-            throw new Error("border-bottom-width should be Non-Negative Finite number. Value: ".concat(value));
+            throw new Error(`border-bottom-width should be Non-Negative Finite number. Value: ${value}`);
         }
-        var view = target.viewRef.get();
+        const view = target.viewRef.get();
         if (view) {
             view.effectiveBorderBottomWidth = value;
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
         target.backgroundInternal = target.backgroundInternal.withBorderBottomWidth(value);
     },
     valueConverter: Length.parse,
 });
 borderBottomWidthProperty.register(Style);
-export var borderLeftWidthProperty = new CssProperty({
+export const borderLeftWidthProperty = new CssProperty({
     name: 'borderLeftWidth',
     cssName: 'border-left-width',
     defaultValue: CoreTypes.zeroLength,
     affectsLayout: global.isIOS,
     equalityComparer: Length.equals,
-    valueChanged: function (target, oldValue, newValue) {
-        var value = Length.toDevicePixels(newValue, 0);
+    valueChanged: (target, oldValue, newValue) => {
+        const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
-            throw new Error("border-left-width should be Non-Negative Finite number. Value: ".concat(value));
+            throw new Error(`border-left-width should be Non-Negative Finite number. Value: ${value}`);
         }
-        var view = target.viewRef.get();
+        const view = target.viewRef.get();
         if (view) {
             view.effectiveBorderLeftWidth = value;
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
         target.backgroundInternal = target.backgroundInternal.withBorderLeftWidth(value);
     },
@@ -1048,18 +1033,18 @@ export var borderLeftWidthProperty = new CssProperty({
 });
 borderLeftWidthProperty.register(Style);
 // Border Radius properties.
-var borderRadiusProperty = new ShorthandProperty({
+const borderRadiusProperty = new ShorthandProperty({
     name: 'borderRadius',
     cssName: 'border-radius',
     getter: function () {
         if (Length.equals(this.borderTopLeftRadius, this.borderTopRightRadius) && Length.equals(this.borderTopLeftRadius, this.borderBottomRightRadius) && Length.equals(this.borderTopLeftRadius, this.borderBottomLeftRadius)) {
             return this.borderTopLeftRadius;
         }
-        return "".concat(Length.convertToString(this.borderTopLeftRadius), " ").concat(Length.convertToString(this.borderTopRightRadius), " ").concat(Length.convertToString(this.borderBottomRightRadius), " ").concat(Length.convertToString(this.borderBottomLeftRadius));
+        return `${Length.convertToString(this.borderTopLeftRadius)} ${Length.convertToString(this.borderTopRightRadius)} ${Length.convertToString(this.borderBottomRightRadius)} ${Length.convertToString(this.borderBottomLeftRadius)}`;
     },
     converter: function (value) {
         if (typeof value === 'string') {
-            var borderRadius = parseThickness(value);
+            const borderRadius = parseThickness(value);
             return [
                 [borderTopLeftRadiusProperty, borderRadius.top],
                 [borderTopRightRadiusProperty, borderRadius.right],
@@ -1078,15 +1063,15 @@ var borderRadiusProperty = new ShorthandProperty({
     },
 });
 borderRadiusProperty.register(Style);
-export var borderTopLeftRadiusProperty = new CssProperty({
+export const borderTopLeftRadiusProperty = new CssProperty({
     name: 'borderTopLeftRadius',
     cssName: 'border-top-left-radius',
     defaultValue: 0,
     affectsLayout: global.isIOS,
-    valueChanged: function (target, oldValue, newValue) {
-        var value = Length.toDevicePixels(newValue, 0);
+    valueChanged: (target, oldValue, newValue) => {
+        const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
-            throw new Error("border-top-left-radius should be Non-Negative Finite number. Value: ".concat(value));
+            throw new Error(`border-top-left-radius should be Non-Negative Finite number. Value: ${value}`);
         }
         target.backgroundInternal = target.backgroundInternal.withBorderTopLeftRadius(value);
     },
@@ -1094,15 +1079,15 @@ export var borderTopLeftRadiusProperty = new CssProperty({
     equalityComparer: Length.equals,
 });
 borderTopLeftRadiusProperty.register(Style);
-export var borderTopRightRadiusProperty = new CssProperty({
+export const borderTopRightRadiusProperty = new CssProperty({
     name: 'borderTopRightRadius',
     cssName: 'border-top-right-radius',
     defaultValue: 0,
     affectsLayout: global.isIOS,
-    valueChanged: function (target, oldValue, newValue) {
-        var value = Length.toDevicePixels(newValue, 0);
+    valueChanged: (target, oldValue, newValue) => {
+        const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
-            throw new Error("border-top-right-radius should be Non-Negative Finite number. Value: ".concat(value));
+            throw new Error(`border-top-right-radius should be Non-Negative Finite number. Value: ${value}`);
         }
         target.backgroundInternal = target.backgroundInternal.withBorderTopRightRadius(value);
     },
@@ -1110,15 +1095,15 @@ export var borderTopRightRadiusProperty = new CssProperty({
     equalityComparer: Length.equals,
 });
 borderTopRightRadiusProperty.register(Style);
-export var borderBottomRightRadiusProperty = new CssProperty({
+export const borderBottomRightRadiusProperty = new CssProperty({
     name: 'borderBottomRightRadius',
     cssName: 'border-bottom-right-radius',
     defaultValue: 0,
     affectsLayout: global.isIOS,
-    valueChanged: function (target, oldValue, newValue) {
-        var value = Length.toDevicePixels(newValue, 0);
+    valueChanged: (target, oldValue, newValue) => {
+        const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
-            throw new Error("border-bottom-right-radius should be Non-Negative Finite number. Value: ".concat(value));
+            throw new Error(`border-bottom-right-radius should be Non-Negative Finite number. Value: ${value}`);
         }
         target.backgroundInternal = target.backgroundInternal.withBorderBottomRightRadius(value);
     },
@@ -1126,15 +1111,15 @@ export var borderBottomRightRadiusProperty = new CssProperty({
     equalityComparer: Length.equals,
 });
 borderBottomRightRadiusProperty.register(Style);
-export var borderBottomLeftRadiusProperty = new CssProperty({
+export const borderBottomLeftRadiusProperty = new CssProperty({
     name: 'borderBottomLeftRadius',
     cssName: 'border-bottom-left-radius',
     defaultValue: 0,
     affectsLayout: global.isIOS,
-    valueChanged: function (target, oldValue, newValue) {
-        var value = Length.toDevicePixels(newValue, 0);
+    valueChanged: (target, oldValue, newValue) => {
+        const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
-            throw new Error("border-bottom-left-radius should be Non-Negative Finite number. Value: ".concat(value));
+            throw new Error(`border-bottom-left-radius should be Non-Negative Finite number. Value: ${value}`);
         }
         target.backgroundInternal = target.backgroundInternal.withBorderBottomLeftRadius(value);
     },
@@ -1142,10 +1127,10 @@ export var borderBottomLeftRadiusProperty = new CssProperty({
     equalityComparer: Length.equals,
 });
 borderBottomLeftRadiusProperty.register(Style);
-var boxShadowProperty = new CssProperty({
+const boxShadowProperty = new CssProperty({
     name: 'boxShadow',
     cssName: 'box-shadow',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         target.backgroundInternal = target.backgroundInternal.withBoxShadow(newValue
             ? {
                 inset: newValue.inset,
@@ -1157,7 +1142,7 @@ var boxShadowProperty = new CssProperty({
             }
             : null);
     },
-    valueConverter: function (value) {
+    valueConverter: (value) => {
         return parseCSSShadow(value);
     },
 });
@@ -1165,18 +1150,18 @@ boxShadowProperty.register(Style);
 function isNonNegativeFiniteNumber(value) {
     return isFinite(value) && !isNaN(value) && value >= 0;
 }
-var supportedPaths = ['rect', 'circle', 'ellipse', 'polygon', 'inset'];
+const supportedPaths = ['rect', 'circle', 'ellipse', 'polygon', 'inset'];
 function isClipPathValid(value) {
     if (!value) {
         return true;
     }
-    var functionName = value.substring(0, value.indexOf('(')).trim();
+    const functionName = value.substring(0, value.indexOf('(')).trim();
     return supportedPaths.indexOf(functionName) !== -1;
 }
-export var clipPathProperty = new CssProperty({
+export const clipPathProperty = new CssProperty({
     name: 'clipPath',
     cssName: 'clip-path',
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         if (!isClipPathValid(newValue)) {
             throw new Error('clip-path is not valid.');
         }
@@ -1185,116 +1170,116 @@ export var clipPathProperty = new CssProperty({
 });
 clipPathProperty.register(Style);
 function isFloatValueConverter(value) {
-    var newValue = parseFloat(value);
+    const newValue = parseFloat(value);
     if (isNaN(newValue)) {
-        throw new Error("Invalid value: ".concat(newValue));
+        throw new Error(`Invalid value: ${newValue}`);
     }
     return newValue;
 }
-export var zIndexProperty = new CssProperty({
+export const zIndexProperty = new CssProperty({
     name: 'zIndex',
     cssName: 'z-index',
     valueConverter: isFloatValueConverter,
 });
 zIndexProperty.register(Style);
 function opacityConverter(value) {
-    var newValue = parseFloat(value);
+    const newValue = parseFloat(value);
     if (!isNaN(newValue) && 0 <= newValue && newValue <= 1) {
         return newValue;
     }
-    throw new Error("Opacity should be between [0, 1]. Value: ".concat(newValue));
+    throw new Error(`Opacity should be between [0, 1]. Value: ${newValue}`);
 }
-export var opacityProperty = new CssAnimationProperty({
+export const opacityProperty = new CssAnimationProperty({
     name: 'opacity',
     cssName: 'opacity',
     defaultValue: 1,
     valueConverter: opacityConverter,
 });
 opacityProperty.register(Style);
-export var colorProperty = new InheritedCssProperty({
+export const colorProperty = new InheritedCssProperty({
     name: 'color',
     cssName: 'color',
     equalityComparer: Color.equals,
-    valueConverter: function (v) { return new Color(v); },
+    valueConverter: (v) => new Color(v),
 });
 colorProperty.register(Style);
-export var fontInternalProperty = new CssProperty({
+export const fontInternalProperty = new CssProperty({
     name: 'fontInternal',
     cssName: '_fontInternal',
 });
 fontInternalProperty.register(Style);
-export var fontFamilyProperty = new InheritedCssProperty({
+export const fontFamilyProperty = new InheritedCssProperty({
     name: 'fontFamily',
     cssName: 'font-family',
     affectsLayout: global.isIOS,
-    valueChanged: function (target, oldValue, newValue) {
-        var currentFont = target.fontInternal || Font.default;
+    valueChanged: (target, oldValue, newValue) => {
+        const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontFamily !== newValue) {
-            var newFont = currentFont.withFontFamily(newValue);
+            const newFont = currentFont.withFontFamily(newValue);
             target.fontInternal = Font.equals(Font.default, newFont) ? unsetValue : newFont;
         }
     },
 });
 fontFamilyProperty.register(Style);
-export var fontScaleInternalProperty = new InheritedCssProperty({
+export const fontScaleInternalProperty = new InheritedCssProperty({
     name: 'fontScaleInternal',
     cssName: '_fontScaleInternal',
     defaultValue: 1.0,
-    valueConverter: function (v) { return parseFloat(v); },
+    valueConverter: (v) => parseFloat(v),
 });
 fontScaleInternalProperty.register(Style);
-export var fontSizeProperty = new InheritedCssProperty({
+export const fontSizeProperty = new InheritedCssProperty({
     name: 'fontSize',
     cssName: 'font-size',
     affectsLayout: global.isIOS,
-    valueChanged: function (target, oldValue, newValue) {
+    valueChanged: (target, oldValue, newValue) => {
         if (target.viewRef['handleFontSize'] === true) {
             return;
         }
-        var currentFont = target.fontInternal || Font.default;
+        const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontSize !== newValue) {
-            var newFont = currentFont.withFontSize(newValue);
+            const newFont = currentFont.withFontSize(newValue);
             target.fontInternal = Font.equals(Font.default, newFont) ? unsetValue : newFont;
         }
     },
-    valueConverter: function (v) { return parseFloat(v); },
+    valueConverter: (v) => parseFloat(v),
 });
 fontSizeProperty.register(Style);
-export var fontStyleProperty = new InheritedCssProperty({
+export const fontStyleProperty = new InheritedCssProperty({
     name: 'fontStyle',
     cssName: 'font-style',
     affectsLayout: global.isIOS,
     defaultValue: FontStyle.NORMAL,
     valueConverter: FontStyle.parse,
-    valueChanged: function (target, oldValue, newValue) {
-        var currentFont = target.fontInternal || Font.default;
+    valueChanged: (target, oldValue, newValue) => {
+        const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontStyle !== newValue) {
-            var newFont = currentFont.withFontStyle(newValue);
+            const newFont = currentFont.withFontStyle(newValue);
             target.fontInternal = Font.equals(Font.default, newFont) ? unsetValue : newFont;
         }
     },
 });
 fontStyleProperty.register(Style);
-export var fontWeightProperty = new InheritedCssProperty({
+export const fontWeightProperty = new InheritedCssProperty({
     name: 'fontWeight',
     cssName: 'font-weight',
     affectsLayout: global.isIOS,
     defaultValue: FontWeight.NORMAL,
     valueConverter: FontWeight.parse,
-    valueChanged: function (target, oldValue, newValue) {
-        var currentFont = target.fontInternal || Font.default;
+    valueChanged: (target, oldValue, newValue) => {
+        const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontWeight !== newValue) {
-            var newFont = currentFont.withFontWeight(newValue);
+            const newFont = currentFont.withFontWeight(newValue);
             target.fontInternal = Font.equals(Font.default, newFont) ? unsetValue : newFont;
         }
     },
 });
 fontWeightProperty.register(Style);
-var fontProperty = new ShorthandProperty({
+const fontProperty = new ShorthandProperty({
     name: 'font',
     cssName: 'font',
     getter: function () {
-        return "".concat(this.fontStyle, " ").concat(this.fontWeight, " ").concat(this.fontSize, " ").concat(this.fontFamily);
+        return `${this.fontStyle} ${this.fontWeight} ${this.fontSize} ${this.fontFamily}`;
     },
     converter: function (value) {
         if (value === unsetValue) {
@@ -1306,8 +1291,8 @@ var fontProperty = new ShorthandProperty({
             ];
         }
         else {
-            var font = parseFont(value);
-            var fontSize = parseFloat(font.fontSize);
+            const font = parseFont(value);
+            const fontSize = parseFloat(font.fontSize);
             return [
                 [fontStyleProperty, font.fontStyle],
                 [fontWeightProperty, font.fontWeight],
@@ -1318,46 +1303,46 @@ var fontProperty = new ShorthandProperty({
     },
 });
 fontProperty.register(Style);
-export var fontVariationSettingsProperty = new InheritedCssProperty({
+export const fontVariationSettingsProperty = new InheritedCssProperty({
     name: 'fontVariationSettings',
     cssName: 'font-variation-settings',
     affectsLayout: global.isIOS,
-    valueChanged: function (target, oldValue, newValue) {
-        var currentFont = target.fontInternal || Font.default;
+    valueChanged: (target, oldValue, newValue) => {
+        const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontVariationSettings !== newValue) {
-            var newFont = currentFont.withFontVariationSettings(newValue);
+            const newFont = currentFont.withFontVariationSettings(newValue);
             target.fontInternal = Font.equals(Font.default, newFont) ? unsetValue : newFont;
         }
     },
-    valueConverter: function (value) {
+    valueConverter: (value) => {
         return FontVariationSettings.parse(value);
     },
 });
 fontVariationSettingsProperty.register(Style);
-export var visibilityProperty = new CssProperty({
+export const visibilityProperty = new CssProperty({
     name: 'visibility',
     cssName: 'visibility',
     defaultValue: CoreTypes.Visibility.visible,
     affectsLayout: global.isIOS,
     valueConverter: CoreTypes.Visibility.parse,
-    valueChanged: function (target, oldValue, newValue) {
-        var view = target.viewRef.get();
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
         if (view) {
             view.isCollapsed = newValue === CoreTypes.Visibility.collapse;
         }
         else {
-            Trace.write("".concat(newValue, " not set to view's property because \".viewRef\" is cleared"), Trace.categories.Style, Trace.messageType.warn);
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
 });
 visibilityProperty.register(Style);
-export var androidElevationProperty = new CssProperty({
+export const androidElevationProperty = new CssProperty({
     name: 'androidElevation',
     cssName: 'android-elevation',
     valueConverter: parseFloat,
 });
 androidElevationProperty.register(Style);
-export var androidDynamicElevationOffsetProperty = new CssProperty({
+export const androidDynamicElevationOffsetProperty = new CssProperty({
     name: 'androidDynamicElevationOffset',
     cssName: 'android-dynamic-elevation-offset',
     valueConverter: parseFloat,