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

package/dist/grid.js

@@ -0,0 +1,82 @@
+import { useChildren, useProperties } from "@telia-ace/widget-ui";
+import React, { useMemo } from "react";
+import { Component } from "@telia-ace/widget-types-grid";
+import { appendClassNames } from "@telia-ace/widget-utilities";
+import styled, { css } from "styled-components";
+import { i as isNestedGrid } from "./index2.js";
+import "@telia-ace/widget-core";
+const generateGridTemplateAreasValue = (template) => {
+  const rows = template.map((_) => "min-content").join(" ");
+  const columns = template[0].split(" ").map((_) => "1fr").join(" ");
+  const areas = template.map((value) => `'${value}'`).join(" ");
+  return css`
+        grid-template-columns: ${columns};
+        grid-template-rows: ${rows};
+        grid-template-areas: ${areas};
+    `;
+};
+const NestedGridArea = (props) => {
+  const children = useChildren();
+  const areas = useMemo(() => {
+    return Object.entries(props.areas).map(([key, area]) => {
+      const componentDef = children.find((child) => child.name === key);
+      if (!isNestedGrid(area)) {
+        return {
+          name: key,
+          componentDef,
+          areaSettings: area.areaSettings,
+          child: area.child,
+          context: area.context
+        };
+      }
+      return {
+        name: key,
+        componentDef,
+        context: area.context,
+        areaSettings: area.areaSettings,
+        template: area.template,
+        areas: area.areas,
+        gap: area.gap
+      };
+    });
+  }, [props, children]);
+  return /* @__PURE__ */ 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((area) => {
+    if (!area.componentDef) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(Component, {
+      key: area.componentDef.id,
+      id: area.componentDef.id,
+      branch: "default",
+      context: {}
+    });
+  }));
+};
+const Wrapper = styled.div`
+    display: grid;
+    ${(p) => p.gridArea && css`
+            grid-area: ${p.gridArea};
+        `}
+    ${(p) => generateGridTemplateAreasValue(p.template)}
+  ${(p) => p.gap && css`
+            grid-gap: ${p.gap}rem;
+        `}
+`;
+const Grid = ({ className }) => {
+  const properties = useProperties();
+  return /* @__PURE__ */ React.createElement(NestedGridArea, {
+    template: properties.template,
+    areas: properties.areas,
+    gap: properties.gap,
+    areaSettings: properties.areaSettings,
+    context: properties.context
+  });
+};
+export { Grid as default };
+//# sourceMappingURL=grid.js.map

