@triniwiz/nativescript-masonkit 1.0.0-alpha.7 → 1.0.0-alpha.8

package/common.js

@@ -1,583 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { CSSType, CssProperty, CustomLayoutView, Length as NSLength, ShorthandProperty, Style, View, borderBottomWidthProperty, borderLeftWidthProperty, borderRightWidthProperty, borderTopWidthProperty, getViewById, heightProperty, marginBottomProperty, marginLeftProperty, marginRightProperty, marginTopProperty, minHeightProperty, minWidthProperty, paddingBottomProperty, paddingLeftProperty, paddingRightProperty, paddingTopProperty, unsetValue, widthProperty } from '@nativescript/core';
-import { alignItemsProperty, alignSelfProperty, flexDirectionProperty, flexGrowProperty, flexWrapProperty, justifyContentProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
-import { _forceStyleUpdate, _getAlignContent, _getAlignItems, _getAlignSelf, _getAspectRatio, _getColumnGap, _getDisplay, _getFlexBasis, _getFlexDirection, _getFlexGrow, _getFlexShrink, _getFlexWrap, _getHeight, _getJustifyContent, _getJustifyItems, _getJustifySelf, _getOverflow, _getOverflowX, _getOverflowY, _getPosition, _getRowGap, _getWidth, _parseGridTemplates, _setAlignContent, _setAlignItems, _setAlignSelf, _setAspectRatio, _setBorderBottom, _setBorderLeft, _setBorderRight, _setBorderTop, _setBottom, _setColumnGap, _setDisplay, _setFlexBasis, _setFlexDirection, _setFlexGrow, _setFlexShrink, _setFlexWrap, _setGridAutoColumns, _setGridAutoFlow, _setGridAutoRows, _setGridColumnEnd, _setGridColumnStart, _setGridRowEnd, _setGridRowStart, _setGridTemplateColumns, _setGridTemplateRows, _setHeight, _setJustifyContent, _setJustifyItems, _setJustifySelf, _setLeft, _setMarginBottom, _setMarginLeft, _setMarginRight, _setMarginTop, _setMaxHeight, _setMaxWidth, _setMinHeight, _setMinWidth, _setOverflow, _setOverflowX, _setOverflowY, _setPaddingBottom, _setPaddingLeft, _setPaddingRight, _setPaddingTop, _setPosition, _setRight, _setRowGap, _setScrollbarWidth, _setTop, _setWidth, getScrollbarWidth, } 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);
-                    }
-                };
-            }
-        });
-    });
-}
-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;
-        }
-        get flexWrap() {
-            return _getFlexWrap(this);
-        }
-        [flexWrapProperty.setNative](value) {
-            _setFlexWrap(value, 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;
-        }
-        get alignContent() {
-            return _getAlignContent(this);
-        }
-        [alignContentProperty.setNative](value) {
-            _setAlignContent(value, this);
-        }
-        set justifyItems(value) {
-            this.style.justifyItems = value;
-        }
-        get justifyItems() {
-            return _getJustifyItems(this);
-        }
-        [justifyItemsProperty.setNative](value) {
-            _setJustifyItems(value, this);
-        }
-        set justifySelf(value) {
-            this.style.justifySelf = value;
-        }
-        get justifySelf() {
-            return _getJustifySelf(this);
-        }
-        [justifySelfProperty.setNative](value) {
-            _setJustifySelf(value, this);
-        }
-        set justifyContent(value) {
-            this.style.justifyContent = value;
-        }
-        get justifyContent() {
-            return _getJustifyContent(this);
-        }
-        [justifyContentProperty.setNative](value) {
-            _setJustifyContent(value, 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);
-        }
-        get flex() {
-            return this.style.flex;
-        }
-        set flex(value) {
-            this.style.flex = value;
-        }
-        get flexFlow() {
-            return this.style.flexFlow;
-        }
-        set flexFlow(value) {
-            this.style.flexFlow = value;
-        }
-        //@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);
-        }
-        set flexBasis(value) {
-            this.style.flexBasis = value;
-        }
-        [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;
-        }
-        get width() {
-            return _getWidth(this);
-        }
-        [widthProperty.setNative](value) {
-            _setWidth(value, this);
-        }
-        //@ts-ignore
-        set height(value) {
-            this.style.height = value;
-        }
-        //@ts-ignore
-        get height() {
-            return _getHeight(this);
-        }
-        [heightProperty.setNative](value) {
-            _setHeight(value, 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;
-        }
-        //@ts-ignore
-        get gridAutoRows() {
-            return this.style.gridAutoRows;
-        }
-        [gridAutoRowsProperty.setNative](value) {
-            _setGridAutoRows(value, this);
-        }
-        //@ts-ignore
-        set gridAutoColumns(value) {
-            this.style.gridAutoColumns = value;
-        }
-        get gridAutoColumns() {
-            return this.style.gridAutoColumns;
-        }
-        [gridAutoColumnsProperty.setNative](value) {
-            _setGridAutoColumns(value, this);
-        }
-        set gridAutoFlow(value) {
-            this.style.gridAutoFlow = value;
-        }
-        get gridAutoFlow() {
-            return this.style.gridAutoFlow;
-        }
-        [gridAutoFlowProperty.setNative](value) {
-            _setGridAutoFlow(value, this);
-        }
-        set gridColumnStart(value) {
-            this.style.gridColumnStart = value;
-        }
-        get gridColumnStart() {
-            return this.style.gridColumnStart;
-        }
-        [gridColumnStartProperty.setNative](value) {
-            _setGridColumnStart(value, this);
-        }
-        set gridColumnEnd(value) {
-            this.style.gridColumnEnd = value;
-        }
-        get gridColumnEnd() {
-            return this.style.gridColumnEnd;
-        }
-        [gridColumnEndProperty.setNative](value) {
-            _setGridColumnEnd(value, this);
-        }
-        set gridRowStart(value) {
-            this.style.gridRowStart = value;
-        }
-        get gridRowStart() {
-            return this.style.gridRowStart;
-        }
-        [gridRowStartProperty.setNative](value) {
-            _setGridRowStart(value, this);
-        }
-        set gridRowEnd(value) {
-            this.style.gridRowEnd = value;
-        }
-        get gridRowEnd() {
-            return this.style.gridRowEnd;
-        }
-        [gridRowEndProperty.setNative](value) {
-            _setGridRowEnd(value, this);
-        }
-        set gridTemplateRows(value) {
-            this.style.gridTemplateRows = value;
-        }
-        [gridTemplateRowsProperty.setNative](value) {
-            const templates = _parseGridTemplates(value);
-            if (templates) {
-                _setGridTemplateRows(templates, this);
-            }
-        }
-        set gridTemplateColumns(value) {
-            this.style.gridTemplateColumns = value;
-        }
-        [gridTemplateColumnsProperty.setNative](value) {
-            const templates = _parseGridTemplates(value);
-            if (templates) {
-                _setGridTemplateColumns(templates, this);
-            }
-        }
-        get scrollBarWidth() {
-            return getScrollbarWidth(this);
-        }
-        set scrollBarWidth(value) {
-            this.style.scrollBarWidth = value;
-        }
-        [scrollBarWidthProperty.setNative](value) {
-            _setScrollbarWidth(value, this);
-        }
-        get overflow() {
-            return _getOverflow(this);
-        }
-        set overflow(value) {
-            this.style.overflow = value;
-        }
-        [overflowProperty.setNative](value) {
-            _setOverflow(value, this);
-        }
-        get overflowX() {
-            return _getOverflowX(this);
-        }
-        set overflowX(value) {
-            this.style.overflowX = value;
-        }
-        [overflowXProperty.setNative](value) {
-            _setOverflowX(value, this);
-        }
-        get overflowY() {
-            return _getOverflowY(this);
-        }
-        set overflowY(value) {
-            this.style.overflowY = value;
-        }
-        [overflowYProperty.setNative](value) {
-            _setOverflowY(value, this);
-        }
-    }
-    applyMixins(NSView, [ViewOverride], { overrideIfExists: '_isMasonViewOrChild' });
-}
-export function installMixins() {
-    if (!mixinInstalled) {
-        mixinInstalled = true;
-        overrideViewBase();
-    }
-}
-const emptyArray = [];
+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',
@@ -622,6 +49,141 @@ export const overflowYProperty = new CssProperty({
     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;
+        }
+        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);
+        }
+    },
+    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);
+        }
+    },
+    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);
+        }
+    },
+    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);
+        }
+    },
+    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;
+        }
+        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;
+        }
+        return parsed;
+    },
+});
+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) {
+        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;
+            }
+            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]);
+            }
+        }
+        return properties;
+    },
+});
 // export const flexGrowProperty = new CssProperty<Style, number>({
 //   name: 'flexGrow',
 //   cssName: 'flex-grow',
