@telia-ace/widget-components-grid 1.0.3 → 1.0.4

package/lib/grid-area.d.ts

@@ -5,6 +5,9 @@ declare type Props = {
         [key: string]: string;
     };
     componentName?: string;
+    context: {
+        [key: string]: any;
+    };
 };
 declare const GridArea: React.FC<Props>;
 export default GridArea;

package/lib/grid-area.js

@@ -37,7 +37,7 @@ var toCSSProps = (0, styled_components_1.css)(templateObject_1 || (templateObjec
     }, '');
 });
 var GridArea = function (_a) {
-    var gridArea = _a.gridArea, areaSettings = _a.areaSettings, componentName = _a.componentName;
+    var gridArea = _a.gridArea, areaSettings = _a.areaSettings, componentName = _a.componentName, context = _a.context;
     var children = (0, widget_ui_1.useChildren)();
     var child = (0, react_1.useMemo)(function () {
         return children.find(function (i) { return i.name === componentName; });
@@ -46,7 +46,7 @@ var GridArea = function (_a) {
         return null;
     }
     return (react_1.default.createElement(StyledGridArea, { "data-grid-area": gridArea, gridArea: gridArea, settings: areaSettings },
-        react_1.default.createElement(widget_types_grid_1.Component, { key: child.id, id: child.id, branch: "default" })));
+        react_1.default.createElement(widget_types_grid_1.Component, { key: child.id, id: child.id, branch: "default", context: context })));
 };
 exports.default = GridArea;
 var StyledGridArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    grid-area: ", ";\n    ", "\n"], ["\n    grid-area: ", ";\n    ", "\n"])), function (p) { return p.gridArea; }, toCSSProps);

package/lib/grid-component.d.ts

