@telia-ace/widget-components-area 1.0.11 → 1.0.14
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/dist/area.5b037b1b.js +183 -0
- package/dist/area.5b037b1b.js.map +1 -0
- package/dist/index.a69d3b40.js +9 -0
- package/dist/index.a69d3b40.js.map +1 -0
- package/dist/index.js +4 -1
- package/package.json +10 -6
- package/dist/area.js +0 -228
- package/dist/area.js.map +0 -1
- package/dist/index2.js +0 -14
- package/dist/index2.js.map +0 -1
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
var Y = Object.defineProperty, Z = Object.defineProperties;
|
|
2
|
+
var _ = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var C = Object.getOwnPropertySymbols;
|
|
4
|
+
var B = Object.prototype.hasOwnProperty, R = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var z = (e, t, n) => t in e ? Y(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, s = (e, t) => {
|
|
6
|
+
for (var n in t || (t = {}))
|
|
7
|
+
B.call(t, n) && z(e, n, t[n]);
|
|
8
|
+
if (C)
|
|
9
|
+
for (var n of C(t))
|
|
10
|
+
R.call(t, n) && z(e, n, t[n]);
|
|
11
|
+
return e;
|
|
12
|
+
}, c = (e, t) => Z(e, _(t));
|
|
13
|
+
var d = (e, t) => {
|
|
14
|
+
var n = {};
|
|
15
|
+
for (var r in e)
|
|
16
|
+
B.call(e, r) && t.indexOf(r) < 0 && (n[r] = e[r]);
|
|
17
|
+
if (e != null && C)
|
|
18
|
+
for (var r of C(e))
|
|
19
|
+
t.indexOf(r) < 0 && R.call(e, r) && (n[r] = e[r]);
|
|
20
|
+
return n;
|
|
21
|
+
};
|
|
22
|
+
import { WidgetRenderState as p } from "@telia-ace/widget-core";
|
|
23
|
+
import { genericComponentStyling as k, Component as N } from "@telia-ace/widget-types-grid";
|
|
24
|
+
import { TransitionComponent as ee, Grid as L, useComponentDescriptor as te, useRenderState as ne, useContext as re, useProperties as ae, useChildren as oe, useContainer as se, useScroll as ie, createEmptyComponent as le, ColumnContext as j, filterCssProps as me, Dropdown as ce, DrawerAnimationType as de, Drawer as ue, Button as pe, filterCssPropsStyle as fe, paddedBorderTabStyle as ge, Text as he, SymbolBadge as ye } from "@telia-ace/widget-ui";
|
|
25
|
+
import { appendClassNames as x, Logger as be } from "@telia-ace/widget-utilities";
|
|
26
|
+
import a, { forwardRef as Ce, useCallback as $e } from "react";
|
|
27
|
+
import f, { css as O } from "styled-components";
|
|
28
|
+
import { A as u } from "./index.a69d3b40.js";
|
|
29
|
+
const Ee = Ce((v, i) => {
|
|
30
|
+
var l = v, { children: e, className: t, renderState: n, animation: r } = l, g = d(l, ["children", "className", "renderState", "animation"]);
|
|
31
|
+
return n ? /* @__PURE__ */ a.createElement(ee, {
|
|
32
|
+
mountOnEnter: n !== p.hidden,
|
|
33
|
+
timeout: 200,
|
|
34
|
+
in: n === p.open,
|
|
35
|
+
transitions: r,
|
|
36
|
+
unmountOnExit: n === p.closed
|
|
37
|
+
}, (m, h) => /* @__PURE__ */ a.createElement(xe, c(s({}, g), {
|
|
38
|
+
animationCss: h,
|
|
39
|
+
"data-state": m,
|
|
40
|
+
ref: i,
|
|
41
|
+
className: x("humany-animated-area", t)
|
|
42
|
+
}), e)) : null;
|
|
43
|
+
}), xe = f(L)`
|
|
44
|
+
${k}
|
|
45
|
+
${(e) => !!e.animationCss && e.animationCss}
|
|
46
|
+
${(e) => !!e.scrollableCss && e.scrollableCss}
|
|
47
|
+
text-size-adjust: 100%;
|
|
48
|
+
input::-ms-clear {
|
|
49
|
+
display: none;
|
|
50
|
+
}
|
|
51
|
+
${(e) => e.hidden && e["data-state"] === "exited" && O`
|
|
52
|
+
visibility: collapse;
|
|
53
|
+
pointer-events: none;
|
|
54
|
+
`};
|
|
55
|
+
`, ke = (n) => {
|
|
56
|
+
var r = n, { className: e } = r, t = d(r, ["className"]);
|
|
57
|
+
const { name: g } = te(), i = ne(), v = re(), l = ae(), m = oe(), h = se(), { gap: W = "0" } = v, A = l, {
|
|
58
|
+
columns: $ = 1,
|
|
59
|
+
animation: y = "none",
|
|
60
|
+
scrollable: M = !1,
|
|
61
|
+
mode: b = u.Static,
|
|
62
|
+
trigger: G = {},
|
|
63
|
+
fullScreen: q,
|
|
64
|
+
header: F
|
|
65
|
+
} = A, H = d(A, [
|
|
66
|
+
"columns",
|
|
67
|
+
"animation",
|
|
68
|
+
"scrollable",
|
|
69
|
+
"mode",
|
|
70
|
+
"trigger",
|
|
71
|
+
"fullScreen",
|
|
72
|
+
"header"
|
|
73
|
+
]), D = G, { size: I = 24, symbol: w, label: S, ariaLabel: J } = D, K = d(D, ["size", "symbol", "label", "ariaLabel"]), [Q, U] = ie(M), V = $e((o) => {
|
|
74
|
+
const { events: X } = h.get("$widget");
|
|
75
|
+
return X.dispatch("widget:area-rendered", {
|
|
76
|
+
name: g,
|
|
77
|
+
properties: l,
|
|
78
|
+
element: o
|
|
79
|
+
}), U.current = o, o;
|
|
80
|
+
}, [l, i]);
|
|
81
|
+
if (!m.length)
|
|
82
|
+
return le(h, c(s({}, t), {
|
|
83
|
+
className: x(e, "humany-area")
|
|
84
|
+
}));
|
|
85
|
+
const T = c(s(c(s({}, t), {
|
|
86
|
+
className: x(e, "humany-area", `humany-area-${g}`),
|
|
87
|
+
scrollableCss: Q
|
|
88
|
+
}), H), {
|
|
89
|
+
columns: $,
|
|
90
|
+
gap: W,
|
|
91
|
+
renderState: i,
|
|
92
|
+
animation: y,
|
|
93
|
+
hidden: i === p.hidden,
|
|
94
|
+
ref: V
|
|
95
|
+
}), E = (() => y !== "none" ? /* @__PURE__ */ a.createElement(j.Provider, {
|
|
96
|
+
value: $
|
|
97
|
+
}, /* @__PURE__ */ a.createElement(Ee, s({}, T), m.map((o) => /* @__PURE__ */ a.createElement(N, {
|
|
98
|
+
key: o.id,
|
|
99
|
+
id: o.id,
|
|
100
|
+
branch: "default"
|
|
101
|
+
})))) : i === p.closed ? null : /* @__PURE__ */ a.createElement(j.Provider, {
|
|
102
|
+
value: $
|
|
103
|
+
}, /* @__PURE__ */ a.createElement(Te, s({}, T), m.map((o) => /* @__PURE__ */ a.createElement(N, {
|
|
104
|
+
key: o.id,
|
|
105
|
+
id: o.id,
|
|
106
|
+
branch: "default"
|
|
107
|
+
})))))();
|
|
108
|
+
if (b === u.Static)
|
|
109
|
+
return E;
|
|
110
|
+
const P = /* @__PURE__ */ a.createElement(ve, s({
|
|
111
|
+
className: "humany-area-trigger",
|
|
112
|
+
title: J
|
|
113
|
+
}, me(K)), S && /* @__PURE__ */ a.createElement(we, null, S), w && /* @__PURE__ */ a.createElement(Se, {
|
|
114
|
+
symbol: w,
|
|
115
|
+
size: I
|
|
116
|
+
}));
|
|
117
|
+
if (b === u.Dropdown)
|
|
118
|
+
return /* @__PURE__ */ a.createElement(ce, {
|
|
119
|
+
trigger: P
|
|
120
|
+
}, E);
|
|
121
|
+
if (b === u.Drawer) {
|
|
122
|
+
const o = Object.values(de).includes(y) && {
|
|
123
|
+
type: y
|
|
124
|
+
} || void 0;
|
|
125
|
+
return /* @__PURE__ */ a.createElement(ue, {
|
|
126
|
+
header: F,
|
|
127
|
+
animation: o,
|
|
128
|
+
fullScreen: q,
|
|
129
|
+
trigger: P
|
|
130
|
+
}, E);
|
|
131
|
+
}
|
|
132
|
+
return b === u.Modal && be.warn("modal area not implemented"), null;
|
|
133
|
+
}, ve = f(pe)`
|
|
134
|
+
display: flex;
|
|
135
|
+
align-items: inherit;
|
|
136
|
+
align-self: center;
|
|
137
|
+
width: fit-content;
|
|
138
|
+
height: fit-content;
|
|
139
|
+
${fe}
|
|
140
|
+
|
|
141
|
+
${(e) => e.theme.fonts && `
|
|
142
|
+
font-family: ${e.theme.fonts.type};
|
|
143
|
+
font-size: ${e.theme.fonts.normal};
|
|
144
|
+
`}
|
|
145
|
+
|
|
146
|
+
&:focus {
|
|
147
|
+
${(e) => {
|
|
148
|
+
var t;
|
|
149
|
+
return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && ge;
|
|
150
|
+
}};
|
|
151
|
+
}
|
|
152
|
+
`, we = f(he)`
|
|
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
|
+
`, Se = f(ye)`
|
|
162
|
+
path {
|
|
163
|
+
fill: ${(e) => {
|
|
164
|
+
var t;
|
|
165
|
+
return (t = e.theme.colors) == null ? void 0 : t.text;
|
|
166
|
+
}};
|
|
167
|
+
}
|
|
168
|
+
`, Te = f(L)`
|
|
169
|
+
${k}
|
|
170
|
+
${(e) => !!e.scrollableCss && e.scrollableCss}
|
|
171
|
+
text-size-adjust: 100%;
|
|
172
|
+
input::-ms-clear {
|
|
173
|
+
display: none;
|
|
174
|
+
}
|
|
175
|
+
${(e) => e.hidden && O`
|
|
176
|
+
visibility: collapse;
|
|
177
|
+
pointer-events: none;
|
|
178
|
+
`};
|
|
179
|
+
`;
|
|
180
|
+
export {
|
|
181
|
+
ke as default
|
|
182
|
+
};
|
|
183
|
+
//# sourceMappingURL=area.5b037b1b.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"area.5b037b1b.js","sources":["../src/animated-area.tsx","../src/area.tsx"],"sourcesContent":["import { WidgetRenderState } from '@telia-ace/widget-core';\r\nimport { genericComponentStyling } from '@telia-ace/widget-types-grid';\r\nimport { Grid, TransitionComponent } from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { forwardRef } from 'react';\r\nimport { TransitionStatus } from 'react-transition-group/Transition';\r\nimport styled, { css } from 'styled-components';\r\n\r\nconst Area: React.FC<any> = forwardRef(\r\n ({ children, className, renderState, animation, ...other }, ref) => {\r\n if (!renderState) {\r\n return null;\r\n }\r\n\r\n return (\r\n <TransitionComponent\r\n mountOnEnter={renderState !== WidgetRenderState.hidden}\r\n timeout={200}\r\n in={renderState === WidgetRenderState.open}\r\n transitions={animation}\r\n unmountOnExit={renderState === WidgetRenderState.closed}\r\n >\r\n {(state: TransitionStatus, css?: string) => (\r\n <Wrapper\r\n {...other}\r\n animationCss={css}\r\n data-state={state}\r\n ref={ref}\r\n className={appendClassNames('humany-animated-area', className)}\r\n >\r\n {children}\r\n </Wrapper>\r\n )}\r\n </TransitionComponent>\r\n );\r\n }\r\n);\r\n\r\nexport default Area;\r\n\r\nconst Wrapper = styled(Grid)<any>`\r\n ${genericComponentStyling}\r\n ${(p) => !!p.animationCss && p.animationCss}\r\n ${(p) => !!p.scrollableCss && p.scrollableCss}\r\n text-size-adjust: 100%;\r\n input::-ms-clear {\r\n display: none;\r\n }\r\n ${(p) =>\r\n p.hidden &&\r\n p['data-state'] === 'exited' &&\r\n css`\r\n visibility: collapse;\r\n pointer-events: none;\r\n `};\r\n`;\r\n","import { WidgetRenderState } from '@telia-ace/widget-core';\r\nimport { Component, genericComponentStyling } from '@telia-ace/widget-types-grid';\r\nimport {\r\n Button,\r\n ColumnContext,\r\n createEmptyComponent,\r\n Drawer,\r\n DrawerAnimationType,\r\n Dropdown,\r\n filterCssProps,\r\n filterCssPropsStyle,\r\n Grid,\r\n paddedBorderTabStyle,\r\n SymbolBadge,\r\n Text,\r\n useChildren,\r\n useComponentDescriptor,\r\n useContainer,\r\n useContext,\r\n useProperties,\r\n useRenderState,\r\n useScroll,\r\n} from '@telia-ace/widget-ui';\r\nimport { appendClassNames, Logger } from '@telia-ace/widget-utilities';\r\nimport { Widget } from '@webprovisions/platform';\r\nimport React, { useCallback } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport AnimatedArea from './animated-area';\r\nimport { AreaComponentProps, AreaMode } from './area-component';\r\n\r\nconst Area: React.FC<any> = ({ className, ...other }) => {\r\n const { name } = useComponentDescriptor();\r\n const renderState = useRenderState();\r\n const context = useContext();\r\n const properties = useProperties<AreaComponentProps>();\r\n const children = useChildren();\r\n const container = useContainer();\r\n\r\n const { gap = '0' } = context;\r\n const {\r\n columns = 1,\r\n animation = 'none',\r\n scrollable = false,\r\n mode = AreaMode.Static,\r\n trigger = {},\r\n fullScreen,\r\n header,\r\n ...areaProperties\r\n } = properties;\r\n\r\n const { size = 24, symbol, label, ariaLabel, ...otherTriggerProps } = trigger;\r\n\r\n const [scrollableCss, elem] = useScroll(scrollable);\r\n\r\n const setRef = useCallback(\r\n (node: HTMLDivElement) => {\r\n const { events } = container.get('$widget') as Widget;\r\n events.dispatch('widget:area-rendered', {\r\n name,\r\n properties,\r\n element: node,\r\n });\r\n\r\n elem.current = node;\r\n return node;\r\n },\r\n [properties, renderState]\r\n );\r\n\r\n if (!children.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-area'),\r\n });\r\n }\r\n\r\n const props = {\r\n ...other,\r\n className: appendClassNames(className, 'humany-area', `humany-area-${name}`),\r\n scrollableCss,\r\n ...areaProperties,\r\n columns,\r\n gap,\r\n renderState,\r\n animation,\r\n hidden: renderState === WidgetRenderState.hidden,\r\n ref: setRef,\r\n };\r\n\r\n const content = (() => {\r\n if (animation !== 'none') {\r\n return (\r\n <ColumnContext.Provider value={columns}>\r\n <AnimatedArea {...props}>\r\n {children.map((child) => (\r\n <Component key={child.id} id={child.id} branch=\"default\" />\r\n ))}\r\n </AnimatedArea>\r\n </ColumnContext.Provider>\r\n );\r\n }\r\n\r\n if (renderState === WidgetRenderState.closed) {\r\n return null;\r\n }\r\n\r\n return (\r\n <ColumnContext.Provider value={columns}>\r\n <Wrapper {...props}>\r\n {children.map((child) => (\r\n <Component key={child.id} id={child.id} branch=\"default\" />\r\n ))}\r\n </Wrapper>\r\n </ColumnContext.Provider>\r\n );\r\n })();\r\n\r\n if (mode === AreaMode.Static) {\r\n return content;\r\n }\r\n\r\n const triggerButton = (\r\n <Trigger\r\n className=\"humany-area-trigger\"\r\n title={ariaLabel}\r\n {...filterCssProps(otherTriggerProps)}\r\n >\r\n {label && <TriggerLabel>{label}</TriggerLabel>}\r\n {symbol && <TriggerSymbolBadge symbol={symbol} size={size} />}\r\n </Trigger>\r\n );\r\n\r\n if (mode === AreaMode.Dropdown) {\r\n return <Dropdown trigger={triggerButton}>{content}</Dropdown>;\r\n }\r\n\r\n if (mode === AreaMode.Drawer) {\r\n const drawerAnimation =\r\n (Object.values(DrawerAnimationType).includes(animation as any) && {\r\n type: animation as DrawerAnimationType,\r\n }) ||\r\n undefined;\r\n return (\r\n <Drawer\r\n header={header}\r\n animation={drawerAnimation}\r\n fullScreen={fullScreen}\r\n trigger={triggerButton}\r\n >\r\n {content}\r\n </Drawer>\r\n );\r\n }\r\n\r\n if (mode === AreaMode.Modal) {\r\n Logger.warn('modal area not implemented');\r\n return null;\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport default Area;\r\n\r\nconst Trigger = styled(Button)`\r\n display: flex;\r\n align-items: inherit;\r\n align-self: center;\r\n width: fit-content;\r\n height: fit-content;\r\n ${filterCssPropsStyle}\r\n\r\n ${(p) =>\r\n p.theme.fonts &&\r\n `\r\n font-family: ${p.theme.fonts.type};\r\n font-size: ${p.theme.fonts.normal};\r\n `}\r\n\r\n &:focus {\r\n ${(p: any) => p.theme.accessibility?.isTabbing && paddedBorderTabStyle};\r\n }\r\n`;\r\n\r\nconst TriggerLabel = styled(Text)`\r\n margin: 0 ${(p) => p.theme.sizes?.small} 0 0;\r\n color: ${(p) => p.theme.colors?.text};\r\n`;\r\n\r\nconst TriggerSymbolBadge = styled(SymbolBadge)`\r\n path {\r\n fill: ${(p) => p.theme.colors?.text};\r\n }\r\n`;\r\n\r\nconst Wrapper = styled(Grid)<any>`\r\n ${genericComponentStyling}\r\n ${(p) => !!p.scrollableCss && p.scrollableCss}\r\n text-size-adjust: 100%;\r\n input::-ms-clear {\r\n display: none;\r\n }\r\n ${(p) =>\r\n p.hidden &&\r\n css`\r\n visibility: collapse;\r\n pointer-events: none;\r\n `};\r\n`;\r\n"],"names":["Area","Wrapper","AnimatedArea"],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createReactComponent as t } from "@telia-ace/widget-ui";
|
|
2
|
+
var o = /* @__PURE__ */ ((r) => (r.Static = "static", r.Drawer = "drawer", r.Dropdown = "dropdown", r.Modal = "modal", r))(o || {});
|
|
3
|
+
const p = (r) => t(r, "area", import("./area.5b037b1b.js"), (a) => {
|
|
4
|
+
});
|
|
5
|
+
export {
|
|
6
|
+
o as A,
|
|
7
|
+
p as a
|
|
8
|
+
};
|
|
9
|
+
//# sourceMappingURL=index.a69d3b40.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.a69d3b40.js","sources":["../src/area-component.ts"],"sourcesContent":["import { createReactComponent } from '@telia-ace/widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\ntype Symbol = {\r\n type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\r\n content: string;\r\n};\r\n\r\nexport enum AreaMode {\r\n Static = 'static',\r\n Drawer = 'drawer',\r\n Dropdown = 'dropdown',\r\n Modal = 'modal',\r\n}\r\n\r\nexport type AreaComponentProps = {\r\n mode: AreaMode;\r\n animation?: string;\r\n fullScreen?: boolean;\r\n columns?: number;\r\n scrollable?: boolean;\r\n header?: string;\r\n trigger?: {\r\n symbol?: Symbol;\r\n label?: string;\r\n size?: number;\r\n ariaLabel?: string;\r\n };\r\n};\r\n\r\nexport const AreaComponent = (container: Container) => {\r\n return createReactComponent(container, 'area', import('./area'), (component) => {});\r\n};\r\n\r\nexport default AreaComponent;\r\n"],"names":[],"mappings":";AAQY,IAAA,sBAAA,MACC,GAAA,SAAA,UACA,EAAA,SAAA,UACE,EAAA,WAAA,YACH,EAAA,QAAA,SAJA,IAAA,KAAA,CAAA,CAAA;AAsBC,MAAA,IAAgB,CAAC,MACnB,EAAqB,GAAW,QAAQ,OAAO,uBAAW,CAAC,MAAc;AAAA,CAAE;"}
|
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,13 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telia-ace/widget-components-area",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.14",
|
|
4
4
|
"description": "Area component for ACE Widgets.",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"author": "Telia Company AB",
|
|
7
7
|
"keywords": [
|
|
8
8
|
"telia"
|
|
9
9
|
],
|
|
10
|
-
"
|
|
10
|
+
"exports": {
|
|
11
|
+
"development": "./src/index.ts",
|
|
12
|
+
"default": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"type": "module",
|
|
11
15
|
"types": "dist/index.d.ts",
|
|
12
16
|
"files": [
|
|
13
17
|
"LICENSE.txt",
|
|
@@ -24,9 +28,9 @@
|
|
|
24
28
|
},
|
|
25
29
|
"sideEffects": false,
|
|
26
30
|
"dependencies": {
|
|
27
|
-
"@telia-ace/widget-core": "^1.0.
|
|
28
|
-
"@telia-ace/widget-types-grid": "^1.0.
|
|
29
|
-
"@telia-ace/widget-ui": "^1.0.
|
|
31
|
+
"@telia-ace/widget-core": "^1.0.11",
|
|
32
|
+
"@telia-ace/widget-types-grid": "^1.0.18",
|
|
33
|
+
"@telia-ace/widget-ui": "^1.0.18",
|
|
30
34
|
"@telia-ace/widget-utilities": "^1.0.2",
|
|
31
35
|
"@webprovisions/platform": "^1.1.2"
|
|
32
36
|
},
|
|
@@ -42,5 +46,5 @@
|
|
|
42
46
|
"@types/react-transition-group": "^4.2.3",
|
|
43
47
|
"@types/styled-components": "^5.1.7"
|
|
44
48
|
},
|
|
45
|
-
"gitHead": "
|
|
49
|
+
"gitHead": "4006655a78d8f0379c021e4362536dcdf881b3d0"
|
|
46
50
|
}
|
package/dist/area.js
DELETED
|
@@ -1,228 +0,0 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
var __objRest = (source, exclude) => {
|
|
21
|
-
var target = {};
|
|
22
|
-
for (var prop in source)
|
|
23
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
-
target[prop] = source[prop];
|
|
25
|
-
if (source != null && __getOwnPropSymbols)
|
|
26
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
-
target[prop] = source[prop];
|
|
29
|
-
}
|
|
30
|
-
return target;
|
|
31
|
-
};
|
|
32
|
-
import { WidgetRenderState } from "@telia-ace/widget-core";
|
|
33
|
-
import { genericComponentStyling, Component } from "@telia-ace/widget-types-grid";
|
|
34
|
-
import { TransitionComponent, Grid, useComponentDescriptor, useRenderState, useContext, useProperties, useChildren, useContainer, useScroll, createEmptyComponent, ColumnContext, filterCssProps, Dropdown, DrawerAnimationType, Drawer, Button, filterCssPropsStyle, paddedBorderTabStyle, Text, SymbolBadge } from "@telia-ace/widget-ui";
|
|
35
|
-
import { appendClassNames, Logger } from "@telia-ace/widget-utilities";
|
|
36
|
-
import React, { forwardRef, useCallback } from "react";
|
|
37
|
-
import styled, { css } from "styled-components";
|
|
38
|
-
import { A as AreaMode } from "./index2.js";
|
|
39
|
-
const Area$1 = forwardRef((_a, ref) => {
|
|
40
|
-
var _b = _a, { children, className, renderState, animation } = _b, other = __objRest(_b, ["children", "className", "renderState", "animation"]);
|
|
41
|
-
if (!renderState) {
|
|
42
|
-
return null;
|
|
43
|
-
}
|
|
44
|
-
return /* @__PURE__ */ React.createElement(TransitionComponent, {
|
|
45
|
-
mountOnEnter: renderState !== WidgetRenderState.hidden,
|
|
46
|
-
timeout: 200,
|
|
47
|
-
in: renderState === WidgetRenderState.open,
|
|
48
|
-
transitions: animation,
|
|
49
|
-
unmountOnExit: renderState === WidgetRenderState.closed
|
|
50
|
-
}, (state, css2) => /* @__PURE__ */ React.createElement(Wrapper$1, __spreadProps(__spreadValues({}, other), {
|
|
51
|
-
animationCss: css2,
|
|
52
|
-
"data-state": state,
|
|
53
|
-
ref,
|
|
54
|
-
className: appendClassNames("humany-animated-area", className)
|
|
55
|
-
}), children));
|
|
56
|
-
});
|
|
57
|
-
const Wrapper$1 = styled(Grid)`
|
|
58
|
-
${genericComponentStyling}
|
|
59
|
-
${(p) => !!p.animationCss && p.animationCss}
|
|
60
|
-
${(p) => !!p.scrollableCss && p.scrollableCss}
|
|
61
|
-
text-size-adjust: 100%;
|
|
62
|
-
input::-ms-clear {
|
|
63
|
-
display: none;
|
|
64
|
-
}
|
|
65
|
-
${(p) => p.hidden && p["data-state"] === "exited" && css`
|
|
66
|
-
visibility: collapse;
|
|
67
|
-
pointer-events: none;
|
|
68
|
-
`};
|
|
69
|
-
`;
|
|
70
|
-
const Area = (_c) => {
|
|
71
|
-
var _d = _c, { className } = _d, other = __objRest(_d, ["className"]);
|
|
72
|
-
const { name } = useComponentDescriptor();
|
|
73
|
-
const renderState = useRenderState();
|
|
74
|
-
const context = useContext();
|
|
75
|
-
const properties = useProperties();
|
|
76
|
-
const children = useChildren();
|
|
77
|
-
const container = useContainer();
|
|
78
|
-
const { gap = "0" } = context;
|
|
79
|
-
const _a = properties, {
|
|
80
|
-
columns = 1,
|
|
81
|
-
animation = "none",
|
|
82
|
-
scrollable = false,
|
|
83
|
-
mode = AreaMode.Static,
|
|
84
|
-
trigger = {},
|
|
85
|
-
fullScreen,
|
|
86
|
-
header
|
|
87
|
-
} = _a, areaProperties = __objRest(_a, [
|
|
88
|
-
"columns",
|
|
89
|
-
"animation",
|
|
90
|
-
"scrollable",
|
|
91
|
-
"mode",
|
|
92
|
-
"trigger",
|
|
93
|
-
"fullScreen",
|
|
94
|
-
"header"
|
|
95
|
-
]);
|
|
96
|
-
const _b = trigger, { size = 24, symbol, label, ariaLabel } = _b, otherTriggerProps = __objRest(_b, ["size", "symbol", "label", "ariaLabel"]);
|
|
97
|
-
const [scrollableCss, elem] = useScroll(scrollable);
|
|
98
|
-
const setRef = useCallback((node) => {
|
|
99
|
-
const { events } = container.get("$widget");
|
|
100
|
-
events.dispatch("widget:area-rendered", {
|
|
101
|
-
name,
|
|
102
|
-
properties,
|
|
103
|
-
element: node
|
|
104
|
-
});
|
|
105
|
-
elem.current = node;
|
|
106
|
-
return node;
|
|
107
|
-
}, [properties, renderState]);
|
|
108
|
-
if (!children.length) {
|
|
109
|
-
return createEmptyComponent(container, __spreadProps(__spreadValues({}, other), {
|
|
110
|
-
className: appendClassNames(className, "humany-area")
|
|
111
|
-
}));
|
|
112
|
-
}
|
|
113
|
-
const props = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, other), {
|
|
114
|
-
className: appendClassNames(className, "humany-area", `humany-area-${name}`),
|
|
115
|
-
scrollableCss
|
|
116
|
-
}), areaProperties), {
|
|
117
|
-
columns,
|
|
118
|
-
gap,
|
|
119
|
-
renderState,
|
|
120
|
-
animation,
|
|
121
|
-
hidden: renderState === WidgetRenderState.hidden,
|
|
122
|
-
ref: setRef
|
|
123
|
-
});
|
|
124
|
-
const content = (() => {
|
|
125
|
-
if (animation !== "none") {
|
|
126
|
-
return /* @__PURE__ */ React.createElement(ColumnContext.Provider, {
|
|
127
|
-
value: columns
|
|
128
|
-
}, /* @__PURE__ */ React.createElement(Area$1, __spreadValues({}, props), children.map((child) => /* @__PURE__ */ React.createElement(Component, {
|
|
129
|
-
key: child.id,
|
|
130
|
-
id: child.id,
|
|
131
|
-
branch: "default"
|
|
132
|
-
}))));
|
|
133
|
-
}
|
|
134
|
-
if (renderState === WidgetRenderState.closed) {
|
|
135
|
-
return null;
|
|
136
|
-
}
|
|
137
|
-
return /* @__PURE__ */ React.createElement(ColumnContext.Provider, {
|
|
138
|
-
value: columns
|
|
139
|
-
}, /* @__PURE__ */ React.createElement(Wrapper, __spreadValues({}, props), children.map((child) => /* @__PURE__ */ React.createElement(Component, {
|
|
140
|
-
key: child.id,
|
|
141
|
-
id: child.id,
|
|
142
|
-
branch: "default"
|
|
143
|
-
}))));
|
|
144
|
-
})();
|
|
145
|
-
if (mode === AreaMode.Static) {
|
|
146
|
-
return content;
|
|
147
|
-
}
|
|
148
|
-
const triggerButton = /* @__PURE__ */ React.createElement(Trigger, __spreadValues({
|
|
149
|
-
className: "humany-area-trigger",
|
|
150
|
-
title: ariaLabel
|
|
151
|
-
}, filterCssProps(otherTriggerProps)), label && /* @__PURE__ */ React.createElement(TriggerLabel, null, label), symbol && /* @__PURE__ */ React.createElement(TriggerSymbolBadge, {
|
|
152
|
-
symbol,
|
|
153
|
-
size
|
|
154
|
-
}));
|
|
155
|
-
if (mode === AreaMode.Dropdown) {
|
|
156
|
-
return /* @__PURE__ */ React.createElement(Dropdown, {
|
|
157
|
-
trigger: triggerButton
|
|
158
|
-
}, content);
|
|
159
|
-
}
|
|
160
|
-
if (mode === AreaMode.Drawer) {
|
|
161
|
-
const drawerAnimation = Object.values(DrawerAnimationType).includes(animation) && {
|
|
162
|
-
type: animation
|
|
163
|
-
} || void 0;
|
|
164
|
-
return /* @__PURE__ */ React.createElement(Drawer, {
|
|
165
|
-
header,
|
|
166
|
-
animation: drawerAnimation,
|
|
167
|
-
fullScreen,
|
|
168
|
-
trigger: triggerButton
|
|
169
|
-
}, content);
|
|
170
|
-
}
|
|
171
|
-
if (mode === AreaMode.Modal) {
|
|
172
|
-
Logger.warn("modal area not implemented");
|
|
173
|
-
return null;
|
|
174
|
-
}
|
|
175
|
-
return null;
|
|
176
|
-
};
|
|
177
|
-
const Trigger = styled(Button)`
|
|
178
|
-
display: flex;
|
|
179
|
-
align-items: inherit;
|
|
180
|
-
align-self: center;
|
|
181
|
-
width: fit-content;
|
|
182
|
-
height: fit-content;
|
|
183
|
-
${filterCssPropsStyle}
|
|
184
|
-
|
|
185
|
-
${(p) => p.theme.fonts && `
|
|
186
|
-
font-family: ${p.theme.fonts.type};
|
|
187
|
-
font-size: ${p.theme.fonts.normal};
|
|
188
|
-
`}
|
|
189
|
-
|
|
190
|
-
&:focus {
|
|
191
|
-
${(p) => {
|
|
192
|
-
var _a;
|
|
193
|
-
return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && paddedBorderTabStyle;
|
|
194
|
-
}};
|
|
195
|
-
}
|
|
196
|
-
`;
|
|
197
|
-
const TriggerLabel = styled(Text)`
|
|
198
|
-
margin: 0 ${(p) => {
|
|
199
|
-
var _a;
|
|
200
|
-
return (_a = p.theme.sizes) == null ? void 0 : _a.small;
|
|
201
|
-
}} 0 0;
|
|
202
|
-
color: ${(p) => {
|
|
203
|
-
var _a;
|
|
204
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.text;
|
|
205
|
-
}};
|
|
206
|
-
`;
|
|
207
|
-
const TriggerSymbolBadge = styled(SymbolBadge)`
|
|
208
|
-
path {
|
|
209
|
-
fill: ${(p) => {
|
|
210
|
-
var _a;
|
|
211
|
-
return (_a = p.theme.colors) == null ? void 0 : _a.text;
|
|
212
|
-
}};
|
|
213
|
-
}
|
|
214
|
-
`;
|
|
215
|
-
const Wrapper = styled(Grid)`
|
|
216
|
-
${genericComponentStyling}
|
|
217
|
-
${(p) => !!p.scrollableCss && p.scrollableCss}
|
|
218
|
-
text-size-adjust: 100%;
|
|
219
|
-
input::-ms-clear {
|
|
220
|
-
display: none;
|
|
221
|
-
}
|
|
222
|
-
${(p) => p.hidden && css`
|
|
223
|
-
visibility: collapse;
|
|
224
|
-
pointer-events: none;
|
|
225
|
-
`};
|
|
226
|
-
`;
|
|
227
|
-
export { Area as default };
|
|
228
|
-
//# sourceMappingURL=area.js.map
|
package/dist/area.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"area.js","sources":["../src/animated-area.tsx","../src/area.tsx"],"sourcesContent":["import { WidgetRenderState } from '@telia-ace/widget-core';\r\nimport { genericComponentStyling } from '@telia-ace/widget-types-grid';\r\nimport { Grid, TransitionComponent } from '@telia-ace/widget-ui';\r\nimport { appendClassNames } from '@telia-ace/widget-utilities';\r\nimport React, { forwardRef } from 'react';\r\nimport { TransitionStatus } from 'react-transition-group/Transition';\r\nimport styled, { css } from 'styled-components';\r\n\r\nconst Area: React.FC<any> = forwardRef(\r\n ({ children, className, renderState, animation, ...other }, ref) => {\r\n if (!renderState) {\r\n return null;\r\n }\r\n\r\n return (\r\n <TransitionComponent\r\n mountOnEnter={renderState !== WidgetRenderState.hidden}\r\n timeout={200}\r\n in={renderState === WidgetRenderState.open}\r\n transitions={animation}\r\n unmountOnExit={renderState === WidgetRenderState.closed}\r\n >\r\n {(state: TransitionStatus, css?: string) => (\r\n <Wrapper\r\n {...other}\r\n animationCss={css}\r\n data-state={state}\r\n ref={ref}\r\n className={appendClassNames('humany-animated-area', className)}\r\n >\r\n {children}\r\n </Wrapper>\r\n )}\r\n </TransitionComponent>\r\n );\r\n }\r\n);\r\n\r\nexport default Area;\r\n\r\nconst Wrapper = styled(Grid)<any>`\r\n ${genericComponentStyling}\r\n ${(p) => !!p.animationCss && p.animationCss}\r\n ${(p) => !!p.scrollableCss && p.scrollableCss}\r\n text-size-adjust: 100%;\r\n input::-ms-clear {\r\n display: none;\r\n }\r\n ${(p) =>\r\n p.hidden &&\r\n p['data-state'] === 'exited' &&\r\n css`\r\n visibility: collapse;\r\n pointer-events: none;\r\n `};\r\n`;\r\n","import { WidgetRenderState } from '@telia-ace/widget-core';\r\nimport { Component, genericComponentStyling } from '@telia-ace/widget-types-grid';\r\nimport {\r\n Button,\r\n ColumnContext,\r\n createEmptyComponent,\r\n Drawer,\r\n DrawerAnimationType,\r\n Dropdown,\r\n filterCssProps,\r\n filterCssPropsStyle,\r\n Grid,\r\n paddedBorderTabStyle,\r\n SymbolBadge,\r\n Text,\r\n useChildren,\r\n useComponentDescriptor,\r\n useContainer,\r\n useContext,\r\n useProperties,\r\n useRenderState,\r\n useScroll,\r\n} from '@telia-ace/widget-ui';\r\nimport { appendClassNames, Logger } from '@telia-ace/widget-utilities';\r\nimport { Widget } from '@webprovisions/platform';\r\nimport React, { useCallback } from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport AnimatedArea from './animated-area';\r\nimport { AreaComponentProps, AreaMode } from './area-component';\r\n\r\nconst Area: React.FC<any> = ({ className, ...other }) => {\r\n const { name } = useComponentDescriptor();\r\n const renderState = useRenderState();\r\n const context = useContext();\r\n const properties = useProperties<AreaComponentProps>();\r\n const children = useChildren();\r\n const container = useContainer();\r\n\r\n const { gap = '0' } = context;\r\n const {\r\n columns = 1,\r\n animation = 'none',\r\n scrollable = false,\r\n mode = AreaMode.Static,\r\n trigger = {},\r\n fullScreen,\r\n header,\r\n ...areaProperties\r\n } = properties;\r\n\r\n const { size = 24, symbol, label, ariaLabel, ...otherTriggerProps } = trigger;\r\n\r\n const [scrollableCss, elem] = useScroll(scrollable);\r\n\r\n const setRef = useCallback(\r\n (node: HTMLDivElement) => {\r\n const { events } = container.get('$widget') as Widget;\r\n events.dispatch('widget:area-rendered', {\r\n name,\r\n properties,\r\n element: node,\r\n });\r\n\r\n elem.current = node;\r\n return node;\r\n },\r\n [properties, renderState]\r\n );\r\n\r\n if (!children.length) {\r\n return createEmptyComponent(container, {\r\n ...other,\r\n className: appendClassNames(className, 'humany-area'),\r\n });\r\n }\r\n\r\n const props = {\r\n ...other,\r\n className: appendClassNames(className, 'humany-area', `humany-area-${name}`),\r\n scrollableCss,\r\n ...areaProperties,\r\n columns,\r\n gap,\r\n renderState,\r\n animation,\r\n hidden: renderState === WidgetRenderState.hidden,\r\n ref: setRef,\r\n };\r\n\r\n const content = (() => {\r\n if (animation !== 'none') {\r\n return (\r\n <ColumnContext.Provider value={columns}>\r\n <AnimatedArea {...props}>\r\n {children.map((child) => (\r\n <Component key={child.id} id={child.id} branch=\"default\" />\r\n ))}\r\n </AnimatedArea>\r\n </ColumnContext.Provider>\r\n );\r\n }\r\n\r\n if (renderState === WidgetRenderState.closed) {\r\n return null;\r\n }\r\n\r\n return (\r\n <ColumnContext.Provider value={columns}>\r\n <Wrapper {...props}>\r\n {children.map((child) => (\r\n <Component key={child.id} id={child.id} branch=\"default\" />\r\n ))}\r\n </Wrapper>\r\n </ColumnContext.Provider>\r\n );\r\n })();\r\n\r\n if (mode === AreaMode.Static) {\r\n return content;\r\n }\r\n\r\n const triggerButton = (\r\n <Trigger\r\n className=\"humany-area-trigger\"\r\n title={ariaLabel}\r\n {...filterCssProps(otherTriggerProps)}\r\n >\r\n {label && <TriggerLabel>{label}</TriggerLabel>}\r\n {symbol && <TriggerSymbolBadge symbol={symbol} size={size} />}\r\n </Trigger>\r\n );\r\n\r\n if (mode === AreaMode.Dropdown) {\r\n return <Dropdown trigger={triggerButton}>{content}</Dropdown>;\r\n }\r\n\r\n if (mode === AreaMode.Drawer) {\r\n const drawerAnimation =\r\n (Object.values(DrawerAnimationType).includes(animation as any) && {\r\n type: animation as DrawerAnimationType,\r\n }) ||\r\n undefined;\r\n return (\r\n <Drawer\r\n header={header}\r\n animation={drawerAnimation}\r\n fullScreen={fullScreen}\r\n trigger={triggerButton}\r\n >\r\n {content}\r\n </Drawer>\r\n );\r\n }\r\n\r\n if (mode === AreaMode.Modal) {\r\n Logger.warn('modal area not implemented');\r\n return null;\r\n }\r\n\r\n return null;\r\n};\r\n\r\nexport default Area;\r\n\r\nconst Trigger = styled(Button)`\r\n display: flex;\r\n align-items: inherit;\r\n align-self: center;\r\n width: fit-content;\r\n height: fit-content;\r\n ${filterCssPropsStyle}\r\n\r\n ${(p) =>\r\n p.theme.fonts &&\r\n `\r\n font-family: ${p.theme.fonts.type};\r\n font-size: ${p.theme.fonts.normal};\r\n `}\r\n\r\n &:focus {\r\n ${(p: any) => p.theme.accessibility?.isTabbing && paddedBorderTabStyle};\r\n }\r\n`;\r\n\r\nconst TriggerLabel = styled(Text)`\r\n margin: 0 ${(p) => p.theme.sizes?.small} 0 0;\r\n color: ${(p) => p.theme.colors?.text};\r\n`;\r\n\r\nconst TriggerSymbolBadge = styled(SymbolBadge)`\r\n path {\r\n fill: ${(p) => p.theme.colors?.text};\r\n }\r\n`;\r\n\r\nconst Wrapper = styled(Grid)<any>`\r\n ${genericComponentStyling}\r\n ${(p) => !!p.scrollableCss && p.scrollableCss}\r\n text-size-adjust: 100%;\r\n input::-ms-clear {\r\n display: none;\r\n }\r\n ${(p) =>\r\n p.hidden &&\r\n css`\r\n visibility: collapse;\r\n pointer-events: none;\r\n `};\r\n`;\r\n"],"names":["Area","Wrapper","AnimatedArea"],"mappings":"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"}
|
package/dist/index2.js
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { createReactComponent } from "@telia-ace/widget-ui";
|
|
2
|
-
var AreaMode = /* @__PURE__ */ ((AreaMode2) => {
|
|
3
|
-
AreaMode2["Static"] = "static";
|
|
4
|
-
AreaMode2["Drawer"] = "drawer";
|
|
5
|
-
AreaMode2["Dropdown"] = "dropdown";
|
|
6
|
-
AreaMode2["Modal"] = "modal";
|
|
7
|
-
return AreaMode2;
|
|
8
|
-
})(AreaMode || {});
|
|
9
|
-
const AreaComponent = (container) => {
|
|
10
|
-
return createReactComponent(container, "area", import("./area.js"), (component) => {
|
|
11
|
-
});
|
|
12
|
-
};
|
|
13
|
-
export { AreaMode as A, AreaComponent as a };
|
|
14
|
-
//# sourceMappingURL=index2.js.map
|
package/dist/index2.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index2.js","sources":["../src/area-component.ts"],"sourcesContent":["import { createReactComponent } from '@telia-ace/widget-ui';\r\nimport { Container } from '@webprovisions/platform';\r\n\r\ntype Symbol = {\r\n type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;\r\n content: string;\r\n};\r\n\r\nexport enum AreaMode {\r\n Static = 'static',\r\n Drawer = 'drawer',\r\n Dropdown = 'dropdown',\r\n Modal = 'modal',\r\n}\r\n\r\nexport type AreaComponentProps = {\r\n mode: AreaMode;\r\n animation?: string;\r\n fullScreen?: boolean;\r\n columns?: number;\r\n scrollable?: boolean;\r\n header?: string;\r\n trigger?: {\r\n symbol?: Symbol;\r\n label?: string;\r\n size?: number;\r\n ariaLabel?: string;\r\n };\r\n};\r\n\r\nexport const AreaComponent = (container: Container) => {\r\n return createReactComponent(container, 'area', import('./area'), (component) => {});\r\n};\r\n\r\nexport default AreaComponent;\r\n"],"names":[],"mappings":";AAQY,IAAA,6BAAA,cAAL;AACM,YAAA,YAAA;AACA,YAAA,YAAA;AACE,YAAA,cAAA;AACH,YAAA,WAAA;AAJA,SAAA;AAAA,GAAA,YAAA,CAAA,CAAA;AAsBC,MAAA,gBAAgB,CAAC,cAAyB;AACnD,SAAO,qBAAqB,WAAW,QAAQ,OAAO,cAAW,CAAC,cAAc;AAAA,EAAA,CAAE;AACtF;;"}
|