@@ -637,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) {
@@ -659,7 +221,7 @@ export const displayProperty = new CssProperty({
                 return value;
             default:
                 // todo throw???
-                return 'flex';
+                return 'block';
         }
     },
 });
@@ -667,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({
@@ -693,24 +257,28 @@ 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({
@@ -738,101 +306,21 @@ 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',
     defaultValue: Number.NaN,
 });
-// export const alignItemsProperty = new CssProperty<Style, AlignItems>({
-//   name: 'alignItems',
-//   cssName: 'align-items',
-//   defaultValue: 'normal',
-// });
-// export const alignSelfProperty = new CssProperty<Style, AlignSelf>({
-//   name: 'alignSelf',
-//   cssName: 'align-self',
-//   defaultValue: 'normal',
-// });
+export const alignItemsProperty = new CssProperty({
+    name: 'alignItems',
+    cssName: 'align-items',
+    defaultValue: 'normal',
+});
+export const alignSelfProperty = new CssProperty({
+    name: 'alignSelf',
+    cssName: 'align-self',
+    defaultValue: 'normal',
+});
 export const alignContentProperty = new CssProperty({
     name: 'alignContent',
     cssName: 'align-content',
@@ -848,11 +336,11 @@ export const justifySelfProperty = new CssProperty({
     cssName: 'justify-self',
     defaultValue: 'normal',
 });
-// export const justifyContentProperty = new CssProperty<Style, JustifyContent>({
-//   name: 'justifyContent',
-//   cssName: 'justify-content',
-//   defaultValue: 'normal',
-// });
+export const justifyContentProperty = new CssProperty({
+    name: 'justifyContent',
+    cssName: 'justify-content',
+    defaultValue: 'normal',
+});
 export const gridAutoRowsProperty = new CssProperty({
     name: 'gridAutoRows',
     cssName: 'grid-auto-rows',
@@ -912,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]);
@@ -957,7 +445,7 @@ export const gridAreaProperty = new ShorthandProperty({
                 ];
             }
         }
-        return emptyArray;
+        return [];
     },
 });
 export const gridColumnStartProperty = new CssProperty({
@@ -984,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]);
@@ -1004,7 +492,7 @@ export const gridColumnProperty = new ShorthandProperty({
                 ];
             }
         }