@@ -4,8 +4,14 @@ declare type AreaWithChild = {
     areaSettings: {
         [key: string]: string;
     };
+    context: {
+        [key: string]: any;
+    };
 };
 export declare type NestedArea = {
+    context: {
+        [key: string]: any;
+    };
     template: string[];
     areaSettings: {
         [key: string]: string;
@@ -27,6 +33,9 @@ export declare type GridComponentProps = {
         [key: string]: GridAreaProps;
     };
     child: string;
+    context: {
+        [key: string]: any;
+    };
 };
 export declare const GridComponent: (container: Container) => Promise<void>;
 export default GridComponent;

package/lib/grid.js

@@ -9,6 +9,6 @@ var nested_grid_area_1 = __importDefault(require("./nested-grid-area"));
 var Grid = function (_a) {
     var className = _a.className;
     var properties = (0, widget_ui_1.useProperties)();
-    return (react_1.default.createElement(nested_grid_area_1.default, { template: properties.template, areas: properties.areas, gap: properties.gap, areaSettings: properties.areaSettings }));
+    return (react_1.default.createElement(nested_grid_area_1.default, { template: properties.template, areas: properties.areas, gap: properties.gap, areaSettings: properties.areaSettings, context: properties.context }));
 };
 exports.default = Grid;

package/lib/handler.d.ts

@@ -0,0 +1,2 @@
+import { ComponentHandlerOptions, NormalizedComponentReference } from '@telia-ace/widget-core';
+export declare const gridComponentHandler: (childRef: NormalizedComponentReference, options: ComponentHandlerOptions) => void;

package/lib/handler.js

@@ -0,0 +1,107 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridComponentHandler = void 0;
+var widget_core_1 = require("@telia-ace/widget-core");
+var widget_utilities_1 = require("@telia-ace/widget-utilities");
+var gridComponentHandler = function (childRef, options) {
+    var _a, _b, _c, _d;
+    var platform = options.platform, node = options.node, references = options.references, definitions = options.definitions, views = options.views, branch = options.branch;
+    var childDef = definitions[childRef.definitionId];
+    if (process.env.NODE_ENV !== 'production') {
+        if (!childDef) {
+            widget_utilities_1.Logger.error("No definition found for component type '".concat(childRef.definitionId, "'."));
+            return;
+        }
+    }
+    var childNode = platform.createNode(childDef.type);
+    childNode.name = childRef.definitionId;
+    childNode.tags = childDef.tags || [];
+    if (childDef.properties) {
+        childNode.writeProperties(childDef.properties);
+    }
+    if (childDef.context) {
+        childNode.writeContext(childDef.context);
+    }
+    if (childDef.layout) {
+        childNode.writeLayout(childDef.layout);
+    }
+    node.appendChild(childNode, branch);
+    childRef.overrides.forEach(function (override) {
+        var options = { breakpoints: override.breakpoints };
+        if (override.properties) {
+            childNode.writeProperties(override.properties, options);
+        }
+        if (override.context) {
+            childNode.writeContext(override.context, options);
+        }
+        if (override.layout) {
+            childNode.writeLayout(override.layout, options);
+        }
+    });
+    if (((_a = childDef.properties) === null || _a === void 0 ? void 0 : _a.areas) && !!((_b = childDef.properties) === null || _b === void 0 ? void 0 : _b.areas)) {
+        var mergedDefinitons = Object.entries(childDef.properties.areas).reduce(function (acc, _a) {
+            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            if (value.child) {
+                var cssProps = Object.entries(value.areaSettings || {}).reduce(function (acc, _a) {
+                    var _b = __read(_a, 2), key = _b[0], value = _b[1];
+                    acc["css-".concat(key)] = value;
+                    return acc;
+                }, {});
+                acc[key] = {
+                    type: 'area',
+                    context: value.context || {},
+                    children: [value.child],
+                    properties: __assign({ 'css-grid-area': key }, cssProps),
+                };
+            }
+            else {
+                var subgrid = {
+                    type: 'grid',
+                    context: {},
+                    properties: {
+                        areaSettings: {},
+                        areas: value.areas,
+                        context: value.context,
+                        gap: value.gap,
+                        gridArea: value.gridArea,
+                        template: value.template,
+                    },
+                };
+                acc[key] = subgrid;
+            }
+            return acc;
+        }, definitions);
+        (0, widget_core_1.createChildren)(platform, childNode, Object.keys(childDef.properties.areas), mergedDefinitons, views);
+    }
+    else if ((_c = childDef.properties) === null || _c === void 0 ? void 0 : _c.child) {
+        (0, widget_core_1.createChildren)(platform, childNode, [(_d = childDef.properties) === null || _d === void 0 ? void 0 : _d.child], definitions, views);
+    }
+};
+exports.gridComponentHandler = gridComponentHandler;

package/lib/index.d.ts

@@ -1,2 +1,3 @@
 import GridComponent from './grid-component';
+export { gridComponentHandler } from './handler';
 export default GridComponent;

package/lib/index.js

@@ -3,5 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridComponentHandler = void 0;
 var grid_component_1 = __importDefault(require("./grid-component"));
+var handler_1 = require("./handler");
+Object.defineProperty(exports, "gridComponentHandler", { enumerable: true, get: function () { return handler_1.gridComponentHandler; } });
 exports.default = grid_component_1.default;

package/lib/nested-grid-area.js

@@ -42,15 +42,12 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+var widget_types_grid_1 = require("@telia-ace/widget-types-grid");
 var widget_ui_1 = require("@telia-ace/widget-ui");
 var widget_utilities_1 = require("@telia-ace/widget-utilities");
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
-var grid_area_1 = __importDefault(require("./grid-area"));
 var grid_component_1 = require("./grid-component");
 var utils_1 = require("./utils");
 var NestedGridArea = function (props) {
@@ -58,15 +55,20 @@ var NestedGridArea = function (props) {
     var areas = (0, react_1.useMemo)(function () {
         return Object.entries(props.areas).map(function (_a) {
             var _b = __read(_a, 2), key = _b[0], area = _b[1];
+            var componentDef = children.find(function (child) { return child.name === key; });
             if (!(0, grid_component_1.isNestedGrid)(area)) {
                 return {
                     name: key,
+                    componentDef: componentDef,
                     areaSettings: area.areaSettings,
                     child: area.child,
+                    context: area.context,
                 };
             }
             return {
                 name: key,
+                componentDef: componentDef,
+                context: area.context,
                 areaSettings: area.areaSettings,
                 template: area.template,
                 areas: area.areas,
@@ -75,10 +77,10 @@ var NestedGridArea = function (props) {
         });
     }, [props, children]);
     return (react_1.default.createElement(Wrapper, { "data-grid-area": props.gridArea, gridArea: props.gridArea, gap: props.gap, template: props.template, className: (0, widget_utilities_1.appendClassNames)(props.className, 'humany-grid') }, areas.map(function (area) {
-        if ((0, grid_component_1.isNestedGrid)(area)) {
-            return (react_1.default.createElement(NestedGridArea, { gridArea: area.name, key: area.name, gap: area.gap, template: area.template, areas: area.areas, areaSettings: area.areaSettings }));
+        if (!area.componentDef) {
+            return null;
         }
-        return (react_1.default.createElement(grid_area_1.default, { gridArea: area.name, key: area.name, componentName: area.child, areaSettings: area.areaSettings }));
+        return (react_1.default.createElement(widget_types_grid_1.Component, { key: area.componentDef.id, id: area.componentDef.id, branch: "default", context: {} }));
     })));
 };
 exports.default = NestedGridArea;

package/lib-esm/grid-area.d.ts

@@ -5,6 +5,9 @@ declare type Props = {
         [key: string]: string;
     };
     componentName?: string;
+    context: {
+        [key: string]: any;
+    };
 };
 declare const GridArea: React.FC<Props>;
 export default GridArea;

package/lib-esm/grid-area.js

@@ -12,7 +12,7 @@ var toCSSProps = css(templateObject_1 || (templateObject_1 = __makeTemplateObjec
     }, '');
 });
 var GridArea = function (_a) {
-    var gridArea = _a.gridArea, areaSettings = _a.areaSettings, componentName = _a.componentName;
+    var gridArea = _a.gridArea, areaSettings = _a.areaSettings, componentName = _a.componentName, context = _a.context;
     var children = useChildren();
     var child = useMemo(function () {
         return children.find(function (i) { return i.name === componentName; });
@@ -21,7 +21,7 @@ var GridArea = function (_a) {
         return null;
     }
     return (React.createElement(StyledGridArea, { "data-grid-area": gridArea, gridArea: gridArea, settings: areaSettings },
-        React.createElement(Component, { key: child.id, id: child.id, branch: "default" })));
+        React.createElement(Component, { key: child.id, id: child.id, branch: "default", context: context })));
 };
 export default GridArea;
 var StyledGridArea = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    grid-area: ", ";\n    ", "\n"], ["\n    grid-area: ", ";\n    ", "\n"])), function (p) { return p.gridArea; }, toCSSProps);

package/lib-esm/grid-component.d.ts

@@ -4,8 +4,14 @@ declare type AreaWithChild = {
     areaSettings: {
         [key: string]: string;
     };
+    context: {
+        [key: string]: any;
+    };
 };
 export declare type NestedArea = {
+    context: {
+        [key: string]: any;
+    };
     template: string[];
     areaSettings: {
         [key: string]: string;
@@ -27,6 +33,9 @@ export declare type GridComponentProps = {
         [key: string]: GridAreaProps;
     };
     child: string;
+    context: {
+        [key: string]: any;
+    };
 };
 export declare const GridComponent: (container: Container) => Promise<void>;
 export default GridComponent;

package/lib-esm/grid.js

@@ -4,6 +4,6 @@ import NestedGridArea from './nested-grid-area';
 var Grid = function (_a) {
     var className = _a.className;
     var properties = useProperties();
-    return (React.createElement(NestedGridArea, { template: properties.template, areas: properties.areas, gap: properties.gap, areaSettings: properties.areaSettings }));
+    return (React.createElement(NestedGridArea, { template: properties.template, areas: properties.areas, gap: properties.gap, areaSettings: properties.areaSettings, context: properties.context }));
 };
 export default Grid;

package/lib-esm/handler.d.ts

@@ -0,0 +1,2 @@
+import { ComponentHandlerOptions, NormalizedComponentReference } from '@telia-ace/widget-core';
+export declare const gridComponentHandler: (childRef: NormalizedComponentReference, options: ComponentHandlerOptions) => void;

package/lib-esm/handler.js

@@ -0,0 +1,103 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { createChildren, } from '@telia-ace/widget-core';
+import { Logger } from '@telia-ace/widget-utilities';
+export var gridComponentHandler = function (childRef, options) {
+    var _a, _b, _c, _d;
+    var platform = options.platform, node = options.node, references = options.references, definitions = options.definitions, views = options.views, branch = options.branch;
+    var childDef = definitions[childRef.definitionId];
+    if (process.env.NODE_ENV !== 'production') {
+        if (!childDef) {
+            Logger.error("No definition found for component type '".concat(childRef.definitionId, "'."));
+            return;
+        }
+    }
+    var childNode = platform.createNode(childDef.type);
+    childNode.name = childRef.definitionId;
+    childNode.tags = childDef.tags || [];
+    if (childDef.properties) {
+        childNode.writeProperties(childDef.properties);
+    }
+    if (childDef.context) {
+        childNode.writeContext(childDef.context);
+    }
+    if (childDef.layout) {
+        childNode.writeLayout(childDef.layout);
+    }
+    node.appendChild(childNode, branch);
+    childRef.overrides.forEach(function (override) {
+        var options = { breakpoints: override.breakpoints };
+        if (override.properties) {
+            childNode.writeProperties(override.properties, options);
+        }
+        if (override.context) {
+            childNode.writeContext(override.context, options);
+        }
+        if (override.layout) {
+            childNode.writeLayout(override.layout, options);
+        }
+    });
+    if (((_a = childDef.properties) === null || _a === void 0 ? void 0 : _a.areas) && !!((_b = childDef.properties) === null || _b === void 0 ? void 0 : _b.areas)) {
+        var mergedDefinitons = Object.entries(childDef.properties.areas).reduce(function (acc, _a) {
+            var _b = __read(_a, 2), key = _b[0], value = _b[1];
+            if (value.child) {
+                var cssProps = Object.entries(value.areaSettings || {}).reduce(function (acc, _a) {
+                    var _b = __read(_a, 2), key = _b[0], value = _b[1];
+                    acc["css-".concat(key)] = value;
+                    return acc;
+                }, {});
+                acc[key] = {
+                    type: 'area',
+                    context: value.context || {},
+                    children: [value.child],
+                    properties: __assign({ 'css-grid-area': key }, cssProps),
+                };
+            }
+            else {
+                var subgrid = {
+                    type: 'grid',
+                    context: {},
+                    properties: {
+                        areaSettings: {},
+                        areas: value.areas,
+                        context: value.context,
+                        gap: value.gap,
+                        gridArea: value.gridArea,
+                        template: value.template,
+                    },
+                };
+                acc[key] = subgrid;
+            }
+            return acc;
+        }, definitions);
+        createChildren(platform, childNode, Object.keys(childDef.properties.areas), mergedDefinitons, views);
+    }
+    else if ((_c = childDef.properties) === null || _c === void 0 ? void 0 : _c.child) {
+        createChildren(platform, childNode, [(_d = childDef.properties) === null || _d === void 0 ? void 0 : _d.child], definitions, views);
+    }
+};

package/lib-esm/index.d.ts

@@ -1,2 +1,3 @@
 import GridComponent from './grid-component';
+export { gridComponentHandler } from './handler';
 export default GridComponent;

package/lib-esm/index.js

@@ -1,2 +1,3 @@
 import GridComponent from './grid-component';
+export { gridComponentHandler } from './handler';
 export default GridComponent;

package/lib-esm/nested-grid-area.js

@@ -18,11 +18,11 @@ var __read = (this && this.__read) || function (o, n) {
     }
     return ar;
 };
+import { Component } from '@telia-ace/widget-types-grid';
 import { useChildren } from '@telia-ace/widget-ui';
 import { appendClassNames } from '@telia-ace/widget-utilities';
 import React, { useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import GridArea from './grid-area';
 import { isNestedGrid } from './grid-component';
 import { generateGridTemplateAreasValue } from './utils';
 var NestedGridArea = function (props) {
@@ -30,15 +30,20 @@ var NestedGridArea = function (props) {
     var areas = useMemo(function () {
         return Object.entries(props.areas).map(function (_a) {
             var _b = __read(_a, 2), key = _b[0], area = _b[1];
+            var componentDef = children.find(function (child) { return child.name === key; });
             if (!isNestedGrid(area)) {
                 return {
                     name: key,
+                    componentDef: componentDef,
                     areaSettings: area.areaSettings,
                     child: area.child,
+                    context: area.context,
                 };
             }
             return {
                 name: key,
+                componentDef: componentDef,
+                context: area.context,
                 areaSettings: area.areaSettings,
                 template: area.template,
                 areas: area.areas,
@@ -47,10 +52,10 @@ var NestedGridArea = function (props) {
         });
     }, [props, children]);
     return (React.createElement(Wrapper, { "data-grid-area": props.gridArea, gridArea: props.gridArea, gap: props.gap, template: props.template, className: appendClassNames(props.className, 'humany-grid') }, areas.map(function (area) {
-        if (isNestedGrid(area)) {
-            return (React.createElement(NestedGridArea, { gridArea: area.name, key: area.name, gap: area.gap, template: area.template, areas: area.areas, areaSettings: area.areaSettings }));
+        if (!area.componentDef) {
+            return null;
         }
-        return (React.createElement(GridArea, { gridArea: area.name, key: area.name, componentName: area.child, areaSettings: area.areaSettings }));
+        return (React.createElement(Component, { key: area.componentDef.id, id: area.componentDef.id, branch: "default", context: {} }));
     })));
 };
 export default NestedGridArea;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@telia-ace/widget-components-grid",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "Grid component for ACE Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
@@ -25,10 +25,13 @@
     "sideEffects": false,
     "typings": "lib/index.d.ts",
     "dependencies": {
-        "@telia-ace/widget-types-grid": "^1.0.3",
-        "@telia-ace/widget-ui": "^1.0.3",
+        "@telia-ace/widget-core": "^1.0.4",
+        "@telia-ace/widget-types-grid": "^1.0.6",
+        "@telia-ace/widget-ui": "^1.0.6",
         "@telia-ace/widget-utilities": "^1.0.1",
-        "@webprovisions/platform": "^1.1.2",
+        "@webprovisions/platform": "^1.1.2"
+    },
+    "peerDependencies": {
         "react": "^16.8.0",
         "react-dom": "^16.8.0",
         "styled-components": "^4.3.2"
@@ -38,5 +41,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "5440857927191297b8094bdfef392876e9cf0cef"
+    "gitHead": "993320b5ff4692cf9cb896b0011acf5f42734a74"
 }