@micromag/screen-keypad 0.3.832 → 0.4.4
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/assets/css/styles.css +1 -1
- package/es/index.d.ts +272 -0
- package/es/index.js +33 -87
- package/es/styles.css +1 -0
- package/package.json +29 -29
package/assets/css/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.container{height:100%;overflow:hidden;position:relative;-ms-touch-action:none;touch-action:none;width:100%}.container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.container.isPlaceholder .layout{padding:10px}.background{height:100%;z-index:1}.background,.fixedHeader{left:0;position:absolute;top:0;width:100%}.fixedHeader{display:-ms-flexbox;display:flex;right:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none}.fixedHeader.open{opacity:1;pointer-events:auto}.close{display:inline-block;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;-webkit-filter:invert(100%);filter:invert(100%);font-family:inherit;font-weight:700;margin-left:auto;padding:0}.close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff;outline:3px solid var(--mm-purple);outline-offset:4px}.closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.header{top:0}.footer,.header{left:0;position:absolute;width:100%}.footer{bottom:0}.inner{height:100%;position:relative;z-index:2}.layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.subtitle,.title{width:100%}.emptyText,.emptyTitle{border:2px dashed var(--mm-gray-800);color:var(--mm-gray-800);margin:10px auto;width:100%}.emptyTitle{height:100px}.emptyText{height:50px}.grid{width:85%}.item{height:100%;position:relative}.item .button{gap:0}.withSquareItems .item{aspect-ratio:1;height:auto}.button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;justify-content:center;padding:0;-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback)}.button:focus-visible,.button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.button.isEmpty{padding:2px;pointer-events:none}.button.disableHover,.button.isEmpty{cursor:default}.button.disableHover:active,.button.disableHover:hover,.button.isEmpty:active,.button.isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.button.isLink{-webkit-text-decoration:none;text-decoration:none}.button.isLink:hover{color:inherit}.withSquareItems .button{height:100%;left:0;position:absolute;top:0;width:100%}.button .buttonPlaceholder,.button .imagePlaceholder{margin:0;width:100%}.buttonLabel{padding:5px;width:100%}.empty{margin-bottom:10px;padding:10px;width:100%}.emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);left:0;pointer-events:none;position:absolute;z-index:2}.popup,.popupBackdrop{height:100%;top:0;width:100%}.popup{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative;position:fixed;right:0;-ms-touch-action:none;touch-action:none;-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback);z-index:6}.popup:active,.popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;padding:0;position:relative;text-align:left;-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback);width:100%;z-index:3}.popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.popupScroll{height:100%;width:100%}.popupInner{background-color:var(--mm-black);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.popupInner.withShadow{-webkit-box-shadow:0 0 2px var(--mm-black);box-shadow:0 0 2px var(--mm-black)}.popupInner .popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.popupInner .popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.placeholder{mix-blend-mode:normal}.popupContent,.popupHeading,.popupVisual{width:100%;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em}.popupHeading{font-weight:inherit;margin-bottom:.25em}.contentSplit .emptyHeading,.contentSplit .popupHeading{-ms-flex-order:1;order:1}.contentSplit .emptyVisual,.contentSplit .popupVisual{-ms-flex-order:2;order:2}.contentSplit .emptyContent,.contentSplit .popupContent{-ms-flex-order:3;order:3}.contentSplit .emptyCTA,.contentSplit .popupCTA{-ms-flex-order:4;order:4}.contentBottom .emptyVisual,.contentBottom .popupVisual{-ms-flex-order:1;order:1}.contentBottom .emptyHeading,.contentBottom .popupHeading{-ms-flex-order:2;order:2}.contentBottom .emptyContent,.contentBottom .popupContent{-ms-flex-order:3;order:3}.contentBottom .emptyCTA,.contentBottom .popupCTA{-ms-flex-order:4;order:4}.popupCTA{margin:0 auto;z-index:2}
|
package/es/index.d.ts
ADDED
|
@@ -0,0 +1,272 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { HeadingElement, TextElement, VisualElement, BoxStyle, TextStyle, Header, Footer, BackgroundElement } from '@micromag/core';
|
|
3
|
+
|
|
4
|
+
interface KeypadScreenProps {
|
|
5
|
+
items?: {
|
|
6
|
+
id?: string;
|
|
7
|
+
heading?: HeadingElement;
|
|
8
|
+
description?: TextElement;
|
|
9
|
+
visual?: VisualElement;
|
|
10
|
+
boxStyle?: BoxStyle;
|
|
11
|
+
}[] | null;
|
|
12
|
+
title?: HeadingElement | null;
|
|
13
|
+
subtitle?: TextElement | null;
|
|
14
|
+
layout?: 'top' | 'middle' | 'bottom' | null;
|
|
15
|
+
spacing?: number;
|
|
16
|
+
keypadSettings?: {
|
|
17
|
+
layout?: {
|
|
18
|
+
columnAlign?: 'left' | 'right' | 'middle';
|
|
19
|
+
columns?: number;
|
|
20
|
+
spacing?: number;
|
|
21
|
+
withSquareItems?: boolean;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
keypadLayout?: {
|
|
25
|
+
columnAlign?: 'left' | 'right' | 'middle';
|
|
26
|
+
columns?: number;
|
|
27
|
+
spacing?: number;
|
|
28
|
+
withSquareItems?: boolean;
|
|
29
|
+
} | null;
|
|
30
|
+
buttonStyles?: {
|
|
31
|
+
layout?: string;
|
|
32
|
+
textStyle?: TextStyle;
|
|
33
|
+
boxStyle?: BoxStyle;
|
|
34
|
+
fillImage?: boolean;
|
|
35
|
+
visualWidth?: number | string;
|
|
36
|
+
} | null;
|
|
37
|
+
popupStyles?: {
|
|
38
|
+
layout?: 'content-top' | 'content-split' | 'content-bottom';
|
|
39
|
+
headingTextStyle?: TextStyle;
|
|
40
|
+
contentTextStyle?: TextStyle;
|
|
41
|
+
boxStyle?: BoxStyle;
|
|
42
|
+
} | null;
|
|
43
|
+
header?: Header | null;
|
|
44
|
+
footer?: Footer | null;
|
|
45
|
+
background?: BackgroundElement | null;
|
|
46
|
+
current?: boolean;
|
|
47
|
+
preload?: boolean;
|
|
48
|
+
withoutCloseButton?: boolean;
|
|
49
|
+
className?: string | null;
|
|
50
|
+
}
|
|
51
|
+
declare function KeypadScreen({ items, title, subtitle, layout, spacing, keypadLayout, buttonStyles, popupStyles, header, footer, background, current, preload, withoutCloseButton, className, }: KeypadScreenProps): react_jsx_runtime.JSX.Element;
|
|
52
|
+
|
|
53
|
+
declare const _default: {
|
|
54
|
+
id: string;
|
|
55
|
+
type: string;
|
|
56
|
+
group: {
|
|
57
|
+
label: {
|
|
58
|
+
defaultMessage: string;
|
|
59
|
+
description: string;
|
|
60
|
+
};
|
|
61
|
+
order: number;
|
|
62
|
+
};
|
|
63
|
+
title: {
|
|
64
|
+
defaultMessage: string;
|
|
65
|
+
description: string;
|
|
66
|
+
};
|
|
67
|
+
layouts: string[];
|
|
68
|
+
component: typeof KeypadScreen;
|
|
69
|
+
states: ({
|
|
70
|
+
id: string;
|
|
71
|
+
label: {
|
|
72
|
+
defaultMessage: string;
|
|
73
|
+
description: string;
|
|
74
|
+
};
|
|
75
|
+
fields: ({
|
|
76
|
+
name: string;
|
|
77
|
+
type: string;
|
|
78
|
+
defaultValue: string;
|
|
79
|
+
label: {
|
|
80
|
+
defaultMessage: string;
|
|
81
|
+
description: string;
|
|
82
|
+
};
|
|
83
|
+
isSection?: undefined;
|
|
84
|
+
isList?: undefined;
|
|
85
|
+
withoutLabel?: undefined;
|
|
86
|
+
} | {
|
|
87
|
+
name: string;
|
|
88
|
+
type: string;
|
|
89
|
+
label: {
|
|
90
|
+
defaultMessage: string;
|
|
91
|
+
description: string;
|
|
92
|
+
};
|
|
93
|
+
isSection: boolean;
|
|
94
|
+
defaultValue?: undefined;
|
|
95
|
+
isList?: undefined;
|
|
96
|
+
withoutLabel?: undefined;
|
|
97
|
+
} | {
|
|
98
|
+
name: string;
|
|
99
|
+
type: string;
|
|
100
|
+
isList: boolean;
|
|
101
|
+
withoutLabel: boolean;
|
|
102
|
+
defaultValue: {
|
|
103
|
+
columnAlign: string;
|
|
104
|
+
columns: number;
|
|
105
|
+
spacing: number;
|
|
106
|
+
withSquareItems: boolean;
|
|
107
|
+
layout?: undefined;
|
|
108
|
+
boxStyle?: undefined;
|
|
109
|
+
};
|
|
110
|
+
label: {
|
|
111
|
+
defaultMessage: string;
|
|
112
|
+
description: string;
|
|
113
|
+
};
|
|
114
|
+
isSection?: undefined;
|
|
115
|
+
} | {
|
|
116
|
+
name: string;
|
|
117
|
+
type: string;
|
|
118
|
+
defaultValue: {
|
|
119
|
+
layout: string;
|
|
120
|
+
boxStyle: {
|
|
121
|
+
backgroundColor: {
|
|
122
|
+
alpha: number;
|
|
123
|
+
color: string;
|
|
124
|
+
};
|
|
125
|
+
};
|
|
126
|
+
columnAlign?: undefined;
|
|
127
|
+
columns?: undefined;
|
|
128
|
+
spacing?: undefined;
|
|
129
|
+
withSquareItems?: undefined;
|
|
130
|
+
};
|
|
131
|
+
label: {
|
|
132
|
+
defaultMessage: string;
|
|
133
|
+
description: string;
|
|
134
|
+
};
|
|
135
|
+
isList: boolean;
|
|
136
|
+
isSection?: undefined;
|
|
137
|
+
withoutLabel?: undefined;
|
|
138
|
+
})[];
|
|
139
|
+
defaultValue?: undefined;
|
|
140
|
+
repeatable?: undefined;
|
|
141
|
+
fieldName?: undefined;
|
|
142
|
+
} | {
|
|
143
|
+
id: string;
|
|
144
|
+
label: {
|
|
145
|
+
defaultMessage: string;
|
|
146
|
+
description: string;
|
|
147
|
+
};
|
|
148
|
+
fields: {
|
|
149
|
+
name: string;
|
|
150
|
+
type: string;
|
|
151
|
+
defaultValue: {
|
|
152
|
+
layout: string;
|
|
153
|
+
};
|
|
154
|
+
fields: ({
|
|
155
|
+
name: string;
|
|
156
|
+
type: string;
|
|
157
|
+
label: {
|
|
158
|
+
defaultMessage: string;
|
|
159
|
+
description: string;
|
|
160
|
+
};
|
|
161
|
+
isList?: undefined;
|
|
162
|
+
fields?: undefined;
|
|
163
|
+
} | {
|
|
164
|
+
name: string;
|
|
165
|
+
type: string;
|
|
166
|
+
isList: boolean;
|
|
167
|
+
label: {
|
|
168
|
+
defaultMessage: string;
|
|
169
|
+
description: string;
|
|
170
|
+
};
|
|
171
|
+
fields: {
|
|
172
|
+
name: string;
|
|
173
|
+
type: string;
|
|
174
|
+
label: {
|
|
175
|
+
defaultMessage: string;
|
|
176
|
+
description: string;
|
|
177
|
+
};
|
|
178
|
+
}[];
|
|
179
|
+
})[];
|
|
180
|
+
}[];
|
|
181
|
+
defaultValue?: undefined;
|
|
182
|
+
repeatable?: undefined;
|
|
183
|
+
fieldName?: undefined;
|
|
184
|
+
} | {
|
|
185
|
+
id: string;
|
|
186
|
+
label: {
|
|
187
|
+
defaultMessage: string;
|
|
188
|
+
description: string;
|
|
189
|
+
};
|
|
190
|
+
defaultValue: any[];
|
|
191
|
+
repeatable: boolean;
|
|
192
|
+
fieldName: string;
|
|
193
|
+
fields: ({
|
|
194
|
+
name: string;
|
|
195
|
+
type: string;
|
|
196
|
+
label: {
|
|
197
|
+
defaultMessage: string;
|
|
198
|
+
description: string;
|
|
199
|
+
};
|
|
200
|
+
theme?: undefined;
|
|
201
|
+
} | {
|
|
202
|
+
name: string;
|
|
203
|
+
type: string;
|
|
204
|
+
label: {
|
|
205
|
+
defaultMessage: string;
|
|
206
|
+
description: string;
|
|
207
|
+
};
|
|
208
|
+
theme: {
|
|
209
|
+
label: {
|
|
210
|
+
textStyle: string;
|
|
211
|
+
};
|
|
212
|
+
};
|
|
213
|
+
})[];
|
|
214
|
+
})[];
|
|
215
|
+
fields: ({
|
|
216
|
+
name: string;
|
|
217
|
+
type: string;
|
|
218
|
+
theme: {
|
|
219
|
+
textStyle: string;
|
|
220
|
+
badge?: undefined;
|
|
221
|
+
callToAction?: undefined;
|
|
222
|
+
};
|
|
223
|
+
label: {
|
|
224
|
+
defaultMessage: string;
|
|
225
|
+
description: string;
|
|
226
|
+
};
|
|
227
|
+
} | {
|
|
228
|
+
name: string;
|
|
229
|
+
type: string;
|
|
230
|
+
label: {
|
|
231
|
+
defaultMessage: string;
|
|
232
|
+
description: string;
|
|
233
|
+
};
|
|
234
|
+
theme?: undefined;
|
|
235
|
+
} | {
|
|
236
|
+
name: string;
|
|
237
|
+
type: string;
|
|
238
|
+
label: {
|
|
239
|
+
defaultMessage: string;
|
|
240
|
+
description: string;
|
|
241
|
+
};
|
|
242
|
+
theme: {
|
|
243
|
+
badge: {
|
|
244
|
+
label: {
|
|
245
|
+
textStyle: string;
|
|
246
|
+
};
|
|
247
|
+
boxStyle: string;
|
|
248
|
+
};
|
|
249
|
+
textStyle?: undefined;
|
|
250
|
+
callToAction?: undefined;
|
|
251
|
+
};
|
|
252
|
+
} | {
|
|
253
|
+
name: string;
|
|
254
|
+
type: string;
|
|
255
|
+
label: {
|
|
256
|
+
defaultMessage: string;
|
|
257
|
+
description: string;
|
|
258
|
+
};
|
|
259
|
+
theme: {
|
|
260
|
+
callToAction: {
|
|
261
|
+
label: {
|
|
262
|
+
textStyle: string;
|
|
263
|
+
};
|
|
264
|
+
boxStyle: string;
|
|
265
|
+
};
|
|
266
|
+
textStyle?: undefined;
|
|
267
|
+
badge?: undefined;
|
|
268
|
+
};
|
|
269
|
+
})[];
|
|
270
|
+
}[];
|
|
271
|
+
|
|
272
|
+
export { KeypadScreen as Keypad, _default as default };
|
package/es/index.js
CHANGED
|
@@ -6,9 +6,7 @@ import { animated } from '@react-spring/web';
|
|
|
6
6
|
import classNames from 'classnames';
|
|
7
7
|
import isEmpty from 'lodash/isEmpty';
|
|
8
8
|
import isString from 'lodash/isString';
|
|
9
|
-
import PropTypes from 'prop-types';
|
|
10
9
|
import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
|
|
11
|
-
import { PropTypes as PropTypes$1 } from '@micromag/core';
|
|
12
10
|
import { Close, ScreenElement } from '@micromag/core/components';
|
|
13
11
|
import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
|
|
14
12
|
import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
|
|
@@ -26,7 +24,7 @@ import Scroll from '@micromag/element-scroll';
|
|
|
26
24
|
import Text from '@micromag/element-text';
|
|
27
25
|
import Visual from '@micromag/element-visual';
|
|
28
26
|
|
|
29
|
-
var styles = {"
|
|
27
|
+
var styles = {"container":"container","isPlaceholder":"isPlaceholder","layout":"layout","background":"background","fixedHeader":"fixedHeader","open":"open","close":"close","closeIcon":"closeIcon","header":"header","footer":"footer","inner":"inner","title":"title","subtitle":"subtitle","emptyTitle":"emptyTitle","emptyText":"emptyText","grid":"grid","item":"item","button":"button","withSquareItems":"withSquareItems","isEmpty":"isEmpty","disableHover":"disableHover","isLink":"isLink","imagePlaceholder":"imagePlaceholder","buttonPlaceholder":"buttonPlaceholder","buttonLabel":"buttonLabel","empty":"empty","emptyButtonVisual":"emptyButtonVisual","emptyButtonLabel":"emptyButtonLabel","popupBackdrop":"popupBackdrop","popup":"popup","popupButton":"popupButton","popupScroll":"popupScroll","popupInner":"popupInner","withShadow":"withShadow","popupContent":"popupContent","placeholder":"placeholder","popupHeading":"popupHeading","popupVisual":"popupVisual","contentSplit":"contentSplit","emptyHeading":"emptyHeading","emptyVisual":"emptyVisual","emptyContent":"emptyContent","emptyCTA":"emptyCTA","popupCTA":"popupCTA","contentBottom":"contentBottom"};
|
|
30
28
|
|
|
31
29
|
var placeholders = [{
|
|
32
30
|
id: '1'
|
|
@@ -55,87 +53,37 @@ var placeholderPopupBoxStyles = {
|
|
|
55
53
|
bottom: 30
|
|
56
54
|
}
|
|
57
55
|
};
|
|
58
|
-
|
|
59
|
-
items
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
visualWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
|
|
90
|
-
}),
|
|
91
|
-
popupStyles: PropTypes.shape({
|
|
92
|
-
layout: PropTypes.oneOf(['content-top', 'content-split', 'content-bottom']),
|
|
93
|
-
headingTextStyle: PropTypes$1.textStyle,
|
|
94
|
-
contentTextStyle: PropTypes$1.textStyle,
|
|
95
|
-
boxStyle: PropTypes$1.boxStyle
|
|
96
|
-
}),
|
|
97
|
-
header: PropTypes$1.header,
|
|
98
|
-
footer: PropTypes$1.footer,
|
|
99
|
-
background: PropTypes$1.backgroundElement,
|
|
100
|
-
current: PropTypes.bool,
|
|
101
|
-
preload: PropTypes.bool,
|
|
102
|
-
withoutCloseButton: PropTypes.bool,
|
|
103
|
-
className: PropTypes.string
|
|
104
|
-
};
|
|
105
|
-
var defaultProps = {
|
|
106
|
-
items: null,
|
|
107
|
-
title: null,
|
|
108
|
-
subtitle: null,
|
|
109
|
-
layout: null,
|
|
110
|
-
spacing: 20,
|
|
111
|
-
keypadSettings: null,
|
|
112
|
-
keypadLayout: null,
|
|
113
|
-
buttonStyles: null,
|
|
114
|
-
popupStyles: null,
|
|
115
|
-
header: null,
|
|
116
|
-
footer: null,
|
|
117
|
-
background: null,
|
|
118
|
-
current: true,
|
|
119
|
-
preload: true,
|
|
120
|
-
withoutCloseButton: false,
|
|
121
|
-
className: null
|
|
122
|
-
};
|
|
123
|
-
var KeypadScreen = function KeypadScreen(_ref) {
|
|
124
|
-
var items = _ref.items,
|
|
125
|
-
title = _ref.title,
|
|
126
|
-
subtitle = _ref.subtitle,
|
|
127
|
-
layout = _ref.layout,
|
|
128
|
-
spacing = _ref.spacing,
|
|
129
|
-
keypadLayout = _ref.keypadLayout,
|
|
130
|
-
buttonStyles = _ref.buttonStyles,
|
|
131
|
-
popupStyles = _ref.popupStyles,
|
|
132
|
-
header = _ref.header,
|
|
133
|
-
footer = _ref.footer,
|
|
134
|
-
background = _ref.background,
|
|
135
|
-
current = _ref.current,
|
|
136
|
-
preload = _ref.preload,
|
|
137
|
-
withoutCloseButton = _ref.withoutCloseButton,
|
|
138
|
-
className = _ref.className;
|
|
56
|
+
function KeypadScreen(_ref) {
|
|
57
|
+
var _ref$items = _ref.items,
|
|
58
|
+
items = _ref$items === void 0 ? null : _ref$items,
|
|
59
|
+
_ref$title = _ref.title,
|
|
60
|
+
title = _ref$title === void 0 ? null : _ref$title,
|
|
61
|
+
_ref$subtitle = _ref.subtitle,
|
|
62
|
+
subtitle = _ref$subtitle === void 0 ? null : _ref$subtitle,
|
|
63
|
+
_ref$layout = _ref.layout,
|
|
64
|
+
layout = _ref$layout === void 0 ? null : _ref$layout,
|
|
65
|
+
_ref$spacing = _ref.spacing,
|
|
66
|
+
spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
|
|
67
|
+
_ref$keypadLayout = _ref.keypadLayout,
|
|
68
|
+
keypadLayout = _ref$keypadLayout === void 0 ? null : _ref$keypadLayout,
|
|
69
|
+
_ref$buttonStyles = _ref.buttonStyles,
|
|
70
|
+
buttonStyles = _ref$buttonStyles === void 0 ? null : _ref$buttonStyles,
|
|
71
|
+
_ref$popupStyles = _ref.popupStyles,
|
|
72
|
+
popupStyles = _ref$popupStyles === void 0 ? null : _ref$popupStyles,
|
|
73
|
+
_ref$header = _ref.header,
|
|
74
|
+
header = _ref$header === void 0 ? null : _ref$header,
|
|
75
|
+
_ref$footer = _ref.footer,
|
|
76
|
+
footer = _ref$footer === void 0 ? null : _ref$footer,
|
|
77
|
+
_ref$background = _ref.background,
|
|
78
|
+
background = _ref$background === void 0 ? null : _ref$background,
|
|
79
|
+
_ref$current = _ref.current,
|
|
80
|
+
current = _ref$current === void 0 ? true : _ref$current,
|
|
81
|
+
_ref$preload = _ref.preload,
|
|
82
|
+
preload = _ref$preload === void 0 ? true : _ref$preload,
|
|
83
|
+
_ref$withoutCloseButt = _ref.withoutCloseButton,
|
|
84
|
+
withoutCloseButton = _ref$withoutCloseButt === void 0 ? false : _ref$withoutCloseButt,
|
|
85
|
+
_ref$className = _ref.className,
|
|
86
|
+
className = _ref$className === void 0 ? null : _ref$className;
|
|
139
87
|
var containerRef = useRef(null);
|
|
140
88
|
var popupInnerRef = useRef(null);
|
|
141
89
|
var trackScreenEvent = useTrackScreenEvent('keypad');
|
|
@@ -721,9 +669,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
|
|
|
721
669
|
paddingTop: spacing
|
|
722
670
|
}
|
|
723
671
|
}, /*#__PURE__*/React.createElement(Footer, footerProps)) : null));
|
|
724
|
-
}
|
|
725
|
-
KeypadScreen.propTypes = propTypes;
|
|
726
|
-
KeypadScreen.defaultProps = defaultProps;
|
|
672
|
+
}
|
|
727
673
|
|
|
728
674
|
var definition = [{
|
|
729
675
|
id: 'keypad',
|
package/es/styles.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.container{height:100%;overflow:hidden;position:relative;-ms-touch-action:none;touch-action:none;width:100%}.container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.container.isPlaceholder .layout{padding:10px}.background{height:100%;z-index:1}.background,.fixedHeader{left:0;position:absolute;top:0;width:100%}.fixedHeader{display:-ms-flexbox;display:flex;right:0;z-index:50;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end;opacity:0;padding:10px;pointer-events:none}.fixedHeader.open{opacity:1;pointer-events:auto}.close{display:inline-block;display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;-webkit-filter:invert(100%);filter:invert(100%);font-family:inherit;font-weight:700;margin-left:auto;padding:0}.close:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff;outline:3px solid var(--mm-purple);outline-offset:4px}.closeIcon{border-radius:50%;color:#000;height:25px;padding:0;width:25px}.header{top:0}.footer,.header{left:0;position:absolute;width:100%}.footer{bottom:0}.inner{height:100%;position:relative;z-index:2}.layout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;transition:padding .2s ease-out}.subtitle,.title{width:100%}.emptyText,.emptyTitle{border:2px dashed var(--mm-gray-800);color:var(--mm-gray-800);margin:10px auto;width:100%}.emptyTitle{height:100px}.emptyText{height:50px}.grid{width:85%}.item{height:100%;position:relative}.item .button{gap:0}.withSquareItems .item{aspect-ratio:1;height:auto}.button{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;overflow:hidden;position:relative;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;font-weight:inherit;justify-content:center;padding:0;-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback)}.button:focus-visible,.button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.button.isEmpty{padding:2px;pointer-events:none}.button.disableHover,.button.isEmpty{cursor:default}.button.disableHover:active,.button.disableHover:hover,.button.isEmpty:active,.button.isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.button.isLink{-webkit-text-decoration:none;text-decoration:none}.button.isLink:hover{color:inherit}.withSquareItems .button{height:100%;left:0;position:absolute;top:0;width:100%}.button .buttonPlaceholder,.button .imagePlaceholder{margin:0;width:100%}.buttonLabel{padding:5px;width:100%}.empty{margin-bottom:10px;padding:10px;width:100%}.emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);left:0;pointer-events:none;position:absolute;z-index:2}.popup,.popupBackdrop{height:100%;top:0;width:100%}.popup{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative;position:fixed;right:0;-ms-touch-action:none;touch-action:none;-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback);z-index:6}.popup:active,.popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;padding:0;position:relative;text-align:left;-webkit-transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:-webkit-transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback);transition:transform .3s var(--mm-ease-in-kickback),-webkit-transform .3s var(--mm-ease-in-kickback);width:100%;z-index:3}.popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.popupScroll{height:100%;width:100%}.popupInner{background-color:var(--mm-black);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.popupInner.withShadow{-webkit-box-shadow:0 0 2px var(--mm-black);box-shadow:0 0 2px var(--mm-black)}.popupInner .popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.popupInner .popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.placeholder{mix-blend-mode:normal}.popupContent,.popupHeading,.popupVisual{width:100%;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;margin-bottom:.5em}.popupHeading{font-weight:inherit;margin-bottom:.25em}.contentSplit .emptyHeading,.contentSplit .popupHeading{-ms-flex-order:1;order:1}.contentSplit .emptyVisual,.contentSplit .popupVisual{-ms-flex-order:2;order:2}.contentSplit .emptyContent,.contentSplit .popupContent{-ms-flex-order:3;order:3}.contentSplit .emptyCTA,.contentSplit .popupCTA{-ms-flex-order:4;order:4}.contentBottom .emptyVisual,.contentBottom .popupVisual{-ms-flex-order:1;order:1}.contentBottom .emptyHeading,.contentBottom .popupHeading{-ms-flex-order:2;order:2}.contentBottom .emptyContent,.contentBottom .popupContent{-ms-flex-order:3;order:3}.contentBottom .emptyCTA,.contentBottom .popupCTA{-ms-flex-order:4;order:4}.popupCTA{margin:0 auto;z-index:2}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micromag/screen-keypad",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.4",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
"style": "assets/css/styles.css",
|
|
40
40
|
"exports": {
|
|
41
41
|
".": {
|
|
42
|
+
"types": "./es/index.d.ts",
|
|
42
43
|
"import": "./es/index.js"
|
|
43
44
|
},
|
|
44
45
|
"./assets/css/styles": "./assets/css/styles.css",
|
|
@@ -52,48 +53,47 @@
|
|
|
52
53
|
"scripts": {
|
|
53
54
|
"clean": "rm -rf es && rm -rf lib && rm -rf assets",
|
|
54
55
|
"prepublishOnly": "npm run build",
|
|
55
|
-
"build": "../../scripts/prepare-package.sh",
|
|
56
|
+
"build": "../../scripts/prepare-package.sh --types",
|
|
56
57
|
"rollup": "../../node_modules/.bin/rollup --config ../../rollup.config.js"
|
|
57
58
|
},
|
|
58
59
|
"devDependencies": {
|
|
59
|
-
"react": "^
|
|
60
|
-
"react-dom": "^
|
|
60
|
+
"react": "^19.2.0",
|
|
61
|
+
"react-dom": "^18.3.0 || ^19.0.0"
|
|
61
62
|
},
|
|
62
63
|
"peerDependencies": {
|
|
63
|
-
"react": "^
|
|
64
|
-
"react-dom": "^
|
|
64
|
+
"react": "^19.2.0",
|
|
65
|
+
"react-dom": "^18.3.0 || ^19.0.0"
|
|
65
66
|
},
|
|
66
67
|
"dependencies": {
|
|
67
68
|
"@babel/runtime": "^7.13.10",
|
|
68
|
-
"@micromag/core": "^0.
|
|
69
|
-
"@micromag/element-background": "^0.
|
|
70
|
-
"@micromag/element-button": "^0.
|
|
71
|
-
"@micromag/element-call-to-action": "^0.
|
|
72
|
-
"@micromag/element-container": "^0.
|
|
73
|
-
"@micromag/element-footer": "^0.
|
|
74
|
-
"@micromag/element-grid": "^0.
|
|
75
|
-
"@micromag/element-header": "^0.
|
|
76
|
-
"@micromag/element-heading": "^0.
|
|
77
|
-
"@micromag/element-keypad": "^0.
|
|
78
|
-
"@micromag/element-layout": "^0.
|
|
79
|
-
"@micromag/element-scroll": "^0.
|
|
80
|
-
"@micromag/element-text": "^0.
|
|
81
|
-
"@micromag/element-urbania-author": "^0.
|
|
82
|
-
"@micromag/element-visual": "^0.
|
|
83
|
-
"@micromag/transforms": "^0.
|
|
84
|
-
"@react-spring/core": "^
|
|
85
|
-
"@react-spring/web": "^
|
|
69
|
+
"@micromag/core": "^0.4.4",
|
|
70
|
+
"@micromag/element-background": "^0.4.4",
|
|
71
|
+
"@micromag/element-button": "^0.4.4",
|
|
72
|
+
"@micromag/element-call-to-action": "^0.4.4",
|
|
73
|
+
"@micromag/element-container": "^0.4.4",
|
|
74
|
+
"@micromag/element-footer": "^0.4.4",
|
|
75
|
+
"@micromag/element-grid": "^0.4.4",
|
|
76
|
+
"@micromag/element-header": "^0.4.4",
|
|
77
|
+
"@micromag/element-heading": "^0.4.4",
|
|
78
|
+
"@micromag/element-keypad": "^0.4.4",
|
|
79
|
+
"@micromag/element-layout": "^0.4.4",
|
|
80
|
+
"@micromag/element-scroll": "^0.4.4",
|
|
81
|
+
"@micromag/element-text": "^0.4.4",
|
|
82
|
+
"@micromag/element-urbania-author": "^0.4.4",
|
|
83
|
+
"@micromag/element-visual": "^0.4.4",
|
|
84
|
+
"@micromag/transforms": "^0.4.4",
|
|
85
|
+
"@react-spring/core": "^10.0.3",
|
|
86
|
+
"@react-spring/web": "^10.0.3",
|
|
86
87
|
"@use-gesture/react": "^10.3.0",
|
|
87
88
|
"classnames": "^2.2.6",
|
|
88
|
-
"lodash": "^4.17.
|
|
89
|
-
"
|
|
90
|
-
"react-intl": "^6.6.4",
|
|
91
|
-
"react-transition-group": "^4.4.2",
|
|
89
|
+
"lodash": "^4.17.23",
|
|
90
|
+
"react-intl": "^8.1.3",
|
|
92
91
|
"uuid": "^9.0.0"
|
|
93
92
|
},
|
|
94
93
|
"publishConfig": {
|
|
95
94
|
"access": "public",
|
|
96
95
|
"registry": "https://registry.npmjs.org/"
|
|
97
96
|
},
|
|
98
|
-
"gitHead": "
|
|
97
|
+
"gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d",
|
|
98
|
+
"types": "es/index.d.ts"
|
|
99
99
|
}
|