@telia-ace/widget-components-grid 1.1.2-rc.1 → 1.1.2-rc.2
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.
- package/{grid-29fcfd00.mjs → grid-57a99fbe.mjs} +12 -12
- package/grid-62ef982a.js +14 -0
- package/{index-fd0bf089.js → index-8baaae11.js} +1 -1
- package/index-bcd30e20.mjs +77 -0
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +5 -5
- package/grid-0e98e1b2.js +0 -14
- package/index-580deb6d.mjs +0 -63
|
@@ -5,15 +5,15 @@ import p from "@emotion/styled";
|
|
|
5
5
|
import { Component as g } from "@telia-ace/widget-types-grid";
|
|
6
6
|
import { appendClassNames as l } from "@telia-ace/widget-utilities";
|
|
7
7
|
import { useMemo as f } from "react";
|
|
8
|
-
import { i as u } from "./index-
|
|
8
|
+
import { i as u } from "./index-bcd30e20.mjs";
|
|
9
9
|
import "@telia-ace/widget-core";
|
|
10
10
|
const x = (e) => {
|
|
11
11
|
const r = e.map((t) => "min-content").join(" "), n = e[0].split(" ").map((t) => "1fr").join(" "), a = e.map((t) => `'${t}'`).join(" ");
|
|
12
12
|
return o`
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
grid-template-columns: ${n};
|
|
14
|
+
grid-template-rows: ${r};
|
|
15
|
+
grid-template-areas: ${a};
|
|
16
|
+
`;
|
|
17
17
|
}, $ = (e) => {
|
|
18
18
|
const r = c(), n = f(() => Object.entries(e.areas).map(([a, t]) => {
|
|
19
19
|
const s = r.find((m) => m.name === a);
|
|
@@ -53,14 +53,14 @@ const x = (e) => {
|
|
|
53
53
|
}
|
|
54
54
|
);
|
|
55
55
|
}, h = p.div`
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
56
|
+
display: grid;
|
|
57
|
+
${(e) => e.gridArea && o`
|
|
58
|
+
grid-area: ${e.gridArea};
|
|
59
|
+
`}
|
|
60
|
+
${(e) => x(e.template)}
|
|
61
61
|
${(e) => e.gap && o`
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
grid-gap: ${e.gap}rem;
|
|
63
|
+
`}
|
|
64
64
|
`, _ = ({ className: e }) => {
|
|
65
65
|
const r = d();
|
|
66
66
|
return /* @__PURE__ */ i(
|
package/grid-62ef982a.js
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("@telia-ace/widget-ui"),s=require("@emotion/react"),g=require("@emotion/styled"),m=require("@telia-ace/widget-types-grid"),l=require("@telia-ace/widget-utilities"),u=require("react"),p=require("./index-8baaae11.js");require("@telia-ace/widget-core");const x=e=>{const r=e.map(t=>"min-content").join(" "),a=e[0].split(" ").map(t=>"1fr").join(" "),n=e.map(t=>`'${t}'`).join(" ");return s.css`
|
|
2
|
+
grid-template-columns: ${a};
|
|
3
|
+
grid-template-rows: ${r};
|
|
4
|
+
grid-template-areas: ${n};
|
|
5
|
+
`},f=e=>{const r=o.useChildren(),a=u.useMemo(()=>Object.entries(e.areas).map(([n,t])=>{const c=r.find(d=>d.name===n);return p.isNestedGrid(t)?{name:n,componentDef:c,context:t.context,areaSettings:t.areaSettings,template:t.template,areas:t.areas,gap:t.gap}:{name:n,componentDef:c,areaSettings:t.areaSettings,child:t.child,context:t.context}}),[e,r]);return i.jsx($,{"data-grid-area":e.gridArea,gridArea:e.gridArea,gap:e.gap,template:e.template,className:l.appendClassNames(e.className,"humany-grid"),children:a.map(n=>n.componentDef?i.jsx(m.Component,{id:n.componentDef.id,branch:"default",context:{}},n.componentDef.id):null)})},$=g.div`
|
|
6
|
+
display: grid;
|
|
7
|
+
${e=>e.gridArea&&s.css`
|
|
8
|
+
grid-area: ${e.gridArea};
|
|
9
|
+
`}
|
|
10
|
+
${e=>x(e.template)}
|
|
11
|
+
${e=>e.gap&&s.css`
|
|
12
|
+
grid-gap: ${e.gap}rem;
|
|
13
|
+
`}
|
|
14
|
+
`,j=({className:e})=>{const r=o.useProperties();return i.jsx(f,{template:r.template,areas:r.areas,gap:r.gap,areaSettings:r.areaSettings,context:r.context})};exports.default=j;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const N=require("@telia-ace/widget-ui"),C=require("@telia-ace/widget-core"),q=require("@telia-ace/widget-utilities"),G=o=>!!o.template,O=o=>N.createReactComponent(o,"grid",Promise.resolve().then(()=>require("./grid-
|
|
1
|
+
"use strict";const N=require("@telia-ace/widget-ui"),C=require("@telia-ace/widget-core"),q=require("@telia-ace/widget-utilities"),G=o=>!!o.template,O=o=>N.createReactComponent(o,"grid",Promise.resolve().then(()=>require("./grid-62ef982a.js")),d=>{}),P=(o,d)=>{var g,m,l,u;const{platform:s,node:h,references:j,definitions:p,views:f,branch:w}=d,e=p[o.definitionId];if(process.env.NODE_ENV!=="production"&&!e){q.Logger.error(`No definition found for component type '${o.definitionId}'.`);return}const t=s.createNode(e.type);if(t.name=o.definitionId,t.tags=e.tags||[],e.properties&&t.writeProperties(e.properties),e.context&&t.writeContext(e.context),e.layout&&t.writeLayout(e.layout),h.appendChild(t,w),o.overrides.forEach(r=>{const n={breakpoints:r.breakpoints};r.properties&&t.writeProperties(r.properties,n),r.context&&t.writeContext(r.context,n),r.layout&&t.writeLayout(r.layout,n)}),(g=e.properties)!=null&&g.areas&&((m=e.properties)!=null&&m.areas)){const r=Object.entries(e.properties.areas).reduce((n,[c,i])=>{if(i.child){const a=Object.entries(i.areaSettings||{}).reduce((x,[y,b])=>(x[`css-${y}`]=b,x),{});n[c]={type:"area",context:i.context||{},children:[i.child],properties:{"css-grid-area":c,...a}}}else{const a={type:"grid",context:{},properties:{areaSettings:{},areas:i.areas,context:i.context,gap:i.gap,gridArea:i.gridArea,template:i.template}};n[c]=a}return n},p);C.createChildren(s,t,Object.keys(e.properties.areas),r,f)}else(l=e.properties)!=null&&l.child&&C.createChildren(s,t,[(u=e.properties)==null?void 0:u.child],p,f)};exports.GridComponent=O;exports.gridComponentHandler=P;exports.isNestedGrid=G;
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { createReactComponent as N } from "@telia-ace/widget-ui";
|
|
2
|
+
import { createChildren as h } from "@telia-ace/widget-core";
|
|
3
|
+
import { Logger as O } from "@telia-ace/widget-utilities";
|
|
4
|
+
const I = (i) => !!i.template, L = (i) => N(
|
|
5
|
+
i,
|
|
6
|
+
"grid",
|
|
7
|
+
import("./grid-57a99fbe.mjs"),
|
|
8
|
+
(d) => {
|
|
9
|
+
}
|
|
10
|
+
), P = (i, d) => {
|
|
11
|
+
var m, g, x, l;
|
|
12
|
+
const { platform: s, node: u, references: j, definitions: p, views: f, branch: b } = d, e = p[i.definitionId];
|
|
13
|
+
if (process.env.NODE_ENV !== "production" && !e) {
|
|
14
|
+
O.error(
|
|
15
|
+
`No definition found for component type '${i.definitionId}'.`
|
|
16
|
+
);
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
const t = s.createNode(e.type);
|
|
20
|
+
if (t.name = i.definitionId, t.tags = e.tags || [], e.properties && t.writeProperties(e.properties), e.context && t.writeContext(e.context), e.layout && t.writeLayout(e.layout), u.appendChild(t, b), i.overrides.forEach((r) => {
|
|
21
|
+
const n = { breakpoints: r.breakpoints };
|
|
22
|
+
r.properties && t.writeProperties(r.properties, n), r.context && t.writeContext(r.context, n), r.layout && t.writeLayout(r.layout, n);
|
|
23
|
+
}), (m = e.properties) != null && m.areas && ((g = e.properties) != null && g.areas)) {
|
|
24
|
+
const r = Object.entries(
|
|
25
|
+
e.properties.areas
|
|
26
|
+
).reduce((n, [a, o]) => {
|
|
27
|
+
if (o.child) {
|
|
28
|
+
const c = Object.entries(
|
|
29
|
+
o.areaSettings || {}
|
|
30
|
+
).reduce((y, [w, C]) => (y[`css-${w}`] = C, y), {});
|
|
31
|
+
n[a] = {
|
|
32
|
+
type: "area",
|
|
33
|
+
context: o.context || {},
|
|
34
|
+
children: [o.child],
|
|
35
|
+
properties: {
|
|
36
|
+
"css-grid-area": a,
|
|
37
|
+
...c
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
} else {
|
|
41
|
+
const c = {
|
|
42
|
+
type: "grid",
|
|
43
|
+
context: {},
|
|
44
|
+
properties: {
|
|
45
|
+
areaSettings: {},
|
|
46
|
+
areas: o.areas,
|
|
47
|
+
context: o.context,
|
|
48
|
+
gap: o.gap,
|
|
49
|
+
gridArea: o.gridArea,
|
|
50
|
+
template: o.template
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
n[a] = c;
|
|
54
|
+
}
|
|
55
|
+
return n;
|
|
56
|
+
}, p);
|
|
57
|
+
h(
|
|
58
|
+
s,
|
|
59
|
+
t,
|
|
60
|
+
Object.keys(e.properties.areas),
|
|
61
|
+
r,
|
|
62
|
+
f
|
|
63
|
+
);
|
|
64
|
+
} else
|
|
65
|
+
(x = e.properties) != null && x.child && h(
|
|
66
|
+
s,
|
|
67
|
+
t,
|
|
68
|
+
[(l = e.properties) == null ? void 0 : l.child],
|
|
69
|
+
p,
|
|
70
|
+
f
|
|
71
|
+
);
|
|
72
|
+
};
|
|
73
|
+
export {
|
|
74
|
+
L as G,
|
|
75
|
+
P as g,
|
|
76
|
+
I as i
|
|
77
|
+
};
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index-8baaae11.js");require("@telia-ace/widget-ui");require("@telia-ace/widget-core");require("@telia-ace/widget-utilities");exports.default=e.GridComponent;exports.gridComponentHandler=e.gridComponentHandler;
|
package/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/widget-components-grid",
|
|
3
|
-
"version": "1.1.2-rc.
|
|
3
|
+
"version": "1.1.2-rc.2",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"types": "./index.d.ts",
|
|
6
6
|
"exports": {
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
}
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@telia-ace/widget-core": "^1.1.2-rc.
|
|
14
|
-
"@telia-ace/widget-types-grid": "^1.1.2-rc.
|
|
15
|
-
"@telia-ace/widget-ui": "^1.1.2-rc.
|
|
16
|
-
"@telia-ace/widget-utilities": "^1.1.2-rc.
|
|
13
|
+
"@telia-ace/widget-core": "^1.1.2-rc.2",
|
|
14
|
+
"@telia-ace/widget-types-grid": "^1.1.2-rc.2",
|
|
15
|
+
"@telia-ace/widget-ui": "^1.1.2-rc.2",
|
|
16
|
+
"@telia-ace/widget-utilities": "^1.1.2-rc.2",
|
|
17
17
|
"@webprovisions/platform": "^1.1.4"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
package/grid-0e98e1b2.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("@telia-ace/widget-ui"),s=require("@emotion/react"),g=require("@emotion/styled"),m=require("@telia-ace/widget-types-grid"),l=require("@telia-ace/widget-utilities"),u=require("react"),p=require("./index-fd0bf089.js");require("@telia-ace/widget-core");const x=e=>{const r=e.map(t=>"min-content").join(" "),a=e[0].split(" ").map(t=>"1fr").join(" "),n=e.map(t=>`'${t}'`).join(" ");return s.css`
|
|
2
|
-
grid-template-columns: ${a};
|
|
3
|
-
grid-template-rows: ${r};
|
|
4
|
-
grid-template-areas: ${n};
|
|
5
|
-
`},f=e=>{const r=o.useChildren(),a=u.useMemo(()=>Object.entries(e.areas).map(([n,t])=>{const c=r.find(d=>d.name===n);return p.isNestedGrid(t)?{name:n,componentDef:c,context:t.context,areaSettings:t.areaSettings,template:t.template,areas:t.areas,gap:t.gap}:{name:n,componentDef:c,areaSettings:t.areaSettings,child:t.child,context:t.context}}),[e,r]);return i.jsx($,{"data-grid-area":e.gridArea,gridArea:e.gridArea,gap:e.gap,template:e.template,className:l.appendClassNames(e.className,"humany-grid"),children:a.map(n=>n.componentDef?i.jsx(m.Component,{id:n.componentDef.id,branch:"default",context:{}},n.componentDef.id):null)})},$=g.div`
|
|
6
|
-
display: grid;
|
|
7
|
-
${e=>e.gridArea&&s.css`
|
|
8
|
-
grid-area: ${e.gridArea};
|
|
9
|
-
`}
|
|
10
|
-
${e=>x(e.template)}
|
|
11
|
-
${e=>e.gap&&s.css`
|
|
12
|
-
grid-gap: ${e.gap}rem;
|
|
13
|
-
`}
|
|
14
|
-
`,j=({className:e})=>{const r=o.useProperties();return i.jsx(f,{template:r.template,areas:r.areas,gap:r.gap,areaSettings:r.areaSettings,context:r.context})};exports.default=j;
|
package/index-580deb6d.mjs
DELETED
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { createReactComponent as N } from "@telia-ace/widget-ui";
|
|
2
|
-
import { createChildren as h } from "@telia-ace/widget-core";
|
|
3
|
-
import { Logger as O } from "@telia-ace/widget-utilities";
|
|
4
|
-
const I = (i) => !!i.template, L = (i) => N(i, "grid", import("./grid-29fcfd00.mjs"), (d) => {
|
|
5
|
-
}), P = (i, d) => {
|
|
6
|
-
var m, g, x, l;
|
|
7
|
-
const { platform: s, node: u, references: j, definitions: p, views: f, branch: b } = d, e = p[i.definitionId];
|
|
8
|
-
if (process.env.NODE_ENV !== "production" && !e) {
|
|
9
|
-
O.error(`No definition found for component type '${i.definitionId}'.`);
|
|
10
|
-
return;
|
|
11
|
-
}
|
|
12
|
-
const t = s.createNode(e.type);
|
|
13
|
-
if (t.name = i.definitionId, t.tags = e.tags || [], e.properties && t.writeProperties(e.properties), e.context && t.writeContext(e.context), e.layout && t.writeLayout(e.layout), u.appendChild(t, b), i.overrides.forEach((r) => {
|
|
14
|
-
const n = { breakpoints: r.breakpoints };
|
|
15
|
-
r.properties && t.writeProperties(r.properties, n), r.context && t.writeContext(r.context, n), r.layout && t.writeLayout(r.layout, n);
|
|
16
|
-
}), (m = e.properties) != null && m.areas && ((g = e.properties) != null && g.areas)) {
|
|
17
|
-
const r = Object.entries(e.properties.areas).reduce(
|
|
18
|
-
(n, [a, o]) => {
|
|
19
|
-
if (o.child) {
|
|
20
|
-
const c = Object.entries(o.areaSettings || {}).reduce((y, [w, C]) => (y[`css-${w}`] = C, y), {});
|
|
21
|
-
n[a] = {
|
|
22
|
-
type: "area",
|
|
23
|
-
context: o.context || {},
|
|
24
|
-
children: [o.child],
|
|
25
|
-
properties: {
|
|
26
|
-
"css-grid-area": a,
|
|
27
|
-
...c
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
} else {
|
|
31
|
-
const c = {
|
|
32
|
-
type: "grid",
|
|
33
|
-
context: {},
|
|
34
|
-
properties: {
|
|
35
|
-
areaSettings: {},
|
|
36
|
-
areas: o.areas,
|
|
37
|
-
context: o.context,
|
|
38
|
-
gap: o.gap,
|
|
39
|
-
gridArea: o.gridArea,
|
|
40
|
-
template: o.template
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
n[a] = c;
|
|
44
|
-
}
|
|
45
|
-
return n;
|
|
46
|
-
},
|
|
47
|
-
p
|
|
48
|
-
);
|
|
49
|
-
h(
|
|
50
|
-
s,
|
|
51
|
-
t,
|
|
52
|
-
Object.keys(e.properties.areas),
|
|
53
|
-
r,
|
|
54
|
-
f
|
|
55
|
-
);
|
|
56
|
-
} else
|
|
57
|
-
(x = e.properties) != null && x.child && h(s, t, [(l = e.properties) == null ? void 0 : l.child], p, f);
|
|
58
|
-
};
|
|
59
|
-
export {
|
|
60
|
-
L as G,
|
|
61
|
-
P as g,
|
|
62
|
-
I as i
|
|
63
|
-
};
|