@telia-ace/widget-components-grid 1.0.21-next.6 → 1.0.21-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,24 +1,24 @@
1
1
  import { useChildren as c, useProperties as d } from "@telia-ace/widget-ui";
2
2
  import i, { useMemo as p } from "react";
3
- import { css as m } from "@emotion/react";
3
+ import { css as s } from "@emotion/react";
4
4
  import l from "@emotion/styled";
5
5
  import { Component as g } from "@telia-ace/widget-types-grid";
6
6
  import { appendClassNames as u } from "@telia-ace/widget-utilities";
7
- import { i as f } from "./index.4aba3ba6.js";
7
+ import { i as f } from "./index.383bbd71.js";
8
8
  import "@telia-ace/widget-core";
9
9
  const $ = (e) => {
10
10
  const r = e.map((t) => "min-content").join(" "), n = e[0].split(" ").map((t) => "1fr").join(" "), a = e.map((t) => `'${t}'`).join(" ");
11
- return m`
11
+ return s`
12
12
  grid-template-columns: ${n};
13
13
  grid-template-rows: ${r};
14
14
  grid-template-areas: ${a};
15
15
  `;
16
16
  }, x = (e) => {
17
17
  const r = c(), n = p(() => Object.entries(e.areas).map(([a, t]) => {
18
- const o = r.find((s) => s.name === a);
18
+ const m = r.find((o) => o.name === a);
19
19
  return f(t) ? {
20
20
  name: a,
21
- componentDef: o,
21
+ componentDef: m,
22
22
  context: t.context,
23
23
  areaSettings: t.areaSettings,
24
24
  template: t.template,
@@ -26,13 +26,13 @@ const $ = (e) => {
26
26
  gap: t.gap
27
27
  } : {
28
28
  name: a,
29
- componentDef: o,
29
+ componentDef: m,
30
30
  areaSettings: t.areaSettings,
31
31
  child: t.child,
32
32
  context: t.context
33
33
  };
34
34
  }), [e, r]);
35
- return /* @__PURE__ */ i.createElement(A, {
35
+ return /* @__PURE__ */ i.createElement(N, {
36
36
  "data-grid-area": e.gridArea,
37
37
  gridArea: e.gridArea,
38
38
  gap: e.gap,
@@ -44,18 +44,18 @@ const $ = (e) => {
44
44
  branch: "default",
45
45
  context: {}
46
46
  }) : null));
47
- }, A = l.div`
47
+ }, A = x, N = l.div`
48
48
  display: grid;
49
- ${(e) => e.gridArea && m`
49
+ ${(e) => e.gridArea && s`
50
50
  grid-area: ${e.gridArea};
51
51
  `}
52
52
  ${(e) => $(e.template)}
