@telefonica/mistica 14.41.0 → 14.42.0

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.
Files changed (137) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/boxed.css-mistica.js +14 -5
  3. package/dist/boxed.css.d.ts +1 -0
  4. package/dist/boxed.d.ts +1 -0
  5. package/dist/boxed.js +11 -9
  6. package/dist/button-fixed-footer-layout.d.ts +1 -0
  7. package/dist/button-fixed-footer-layout.js +19 -14
  8. package/dist/button-layout.css-mistica.js +16 -13
  9. package/dist/button-layout.css.d.ts +1 -0
  10. package/dist/button-layout.js +15 -15
  11. package/dist/button.js +43 -35
  12. package/dist/carousel.d.ts +13 -0
  13. package/dist/carousel.js +325 -223
  14. package/dist/credit-card-expiration-field.js +30 -26
  15. package/dist/credit-card-number-field.css-mistica.js +7 -7
  16. package/dist/credit-card-number-field.js +59 -45
  17. package/dist/cvv-field.js +46 -41
  18. package/dist/date-field.css-mistica.js +14 -0
  19. package/dist/date-field.css.d.ts +1 -0
  20. package/dist/date-field.css.ts.vanilla.css-mistica.js +11 -0
  21. package/dist/date-field.js +41 -35
  22. package/dist/date-time-field.js +40 -34
  23. package/dist/date-time-picker.js +43 -45
  24. package/dist/decimal-field.js +26 -22
  25. package/dist/dialog-context.d.ts +24 -0
  26. package/dist/dialog-context.js +192 -0
  27. package/dist/dialog.css-mistica.js +15 -12
  28. package/dist/dialog.css.d.ts +1 -0
  29. package/dist/dialog.d.ts +14 -44
  30. package/dist/dialog.js +161 -245
  31. package/dist/double-field.css-mistica.js +3 -2
  32. package/dist/email-field.js +15 -11
  33. package/dist/feedback.css-mistica.js +18 -15
  34. package/dist/feedback.css.d.ts +5 -4
  35. package/dist/feedback.js +154 -147
  36. package/dist/fixed-footer-layout.css-mistica.js +1 -1
  37. package/dist/fixed-footer-layout.js +9 -8
  38. package/dist/iban-field.js +31 -27
  39. package/dist/icons/icon-amex.d.ts +1 -1
  40. package/dist/icons/icon-cvv-amex.d.ts +1 -1
  41. package/dist/icons/icon-cvv-visa-mc.d.ts +1 -1
  42. package/dist/icons/icon-mastercard.d.ts +1 -1
  43. package/dist/icons/icon-visa.d.ts +1 -1
  44. package/dist/index.d.ts +2 -2
  45. package/dist/index.js +16 -4
  46. package/dist/inline.css-mistica.js +9 -6
  47. package/dist/inline.css.d.ts +1 -1
  48. package/dist/inline.js +9 -9
  49. package/dist/integer-field.js +17 -13
  50. package/dist/loading-bar.css-mistica.js +4 -7
  51. package/dist/loading-bar.css.d.ts +0 -2
  52. package/dist/loading-bar.js +3 -6
  53. package/dist/month-field.js +39 -33
  54. package/dist/package-version.js +1 -1
  55. package/dist/password-field.js +46 -44
  56. package/dist/phone-number-field.js +50 -46
  57. package/dist/pin-field.css-mistica.js +12 -6
  58. package/dist/pin-field.css.d.ts +2 -0
  59. package/dist/pin-field.d.ts +3 -1
  60. package/dist/pin-field.js +129 -95
  61. package/dist/responsive-layout.css-mistica.js +10 -7
  62. package/dist/responsive-layout.css.d.ts +2 -1
  63. package/dist/responsive-layout.d.ts +1 -1
  64. package/dist/responsive-layout.js +20 -17
  65. package/dist/search-field.js +36 -35
  66. package/dist/select.css-mistica.js +16 -15
  67. package/dist/select.css.d.ts +1 -0
  68. package/dist/select.js +138 -143
  69. package/dist/text-field-base.css-mistica.js +45 -21
  70. package/dist/text-field-base.css.d.ts +30 -7
  71. package/dist/text-field-base.d.ts +11 -0
  72. package/dist/text-field-base.js +175 -140
  73. package/dist/text-field-components.css-mistica.js +13 -21
  74. package/dist/text-field-components.css.d.ts +0 -3
  75. package/dist/text-field-components.d.ts +3 -0
  76. package/dist/text-field-components.js +38 -35
  77. package/dist/text-field.js +26 -22
  78. package/dist/theme-context-provider.js +2 -2
  79. package/dist/utils/platform.js +8 -11
  80. package/dist-es/boxed.css-mistica.js +3 -2
  81. package/dist-es/boxed.js +17 -15
  82. package/dist-es/button-fixed-footer-layout.js +29 -24
  83. package/dist-es/button-layout.css-mistica.js +7 -7
  84. package/dist-es/button-layout.js +23 -23
  85. package/dist-es/button.js +65 -57
  86. package/dist-es/carousel.js +373 -280
  87. package/dist-es/credit-card-expiration-field.js +34 -30
  88. package/dist-es/credit-card-number-field.css-mistica.js +4 -4
  89. package/dist-es/credit-card-number-field.js +84 -70
  90. package/dist-es/cvv-field.js +68 -63
  91. package/dist-es/date-field.css-mistica.js +5 -0
  92. package/dist-es/date-field.css.ts.vanilla.css-mistica.js +2 -0
  93. package/dist-es/date-field.js +46 -40
  94. package/dist-es/date-time-field.js +47 -41
  95. package/dist-es/date-time-picker.js +55 -57
  96. package/dist-es/decimal-field.js +31 -27
  97. package/dist-es/dialog-context.js +125 -0
  98. package/dist-es/dialog.css-mistica.js +3 -3
  99. package/dist-es/dialog.js +192 -262
  100. package/dist-es/double-field.css-mistica.js +3 -2
  101. package/dist-es/email-field.js +16 -12
  102. package/dist-es/feedback.css-mistica.js +2 -2
  103. package/dist-es/feedback.js +191 -184
  104. package/dist-es/fixed-footer-layout.css-mistica.js +1 -1
  105. package/dist-es/fixed-footer-layout.js +21 -20
  106. package/dist-es/iban-field.js +42 -38
  107. package/dist-es/index.js +1778 -1778
  108. package/dist-es/inline.css-mistica.js +3 -3
  109. package/dist-es/inline.js +18 -18
  110. package/dist-es/integer-field.js +21 -17
  111. package/dist-es/loading-bar.css-mistica.js +2 -2
  112. package/dist-es/loading-bar.js +10 -13
  113. package/dist-es/month-field.js +47 -41
  114. package/dist-es/package-version.js +1 -1
  115. package/dist-es/password-field.js +54 -52
  116. package/dist-es/phone-number-field.js +53 -49
  117. package/dist-es/pin-field.css-mistica.js +2 -2
  118. package/dist-es/pin-field.js +145 -111
  119. package/dist-es/responsive-layout.css-mistica.js +3 -3
  120. package/dist-es/responsive-layout.js +27 -24
  121. package/dist-es/search-field.js +45 -44
  122. package/dist-es/select.css-mistica.js +8 -7
  123. package/dist-es/select.js +167 -172
  124. package/dist-es/style.css +1 -1
  125. package/dist-es/text-field-base.css-mistica.js +2 -2
  126. package/dist-es/text-field-base.js +189 -157
  127. package/dist-es/text-field-components.css-mistica.js +3 -2
  128. package/dist-es/text-field-components.js +52 -49
  129. package/dist-es/text-field.js +31 -27
  130. package/dist-es/theme-context-provider.js +1 -1
  131. package/dist-es/utils/platform.js +6 -6
  132. package/package.json +1 -1
  133. package/dist/password-field.css-mistica.js +0 -13
  134. package/dist/password-field.css.d.ts +0 -1
  135. package/dist-es/password-field.css-mistica.js +0 -4
  136. /package/dist/{password-field.css.ts.vanilla.css-mistica.js → boxed.css.ts.vanilla.css-mistica.js} +0 -0
  137. /package/dist-es/{password-field.css.ts.vanilla.css-mistica.js → boxed.css.ts.vanilla.css-mistica.js} +0 -0
