@triniwiz/nativescript-masonkit 1.0.0-alpha.2 → 1.0.0-alpha.22

package/common.js

@@ -1,1556 +0,0 @@
-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, getViewById } 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);
-                    }
-                };
-            }
-        });
-    });
-}
-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;
-        }
-        set gridRowStart(value) {
-            this.style.gridRowStart = value;
-        }
-        [gridRowStartProperty.setNative](value) {
-            _setGridRowStart(value, this);
-        }
-        get gridRowStart() {
-            return this.style.gridRowStart;
-        }
-        set gridRowEnd(value) {
-            this.style.gridRowEnd = value;
-        }
-        [gridRowEndProperty.setNative](value) {
-            _setGridRowEnd(value, this);
-        }
-        get gridRowEnd() {
-            return this.style.gridRowEnd;
-        }
-        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);
-            }
-        }
-    }
-    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,
-});
-export const flexShrinkProperty = new CssProperty({
-    name: 'flexShrink',
-    cssName: 'flex-shrink',
-    defaultValue: 1,
-    valueConverter: parseFloat,
-});
-export const displayProperty = new CssProperty({
-    name: 'display',
-    cssName: 'display',
-    defaultValue: 'flex',
-    valueConverter(value) {
-        if (typeof value === 'number') {
-            switch (value) {
-                case 0:
-                    return 'none';
-                case 1:
-                    return 'flex';
-                case 2:
-                    return 'grid';
-            }
-        }
-        switch (value) {
-            case 'none':
-            case 'flex':
-            case 'grid':
-                return value;
-            default:
-                // todo throw???
-                return 'flex';
-        }
-    },
-});
-export const maxWidthProperty = new CssProperty({
-    name: 'maxWidth',
-    cssName: 'max-width',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-});
-export const maxHeightProperty = new CssProperty({
-    name: 'maxHeight',
-    cssName: 'max-height',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-});
-export const positionProperty = new CssProperty({
-    name: 'position',
-    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 leftProperty = new CssProperty({
-    name: 'left',
-    cssName: 'left',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-});
-export const rightProperty = new CssProperty({
-    name: 'right',
-    cssName: 'right',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-});
-export const topProperty = new CssProperty({
-    name: 'top',
-    cssName: 'top',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-});
-export const bottomProperty = new CssProperty({
-    name: 'bottom',
-    cssName: 'bottom',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-});
-export const flexBasisProperty = new CssProperty({
-    name: 'flexBasis',
-    cssName: 'flex-basis',
-    defaultValue: 'auto',
-});
-export const gridRowGapProperty = new ShorthandProperty({
-    name: 'gridRowGap',
-    cssName: 'grid-row-gap',
-    getter: function () {
-        return this.rowGap;
-    },
-    converter(value) {
-        return [[rowGapProperty, value]];
-    },
-});
-export const gridColumnGapProperty = new ShorthandProperty({
-    name: 'gridColumnGap',
-    cssName: 'grid-column-gap',
-    getter: function () {
-        return this.columnGap;
-    },
-    converter(value) {
-        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({
-    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',
-    defaultValue: 'normal',
-});
-export const justifyItemsProperty = new CssProperty({
-    name: 'justifyItems',
-    cssName: 'justify-items',
-    defaultValue: 'normal',
-});
-export const justifySelfProperty = new CssProperty({
-    name: 'justifySelf',
-    cssName: 'justify-self',
-    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',
-    defaultValue: '',
-});
-export const gridAutoColumnsProperty = new CssProperty({
-    name: 'gridAutoColumns',
-    cssName: 'grid-auto-columns',
-    defaultValue: '',
-});
-export const gridAutoFlowProperty = new CssProperty({
-    name: 'gridAutoFlow',
-    cssName: 'grid-auto-flow',
-    defaultValue: 'row',
-});
-function parseGridColumnOrRow(value) {
-    if (value.trim() === 'auto') {
-        return 'auto';
-    }
-    else {
-        const split = value.split(/\s+/).filter((item) => item.trim().length !== 0);
-        const length = split.length;
-        if (length === 0) {
-            return undefined;
-        }
-        const first = split[0];
-        if (length === 1) {
-            const parsedValue = Number(first);
-            if (Number.isNaN(parsedValue)) {
-                return undefined;
-            }
-            return first;
-        }
-        if (length === 2) {
-            if (first === 'span') {
-                const second = split[1];
-                const parsedValue = Number(second);
-                if (Number.isNaN(parsedValue)) {
-                    return undefined;
-                }
-                return `${first} ${second}`;
-            }
-        }
-        //custom-ident unsupport atm
-        return undefined;
-    }
-}
-export const gridAreaProperty = new ShorthandProperty({
-    name: 'gridArea',
-    cssName: 'grid-area',
-    getter: function () {
-        return `${this.gridRowStart} / ${this.gridColumnStart} / ${this.gridRowEnd} / ${this.gridColumnEnd}`;
-    },
-    converter(value) {
-        if (typeof value === 'string') {
-            const values = value.split('/').filter((item) => item.trim().length !== 0);
-            // grid-row-start / grid-column-start / grid-row-end / grid-column-end
-            const length = values.length;
-            if (length === 0) {
-                return emptyArray;
-            }
-            if (length === 1) {
-                const parsed = parseGridColumnOrRow(values[0]);
-                return [
-                    [gridRowStartProperty, parsed],
-                    [gridRowEndProperty, parsed],
-                    [gridColumnStartProperty, parsed],
-                    [gridColumnEndProperty, parsed],
-                ];
-            }
-            if (length === 2) {
-                const row = parseGridColumnOrRow(values[0]);
-                const column = parseGridColumnOrRow(values[1]);
-                return [
-                    [gridRowStartProperty, row],
-                    [gridRowEndProperty, row],
-                    [gridColumnStartProperty, column],
-                    [gridColumnEndProperty, column],
-                ];
-            }
-            if (length === 3) {
-                const rowStart = parseGridColumnOrRow(values[0]);
-                const rowEnd = parseGridColumnOrRow(values[2]);
-                const columnStart = parseGridColumnOrRow(values[1]);
-                return [
-                    [gridRowStartProperty, rowStart],
-                    [gridRowEndProperty, rowEnd],
-                    [gridColumnStartProperty, columnStart],
-                    [gridColumnEndProperty, columnStart],
-                ];
-            }
-            if (length >= 4) {
-                const rowStart = parseGridColumnOrRow(values[0]);
-                const rowEnd = parseGridColumnOrRow(values[2]);
-                const columnStart = parseGridColumnOrRow(values[1]);
-                const columnEnd = parseGridColumnOrRow(values[3]);
-                return [
-                    [gridRowStartProperty, rowStart],
-                    [gridRowEndProperty, rowEnd],
-                    [gridColumnStartProperty, columnStart],
-                    [gridColumnEndProperty, columnEnd],
-                ];
-            }
-        }
-        return emptyArray;
-    },
-});
-export const gridColumnStartProperty = new CssProperty({
-    name: 'gridColumnStart',
-    cssName: 'grid-column-start',
-    defaultValue: 'auto',
-});
-export const gridColumnEndProperty = new CssProperty({
-    name: 'gridColumnEnd',
-    cssName: 'grid-column-end',
-    defaultValue: 'auto',
-});
-export const gridColumnProperty = new ShorthandProperty({
-    name: 'gridColumn',
-    cssName: 'grid-column',
-    getter: function () {
-        if (this.gridColumnStart === this.gridColumnEnd) {
-            return this.gridColumnStart;
-        }
-        return `${this.gridColumnStart} / ${this.gridColumnStart}`;
-    },
-    converter(value) {
-        if (typeof value === 'string') {
-            const values = value.split('/').filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return emptyArray;
-            }
-            if (length === 1) {
-                const parsed = parseGridColumnOrRow(values[0]);
-                return [
-                    [gridColumnStartProperty, parsed],
-                    [gridColumnEndProperty, parsed],
-                ];
-            }
-            if (length > 1) {
-                const start = values[0];
-                const end = values[1];
-                const parsedStart = parseGridColumnOrRow(start);
-                const parsedEnd = parseGridColumnOrRow(end);
-                return [
-                    [gridColumnStartProperty, parsedStart],
-                    [gridColumnEndProperty, parsedEnd],
-                ];
-            }
-        }
-        return emptyArray;
-    },
-});
-export const gridRowStartProperty = new CssProperty({
-    name: 'gridRowStart',
-    cssName: 'grid-row-start',
-    defaultValue: 'auto',
-});
-export const gridRowEndProperty = new CssProperty({
-    name: 'gridRowEnd',
-    cssName: 'grid-row-end',
-    defaultValue: 'auto',
-});
-export const gridRowProperty = new ShorthandProperty({
-    name: 'gridRow',
-    cssName: 'grid-row',
-    getter: function () {
-        if (this.gridRowStart === this.gridRowEnd) {
-            return this.gridRowStart;
-        }
-        return `${this.gridRowStart} / ${this.gridRowStart}`;
-    },
-    converter(value) {
-        if (typeof value === 'string') {
-            const values = value.split('/').filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return emptyArray;
-            }
-            if (length === 1) {
-                const parsed = parseGridColumnOrRow(values[0]);
-                return [
-                    [gridRowStartProperty, parsed],
-                    [gridRowEndProperty, parsed],
-                ];
-            }
-            if (length > 1) {
-                const start = values[0];
-                const end = values[1];
-                const parsedStart = parseGridColumnOrRow(start);
-                const parsedEnd = parseGridColumnOrRow(end);
-                return [
-                    [gridRowStartProperty, parsedStart],
-                    [gridRowEndProperty, parsedEnd],
-                ];
-            }
-        }
-        return emptyArray;
-    },
-});
-export const gridTemplateRowsProperty = new CssProperty({
-    name: 'gridTemplateRows',
-    cssName: 'grid-template-rows',
-    defaultValue: '',
-});
-export const gridTemplateColumnsProperty = new CssProperty({
-    name: 'gridTemplateColumns',
-    cssName: 'grid-template-columns',
-    defaultValue: '',
-});
-let TSCViewBase = class TSCViewBase extends CustomLayoutView {
-    constructor() {
-        super();
-        this._children = [];
-        this._isMasonView = false;
-        this._isMasonChild = false;
-        this._isMasonView = true;
-    }
-    forceStyleUpdate() {
-        _forceStyleUpdate(this);
-    }
-    /*
-    markDirty() {
-      _markDirty(this as any);
-    }
-  
-    isDirty() {
-      return _isDirty(this as any);
-    }
-  
-    get display(): Display {
-      return _getDisplay(this as any);
-    }
-  
-    set display(value) {
-      this.style.display = value as any;
-    }
-  
-    [displayProperty.setNative](value) {
-      console.log('displayProperty', 'view');
-      _setDisplay(value, this as any);
-    }
-  
-    set position(value) {
-      this.style.position = value;
-    }
-  
-    get position(): Position {
-      return _getPosition(this as any);
-    }
-  
-    [positionProperty.setNative](value) {
-      _setPosition(value, this as any);
-    }
-  
-    set flexDirection(value) {
-      this.style.flexDirection = value;
-    }
-  
-    get flexDirection() {
-      return _getFlexDirection(this as any);
-    }
-  
-    [flexDirectionProperty.setNative](value) {
-      _setFlexDirection(value, this as any);
-    }
-  
-    set flexWrap(value) {
-      this.style.flexWrap = value as any;
-    }
-  
-    [flexWrapProperty.setNative](value) {
-      _setFlexWrap(value, this as any);
-    }
-  
-    get flexWrap() {
-      return _getFlexWrap(this as any);
-    }
-  
-    set alignItems(value) {
-      this.style.alignItems = value as any;
-    }
-  
-    get alignItems() {
-      return _getAlignItems(this as any);
-    }
-  
-    [alignItemsProperty.setNative](value) {
-      _setAlignItems(value, this as any);
-    }
-  
-    //@ts-ignore
-    set alignSelf(value: AlignSelf) {
-      this.style.alignSelf = value as any;
-    }
-  
-    //@ts-ignore
-    get alignSelf() {
-      return _getAlignSelf(this as any);
-    }
-  
-    [alignSelfProperty.setNative](value) {
-      _setAlignSelf(value, this as any);
-    }
-  
-    set alignContent(value) {
-      this.style.alignContent = value as any;
-    }
-  
-    [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);
-    }
-  
-    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;
-    }
-  
-    get bottom() {
-      return this.style.bottom;
-    }
-  
-    [bottomProperty.setNative](value) {
-      _setBottom(value, this as any);
-    }
-  
-    [marginLeftProperty.setNative](value) {
-      _setMarginLeft(value, this as any);
-    }
-  
-    [marginRightProperty.setNative](value) {
-      _setMarginRight(value, this as any);
-    }
-  
-    [marginTopProperty.setNative](value) {
-      _setMarginTop(value, this as any);
-    }
-  
-    [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);
-    }
-  
-    //@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);
-    }
-  
-    [paddingLeftProperty.setNative](value) {
-      _setPaddingLeft(value, this as any);
-    }
-  
-    [paddingTopProperty.setNative](value) {
-      _setPaddingTop(value, this as any);
-    }
-  
-    [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;
-    }
-  
-    [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;
-    }
-  
-    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 as any);
-    }
-  
-    get gridColumnStart() {
-      return this.style.gridColumnStart;
-    }
-  
-    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;
-    }
-  
-    [gridRowStartProperty.setNative](value) {
-      _setGridRowStart(value, this as any);
-    }
-  
-    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;
-    }
-  
-    [gridTemplateRowsProperty.setNative](value) {
-      const templates = _parseGridTemplates(value);
-      if (templates) {
-        _setGridTemplateRows(templates, this as any);
-      }
-    }
-  
-    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);
-        }
-    }
-    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);
-    }
-    getChildrenCount() {
-        return this._children.length;
-    }
-    get _childrenCount() {
-        return this._children.length;
-    }
-    getChildAt(index) {
-        return this._children[index];
-    }
-    getChildIndex(child) {
-        return this._children.indexOf(child);
-    }
-    getChildById(id) {
-        return getViewById(this, id);
-    }
-    addChild(child) {
-        this._children.push(child);
-        this._addView(child);
-    }
-    insertChild(child, atIndex) {
-        this._children.splice(atIndex, 0, child);
-        this._addView(child, atIndex);
-    }
-    removeChild(child) {
-        const index = this._children.indexOf(child);
-        this._children.splice(index, 1);
-        this._removeView(child);
-    }
-    removeChildren() {
-        while (this.getChildrenCount() !== 0) {
-            this.removeChild(this._children[this.getChildrenCount() - 1]);
-        }
-    }
-};
-TSCViewBase = __decorate([
-    CSSType('TSCView'),
-    __metadata("design:paramtypes", [])
-], TSCViewBase);
-export { TSCViewBase };
-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);
-gridAreaProperty.register(Style);
-gridColumnProperty.register(Style);
-gridColumnStartProperty.register(Style);
-gridColumnEndProperty.register(Style);
-gridRowProperty.register(Style);
-gridRowStartProperty.register(Style);
-gridRowEndProperty.register(Style);
-gridTemplateRowsProperty.register(Style);
-gridTemplateColumnsProperty.register(Style);
-installMixins();
-//# sourceMappingURL=common.js.map