53
- ${(e) => e.gap && m`
53
+ ${(e) => e.gap && s`
54
54
  grid-gap: ${e.gap}rem;
55
55
  `}
56
- `, b = ({ className: e }) => {
56
+ `, w = ({ className: e }) => {
57
57
  const r = d();
58
- return /* @__PURE__ */ i.createElement(x, {
58
+ return /* @__PURE__ */ i.createElement(A, {
59
59
  template: r.template,
60
60
  areas: r.areas,
61
61
  gap: r.gap,
@@ -64,6 +64,6 @@ const $ = (e) => {
64
64
  });
65
65
  };
66
66
  export {
67
- b as default
67
+ w as default
68
68
  };
69
- //# sourceMappingURL=grid.825393c2.js.map
69
+ //# sourceMappingURL=grid.b885328b.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"grid.825393c2.js","sources":["../src/utils.ts","../src/nested-grid-area.tsx","../src/grid.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nexport const generateGridTemplateAreasValue = (template: string[]) => {\n const rows = template.map((_) => 'min-content').join(' ');\n const columns = template[0]\n .split(' ')\n .map((_) => '1fr')\n .join(' ');\n const areas = template.map((value) => `'${value}'`).join(' ');\n\n return css`\n grid-template-columns: ${columns};\n grid-template-rows: ${rows};\n grid-template-areas: ${areas};\n `;\n};\n","import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Component } from '@telia-ace/widget-types-grid';\nimport { useChildren } from '@telia-ace/widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { useMemo } from 'react';\nimport { GridAreaProps, isNestedGrid, NestedArea } from './grid-component';\nimport { generateGridTemplateAreasValue } from './utils';\n\ntype Props = {\n className?: string;\n gridArea?: string;\n} & NestedArea;\nconst NestedGridArea: React.FC<Props> = (props) => {\n const children = useChildren();\n\n const areas = useMemo<(GridAreaProps & { name: string })[]>(() => {\n return Object.entries(props.areas).map(([key, area]) => {\n const componentDef = children.find((child) => child.name === key);\n\n if (!isNestedGrid(area)) {\n return {\n name: key,\n componentDef,\n areaSettings: area.areaSettings,\n child: area.child,\n context: area.context,\n };\n }\n return {\n name: key,\n componentDef,\n context: area.context,\n areaSettings: area.areaSettings,\n template: area.template,\n areas: area.areas,\n gap: area.gap,\n };\n });\n }, [props, children]);\n\n return (\n <Wrapper\n data-grid-area={props.gridArea}\n gridArea={props.gridArea}\n gap={props.gap}\n template={props.template}\n className={appendClassNames(props.className, 'humany-grid')}\n >\n {areas.map((area) => {\n if (!(area as any).componentDef) {\n return null;\n }\n return (\n <Component\n key={(area as any).componentDef.id}\n id={(area as any).componentDef.id}\n branch=\"default\"\n context={{}}\n />\n );\n })}\n </Wrapper>\n );\n};\n\nexport default NestedGridArea;\n\nconst Wrapper = styled.div<{\n template: string[];\n gridArea?: string;\n gap?: number;\n}>`\n display: grid;\n ${(p) =>\n p.gridArea &&\n css`\n grid-area: ${p.gridArea};\n `}\n ${(p) => generateGridTemplateAreasValue(p.template)}\n ${(p) =>\n p.gap &&\n css`\n grid-gap: ${p.gap}rem;\n `}\n`;\n","import { useProperties } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { GridComponentProps } from './grid-component';\nimport NestedGridArea from './nested-grid-area';\n\ntype Props = { className?: string };\nconst Grid: React.FC<Props> = ({ className }) => {\n const properties = useProperties<GridComponentProps>();\n return (\n <NestedGridArea\n template={properties.template}\n areas={properties.areas}\n gap={properties.gap}\n areaSettings={properties.areaSettings}\n context={properties.context}\n />\n );\n};\n\nexport default Grid;\n"],"names":["generateGridTemplateAreasValue","template","rows","_","columns","areas","value","css","NestedGridArea","props","children","useChildren","useMemo","key","area","componentDef","child","isNestedGrid","React","Wrapper","appendClassNames","Component","styled","p","Grid","className","properties","useProperties"],"mappings":";;;;;;;;AAEa,MAAAA,IAAiC,CAACC,MAAuB;AAC5D,QAAAC,IAAOD,EAAS,IAAI,CAACE,MAAM,aAAa,EAAE,KAAK,GAAG,GAClDC,IAAUH,EAAS,GACpB,MAAM,GAAG,EACT,IAAI,CAACE,MAAM,KAAK,EAChB,KAAK,GAAG,GACPE,IAAQJ,EAAS,IAAI,CAACK,MAAU,IAAIA,IAAQ,EAAE,KAAK,GAAG;AAErD,SAAAC;AAAA,iCACsBH;AAAA,8BACHF;AAAA,+BACCG;AAAA;AAE/B,GCFMG,IAAkC,CAACC,MAAU;AAC/C,QAAMC,IAAWC,KAEXN,IAAQO,EAA8C,MACjD,OAAO,QAAQH,EAAM,KAAK,EAAE,IAAI,CAAC,CAACI,GAAKC,CAAI,MAAM;AACpD,UAAMC,IAAeL,EAAS,KAAK,CAACM,MAAUA,EAAM,SAASH,CAAG;AAE5D,WAACI,EAAaH,CAAI,IASf;AAAA,MACH,MAAMD;AAAA,MACN,cAAAE;AAAA,MACA,SAASD,EAAK;AAAA,MACd,cAAcA,EAAK;AAAA,MACnB,UAAUA,EAAK;AAAA,MACf,OAAOA,EAAK;AAAA,MACZ,KAAKA,EAAK;AAAA,IAAA,IAfH;AAAA,MACH,MAAMD;AAAA,MACN,cAAAE;AAAA,MACA,cAAcD,EAAK;AAAA,MACnB,OAAOA,EAAK;AAAA,MACZ,SAASA,EAAK;AAAA,IAAA;AAAA,EAWtB,CACH,GACF,CAACL,GAAOC,CAAQ,CAAC;AAEpB,SACK,gBAAAQ,EAAA,cAAAC,GAAA;AAAA,IACG,kBAAgBV,EAAM;AAAA,IACtB,UAAUA,EAAM;AAAA,IAChB,KAAKA,EAAM;AAAA,IACX,UAAUA,EAAM;AAAA,IAChB,WAAWW,EAAiBX,EAAM,WAAW,aAAa;AAAA,EAAA,GAEzDJ,EAAM,IAAI,CAACS,MACFA,EAAa,eAId,gBAAAI,EAAA,cAAAG,GAAA;AAAA,IACG,KAAMP,EAAa,aAAa;AAAA,IAChC,IAAKA,EAAa,aAAa;AAAA,IAC/B,QAAO;AAAA,IACP,SAAS,CAAC;AAAA,EAAA,CACd,IARO,IAUd,CACL;AAER,GAIMK,IAAUG,EAAO;AAAA;AAAA,MAMjB,CAACC,MACCA,EAAE,YACFhB;AAAA,yBACiBgB,EAAE;AAAA;AAAA,MAErB,CAACA,MAAMvB,EAA+BuB,EAAE,QAAQ;AAAA,IAClD,CAACA,MACGA,EAAE,OACFhB;AAAA,wBACgBgB,EAAE;AAAA;AAAA,GC7EpBC,IAAwB,CAAC,EAAE,WAAAC,QAAgB;AAC7C,QAAMC,IAAaC;AACnB,SACK,gBAAAT,EAAA,cAAAV,GAAA;AAAA,IACG,UAAUkB,EAAW;AAAA,IACrB,OAAOA,EAAW;AAAA,IAClB,KAAKA,EAAW;AAAA,IAChB,cAAcA,EAAW;AAAA,IACzB,SAASA,EAAW;AAAA,EAAA,CACxB;AAER;"}
1
+ {"version":3,"file":"grid.b885328b.js","sources":["../src/utils.ts","../src/nested-grid-area.tsx","../src/grid.tsx"],"sourcesContent":["import { css } from '@emotion/react';\n\nexport const generateGridTemplateAreasValue = (template: string[]) => {\n const rows = template.map((_) => 'min-content').join(' ');\n const columns = template[0]\n .split(' ')\n .map((_) => '1fr')\n .join(' ');\n const areas = template.map((value) => `'${value}'`).join(' ');\n\n return css`\n grid-template-columns: ${columns};\n grid-template-rows: ${rows};\n grid-template-areas: ${areas};\n `;\n};\n","import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Component } from '@telia-ace/widget-types-grid';\nimport { useChildren } from '@telia-ace/widget-ui';\nimport { appendClassNames } from '@telia-ace/widget-utilities';\nimport React, { useMemo } from 'react';\nimport { GridAreaProps, isNestedGrid, NestedArea } from './grid-component';\nimport { generateGridTemplateAreasValue } from './utils';\n\ntype Props = {\n className?: string;\n gridArea?: string;\n} & NestedArea;\nconst NestedGridArea: React.FC<Props> = (props) => {\n const children = useChildren();\n\n const areas = useMemo<(GridAreaProps & { name: string })[]>(() => {\n return Object.entries(props.areas).map(([key, area]) => {\n const componentDef = children.find((child) => child.name === key);\n\n if (!isNestedGrid(area)) {\n return {\n name: key,\n componentDef,\n areaSettings: area.areaSettings,\n child: area.child,\n context: area.context,\n };\n }\n return {\n name: key,\n componentDef,\n context: area.context,\n areaSettings: area.areaSettings,\n template: area.template,\n areas: area.areas,\n gap: area.gap,\n };\n });\n }, [props, children]);\n\n return (\n <Wrapper\n data-grid-area={props.gridArea}\n gridArea={props.gridArea}\n gap={props.gap}\n template={props.template}\n className={appendClassNames(props.className, 'humany-grid')}\n >\n {areas.map((area) => {\n if (!(area as any).componentDef) {\n return null;\n }\n return (\n <Component\n key={(area as any).componentDef.id}\n id={(area as any).componentDef.id}\n branch=\"default\"\n context={{}}\n />\n );\n })}\n </Wrapper>\n );\n};\n\nexport default NestedGridArea;\n\nconst Wrapper = styled.div<{\n template: string[];\n gridArea?: string;\n gap?: number;\n}>`\n display: grid;\n ${(p) =>\n p.gridArea &&\n css`\n grid-area: ${p.gridArea};\n `}\n ${(p) => generateGridTemplateAreasValue(p.template)}\n ${(p) =>\n p.gap &&\n css`\n grid-gap: ${p.gap}rem;\n `}\n`;\n","import { useProperties } from '@telia-ace/widget-ui';\nimport React from 'react';\nimport { GridComponentProps } from './grid-component';\nimport NestedGridArea from './nested-grid-area';\n\ntype Props = { className?: string };\nconst Grid: React.FC<Props> = ({ className }) => {\n const properties = useProperties<GridComponentProps>();\n return (\n <NestedGridArea\n template={properties.template}\n areas={properties.areas}\n gap={properties.gap}\n areaSettings={properties.areaSettings}\n context={properties.context}\n />\n );\n};\n\nexport default Grid;\n"],"names":["generateGridTemplateAreasValue","template","rows","_","columns","areas","value","css","NestedGridArea","props","children","useChildren","useMemo","key","area","componentDef","child","isNestedGrid","React","Wrapper","appendClassNames","Component","NestedGridArea$1","styled","p","Grid","className","properties","useProperties"],"mappings":";;;;;;;;AAEa,MAAAA,IAAiC,CAACC,MAAuB;AAC5D,QAAAC,IAAOD,EAAS,IAAI,CAACE,MAAM,aAAa,EAAE,KAAK,GAAG,GAClDC,IAAUH,EAAS,GACpB,MAAM,GAAG,EACT,IAAI,CAACE,MAAM,KAAK,EAChB,KAAK,GAAG,GACPE,IAAQJ,EAAS,IAAI,CAACK,MAAU,IAAIA,IAAQ,EAAE,KAAK,GAAG;AAErD,SAAAC;AAAA,iCACsBH;AAAA,8BACHF;AAAA,+BACCG;AAAA;AAE/B,GCFMG,IAAkC,CAACC,MAAU;AAC/C,QAAMC,IAAWC,KAEXN,IAAQO,EAA8C,MACjD,OAAO,QAAQH,EAAM,KAAK,EAAE,IAAI,CAAC,CAACI,GAAKC,CAAI,MAAM;AACpD,UAAMC,IAAeL,EAAS,KAAK,CAACM,MAAUA,EAAM,SAASH,CAAG;AAE5D,WAACI,EAAaH,CAAI,IASf;AAAA,MACH,MAAMD;AAAA,MACN,cAAAE;AAAA,MACA,SAASD,EAAK;AAAA,MACd,cAAcA,EAAK;AAAA,MACnB,UAAUA,EAAK;AAAA,MACf,OAAOA,EAAK;AAAA,MACZ,KAAKA,EAAK;AAAA,IAAA,IAfH;AAAA,MACH,MAAMD;AAAA,MACN,cAAAE;AAAA,MACA,cAAcD,EAAK;AAAA,MACnB,OAAOA,EAAK;AAAA,MACZ,SAASA,EAAK;AAAA,IAAA;AAAA,EAWtB,CACH,GACF,CAACL,GAAOC,CAAQ,CAAC;AAEpB,SACK,gBAAAQ,EAAA,cAAAC,GAAA;AAAA,IACG,kBAAgBV,EAAM;AAAA,IACtB,UAAUA,EAAM;AAAA,IAChB,KAAKA,EAAM;AAAA,IACX,UAAUA,EAAM;AAAA,IAChB,WAAWW,EAAiBX,EAAM,WAAW,aAAa;AAAA,EAAA,GAEzDJ,EAAM,IAAI,CAACS,MACFA,EAAa,eAId,gBAAAI,EAAA,cAAAG,GAAA;AAAA,IACG,KAAMP,EAAa,aAAa;AAAA,IAChC,IAAKA,EAAa,aAAa;AAAA,IAC/B,QAAO;AAAA,IACP,SAAS,CAAC;AAAA,EAAA,CACd,IARO,IAUd,CACL;AAER,GAEAQ,IAAed,GAETW,IAAUI,EAAO;AAAA;AAAA,MAMjB,CAACC,MACCA,EAAE,YACFjB;AAAA,yBACiBiB,EAAE;AAAA;AAAA,MAErB,CAACA,MAAMxB,EAA+BwB,EAAE,QAAQ;AAAA,IAClD,CAACA,MACGA,EAAE,OACFjB;AAAA,wBACgBiB,EAAE;AAAA;AAAA,GC7EpBC,IAAwB,CAAC,EAAE,WAAAC,QAAgB;AAC7C,QAAMC,IAAaC;AACnB,SACK,gBAAAV,EAAA,cAAAV,GAAA;AAAA,IACG,UAAUmB,EAAW;AAAA,IACrB,OAAOA,EAAW;AAAA,IAClB,KAAKA,EAAW;AAAA,IAChB,cAAcA,EAAW;AAAA,IACzB,SAASA,EAAW;AAAA,EAAA,CACxB;AAER;"}
@@ -0,0 +1,74 @@
1
+ var j = Object.defineProperty;
2
+ var h = Object.getOwnPropertySymbols;
3
+ var D = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
4
+ var u = (t, o, r) => o in t ? j(t, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[o] = r, C = (t, o) => {
5
+ for (var r in o || (o = {}))
6
+ D.call(o, r) && u(t, r, o[r]);
7
+ if (h)
8
+ for (var r of h(o))
9
+ E.call(o, r) && u(t, r, o[r]);
10
+ return t;
11
+ };
12
+ import { createReactComponent as I } from "@telia-ace/widget-ui";
13
+ import { createChildren as b } from "@telia-ace/widget-core";
14
+ import { Logger as L } from "@telia-ace/widget-utilities";
15
+ const V = (t) => !!t.template, P = (t) => I(t, "grid", import("./grid.b885328b.js"), (o) => {
16
+ }), _ = P, q = (t, o) => {
17
+ var m, g, x, l;
18
+ const { platform: r, node: w, references: $, definitions: a, views: f, branch: N } = o, e = a[t.definitionId];
19
+ if (process.env.NODE_ENV !== "production" && !e) {
20
+ L.error(`No definition found for component type '${t.definitionId}'.`);
21
+ return;
22
+ }
23
+ const i = r.createNode(e.type);
24
+ if (i.name = t.definitionId, i.tags = e.tags || [], e.properties && i.writeProperties(e.properties), e.context && i.writeContext(e.context), e.layout && i.writeLayout(e.layout), w.appendChild(i, N), t.overrides.forEach((n) => {
25
+ const p = { breakpoints: n.breakpoints };
26
+ n.properties && i.writeProperties(n.properties, p), n.context && i.writeContext(n.context, p), n.layout && i.writeLayout(n.layout, p);
27
+ }), ((m = e.properties) == null ? void 0 : m.areas) && !!((g = e.properties) != null && g.areas)) {
28
+ const n = Object.entries(e.properties.areas).reduce(
29
+ (p, [c, s]) => {
30
+ if (s.child) {
31
+ const d = Object.entries(s.areaSettings || {}).reduce((y, [G, O]) => (y[`css-${G}`] = O, y), {});
32
+ p[c] = {
33
+ type: "area",
34
+ context: s.context || {},
35
+ children: [s.child],
36
+ properties: C({
37
+ "css-grid-area": c
38
+ }, d)
39
+ };
40
+ } else {
41
+ const d = {
42
+ type: "grid",
43
+ context: {},
44
+ properties: {
45
+ areaSettings: {},
46
+ areas: s.areas,
47
+ context: s.context,
48
+ gap: s.gap,
49
+ gridArea: s.gridArea,
50
+ template: s.template
51
+ }
52
+ };
53
+ p[c] = d;
54
+ }
55
+ return p;
56
+ },
57
+ a
58
+ );
59
+ b(
60
+ r,
61
+ i,
62
+ Object.keys(e.properties.areas),
63
+ n,
64
+ f
65
+ );
66
+ } else
67
+ (x = e.properties) != null && x.child && b(r, i, [(l = e.properties) == null ? void 0 : l.child], a, f);
68
+ };
69
+ export {
70
+ _ as G,
71
+ q as g,
72
+ V as i
73
+ };
74
+ //# sourceMappingURL=index.383bbd71.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.4aba3ba6.js","sources":["../src/grid-component.ts","../src/handler.ts"],"sourcesContent":["import { createReactComponent } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\n\ntype AreaWithChild = {\n child: string;\n areaSettings: { [key: string]: string };\n context: { [key: string]: any };\n};\n\nexport type NestedArea = {\n context: { [key: string]: any };\n template: string[];\n areaSettings: { [key: string]: string };\n gap: number;\n areas: {\n [key: string]: GridAreaProps;\n };\n};\n\nexport type GridAreaProps = NestedArea | AreaWithChild;\n\nexport const isNestedGrid = (area: GridAreaProps): area is NestedArea => {\n return !!(area as NestedArea).template;\n};\n\nexport type GridComponentProps = {\n gap: number;\n template: string[];\n areaSettings: { [key: string]: string };\n areas: {\n [key: string]: GridAreaProps;\n };\n child: string;\n context: { [key: string]: any };\n};\n\nexport const GridComponent = (container: Container) => {\n return createReactComponent(container, 'grid', import('./grid'), (component) => {});\n};\n\nexport default GridComponent;\n","import {\n ComponentHandlerOptions,\n createChildren,\n NormalizedComponentReference,\n} from '@telia-ace/widget-core';\nimport { Logger } from '@telia-ace/widget-utilities';\n\nexport const gridComponentHandler = (\n childRef: NormalizedComponentReference,\n options: ComponentHandlerOptions\n) => {\n const { platform, node, references, definitions, views, branch } = options;\n\n const childDef = definitions[childRef.definitionId];\n if (process.env.NODE_ENV !== 'production') {\n if (!childDef) {\n Logger.error(`No definition found for component type '${childRef.definitionId}'.`);\n return;\n }\n }\n const childNode = platform.createNode(childDef.type);\n childNode.name = childRef.definitionId;\n childNode.tags = childDef.tags || [];\n if (childDef.properties) {\n childNode.writeProperties(childDef.properties);\n }\n if (childDef.context) {\n childNode.writeContext(childDef.context);\n }\n if (childDef.layout) {\n childNode.writeLayout(childDef.layout);\n }\n node.appendChild(childNode, branch);\n\n childRef.overrides.forEach((override) => {\n const options = { breakpoints: override.breakpoints };\n if (override.properties) {\n childNode.writeProperties(override.properties, options);\n }\n if (override.context) {\n childNode.writeContext(override.context, options);\n }\n if (override.layout) {\n childNode.writeLayout(override.layout, options);\n }\n });\n\n if (childDef.properties?.areas && !!childDef.properties?.areas) {\n const mergedDefinitons: any = Object.entries(childDef.properties.areas).reduce<any>(\n (acc, [key, value]: any) => {\n if (value.child) {\n const cssProps = Object.entries<string>(value.areaSettings || {}).reduce<{\n [key: string]: string;\n }>((acc, [key, value]) => {\n acc[`css-${key}`] = value;\n\n return acc;\n }, {});\n acc[key] = {\n type: 'area',\n context: value.context || {},\n children: [value.child],\n properties: {\n 'css-grid-area': key,\n ...cssProps,\n },\n };\n } else {\n const subgrid = {\n type: 'grid',\n context: {},\n properties: {\n areaSettings: {},\n areas: value.areas,\n context: value.context,\n gap: value.gap,\n gridArea: value.gridArea,\n template: value.template,\n },\n };\n acc[key] = subgrid;\n }\n return acc;\n },\n definitions\n );\n createChildren(\n platform,\n childNode,\n Object.keys(childDef.properties.areas),\n mergedDefinitons,\n views\n );\n } else if (childDef.properties?.child) {\n createChildren(platform, childNode, [childDef.properties?.child], definitions, views);\n }\n};\n"],"names":["isNestedGrid","area","GridComponent","container","createReactComponent","component","gridComponentHandler","childRef","options","platform","node","references","definitions","views","branch","childDef","Logger","childNode","override","_a","_b","mergedDefinitons","acc","key","value","cssProps","__spreadValues","subgrid","createChildren","_c","_d"],"mappings":";;;;;;;;;;;;;;AAqBa,MAAAA,IAAe,CAACC,MAClB,CAAC,CAAEA,EAAoB,UAcrBC,IAAgB,CAACC,MACnBC,EAAqBD,GAAW,QAAQ,OAAO,uBAAW,CAACE,MAAc;AAAA,CAAE,GC9BzEC,IAAuB,CAChCC,GACAC,MACC;;AACD,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,YAAAC,GAAY,aAAAC,GAAa,OAAAC,GAAO,QAAAC,EAAW,IAAAN,GAE7DO,IAAWH,EAAYL,EAAS;AAClC,MAAA,QAAQ,IAAI,aAAa,gBACrB,CAACQ,GAAU;AACJ,IAAAC,EAAA,MAAM,2CAA2CT,EAAS,gBAAgB;AACjF;AAAA,EACJ;AAEJ,QAAMU,IAAYR,EAAS,WAAWM,EAAS,IAAI;AA2BnD,MA1BAE,EAAU,OAAOV,EAAS,cAChBU,EAAA,OAAOF,EAAS,QAAQ,CAAA,GAC9BA,EAAS,cACCE,EAAA,gBAAgBF,EAAS,UAAU,GAE7CA,EAAS,WACCE,EAAA,aAAaF,EAAS,OAAO,GAEvCA,EAAS,UACCE,EAAA,YAAYF,EAAS,MAAM,GAEpCL,EAAA,YAAYO,GAAWH,CAAM,GAEzBP,EAAA,UAAU,QAAQ,CAACW,MAAa;AACrC,UAAMV,IAAU,EAAE,aAAaU,EAAS,YAAY;AACpD,IAAIA,EAAS,cACCD,EAAA,gBAAgBC,EAAS,YAAYV,CAAO,GAEtDU,EAAS,WACCD,EAAA,aAAaC,EAAS,SAASV,CAAO,GAEhDU,EAAS,UACCD,EAAA,YAAYC,EAAS,QAAQV,CAAO;AAAA,EAClD,CACH,KAEGW,IAAAJ,EAAS,eAAT,gBAAAI,EAAqB,UAAS,CAAC,GAACC,IAAAL,EAAS,eAAT,QAAAK,EAAqB,QAAO;AAC5D,UAAMC,IAAwB,OAAO,QAAQN,EAAS,WAAW,KAAK,EAAE;AAAA,MACpE,CAACO,GAAK,CAACC,GAAKC,CAAK,MAAW;AACxB,YAAIA,EAAM,OAAO;AACb,gBAAMC,IAAW,OAAO,QAAgBD,EAAM,gBAAgB,CAAA,CAAE,EAAE,OAE/D,CAACF,GAAK,CAACC,GAAKC,CAAK,OAChBF,EAAI,OAAOC,OAASC,GAEbF,IACR,CAAE,CAAA;AACL,UAAAA,EAAIC,KAAO;AAAA,YACP,MAAM;AAAA,YACN,SAASC,EAAM,WAAW,CAAC;AAAA,YAC3B,UAAU,CAACA,EAAM,KAAK;AAAA,YACtB,YAAYE,EAAA;AAAA,cACR,iBAAiBH;AAAA,eACdE;AAAA,UACP;AAAA,QACJ,OACG;AACH,gBAAME,IAAU;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,CAAC;AAAA,YACV,YAAY;AAAA,cACR,cAAc,CAAC;AAAA,cACf,OAAOH,EAAM;AAAA,cACb,SAASA,EAAM;AAAA,cACf,KAAKA,EAAM;AAAA,cACX,UAAUA,EAAM;AAAA,cAChB,UAAUA,EAAM;AAAA,YACpB;AAAA,UAAA;AAEJ,UAAAF,EAAIC,KAAOI;AAAA,QACf;AACO,eAAAL;AAAA,MACX;AAAA,MACAV;AAAA,IAAA;AAEJ,IAAAgB;AAAA,MACInB;AAAA,MACAQ;AAAA,MACA,OAAO,KAAKF,EAAS,WAAW,KAAK;AAAA,MACrCM;AAAA,MACAR;AAAA,IAAA;AAAA,EACJ;AACJ,KAAWgB,IAAAd,EAAS,eAAT,QAAAc,EAAqB,SACbD,EAAAnB,GAAUQ,GAAW,EAACa,IAAAf,EAAS,eAAT,gBAAAe,EAAqB,KAAK,GAAGlB,GAAaC,CAAK;AAE5F;"}
1
+ {"version":3,"file":"index.383bbd71.js","sources":["../src/grid-component.ts","../src/handler.ts"],"sourcesContent":["import { createReactComponent } from '@telia-ace/widget-ui';\nimport { Container } from '@webprovisions/platform';\n\ntype AreaWithChild = {\n child: string;\n areaSettings: { [key: string]: string };\n context: { [key: string]: any };\n};\n\nexport type NestedArea = {\n context: { [key: string]: any };\n template: string[];\n areaSettings: { [key: string]: string };\n gap: number;\n areas: {\n [key: string]: GridAreaProps;\n };\n};\n\nexport type GridAreaProps = NestedArea | AreaWithChild;\n\nexport const isNestedGrid = (area: GridAreaProps): area is NestedArea => {\n return !!(area as NestedArea).template;\n};\n\nexport type GridComponentProps = {\n gap: number;\n template: string[];\n areaSettings: { [key: string]: string };\n areas: {\n [key: string]: GridAreaProps;\n };\n child: string;\n context: { [key: string]: any };\n};\n\nexport const GridComponent = (container: Container) => {\n return createReactComponent(container, 'grid', import('./grid'), (component) => {});\n};\n\nexport default GridComponent;\n","import {\n ComponentHandlerOptions,\n createChildren,\n NormalizedComponentReference,\n} from '@telia-ace/widget-core';\nimport { Logger } from '@telia-ace/widget-utilities';\n\nexport const gridComponentHandler = (\n childRef: NormalizedComponentReference,\n options: ComponentHandlerOptions\n) => {\n const { platform, node, references, definitions, views, branch } = options;\n\n const childDef = definitions[childRef.definitionId];\n if (process.env.NODE_ENV !== 'production') {\n if (!childDef) {\n Logger.error(`No definition found for component type '${childRef.definitionId}'.`);\n return;\n }\n }\n const childNode = platform.createNode(childDef.type);\n childNode.name = childRef.definitionId;\n childNode.tags = childDef.tags || [];\n if (childDef.properties) {\n childNode.writeProperties(childDef.properties);\n }\n if (childDef.context) {\n childNode.writeContext(childDef.context);\n }\n if (childDef.layout) {\n childNode.writeLayout(childDef.layout);\n }\n node.appendChild(childNode, branch);\n\n childRef.overrides.forEach((override) => {\n const options = { breakpoints: override.breakpoints };\n if (override.properties) {\n childNode.writeProperties(override.properties, options);\n }\n if (override.context) {\n childNode.writeContext(override.context, options);\n }\n if (override.layout) {\n childNode.writeLayout(override.layout, options);\n }\n });\n\n if (childDef.properties?.areas && !!childDef.properties?.areas) {\n const mergedDefinitons: any = Object.entries(childDef.properties.areas).reduce<any>(\n (acc, [key, value]: any) => {\n if (value.child) {\n const cssProps = Object.entries<string>(value.areaSettings || {}).reduce<{\n [key: string]: string;\n }>((acc, [key, value]) => {\n acc[`css-${key}`] = value;\n\n return acc;\n }, {});\n acc[key] = {\n type: 'area',\n context: value.context || {},\n children: [value.child],\n properties: {\n 'css-grid-area': key,\n ...cssProps,\n },\n };\n } else {\n const subgrid = {\n type: 'grid',\n context: {},\n properties: {\n areaSettings: {},\n areas: value.areas,\n context: value.context,\n gap: value.gap,\n gridArea: value.gridArea,\n template: value.template,\n },\n };\n acc[key] = subgrid;\n }\n return acc;\n },\n definitions\n );\n createChildren(\n platform,\n childNode,\n Object.keys(childDef.properties.areas),\n mergedDefinitons,\n views\n );\n } else if (childDef.properties?.child) {\n createChildren(platform, childNode, [childDef.properties?.child], definitions, views);\n }\n};\n"],"names":["isNestedGrid","area","GridComponent","container","createReactComponent","component","GridComponent$1","gridComponentHandler","childRef","options","platform","node","references","definitions","views","branch","childDef","Logger","childNode","override","_a","_b","mergedDefinitons","acc","key","value","cssProps","__spreadValues","subgrid","createChildren","_c","_d"],"mappings":";;;;;;;;;;;;;;AAqBa,MAAAA,IAAe,CAACC,MAClB,CAAC,CAAEA,EAAoB,UAcrBC,IAAgB,CAACC,MACnBC,EAAqBD,GAAW,QAAQ,OAAO,uBAAW,CAACE,MAAc;AAAA,CAAE,GAGtFC,IAAeJ,GCjCFK,IAAuB,CAChCC,GACAC,MACC;;AACD,QAAM,EAAE,UAAAC,GAAU,MAAAC,GAAM,YAAAC,GAAY,aAAAC,GAAa,OAAAC,GAAO,QAAAC,EAAW,IAAAN,GAE7DO,IAAWH,EAAYL,EAAS;AAClC,MAAA,QAAQ,IAAI,aAAa,gBACrB,CAACQ,GAAU;AACJ,IAAAC,EAAA,MAAM,2CAA2CT,EAAS,gBAAgB;AACjF;AAAA,EACJ;AAEJ,QAAMU,IAAYR,EAAS,WAAWM,EAAS,IAAI;AA2BnD,MA1BAE,EAAU,OAAOV,EAAS,cAChBU,EAAA,OAAOF,EAAS,QAAQ,CAAA,GAC9BA,EAAS,cACCE,EAAA,gBAAgBF,EAAS,UAAU,GAE7CA,EAAS,WACCE,EAAA,aAAaF,EAAS,OAAO,GAEvCA,EAAS,UACCE,EAAA,YAAYF,EAAS,MAAM,GAEpCL,EAAA,YAAYO,GAAWH,CAAM,GAEzBP,EAAA,UAAU,QAAQ,CAACW,MAAa;AACrC,UAAMV,IAAU,EAAE,aAAaU,EAAS,YAAY;AACpD,IAAIA,EAAS,cACCD,EAAA,gBAAgBC,EAAS,YAAYV,CAAO,GAEtDU,EAAS,WACCD,EAAA,aAAaC,EAAS,SAASV,CAAO,GAEhDU,EAAS,UACCD,EAAA,YAAYC,EAAS,QAAQV,CAAO;AAAA,EAClD,CACH,KAEGW,IAAAJ,EAAS,eAAT,gBAAAI,EAAqB,UAAS,CAAC,GAACC,IAAAL,EAAS,eAAT,QAAAK,EAAqB,QAAO;AAC5D,UAAMC,IAAwB,OAAO,QAAQN,EAAS,WAAW,KAAK,EAAE;AAAA,MACpE,CAACO,GAAK,CAACC,GAAKC,CAAK,MAAW;AACxB,YAAIA,EAAM,OAAO;AACb,gBAAMC,IAAW,OAAO,QAAgBD,EAAM,gBAAgB,CAAA,CAAE,EAAE,OAE/D,CAACF,GAAK,CAACC,GAAKC,CAAK,OAChBF,EAAI,OAAOC,OAASC,GAEbF,IACR,CAAE,CAAA;AACL,UAAAA,EAAIC,KAAO;AAAA,YACP,MAAM;AAAA,YACN,SAASC,EAAM,WAAW,CAAC;AAAA,YAC3B,UAAU,CAACA,EAAM,KAAK;AAAA,YACtB,YAAYE,EAAA;AAAA,cACR,iBAAiBH;AAAA,eACdE;AAAA,UACP;AAAA,QACJ,OACG;AACH,gBAAME,IAAU;AAAA,YACZ,MAAM;AAAA,YACN,SAAS,CAAC;AAAA,YACV,YAAY;AAAA,cACR,cAAc,CAAC;AAAA,cACf,OAAOH,EAAM;AAAA,cACb,SAASA,EAAM;AAAA,cACf,KAAKA,EAAM;AAAA,cACX,UAAUA,EAAM;AAAA,cAChB,UAAUA,EAAM;AAAA,YACpB;AAAA,UAAA;AAEJ,UAAAF,EAAIC,KAAOI;AAAA,QACf;AACO,eAAAL;AAAA,MACX;AAAA,MACAV;AAAA,IAAA;AAEJ,IAAAgB;AAAA,MACInB;AAAA,MACAQ;AAAA,MACA,OAAO,KAAKF,EAAS,WAAW,KAAK;AAAA,MACrCM;AAAA,MACAR;AAAA,IAAA;AAAA,EACJ;AACJ,KAAWgB,IAAAd,EAAS,eAAT,QAAAc,EAAqB,SACbD,EAAAnB,GAAUQ,GAAW,EAACa,IAAAf,EAAS,eAAT,gBAAAe,EAAqB,KAAK,GAAGlB,GAAaC,CAAK;AAE5F;"}
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { G as a, g as e } from "./index.4aba3ba6.js";
1
+ import { G as a, g as e } from "./index.383bbd71.js";
2
2
  import "@telia-ace/widget-ui";
3
3
  import "@telia-ace/widget-core";
4
4
  import "@telia-ace/widget-utilities";
package/dist/utils.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const generateGridTemplateAreasValue: (template: string[]) => import("@emotion/utils").SerializedStyles;
1
+ export declare const generateGridTemplateAreasValue: (template: string[]) => import("@emotion/react").SerializedStyles;
package/package.json CHANGED
@@ -1,50 +1,49 @@
1
1
  {
2
- "name": "@telia-ace/widget-components-grid",
3
- "version": "1.0.21-next.6",
4
- "description": "Grid component for ACE Widgets.",
5
- "license": "SEE LICENSE IN LICENSE.txt",
6
- "author": "Telia Company AB",
7
- "keywords": [
8
- "telia"
9
- ],
10
- "main": "dist/index.js",
11
- "sourceMain": "src/index.ts",
12
- "type": "module",
13
- "types": "dist/index.d.ts",
14
- "files": [
15
- "LICENSE.txt",
16
- "README.md",
17
- "dist/"
18
- ],
19
- "publishConfig": {
20
- "access": "public"
21
- },
22
- "scripts": {
23
- "clean": "rimraf ./dist",
24
- "precompile": "tsc -emitDeclarationOnly",
25
- "compile": "vite build"
26
- },
27
- "sideEffects": false,
28
- "dependencies": {
29
- "@telia-ace/widget-core": "^1.0.16-next.14",
30
- "@telia-ace/widget-types-grid": "^1.0.25-next.14",
31
- "@telia-ace/widget-ui": "^1.0.23-next.14",
32
- "@telia-ace/widget-utilities": "^1.0.5-next.4",
33
- "@webprovisions/platform": "^1.1.2"
34
- },
35
- "peerDependencies": {
36
- "@emotion/react": "^11.10.4",
37
- "@emotion/styled": "^11.10.4",
38
- "react": "^18.2.0",
39
- "react-dom": "^18.2.0"
40
- },
41
- "devDependencies": {
42
- "@emotion/react": "^11.10.4",
43
- "@emotion/styled": "^11.10.4",
44
- "@telia-ace/widget-developer-tools": "^1.0.11-next.6",
45
- "@types/react-dom": "^18.0.6",
46
- "react": "^18.2.0",
47
- "react-dom": "^18.2.0"
48
- },
49
- "gitHead": "e478c7449d48be14e8207ae43e4f6cfabf78c0bd"
50
- }
2
+ "name": "@telia-ace/widget-components-grid",
3
+ "version": "1.0.21-next.8",
4
+ "description": "Grid component for ACE Widgets.",
5
+ "license": "SEE LICENSE IN LICENSE.txt",
6
+ "author": "Telia Company AB",
7
+ "keywords": [
8
+ "telia"
9
+ ],
10
+ "main": "dist/index.js",
11
+ "sourceMain": "src/index.ts",
12
+ "type": "module",
13
+ "types": "dist/index.d.ts",
14
+ "files": [
15
+ "LICENSE.txt",
16
+ "README.md",
17
+ "dist/"
18
+ ],
19
+ "publishConfig": {
20
+ "access": "public"
21
+ },
22
+ "sideEffects": false,
23
+ "dependencies": {
24
+ "@telia-ace/widget-core": "^1.0.16-next.16",
25
+ "@telia-ace/widget-types-grid": "^1.0.25-next.16",
26
+ "@telia-ace/widget-ui": "^1.0.23-next.16",
27
+ "@telia-ace/widget-utilities": "^1.0.5-next.6",
28
+ "@webprovisions/platform": "^1.1.2"
29
+ },
30
+ "peerDependencies": {
31
+ "@emotion/react": "^11.10.4",
32
+ "@emotion/styled": "^11.10.4",
33
+ "react": "^18.2.0",
34
+ "react-dom": "^18.2.0"
35
+ },
36
+ "devDependencies": {
37
+ "@emotion/react": "^11.10.5",
38
+ "@emotion/styled": "^11.10.5",
39
+ "@telia-ace/widget-developer-tools": "^1.0.11-next.8",
40
+ "@types/react": "^18.0.24",
41
+ "@types/react-dom": "^18.0.8",
42
+ "react": "^18.2.0",
43
+ "react-dom": "^18.2.0"
44
+ },
45
+ "scripts": {
46
+ "clean": "rimraf ./dist",
47
+ "build": "rimraf ./dist && tsc -emitDeclarationOnly && vite build"
48
+ }
49
+ }
@@ -1,74 +0,0 @@
1
- var D = Object.defineProperty;
2
- var h = Object.getOwnPropertySymbols;
3
- var E = Object.prototype.hasOwnProperty, G = Object.prototype.propertyIsEnumerable;
4
- 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) => {
5
- for (var r in o || (o = {}))
6
- E.call(o, r) && u(e, r, o[r]);
7
- if (h)
8
- for (var r of h(o))
9
- G.call(o, r) && u(e, r, o[r]);
10
- return e;
11
- };
12
- import { createReactComponent as I } from "@telia-ace/widget-ui";
13
- import { createChildren as w } from "@telia-ace/widget-core";
14
- import { Logger as L } from "@telia-ace/widget-utilities";
15
- const H = (e) => !!e.template, V = (e) => I(e, "grid", import("./grid.825393c2.js"), (o) => {
16
- }), _ = (e, o) => {
17
- var m, g, x, l;
18
- const { platform: r, node: C, references: P, definitions: a, views: f, branch: N } = o, t = a[e.definitionId];
19
- if (process.env.NODE_ENV !== "production" && !t) {
20
- L.error(`No definition found for component type '${e.definitionId}'.`);
21
- return;
22
- }
23
- const i = r.createNode(t.type);
24
- 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) => {
25
- const p = { breakpoints: n.breakpoints };
26
- n.properties && i.writeProperties(n.properties, p), n.context && i.writeContext(n.context, p), n.layout && i.writeLayout(n.layout, p);
27
- }), ((m = t.properties) == null ? void 0 : m.areas) && !!((g = t.properties) != null && g.areas)) {
28
- const n = Object.entries(t.properties.areas).reduce(
29
- (p, [c, s]) => {
30
- if (s.child) {
31
- const d = Object.entries(s.areaSettings || {}).reduce((y, [O, j]) => (y[`css-${O}`] = j, y), {});
32
- p[c] = {
33
- type: "area",
34
- context: s.context || {},
35
- children: [s.child],
36
- properties: b({
37
- "css-grid-area": c
38
- }, d)
39
- };
40
- } else {
41
- const d = {
42
- type: "grid",
43
- context: {},
44
- properties: {
45
- areaSettings: {},
46
- areas: s.areas,
47
- context: s.context,
48
- gap: s.gap,
49
- gridArea: s.gridArea,
50
- template: s.template
51
- }
52
- };
53
- p[c] = d;
54
- }
55
- return p;
56
- },
57
- a
58
- );
59
- w(
60
- r,
61
- i,
62
- Object.keys(t.properties.areas),
63
- n,
64
- f
65
- );
66
- } else
67
- (x = t.properties) != null && x.child && w(r, i, [(l = t.properties) == null ? void 0 : l.child], a, f);
68
- };
69
- export {
70
- V as G,
71
- _ as g,
72
- H as i
73
- };
74
- //# sourceMappingURL=index.4aba3ba6.js.map