@@ -0,0 +1,192 @@
1
+ "use client";
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ function _export(target, all) {
7
+ for(var name in all)Object.defineProperty(target, name, {
8
+ enumerable: true,
9
+ get: all[name]
10
+ });
11
+ }
12
+ _export(exports, {
13
+ DialogRoot: function() {
14
+ return C;
15
+ },
16
+ alert: function() {
17
+ return p;
18
+ },
19
+ confirm: function() {
20
+ return x;
21
+ },
22
+ dialog: function() {
23
+ return w;
24
+ },
25
+ useDialog: function() {
26
+ return f;
27
+ }
28
+ });
29
+ const _jsxruntime = require("react/jsx-runtime");
30
+ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
31
+ function _getRequireWildcardCache(nodeInterop) {
32
+ if (typeof WeakMap !== "function") return null;
33
+ var cacheBabelInterop = new WeakMap();
34
+ var cacheNodeInterop = new WeakMap();
35
+ return (_getRequireWildcardCache = function(nodeInterop) {
36
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
37
+ })(nodeInterop);
38
+ }
39
+ function _interop_require_wildcard(obj, nodeInterop) {
40
+ if (!nodeInterop && obj && obj.__esModule) {
41
+ return obj;
42
+ }
43
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
44
+ return {
45
+ default: obj
46
+ };
47
+ }
48
+ var cache = _getRequireWildcardCache(nodeInterop);
49
+ if (cache && cache.has(obj)) {
50
+ return cache.get(obj);
51
+ }
52
+ var newObj = {
53
+ __proto__: null
54
+ };
55
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
56
+ for(var key in obj){
57
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
58
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
59
+ if (desc && (desc.get || desc.set)) {
60
+ Object.defineProperty(newObj, key, desc);
61
+ } else {
62
+ newObj[key] = obj[key];
63
+ }
64
+ }
65
+ }
66
+ newObj.default = obj;
67
+ if (cache) {
68
+ cache.set(obj, newObj);
69
+ }
70
+ return newObj;
71
+ }
72
+ function _define_property(obj, key, value) {
73
+ if (key in obj) {
74
+ Object.defineProperty(obj, key, {
75
+ value: value,
76
+ enumerable: true,
77
+ configurable: true,
78
+ writable: true
79
+ });
80
+ } else {
81
+ obj[key] = value;
82
+ }
83
+ return obj;
84
+ }
85
+ function _object_spread(target) {
86
+ for(var i = 1; i < arguments.length; i++){
87
+ var source = arguments[i] != null ? arguments[i] : {};
88
+ var ownKeys = Object.keys(source);
89
+ if (typeof Object.getOwnPropertySymbols === "function") {
90
+ ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
91
+ return Object.getOwnPropertyDescriptor(source, sym).enumerable;
92
+ }));
93
+ }
94
+ ownKeys.forEach(function(key) {
95
+ _define_property(target, key, source[key]);
96
+ });
97
+ }
98
+ return target;
99
+ }
100
+ function ownKeys(object, enumerableOnly) {
101
+ var keys = Object.keys(object);
102
+ if (Object.getOwnPropertySymbols) {
103
+ var symbols = Object.getOwnPropertySymbols(object);
104
+ if (enumerableOnly) {
105
+ symbols = symbols.filter(function(sym) {
106
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
107
+ });
108
+ }
109
+ keys.push.apply(keys, symbols);
110
+ }
111
+ return keys;
112
+ }
113
+ function _object_spread_props(target, source) {
114
+ source = source != null ? source : {};
115
+ if (Object.getOwnPropertyDescriptors) {
116
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
117
+ } else {
118
+ ownKeys(Object(source)).forEach(function(key) {
119
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
120
+ });
121
+ }
122
+ return target;
123
+ }
124
+ const c = /*#__PURE__*/ _react.createContext({
125
+ mounted: !1,
126
+ dialog: null,
127
+ setDialog: ()=>{}
128
+ }), m = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "dialog" */ "./dialog.js")))), a = ()=>{
129
+ throw Error("Tried to show a dialog but the DialogRoot component was not mounted (missing ThemeContextProvider?)");
130
+ }, f = ()=>{
131
+ const { dialog: o, setDialog: s, mounted: i } = _react.useContext(c), n = _react.useCallback((t)=>{
132
+ if (i || a(), t && o) throw Error("Tried to show a dialog on top of another dialog");
133
+ s(t);
134
+ }, [
135
+ s,
136
+ o,
137
+ i
138
+ ]);
139
+ return _react.useMemo(()=>({
140
+ alert: (t)=>n(_object_spread({
141
+ type: "alert"
142
+ }, t)),
143
+ confirm: (t)=>n(_object_spread({
144
+ type: "confirm"
145
+ }, t)),
146
+ dialog: (t)=>n(_object_spread({
147
+ type: "dialog"
148
+ }, t))
149
+ }), [
150
+ n
151
+ ]);
152
+ }, g = {
153
+ alert: a,
154
+ confirm: a,
155
+ dialog: a
156
+ };
157
+ let l = g;
158
+ const D = ()=>{
159
+ const o = f();
160
+ return _react.useEffect(()=>(l = o, ()=>{
161
+ l = g;
162
+ }), [
163
+ o
164
+ ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
165
+ }, p = (o)=>l.alert(o), x = (o)=>l.confirm(o), w = (o)=>l.dialog(o), C = (param)=>{
166
+ let { children: o } = param;
167
+ const { mounted: s } = _react.useContext(c), [i, n] = _react.useState(null), t = _react.useMemo(()=>({
168
+ mounted: !0,
169
+ dialog: i,
170
+ setDialog: n
171
+ }), [
172
+ i,
173
+ n
174
+ ]);
175
+ return s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
176
+ children: o
177
+ }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(c.Provider, {
178
+ value: t,
179
+ children: [
180
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(D, {}),
181
+ o,
182
+ i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
183
+ fallback: null,
184
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(m, _object_spread_props(_object_spread({}, i), {
185
+ onDestroy: ()=>{
186
+ n(null);
187
+ }
188
+ }))
189
+ })
190
+ ]
191
+ });
192
+ };
@@ -9,40 +9,43 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ ANIMATION_DURATION_MS: function() {
13
+ return v;
14
+ },
12
15
  closedModalContent: function() {
13
- return _;
16
+ return y;
14
17
  },