package/dist/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sources":["../src/utils.ts","../src/nested-grid-area.tsx","../src/grid.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\n\r\nexport const generateGridTemplateAreasValue = (template: string[]) => {\r\n    const rows = template.map((_) => 'min-content').join(' ');\r\n    const columns = template[0]\r\n        .split(' ')\r\n        .map((_) => '1fr')\r\n        .join(' ');\r\n    const areas = template.map((value) => `'${value}'`).join(' ');\r\n\r\n    return css`\r\n        grid-template-columns: ${columns};\r\n        grid-template-rows: ${rows};\r\n        grid-template-areas: ${areas};\r\n    `;\r\n};\r\n","import { Component } from '@telia-ace/widget-types-grid';\r\nimport { useChildren } from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { useMemo } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { GridAreaProps, isNestedGrid, NestedArea } from './grid-component';\r\nimport { generateGridTemplateAreasValue } from './utils';\r\n\r\ntype Props = {\r\n    className?: string;\r\n    gridArea?: string;\r\n} & NestedArea;\r\nconst NestedGridArea: React.FC<Props> = (props) => {\r\n    const children = useChildren();\r\n\r\n    const areas = useMemo<(GridAreaProps & { name: string })[]>(() => {\r\n        return Object.entries(props.areas).map(([key, area]) => {\r\n            const componentDef = children.find((child) => child.name === key);\r\n\r\n            if (!isNestedGrid(area)) {\r\n                return {\r\n                    name: key,\r\n                    componentDef,\r\n                    areaSettings: area.areaSettings,\r\n                    child: area.child,\r\n                    context: area.context,\r\n                };\r\n            }\r\n            return {\r\n                name: key,\r\n                componentDef,\r\n                context: area.context,\r\n                areaSettings: area.areaSettings,\r\n                template: area.template,\r\n                areas: area.areas,\r\n                gap: area.gap,\r\n            };\r\n        });\r\n    }, [props, children]);\r\n\r\n    return (\r\n        <Wrapper\r\n            data-grid-area={props.gridArea}\r\n            gridArea={props.gridArea}\r\n            gap={props.gap}\r\n            template={props.template}\r\n            className={appendClassNames(props.className, 'humany-grid')}\r\n        >\r\n            {areas.map((area) => {\r\n                if (!(area as any).componentDef) {\r\n                    return null;\r\n                }\r\n                return (\r\n                    <Component\r\n                        key={(area as any).componentDef.id}\r\n                        id={(area as any).componentDef.id}\r\n                        branch=\"default\"\r\n                        context={{}}\r\n                    />\r\n                );\r\n            })}\r\n        </Wrapper>\r\n    );\r\n};\r\n\r\nexport default NestedGridArea;\r\n\r\nconst Wrapper = styled.div<{\r\n    template: string[];\r\n    gridArea?: string;\r\n    gap?: number;\r\n}>`\r\n    display: grid;\r\n    ${(p) =>\r\n        p.gridArea &&\r\n        css`\r\n            grid-area: ${p.gridArea};\r\n        `}\r\n    ${(p) => generateGridTemplateAreasValue(p.template)}\r\n  ${(p) =>\r\n        p.gap &&\r\n        css`\r\n            grid-gap: ${p.gap}rem;\r\n        `}\r\n`;\r\n","import { useProperties } from '@telia-ace/widget-ui';\r\nimport React from 'react';\r\nimport { GridComponentProps } from './grid-component';\r\nimport NestedGridArea from './nested-grid-area';\r\n\r\ntype Props = { className?: string };\r\nconst Grid: React.FC<Props> = ({ className }) => {\r\n    const properties = useProperties<GridComponentProps>();\r\n    return (\r\n        <NestedGridArea\r\n            template={properties.template}\r\n            areas={properties.areas}\r\n            gap={properties.gap}\r\n            areaSettings={properties.areaSettings}\r\n            context={properties.context}\r\n        />\r\n    );\r\n};\r\n\r\nexport default Grid;\r\n"],"names":[],"mappings":";;;;;;;AAEa,MAAA,iCAAiC,CAAC,aAAuB;AAC5D,QAAA,OAAO,SAAS,IAAI,CAAC,MAAM,aAAa,EAAE,KAAK,GAAG;AACxD,QAAM,UAAU,SAAS,GACpB,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,KAAK,EAChB,KAAK,GAAG;AACP,QAAA,QAAQ,SAAS,IAAI,CAAC,UAAU,IAAI,QAAQ,EAAE,KAAK,GAAG;AAErD,SAAA;AAAA,iCACsB;AAAA,8BACH;AAAA,+BACC;AAAA;AAE/B;ACHA,MAAM,iBAAkC,CAAC,UAAU;AAC/C,QAAM,WAAW;AAEX,QAAA,QAAQ,QAA8C,MAAM;AACvD,WAAA,OAAO,QAAQ,MAAM,KAAK,EAAE,IAAI,CAAC,CAAC,KAAK,UAAU;AACpD,YAAM,eAAe,SAAS,KAAK,CAAC,UAAU,MAAM,SAAS,GAAG;AAE5D,UAAA,CAAC,aAAa,IAAI,GAAG;AACd,eAAA;AAAA,UACH,MAAM;AAAA,UACN;AAAA,UACA,cAAc,KAAK;AAAA,UACnB,OAAO,KAAK;AAAA,UACZ,SAAS,KAAK;AAAA,QAAA;AAAA,MAEtB;AACO,aAAA;AAAA,QACH,MAAM;AAAA,QACN;AAAA,QACA,SAAS,KAAK;AAAA,QACd,cAAc,KAAK;AAAA,QACnB,UAAU,KAAK;AAAA,QACf,OAAO,KAAK;AAAA,QACZ,KAAK,KAAK;AAAA,MAAA;AAAA,IACd,CACH;AAAA,EAAA,GACF,CAAC,OAAO,QAAQ,CAAC;AAEpB,SACK,sBAAA,cAAA,SAAA;AAAA,IACG,kBAAgB,MAAM;AAAA,IACtB,UAAU,MAAM;AAAA,IAChB,KAAK,MAAM;AAAA,IACX,UAAU,MAAM;AAAA,IAChB,WAAW,iBAAiB,MAAM,WAAW,aAAa;AAAA,EAAA,GAEzD,MAAM,IAAI,CAAC,SAAS;AACb,QAAA,CAAE,KAAa,cAAc;AACtB,aAAA;AAAA,IACX;AACA,WACK,sBAAA,cAAA,WAAA;AAAA,MACG,KAAM,KAAa,aAAa;AAAA,MAChC,IAAK,KAAa,aAAa;AAAA,MAC/B,QAAO;AAAA,MACP,SAAS,CAAC;AAAA,IAAA,CACd;AAAA,EAEP,CAAA,CACL;AAER;AAIA,MAAM,UAAU,OAAO;AAAA;AAAA,MAMjB,CAAC,MACC,EAAE,YACF;AAAA,yBACiB,EAAE;AAAA;AAAA,MAErB,CAAC,MAAM,+BAA+B,EAAE,QAAQ;AAAA,IAClD,CAAC,MACG,EAAE,OACF;AAAA,wBACgB,EAAE;AAAA;AAAA;AC5EpB,MAAA,OAAwB,CAAC,EAAE,gBAAgB;AAC7C,QAAM,aAAa;AACnB,SACK,sBAAA,cAAA,gBAAA;AAAA,IACG,UAAU,WAAW;AAAA,IACrB,OAAO,WAAW;AAAA,IAClB,KAAK,WAAW;AAAA,IAChB,cAAc,WAAW;AAAA,IACzB,SAAS,WAAW;AAAA,EAAA,CACxB;AAER;;"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { G as default, g as gridComponentHandler } from "./index2.js";
+import "@telia-ace/widget-ui";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-utilities";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/index2.js

@@ -0,0 +1,94 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { createReactComponent } from "@telia-ace/widget-ui";
+import { createChildren } from "@telia-ace/widget-core";
+import "@telia-ace/widget-utilities";
+const isNestedGrid = (area) => {
+  return !!area.template;
+};
+const GridComponent = (container) => {
+  return createReactComponent(container, "grid", import("./grid.js"), (component) => {
+  });
+};
+const gridComponentHandler = (childRef, options) => {
+  var _a, _b, _c, _d;
+  const { platform, node, references, definitions, views, branch } = options;
+  const childDef = definitions[childRef.definitionId];
+  const 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((override) => {
+    const options2 = { breakpoints: override.breakpoints };
+    if (override.properties) {
+      childNode.writeProperties(override.properties, options2);
+    }
+    if (override.context) {
+      childNode.writeContext(override.context, options2);
+    }
+    if (override.layout) {
+      childNode.writeLayout(override.layout, options2);
+    }
+  });
+  if (((_a = childDef.properties) == null ? void 0 : _a.areas) && !!((_b = childDef.properties) == null ? void 0 : _b.areas)) {
+    const mergedDefinitons = Object.entries(childDef.properties.areas).reduce((acc, [key, value]) => {
+      if (value.child) {
+        const cssProps = Object.entries(value.areaSettings || {}).reduce((acc2, [key2, value2]) => {
+          acc2[`css-${key2}`] = value2;
+          return acc2;
+        }, {});
+        acc[key] = {
+          type: "area",
+          context: value.context || {},
+          children: [value.child],
+          properties: __spreadValues({
+            "css-grid-area": key
+          }, cssProps)
+        };
+      } else {
+        const 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 ? void 0 : _c.child) {
+    createChildren(platform, childNode, [(_d = childDef.properties) == null ? void 0 : _d.child], definitions, views);
+  }
+};
+export { GridComponent as G, gridComponentHandler as g, isNestedGrid as i };
+//# sourceMappingURL=index2.js.map

package/dist/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","sources":["../src/grid-component.ts","../src/handler.ts"],"sourcesContent":["import { createReactComponent } from '@telia-ace/widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\ntype AreaWithChild = {\r\n    child: string;\r\n    areaSettings: { [key: string]: string };\r\n    context: { [key: string]: any };\r\n};\r\n\r\nexport type NestedArea = {\r\n    context: { [key: string]: any };\r\n    template: string[];\r\n    areaSettings: { [key: string]: string };\r\n    gap: number;\r\n    areas: {\r\n        [key: string]: GridAreaProps;\r\n    };\r\n};\r\n\r\nexport type GridAreaProps = NestedArea | AreaWithChild;\r\n\r\nexport const isNestedGrid = (area: GridAreaProps): area is NestedArea => {\r\n    return !!(area as NestedArea).template;\r\n};\r\n\r\nexport type GridComponentProps = {\r\n    gap: number;\r\n    template: string[];\r\n    areaSettings: { [key: string]: string };\r\n    areas: {\r\n        [key: string]: GridAreaProps;\r\n    };\r\n    child: string;\r\n    context: { [key: string]: any };\r\n};\r\n\r\nexport const GridComponent = (container: Container) => {\r\n    return createReactComponent(container, 'grid', import('./grid'), (component) => {});\r\n};\r\n\r\nexport default GridComponent;\r\n","import {\r\n    ComponentHandlerOptions,\r\n    createChildren,\r\n    NormalizedComponentReference,\r\n} from '@telia-ace/widget-core';\r\nimport { Logger } from '@telia-ace/widget-utilities';\r\n\r\nexport const gridComponentHandler = (\r\n    childRef: NormalizedComponentReference,\r\n    options: ComponentHandlerOptions\r\n) => {\r\n    const { platform, node, references, definitions, views, branch } = options;\r\n\r\n    const childDef = definitions[childRef.definitionId];\r\n    if (process.env.NODE_ENV !== 'production') {\r\n        if (!childDef) {\r\n            Logger.error(`No definition found for component type '${childRef.definitionId}'.`);\r\n            return;\r\n        }\r\n    }\r\n    const childNode = platform.createNode(childDef.type);\r\n    childNode.name = childRef.definitionId;\r\n    childNode.tags = childDef.tags || [];\r\n    if (childDef.properties) {\r\n        childNode.writeProperties(childDef.properties);\r\n    }\r\n    if (childDef.context) {\r\n        childNode.writeContext(childDef.context);\r\n    }\r\n    if (childDef.layout) {\r\n        childNode.writeLayout(childDef.layout);\r\n    }\r\n    node.appendChild(childNode, branch);\r\n\r\n    childRef.overrides.forEach((override) => {\r\n        const options = { breakpoints: override.breakpoints };\r\n        if (override.properties) {\r\n            childNode.writeProperties(override.properties, options);\r\n        }\r\n        if (override.context) {\r\n            childNode.writeContext(override.context, options);\r\n        }\r\n        if (override.layout) {\r\n            childNode.writeLayout(override.layout, options);\r\n        }\r\n    });\r\n\r\n    if (childDef.properties?.areas && !!childDef.properties?.areas) {\r\n        const mergedDefinitons: any = Object.entries(childDef.properties.areas).reduce<any>(\r\n            (acc, [key, value]: any) => {\r\n                if (value.child) {\r\n                    const cssProps = Object.entries<string>(value.areaSettings || {}).reduce<{\r\n                        [key: string]: string;\r\n                    }>((acc, [key, value]) => {\r\n                        acc[`css-${key}`] = value;\r\n\r\n                        return acc;\r\n                    }, {});\r\n                    acc[key] = {\r\n                        type: 'area',\r\n                        context: value.context || {},\r\n                        children: [value.child],\r\n                        properties: {\r\n                            'css-grid-area': key,\r\n                            ...cssProps,\r\n                        },\r\n                    };\r\n                } else {\r\n                    const subgrid = {\r\n                        type: 'grid',\r\n                        context: {},\r\n                        properties: {\r\n                            areaSettings: {},\r\n                            areas: value.areas,\r\n                            context: value.context,\r\n                            gap: value.gap,\r\n                            gridArea: value.gridArea,\r\n                            template: value.template,\r\n                        },\r\n                    };\r\n                    acc[key] = subgrid;\r\n                }\r\n                return acc;\r\n            },\r\n            definitions\r\n        );\r\n        createChildren(\r\n            platform,\r\n            childNode,\r\n            Object.keys(childDef.properties.areas),\r\n            mergedDefinitons,\r\n            views\r\n        );\r\n    } else if (childDef.properties?.child) {\r\n        createChildren(platform, childNode, [childDef.properties?.child], definitions, views);\r\n    }\r\n};\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAqBa,MAAA,eAAe,CAAC,SAA4C;AAC9D,SAAA,CAAC,CAAE,KAAoB;AAClC;AAaa,MAAA,gBAAgB,CAAC,cAAyB;AACnD,SAAO,qBAAqB,WAAW,QAAQ,OAAO,cAAW,CAAC,cAAc;AAAA,EAAA,CAAE;AACtF;AC/Ba,MAAA,uBAAuB,CAChC,UACA,YACC;;AACD,QAAM,EAAE,UAAU,MAAM,YAAY,aAAa,OAAO,WAAW;AAE7D,QAAA,WAAW,YAAY,SAAS;AAOtC,QAAM,YAAY,SAAS,WAAW,SAAS,IAAI;AACnD,YAAU,OAAO,SAAS;AAChB,YAAA,OAAO,SAAS,QAAQ,CAAA;AAClC,MAAI,SAAS,YAAY;AACX,cAAA,gBAAgB,SAAS,UAAU;AAAA,EACjD;AACA,MAAI,SAAS,SAAS;AACR,cAAA,aAAa,SAAS,OAAO;AAAA,EAC3C;AACA,MAAI,SAAS,QAAQ;AACP,cAAA,YAAY,SAAS,MAAM;AAAA,EACzC;AACK,OAAA,YAAY,WAAW,MAAM;AAEzB,WAAA,UAAU,QAAQ,CAAC,aAAa;AACrC,UAAM,WAAU,EAAE,aAAa,SAAS,YAAY;AACpD,QAAI,SAAS,YAAY;AACX,gBAAA,gBAAgB,SAAS,YAAY,QAAO;AAAA,IAC1D;AACA,QAAI,SAAS,SAAS;AACR,gBAAA,aAAa,SAAS,SAAS,QAAO;AAAA,IACpD;AACA,QAAI,SAAS,QAAQ;AACP,gBAAA,YAAY,SAAS,QAAQ,QAAO;AAAA,IAClD;AAAA,EAAA,CACH;AAED,MAAI,gBAAS,eAAT,mBAAqB,UAAS,CAAC,CAAC,gBAAS,eAAT,mBAAqB,QAAO;AAC5D,UAAM,mBAAwB,OAAO,QAAQ,SAAS,WAAW,KAAK,EAAE,OACpE,CAAC,KAAK,CAAC,KAAK,WAAgB;AACxB,UAAI,MAAM,OAAO;AACb,cAAM,WAAW,OAAO,QAAgB,MAAM,gBAAgB,CAAA,CAAE,EAAE,OAE/D,CAAC,MAAK,CAAC,MAAK,YAAW;AACtB,eAAI,OAAO,UAAS;AAEb,iBAAA;AAAA,QACX,GAAG,CAAE,CAAA;AACL,YAAI,OAAO;AAAA,UACP,MAAM;AAAA,UACN,SAAS,MAAM,WAAW,CAAC;AAAA,UAC3B,UAAU,CAAC,MAAM,KAAK;AAAA,UACtB,YAAY;AAAA,YACR,iBAAiB;AAAA,aACd;AAAA,QACP;AAAA,MACJ,OACG;AACH,cAAM,UAAU;AAAA,UACZ,MAAM;AAAA,UACN,SAAS,CAAC;AAAA,UACV,YAAY;AAAA,YACR,cAAc,CAAC;AAAA,YACf,OAAO,MAAM;AAAA,YACb,SAAS,MAAM;AAAA,YACf,KAAK,MAAM;AAAA,YACX,UAAU,MAAM;AAAA,YAChB,UAAU,MAAM;AAAA,UACpB;AAAA,QAAA;AAEJ,YAAI,OAAO;AAAA,MACf;AACO,aAAA;AAAA,OAEX,WACJ;AAEI,mBAAA,UACA,WACA,OAAO,KAAK,SAAS,WAAW,KAAK,GACrC,kBACA,KACJ;AAAA,EAAA,WACO,eAAS,eAAT,mBAAqB,OAAO;AACpB,mBAAA,UAAU,WAAW,CAAC,eAAS,eAAT,mBAAqB,KAAK,GAAG,aAAa,KAAK;AAAA,EACxF;AACJ;;"}

package/package.json

@@ -1,33 +1,32 @@
 {
     "name": "@telia-ace/widget-components-grid",
-    "version": "1.0.4",
+    "version": "1.0.7",
     "description": "Grid component for ACE Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "main": "lib/index.js",
-    "module": "lib-esm/index.js",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
         "README.md",
-        "lib/",
-        "lib-esm/"
+        "dist/"
     ],
     "publishConfig": {
         "access": "public"
     },
     "scripts": {
-        "clean": "cleandir lib && cleandir lib-esm",
-        "compile": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json"
+        "clean": "rimraf ./dist",
+        "precompile": "tsc -emitDeclarationOnly",
+        "compile": "vite build"
     },
     "sideEffects": false,
-    "typings": "lib/index.d.ts",
     "dependencies": {
-        "@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-core": "^1.0.5",
+        "@telia-ace/widget-types-grid": "^1.0.9",
+        "@telia-ace/widget-ui": "^1.0.9",
         "@telia-ace/widget-utilities": "^1.0.1",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -41,5 +40,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "993320b5ff4692cf9cb896b0011acf5f42734a74"
+    "gitHead": "cbf3ac8268821668619bd7a3d0fb60bb13d9fb5b"
 }

package/lib/grid-area.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-declare type Props = {
-    gridArea: string;
-    areaSettings: {
-        [key: string]: string;
-    };
-    componentName?: string;
-    context: {
-        [key: string]: any;
-    };
-};
-declare const GridArea: React.FC<Props>;
-export default GridArea;

package/lib/grid-area.js

@@ -1,53 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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 react_1 = __importStar(require("react"));
-var styled_components_1 = __importStar(require("styled-components"));
-var toCSSProps = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (p) {
-    return Object.entries(p.settings).reduce(function (acc, entry) {
-        return acc + "".concat(entry[0], ": ").concat(entry[1], ";");
-    }, '');
-});
-var GridArea = function (_a) {
-    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; });
-    }, [children]);
-    if (!child) {
-        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", 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);
-var templateObject_1, templateObject_2;

package/lib/grid-component.d.ts

@@ -1,41 +0,0 @@
-import { Container } from '@webprovisions/platform';
-declare type AreaWithChild = {
-    child: string;
-    areaSettings: {
-        [key: string]: string;
-    };
-    context: {
-        [key: string]: any;
-    };
-};
-export declare type NestedArea = {
-    context: {
-        [key: string]: any;
-    };
-    template: string[];
-    areaSettings: {
-        [key: string]: string;
-    };
-    gap: number;
-    areas: {
-        [key: string]: GridAreaProps;
-    };
-};
-export declare type GridAreaProps = NestedArea | AreaWithChild;
-export declare const isNestedGrid: (area: GridAreaProps) => area is NestedArea;
-export declare type GridComponentProps = {
-    gap: number;
-    template: string[];
-    areaSettings: {
-        [key: string]: string;
-    };
-    areas: {
-        [key: string]: GridAreaProps;
-    };
-    child: string;
-    context: {
-        [key: string]: any;
-    };
-};
-export declare const GridComponent: (container: Container) => Promise<void>;
-export default GridComponent;

package/lib/grid-component.js

@@ -1,36 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GridComponent = exports.isNestedGrid = void 0;
-var widget_ui_1 = require("@telia-ace/widget-ui");
-var isNestedGrid = function (area) {
-    return !!area.template;
-};
-exports.isNestedGrid = isNestedGrid;
-var GridComponent = function (container) {
-    return (0, widget_ui_1.createReactComponent)(container, 'grid', Promise.resolve().then(function () { return __importStar(require('./grid')); }), function (component) { });
-};
-exports.GridComponent = GridComponent;
-exports.default = exports.GridComponent;

package/lib/grid.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-declare type Props = {
-    className?: string;
-};
-declare const Grid: React.FC<Props>;
-export default Grid;

package/lib/grid.js

@@ -1,14 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var widget_ui_1 = require("@telia-ace/widget-ui");
-var react_1 = __importDefault(require("react"));
-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, context: properties.context }));
-};
-exports.default = Grid;

package/lib/handler.d.ts

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

package/lib/handler.js

@@ -1,107 +0,0 @@
-"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,3 +0,0 @@
-import GridComponent from './grid-component';
-export { gridComponentHandler } from './handler';
-export default GridComponent;

package/lib/index.js

@@ -1,10 +0,0 @@
-"use strict";
-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.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { NestedArea } from './grid-component';
-declare type Props = {
-    className?: string;
-    gridArea?: string;
-} & NestedArea;
-declare const NestedGridArea: React.FC<Props>;
-export default NestedGridArea;

package/lib/nested-grid-area.js

@@ -1,92 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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 });
-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_component_1 = require("./grid-component");
-var utils_1 = require("./utils");
-var NestedGridArea = function (props) {
-    var children = (0, widget_ui_1.useChildren)();
-    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,
-                gap: area.gap,
-            };
-        });
-    }, [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 (!area.componentDef) {
-            return null;
-        }
-        return (react_1.default.createElement(widget_types_grid_1.Component, { key: area.componentDef.id, id: area.componentDef.id, branch: "default", context: {} }));
-    })));
-};
-exports.default = NestedGridArea;
-var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    ", "\n    ", "\n  ", "\n"], ["\n    display: grid;\n    ", "\n    ", "\n  ", "\n"])), function (p) {
-    return p.gridArea && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: ", ";\n        "], ["\n            grid-area: ", ";\n        "])), p.gridArea);
-}, function (p) { return (0, utils_1.generateGridTemplateAreasValue)(p.template); }, function (p) {
-    return p.gap && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            grid-gap: ", "rem;\n        "], ["\n            grid-gap: ", "rem;\n        "])), p.gap);
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/lib/utils.d.ts

@@ -1 +0,0 @@
-export declare const generateGridTemplateAreasValue: (template: string[]) => import("styled-components").FlattenSimpleInterpolation;

package/lib/utils.js

@@ -1,19 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateGridTemplateAreasValue = void 0;
-var styled_components_1 = require("styled-components");
-var generateGridTemplateAreasValue = function (template) {
-    var rows = template.map(function (_) { return 'min-content'; }).join(' ');
-    var columns = template[0]
-        .split(' ')
-        .map(function (_) { return '1fr'; })
-        .join(' ');
-    var areas = template.map(function (value) { return "'".concat(value, "'"); }).join(' ');
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        grid-template-columns: ", ";\n        grid-template-rows: ", ";\n        grid-template-areas: ", ";\n    "], ["\n        grid-template-columns: ", ";\n        grid-template-rows: ", ";\n        grid-template-areas: ", ";\n    "])), columns, rows, areas);
-};
-exports.generateGridTemplateAreasValue = generateGridTemplateAreasValue;
-var templateObject_1;

package/lib-esm/grid-area.js

@@ -1,28 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { Component } from '@telia-ace/widget-types-grid';
-import { useChildren } from '@telia-ace/widget-ui';
-import React, { useMemo } from 'react';
-import styled, { css } from 'styled-components';
-var toCSSProps = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", "\n"], ["\n    ", "\n"])), function (p) {
-    return Object.entries(p.settings).reduce(function (acc, entry) {
-        return acc + "".concat(entry[0], ": ").concat(entry[1], ";");
-    }, '');
-});
-var GridArea = function (_a) {
-    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; });
-    }, [children]);
-    if (!child) {
-        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", 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);
-var templateObject_1, templateObject_2;

package/lib-esm/grid-component.js

@@ -1,8 +0,0 @@
-import { createReactComponent } from '@telia-ace/widget-ui';
-export var isNestedGrid = function (area) {
-    return !!area.template;
-};
-export var GridComponent = function (container) {
-    return createReactComponent(container, 'grid', import('./grid'), function (component) { });
-};
-export default GridComponent;

package/lib-esm/grid.js

@@ -1,9 +0,0 @@
-import { useProperties } from '@telia-ace/widget-ui';
-import React from 'react';
-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, context: properties.context }));
-};
-export default Grid;

