@telia-ace/widget-components-area 1.3.57 → 1.3.58-rc.1
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/area-C_etcvzs.mjs +182 -0
- package/area-z-whIfPj.js +50 -0
- package/{index-CWPZwxU2.js → index-COv3jJWQ.js} +1 -1
- package/{index-B0bvuHPd.mjs → index-DFgNeZBv.mjs} +1 -1
- package/index.js +1 -1
- package/index.mjs +1 -1
- package/package.json +5 -5
- package/area-CZoTvAjY.mjs +0 -176
- package/area-DyI3HP8x.js +0 -50
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { jsx as n, jsxs as G } from "react/jsx-runtime";
|
|
2
|
+
import { css as S } from "@emotion/react";
|
|
3
|
+
import u from "@emotion/styled";
|
|
4
|
+
import { WidgetRenderState as d } from "@telia-ace/widget-core";
|
|
5
|
+
import { isModalActive as I, genericComponentStyling as T, Component as w } from "@telia-ace/widget-types-grid";
|
|
6
|
+
import { useContainer as A, TransitionComponent as F, Grid as E, useComponentDescriptor as H, useRenderState as J, useContext as K, useProperties as Q, useChildren as U, useScroll as V, createEmptyComponent as X, ColumnContext as D, filterCssProps as Y, Dropdown as Z, DrawerAnimationType as _, Drawer as ee, filterCssPropsStyle as te, paddedBorderTabStyle as ne, Button as re, Text as oe, SymbolBadge as ie } from "@telia-ace/widget-ui";
|
|
7
|
+
import { appendClassNames as b, Logger as se } from "@telia-ace/widget-utilities";
|
|
8
|
+
import { forwardRef as ae, useEffect as le, useCallback as ce } from "react";
|
|
9
|
+
import { A as m } from "./index-DFgNeZBv.mjs";
|
|
10
|
+
const me = ae(
|
|
11
|
+
({ children: e, className: t, renderState: o, animation: s, ...p }, c) => {
|
|
12
|
+
const a = A();
|
|
13
|
+
return le(() => {
|
|
14
|
+
if (o === "open") {
|
|
15
|
+
const i = a.get("widgetDOMElement");
|
|
16
|
+
if (a.get("triggerDOMElement") && i && !I(i))
|
|
17
|
+
return;
|
|
18
|
+
const l = document.querySelector(
|
|
19
|
+
`[data-node-id='${p.id}']`
|
|
20
|
+
);
|
|
21
|
+
l && l.focus();
|
|
22
|
+
}
|
|
23
|
+
}), o ? /* @__PURE__ */ n(
|
|
24
|
+
F,
|
|
25
|
+
{
|
|
26
|
+
mountOnEnter: o !== d.hidden,
|
|
27
|
+
timeout: 200,
|
|
28
|
+
in: o === d.open,
|
|
29
|
+
transitions: s,
|
|
30
|
+
unmountOnExit: o === d.closed,
|
|
31
|
+
children: (i, l) => /* @__PURE__ */ n(
|
|
32
|
+
de,
|
|
33
|
+
{
|
|
34
|
+
...p,
|
|
35
|
+
tabIndex: "-1",
|
|
36
|
+
animationCss: l,
|
|
37
|
+
"data-state": i,
|
|
38
|
+
ref: c,
|
|
39
|
+
className: b("humany-animated-area", t),
|
|
40
|
+
children: e
|
|
41
|
+
}
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
) : null;
|
|
45
|
+
}
|
|
46
|
+
), de = u(E)`
|
|
47
|
+
${T}
|
|
48
|
+
${(e) => !!e.animationCss && e.animationCss}
|
|
49
|
+
${(e) => !!e.scrollableCss && e.scrollableCss}
|
|
50
|
+
text-size-adjust: 100%;
|
|
51
|
+
input::-ms-clear {
|
|
52
|
+
display: none;
|
|
53
|
+
}
|
|
54
|
+
:focus-visible {
|
|
55
|
+
outline: none !important;
|
|
56
|
+
}
|
|
57
|
+
${(e) => e.hidden && e["data-state"] === "exited" && S`
|
|
58
|
+
visibility: collapse;
|
|
59
|
+
pointer-events: none;
|
|
60
|
+
`};
|
|
61
|
+
`, Se = ({ className: e, ...t }) => {
|
|
62
|
+
const { name: o } = H(), s = J(), p = K(), c = Q(), a = U(), i = A(), { gap: l = "0" } = p, {
|
|
63
|
+
columns: h = 1,
|
|
64
|
+
animation: f = "none",
|
|
65
|
+
scrollable: P = !1,
|
|
66
|
+
mode: g = m.Static,
|
|
67
|
+
trigger: M = {},
|
|
68
|
+
fullScreen: O,
|
|
69
|
+
header: j,
|
|
70
|
+
...z
|
|
71
|
+
} = c, { size: B = 24, symbol: C, label: $, ariaLabel: N, ...R } = M, [L, W] = V(P), k = ce(
|
|
72
|
+
(r) => {
|
|
73
|
+
const { events: q } = i.get("$widget");
|
|
74
|
+
return q.dispatch("widget:area-rendered", {
|
|
75
|
+
name: o,
|
|
76
|
+
properties: c,
|
|
77
|
+
element: r
|
|
78
|
+
}), W.current = r, r;
|
|
79
|
+
},
|
|
80
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
81
|
+
[c, s]
|
|
82
|
+
);
|
|
83
|
+
if (!a.length)
|
|
84
|
+
return X(i, {
|
|
85
|
+
...t,
|
|
86
|
+
className: b(e, "humany-area")
|
|
87
|
+
});
|
|
88
|
+
const x = {
|
|
89
|
+
...t,
|
|
90
|
+
className: b(
|
|
91
|
+
e,
|
|
92
|
+
"humany-area",
|
|
93
|
+
`humany-area-${o}`
|
|
94
|
+
),
|
|
95
|
+
scrollableCss: L,
|
|
96
|
+
...z,
|
|
97
|
+
columns: h,
|
|
98
|
+
gap: l,
|
|
99
|
+
renderState: s,
|
|
100
|
+
animation: f,
|
|
101
|
+
hidden: s === d.hidden,
|
|
102
|
+
ref: k
|
|
103
|
+
}, y = f !== "none" ? /* @__PURE__ */ n(D.Provider, { value: h, children: /* @__PURE__ */ n(me, { ...x, children: a.map((r) => /* @__PURE__ */ n(w, { id: r.id, branch: "default" }, r.id)) }) }) : s === d.closed ? null : /* @__PURE__ */ n(D.Provider, { value: h, children: /* @__PURE__ */ n(ge, { ...x, children: a.map((r) => /* @__PURE__ */ n(w, { id: r.id, branch: "default" }, r.id)) }) });
|
|
104
|
+
if (g === m.Static)
|
|
105
|
+
return y;
|
|
106
|
+
const v = /* @__PURE__ */ G(
|
|
107
|
+
ue,
|
|
108
|
+
{
|
|
109
|
+
className: "humany-area-trigger",
|
|
110
|
+
title: N,
|
|
111
|
+
...Y(R),
|
|
112
|
+
children: [
|
|
113
|
+
$ && /* @__PURE__ */ n(pe, { children: $ }),
|
|
114
|
+
C && /* @__PURE__ */ n(fe, { symbol: C, size: B })
|
|
115
|
+
]
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
if (g === m.Dropdown)
|
|
119
|
+
return /* @__PURE__ */ n(Z, { trigger: v, children: y });
|
|
120
|
+
if (g === m.Drawer) {
|
|
121
|
+
const r = Object.values(_).includes(f) && {
|
|
122
|
+
type: f
|
|
123
|
+
} || void 0;
|
|
124
|
+
return /* @__PURE__ */ n(
|
|
125
|
+
ee,
|
|
126
|
+
{
|
|
127
|
+
header: j,
|
|
128
|
+
animation: r,
|
|
129
|
+
fullScreen: O,
|
|
130
|
+
trigger: v,
|
|
131
|
+
children: y
|
|
132
|
+
}
|
|
133
|
+
);
|
|
134
|
+
}
|
|
135
|
+
return g === m.Modal && se.warn("modal area not implemented"), null;
|
|
136
|
+
}, ue = u(re)`
|
|
137
|
+
display: flex;
|
|
138
|
+
align-items: inherit;
|
|
139
|
+
align-self: center;
|
|
140
|
+
width: fit-content;
|
|
141
|
+
height: fit-content;
|
|
142
|
+
${te}
|
|
143
|
+
|
|
144
|
+
${(e) => e.theme.fonts && `
|
|
145
|
+
font-family: ${e.theme.fonts.type};
|
|
146
|
+
font-size: ${e.theme.fonts.normal};
|
|
147
|
+
`}
|
|
148
|
+
|
|
149
|
+
&:focus-visible {
|
|
150
|
+
${ne};
|
|
151
|
+
}
|
|
152
|
+
`, pe = u(oe)`
|
|
153
|
+
margin: 0 ${(e) => {
|
|
154
|
+
var t;
|
|
155
|
+
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
156
|
+
}} 0 0;
|
|
157
|
+
color: ${(e) => {
|
|
158
|
+
var t;
|
|
159
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
160
|
+
}};
|
|
161
|
+
`, fe = u(ie)`
|
|
162
|
+
path {
|
|
163
|
+
fill: ${(e) => {
|
|
164
|
+
var t;
|
|
165
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
166
|
+
}};
|
|
167
|
+
}
|
|
168
|
+
`, ge = u(E)`
|
|
169
|
+
${T}
|
|
170
|
+
${(e) => !!e.scrollableCss && e.scrollableCss}
|
|
171
|
+
text-size-adjust: 100%;
|
|
172
|
+
input::-ms-clear {
|
|
173
|
+
display: none;
|
|
174
|
+
}
|
|
175
|
+
${(e) => e.hidden && S`
|
|
176
|
+
visibility: collapse;
|
|
177
|
+
pointer-events: none;
|
|
178
|
+
`};
|
|
179
|
+
`;
|
|
180
|
+
export {
|
|
181
|
+
Se as default
|
|
182
|
+
};
|
package/area-z-whIfPj.js
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),M=require("@emotion/react"),p=require("@emotion/styled"),m=require("@telia-ace/widget-core"),g=require("@telia-ace/widget-types-grid"),t=require("@telia-ace/widget-ui"),x=require("@telia-ace/widget-utilities"),$=require("react"),u=require("./index-COv3jJWQ.js"),G=$.forwardRef(({children:e,className:n,renderState:i,animation:a,...f},c)=>{const l=t.useContainer();return $.useEffect(()=>{if(i==="open"){const o=l.get("widgetDOMElement");if(l.get("triggerDOMElement")&&o&&!g.isModalActive(o))return;const d=document.querySelector(`[data-node-id='${f.id}']`);d&&d.focus()}}),i?r.jsx(t.TransitionComponent,{mountOnEnter:i!==m.WidgetRenderState.hidden,timeout:200,in:i===m.WidgetRenderState.open,transitions:a,unmountOnExit:i===m.WidgetRenderState.closed,children:(o,d)=>r.jsx(L,{...f,tabIndex:"-1",animationCss:d,"data-state":o,ref:c,className:x.appendClassNames("humany-animated-area",n),children:e})}):null}),L=p(t.Grid)`
|
|
2
|
+
${g.genericComponentStyling}
|
|
3
|
+
${e=>!!e.animationCss&&e.animationCss}
|
|
4
|
+
${e=>!!e.scrollableCss&&e.scrollableCss}
|
|
5
|
+
text-size-adjust: 100%;
|
|
6
|
+
input::-ms-clear {
|
|
7
|
+
display: none;
|
|
8
|
+
}
|
|
9
|
+
:focus-visible {
|
|
10
|
+
outline: none !important;
|
|
11
|
+
}
|
|
12
|
+
${e=>e.hidden&&e["data-state"]==="exited"&&M.css`
|
|
13
|
+
visibility: collapse;
|
|
14
|
+
pointer-events: none;
|
|
15
|
+
`};
|
|
16
|
+
`,U=({className:e,...n})=>{const{name:i}=t.useComponentDescriptor(),a=t.useRenderState(),f=t.useContext(),c=t.useProperties(),l=t.useChildren(),o=t.useContainer(),{gap:d="0"}=f,{columns:y=1,animation:h="none",scrollable:q=!1,mode:C=u.AreaMode.Static,trigger:A={},fullScreen:T,header:D,...R}=c,{size:P=24,symbol:j,label:w,ariaLabel:E,...O}=A,[W,N]=t.useScroll(q),z=$.useCallback(s=>{const{events:B}=o.get("$widget");return B.dispatch("widget:area-rendered",{name:i,properties:c,element:s}),N.current=s,s},[c,a]);if(!l.length)return t.createEmptyComponent(o,{...n,className:x.appendClassNames(e,"humany-area")});const S={...n,className:x.appendClassNames(e,"humany-area",`humany-area-${i}`),scrollableCss:W,...R,columns:y,gap:d,renderState:a,animation:h,hidden:a===m.WidgetRenderState.hidden,ref:z},b=h!=="none"?r.jsx(t.ColumnContext.Provider,{value:y,children:r.jsx(G,{...S,children:l.map(s=>r.jsx(g.Component,{id:s.id,branch:"default"},s.id))})}):a===m.WidgetRenderState.closed?null:r.jsx(t.ColumnContext.Provider,{value:y,children:r.jsx(H,{...S,children:l.map(s=>r.jsx(g.Component,{id:s.id,branch:"default"},s.id))})});if(C===u.AreaMode.Static)return b;const v=r.jsxs(k,{className:"humany-area-trigger",title:E,...t.filterCssProps(O),children:[w&&r.jsx(I,{children:w}),j&&r.jsx(F,{symbol:j,size:P})]});if(C===u.AreaMode.Dropdown)return r.jsx(t.Dropdown,{trigger:v,children:b});if(C===u.AreaMode.Drawer){const s=Object.values(t.DrawerAnimationType).includes(h)&&{type:h}||void 0;return r.jsx(t.Drawer,{header:D,animation:s,fullScreen:T,trigger:v,children:b})}return C===u.AreaMode.Modal&&x.Logger.warn("modal area not implemented"),null},k=p(t.Button)`
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: inherit;
|
|
19
|
+
align-self: center;
|
|
20
|
+
width: fit-content;
|
|
21
|
+
height: fit-content;
|
|
22
|
+
${t.filterCssPropsStyle}
|
|
23
|
+
|
|
24
|
+
${e=>e.theme.fonts&&`
|
|
25
|
+
font-family: ${e.theme.fonts.type};
|
|
26
|
+
font-size: ${e.theme.fonts.normal};
|
|
27
|
+
`}
|
|
28
|
+
|
|
29
|
+
&:focus-visible {
|
|
30
|
+
${t.paddedBorderTabStyle};
|
|
31
|
+
}
|
|
32
|
+
`,I=p(t.Text)`
|
|
33
|
+
margin: 0 ${e=>{var n;return(n=e.theme.sizes)==null?void 0:n.small}} 0 0;
|
|
34
|
+
color: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
|
|
35
|
+
`,F=p(t.SymbolBadge)`
|
|
36
|
+
path {
|
|
37
|
+
fill: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
|
|
38
|
+
}
|
|
39
|
+
`,H=p(t.Grid)`
|
|
40
|
+
${g.genericComponentStyling}
|
|
41
|
+
${e=>!!e.scrollableCss&&e.scrollableCss}
|
|
42
|
+
text-size-adjust: 100%;
|
|
43
|
+
input::-ms-clear {
|
|
44
|
+
display: none;
|
|
45
|
+
}
|
|
46
|
+
${e=>e.hidden&&M.css`
|
|
47
|
+
visibility: collapse;
|
|
48
|
+
pointer-events: none;
|
|
49
|
+
`};
|
|
50
|
+
`;exports.default=U;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const t=require("@telia-ace/widget-ui");var r=(e=>(e.Static="static",e.Drawer="drawer",e.Dropdown="dropdown",e.Modal="modal",e))(r||{});const o=e=>t.createReactComponent(e,"area",Promise.resolve().then(()=>require("./area-
|
|
1
|
+
"use strict";const t=require("@telia-ace/widget-ui");var r=(e=>(e.Static="static",e.Drawer="drawer",e.Dropdown="dropdown",e.Modal="modal",e))(r||{});const o=e=>t.createReactComponent(e,"area",Promise.resolve().then(()=>require("./area-z-whIfPj.js")),n=>{});exports.AreaComponent=o;exports.AreaMode=r;
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";const e=require("./index-
|
|
1
|
+
"use strict";const e=require("./index-COv3jJWQ.js");module.exports=e.AreaComponent;
|
package/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/widget-components-area",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.58-rc.1",
|
|
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.3.
|
|
14
|
-
"@telia-ace/widget-types-grid": "^1.3.
|
|
15
|
-
"@telia-ace/widget-ui": "^1.3.
|
|
16
|
-
"@telia-ace/widget-utilities": "^1.3.
|
|
13
|
+
"@telia-ace/widget-core": "^1.3.58-rc.1",
|
|
14
|
+
"@telia-ace/widget-types-grid": "^1.3.58-rc.1",
|
|
15
|
+
"@telia-ace/widget-ui": "^1.3.58-rc.1",
|
|
16
|
+
"@telia-ace/widget-utilities": "^1.3.58-rc.1",
|
|
17
17
|
"@webprovisions/platform": "^1.1.4"
|
|
18
18
|
},
|
|
19
19
|
"peerDependencies": {
|
package/area-CZoTvAjY.mjs
DELETED
|
@@ -1,176 +0,0 @@
|
|
|
1
|
-
import { jsx as n, jsxs as q } from "react/jsx-runtime";
|
|
2
|
-
import { css as S } from "@emotion/react";
|
|
3
|
-
import m from "@emotion/styled";
|
|
4
|
-
import { WidgetRenderState as c } from "@telia-ace/widget-core";
|
|
5
|
-
import { genericComponentStyling as T, Component as v } from "@telia-ace/widget-types-grid";
|
|
6
|
-
import { TransitionComponent as G, Grid as P, useComponentDescriptor as I, useRenderState as F, useContext as H, useProperties as J, useChildren as K, useContainer as Q, useScroll as U, createEmptyComponent as V, ColumnContext as w, filterCssProps as X, Dropdown as Y, DrawerAnimationType as Z, Drawer as _, filterCssPropsStyle as ee, paddedBorderTabStyle as te, Button as ne, Text as re, SymbolBadge as oe } from "@telia-ace/widget-ui";
|
|
7
|
-
import { appendClassNames as y, Logger as ie } from "@telia-ace/widget-utilities";
|
|
8
|
-
import { forwardRef as se, useEffect as ae, useCallback as le } from "react";
|
|
9
|
-
import { A as l } from "./index-B0bvuHPd.mjs";
|
|
10
|
-
const ce = se(
|
|
11
|
-
({ children: e, className: t, renderState: o, animation: s, ...d }, a) => (ae(() => {
|
|
12
|
-
if (o === "open") {
|
|
13
|
-
const i = document.querySelector(
|
|
14
|
-
`[data-node-id='${d.id}']`
|
|
15
|
-
);
|
|
16
|
-
i && i.focus();
|
|
17
|
-
}
|
|
18
|
-
}), o ? /* @__PURE__ */ n(
|
|
19
|
-
G,
|
|
20
|
-
{
|
|
21
|
-
mountOnEnter: o !== c.hidden,
|
|
22
|
-
timeout: 200,
|
|
23
|
-
in: o === c.open,
|
|
24
|
-
transitions: s,
|
|
25
|
-
unmountOnExit: o === c.closed,
|
|
26
|
-
children: (i, u) => /* @__PURE__ */ n(
|
|
27
|
-
me,
|
|
28
|
-
{
|
|
29
|
-
...d,
|
|
30
|
-
tabIndex: "-1",
|
|
31
|
-
animationCss: u,
|
|
32
|
-
"data-state": i,
|
|
33
|
-
ref: a,
|
|
34
|
-
className: y("humany-animated-area", t),
|
|
35
|
-
children: e
|
|
36
|
-
}
|
|
37
|
-
)
|
|
38
|
-
}
|
|
39
|
-
) : null)
|
|
40
|
-
), me = m(P)`
|
|
41
|
-
${T}
|
|
42
|
-
${(e) => !!e.animationCss && e.animationCss}
|
|
43
|
-
${(e) => !!e.scrollableCss && e.scrollableCss}
|
|
44
|
-
text-size-adjust: 100%;
|
|
45
|
-
input::-ms-clear {
|
|
46
|
-
display: none;
|
|
47
|
-
}
|
|
48
|
-
:focus-visible {
|
|
49
|
-
outline: none !important;
|
|
50
|
-
}
|
|
51
|
-
${(e) => e.hidden && e["data-state"] === "exited" && S`
|
|
52
|
-
visibility: collapse;
|
|
53
|
-
pointer-events: none;
|
|
54
|
-
`};
|
|
55
|
-
`, Se = ({ className: e, ...t }) => {
|
|
56
|
-
const { name: o } = I(), s = F(), d = H(), a = J(), i = K(), u = Q(), { gap: A = "0" } = d, {
|
|
57
|
-
columns: g = 1,
|
|
58
|
-
animation: p = "none",
|
|
59
|
-
scrollable: D = !1,
|
|
60
|
-
mode: f = l.Static,
|
|
61
|
-
trigger: j = {},
|
|
62
|
-
fullScreen: z,
|
|
63
|
-
header: B,
|
|
64
|
-
...E
|
|
65
|
-
} = a, { size: N = 24, symbol: b, label: C, ariaLabel: R, ...L } = j, [O, W] = U(D), M = le(
|
|
66
|
-
(r) => {
|
|
67
|
-
const { events: k } = u.get("$widget");
|
|
68
|
-
return k.dispatch("widget:area-rendered", {
|
|
69
|
-
name: o,
|
|
70
|
-
properties: a,
|
|
71
|
-
element: r
|
|
72
|
-
}), W.current = r, r;
|
|
73
|
-
},
|
|
74
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
75
|
-
[a, s]
|
|
76
|
-
);
|
|
77
|
-
if (!i.length)
|
|
78
|
-
return V(u, {
|
|
79
|
-
...t,
|
|
80
|
-
className: y(e, "humany-area")
|
|
81
|
-
});
|
|
82
|
-
const $ = {
|
|
83
|
-
...t,
|
|
84
|
-
className: y(
|
|
85
|
-
e,
|
|
86
|
-
"humany-area",
|
|
87
|
-
`humany-area-${o}`
|
|
88
|
-
),
|
|
89
|
-
scrollableCss: O,
|
|
90
|
-
...E,
|
|
91
|
-
columns: g,
|
|
92
|
-
gap: A,
|
|
93
|
-
renderState: s,
|
|
94
|
-
animation: p,
|
|
95
|
-
hidden: s === c.hidden,
|
|
96
|
-
ref: M
|
|
97
|
-
}, h = p !== "none" ? /* @__PURE__ */ n(w.Provider, { value: g, children: /* @__PURE__ */ n(ce, { ...$, children: i.map((r) => /* @__PURE__ */ n(v, { id: r.id, branch: "default" }, r.id)) }) }) : s === c.closed ? null : /* @__PURE__ */ n(w.Provider, { value: g, children: /* @__PURE__ */ n(fe, { ...$, children: i.map((r) => /* @__PURE__ */ n(v, { id: r.id, branch: "default" }, r.id)) }) });
|
|
98
|
-
if (f === l.Static)
|
|
99
|
-
return h;
|
|
100
|
-
const x = /* @__PURE__ */ q(
|
|
101
|
-
de,
|
|
102
|
-
{
|
|
103
|
-
className: "humany-area-trigger",
|
|
104
|
-
title: R,
|
|
105
|
-
...X(L),
|
|
106
|
-
children: [
|
|
107
|
-
C && /* @__PURE__ */ n(ue, { children: C }),
|
|
108
|
-
b && /* @__PURE__ */ n(pe, { symbol: b, size: N })
|
|
109
|
-
]
|
|
110
|
-
}
|
|
111
|
-
);
|
|
112
|
-
if (f === l.Dropdown)
|
|
113
|
-
return /* @__PURE__ */ n(Y, { trigger: x, children: h });
|
|
114
|
-
if (f === l.Drawer) {
|
|
115
|
-
const r = Object.values(Z).includes(p) && {
|
|
116
|
-
type: p
|
|
117
|
-
} || void 0;
|
|
118
|
-
return /* @__PURE__ */ n(
|
|
119
|
-
_,
|
|
120
|
-
{
|
|
121
|
-
header: B,
|
|
122
|
-
animation: r,
|
|
123
|
-
fullScreen: z,
|
|
124
|
-
trigger: x,
|
|
125
|
-
children: h
|
|
126
|
-
}
|
|
127
|
-
);
|
|
128
|
-
}
|
|
129
|
-
return f === l.Modal && ie.warn("modal area not implemented"), null;
|
|
130
|
-
}, de = m(ne)`
|
|
131
|
-
display: flex;
|
|
132
|
-
align-items: inherit;
|
|
133
|
-
align-self: center;
|
|
134
|
-
width: fit-content;
|
|
135
|
-
height: fit-content;
|
|
136
|
-
${ee}
|
|
137
|
-
|
|
138
|
-
${(e) => e.theme.fonts && `
|
|
139
|
-
font-family: ${e.theme.fonts.type};
|
|
140
|
-
font-size: ${e.theme.fonts.normal};
|
|
141
|
-
`}
|
|
142
|
-
|
|
143
|
-
&:focus-visible {
|
|
144
|
-
${te};
|
|
145
|
-
}
|
|
146
|
-
`, ue = m(re)`
|
|
147
|
-
margin: 0 ${(e) => {
|
|
148
|
-
var t;
|
|
149
|
-
return (t = e.theme.sizes) == null ? void 0 : t.small;
|
|
150
|
-
}} 0 0;
|
|
151
|
-
color: ${(e) => {
|
|
152
|
-
var t;
|
|
153
|
-
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
154
|
-
}};
|
|
155
|
-
`, pe = m(oe)`
|
|
156
|
-
path {
|
|
157
|
-
fill: ${(e) => {
|
|
158
|
-
var t;
|
|
159
|
-
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
160
|
-
}};
|
|
161
|
-
}
|
|
162
|
-
`, fe = m(P)`
|
|
163
|
-
${T}
|
|
164
|
-
${(e) => !!e.scrollableCss && e.scrollableCss}
|
|
165
|
-
text-size-adjust: 100%;
|
|
166
|
-
input::-ms-clear {
|
|
167
|
-
display: none;
|
|
168
|
-
}
|
|
169
|
-
${(e) => e.hidden && S`
|
|
170
|
-
visibility: collapse;
|
|
171
|
-
pointer-events: none;
|
|
172
|
-
`};
|
|
173
|
-
`;
|
|
174
|
-
export {
|
|
175
|
-
Se as default
|
|
176
|
-
};
|
package/area-DyI3HP8x.js
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),v=require("@emotion/react"),u=require("@emotion/styled"),c=require("@telia-ace/widget-core"),C=require("@telia-ace/widget-types-grid"),t=require("@telia-ace/widget-ui"),h=require("@telia-ace/widget-utilities"),b=require("react"),d=require("./index-CWPZwxU2.js"),G=b.forwardRef(({children:e,className:n,renderState:i,animation:a,...m},l)=>(b.useEffect(()=>{if(i==="open"){const o=document.querySelector(`[data-node-id='${m.id}']`);o&&o.focus()}}),i?r.jsx(t.TransitionComponent,{mountOnEnter:i!==c.WidgetRenderState.hidden,timeout:200,in:i===c.WidgetRenderState.open,transitions:a,unmountOnExit:i===c.WidgetRenderState.closed,children:(o,p)=>r.jsx(L,{...m,tabIndex:"-1",animationCss:p,"data-state":o,ref:l,className:h.appendClassNames("humany-animated-area",n),children:e})}):null)),L=u(t.Grid)`
|
|
2
|
-
${C.genericComponentStyling}
|
|
3
|
-
${e=>!!e.animationCss&&e.animationCss}
|
|
4
|
-
${e=>!!e.scrollableCss&&e.scrollableCss}
|
|
5
|
-
text-size-adjust: 100%;
|
|
6
|
-
input::-ms-clear {
|
|
7
|
-
display: none;
|
|
8
|
-
}
|
|
9
|
-
:focus-visible {
|
|
10
|
-
outline: none !important;
|
|
11
|
-
}
|
|
12
|
-
${e=>e.hidden&&e["data-state"]==="exited"&&v.css`
|
|
13
|
-
visibility: collapse;
|
|
14
|
-
pointer-events: none;
|
|
15
|
-
`};
|
|
16
|
-
`,U=({className:e,...n})=>{const{name:i}=t.useComponentDescriptor(),a=t.useRenderState(),m=t.useContext(),l=t.useProperties(),o=t.useChildren(),p=t.useContainer(),{gap:q="0"}=m,{columns:x=1,animation:g="none",scrollable:T=!1,mode:f=d.AreaMode.Static,trigger:A={},fullScreen:R,header:P,...M}=l,{size:W=24,symbol:$,label:j,ariaLabel:D,...N}=A,[z,B]=t.useScroll(T),E=b.useCallback(s=>{const{events:O}=p.get("$widget");return O.dispatch("widget:area-rendered",{name:i,properties:l,element:s}),B.current=s,s},[l,a]);if(!o.length)return t.createEmptyComponent(p,{...n,className:h.appendClassNames(e,"humany-area")});const w={...n,className:h.appendClassNames(e,"humany-area",`humany-area-${i}`),scrollableCss:z,...M,columns:x,gap:q,renderState:a,animation:g,hidden:a===c.WidgetRenderState.hidden,ref:E},y=g!=="none"?r.jsx(t.ColumnContext.Provider,{value:x,children:r.jsx(G,{...w,children:o.map(s=>r.jsx(C.Component,{id:s.id,branch:"default"},s.id))})}):a===c.WidgetRenderState.closed?null:r.jsx(t.ColumnContext.Provider,{value:x,children:r.jsx(H,{...w,children:o.map(s=>r.jsx(C.Component,{id:s.id,branch:"default"},s.id))})});if(f===d.AreaMode.Static)return y;const S=r.jsxs(k,{className:"humany-area-trigger",title:D,...t.filterCssProps(N),children:[j&&r.jsx(I,{children:j}),$&&r.jsx(F,{symbol:$,size:W})]});if(f===d.AreaMode.Dropdown)return r.jsx(t.Dropdown,{trigger:S,children:y});if(f===d.AreaMode.Drawer){const s=Object.values(t.DrawerAnimationType).includes(g)&&{type:g}||void 0;return r.jsx(t.Drawer,{header:P,animation:s,fullScreen:R,trigger:S,children:y})}return f===d.AreaMode.Modal&&h.Logger.warn("modal area not implemented"),null},k=u(t.Button)`
|
|
17
|
-
display: flex;
|
|
18
|
-
align-items: inherit;
|
|
19
|
-
align-self: center;
|
|
20
|
-
width: fit-content;
|
|
21
|
-
height: fit-content;
|
|
22
|
-
${t.filterCssPropsStyle}
|
|
23
|
-
|
|
24
|
-
${e=>e.theme.fonts&&`
|
|
25
|
-
font-family: ${e.theme.fonts.type};
|
|
26
|
-
font-size: ${e.theme.fonts.normal};
|
|
27
|
-
`}
|
|
28
|
-
|
|
29
|
-
&:focus-visible {
|
|
30
|
-
${t.paddedBorderTabStyle};
|
|
31
|
-
}
|
|
32
|
-
`,I=u(t.Text)`
|
|
33
|
-
margin: 0 ${e=>{var n;return(n=e.theme.sizes)==null?void 0:n.small}} 0 0;
|
|
34
|
-
color: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
|
|
35
|
-
`,F=u(t.SymbolBadge)`
|
|
36
|
-
path {
|
|
37
|
-
fill: ${e=>{var n;return(n=e.theme.colors)==null?void 0:n.text}};
|
|
38
|
-
}
|
|
39
|
-
`,H=u(t.Grid)`
|
|
40
|
-
${C.genericComponentStyling}
|
|
41
|
-
${e=>!!e.scrollableCss&&e.scrollableCss}
|
|
42
|
-
text-size-adjust: 100%;
|
|
43
|
-
input::-ms-clear {
|
|
44
|
-
display: none;
|
|
45
|
-
}
|
|
46
|
-
${e=>e.hidden&&v.css`
|
|
47
|
-
visibility: collapse;
|
|
48
|
-
pointer-events: none;
|
|
49
|
-
`};
|
|
50
|
-
`;exports.default=U;
|