15
18
  closedOpactityLayer: function() {
16
- return y;
19
+ return f;
17
20
  },
18
21
  dialogActions: function() {
19
- return f;
22
+ return l;
20
23
  },
21
24
  dialogContent: function() {
22
- return l;
25
+ return a;
23
26
  },
24
27
  iconContainer: function() {
25
- return a;
28
+ return d;
26
29
  },
27
30
  modalCloseButtonContainer: function() {
28
- return d;
31
+ return o;
29
32
  },
30
33
  modalContent: function() {
31
- return o;
34
+ return r;
32
35
  },
33
36
  modalOpacityLayer: function() {
34
- return r;
37
+ return t;
35
38
  },
36
39
  variants: function() {
37
- return t;
40
+ return i;
38
41
  },
39
42
  wrapper: function() {
40
- return i;
43
+ return e;
41
44
  }
42
45
  });
43
46
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
44
47
  require("./dialog.css.ts.vanilla.css-mistica.js");
45
- var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6w", l = "_3dl29lj _1y2v1nfh4 _1y2v1nfii", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6q _1y2v1nf7z _1y2v1nf98 _1y2v1nfah _1y2v1nfgd _1y2v1nfjp _1y2v1nfkj", o = "_3dl29la _1y2v1nf36 _1y2v1nfj9", r = "_3dl29l5 _1y2v1nfge _1y2v1nfgi _1y2v1nfgr _1y2v1nfgx _1y2v1nfgo _1y2v1nfjp _1y2v1nfkj _1y2v1nfky _1y2v1nfk4 _1y2v1nf3h", t = {
48
+ var v = 200, y = "_3dl29lb", f = "_3dl29l6", l = "_3dl29ll _1y2v1nf6w", a = "_3dl29lj _1y2v1nfh4 _1y2v1nfii", d = "_3dl29lm", o = "_3dl29l8 _1y2v1nf6q _1y2v1nf7z _1y2v1nf98 _1y2v1nfah _1y2v1nfgd _1y2v1nfjp _1y2v1nfkj", r = "_3dl29la _1y2v1nf36 _1y2v1nfj9", t = "_3dl29l5 _1y2v1nfge _1y2v1nfgi _1y2v1nfgr _1y2v1nfgx _1y2v1nfgo _1y2v1nfjp _1y2v1nfkj _1y2v1nfky _1y2v1nfk4 _1y2v1nf3h", i = {
46
49
  dialog: "_3dl29ld _1y2v1nfgi _1y2v1nfgo _1y2v1nfgu _1y2v1nf9e _1y2v1nfan _1y2v1nf72 _1y2v1nf85",
47
50
  default: "_3dl29ld _1y2v1nfgi _1y2v1nfgo _1y2v1nfgu _1y2v1nf6w _1y2v1nf85 _1y2v1nf9e _1y2v1nfan"
48
- }, i = "_3dl29l3 _1y2v1nfgc";
51
+ }, e = "_3dl29l3 _1y2v1nfgc";
@@ -1,3 +1,4 @@
1
+ export declare const ANIMATION_DURATION_MS = 200;
1
2
  export declare const wrapper: string;
