@nativescript/core 9.1.0-dev.0 → 9.1.0-next.0

package/ui/styling/style-properties.js

@@ -1,10 +1,9 @@
 import { CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty } from '../core/properties';
-import { unsetValue, isCssWideKeyword } from '../core/properties/property-shared';
+import { unsetValue } from '../core/properties/property-shared';
 import { Style } from './style';
 import { Color } from '../../color';
 import { Font, parseFont, FontStyle, FontWeight, FontVariationSettings } from './font';
 import { Background } from './background';
-import { layout } from '../../utils';
 import { Trace } from '../../trace';
 import { CoreTypes } from '../../core-types';
 import { Length, FixedLength, PercentLength } from './length-shared';
@@ -13,68 +12,7 @@ import { LinearGradient } from './linear-gradient';
 import { parseCSSShadow } from './css-shadow';
 import { transformConverter } from './css-transform';
 import { ClipPathFunction } from './clip-path-function';
-import { parseCSSCommaSeparatedListOfValues } from './css-utils';
-function equalsCommon(a, b) {
-    if (a == 'auto' || isCssWideKeyword(a)) {
-        return b == 'auto' || isCssWideKeyword(b);
-    }
-    if (b == 'auto' || isCssWideKeyword(b)) {
-        return false;
-    }
-    if (typeof a === 'number') {
-        if (typeof b === 'number') {
-            return a == b;
-        }
-        if (!b) {
-            return false;
-        }
-        return b.unit == 'dip' && a == b.value;
-    }
-    if (typeof b === 'number') {
-        return a ? a.unit == 'dip' && a.value == b : false;
-    }
-    if (!a || !b) {
-        return false;
-    }
-    return a.value == b.value && a.unit == b.unit;
-}
-function convertToStringCommon(length) {
-    if (length == 'auto' || isCssWideKeyword(length)) {
-        return 'auto';
-    }
-    if (typeof length === 'number') {
-        return length.toString();
-    }
-    let val = length.value;
-    if (length.unit === '%') {
-        val *= 100;
-    }
-    return val + length.unit;
-}
-function toDevicePixelsCommon(length, auto = Number.NaN, parentAvailableWidth = Number.NaN) {
-    if (length == 'auto' || isCssWideKeyword(length)) {
-        return auto;
-    }
-    if (typeof length === 'number') {
-        return layout.round(layout.toDevicePixels(length));
-    }
-    if (!length) {
-        return auto;
-    }
-    // @ts-ignore
-    switch (length.unit) {
-        case 'px':
-            // @ts-ignore
-            return layout.round(length.value);
-        case '%':
-            // @ts-ignore
-            return layout.round(parentAvailableWidth * length.value);
-        case 'dip':
-        default:
-            // @ts-ignore
-            return layout.round(layout.toDevicePixels(length.value));
-    }
-}
+import { parseCSSCommaSeparatedListOfValues, splitOnTopLevelSpacesAndCommas } from './css-utils';
 function isNonNegativeFiniteNumber(value) {
     return isFinite(value) && !isNaN(value) && value >= 0;
 }
@@ -104,7 +42,9 @@ function parseClipPath(value) {
     }
 }
 function parseShorthandPositioning(value) {
-    const arr = value.split(/[ ,]+/);
+    return positioningFromParts(value.split(/[ ,]+/), value);
+}
+function positioningFromParts(arr, value) {
     let top;
     let right;
     let bottom;
@@ -143,16 +83,31 @@ function parseShorthandPositioning(value) {
         left: left,
     };
 }
