@micromag/screen-survey 0.3.829 → 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.
Files changed (5) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.d.ts +205 -0
  3. package/es/index.js +47 -81
  4. package/es/styles.css +1 -0
  5. package/package.json +24 -23
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-survey-container .micromag-screen-survey-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-survey-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{padding:6px;position:relative}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-survey-container .micromag-screen-survey-background{z-index:0}.micromag-screen-survey-container .micromag-screen-survey-content{z-index:1}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-header.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-footer a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-footer.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{color:#fff;padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-resultText{margin-top:10px}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:0 auto;width:100%}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input{margin:5px 0;position:relative}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled{opacity:.5}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-textInput{background:transparent}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected .micromag-screen-survey-submit{opacity:0}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-filled .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-filled .micromag-screen-survey-submit,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-focused .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-focused .micromag-screen-survey-submit{opacity:1}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-multiline .micromag-screen-survey-textInput{min-height:80px}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-multiline .micromag-screen-survey-confirm{bottom:auto}.micromag-screen-survey-container .micromag-screen-survey-textInput{color:#fff;display:-ms-flexbox;display:flex;line-height:inherit;margin:0;overflow:hidden;padding:10px calc(10px + 2em);position:relative;text-align:center;-webkit-transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;width:100%;z-index:0}.micromag-screen-survey-container .micromag-screen-survey-confirm{background-color:transparent;bottom:0;opacity:0;padding:10px;position:absolute;right:0;top:0;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-confirm .micromag-screen-survey-icon{height:10px;margin:0 auto;width:10px}.micromag-screen-survey-container .micromag-screen-survey-confirm.micromag-screen-survey-disabled .micromag-screen-survey-icon{opacity:.5}.micromag-screen-survey-container .micromag-screen-survey-submit{margin-top:10px;opacity:0;padding:10px;position:absolute;top:100%;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-left:15px;padding-right:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{opacity:1;width:100%}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{background-color:transparent;border-color:transparent}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;margin-right:0}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-textInput{padding:10px;pointer-events:none}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-textInput{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withBar .micromag-screen-survey-itemLabel,.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withBar .micromag-screen-survey-textInput,.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel,.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-textInput{text-align:left}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-left:2em;margin-right:2em}.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-answers,.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-question{opacity:.5}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}.micromag-screen-survey-reset{background-color:transparent;border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-survey-reset:hover{border:0;opacity:.8}.micromag-screen-survey-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}
1
+ .container{height:100%;overflow:hidden;position:relative;width:100%}.container .background{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.container .content{z-index:1}.container .question{margin-bottom:20px}.container .answers,.container .items{position:relative}.container .header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.container .header.disabled{opacity:0;pointer-events:none}.container .footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.container .footer a{padding:0}.container .footer.disabled{opacity:0;pointer-events:none}.container .item{padding:5px 0}.container .item:first-child .placeholderAnswer{width:80%}.container .item:last-child .placeholderAnswer{width:90%}.container .itemContent{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.container .resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.container .resultLabel{color:var(--mm-white);padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.container .resultText{margin-top:10px}.container .itemInner{width:100%}.container .button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.container .button:disabled{opacity:1;pointer-events:none}.container .itemLabel{width:100%}.container .itemLabel,.container .itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.container .itemText{position:relative;z-index:1}.container .emptyAnswer,.container .emptyQuestion{border:2px dashed var(--mm-gray-800);color:var(--mm-gray-800);margin:0 auto;width:100%}.container .emptyQuestion{height:75px}.container .emptyAnswer{height:50px}.container .userAnswer .button,.container .userAnswer .result,.container .userAnswer .resultLabel{opacity:1!important}.container .input{margin:5px 0;position:relative}.container .input.disabled{opacity:.5}.container .input.disabled .confirm,.container .input.disabled .textInput{background:transparent}.container .input.selected{opacity:1!important}.container .input.selected .confirm,.container .input.selected .submit{opacity:0}.container .input.filled .confirm,.container .input.filled .submit,.container .input.focused .confirm,.container .input.focused .submit{opacity:1}.container .input.multiline .textInput{min-height:80px}.container .input.multiline .confirm{bottom:auto}.container .textInput{color:var(--mm-white);display:-ms-flexbox;display:flex;line-height:inherit;margin:0;overflow:hidden;padding:10px calc(10px + 2em);position:relative;text-align:center;-webkit-transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;width:100%;z-index:0}.container .confirm{background-color:transparent;bottom:0;opacity:0;padding:10px;position:absolute;right:0;top:0;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.container .confirm .icon{height:10px;margin:0 auto;width:10px}.container .confirm.disabled .icon{opacity:.5}.container .submit{margin-top:10px;opacity:0;padding:10px;position:absolute;top:100%;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.container.answered{line-height:1}.container.answered .resultContainer{padding-left:15px;padding-right:50px}.container.answered .resultContent{opacity:1;width:100%}.container.answered .button{background-color:transparent;border-color:transparent}.container.answered .button,.container.answered .result,.container.answered .resultLabel{opacity:.6}.container.answered .itemLabel{margin-left:0;margin-right:0}.container.answered .textInput{padding:10px;pointer-events:none}.container.answered.withPercentage .itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.container.answered.withPercentage .textInput{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.container.answered.withBar .itemLabel,.container.answered.withBar .textInput,.container.answered.withPercentage .itemLabel,.container.answered.withPercentage .textInput{text-align:left}.container.withPercentage .itemLabel{margin-left:2em;margin-right:2em}.container.inputFocused .answers,.container.inputFocused .question{opacity:.5}.container.isPlaceholder .layout{padding:10px}.container.isPlaceholder .item{padding:1px 0}.reset{background-color:transparent;border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.reset:hover{border:0;opacity:.8}.reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}
package/es/index.d.ts ADDED
@@ -0,0 +1,205 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { TextElement, Answer, BoxStyle, TextStyle, Color, Header, Footer, BackgroundElement, Transitions } from '@micromag/core';
3
+
4
+ interface SurveyScreenProps {
5
+ id?: string | null;
6
+ layout?: 'top' | 'middle' | 'bottom' | 'split';
7
+ question?: TextElement | null;
8
+ answers?: Answer[] | null;
9
+ result?: Result | null;
10
+ buttonsStyle?: BoxStyle | null;
11
+ buttonsTextStyle?: TextStyle | null;
12
+ resultsStyle?: {
13
+ barColor?: Color;
14
+ textColor?: Color;
15
+ percentageTextStyle?: TextStyle;
16
+ } | null;
17
+ spacing?: number;
18
+ header?: Header | null;
19
+ footer?: Footer | null;
20
+ background?: BackgroundElement | null;
21
+ customAnswer?: boolean;
22
+ showCount?: boolean;
23
+ withoutPercentage?: boolean;
24
+ withoutBar?: boolean;
25
+ current?: boolean;
26
+ preload?: boolean;
27
+ transitions?: Transitions | null;
28
+ resultTransitionDuration?: number;
29
+ type?: string | null;
30
+ className?: string | null;
31
+ }
32
+ declare function SurveyScreen({ id, layout, question, answers, result, buttonsStyle, buttonsTextStyle, resultsStyle, spacing, header, footer, background, customAnswer, showCount, withoutPercentage, withoutBar, current, preload, transitions, resultTransitionDuration, type, className, }: SurveyScreenProps): react_jsx_runtime.JSX.Element;
33
+
34
+ declare const _default: {
35
+ id: string;
36
+ type: string;
37
+ group: {
38
+ label: {
39
+ defaultMessage: string;
40
+ description: string;
41
+ };
42
+ order: number;
43
+ };
44
+ title: {
45
+ defaultMessage: string;
46
+ description: string;
47
+ };
48
+ component: typeof SurveyScreen;
49
+ layouts: string[];
50
+ fields: ({
51
+ name: string;
52
+ type: string;
53
+ defaultValue: string;
54
+ label: {
55
+ defaultMessage: string;
56
+ description: string;
57
+ };
58
+ theme?: undefined;
59
+ isList?: undefined;
60
+ fields?: undefined;
61
+ } | {
62
+ name: string;
63
+ type: string;
64
+ theme: {
65
+ textStyle: string;
66
+ label?: undefined;
67
+ badge?: undefined;
68
+ callToAction?: undefined;
69
+ };
70
+ label: {
71
+ defaultMessage: string;
72
+ description: string;
73
+ };
74
+ defaultValue?: undefined;
75
+ isList?: undefined;
76
+ fields?: undefined;
77
+ } | {
78
+ name: string;
79
+ type: string;
80
+ theme: {
81
+ label: {
82
+ textStyle: string;
83
+ };
84
+ textStyle?: undefined;
85
+ badge?: undefined;
86
+ callToAction?: undefined;
87
+ };
88
+ label: {
89
+ defaultMessage: string;
90
+ description: string;
91
+ };
92
+ defaultValue?: undefined;
93
+ isList?: undefined;
94
+ fields?: undefined;
95
+ } | {
96
+ name: string;
97
+ type: string;
98
+ defaultValue: boolean;
99
+ isList: boolean;
100
+ theme: {
101
+ textStyle: string;
102
+ label?: undefined;
103
+ badge?: undefined;
104
+ callToAction?: undefined;
105
+ };
106
+ label?: undefined;
107
+ fields?: undefined;
108
+ } | {
109
+ type: string;
110
+ isList: boolean;
111
+ label: {
112
+ defaultMessage: string;
113
+ description: string;
114
+ };
115
+ fields: ({
116
+ name: string;
117
+ type: string;
118
+ defaultValue: boolean;
119
+ label: {
120
+ defaultMessage: string;
121
+ description: string;
122
+ };
123
+ noValueLabel?: undefined;
124
+ } | {
125
+ name: string;
126
+ type: string;
127
+ label: {
128
+ defaultMessage: string;
129
+ description: string;
130
+ };
131
+ defaultValue?: undefined;
132
+ noValueLabel?: undefined;
133
+ } | {
134
+ name: string;
135
+ type: string;
136
+ label: {
137
+ defaultMessage: string;
138
+ description: string;
139
+ };
140
+ noValueLabel: {
141
+ defaultMessage: string;
142
+ description: string;
143
+ };
144
+ defaultValue?: undefined;
145
+ })[];
146
+ name?: undefined;
147
+ defaultValue?: undefined;
148
+ theme?: undefined;
149
+ } | {
150
+ name: string;
151
+ type: string;
152
+ label: {
153
+ defaultMessage: string;
154
+ description: string;
155
+ };
156
+ defaultValue?: undefined;
157
+ theme?: undefined;
158
+ isList?: undefined;
159
+ fields?: undefined;
160
+ } | {
161
+ name: string;
162
+ type: string;
163
+ label: {
164
+ defaultMessage: string;
165
+ description: string;
166
+ };
167
+ theme: {
168
+ badge: {
169
+ label: {
170
+ textStyle: string;
171
+ };
172
+ boxStyle: string;
173
+ };
174
+ textStyle?: undefined;
175
+ label?: undefined;
176
+ callToAction?: undefined;
177
+ };
178
+ defaultValue?: undefined;
179
+ isList?: undefined;
180
+ fields?: undefined;
181
+ } | {
182
+ name: string;
183
+ type: string;
184
+ label: {
185
+ defaultMessage: string;
186
+ description: string;
187
+ };
188
+ theme: {
189
+ callToAction: {
190
+ label: {
191
+ textStyle: string;
192
+ };
193
+ boxStyle: string;
194
+ };
195
+ textStyle?: undefined;
196
+ label?: undefined;
197
+ badge?: undefined;
198
+ };
199
+ defaultValue?: undefined;
200
+ isList?: undefined;
201
+ fields?: undefined;
202
+ })[];
203
+ };
204
+
205
+ export { SurveyScreen, _default as default };
package/es/index.js CHANGED
@@ -8,9 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8
8
  import classNames from 'classnames';
9
9
  import DOMPurify from 'dompurify';
10
10
  import isNumber from 'lodash/isNumber';
11
- import PropTypes from 'prop-types';
12
11
  import React, { useState, useMemo, useCallback, useEffect } from 'react';
13
- import { PropTypes as PropTypes$1 } from '@micromag/core';
14
12
  import { ScreenElement, Transitions, CloseIcon } from '@micromag/core/components';
15
13
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
16
14
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
@@ -27,83 +25,53 @@ import Scroll from '@micromag/element-scroll';
27
25
  import Text from '@micromag/element-text';
28
26
  import TextInput from '@micromag/element-text-input';
29
27
 
30
- var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","content":"micromag-screen-survey-content","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","header":"micromag-screen-survey-header","footer":"micromag-screen-survey-footer","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","resultText":"micromag-screen-survey-resultText","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","input":"micromag-screen-survey-input","textInput":"micromag-screen-survey-textInput","confirm":"micromag-screen-survey-confirm","selected":"micromag-screen-survey-selected","submit":"micromag-screen-survey-submit","focused":"micromag-screen-survey-focused","filled":"micromag-screen-survey-filled","multiline":"micromag-screen-survey-multiline","icon":"micromag-screen-survey-icon","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","withBar":"micromag-screen-survey-withBar","inputFocused":"micromag-screen-survey-inputFocused","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout","reset":"micromag-screen-survey-reset"};
28
+ var styles = {"container":"container","background":"background","content":"content","question":"question","answers":"answers","items":"items","header":"header","disabled":"disabled","footer":"footer","item":"item","placeholderAnswer":"placeholderAnswer","itemContent":"itemContent","resultBar":"resultBar","resultLabel":"resultLabel","resultText":"resultText","itemInner":"itemInner","button":"button","itemLabel":"itemLabel","itemText":"itemText","emptyQuestion":"emptyQuestion","emptyAnswer":"emptyAnswer","userAnswer":"userAnswer","input":"input","textInput":"textInput","confirm":"confirm","selected":"selected","submit":"submit","focused":"focused","filled":"filled","multiline":"multiline","icon":"icon","answered":"answered","withPercentage":"withPercentage","withBar":"withBar","inputFocused":"inputFocused","isPlaceholder":"isPlaceholder","layout":"layout","reset":"reset"};
31
29
 
32
- var propTypes = {
33
- id: PropTypes.string,
34
- layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split']),
35
- question: PropTypes$1.textElement,
36
- answers: PropTypes$1.answers,
37
- result: PropTypes$1.result,
38
- buttonsStyle: PropTypes$1.boxStyle,
39
- buttonsTextStyle: PropTypes$1.textStyle,
40
- resultsStyle: PropTypes.shape({
41
- barColor: PropTypes$1.color,
42
- textColor: PropTypes$1.color,
43
- percentageTextStyle: PropTypes$1.textStyle
44
- }),
45
- spacing: PropTypes.number,
46
- header: PropTypes$1.header,
47
- footer: PropTypes$1.footer,
48
- background: PropTypes$1.backgroundElement,
49
- customAnswer: PropTypes.bool,
50
- showCount: PropTypes.bool,
51
- withoutPercentage: PropTypes.bool,
52
- withoutBar: PropTypes.bool,
53
- current: PropTypes.bool,
54
- preload: PropTypes.bool,
55
- transitions: PropTypes$1.transitions,
56
- resultTransitionDuration: PropTypes.number,
57
- type: PropTypes.string,
58
- className: PropTypes.string
59
- };
60
- var defaultProps = {
61
- id: null,
62
- layout: 'middle',
63
- question: null,
64
- answers: null,
65
- result: null,
66
- buttonsStyle: null,
67
- buttonsTextStyle: null,
68
- resultsStyle: null,
69
- spacing: 20,
70
- header: null,
71
- footer: null,
72
- background: null,
73
- customAnswer: false,
74
- showCount: false,
75
- withoutPercentage: false,
76
- withoutBar: false,
77
- current: true,
78
- preload: true,
79
- transitions: null,
80
- resultTransitionDuration: 500,
81
- type: null,
82
- className: null
83
- };
84
- var SurveyScreen = function SurveyScreen(_ref) {
85
- var id = _ref.id,
86
- layout = _ref.layout,
87
- question = _ref.question,
88
- answers = _ref.answers,
89
- result = _ref.result,
90
- buttonsStyle = _ref.buttonsStyle,
91
- buttonsTextStyle = _ref.buttonsTextStyle,
92
- resultsStyle = _ref.resultsStyle,
93
- spacing = _ref.spacing,
94
- header = _ref.header,
95
- footer = _ref.footer,
96
- background = _ref.background,
97
- customAnswer = _ref.customAnswer,
98
- showCount = _ref.showCount,
99
- withoutPercentage = _ref.withoutPercentage,
100
- withoutBar = _ref.withoutBar,
101
- current = _ref.current,
102
- preload = _ref.preload,
103
- transitions = _ref.transitions,
104
- resultTransitionDuration = _ref.resultTransitionDuration,
105
- type = _ref.type,
106
- className = _ref.className;
30
+ function SurveyScreen(_ref) {
31
+ var _ref$id = _ref.id,
32
+ id = _ref$id === void 0 ? null : _ref$id,
33
+ _ref$layout = _ref.layout,
34
+ layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
35
+ _ref$question = _ref.question,
36
+ question = _ref$question === void 0 ? null : _ref$question,
37
+ _ref$answers = _ref.answers,
38
+ answers = _ref$answers === void 0 ? null : _ref$answers,
39
+ _ref$result = _ref.result,
40
+ result = _ref$result === void 0 ? null : _ref$result,
41
+ _ref$buttonsStyle = _ref.buttonsStyle,
42
+ buttonsStyle = _ref$buttonsStyle === void 0 ? null : _ref$buttonsStyle,
43
+ _ref$buttonsTextStyle = _ref.buttonsTextStyle,
44
+ buttonsTextStyle = _ref$buttonsTextStyle === void 0 ? null : _ref$buttonsTextStyle,
45
+ _ref$resultsStyle = _ref.resultsStyle,
46
+ resultsStyle = _ref$resultsStyle === void 0 ? null : _ref$resultsStyle,
47
+ _ref$spacing = _ref.spacing,
48
+ spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
49
+ _ref$header = _ref.header,
50
+ header = _ref$header === void 0 ? null : _ref$header,
51
+ _ref$footer = _ref.footer,
52
+ footer = _ref$footer === void 0 ? null : _ref$footer,
53
+ _ref$background = _ref.background,
54
+ background = _ref$background === void 0 ? null : _ref$background,
55
+ _ref$customAnswer = _ref.customAnswer,
56
+ customAnswer = _ref$customAnswer === void 0 ? false : _ref$customAnswer,
57
+ _ref$showCount = _ref.showCount,
58
+ showCount = _ref$showCount === void 0 ? false : _ref$showCount,
59
+ _ref$withoutPercentag = _ref.withoutPercentage,
60
+ withoutPercentage = _ref$withoutPercentag === void 0 ? false : _ref$withoutPercentag,
61
+ _ref$withoutBar = _ref.withoutBar,
62
+ withoutBar = _ref$withoutBar === void 0 ? false : _ref$withoutBar,
63
+ _ref$current = _ref.current,
64
+ current = _ref$current === void 0 ? true : _ref$current,
65
+ _ref$preload = _ref.preload,
66
+ preload = _ref$preload === void 0 ? true : _ref$preload,
67
+ _ref$transitions = _ref.transitions,
68
+ transitions = _ref$transitions === void 0 ? null : _ref$transitions,
69
+ _ref$resultTransition = _ref.resultTransitionDuration,
70
+ resultTransitionDuration = _ref$resultTransition === void 0 ? 500 : _ref$resultTransition,
71
+ _ref$type = _ref.type,
72
+ type = _ref$type === void 0 ? null : _ref$type,
73
+ _ref$className = _ref.className,
74
+ className = _ref$className === void 0 ? null : _ref$className;
107
75
  var screenId = id || 'screen-id';
108
76
  var trackScreenEvent = useTrackScreenEvent(type);
109
77
  var _useScreenSize = useScreenSize(),
@@ -604,9 +572,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
604
572
  withoutVideo: isPreview,
605
573
  className: styles.background
606
574
  }) : null);
607
- };
608
- SurveyScreen.propTypes = propTypes;
609
- SurveyScreen.defaultProps = defaultProps;
575
+ }
610
576
 
611
577
  var definition = {
612
578
  id: 'survey',
package/es/styles.css ADDED
@@ -0,0 +1 @@
1
+ .container{height:100%;overflow:hidden;position:relative;width:100%}.container .background{height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}.container .content{z-index:1}.container .question{margin-bottom:20px}.container .answers,.container .items{position:relative}.container .header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.container .header.disabled{opacity:0;pointer-events:none}.container .footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.container .footer a{padding:0}.container .footer.disabled{opacity:0;pointer-events:none}.container .item{padding:5px 0}.container .item:first-child .placeholderAnswer{width:80%}.container .item:last-child .placeholderAnswer{width:90%}.container .itemContent{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.container .resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.container .resultLabel{color:var(--mm-white);padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.container .resultText{margin-top:10px}.container .itemInner{width:100%}.container .button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.container .button:disabled{opacity:1;pointer-events:none}.container .itemLabel{width:100%}.container .itemLabel,.container .itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.container .itemText{position:relative;z-index:1}.container .emptyAnswer,.container .emptyQuestion{border:2px dashed var(--mm-gray-800);color:var(--mm-gray-800);margin:0 auto;width:100%}.container .emptyQuestion{height:75px}.container .emptyAnswer{height:50px}.container .userAnswer .button,.container .userAnswer .result,.container .userAnswer .resultLabel{opacity:1!important}.container .input{margin:5px 0;position:relative}.container .input.disabled{opacity:.5}.container .input.disabled .confirm,.container .input.disabled .textInput{background:transparent}.container .input.selected{opacity:1!important}.container .input.selected .confirm,.container .input.selected .submit{opacity:0}.container .input.filled .confirm,.container .input.filled .submit,.container .input.focused .confirm,.container .input.focused .submit{opacity:1}.container .input.multiline .textInput{min-height:80px}.container .input.multiline .confirm{bottom:auto}.container .textInput{color:var(--mm-white);display:-ms-flexbox;display:flex;line-height:inherit;margin:0;overflow:hidden;padding:10px calc(10px + 2em);position:relative;text-align:center;-webkit-transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;width:100%;z-index:0}.container .confirm{background-color:transparent;bottom:0;opacity:0;padding:10px;position:absolute;right:0;top:0;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.container .confirm .icon{height:10px;margin:0 auto;width:10px}.container .confirm.disabled .icon{opacity:.5}.container .submit{margin-top:10px;opacity:0;padding:10px;position:absolute;top:100%;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.container.answered{line-height:1}.container.answered .resultContainer{padding-left:15px;padding-right:50px}.container.answered .resultContent{opacity:1;width:100%}.container.answered .button{background-color:transparent;border-color:transparent}.container.answered .button,.container.answered .result,.container.answered .resultLabel{opacity:.6}.container.answered .itemLabel{margin-left:0;margin-right:0}.container.answered .textInput{padding:10px;pointer-events:none}.container.answered.withPercentage .itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.container.answered.withPercentage .textInput{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.container.answered.withBar .itemLabel,.container.answered.withBar .textInput,.container.answered.withPercentage .itemLabel,.container.answered.withPercentage .textInput{text-align:left}.container.withPercentage .itemLabel{margin-left:2em;margin-right:2em}.container.inputFocused .answers,.container.inputFocused .question{opacity:.5}.container.isPlaceholder .layout{padding:10px}.container.isPlaceholder .item{padding:1px 0}.reset{background-color:transparent;border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.reset:hover{border:0;opacity:.8}.reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-survey",
3
- "version": "0.3.829",
3
+ "version": "0.4.4",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -35,6 +35,7 @@
35
35
  "style": "assets/css/styles.css",
36
36
  "exports": {
37
37
  ".": {
38
+ "types": "./es/index.d.ts",
38
39
  "import": "./es/index.js"
39
40
  },
40
41
  "./assets/css/styles": "./assets/css/styles.css",
@@ -48,44 +49,44 @@
48
49
  "scripts": {
49
50
  "clean": "rm -rf es && rm -rf lib && rm -rf assets",
50
51
  "prepublishOnly": "npm run build",
51
- "build": "../../scripts/prepare-package.sh"
52
+ "build": "../../scripts/prepare-package.sh --types"
52
53
  },
53
54
  "devDependencies": {
54
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
55
- "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
55
+ "react": "^19.2.0",
56
+ "react-dom": "^18.3.0 || ^19.0.0"
56
57
  },
57
58
  "peerDependencies": {
58
- "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
59
- "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
59
+ "react": "^19.2.0",
60
+ "react-dom": "^18.3.0 || ^19.0.0"
60
61
  },
61
62
  "dependencies": {
62
63
  "@babel/runtime": "^7.13.10",
63
64
  "@fortawesome/fontawesome-svg-core": "^6.5.2",
64
65
  "@fortawesome/free-solid-svg-icons": "^6.5.2",
65
66
  "@fortawesome/react-fontawesome": "^0.2.0",
66
- "@micromag/core": "^0.3.824",
67
- "@micromag/data": "^0.3.824",
68
- "@micromag/element-background": "^0.3.824",
69
- "@micromag/element-button": "^0.3.829",
70
- "@micromag/element-container": "^0.3.824",
71
- "@micromag/element-footer": "^0.3.829",
72
- "@micromag/element-header": "^0.3.824",
73
- "@micromag/element-heading": "^0.3.824",
74
- "@micromag/element-layout": "^0.3.824",
75
- "@micromag/element-scroll": "^0.3.824",
76
- "@micromag/element-text": "^0.3.824",
77
- "@micromag/element-text-input": "^0.3.824",
78
- "@micromag/transforms": "^0.3.824",
67
+ "@micromag/core": "^0.4.4",
68
+ "@micromag/data": "^0.4.4",
69
+ "@micromag/element-background": "^0.4.4",
70
+ "@micromag/element-button": "^0.4.4",
71
+ "@micromag/element-container": "^0.4.4",
72
+ "@micromag/element-footer": "^0.4.4",
73
+ "@micromag/element-header": "^0.4.4",
74
+ "@micromag/element-heading": "^0.4.4",
75
+ "@micromag/element-layout": "^0.4.4",
76
+ "@micromag/element-scroll": "^0.4.4",
77
+ "@micromag/element-text": "^0.4.4",
78
+ "@micromag/element-text-input": "^0.4.4",
79
+ "@micromag/transforms": "^0.4.4",
79
80
  "classnames": "^2.2.6",
80
81
  "dompurify": "^3.2.6",
81
- "lodash": "^4.17.21",
82
- "prop-types": "^15.7.2",
83
- "react-intl": "^6.6.4",
82
+ "lodash": "^4.17.23",
83
+ "react-intl": "^8.1.3",
84
84
  "uuid": "^9.0.0"
85
85
  },
86
86
  "publishConfig": {
87
87
  "access": "public",
88
88
  "registry": "https://registry.npmjs.org/"
89
89
  },
90
- "gitHead": "35fb9241ce6f9580397150bd05115f9a6f4048c8"
90
+ "gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d",
91
+ "types": "es/index.d.ts"
91
92
  }