@triniwiz/nativescript-masonkit 1.0.0-alpha.21 → 1.0.0-alpha.23

package/common.js

@@ -1,1071 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import { CssProperty, CustomLayoutView, Length as NSLength, ShorthandProperty, Style, View as NSView, getViewById, unsetValue, Property, widthProperty, heightProperty, CoreTypes, Trace, Length as CoreLength, PercentLength as CorePercentLength, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty } from '@nativescript/core';
-import { _forceStyleUpdate, _parseGridTemplates, _setAlignContent, _setAlignItems, _setAlignSelf, _setBottom, _setColumnGap, _setDisplay, _setFlexBasis, _setFlexDirection, _setFlexGrow, _setFlexShrink, _setFlexWrap, _setGridColumnEnd, _setGridColumnStart, _setGridRowEnd, _setGridRowStart, _setGridTemplateColumns, _setGridTemplateRows, _setHeight, _setJustifyContent, _setJustifyItems, _setJustifySelf, _setLeft, _setMarginBottom, _setMarginLeft, _setMarginRight, _setMarginTop, _setMinHeight, _setMinWidth, _setOverflowX, _setOverflowY, _setPaddingBottom, _setPaddingLeft, _setPaddingRight, _setPaddingTop, _setPosition, _setRight, _setRowGap, _setScrollbarWidth, _setTop, _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 'clip';
-            case 2:
-                return 'hidden';
-            case 3:
-                return 'scroll';
-        }
-    }
-    switch (value) {
-        case 'visible':
-        case 'hidden':
-        case 'clip':
-        case 'scroll':
-            return value;
-        default:
-            return 'visible';
-    }
-}
-function masonLengthParse(value) {
-    try {
-        return CoreLength.parse(value);
-    }
-    catch (e) {
-        return undefined;
-    }
-}
-function masonLengthPercentParse(value) {
-    try {
-        return CorePercentLength.parse(value);
-    }
-    catch (e) {
-        return undefined;
-    }
-}
-const overFlow = /^\s*(visible|hidden|clip|scroll|auto)(?:\s+(visible|hidden|clip|scroll|auto))?\s*$/;
-export const overflowProperty = new ShorthandProperty({
-    name: 'overflow',
-    cssName: 'overflow',
-    getter: function () {
-        if (this.overflowX === this.overflowY) {
-            return this.overflowX;
-        }
-        return `${this.overflowX} ${this.overflowY}`;
-    },
-    converter(value) {
-        const properties = [];
-        if (typeof value === 'string') {
-            const values = value.match(overFlow);
-            const length = values.length;
-            if (length === 0) {
-                return properties;
-            }
-            if (length === 1) {
-                const xy = values[0];
-                properties.push([overflowXProperty, xy]);
-                properties.push([overflowYProperty, xy]);
-            }
-            if (length > 1) {
-                const x = values[0];
-                const y = values[1];
-                properties.push([overflowXProperty, x]);
-                properties.push([overflowYProperty, y]);
-            }
-        }
-        return properties;
-    },
-});
-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;
-        }
-        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: masonLengthParse,
-});
-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: masonLengthParse,
-});
-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: masonLengthParse,
-});
-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: masonLengthParse,
-});
-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',
-//   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: 'block',
-    valueConverter(value) {
-        if (typeof value === 'number') {
-            switch (value) {
-                case 0:
-                    return 'none';
-                case 1:
-                    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 'block';
-        }
-    },
-});
-export const maxWidthProperty = new CssProperty({
-    name: 'maxWidth',
-    cssName: 'max-width',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-});
-export const maxHeightProperty = new CssProperty({
-    name: 'maxHeight',
-    cssName: 'max-height',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-});
-export const positionProperty = new CssProperty({
-    name: 'position',
-    cssName: 'position',
-    defaultValue: 'relative',
-});
-// 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',
-// });
-const insetProperty = new ShorthandProperty({
-    name: 'inset',
-    cssName: 'inset',
-    getter: function () {
-        if (CorePercentLength.equals(this.top, this.right) && CorePercentLength.equals(this.top, this.bottom) && CorePercentLength.equals(this.top, this.left)) {
-            return this.top;
-        }
-        return `${CorePercentLength.convertToString(this.paddingTop)} ${CorePercentLength.convertToString(this.paddingRight)} ${CorePercentLength.convertToString(this.paddingBottom)} ${CorePercentLength.convertToString(this.paddingLeft)}`;
-    },
-    converter: convertToInsets,
-});
-function convertToInsets(value) {
-    if (typeof value === 'string' && value !== 'auto') {
-        const thickness = parseShorthandPositioning(value);
-        return [
-            [topProperty, masonLengthPercentParse(thickness.top)],
-            [rightProperty, masonLengthPercentParse(thickness.right)],
-            [bottomProperty, masonLengthPercentParse(thickness.bottom)],
-            [leftProperty, masonLengthPercentParse(thickness.left)],
-        ];
-    }
-    else {
-        return [
-            [topProperty, value],
-            [rightProperty, value],
-            [bottomProperty, value],
-            [leftProperty, value],
-        ];
-    }
-}
-export const leftProperty = new CssProperty({
-    name: 'left',
-    cssName: 'left',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-});
-export const rightProperty = new CssProperty({
-    name: 'right',
-    cssName: 'right',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-});
-export const topProperty = new CssProperty({
-    name: 'top',
-    cssName: 'top',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-});
-export const bottomProperty = new CssProperty({
-    name: 'bottom',
-    cssName: 'bottom',
-    defaultValue: 'auto',
-    // @ts-ignore
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-});
-export const flexBasisProperty = new CssProperty({
-    name: 'flexBasis',
-    cssName: 'flex-basis',
-    defaultValue: 'auto',
-    equalityComparer: NSLength.equals,
-    valueConverter: masonLengthParse,
-});
-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 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 [];
-            }
-            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 [];
-    },
-});
-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 [];
-            }
-            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 [];
-    },
-});
-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 [];
-            }
-            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 [];
-    },
-});
-export const gridTemplateRowsProperty = new CssProperty({
-    name: 'gridTemplateRows',
-    cssName: 'grid-template-rows',
-    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;
-    },
-});
-// @ts-ignore
-export const textWrapProperty = new Property({
-    name: 'textWrap',
-    affectsLayout: true,
-    defaultValue: 'nowrap',
-});
-// @ts-ignore
-export const textProperty = new Property({
-    name: 'text',
-    affectsLayout: true,
-    defaultValue: '',
-});
-export const boxSizingProperty = new CssProperty({
-    name: 'boxSizing',
-    cssName: 'box-sizing',
-    defaultValue: 'border-box',
-});
-export class ViewBase extends CustomLayoutView {
-    constructor() {
-        super();
-        this._children = [];
-        this._isMasonView = false;
-        this._isMasonChild = false;
-        this._isMasonView = true;
-    }
-    forceStyleUpdate() {
-        _forceStyleUpdate(this);
-    }
-    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) {
-        for (const child of this._children) {
-            callback(child);
-        }
-    }
-    eachChildView(callback) {
-        for (const view of this._children) {
-            callback(view);
-        }
-    }
-    _addChildFromBuilder(name, value) {
-        if (value instanceof NSView) {
-            this.addChild(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);
-        if (index > -1) {
-            this._children.splice(index, 1);
-            this._removeView(child);
-        }
-    }
-    removeChildren() {
-        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);
-    }
-    [overflowXProperty.setNative](value) {
-        _setOverflowX(value, this);
-    }
-    [overflowYProperty.setNative](value) {
-        _setOverflowY(value, this);
-    }
-    [scrollBarWidthProperty.setNative](value) {
-        _setScrollbarWidth(value, this);
-    }
-    [positionProperty.setNative](value) {
-        _setPosition(value, this);
-    }
-    [flexWrapProperty.setNative](value) {
-        _setFlexWrap(value, this);
-    }
-    [flexDirectionProperty.setNative](value) {
-        _setFlexDirection(value, this);
-    }
-    [flexGrowProperty.setNative](value) {
-        _setFlexGrow(value, this);
-    }
-    [flexShrinkProperty.setNative](value) {
-        _setFlexShrink(value, this);
-    }
-    [flexBasisProperty.setNative](value) {
-        _setFlexBasis(value, this);
-    }
-    [alignItemsProperty.setNative](value) {
-        _setAlignItems(value, this);
-    }
-    [alignSelfProperty.setNative](value) {
-        _setAlignSelf(value, this);
-    }
-    [alignContentProperty.setNative](value) {
-        _setAlignContent(value, this);
-    }
-    [justifyItemsProperty.setNative](value) {
-        _setJustifyItems(value, this);
-    }
-    [justifySelfProperty.setNative](value) {
-        _setJustifySelf(value, this);
-    }
-    [justifyContentProperty.setNative](value) {
-        _setJustifyContent(value, this);
-    }
-    [leftProperty.setNative](value) {
-        _setLeft(value, this);
-    }
-    [rightProperty.setNative](value) {
-        _setRight(value, this);
-    }
-    [bottomProperty.setNative](value) {
-        _setBottom(value, this);
-    }
-    [topProperty.setNative](value) {
-        _setTop(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);
-    }
-    [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);
-    }
-}
-export class TextBase extends ViewBase {
-    constructor() {
-        super();
-    }
-}
-textProperty.register(TextBase);
-textWrapProperty.register(TextBase);
-// @ts-ignore
-export const srcProperty = new Property({
-    name: 'src',
-    defaultValue: '',
-});
-export class ImageBase extends ViewBase {
-}
-srcProperty.register(ImageBase);
-/**
- * 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);
-insetProperty.register(Style);
-boxSizingProperty.register(Style);
-alignItemsProperty.register(Style);
-alignSelfProperty.register(Style);
-justifyContentProperty.register(Style);
-displayProperty.register(Style);
-maxWidthProperty.register(Style);
-maxHeightProperty.register(Style);
-positionProperty.register(Style);
-leftProperty.register(Style);
-rightProperty.register(Style);
-topProperty.register(Style);
-bottomProperty.register(Style);
-flexBasisProperty.register(Style);
-rowGapProperty.register(Style);
-columnGapProperty.register(Style);
-gridRowGapProperty.register(Style);
-gridColumnGapProperty.register(Style);
-gapProperty.register(Style);
-aspectRatioProperty.register(Style);
-alignContentProperty.register(Style);
-justifyItemsProperty.register(Style);
-justifySelfProperty.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);
-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