@triniwiz/nativescript-masonkit 1.0.0-alpha.0 → 1.0.0-alpha.10

package/common.js

@@ -1,533 +1,195 @@
-import { CssProperty, Style, Length as NSLength, ShorthandProperty, CSSType, borderBottomWidthProperty, borderLeftWidthProperty, borderRightWidthProperty, borderTopWidthProperty, marginBottomProperty, marginLeftProperty, marginRightProperty, marginTopProperty, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, CustomLayoutView, heightProperty, minHeightProperty, minWidthProperty, widthProperty, View } from '@nativescript/core';
-import { _forceStyleUpdate, _getAlignContent, _getAlignItems, _getAlignSelf, _getAspectRatio, _getColumnGap, _getDisplay, _getFlexBasis, _getFlexDirection, _getFlexGrow, _getFlexShrink, _getFlexWrap, _getHeight, _getJustifyContent, _getJustifyItems, _getJustifySelf, _getPosition, _getRowGap, _getWidth, _parseGridTemplates, _setAlignContent, _setAlignItems, _setAlignSelf, _setAspectRatio, _setBorderBottom, _setBorderLeft, _setBorderRight, _setBorderTop, _setBottom, _setColumnGap, _setDisplay, _setFlexBasis, _setFlexDirection, _setFlexGrow, _setFlexShrink, _setFlexWrap, _setGridAutoColumns, _setGridAutoRows, _setGridColumnEnd, _setGridColumnStart, _setGridRowEnd, _setGridRowStart, _setGridTemplateColumns, _setGridTemplateRows, _setHeight, _setJustifyContent, _setJustifyItems, _setJustifySelf, _setLeft, _setMarginBottom, _setMarginLeft, _setMarginRight, _setMarginTop, _setMaxHeight, _setMaxWidth, _setMinHeight, _setMinWidth, _setPaddingBottom, _setPaddingLeft, _setPaddingRight, _setPaddingTop, _setPosition, _setRight, _setRowGap, _setTop, _setWidth, } from './helpers';
-// let widgetMasonView: typeof org.nativescript.mason.masonkit.View;
-// function ensureNativeTypes() {
-// 	if (!widgetMasonView) {
-// 		widgetMasonView = org.nativescript.mason.masonkit.View;
-// 	}
-// }
-// function makeNativeSetter<T>(setter: (lp: org.nativescript.widgets.FlexboxLayout.LayoutParams, value: T) => void) {
-// 	return function (this: View, value: T) {
-// 		ensureNativeTypes();
-// 		const nativeView: android.view.View = this.nativeViewProtected;
-// 		const lp = nativeView.getLayoutParams() || new widgetLayoutParams();
-// 		if (lp instanceof widgetLayoutParams) {
-// 			setter(lp, value);
-// 			nativeView.setLayoutParams(lp);
-// 		}
-// 	};
-// }
-export function applyMixins(derivedCtor, baseCtors, options) {
-    const omits = options && options.omit ? options.omit : [];
-    baseCtors.forEach((baseCtor) => {
-        Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
-            if (omits.indexOf(name) !== -1) {
-                return;
-            }
-            const descriptor = Object.getOwnPropertyDescriptor(baseCtor.prototype, name);
-            if (name === 'constructor')
-                return;
-            if (descriptor && (descriptor.get || descriptor.set)) {
-                Object.defineProperty(derivedCtor.prototype, name, descriptor);
-            }
-            else {
-                const oldImpl = derivedCtor.prototype[name];
-                if (!oldImpl) {
-                    derivedCtor.prototype[name] = baseCtor.prototype[name];
-                }
-                else {
-                    derivedCtor.prototype[name] = function (...args) {
-                        if (options) {
-                            if (options.override) {
-                                return baseCtor.prototype[name].apply(this, args);
-                            }
-                            else if (options.after) {
-                                return baseCtor.prototype[name].apply(this, args);
-                            }
-                            else if (options.overrideIfExists) {
-                                if (this[options.overrideIfExists]) {
-                                    return baseCtor.prototype[name].apply(this, args);
-                                }
-                                return oldImpl.apply(this, args);
-                            }
-                            else {
-                                baseCtor.prototype[name].apply(this, args);
-                                return oldImpl.apply(this, args);
-                            }
-                        }
-                        else {
-                            baseCtor.prototype[name].apply(this, args);
-                            return oldImpl.apply(this, args);
-                        }
-                    };
-                }
-            }
-        });
-        Object.getOwnPropertySymbols(baseCtor.prototype).forEach((symbol) => {
-            if (omits.indexOf(symbol) !== -1) {
-                return;
-            }
-            const oldImpl = derivedCtor.prototype[symbol];
-            if (!oldImpl) {
-                derivedCtor.prototype[symbol] = baseCtor.prototype[symbol];
-            }
-            else {
-                derivedCtor.prototype[symbol] = function (...args) {
-                    if (options) {
-                        if (options.override) {
-                            return baseCtor.prototype[symbol].apply(this, args);
-                        }
-                        if (options.overrideIfExists) {
-                            if (this[options.overrideIfExists]) {
-                                return baseCtor.prototype[symbol].apply(this, args);
-                            }
-                            return oldImpl.apply(this, args);
-                        }
-                        else if (options.after) {
-                            oldImpl.apply(this, args);
-                            return baseCtor.prototype[symbol].apply(this, args);
-                        }
-                        else {
-                            baseCtor.prototype[symbol].apply(this, args);
-                            return oldImpl.apply(this, args);
-                        }
-                    }
-                    else {
-                        baseCtor.prototype[symbol].apply(this, args);
-                        return oldImpl.apply(this, args);
-                    }
-                };
-            }
-        });
-    });
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { CSSType, CssProperty, CustomLayoutView, Length as NSLength, ShorthandProperty, Style, View as NSView, getViewById, unsetValue, Property, widthProperty, heightProperty, CoreTypes, Trace, Length as CoreLength, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty } from '@nativescript/core';
+import { _forceStyleUpdate, _parseGridTemplates, _setAlignContent, _setColumnGap, _setDisplay, _setFlexDirection, _setGridColumnEnd, _setGridColumnStart, _setGridRowEnd, _setGridRowStart, _setGridTemplateColumns, _setGridTemplateRows, _setHeight, _setJustifyContent, _setMarginBottom, _setMarginLeft, _setMarginRight, _setMarginTop, _setMinHeight, _setMinWidth, _setPaddingBottom, _setPaddingLeft, _setPaddingRight, _setPaddingTop, _setRowGap, _setWidth } from './helpers';
+import { flexDirectionProperty, flexGrowProperty, flexWrapProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+export const native_ = Symbol('[[native]]');
+export const style_ = Symbol('[[style]]');
+export const scrollBarWidthProperty = new CssProperty({
+    name: 'scrollBarWidth',
+    cssName: 'scroll-bar-width',
+    defaultValue: 0,
+    valueConverter: parseFloat,
+});
+function overflowConverter(value) {
+    if (typeof value === 'number') {
+        switch (value) {
+            case 0:
+                return 'visible';
+            case 1:
+                return 'hidden';
+            case 2:
+                return 'scroll';
+        }
+    }
+    switch (value) {
+        case 'visible':
+        case 'hidden':
+        case 'scroll':
+            return value;
+        default:
+            return 'visible';
+    }
 }
-let mixinInstalled = false;
-export function overrideViewBase() {
-    const NSView = require('@nativescript/core').View;
-    class ViewOverride extends View {
-        constructor() {
-            super(...arguments);
-            this._isMasonView = false;
-            this._isMasonChild = false;
-        }
-        get _isMasonViewOrChild() {
-            return this._isMasonView || this._isMasonChild;
-        }
-        /* Short Props */
-        set gridRowGap(value) {
-            this.style.gridRowGap = value;
-        }
-        get gridRowGap() {
-            return this.style.gridRowGap;
-        }
-        set gridGap(value) {
-            this.style.gridGap = value;
-        }
-        get gridGap() {
-            return this.style.gridGap;
-        }
-        set gap(value) {
-            this.style.gap = value;
-        }
-        get gap() {
-            return this.style.gap;
-        }
-        set gridArea(value) {
-            this.style.gridArea = value;
-        }
-        get gridArea() {
-            return this.style.gridArea;
-        }
-        set gridColumn(value) {
-            this.style.gridColumn = value;
-        }
-        get gridColumn() {
-            return this.style.gridColumn;
-        }
-        set gridRow(value) {
-            this.style.gridRow = value;
-        }
-        get gridRow() {
-            return this.style.gridColumn;
-        }
-        /* Short Props */
-        get display() {
-            return _getDisplay(this);
-        }
-        set display(value) {
-            this.style.display = value;
-        }
-        [displayProperty.setNative](value) {
-            _setDisplay(value, this);
-        }
-        set position(value) {
-            this.style.position = value;
-        }
-        get position() {
-            return _getPosition(this);
-        }
-        [positionProperty.setNative](value) {
-            _setPosition(value, this);
-        }
-        set flexDirection(value) {
-            this.style.flexDirection = value;
-        }
-        get flexDirection() {
-            return _getFlexDirection(this);
-        }
-        [flexDirectionProperty.setNative](value) {
-            _setFlexDirection(value, this);
-        }
-        set flexWrap(value) {
-            this.style.flexWrap = value;
-        }
-        [flexWrapProperty.setNative](value) {
-            _setFlexWrap(value, this);
-        }
-        get flexWrap() {
-            return _getFlexWrap(this);
-        }
-        set alignItems(value) {
-            this.style.alignItems = value;
-        }
-        get alignItems() {
-            return _getAlignItems(this);
-        }
-        [alignItemsProperty.setNative](value) {
-            _setAlignItems(value, this);
-        }
-        //@ts-ignore
-        set alignSelf(value) {
-            this.style.alignSelf = value;
-        }
-        //@ts-ignore
-        get alignSelf() {
-            return _getAlignSelf(this);
-        }
-        [alignSelfProperty.setNative](value) {
-            _setAlignSelf(value, this);
-        }
-        set alignContent(value) {
-            this.style.alignContent = value;
-        }
-        [alignContentProperty.setNative](value) {
-            _setAlignContent(value, this);
-        }
-        get alignContent() {
-            return _getAlignContent(this);
-        }
-        set justifyItems(value) {
-            this.style.justifyItems = value;
-        }
-        [justifyItemsProperty.setNative](value) {
-            _setJustifyItems(value, this);
-        }
-        get justifyItems() {
-            return _getJustifyItems(this);
-        }
-        set justifySelf(value) {
-            this.style.justifySelf = value;
-        }
-        [justifySelfProperty.setNative](value) {
-            _setJustifySelf(value, this);
-        }
-        get justifySelf() {
-            return _getJustifySelf(this);
-        }
-        set justifyContent(value) {
-            this.style.justifyContent = value;
-        }
-        [justifyContentProperty.setNative](value) {
-            _setJustifyContent(value, this);
-        }
-        get justifyContent() {
-            return _getJustifyContent(this);
-        }
-        //@ts-ignore
-        set left(value) {
-            this.style.left = value;
-        }
-        get left() {
-            return this.style.left;
-        }
-        [leftProperty.setNative](value) {
-            _setLeft(value, this);
-        }
-        //@ts-ignore
-        set right(value) {
-            this.style.right = value;
-        }
-        get right() {
-            return this.style.right;
-        }
-        [rightProperty.setNative](value) {
-            _setRight(value, this);
-        }
-        //@ts-ignore
-        set top(value) {
-            this.style.top = value;
-        }
-        get top() {
-            return this.style.top;
-        }
-        [topProperty.setNative](value) {
-            _setTop(value, this);
-        }
-        //@ts-ignore
-        set bottom(value) {
-            this.style.bottom = value;
-        }
-        get bottom() {
-            return this.style.bottom;
-        }
-        [bottomProperty.setNative](value) {
-            _setBottom(value, this);
-        }
-        [marginLeftProperty.setNative](value) {
-            _setMarginLeft(value, this);
-        }
-        [marginRightProperty.setNative](value) {
-            _setMarginRight(value, this);
-        }
-        [marginTopProperty.setNative](value) {
-            _setMarginTop(value, this);
-        }
-        [marginBottomProperty.setNative](value) {
-            _setMarginBottom(value, this);
-        }
-        [borderLeftWidthProperty.setNative](value) {
-            _setBorderLeft(value, this);
-        }
-        [borderRightWidthProperty.setNative](value) {
-            _setBorderRight(value, this);
-        }
-        [borderTopWidthProperty.setNative](value) {
-            _setBorderTop(value, this);
-        }
-        [borderBottomWidthProperty.setNative](value) {
-            _setBorderBottom(value, this);
-        }
-        //@ts-ignore
-        get flexGrow() {
-            return _getFlexGrow(this);
-        }
-        set flexGrow(value) {
-            this.style.flexGrow = value;
-        }
-        [flexGrowProperty.setNative](value) {
-            _setFlexGrow(value, this);
-        }
-        //@ts-ignore
-        get flexShrink() {
-            return _getFlexShrink(this);
-        }
-        set flexShrink(value) {
-            this.style.flexShrink = value;
-        }
-        [flexShrinkProperty.setNative](value) {
-            _setFlexShrink(value, this);
-        }
-        //@ts-ignore
-        get flexBasis() {
-            return _getFlexBasis(this);
-        }
-        [flexBasisProperty.setNative](value) {
-            _setFlexBasis(value, this);
-        }
-        /* faster setter/getter
-        //@ts-ignore
-        get gap() {
-          return _getGap(this as any);
-        }
-      
-        set gap(value) {
-          this.style.gap = value;
-          _setGap(value, this as any);
-        }
-      
-        */
-        set rowGap(value) {
-            this.style.rowGap = value;
-        }
-        get rowGap() {
-            return _getRowGap(this);
-        }
-        [rowGapProperty.setNative](value) {
-            _setRowGap(value, this);
-        }
-        set columnGap(value) {
-            this.style.columnGap = value;
-        }
-        get columnGap() {
-            return _getColumnGap(this);
-        }
-        [columnGapProperty.setNative](value) {
-            _setColumnGap(value, this);
-        }
-        get aspectRatio() {
-            return _getAspectRatio(this);
-        }
-        [aspectRatioProperty.setNative](value) {
-            _setAspectRatio(value, this);
-        }
-        [paddingLeftProperty.setNative](value) {
-            _setPaddingLeft(value, this);
-        }
-        [paddingTopProperty.setNative](value) {
-            _setPaddingTop(value, this);
-        }
-        [paddingRightProperty.setNative](value) {
-            _setPaddingRight(value, this);
-        }
-        [paddingBottomProperty.setNative](value) {
-            _setPaddingBottom(value, this);
-        }
-        //@ts-ignore
-        set minWidth(value) {
-            this.style.minWidth = value;
-        }
-        [minWidthProperty.setNative](value) {
-            _setMinWidth(value, this);
-        }
-        //@ts-ignore
-        set minHeight(value) {
-            this.style.minHeight = value;
-        }
-        [minHeightProperty.setNative](value) {
-            _setMinHeight(value, this);
-        }
-        //@ts-ignore
-        set width(value) {
-            this.style.width = value;
-        }
-        [widthProperty.setNative](value) {
-            _setWidth(value, this);
-        }
-        get width() {
-            return _getWidth(this);
-        }
-        //@ts-ignore
-        set height(value) {
-            this.style.height = value;
-        }
-        [heightProperty.setNative](value) {
-            _setHeight(value, this);
-        }
-        //@ts-ignore
-        get height() {
-            return _getHeight(this);
-        }
-        set maxWidth(value) {
-            this.style.maxWidth = value;
-        }
-        [maxWidthProperty.setNative](value) {
-            _setMaxWidth(value, this);
-        }
-        //@ts-ignore
-        set maxHeight(value) {
-            this.style.maxHeight = value;
-        }
-        [maxHeightProperty.setNative](value) {
-            _setMaxHeight(value, this);
-        }
-        //@ts-ignore
-        set gridAutoRows(value) {
-            this.style.gridAutoRows = value;
-        }
-        [gridAutoRowsProperty.setNative](value) {
-            _setGridAutoRows(value, this);
-        }
-        //@ts-ignore
-        get gridAutoRows() {
-            return this.style.gridAutoRows;
-        }
-        //@ts-ignore
-        set gridAutoColumns(value) {
-            this.style.gridAutoColumns = value;
-        }
-        [gridAutoColumnsProperty.setNative](value) {
-            _setGridAutoColumns(value, this);
-        }
-        get gridAutoColumns() {
-            return this.style.gridAutoColumns;
-        }
-        set gridAutoFlow(value) {
-            this.style.gridAutoFlow = value;
-        }
-        [gridAutoFlowProperty.setNative](value) { }
-        get gridAutoFlow() {
-            return this.style.gridAutoFlow;
-        }
-        set gridColumnStart(value) {
-            this.style.gridColumnStart = value;
-        }
-        [gridColumnStartProperty.setNative](value) {
-            _setGridColumnStart(value, this);
-        }
-        get gridColumnStart() {
-            return this.style.gridColumnStart;
-        }
-        set gridColumnEnd(value) {
-            this.style.gridColumnEnd = value;
-        }
-        [gridColumnEndProperty.setNative](value) {
-            _setGridColumnEnd(value, this);
-        }
-        get gridColumnEnd() {
-            return this.style.gridColumnEnd;
+export const overflowProperty = new CssProperty({
+    name: 'overflow',
+    cssName: 'overflow',
+    defaultValue: 'visible',
+    valueConverter: overflowConverter,
+});
+export const overflowXProperty = new CssProperty({
+    name: 'overflowX',
+    cssName: 'overflow-x',
+    defaultValue: 'visible',
+    valueConverter: overflowConverter,
+});
+export const overflowYProperty = new CssProperty({
+    name: 'overflow',
+    cssName: 'overflow-y',
+    defaultValue: 'visible',
+    valueConverter: overflowConverter,
+});
+const paddingProperty = new ShorthandProperty({
+    name: 'padding',
+    cssName: 'padding',
+    getter: function () {
+        if (CoreLength.equals(this.paddingTop, this.paddingRight) && CoreLength.equals(this.paddingTop, this.paddingBottom) && CoreLength.equals(this.paddingTop, this.paddingLeft)) {
+            return this.paddingTop;
         }
-        set gridRowStart(value) {
-            this.style.gridRowStart = value;
+        return `${CoreLength.convertToString(this.paddingTop)} ${CoreLength.convertToString(this.paddingRight)} ${CoreLength.convertToString(this.paddingBottom)} ${CoreLength.convertToString(this.paddingLeft)}`;
+    },
+    converter: convertToPaddings,
+});
+export const paddingLeftProperty = new CssProperty({
+    name: 'paddingLeft',
+    cssName: 'padding-left',
+    defaultValue: CoreTypes.zeroLength,
+    affectsLayout: global.isIOS,
+    equalityComparer: CoreLength.equals,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
+        if (view) {
+            view.effectivePaddingLeft = CoreLength.toDevicePixels(newValue, 0);
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
-        [gridRowStartProperty.setNative](value) {
-            _setGridRowStart(value, this);
+    },
+    valueConverter: CoreLength.parse,
+});
+export const paddingRightProperty = new CssProperty({
+    name: 'paddingRight',
+    cssName: 'padding-right',
+    defaultValue: CoreTypes.zeroLength,
+    affectsLayout: global.isIOS,
+    equalityComparer: CoreLength.equals,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
+        if (view) {
+            view.effectivePaddingRight = CoreLength.toDevicePixels(newValue, 0);
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
-        get gridRowStart() {
-            return this.style.gridRowStart;
+    },
+    valueConverter: CoreLength.parse,
+});
+export const paddingTopProperty = new CssProperty({
+    name: 'paddingTop',
+    cssName: 'padding-top',
+    defaultValue: CoreTypes.zeroLength,
+    affectsLayout: global.isIOS,
+    equalityComparer: CoreLength.equals,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
+        if (view) {
+            view.effectivePaddingTop = CoreLength.toDevicePixels(newValue, 0);
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
-        set gridRowEnd(value) {
-            this.style.gridRowEnd = value;
+    },
+    valueConverter: CoreLength.parse,
+});
+export const paddingBottomProperty = new CssProperty({
+    name: 'paddingBottom',
+    cssName: 'padding-bottom',
+    defaultValue: CoreTypes.zeroLength,
+    affectsLayout: global.isIOS,
+    equalityComparer: CoreLength.equals,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
+        if (view) {
+            view.effectivePaddingBottom = CoreLength.toDevicePixels(newValue, 0);
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
-        [gridRowEndProperty.setNative](value) {
-            _setGridRowEnd(value, this);
+    },
+    valueConverter: CoreLength.parse,
+});
+export const rowGapProperty = new CssProperty({
+    name: 'rowGap',
+    cssName: 'row-gap',
+    defaultValue: 0,
+    valueConverter(value) {
+        const parsed = CoreLength.parse(value);
+        if (typeof parsed === 'string') {
+            return 0;
         }
-        get gridRowEnd() {
-            return this.style.gridRowEnd;
+        return parsed;
+    },
+});
+export const columnGapProperty = new CssProperty({
+    name: 'columnGap',
+    cssName: 'column-gap',
+    defaultValue: 0,
+    valueConverter(value) {
+        const parsed = CoreLength.parse(value);
+        if (typeof parsed === 'string') {
+            return 0;
         }
-        set gridTemplateRows(value) {
-            this.style.gridTemplateRows = value;
+        return parsed;
+    },
+});
+export const gapProperty = new ShorthandProperty({
+    name: 'gap',
+    cssName: 'gap',
+    getter: function () {
+        if (this.rowGap === this.columnGap) {
+            return this.rowGap;
         }
-        [gridTemplateRowsProperty.setNative](value) {
-            const templates = _parseGridTemplates(value);
-            if (templates) {
-                _setGridTemplateRows(templates, this);
+        return `${this.rowGap} ${this.columnGap}`;
+    },
+    converter(value) {
+        const properties = [];
+        if (typeof value === 'string') {
+            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
+            const length = values.length;
+            if (length === 0) {
+                return properties;
             }
-        }
-        set gridTemplateColumns(value) {
-            this.style.gridTemplateColumns = value;
-        }
-        [gridTemplateColumnsProperty.setNative](value) {
-            const templates = _parseGridTemplates(value);
-            if (templates) {
-                _setGridTemplateColumns(templates, this);
+            if (length === 1) {
+                const row = values[0];
+                properties.push([rowGapProperty, row]);
+                properties.push([columnGapProperty, row]);
+            }
+            if (length > 1) {
+                const row = values[0];
+                const column = values[1];
+                properties.push([rowGapProperty, row]);
+                properties.push([columnGapProperty, column]);
             }
         }
-    }
-    applyMixins(NSView, [ViewOverride], { overrideIfExists: '_isMasonViewOrChild' });
-}
-export function installMixins() {
-    if (!mixinInstalled) {
-        mixinInstalled = true;
-        overrideViewBase();
-    }
-}
-const emptyArray = new Array();
-export const flexGrowProperty = new CssProperty({
-    name: 'flexGrow',
-    cssName: 'flex-grow',
-    defaultValue: 0,
-    valueConverter: parseFloat,
+        return properties;
+    },
 });
+// export const flexGrowProperty = new CssProperty<Style, number>({
+//   name: 'flexGrow',
+//   cssName: 'flex-grow',
+//   defaultValue: 0,
+//   valueConverter: parseFloat,
+// });
 export const flexShrinkProperty = new CssProperty({
     name: 'flexShrink',
     cssName: 'flex-shrink',
@@ -537,7 +199,7 @@ export const flexShrinkProperty = new CssProperty({
 export const displayProperty = new CssProperty({
     name: 'display',
     cssName: 'display',
-    defaultValue: 'flex',
+    defaultValue: 'block',
     valueConverter(value) {
         if (typeof value === 'number') {
             switch (value) {
@@ -547,16 +209,19 @@ export const displayProperty = new CssProperty({
                     return 'flex';
                 case 2:
                     return 'grid';
+                case 3:
+                    return 'block';
             }
         }
         switch (value) {
             case 'none':
             case 'flex':
             case 'grid':
+            case 'block':
                 return value;
             default:
                 // todo throw???
-                return 'flex';
+                return 'block';
         }
     },
 });
@@ -564,12 +229,14 @@ export const maxWidthProperty = new CssProperty({
     name: 'maxWidth',
     cssName: 'max-width',
     defaultValue: 'auto',
+    // @ts-ignore
     equalityComparer: NSLength.equals,
 });
 export const maxHeightProperty = new CssProperty({
     name: 'maxHeight',
     cssName: 'max-height',
     defaultValue: 'auto',
+    // @ts-ignore
     equalityComparer: NSLength.equals,
 });
 export const positionProperty = new CssProperty({
@@ -577,37 +244,41 @@ export const positionProperty = new CssProperty({
     cssName: 'position',
     defaultValue: 'relative',
 });
-export const flexDirectionProperty = new CssProperty({
-    name: 'flexDirection',
-    cssName: 'flex-direction',
-});
-export const flexWrapProperty = new CssProperty({
-    name: 'flexWrap',
-    cssName: 'flex-wrap',
-    defaultValue: 'no-wrap',
-});
+// export const flexDirectionProperty = new CssProperty<Style, FlexDirection>({
+//   name: 'flexDirection',
+//   cssName: 'flex-direction',
+// });
+// export const flexWrapProperty = new CssProperty<Style, FlexWrap>({
+//   name: 'flexWrap',
+//   cssName: 'flex-wrap',
+//   defaultValue: 'no-wrap',
+// });
 export const leftProperty = new CssProperty({
     name: 'left',
     cssName: 'left',
     defaultValue: 'auto',
+    // @ts-ignore
     equalityComparer: NSLength.equals,
 });
 export const rightProperty = new CssProperty({
     name: 'right',
     cssName: 'right',
     defaultValue: 'auto',
+    // @ts-ignore
     equalityComparer: NSLength.equals,
 });
 export const topProperty = new CssProperty({
     name: 'top',
     cssName: 'top',
     defaultValue: 'auto',
+    // @ts-ignore
     equalityComparer: NSLength.equals,
 });
 export const bottomProperty = new CssProperty({
     name: 'bottom',
     cssName: 'bottom',
     defaultValue: 'auto',
+    // @ts-ignore
     equalityComparer: NSLength.equals,
 });
 export const flexBasisProperty = new CssProperty({
@@ -635,86 +306,6 @@ export const gridColumnGapProperty = new ShorthandProperty({
         return [[columnGapProperty, value]];
     },
 });
-export const rowGapProperty = new CssProperty({
-    name: 'rowGap',
-    cssName: 'row-gap',
-    defaultValue: 0,
-});
-export const columnGapProperty = new CssProperty({
-    name: 'columnGap',
-    cssName: 'column-gap',
-    defaultValue: 0,
-});
-export const gridGapProperty = new ShorthandProperty({
-    name: 'gridGap',
-    cssName: 'grid-gap',
-    getter: function () {
-        if (this.rowGap === this.columnGap) {
-            return this.rowGap;
-        }
-        return `${this.rowGap} ${this.columnGap}`;
-    },
-    converter(value) {
-        if (typeof value === 'string') {
-            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return emptyArray;
-            }
-            if (length === 1) {
-                const row = values[0];
-                return [
-                    [rowGapProperty, row],
-                    [columnGapProperty, row],
-                ];
-            }
-            if (length > 1) {
-                const row = values[0];
-                const column = values[1];
-                return [
-                    [rowGapProperty, row],
-                    [columnGapProperty, column],
-                ];
-            }
-        }
-        return emptyArray;
-    },
-});
-export const gapProperty = new ShorthandProperty({
-    name: 'gap',
-    cssName: 'gap',
-    getter: function () {
-        if (this.rowGap === this.columnGap) {
-            return this.rowGap;
-        }
-        return `${this.rowGap} ${this.columnGap}`;
-    },
-    converter(value) {
-        if (typeof value === 'string') {
-            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return emptyArray;
-            }
-            if (length === 1) {
-                const row = values[0];
-                return [
-                    [rowGapProperty, row],
-                    [columnGapProperty, row],
-                ];
-            }
-            if (length > 1) {
-                const row = values[0];
-                const column = values[1];
-                return [
-                    [rowGapProperty, row],
-                    [columnGapProperty, column],
-                ];
-            }
-        }
-        return emptyArray;
-    },
-});
 export const aspectRatioProperty = new CssProperty({
     name: 'aspectRatio',
     cssName: 'aspect-ratio',
@@ -809,7 +400,7 @@ export const gridAreaProperty = new ShorthandProperty({
             // grid-row-start / grid-column-start / grid-row-end / grid-column-end
             const length = values.length;
             if (length === 0) {
-                return emptyArray;
+                return [];
             }
             if (length === 1) {
                 const parsed = parseGridColumnOrRow(values[0]);
@@ -854,7 +445,7 @@ export const gridAreaProperty = new ShorthandProperty({
                 ];
             }
         }
-        return emptyArray;
+        return [];
     },
 });
 export const gridColumnStartProperty = new CssProperty({
@@ -881,7 +472,7 @@ export const gridColumnProperty = new ShorthandProperty({
             const values = value.split('/').filter((item) => item.trim().length !== 0);
             const length = values.length;
             if (length === 0) {
-                return emptyArray;
+                return [];
             }
             if (length === 1) {
                 const parsed = parseGridColumnOrRow(values[0]);
@@ -901,7 +492,7 @@ export const gridColumnProperty = new ShorthandProperty({
                 ];
             }
         }
-        return emptyArray;
+        return [];
     },
 });
 export const gridRowStartProperty = new CssProperty({
@@ -928,7 +519,7 @@ export const gridRowProperty = new ShorthandProperty({
             const values = value.split('/').filter((item) => item.trim().length !== 0);
             const length = values.length;
             if (length === 0) {
-                return emptyArray;
+                return [];
             }
             if (length === 1) {
                 const parsed = parseGridColumnOrRow(values[0]);
@@ -948,20 +539,115 @@ export const gridRowProperty = new ShorthandProperty({
                 ];
             }
         }
-        return emptyArray;
+        return [];
     },
 });
 export const gridTemplateRowsProperty = new CssProperty({
     name: 'gridTemplateRows',
     cssName: 'grid-template-rows',
-    defaultValue: '',
+    defaultValue: null,
 });
 export const gridTemplateColumnsProperty = new CssProperty({
     name: 'gridTemplateColumns',
     cssName: 'grid-template-columns',
+    defaultValue: null,
+});
+// flex-flow: <flex-direction> || <flex-wrap>
+const flexFlowProperty = new ShorthandProperty({
+    name: 'flexFlow',
+    cssName: 'flex-flow',
+    getter: function () {
+        return `${this.flexDirection} ${this.flexWrap}`;
+    },
+    converter: function (value) {
+        const properties = [];
+        if (value === unsetValue) {
+            properties.push([flexDirectionProperty, value]);
+            properties.push([flexWrapProperty, value]);
+        }
+        else {
+            const trimmed = value && value.trim();
+            if (trimmed) {
+                const values = trimmed.split(/\s+/);
+                if (values.length >= 1) {
+                    properties.push([flexDirectionProperty, values[0]]);
+                }
+                if (value.length >= 2) {
+                    properties.push([flexWrapProperty, values[1]]);
+                }
+            }
+        }
+        return properties;
+    },
+});
+// flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
+const flexProperty = new ShorthandProperty({
+    name: 'flex',
+    cssName: 'flex',
+    getter: function () {
+        return `${this.flexGrow} ${this.flexShrink} ${this.flexBasis}`;
+    },
+    converter: function (value) {
+        const properties = [];
+        if (value === unsetValue) {
+            properties.push([flexGrowProperty, value]);
+            properties.push([flexShrinkProperty, value]);
+        }
+        else if (typeof value === 'number') {
+            properties.push([flexGrowProperty, value]);
+            properties.push([flexShrinkProperty, 1]);
+            properties.push([flexBasisProperty, 'auto']);
+        }
+        else {
+            const trimmed = value && value.trim();
+            if (trimmed) {
+                const values = trimmed.split(/\s+/);
+                if (values.length === 1) {
+                    switch (values[0]) {
+                        case 'inital':
+                            properties.push([flexGrowProperty, 0]);
+                            properties.push([flexShrinkProperty, 1]);
+                            properties.push([flexBasisProperty, 'auto']);
+                            break;
+                        case 'auto':
+                            properties.push([flexGrowProperty, 1]);
+                            properties.push([flexShrinkProperty, 1]);
+                            properties.push([flexBasisProperty, 'auto']);
+                            break;
+                        case 'none':
+                            properties.push([flexGrowProperty, 0]);
+                            properties.push([flexShrinkProperty, 0]);
+                            properties.push([flexBasisProperty, 'auto']);
+                            break;
+                        default:
+                            properties.push([flexGrowProperty, values[0]]);
+                            properties.push([flexShrinkProperty, 1]);
+                            properties.push([flexBasisProperty, 'auto']);
+                    }
+                }
+                if (values.length >= 2) {
+                    properties.push([flexGrowProperty, values[0]]);
+                    properties.push([flexShrinkProperty, values[1]]);
+                }
+                if (value.length >= 3) {
+                    properties.push({ property: flexBasisProperty, value: values[2] });
+                }
+            }
+        }
+        return properties;
+    },
+});
+export const textWrapProperty = new Property({
+    name: 'textWrap',
+    affectsLayout: true,
+    defaultValue: 'nowrap',
+});
+export const textProperty = new Property({
+    name: 'text',
+    affectsLayout: true,
     defaultValue: '',
 });
-let TSCViewBase = class TSCViewBase extends CustomLayoutView {
+let ViewBase = class ViewBase extends CustomLayoutView {
     constructor() {
         super();
         this._children = [];
@@ -972,541 +658,195 @@ let TSCViewBase = class TSCViewBase extends CustomLayoutView {
     forceStyleUpdate() {
         _forceStyleUpdate(this);
     }
-    /*
-    markDirty() {
-      _markDirty(this as any);
-    }
-  
-    isDirty() {
-      return _isDirty(this as any);
-    }
-  
-    get display(): Display {
-      return _getDisplay(this as any);
+    eachLayoutChild(callback) {
+        let lastChild = null;
+        this.eachChildView((cv) => {
+            cv._eachLayoutView((lv) => {
+                if (lastChild && !lastChild.isCollapsed) {
+                    callback(lastChild, false);
+                }
+                lastChild = lv;
+            });
+            return true;
+        });
+        if (lastChild && !lastChild.isCollapsed) {
+            callback(lastChild, true);
+        }
     }
-  
-    set display(value) {
-      this.style.display = value as any;
+    eachChild(callback) {
+        for (const child of this._children) {
+            callback(child);
+        }
     }
-  
-    [displayProperty.setNative](value) {
-      console.log('displayProperty', 'view');
-      _setDisplay(value, this as any);
+    eachChildView(callback) {
+        for (const view of this._children) {
+            callback(view);
+        }
     }
-  
-    set position(value) {
-      this.style.position = value;
+    _addChildFromBuilder(name, value) {
+        if (value instanceof NSView) {
+            this.addChild(value);
+        }
     }
-  
-    get position(): Position {
-      return _getPosition(this as any);
+    getChildrenCount() {
+        return this._children.length;
     }
-  
-    [positionProperty.setNative](value) {
-      _setPosition(value, this as any);
+    get _childrenCount() {
+        return this._children.length;
     }
-  
-    set flexDirection(value) {
-      this.style.flexDirection = value;
+    getChildAt(index) {
+        return this._children[index];
     }
-  
-    get flexDirection() {
-      return _getFlexDirection(this as any);
+    getChildIndex(child) {
+        return this._children.indexOf(child);
     }
-  
-    [flexDirectionProperty.setNative](value) {
-      _setFlexDirection(value, this as any);
+    getChildById(id) {
+        return getViewById(this, id);
     }
-  
-    set flexWrap(value) {
-      this.style.flexWrap = value as any;
+    addChild(child) {
+        this._children.push(child);
+        this._addView(child);
     }
-  
-    [flexWrapProperty.setNative](value) {
-      _setFlexWrap(value, this as any);
+    insertChild(child, atIndex) {
+        this._children.splice(atIndex, 0, child);
+        this._addView(child, atIndex);
     }
-  
-    get flexWrap() {
-      return _getFlexWrap(this as any);
+    removeChild(child) {
+        const index = this._children.indexOf(child);
+        if (index > -1) {
+            this._children.splice(index, 1);
+            this._removeView(child);
+        }
     }
-  
-    set alignItems(value) {
-      this.style.alignItems = value as any;
+    removeChildren() {
+        if (this._children.length === 0) {
+            return;
+        }
+        for (const child of this._children) {
+            child._isMasonChild = false;
+            this._removeView(child);
+        }
+        this._children.splice(0);
     }
-  
-    get alignItems() {
-      return _getAlignItems(this as any);
+    [displayProperty.setNative](value) {
+        _setDisplay(value, this);
     }
-  
-    [alignItemsProperty.setNative](value) {
-      _setAlignItems(value, this as any);
+    [flexDirectionProperty.setNative](value) {
+        _setFlexDirection(value, this);
     }
-  
-    //@ts-ignore
-    set alignSelf(value: AlignSelf) {
-      this.style.alignSelf = value as any;
+    [minWidthProperty.setNative](value) {
+        _setMinWidth(value, this);
     }
-  
-    //@ts-ignore
-    get alignSelf() {
-      return _getAlignSelf(this as any);
+    [minHeightProperty.setNative](value) {
+        _setMinHeight(value, this);
     }
-  
-    [alignSelfProperty.setNative](value) {
-      _setAlignSelf(value, this as any);
+    [widthProperty.setNative](value) {
+        _setWidth(value, this);
     }
-  
-    set alignContent(value) {
-      this.style.alignContent = value as any;
+    [heightProperty.setNative](value) {
+        _setHeight(value, this);
     }
-  
     [alignContentProperty.setNative](value) {
-      _setAlignContent(value, this as any);
-    }
-  
-    get alignContent() {
-      return _getAlignContent(this as any);
-    }
-  
-    set justifyItems(value) {
-      this.style.justifyItems = value as any;
-    }
-  
-    [justifyItemsProperty.setNative](value) {
-      _setJustifyItems(value, this as any);
-    }
-  
-    get justifyItems() {
-      return _getJustifyItems(this as any);
-    }
-  
-    set justifySelf(value) {
-      this.style.justifySelf = value as any;
-    }
-  
-    [justifySelfProperty.setNative](value) {
-      _setJustifySelf(value, this as any);
+        _setAlignContent(value, this);
     }
-  
-    get justifySelf() {
-      return _getJustifySelf(this as any);
-    }
-  
-    set justifyContent(value) {
-      this.style.justifyContent = value as any;
-    }
-  
     [justifyContentProperty.setNative](value) {
-      _setJustifyContent(value, this as any);
-    }
-  
-    get justifyContent() {
-      return _getJustifyContent(this as any);
-    }
-  
-    //@ts-ignore
-    set left(value) {
-      this.style.left = value;
-    }
-  
-    get left() {
-      return this.style.left;
-    }
-  
-    [leftProperty.setNative](value) {
-      _setLeft(value, this as any);
-    }
-  
-    //@ts-ignore
-    set right(value) {
-      this.style.right = value;
-    }
-  
-    get right() {
-      return this.style.right;
-    }
-  
-    [rightProperty.setNative](value) {
-      _setRight(value, this as any);
-    }
-  
-    //@ts-ignore
-    set top(value) {
-      this.style.top = value;
-    }
-  
-    get top() {
-      return this.style.top;
-    }
-  
-    [topProperty.setNative](value) {
-      _setTop(value, this as any);
-    }
-  
-    //@ts-ignore
-    set bottom(value) {
-      this.style.bottom = value;
+        _setJustifyContent(value, this);
     }
-  
-    get bottom() {
-      return this.style.bottom;
-    }
-  
-    [bottomProperty.setNative](value) {
-      _setBottom(value, this as any);
-    }
-  
     [marginLeftProperty.setNative](value) {
-      _setMarginLeft(value, this as any);
+        _setMarginLeft(value, this);
     }
-  
     [marginRightProperty.setNative](value) {
-      _setMarginRight(value, this as any);
-    }
-  
-    [marginTopProperty.setNative](value) {
-      _setMarginTop(value, this as any);
+        _setMarginRight(value, this);
     }
-  
     [marginBottomProperty.setNative](value) {
-      _setMarginBottom(value, this as any);
-    }
-  
-    [borderLeftWidthProperty.setNative](value) {
-      _setBorderLeft(value, this as any);
-    }
-  
-    [borderRightWidthProperty.setNative](value) {
-      _setBorderRight(value, this as any);
-    }
-  
-    [borderTopWidthProperty.setNative](value) {
-      _setBorderTop(value, this as any);
-    }
-  
-    [borderBottomWidthProperty.setNative](value) {
-      _setBorderBottom(value, this as any);
-    }
-  
-    //@ts-ignore
-    get flexGrow() {
-      return _getFlexGrow(this as any);
-    }
-  
-    set flexGrow(value) {
-      this.style.flexGrow = value;
-    }
-  
-    [flexGrowProperty.setNative](value) {
-      _setFlexGrow(value, this as any);
-    }
-  
-    //@ts-ignore
-    get flexShrink() {
-      return _getFlexShrink(this as any);
-    }
-  
-    set flexShrink(value) {
-      this.style.flexShrink = value;
-    }
-  
-    [flexShrinkProperty.setNative](value) {
-      _setFlexShrink(value, this as any);
+        _setMarginBottom(value, this);
     }
-  
-    //@ts-ignore
-    get flexBasis() {
-      return _getFlexBasis(this as any);
-    }
-  
-    [flexBasisProperty.setNative](value) {
-      _setFlexBasis(value, this as any);
-    }
-  
-    // faster setter/getter
-    //@ts-ignore
-    get gap() {
-      return _getGap(this as any);
-    }
-  
-    set gap(value) {
-      this.style.gap = value;
-      _setGap(value, this as any);
-    }
-  
-  
-  
-    set rowGap(value) {
-      this.style.rowGap = value;
-    }
-  
-    [rowGapProperty.setNative](value) {
-      _setRowGap(value, this as any);
-    }
-  
-    set columnGap(value) {
-      this.style.columnGap = value;
-    }
-  
-    [columnGapProperty.setNative](value) {
-      _setColumnGap(value, this as any);
-    }
-  
-    get aspectRatio() {
-      return _getAspectRatio(this as any);
-    }
-  
-    [aspectRatioProperty.setNative](value) {
-      _setAspectRatio(value, this as any);
+    [marginTopProperty.setNative](value) {
+        _setMarginTop(value, this);
     }
-  
     [paddingLeftProperty.setNative](value) {
-      _setPaddingLeft(value, this as any);
-    }
-  
-    [paddingTopProperty.setNative](value) {
-      _setPaddingTop(value, this as any);
+        _setPaddingLeft(value, this);
     }
-  
     [paddingRightProperty.setNative](value) {
-      _setPaddingRight(value, this as any);
-    }
-  
-    [paddingBottomProperty.setNative](value) {
-      _setPaddingBottom(value, this as any);
-    }
-  
-    //@ts-ignore
-    set minWidth(value) {
-      this.style.minWidth = value;
-    }
-  
-    [minWidthProperty.setNative](value) {
-      _setMinWidth(value, this as any);
-    }
-  
-    //@ts-ignore
-    set minHeight(value) {
-      this.style.minHeight = value;
-    }
-  
-    [minHeightProperty.setNative](value) {
-      _setMinHeight(value, this as any);
-    }
-  
-    //@ts-ignore
-    set width(value) {
-      this.style.width = value;
-    }
-  
-    [widthProperty.setNative](value) {
-      _setWidth(value, this as any);
-    }
-  
-    get width() {
-      return _getWidth(this as any);
-    }
-  
-    //@ts-ignore
-    set height(value) {
-      this.style.height = value;
+        _setPaddingRight(value, this);
     }
-  
-    [heightProperty.setNative](value) {
-      _setHeight(value, this as any);
-    }
-  
-    //@ts-ignore
-    get height() {
-      return _getHeight(this as any);
-    }
-  
-    set maxWidth(value) {
-      this.style.maxWidth = value;
-    }
-  
-    [maxWidthProperty.setNative](value) {
-      _setMaxWidth(value, this as any);
-    }
-  
-    //@ts-ignore
-    set maxHeight(value) {
-      this.style.maxHeight = value;
-    }
-  
-    [maxHeightProperty.setNative](value) {
-      _setMaxHeight(value, this as any);
-    }
-  
-    //@ts-ignore
-    set gridAutoRows(value) {
-      this.style.gridAutoRows = value;
-    }
-  
-    [gridAutoRowsProperty.setNative](value) {
-      _setGridAutoRows(value, this as any);
-    }
-  
-    //@ts-ignore
-    get gridAutoRows() {
-      return this.style.gridAutoRows;
-    }
-  
-    //@ts-ignore
-    set gridAutoColumns(value) {
-      this.style.gridAutoColumns = value;
-    }
-  
-    [gridAutoColumnsProperty.setNative](value) {
-      _setGridAutoColumns(value, this as any);
-    }
-  
-    get gridAutoColumns() {
-      return this.style.gridAutoColumns;
+    [paddingTopProperty.setNative](value) {
+        _setPaddingTop(value, this);
     }
-  
-    set gridAutoFlow(value) {
-      this.style.gridAutoFlow = value;
+    [paddingBottomProperty.setNative](value) {
+        _setPaddingBottom(value, this);
     }
-  
-    [gridAutoFlowProperty.setNative](value) {}
-  
-    get gridAutoFlow() {
-      return this.style.gridAutoFlow;
+    [rowGapProperty.setNative](value) {
+        _setRowGap(value, this);
     }
-  
-    set gridColumnStart(value) {
-      this.style.gridColumnStart = value;
+    [columnGapProperty.setNative](value) {
+        _setColumnGap(value, this);
     }
-  
     [gridColumnStartProperty.setNative](value) {
-      _setGridColumnStart(value, this as any);
-    }
-  
-    get gridColumnStart() {
-      return this.style.gridColumnStart;
+        _setGridColumnStart(value, this);
     }
-  
-    set gridColumnEnd(value) {
-      this.style.gridColumnEnd = value;
-    }
-  
     [gridColumnEndProperty.setNative](value) {
-      _setGridColumnEnd(value, this as any);
-    }
-  
-    get gridColumnEnd() {
-      return this.style.gridColumnEnd;
-    }
-  
-    set gridRowStart(value) {
-      this.style.gridRowStart = value;
+        _setGridColumnEnd(value, this);
     }
-  
     [gridRowStartProperty.setNative](value) {
-      _setGridRowStart(value, this as any);
+        _setGridRowStart(value, this);
     }
-  
-    get gridRowStart() {
-      return this.style.gridRowStart;
-    }
-  
-    set gridRowEnd(value) {
-      this.style.gridRowEnd = value;
-    }
-  
     [gridRowEndProperty.setNative](value) {
-      _setGridRowEnd(value, this as any);
-    }
-  
-    get gridRowEnd() {
-      return this.style.gridRowEnd;
-    }
-  
-    set gridTemplateRows(value) {
-      this.style.gridTemplateRows = value;
+        _setGridRowEnd(value, this);
     }
-  
     [gridTemplateRowsProperty.setNative](value) {
-      const templates = _parseGridTemplates(value);
-      if (templates) {
-        _setGridTemplateRows(templates, this as any);
-      }
+        _setGridTemplateRows(_parseGridTemplates(value), this);
     }
-  
-    set gridTemplateColumns(value) {
-      this.style.gridTemplateColumns = value;
-    }
-  
     [gridTemplateColumnsProperty.setNative](value) {
-      const templates = _parseGridTemplates(value);
-      if (templates) {
-        _setGridTemplateColumns(templates, this as any);
-      }
-    }
-    */
-    eachLayoutChild(callback) {
-        let lastChild = null;
-        this.eachChildView((cv) => {
-            cv._eachLayoutView((lv) => {
-                if (lastChild && !lastChild.isCollapsed) {
-                    callback(lastChild, false);
-                }
-                lastChild = lv;
-            });
-            return true;
-        });
-        if (lastChild && !lastChild.isCollapsed) {
-            callback(lastChild, true);
-        }
+        _setGridTemplateColumns(_parseGridTemplates(value), this);
     }
-    eachChild(callback) {
-        this._children.forEach((child) => {
-            callback(child);
-        });
-    }
-    eachChildView(callback) {
-        this._children.forEach((view, key) => {
-            callback(view);
-        });
-    }
-    _addChildFromBuilder(name, value) {
-        this._children.push(value);
-        value._isMasonChild = true;
-        this._addView(value);
+};
+ViewBase = __decorate([
+    CSSType('View'),
+    __metadata("design:paramtypes", [])
+], ViewBase);
+export { ViewBase };
+let TextBase = class TextBase extends ViewBase {
+    constructor() {
+        super();
     }
 };
-TSCViewBase = __decorate([
-    CSSType('TSCView'),
+TextBase = __decorate([
+    CSSType('Text'),
     __metadata("design:paramtypes", [])
-], TSCViewBase);
-export { TSCViewBase };
+], TextBase);
+export { TextBase };
+textProperty.register(TextBase);
+textWrapProperty.register(TextBase);
+/**
+ * Props are already defined in core flexbox layout,
+ * overriding them breaks the core flexbox layout.
+ */
+// flexDirectionProperty.register(Style);
+// flexWrapProperty.register(Style);
+// flexGrowProperty.register(Style);
+// flexShrinkProperty.register(Style);
+alignItemsProperty.register(Style);
+alignSelfProperty.register(Style);
+justifyContentProperty.register(Style);
 displayProperty.register(Style);
 maxWidthProperty.register(Style);
 maxHeightProperty.register(Style);
 positionProperty.register(Style);
-flexDirectionProperty.register(Style);
-flexWrapProperty.register(Style);
 leftProperty.register(Style);
 rightProperty.register(Style);
 topProperty.register(Style);
 bottomProperty.register(Style);
 flexBasisProperty.register(Style);
-flexGrowProperty.register(Style);
-flexShrinkProperty.register(Style);
 rowGapProperty.register(Style);
 columnGapProperty.register(Style);
 gridRowGapProperty.register(Style);
 gridColumnGapProperty.register(Style);
 gapProperty.register(Style);
-gridGapProperty.register(Style);
 aspectRatioProperty.register(Style);
-alignItemsProperty.register(Style);
-alignSelfProperty.register(Style);
 alignContentProperty.register(Style);
 justifyItemsProperty.register(Style);
 justifySelfProperty.register(Style);
-justifyContentProperty.register(Style);
 gridAutoRowsProperty.register(Style);
 gridAutoColumnsProperty.register(Style);
 gridAutoFlowProperty.register(Style);
@@ -1519,5 +859,74 @@ gridRowStartProperty.register(Style);
 gridRowEndProperty.register(Style);
 gridTemplateRowsProperty.register(Style);
 gridTemplateColumnsProperty.register(Style);
-installMixins();
+overflowProperty.register(Style);
+overflowXProperty.register(Style);
+overflowYProperty.register(Style);
+scrollBarWidthProperty.register(Style);
+flexFlowProperty.register(Style);
+flexProperty.register(Style);
+function parseShorthandPositioning(value) {
+    const arr = value.split(/[ ,]+/);
+    let top;
+    let right;
+    let bottom;
+    let left;
+    if (arr.length === 1) {
+        top = arr[0];
+        right = arr[0];
+        bottom = arr[0];
+        left = arr[0];
+    }
+    else if (arr.length === 2) {
+        top = arr[0];
+        bottom = arr[0];
+        right = arr[1];
+        left = arr[1];
+    }
+    else if (arr.length === 3) {
+        top = arr[0];
+        right = arr[1];
+        left = arr[1];
+        bottom = arr[2];
+    }
+    else if (arr.length === 4) {
+        top = arr[0];
+        right = arr[1];
+        bottom = arr[2];
+        left = arr[3];
+    }
+    else {
+        throw new Error('Expected 1, 2, 3 or 4 parameters. Actual: ' + value);
+    }
+    return {
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left,
+    };
+}
+function convertToPaddings(value) {
+    if (typeof value === 'string' && value !== 'auto') {
+        const thickness = parseShorthandPositioning(value);
+        return [
+            [paddingTopProperty, CoreLength.parse(thickness.top)],
+            [paddingRightProperty, CoreLength.parse(thickness.right)],
+            [paddingBottomProperty, CoreLength.parse(thickness.bottom)],
+            [paddingLeftProperty, CoreLength.parse(thickness.left)],
+        ];
+    }
+    else {
+        return [
+            [paddingTopProperty, value],
+            [paddingRightProperty, value],
+            [paddingBottomProperty, value],
+            [paddingLeftProperty, value],
+        ];
+    }
+}
+paddingProperty.register(Style);
+paddingLeftProperty.register(Style);
+paddingRightProperty.register(Style);
+paddingTopProperty.register(Style);
+paddingBottomProperty.register(Style);
 //# sourceMappingURL=common.js.map