@telia-ace/widget-components-grid 1.0.13 → 1.0.14

package/dist/grid.c9cced26.js

@@ -0,0 +1,68 @@
+import { useChildren as c, useProperties as d } from "@telia-ace/widget-ui";
+import i, { useMemo as p } from "react";
+import { Component as l } from "@telia-ace/widget-types-grid";
+import { appendClassNames as g } from "@telia-ace/widget-utilities";
+import u, { css as s } from "styled-components";
+import { i as f } from "./index.cfc936fb.js";
+import "@telia-ace/widget-core";
+const $ = (e) => {
+  const r = e.map((t) => "min-content").join(" "), n = e[0].split(" ").map((t) => "1fr").join(" "), a = e.map((t) => `'${t}'`).join(" ");
+  return s`
+        grid-template-columns: ${n};
+        grid-template-rows: ${r};
+        grid-template-areas: ${a};
+    `;
+}, x = (e) => {
+  const r = c(), n = p(() => Object.entries(e.areas).map(([a, t]) => {
+    const m = r.find((o) => o.name === a);
+    return f(t) ? {
+      name: a,
+      componentDef: m,
+      context: t.context,
+      areaSettings: t.areaSettings,
+      template: t.template,
+      areas: t.areas,
+      gap: t.gap
+    } : {
+      name: a,
+      componentDef: m,
+      areaSettings: t.areaSettings,
+      child: t.child,
+      context: t.context
+    };
+  }), [e, r]);
+  return /* @__PURE__ */ i.createElement(A, {
+    "data-grid-area": e.gridArea,
+    gridArea: e.gridArea,
+    gap: e.gap,
+    template: e.template,
+    className: g(e.className, "humany-grid")
+  }, n.map((a) => a.componentDef ? /* @__PURE__ */ i.createElement(l, {
+    key: a.componentDef.id,
+    id: a.componentDef.id,
+    branch: "default",
+    context: {}
+  }) : null));
+}, A = u.div`
+    display: grid;
+    ${(e) => e.gridArea && s`
+            grid-area: ${e.gridArea};
+        `}
+    ${(e) => $(e.template)}
+  ${(e) => e.gap && s`
+            grid-gap: ${e.gap}rem;
+        `}
+`, E = ({ className: e }) => {
+  const r = d();
+  return /* @__PURE__ */ i.createElement(x, {
+    template: r.template,
+    areas: r.areas,
+    gap: r.gap,
+    areaSettings: r.areaSettings,
+    context: r.context
+  });
+};
+export {
+  E as default
+};
+//# sourceMappingURL=grid.c9cced26.js.map

package/dist/grid.c9cced26.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.c9cced26.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,IAAiC,CAAC,MAAuB;AAC5D,QAAA,IAAO,EAAS,IAAI,CAAC,MAAM,aAAa,EAAE,KAAK,GAAG,GAClD,IAAU,EAAS,GACpB,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,KAAK,EAChB,KAAK,GAAG,GACP,IAAQ,EAAS,IAAI,CAAC,MAAU,IAAI,IAAQ,EAAE,KAAK,GAAG;AAErD,SAAA;AAAA,iCACsB;AAAA,8BACH;AAAA,+BACC;AAAA;AAE/B,GCHM,IAAkC,CAAC,MAAU;AAC/C,QAAM,IAAW,KAEX,IAAQ,EAA8C,MACjD,OAAO,QAAQ,EAAM,KAAK,EAAE,IAAI,CAAC,CAAC,GAAK,OAAU;AACpD,UAAM,IAAe,EAAS,KAAK,CAAC,MAAU,EAAM,SAAS,CAAG;AAE5D,WAAC,EAAa,CAAI,IASf;AAAA,MACH,MAAM;AAAA,MACN;AAAA,MACA,SAAS,EAAK;AAAA,MACd,cAAc,EAAK;AAAA,MACnB,UAAU,EAAK;AAAA,MACf,OAAO,EAAK;AAAA,MACZ,KAAK,EAAK;AAAA,IAAA,IAfH;AAAA,MACH,MAAM;AAAA,MACN;AAAA,MACA,cAAc,EAAK;AAAA,MACnB,OAAO,EAAK;AAAA,MACZ,SAAS,EAAK;AAAA,IAAA;AAAA,EAWtB,CACH,GACF,CAAC,GAAO,CAAQ,CAAC;AAEpB,SACK,kBAAA,cAAA,GAAA;AAAA,IACG,kBAAgB,EAAM;AAAA,IACtB,UAAU,EAAM;AAAA,IAChB,KAAK,EAAM;AAAA,IACX,UAAU,EAAM;AAAA,IAChB,WAAW,EAAiB,EAAM,WAAW,aAAa;AAAA,EAAA,GAEzD,EAAM,IAAI,CAAC,MACF,EAAa,eAId,kBAAA,cAAA,GAAA;AAAA,IACG,KAAM,EAAa,aAAa;AAAA,IAChC,IAAK,EAAa,aAAa;AAAA,IAC/B,QAAO;AAAA,IACP,SAAS,CAAC;AAAA,EAAA,CACd,IARO,IAUd,CACL;AAER,GAIM,IAAU,EAAO;AAAA;AAAA,MAMjB,CAAC,MACC,EAAE,YACF;AAAA,yBACiB,EAAE;AAAA;AAAA,MAErB,CAAC,MAAM,EAA+B,EAAE,QAAQ;AAAA,IAClD,CAAC,MACG,EAAE,OACF;AAAA,wBACgB,EAAE;AAAA;AAAA,GC5EpB,IAAwB,CAAC,EAAE,mBAAgB;AAC7C,QAAM,IAAa;AACnB,SACK,kBAAA,cAAA,GAAA;AAAA,IACG,UAAU,EAAW;AAAA,IACrB,OAAO,EAAW;AAAA,IAClB,KAAK,EAAW;AAAA,IAChB,cAAc,EAAW;AAAA,IACzB,SAAS,EAAW;AAAA,EAAA,CACxB;AAER;"}