-function parseBorderColorPositioning(value) {
-    if (value.indexOf('rgb') === 0 || value.indexOf('hsl') === 0) {
-        return {
-            top: value,
-            right: value,
-            bottom: value,
-            left: value,
-        };
+function parseShorthandGap(value) {
+    const arr = value.split(/[ ,]+/);
+    let row;
+    let col;
+    if (arr.length === 1) {
+        row = arr[0];
+        col = arr[0];
+    }
+    else if (arr.length === 2) {
+        row = arr[0];
+        col = arr[1];
+    }
+    else {
+        throw new Error('Expected 1 or 2 parameters. Actual: ' + value);
     }
-    return parseShorthandPositioning(value);
+    return {
+        row,
+        col,
+    };
+}
+function parseBorderColorPositioning(value) {
+    // Colors can be functions with spaces and commas in their arguments
+    // (`rgb(0, 0, 0)`, `color-mix(in srgb, red 35%, blue)`), so only
+    // top-level separators delimit the sides.
+    return positioningFromParts(splitOnTopLevelSpacesAndCommas(value.trim()), value);
 }
 function convertToBackgrounds(value) {
     if (typeof value === 'string') {
@@ -224,6 +179,29 @@ function convertToPaddings(value) {
         ];
     }
 }
+function convertToGaps(value) {
+    let rowGap;
+    let colGap;
+    if (typeof value === 'string' && value !== 'auto') {
+        if (value.length) {
+            const gaps = parseShorthandGap(value);
+            rowGap = Length.parse(gaps.row);
+            colGap = Length.parse(gaps.col);
+        }
+        else {
+            rowGap = 0;
+            colGap = 0;
+        }
+    }
+    else {
+        rowGap = value;
+        colGap = value;
+    }
+    return [
+        [rowGapProperty, rowGap],
+        [columnGapProperty, colGap],
+    ];
+}
 function convertToTransform(value) {
     if (value === unsetValue) {
         value = 'none';
@@ -243,7 +221,7 @@ export const minWidthProperty = new CssProperty({
     name: 'minWidth',
     cssName: 'min-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
@@ -261,7 +239,7 @@ export const minHeightProperty = new CssProperty({
     name: 'minHeight',
     cssName: 'min-height',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
@@ -283,7 +261,7 @@ export const widthProperty = new CssAnimationProperty({
     // TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
     //       on the animation property, so fake it here. x_x
     valueChanged: (target, oldValue, newValue) => {
-        if (global.isIOS) {
+        if (__APPLE__) {
             const view = target.viewRef.get();
             if (view) {
                 view.requestLayout();
@@ -301,7 +279,7 @@ export const heightProperty = new CssAnimationProperty({
     // TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
     //       on the animation property, so fake it here. -_-
     valueChanged: (target, oldValue, newValue) => {
-        if (global.isIOS) {
+        if (__APPLE__) {
             const view = target.viewRef.get();
             if (view) {
                 view.requestLayout();
@@ -311,6 +289,30 @@ export const heightProperty = new CssAnimationProperty({
     valueConverter: PercentLength.parse,
 });
 heightProperty.register(Style);
+export const maxWidthProperty = new CssProperty({
+    name: 'maxWidth',
+    cssName: 'max-width',
+    // 'auto' means unconstrained (no maximum).
+    defaultValue: 'auto',
+    affectsLayout: global.isIOS,
+    equalityComparer: Length.equals,
+    // The effective pixel value is resolved at measure time in
+    // View._updateEffectiveLayoutValues (percent needs the parent size), so we
+    // only need to trigger a relayout here. On iOS that is done via affectsLayout;
+    // on Android the native setNative handler applies it and re-measures.
+    valueConverter: PercentLength.parse,
+});
+maxWidthProperty.register(Style);
+export const maxHeightProperty = new CssProperty({
+    name: 'maxHeight',
+    cssName: 'max-height',
+    // 'auto' means unconstrained (no maximum).
+    defaultValue: 'auto',
+    affectsLayout: global.isIOS,
+    equalityComparer: Length.equals,
+    valueConverter: PercentLength.parse,
+});
+maxHeightProperty.register(Style);
 const marginProperty = new ShorthandProperty({
     name: 'margin',
     cssName: 'margin',
@@ -327,7 +329,7 @@ export const marginLeftProperty = new CssProperty({
     name: 'marginLeft',
     cssName: 'margin-left',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueConverter: PercentLength.parse,
 });
@@ -336,7 +338,7 @@ export const marginRightProperty = new CssProperty({
     name: 'marginRight',
     cssName: 'margin-right',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueConverter: PercentLength.parse,
 });
@@ -345,7 +347,7 @@ export const marginTopProperty = new CssProperty({
     name: 'marginTop',
     cssName: 'margin-top',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueConverter: PercentLength.parse,
 });
@@ -354,11 +356,16 @@ export const marginBottomProperty = new CssProperty({
     name: 'marginBottom',
     cssName: 'margin-bottom',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueConverter: PercentLength.parse,
 });
 marginBottomProperty.register(Style);
+export const paddingInternalProperty = new CssProperty({
+    name: 'paddingInternal',
+    cssName: '_paddingInternal',
+});
+paddingInternalProperty.register(Style);
 const paddingProperty = new ShorthandProperty({
     name: 'padding',
     cssName: 'padding',
@@ -375,12 +382,13 @@ export const paddingLeftProperty = new CssProperty({
     name: 'paddingLeft',
     cssName: 'padding-left',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
         if (view) {
-            view.effectivePaddingLeft = Length.toDevicePixels(newValue, 0);
+            view.effectivePaddingLeft = paddingLeftProperty.isSet(target) ? Length.toDevicePixels(newValue, 0) : null;
+            target.paddingInternal = view.getEffectivePaddingShorthand();
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
@@ -393,12 +401,13 @@ export const paddingRightProperty = new CssProperty({
     name: 'paddingRight',
     cssName: 'padding-right',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
         if (view) {
-            view.effectivePaddingRight = Length.toDevicePixels(newValue, 0);
+            view.effectivePaddingRight = paddingRightProperty.isSet(target) ? Length.toDevicePixels(newValue, 0) : null;
+            target.paddingInternal = view.getEffectivePaddingShorthand();
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
@@ -411,12 +420,13 @@ export const paddingTopProperty = new CssProperty({
     name: 'paddingTop',
     cssName: 'padding-top',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
         if (view) {
-            view.effectivePaddingTop = Length.toDevicePixels(newValue, 0);
+            view.effectivePaddingTop = paddingTopProperty.isSet(target) ? Length.toDevicePixels(newValue, 0) : null;
+            target.paddingInternal = view.getEffectivePaddingShorthand();
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
@@ -429,12 +439,13 @@ export const paddingBottomProperty = new CssProperty({
     name: 'paddingBottom',
     cssName: 'padding-bottom',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();
         if (view) {
-            view.effectivePaddingBottom = Length.toDevicePixels(newValue, 0);
+            view.effectivePaddingBottom = paddingBottomProperty.isSet(target) ? Length.toDevicePixels(newValue, 0) : null;
+            target.paddingInternal = view.getEffectivePaddingShorthand();
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
@@ -443,11 +454,59 @@ export const paddingBottomProperty = new CssProperty({
     valueConverter: Length.parse,
 });
 paddingBottomProperty.register(Style);
+const gapProperty = new ShorthandProperty({
+    name: 'gap',
+    cssName: 'gap',
+    getter: function () {
+        if (Length.equals(this.rowGap, this.columnGap)) {
+            return this.rowGap;
+        }
+        return `${Length.convertToString(this.rowGap)} ${PercentLength.convertToString(this.columnGap)}`;
+    },
+    converter: convertToGaps,
+});
+gapProperty.register(Style);
+export const rowGapProperty = new CssProperty({
+    name: 'rowGap',
+    cssName: 'row-gap',
+    defaultValue: 0,
+    affectsLayout: global.isIOS,
+    equalityComparer: Length.equals,
+    valueConverter: Length.parse,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
+        if (view) {
+            view.effectiveRowGap = Length.toDevicePixels(newValue, 0);
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+        }
+    },
+});
+rowGapProperty.register(Style);
+export const columnGapProperty = new CssProperty({
+    name: 'columnGap',
+    cssName: 'column-gap',
+    defaultValue: 0,
+    affectsLayout: global.isIOS,
+    equalityComparer: Length.equals,
+    valueConverter: Length.parse,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = target.viewRef.get();
+        if (view) {
+            view.effectiveColumnGap = Length.toDevicePixels(newValue, 0);
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+        }
+    },
+});
+columnGapProperty.register(Style);
 export const horizontalAlignmentProperty = new CssProperty({
     name: 'horizontalAlignment',
     cssName: 'horizontal-align',
     defaultValue: CoreTypes.HorizontalAlignment.stretch,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueConverter: CoreTypes.HorizontalAlignment.parse,
 });
 horizontalAlignmentProperty.register(Style);
@@ -455,7 +514,7 @@ export const verticalAlignmentProperty = new CssProperty({
     name: 'verticalAlignment',
     cssName: 'vertical-align',
     defaultValue: CoreTypes.VerticalAlignmentText.stretch,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueConverter: CoreTypes.VerticalAlignmentText.parse,
 });
 verticalAlignmentProperty.register(Style);
@@ -730,7 +789,7 @@ export const borderTopWidthProperty = new CssProperty({
     name: 'borderTopWidth',
     cssName: 'border-top-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
@@ -753,7 +812,7 @@ export const borderRightWidthProperty = new CssProperty({
     name: 'borderRightWidth',
     cssName: 'border-right-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
@@ -776,7 +835,7 @@ export const borderBottomWidthProperty = new CssProperty({
     name: 'borderBottomWidth',
     cssName: 'border-bottom-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
@@ -799,7 +858,7 @@ export const borderLeftWidthProperty = new CssProperty({
     name: 'borderLeftWidth',
     cssName: 'border-left-width',
     defaultValue: CoreTypes.zeroLength,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     equalityComparer: Length.equals,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
@@ -853,7 +912,7 @@ export const borderTopLeftRadiusProperty = new CssProperty({
     name: 'borderTopLeftRadius',
     cssName: 'border-top-left-radius',
     defaultValue: 0,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
@@ -869,7 +928,7 @@ export const borderTopRightRadiusProperty = new CssProperty({
     name: 'borderTopRightRadius',
     cssName: 'border-top-right-radius',
     defaultValue: 0,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
@@ -885,7 +944,7 @@ export const borderBottomRightRadiusProperty = new CssProperty({
     name: 'borderBottomRightRadius',
     cssName: 'border-bottom-right-radius',
     defaultValue: 0,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
@@ -901,7 +960,7 @@ export const borderBottomLeftRadiusProperty = new CssProperty({
     name: 'borderBottomLeftRadius',
     cssName: 'border-bottom-left-radius',
     defaultValue: 0,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const value = Length.toDevicePixels(newValue, 0);
         if (!isNonNegativeFiniteNumber(value)) {
@@ -913,6 +972,16 @@ export const borderBottomLeftRadiusProperty = new CssProperty({
     equalityComparer: Length.equals,
 });
 borderBottomLeftRadiusProperty.register(Style);
+export const cornerShapeProperty = new CssProperty({
+    name: 'cornerShape',
+    cssName: 'corner-shape',
+    defaultValue: CoreTypes.CornerShape.round,
+    valueConverter: CoreTypes.CornerShape.parse,
+    valueChanged: (target, oldValue, newValue) => {
+        target.backgroundInternal = target.backgroundInternal.withCornerShape(newValue);
+    },
+});
+cornerShapeProperty.register(Style);
 const boxShadowProperty = new CssProperty({
     name: 'boxShadow',
     cssName: 'box-shadow',
@@ -1011,7 +1080,7 @@ fontInternalProperty.register(Style);
 export const fontFamilyProperty = new InheritedCssProperty({
     name: 'fontFamily',
     cssName: 'font-family',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontFamily !== newValue) {
@@ -1031,7 +1100,7 @@ fontScaleInternalProperty.register(Style);
 export const fontSizeProperty = new InheritedCssProperty({
     name: 'fontSize',
     cssName: 'font-size',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         if (target.viewRef['handleFontSize'] === true) {
             return;
@@ -1048,7 +1117,7 @@ fontSizeProperty.register(Style);
 export const fontStyleProperty = new InheritedCssProperty({
     name: 'fontStyle',
     cssName: 'font-style',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     defaultValue: FontStyle.NORMAL,
     valueConverter: FontStyle.parse,
     valueChanged: (target, oldValue, newValue) => {
@@ -1063,7 +1132,7 @@ fontStyleProperty.register(Style);
 export const fontWeightProperty = new InheritedCssProperty({
     name: 'fontWeight',
     cssName: 'font-weight',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     defaultValue: FontWeight.NORMAL,
     valueConverter: FontWeight.parse,
     valueChanged: (target, oldValue, newValue) => {
@@ -1106,7 +1175,7 @@ fontProperty.register(Style);
 export const fontVariationSettingsProperty = new InheritedCssProperty({
     name: 'fontVariationSettings',
     cssName: 'font-variation-settings',
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueChanged: (target, oldValue, newValue) => {
         const currentFont = target.fontInternal || Font.default;
         if (currentFont.fontVariationSettings !== newValue) {
@@ -1123,7 +1192,7 @@ export const visibilityProperty = new CssProperty({
     name: 'visibility',
     cssName: 'visibility',
     defaultValue: CoreTypes.Visibility.visible,
-    affectsLayout: global.isIOS,
+    affectsLayout: __APPLE__,
     valueConverter: CoreTypes.Visibility.parse,
     valueChanged: (target, oldValue, newValue) => {
         const view = target.viewRef.get();