package/lib-esm/handler.js

@@ -1,103 +0,0 @@
-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.js

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

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

@@ -1,67 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 { 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 { isNestedGrid } from './grid-component';
-import { generateGridTemplateAreasValue } from './utils';
-var NestedGridArea = function (props) {
-    var children = useChildren();
-    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,
-                gap: area.gap,
-            };
-        });
-    }, [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 (!area.componentDef) {
-            return null;
-        }
-        return (React.createElement(Component, { key: area.componentDef.id, id: area.componentDef.id, branch: "default", context: {} }));
-    })));
-};
-export default NestedGridArea;
-var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    display: grid;\n    ", "\n    ", "\n  ", "\n"], ["\n    display: grid;\n    ", "\n    ", "\n  ", "\n"])), function (p) {
-    return p.gridArea && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: ", ";\n        "], ["\n            grid-area: ", ";\n        "])), p.gridArea);
-}, function (p) { return generateGridTemplateAreasValue(p.template); }, function (p) {
-    return p.gap && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            grid-gap: ", "rem;\n        "], ["\n            grid-gap: ", "rem;\n        "])), p.gap);
-});
-var templateObject_1, templateObject_2, templateObject_3;

package/lib-esm/utils.js

@@ -1,15 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { css } from 'styled-components';
-export var generateGridTemplateAreasValue = function (template) {
-    var rows = template.map(function (_) { return 'min-content'; }).join(' ');
-    var columns = template[0]
-        .split(' ')
-        .map(function (_) { return '1fr'; })
-        .join(' ');
-    var areas = template.map(function (value) { return "'".concat(value, "'"); }).join(' ');
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        grid-template-columns: ", ";\n        grid-template-rows: ", ";\n        grid-template-areas: ", ";\n    "], ["\n        grid-template-columns: ", ";\n        grid-template-rows: ", ";\n        grid-template-areas: ", ";\n    "])), columns, rows, areas);
-};
-var templateObject_1;