package/dist/index.cfc936fb.js

@@ -0,0 +1,65 @@
+var D = Object.defineProperty;
+var h = Object.getOwnPropertySymbols;
+var E = Object.prototype.hasOwnProperty, G = Object.prototype.propertyIsEnumerable;
+var u = (e, o, r) => o in e ? D(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, b = (e, o) => {
+  for (var r in o || (o = {}))
+    E.call(o, r) && u(e, r, o[r]);
+  if (h)
+    for (var r of h(o))
+      G.call(o, r) && u(e, r, o[r]);
+  return e;
+};
+import { createReactComponent as I } from "@telia-ace/widget-ui";
+import { createChildren as w } from "@telia-ace/widget-core";
+import { Logger as L } from "@telia-ace/widget-utilities";
+const H = (e) => !!e.template, V = (e) => I(e, "grid", import("./grid.c9cced26.js"), (o) => {
+}), _ = (e, o) => {
+  var m, g, x, l;
+  const { platform: r, node: C, references: P, definitions: a, views: f, branch: N } = o, t = a[e.definitionId];
+  if (process.env.NODE_ENV !== "production" && !t) {
+    L.error(`No definition found for component type '${e.definitionId}'.`);
+    return;
+  }
+  const i = r.createNode(t.type);
+  if (i.name = e.definitionId, i.tags = t.tags || [], t.properties && i.writeProperties(t.properties), t.context && i.writeContext(t.context), t.layout && i.writeLayout(t.layout), C.appendChild(i, N), e.overrides.forEach((n) => {
+    const p = { breakpoints: n.breakpoints };
+    n.properties && i.writeProperties(n.properties, p), n.context && i.writeContext(n.context, p), n.layout && i.writeLayout(n.layout, p);
+  }), ((m = t.properties) == null ? void 0 : m.areas) && !!((g = t.properties) != null && g.areas)) {
+    const n = Object.entries(t.properties.areas).reduce((p, [c, s]) => {
+      if (s.child) {
+        const d = Object.entries(s.areaSettings || {}).reduce((y, [O, j]) => (y[`css-${O}`] = j, y), {});
+        p[c] = {
+          type: "area",
+          context: s.context || {},
+          children: [s.child],
+          properties: b({
+            "css-grid-area": c
+          }, d)
+        };
+      } else {
+        const d = {
+          type: "grid",
+          context: {},
+          properties: {
+            areaSettings: {},
+            areas: s.areas,
+            context: s.context,
+            gap: s.gap,
+            gridArea: s.gridArea,
+            template: s.template
+          }
+        };
+        p[c] = d;
+      }
+      return p;
+    }, a);
+    w(r, i, Object.keys(t.properties.areas), n, f);
+  } else
+    (x = t.properties) != null && x.child && w(r, i, [(l = t.properties) == null ? void 0 : l.child], a, f);
+};
+export {
+  V as G,
+  _ as g,
+  H as i
+};
+//# sourceMappingURL=index.cfc936fb.js.map

package/dist/index.cfc936fb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cfc936fb.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,IAAe,CAAC,MAClB,CAAC,CAAE,EAAoB,UAcrB,IAAgB,CAAC,MACnB,EAAqB,GAAW,QAAQ,OAAO,uBAAW,CAAC,MAAc;AAAA,CAAE,GC9BzE,IAAuB,CAChC,GACA,MACC;;AACD,QAAM,EAAE,aAAU,SAAM,eAAY,gBAAa,UAAO,cAAW,GAE7D,IAAW,EAAY,EAAS;AAClC,MAAA,QAAQ,IAAI,aAAa,gBACrB,CAAC,GAAU;AACJ,MAAA,MAAM,2CAA2C,EAAS,gBAAgB;AACjF;AAAA,EACJ;AAEJ,QAAM,IAAY,EAAS,WAAW,EAAS,IAAI;AA2BnD,MA1BA,EAAU,OAAO,EAAS,cAChB,EAAA,OAAO,EAAS,QAAQ,CAAA,GAC9B,EAAS,cACC,EAAA,gBAAgB,EAAS,UAAU,GAE7C,EAAS,WACC,EAAA,aAAa,EAAS,OAAO,GAEvC,EAAS,UACC,EAAA,YAAY,EAAS,MAAM,GAEpC,EAAA,YAAY,GAAW,CAAM,GAEzB,EAAA,UAAU,QAAQ,CAAC,MAAa;AACrC,UAAM,IAAU,EAAE,aAAa,EAAS,YAAY;AACpD,IAAI,EAAS,cACC,EAAA,gBAAgB,EAAS,YAAY,CAAO,GAEtD,EAAS,WACC,EAAA,aAAa,EAAS,SAAS,CAAO,GAEhD,EAAS,UACC,EAAA,YAAY,EAAS,QAAQ,CAAO;AAAA,EAClD,CACH,GAEG,QAAS,eAAT,kBAAqB,UAAS,CAAC,CAAC,QAAS,eAAT,UAAqB,QAAO;AAC5D,UAAM,IAAwB,OAAO,QAAQ,EAAS,WAAW,KAAK,EAAE,OACpE,CAAC,GAAK,CAAC,GAAK,OAAgB;AACxB,UAAI,EAAM,OAAO;AACb,cAAM,IAAW,OAAO,QAAgB,EAAM,gBAAgB,CAAA,CAAE,EAAE,OAE/D,CAAC,GAAK,CAAC,GAAK,OACX,GAAI,OAAO,OAAS,GAEb,IACR,CAAE,CAAA;AACL,UAAI,KAAO;AAAA,UACP,MAAM;AAAA,UACN,SAAS,EAAM,WAAW,CAAC;AAAA,UAC3B,UAAU,CAAC,EAAM,KAAK;AAAA,UACtB,YAAY;AAAA,YACR,iBAAiB;AAAA,aACd;AAAA,QACP;AAAA,MACJ,OACG;AACH,cAAM,IAAU;AAAA,UACZ,MAAM;AAAA,UACN,SAAS,CAAC;AAAA,UACV,YAAY;AAAA,YACR,cAAc,CAAC;AAAA,YACf,OAAO,EAAM;AAAA,YACb,SAAS,EAAM;AAAA,YACf,KAAK,EAAM;AAAA,YACX,UAAU,EAAM;AAAA,YAChB,UAAU,EAAM;AAAA,UACpB;AAAA,QAAA;AAEJ,UAAI,KAAO;AAAA,MACf;AACO,aAAA;AAAA,OAEX,CACJ;AAEI,MAAA,GACA,GACA,OAAO,KAAK,EAAS,WAAW,KAAK,GACrC,GACA,CACJ;AAAA,EAAA;AACJ,IAAW,OAAS,eAAT,UAAqB,SACb,EAAA,GAAU,GAAW,CAAC,OAAS,eAAT,kBAAqB,KAAK,GAAG,GAAa,CAAK;AAE5F;"}

package/dist/index.js

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

package/package.json

@@ -1,14 +1,17 @@
 {
     "name": "@telia-ace/widget-components-grid",
-    "version": "1.0.13",
+    "version": "1.0.14",
     "description": "Grid component for ACE Widgets.",
     "license": "SEE LICENSE IN LICENSE.txt",
     "author": "Telia Company AB",
     "keywords": [
         "telia"
     ],
-    "source": "src/index.ts",
-    "module": "dist/index.js",
+    "exports": {
+        "development": "./src/index.ts",
+        "default": "./dist/index.js"
+    },
+    "type": "module",
     "types": "dist/index.d.ts",
     "files": [
         "LICENSE.txt",
@@ -25,9 +28,9 @@
     },
     "sideEffects": false,
     "dependencies": {
-        "@telia-ace/widget-core": "^1.0.10",
-        "@telia-ace/widget-types-grid": "^1.0.17",
-        "@telia-ace/widget-ui": "^1.0.17",
+        "@telia-ace/widget-core": "^1.0.11",
+        "@telia-ace/widget-types-grid": "^1.0.18",
+        "@telia-ace/widget-ui": "^1.0.18",
         "@telia-ace/widget-utilities": "^1.0.2",
         "@webprovisions/platform": "^1.1.2"
     },
@@ -41,5 +44,5 @@
         "@types/react-dom": "^16.8.0",
         "@types/styled-components": "^5.1.7"
     },
-    "gitHead": "b6c2eb6fec7cd0c8e4334ab7a8e0087422fe1964"
+    "gitHead": "4006655a78d8f0379c021e4362536dcdf881b3d0"
 }

package/dist/grid.js

@@ -1,82 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/index2.js

@@ -1,94 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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;;"}