-        return emptyArray;
+        return [];
     },
 });
 export const gridRowStartProperty = new CssProperty({
@@ -1031,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]);
@@ -1051,18 +539,18 @@ 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: '',
+    defaultValue: null,
 });
 // flex-flow: <flex-direction> || <flex-wrap>
 const flexFlowProperty = new ShorthandProperty({
@@ -1149,7 +637,17 @@ const flexProperty = new ShorthandProperty({
         return properties;
     },
 });
-let TSCViewBase = class TSCViewBase extends CustomLayoutView {
+export const textWrapProperty = new Property({
+    name: 'textWrap',
+    affectsLayout: true,
+    defaultValue: 'nowrap',
+});
+export const textProperty = new Property({
+    name: 'text',
+    affectsLayout: true,
+    defaultValue: '',
+});
+let ViewBase = class ViewBase extends CustomLayoutView {
     constructor() {
         super();
         this._children = [];
@@ -1176,19 +674,19 @@ let TSCViewBase = class TSCViewBase extends CustomLayoutView {
         }
     }
     eachChild(callback) {
-        this._children.forEach((child) => {
+        for (const child of this._children) {
             callback(child);
-        });
+        }
     }
     eachChildView(callback) {
-        this._children.forEach((view, key) => {
+        for (const view of this._children) {
             callback(view);
-        });
+        }
     }
     _addChildFromBuilder(name, value) {
-        this._children.push(value);
-        value._isMasonChild = true;
-        this._addView(value);
+        if (value instanceof NSView) {
+            this.addChild(value);
+        }
     }
     getChildrenCount() {
         return this._children.length;
@@ -1215,20 +713,111 @@ let TSCViewBase = class TSCViewBase extends CustomLayoutView {
     }
     removeChild(child) {
         const index = this._children.indexOf(child);
-        this._children.splice(index, 1);
-        this._removeView(child);
+        if (index > -1) {
+            this._children.splice(index, 1);
+            this._removeView(child);
+        }
     }
     removeChildren() {
-        while (this.getChildrenCount() !== 0) {
-            this.removeChild(this._children[this.getChildrenCount() - 1]);
+        if (this._children.length === 0) {
+            return;
+        }
+        for (const child of this._children) {
+            child._isMasonChild = false;
+            this._removeView(child);
         }
+        this._children.splice(0);
+    }
+    [displayProperty.setNative](value) {
+        _setDisplay(value, this);
+    }
+    [flexDirectionProperty.setNative](value) {
+        _setFlexDirection(value, this);
+    }
+    [minWidthProperty.setNative](value) {
+        _setMinWidth(value, this);
+    }
+    [minHeightProperty.setNative](value) {
+        _setMinHeight(value, this);
+    }
+    [widthProperty.setNative](value) {
+        _setWidth(value, this);
+    }
+    [heightProperty.setNative](value) {
+        _setHeight(value, this);
+    }
+    [alignContentProperty.setNative](value) {
+        _setAlignContent(value, this);
+    }
+    [justifyContentProperty.setNative](value) {
+        _setJustifyContent(value, this);
+    }
+    [marginLeftProperty.setNative](value) {
+        _setMarginLeft(value, this);
+    }
+    [marginRightProperty.setNative](value) {
+        _setMarginRight(value, this);
+    }
+    [marginBottomProperty.setNative](value) {
+        _setMarginBottom(value, this);
+    }
+    [marginTopProperty.setNative](value) {
+        _setMarginTop(value, this);
+    }
+    [paddingLeftProperty.setNative](value) {
+        _setPaddingLeft(value, this);
+    }
+    [paddingRightProperty.setNative](value) {
+        _setPaddingRight(value, this);
+    }
+    [paddingTopProperty.setNative](value) {
+        _setPaddingTop(value, this);
+    }
+    [paddingBottomProperty.setNative](value) {
+        _setPaddingBottom(value, this);
+    }
+    [rowGapProperty.setNative](value) {
+        _setRowGap(value, this);
+    }
+    [columnGapProperty.setNative](value) {
+        _setColumnGap(value, this);
+    }
+    [gridColumnStartProperty.setNative](value) {
+        _setGridColumnStart(value, this);
+    }
+    [gridColumnEndProperty.setNative](value) {
+        _setGridColumnEnd(value, this);
+    }
+    [gridRowStartProperty.setNative](value) {
+        _setGridRowStart(value, this);
+    }
+    [gridRowEndProperty.setNative](value) {
+        _setGridRowEnd(value, this);
+    }
+    [gridTemplateRowsProperty.setNative](value) {
+        _setGridTemplateRows(_parseGridTemplates(value), this);
+    }
+    [gridTemplateColumnsProperty.setNative](value) {
+        _setGridTemplateColumns(_parseGridTemplates(value), this);
     }
 };
-TSCViewBase = __decorate([
-    CSSType('TSCView'),
+ViewBase = __decorate([
+    CSSType('View'),
     __metadata("design:paramtypes", [])
-], TSCViewBase);
-export { TSCViewBase };
+], ViewBase);
+export { ViewBase };
+let TextBase = class TextBase extends ViewBase {
+    constructor() {
+        super();
+    }
+};
+TextBase = __decorate([
+    CSSType('Text'),
+    __metadata("design:paramtypes", [])
+], TextBase);
+export { TextBase };
+textProperty.register(TextBase);
+textWrapProperty.register(TextBase);
 /**
  * Props are already defined in core flexbox layout,
  * overriding them breaks the core flexbox layout.
@@ -1237,9 +826,9 @@ export { TSCViewBase };
 // flexWrapProperty.register(Style);
 // flexGrowProperty.register(Style);
 // flexShrinkProperty.register(Style);
-// alignItemsProperty.register(Style);
-// alignSelfProperty.register(Style);
-// justifyContentProperty.register(Style);
+alignItemsProperty.register(Style);
+alignSelfProperty.register(Style);
+justifyContentProperty.register(Style);
 displayProperty.register(Style);
 maxWidthProperty.register(Style);
 maxHeightProperty.register(Style);
@@ -1254,7 +843,6 @@ columnGapProperty.register(Style);
 gridRowGapProperty.register(Style);
 gridColumnGapProperty.register(Style);
 gapProperty.register(Style);
-gridGapProperty.register(Style);
 aspectRatioProperty.register(Style);
 alignContentProperty.register(Style);
 justifyItemsProperty.register(Style);
@@ -1277,5 +865,68 @@ overflowYProperty.register(Style);
 scrollBarWidthProperty.register(Style);
 flexFlowProperty.register(Style);
 flexProperty.register(Style);
-installMixins();
+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