2
3
  export declare const modalOpacityLayer: string;
3
4
  export declare const closedOpactityLayer: string;
package/dist/dialog.d.ts CHANGED
@@ -5,63 +5,33 @@ import type { ExclusifyUnion } from './utils/utility-types';
5
5
  interface BaseDialogProps {
6
6
  className?: string;
7
7
  title?: string;
8
- icon?: React.ReactElement;
9
8
  message: string;
10
9
  acceptText?: string;
11
10
  onAccept?: () => void;
12
11
  destructive?: boolean;
13
- }
14
- interface AlertProps extends BaseDialogProps {
15
- showClose?: boolean;
16
- }
17
- interface ConfirmProps extends BaseDialogProps {
18
- showClose?: boolean;
12
+ /** @deprecated this does nothing */
13
+ forceWeb?: boolean;
14
+ /** @deprecated this does nothing */
19
15
  showCancel?: boolean;
16
+ }
17
+ export type AlertProps = BaseDialogProps;
18
+ export interface ConfirmProps extends BaseDialogProps {
20
19
  cancelText?: string;
21
20
  onCancel?: () => void;
22
21
  }
23
- interface ExtendedDialogProps extends BaseDialogProps {
22
+ export interface ExtendedDialogProps extends BaseDialogProps {
23
+ icon?: React.ReactElement;
24
24
  subtitle?: string;
25
25
  extra?: React.ReactNode;
26
- forceWeb?: boolean;
27
- showClose?: boolean;
28
- showCancel?: boolean;
29
26
  cancelText?: string;
30
27
  onCancel?: () => void;
31
28
  link?: RendersNullableElement<typeof ButtonLink>;
32
29
  }
33
- type DialogProps = ExclusifyUnion<AlertProps | ConfirmProps | ExtendedDialogProps>;
34
- type DialogRootProps = {
35
- children?: React.ReactNode;
30
+ export type DialogProps = ExclusifyUnion<AlertProps | ConfirmProps | ExtendedDialogProps> & {
31
+ type: 'dialog' | 'alert' | 'confirm';
36
32
  };
37
- type DialogRootState = {
38
- dialogProps: DialogProps | null;
39
- isClosing: boolean;
40
- instanceNumber: number;
33
+ type ModalDialogProps = DialogProps & {
34
+ onDestroy: () => void;
41
35
  };
42
- export default class DialogRoot extends React.Component<DialogRootProps, DialogRootState> {
43
- state: DialogRootState;
44
- componentDidMount(): void;
45
- componentWillUnmount(): void;
46
- show(props: DialogProps): void;
47
- callback: null | (() => void);
48
- handleCloseFinished: () => void;
49
- handleBack: () => void;
50
- close(): void;
51
- createCancelHandler(onCancel?: () => void): () => void;
52
- createAcceptHandler(onAccept?: () => void): () => void;
53
- render(): React.ReactNode;
54
- }
55
- /**
56
- * Shows alert dialog with supplied props
57
- */
58
- export declare const alert: (props: AlertProps) => void;
59
- /**
60
- * Shows confirm dialog with supplied props
61
- */
62
- export declare const confirm: (props: ConfirmProps) => void;
63
- /**
64
- * Shows dialog with supplied props
65
- */
66
- export declare const dialog: (props: ExtendedDialogProps) => void;
67
- export {};
36
+ declare const ModalDialog: (props: ModalDialogProps) => JSX.Element;
37
+ export default ModalDialog;