@semcore/feedback-form 6.42.0 → 6.42.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/cjs/FeedbackForm.js +10 -8
- package/lib/cjs/FeedbackForm.js.map +1 -1
- package/lib/cjs/component/checkbox-button/CheckboxButton.js +6 -4
- package/lib/cjs/component/checkbox-button/CheckboxButton.js.map +1 -1
- package/lib/cjs/component/feedback-rating/FeedbackRating.js +5 -3
- package/lib/cjs/component/feedback-rating/FeedbackRating.js.map +1 -1
- package/lib/cjs/component/slider-rating/SliderRating.js +10 -8
- package/lib/cjs/component/slider-rating/SliderRating.js.map +1 -1
- package/lib/es6/FeedbackForm.js +10 -8
- package/lib/es6/FeedbackForm.js.map +1 -1
- package/lib/es6/component/checkbox-button/CheckboxButton.js +6 -4
- package/lib/es6/component/checkbox-button/CheckboxButton.js.map +1 -1
- package/lib/es6/component/feedback-rating/FeedbackRating.js +5 -3
- package/lib/es6/component/feedback-rating/FeedbackRating.js.map +1 -1
- package/lib/es6/component/slider-rating/SliderRating.js +10 -8
- package/lib/es6/component/slider-rating/SliderRating.js.map +1 -1
- package/lib/esm/FeedbackForm.mjs +129 -108
- package/lib/esm/component/checkbox-button/CheckboxButton.mjs +52 -42
- package/lib/esm/component/feedback-item/FeedbackItem.mjs +44 -33
- package/lib/esm/component/feedback-rating/FeedbackRating.mjs +297 -247
- package/lib/esm/component/slider-rating/SliderRating.mjs +178 -138
- package/lib/esm/component/submit-button/SubmitButton.mjs +14 -12
- package/lib/esm/index.mjs +4 -4
- package/lib/esm/style/checkbox-button.shadow.css +21 -0
- package/lib/esm/style/feedback-form.shadow.css +36 -0
- package/lib/esm/style/feedback-rating.shadow.css +9 -0
- package/lib/esm/style/slider-rating.shadow.css +33 -0
- package/lib/esm/translations/__intergalactic-dynamic-locales.mjs +30 -30
- package/lib/esm/translations/de.json.mjs +20 -14
- package/lib/esm/translations/en.json.mjs +20 -14
- package/lib/esm/translations/es.json.mjs +20 -14
- package/lib/esm/translations/fr.json.mjs +20 -14
- package/lib/esm/translations/it.json.mjs +20 -14
- package/lib/esm/translations/ja.json.mjs +20 -14
- package/lib/esm/translations/ko.json.mjs +20 -14
- package/lib/esm/translations/nl.json.mjs +20 -14
- package/lib/esm/translations/pl.json.mjs +20 -14
- package/lib/esm/translations/pt.json.mjs +20 -14
- package/lib/esm/translations/sv.json.mjs +20 -14
- package/lib/esm/translations/tr.json.mjs +20 -14
- package/lib/esm/translations/vi.json.mjs +20 -14
- package/lib/esm/translations/zh.json.mjs +20 -14
- package/package.json +16 -16
|
@@ -1,177 +1,217 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { sstyled
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import { Box
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
import { localizedMessages
|
|
16
|
-
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
5
|
+
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
6
|
+
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
7
|
+
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
+
import { sstyled } from "@semcore/utils/lib/core/index";
|
|
9
|
+
import createComponent, { assignProps, sstyled as sstyled$1, Component } from "@semcore/core";
|
|
10
|
+
import React from "react";
|
|
11
|
+
import { Box, Flex } from "@semcore/flex-box";
|
|
12
|
+
import keyboardFocusEnhance from "@semcore/utils/lib/enhances/keyboardFocusEnhance";
|
|
13
|
+
import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
|
|
14
|
+
import i18nEnhance from "@semcore/utils/lib/enhances/i18nEnhance";
|
|
15
|
+
import { localizedMessages } from "../../translations/__intergalactic-dynamic-locales.mjs";
|
|
16
|
+
/*!__reshadow-styles__:"../../style/slider-rating.shadow.css"*/
|
|
17
|
+
var style = (
|
|
17
18
|
/*__reshadow_css_start__*/
|
|
18
|
-
(
|
|
19
|
+
(sstyled.insert(
|
|
19
20
|
/*__inner_css_start__*/
|
|
20
|
-
".
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
21
|
+
".___SSliderRating_1r4r0_gg_ .___SStar_1r4r0_gg_{transition:all calc(var(--intergalactic-duration-control, 200)*1ms) ease-out}.___SSliderRating_1r4r0_gg_.__keyboardFocused_1r4r0_gg_ .___SStar_1r4r0_gg_.__hovered_1r4r0_gg_{cursor:pointer;transform:scale(1.3)}@media (hover:hover){.___SSliderRating_1r4r0_gg_ .___SStar_1r4r0_gg_:hover{cursor:pointer;transform:scale(1.3)}}.___SSliderRating_1r4r0_gg_.__keyboardFocused_1r4r0_gg_{outline:0;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}@media (hover:hover){.___SSliderRating_1r4r0_gg_.__readonly_1r4r0_gg_ .___SStar_1r4r0_gg_:hover{cursor:default;transform:none;transition:none}}.___SStar_1r4r0_gg_.__filled_1r4r0_gg_:active{animation:wobble .8s ease-in-out}.___SStar_1r4r0_gg_ path{fill:var(--intergalactic-slider-rating-normal, #a9abb6)}.___SStar_1r4r0_gg_.__filled_1r4r0_gg_ path{stroke-width:0;fill:var(--intergalactic-slider-rating-hover-active, #fdc23c)}",
|
|
22
|
+
/*__inner_css_end__*/
|
|
23
|
+
"1r4r0_gg_"
|
|
24
|
+
), /*__reshadow_css_end__*/
|
|
25
|
+
{
|
|
26
|
+
"__SSliderRating": "___SSliderRating_1r4r0_gg_",
|
|
27
|
+
"__SStar": "___SStar_1r4r0_gg_",
|
|
28
|
+
"_keyboardFocused": "__keyboardFocused_1r4r0_gg_",
|
|
29
|
+
"_hovered": "__hovered_1r4r0_gg_",
|
|
30
|
+
"_readonly": "__readonly_1r4r0_gg_",
|
|
31
|
+
"_filled": "__filled_1r4r0_gg_"
|
|
29
32
|
})
|
|
30
|
-
)
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
33
|
+
);
|
|
34
|
+
var MIN = 1;
|
|
35
|
+
var MAX = 5;
|
|
36
|
+
var SliderRatingRoot = /* @__PURE__ */ function(_Component) {
|
|
37
|
+
_inherits(SliderRatingRoot2, _Component);
|
|
38
|
+
var _super = _createSuper(SliderRatingRoot2);
|
|
39
|
+
function SliderRatingRoot2() {
|
|
40
|
+
var _this;
|
|
41
|
+
_classCallCheck(this, SliderRatingRoot2);
|
|
42
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
43
|
+
args[_key] = arguments[_key];
|
|
44
|
+
}
|
|
45
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
46
|
+
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
39
47
|
hoveredIndex: -1,
|
|
40
48
|
clickedIndex: -1
|
|
41
|
-
})
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
49
|
+
});
|
|
50
|
+
_defineProperty(_assertThisInitialized(_this), "handleClick", function(newValue) {
|
|
51
|
+
return function(e) {
|
|
52
|
+
var readonly = _this.asProps.readonly;
|
|
53
|
+
if (!readonly) {
|
|
54
|
+
_this.setValue(newValue);
|
|
55
|
+
}
|
|
45
56
|
};
|
|
46
|
-
})
|
|
57
|
+
});
|
|
58
|
+
_defineProperty(_assertThisInitialized(_this), "handleMouseEnder", function(index) {
|
|
47
59
|
return function() {
|
|
48
|
-
|
|
49
|
-
hoveredIndex:
|
|
60
|
+
_this.setState({
|
|
61
|
+
hoveredIndex: index
|
|
50
62
|
});
|
|
51
63
|
};
|
|
52
|
-
})
|
|
53
|
-
|
|
64
|
+
});
|
|
65
|
+
_defineProperty(_assertThisInitialized(_this), "handleMouseLeave", function() {
|
|
66
|
+
_this.setState({
|
|
54
67
|
hoveredIndex: -1
|
|
55
68
|
});
|
|
56
|
-
})
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
69
|
+
});
|
|
70
|
+
_defineProperty(_assertThisInitialized(_this), "setValue", function(newValue) {
|
|
71
|
+
var _this$asProps = _this.asProps, onChange = _this$asProps.onChange, value = _this$asProps.value;
|
|
72
|
+
if (onChange) {
|
|
73
|
+
onChange(newValue);
|
|
74
|
+
}
|
|
75
|
+
if (newValue <= value) {
|
|
76
|
+
_this.setState({
|
|
77
|
+
clickedIndex: newValue,
|
|
78
|
+
hoveredIndex: -1
|
|
79
|
+
});
|
|
80
|
+
} else {
|
|
81
|
+
_this.setState({
|
|
82
|
+
clickedIndex: -1,
|
|
83
|
+
hoveredIndex: -1
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
_defineProperty(_assertThisInitialized(_this), "handleKeyDown", function(event) {
|
|
88
|
+
if (!["ArrowLeft", "ArrowRight", "Enter"].includes(event.key)) return;
|
|
89
|
+
event.preventDefault();
|
|
90
|
+
if (event.key === "Enter") {
|
|
91
|
+
var hoveredIndex = _this.state.hoveredIndex;
|
|
92
|
+
_this.setValue(hoveredIndex + 1);
|
|
93
|
+
} else {
|
|
94
|
+
var _value = _this.asProps.value;
|
|
95
|
+
var _hoveredIndex = _this.state.hoveredIndex;
|
|
96
|
+
var direction = event.key === "ArrowLeft" ? -1 : 1;
|
|
97
|
+
var newValue = _hoveredIndex === -1 ? _value + direction : _hoveredIndex + 1 + direction;
|
|
98
|
+
if (newValue > MAX) newValue = MAX;
|
|
99
|
+
if (newValue < MIN) newValue = MIN;
|
|
100
|
+
_this.setState({
|
|
101
|
+
hoveredIndex: newValue - 1
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
return _this;
|
|
77
106
|
}
|
|
78
|
-
|
|
107
|
+
_createClass(SliderRatingRoot2, [{
|
|
79
108
|
key: "getStarProps",
|
|
80
|
-
value: function(
|
|
81
|
-
var
|
|
109
|
+
value: function getStarProps(_, index) {
|
|
110
|
+
var _this$asProps2 = this.asProps, value = _this$asProps2.value, readonly = _this$asProps2.readonly;
|
|
111
|
+
var hoveredIndex = this.state.hoveredIndex;
|
|
82
112
|
return {
|
|
83
|
-
filled:
|
|
84
|
-
onClick: this.handleClick(
|
|
85
|
-
onMouseEnter:
|
|
86
|
-
hovered:
|
|
113
|
+
filled: value ? index + 1 <= value || index <= hoveredIndex : index <= hoveredIndex,
|
|
114
|
+
onClick: this.handleClick(index + 1),
|
|
115
|
+
onMouseEnter: readonly ? void 0 : this.handleMouseEnder(index),
|
|
116
|
+
hovered: hoveredIndex === index
|
|
87
117
|
};
|
|
88
118
|
}
|
|
89
119
|
}, {
|
|
90
120
|
key: "getLabelText",
|
|
91
|
-
value: function() {
|
|
92
|
-
var
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
121
|
+
value: function getLabelText() {
|
|
122
|
+
var hoveredIndex = this.state.hoveredIndex;
|
|
123
|
+
var _this$asProps3 = this.asProps, readonly = _this$asProps3.readonly, value = _this$asProps3.value, getI18nText = _this$asProps3.getI18nText;
|
|
124
|
+
if (readonly) {
|
|
125
|
+
return getI18nText("FeedbackRating.SliderRating.aria-valuetext.readonly", {
|
|
126
|
+
selectedRating: value,
|
|
127
|
+
max: MAX
|
|
97
128
|
});
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
129
|
+
}
|
|
130
|
+
if (value) {
|
|
131
|
+
var selectedRating = hoveredIndex > -1 ? hoveredIndex + 1 : value;
|
|
132
|
+
return getI18nText("FeedbackRating.SliderRating.aria-valuetext", {
|
|
133
|
+
selectedRating,
|
|
134
|
+
max: MAX
|
|
103
135
|
});
|
|
104
136
|
}
|
|
105
|
-
return
|
|
106
|
-
selectedRating:
|
|
107
|
-
max:
|
|
137
|
+
return hoveredIndex === -1 ? getI18nText("FeedbackRating.SliderRating.aria-valuetext.empty") : getI18nText("FeedbackRating.SliderRating.aria-valuetext", {
|
|
138
|
+
selectedRating: hoveredIndex + 1,
|
|
139
|
+
max: MAX
|
|
108
140
|
});
|
|
109
141
|
}
|
|
110
142
|
}, {
|
|
111
143
|
key: "render",
|
|
112
|
-
value: function() {
|
|
113
|
-
var
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
144
|
+
value: function render() {
|
|
145
|
+
var _ref = this.asProps, _ref3;
|
|
146
|
+
var _this$asProps4 = this.asProps, styles = _this$asProps4.styles, readonly = _this$asProps4.readonly, getI18nText = _this$asProps4.getI18nText, value = _this$asProps4.value;
|
|
147
|
+
var hoveredIndex = this.state.hoveredIndex;
|
|
148
|
+
var SSliderRating = Flex;
|
|
149
|
+
var label = this.getLabelText();
|
|
150
|
+
if (readonly) {
|
|
151
|
+
return /* @__PURE__ */ React.createElement(SSliderRating, assignProps({
|
|
152
|
+
"gap": 1,
|
|
153
|
+
"role": "img",
|
|
154
|
+
"aria-label": label,
|
|
119
155
|
"use:tabIndex": -1
|
|
120
|
-
},
|
|
121
|
-
return /* @__PURE__ */
|
|
122
|
-
key:
|
|
156
|
+
}, _ref), new Array(MAX).fill(null).map(function(_, index) {
|
|
157
|
+
return /* @__PURE__ */ React.createElement(Box, {
|
|
158
|
+
key: index,
|
|
123
159
|
position: "relative"
|
|
124
|
-
}, /* @__PURE__ */
|
|
160
|
+
}, /* @__PURE__ */ React.createElement(SliderRating.Star, null));
|
|
125
161
|
}));
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
162
|
+
}
|
|
163
|
+
var hoverValue = hoveredIndex + 1;
|
|
164
|
+
var editModeLabel = hoverValue > 0 || value ? "".concat(label, ". ").concat(getI18nText("FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber"), ".") : label;
|
|
165
|
+
return _ref3 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SSliderRating, _ref3.cn("SSliderRating", _objectSpread({}, assignProps({
|
|
166
|
+
"gap": 1,
|
|
167
|
+
"onMouseLeave": this.handleMouseLeave,
|
|
168
|
+
"onKeyDown": this.handleKeyDown,
|
|
169
|
+
"role": "slider",
|
|
132
170
|
"aria-orientation": "horizontal",
|
|
133
|
-
"aria-valuemin":
|
|
134
|
-
"aria-valuemax":
|
|
135
|
-
"aria-valuetext":
|
|
136
|
-
"aria-valuenow":
|
|
137
|
-
},
|
|
138
|
-
return /* @__PURE__ */
|
|
139
|
-
key:
|
|
171
|
+
"aria-valuemin": MIN,
|
|
172
|
+
"aria-valuemax": MAX,
|
|
173
|
+
"aria-valuetext": editModeLabel,
|
|
174
|
+
"aria-valuenow": hoverValue
|
|
175
|
+
}, _ref))), new Array(MAX).fill(null).map(function(_, index) {
|
|
176
|
+
return /* @__PURE__ */ React.createElement(Box, {
|
|
177
|
+
key: index,
|
|
140
178
|
position: "relative"
|
|
141
|
-
}, /* @__PURE__ */
|
|
179
|
+
}, /* @__PURE__ */ React.createElement(SliderRating.Star, null));
|
|
142
180
|
}));
|
|
143
181
|
}
|
|
144
|
-
}])
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
182
|
+
}]);
|
|
183
|
+
return SliderRatingRoot2;
|
|
184
|
+
}(Component);
|
|
185
|
+
_defineProperty(SliderRatingRoot, "displayName", "SliderRating");
|
|
186
|
+
_defineProperty(SliderRatingRoot, "style", style);
|
|
187
|
+
_defineProperty(SliderRatingRoot, "enhance", [keyboardFocusEnhance(), uniqueIDEnhancement(), i18nEnhance(localizedMessages)]);
|
|
188
|
+
_defineProperty(SliderRatingRoot, "defaultProps", {
|
|
189
|
+
i18n: localizedMessages,
|
|
151
190
|
locale: "en"
|
|
152
191
|
});
|
|
153
|
-
function
|
|
154
|
-
var
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
192
|
+
function Star(props) {
|
|
193
|
+
var _ref2 = arguments[0], _ref4;
|
|
194
|
+
var SStar = Box;
|
|
195
|
+
return _ref4 = sstyled$1(props.styles), /* @__PURE__ */ React.createElement(SStar, _ref4.cn("SStar", _objectSpread({}, assignProps({
|
|
196
|
+
"tag": "svg",
|
|
197
|
+
"role": "none",
|
|
198
|
+
"width": "24",
|
|
199
|
+
"height": "24",
|
|
200
|
+
"viewBox": "0 0 24 24",
|
|
201
|
+
"fill": "none",
|
|
202
|
+
"xmlns": "http://www.w3.org/2000/svg"
|
|
203
|
+
}, _ref2))), props.filled ? /* @__PURE__ */ React.createElement("path", _ref4.cn("path", {
|
|
204
|
+
"d": "M11.646 1.214a.4.4 0 0 1 .708 0l3.314 6.293 7 1.214a.4.4 0 0 1 .219.673l-4.952 5.104 1.012 7.044a.4.4 0 0 1-.573.416L12 18.818l-6.374 3.14a.4.4 0 0 1-.572-.416l1.01-7.044-4.95-5.104a.4.4 0 0 1 .218-.673l7-1.214 3.314-6.293Z"
|
|
205
|
+
})) : /* @__PURE__ */ React.createElement("path", _ref4.cn("path", {
|
|
206
|
+
"d": "M14.358 9.31 12 4.834 9.642 9.31l-4.985.864 3.526 3.634-.72 5.014L12 16.588l4.537 2.235-.72-5.014 3.526-3.634-4.985-.864Zm8.31-.59a.4.4 0 0 1 .219.674l-4.952 5.104 1.012 7.044a.4.4 0 0 1-.573.416L12 18.818l-6.374 3.14a.4.4 0 0 1-.572-.416l1.01-7.044-4.95-5.104a.4.4 0 0 1 .218-.673l7-1.214 3.314-6.293a.4.4 0 0 1 .708 0l3.314 6.293 7 1.214Z",
|
|
207
|
+
"fillRule": "evenodd",
|
|
208
|
+
"clipRule": "evenodd"
|
|
169
209
|
})));
|
|
170
210
|
}
|
|
171
|
-
|
|
172
|
-
var
|
|
173
|
-
Star
|
|
211
|
+
Star.displayName = "Star";
|
|
212
|
+
var SliderRating = createComponent(SliderRatingRoot, {
|
|
213
|
+
Star
|
|
174
214
|
});
|
|
175
215
|
export {
|
|
176
|
-
|
|
216
|
+
SliderRating as default
|
|
177
217
|
};
|
|
@@ -1,15 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { sstyled
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
function
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
+
import { sstyled, assignProps } from "@semcore/core";
|
|
3
|
+
import Button from "@semcore/button";
|
|
4
|
+
import React from "react";
|
|
5
|
+
function SubmitButton(props) {
|
|
6
|
+
var _ref = arguments[0], _ref2;
|
|
7
|
+
var styles = props.styles;
|
|
8
|
+
var SSubmit = Button;
|
|
9
|
+
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SSubmit, _ref2.cn("SSubmit", _objectSpread({}, assignProps({
|
|
10
|
+
"type": "submit",
|
|
11
|
+
"use": "primary",
|
|
12
|
+
"theme": "success"
|
|
13
|
+
}, _ref))));
|
|
12
14
|
}
|
|
13
15
|
export {
|
|
14
|
-
|
|
16
|
+
SubmitButton
|
|
15
17
|
};
|
package/lib/esm/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import { default as
|
|
1
|
+
import { default as default2 } from "./component/feedback-rating/FeedbackRating.mjs";
|
|
2
|
+
import { default as default3 } from "./FeedbackForm.mjs";
|
|
3
3
|
export {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
default2 as FeedbackRating,
|
|
5
|
+
default3 as default
|
|
6
6
|
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
SCheckboxButton {
|
|
2
|
+
margin-top: var(--intergalactic-spacing-2x, 8px);
|
|
3
|
+
border: 1px solid var(--intergalactic-border-primary, #c4c7cf);
|
|
4
|
+
border-radius: var(--intergalactic-rounded-medium, 6px);
|
|
5
|
+
|
|
6
|
+
label {
|
|
7
|
+
width: 100%;
|
|
8
|
+
padding: var(--intergalactic-spacing-3x, 12px);
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
SCheckboxButton:hover, SCheckboxButton[checked] {
|
|
14
|
+
cursor: pointer;
|
|
15
|
+
border-color: var(--intergalactic-border-info-active, #006dca);
|
|
16
|
+
background-color: rgba(0, 143, 248, 0.10);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
SCheckboxButton[checked]:hover {
|
|
20
|
+
background-color: rgba(0, 143, 248, 0.20);
|
|
21
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
SFeedbackForm {
|
|
2
|
+
max-width: 320px;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
SSubmit,
|
|
6
|
+
SCancel {
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
SNotice {
|
|
12
|
+
padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);
|
|
13
|
+
border-width: 1px 0 0;
|
|
14
|
+
border-top-style: solid;
|
|
15
|
+
border-radius: 0 0 var(--intergalactic-surface-rounded, 6px)
|
|
16
|
+
var(--intergalactic-surface-rounded, 6px);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
SSuccess {
|
|
20
|
+
display: flex;
|
|
21
|
+
align-items: center;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
width: 320px;
|
|
24
|
+
padding: var(--intergalactic-spacing-10x, 40px);
|
|
25
|
+
box-sizing: border-box;
|
|
26
|
+
outline: none;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
SEmail {
|
|
30
|
+
margin-bottom: calc(
|
|
31
|
+
var(--intergalactic-spacing-4x, 16px) + var(--intergalactic-spacing-05x, 2px)
|
|
32
|
+
);
|
|
33
|
+
width: 80px;
|
|
34
|
+
height: 80px;
|
|
35
|
+
background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28.1632 6.00003C27.9554 5.99875 27.7493 6.03875 27.5571 6.11772C27.3648 6.19668 27.1902 6.31304 27.0432 6.46003L14.1332 19.38C7.645 25.8687 4 34.669 4 43.845C4 53.0211 7.645 61.8213 14.1332 68.31C17.3463 71.5242 21.1611 74.0738 25.3597 75.8134C29.5583 77.5529 34.0585 78.4482 38.6032 78.4482C43.1479 78.4482 47.6481 77.5529 51.8467 75.8134C56.0454 74.0738 59.8602 71.5242 63.0732 68.31L75.9832 55.4C76.1316 55.2536 76.2495 55.0792 76.3301 54.887C76.4108 54.6948 76.4526 54.4885 76.4532 54.28V6.89003C76.4506 6.65307 76.3546 6.42671 76.1861 6.26009C76.0176 6.09346 75.7902 6.00002 75.5532 6.00003H28.1632Z' fill='%2345E0A8'/%3E%3Cpath d='M29 45.2852L29.2 45.6352C35.39 42.1852 53.39 31.9652 56.73 35.1052C55.6 32.0052 39.7 35.4352 29 45.2852Z' fill='white'/%3E%3Cpath d='M28.44 31.6343C26.63 37.6343 19.23 56.1043 15 61.9443L18 62.8543L19.58 61.5343C23.8 51.9843 29.58 35.5343 29.89 30.0743C29.39 29.8143 28.93 30.2143 28.44 31.6343Z' fill='white'/%3E%3Cpath d='M15 62.0078C19.23 56.1678 26.63 37.7378 28.44 31.6678C30.25 25.5978 33.49 37.6678 31.67 42.7878' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M28 45.9424C38.68 35.5824 55.27 31.9424 56.43 35.1024C57.12 36.9924 43 41.3624 38.02 47.4224' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M44.45 21.93C41.21 20.77 35.86 19.04 33 18.24C37.12 16.41 70 4.24 72.67 3C71.75 7.11 67.75 21.28 65.96 27.93C61.13 26.25 56.23 24.78 53.03 23.74C51.0298 26.3907 49.2219 29.1812 47.62 32.09C46.44 28.23 45.29 23.77 44.45 21.93Z' fill='white' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M45 22.08L61.74 11' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M53 23.73L72.64 3' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48 32.58L55.86 25' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.23 30.77L51.69 25.13L52.66 24L54.73 24.61L55.16 24.48L51.8 27.91L49.33 30.18L48 31.29L48.23 30.77Z' fill='black'/%3E%3Cpath d='M33.81 22L23 27.12' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M40.89 23L34 27.37' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M62.04 29L58 38.85' stroke='white' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M46.68 41C50.29 43.42 44.81 49.52 43 51.12' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M47.17 44C51.31 46.09 48.33 51.76 46 54.6' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M48.86 49C54.37 53.48 36.31 72.72 35 73.78' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cmask id='mask0_11950_117175' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='4' y='6' width='73' height='73'%3E%3Cpath d='M28.1632 6.00003C27.9554 5.99875 27.7493 6.03875 27.5571 6.11772C27.3648 6.19668 27.1902 6.31304 27.0432 6.46003L14.1332 19.38C7.645 25.8687 4 34.669 4 43.845C4 53.0211 7.645 61.8213 14.1332 68.31C17.3463 71.5242 21.1611 74.0738 25.3597 75.8134C29.5583 77.5529 34.0585 78.4482 38.6032 78.4482C43.1479 78.4482 47.6481 77.5529 51.8467 75.8134C56.0454 74.0738 59.8602 71.5242 63.0732 68.31L75.9832 55.4C76.1316 55.2536 76.2495 55.0792 76.3301 54.887C76.4108 54.6948 76.4526 54.4885 76.4532 54.28V6.89003C76.4506 6.65307 76.3546 6.42671 76.1861 6.26009C76.0176 6.09346 75.7902 6.00002 75.5532 6.00003H28.1632Z' fill='%2345DFA7'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_11950_117175)'%3E%3Cpath d='M5 74.6871C7.49 72.3471 13.24 63.6871 14.52 61.2471C28.18 59.1271 34.71 71.2471 34.98 74.7671C32.7234 79.651 30.1305 84.3723 27.22 88.8971' fill='black'/%3E%3Cpath d='M5 74.6871C7.49 72.3471 13.24 63.6871 14.52 61.2471C28.18 59.1271 34.71 71.2471 34.98 74.7671C32.7234 79.651 30.1305 84.3723 27.22 88.8971' stroke='black' stroke-width='0.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
|
|
36
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
SSliderRating SStar {
|
|
2
|
+
transition: all calc(var(--intergalactic-duration-control, 200) * 1ms) ease-out;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
SSliderRating[keyboardFocused] SStar[hovered],
|
|
6
|
+
SSliderRating SStar:hover {
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
transform: scale(1.3);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
SSliderRating[keyboardFocused] {
|
|
12
|
+
outline: none;
|
|
13
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
SSliderRating[readonly] SStar:hover {
|
|
17
|
+
cursor: default;
|
|
18
|
+
transform: none;
|
|
19
|
+
transition: none;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
SStar[filled]:active {
|
|
23
|
+
animation: wobble 0.8s ease-in-out;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
SStar path {
|
|
27
|
+
fill: var(--intergalactic-slider-rating-normal, #a9abb6);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
SStar[filled] path {
|
|
31
|
+
stroke-width: 0;
|
|
32
|
+
fill: var(--intergalactic-slider-rating-hover-active, #fdc23c);
|
|
33
|
+
}
|
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
var
|
|
16
|
-
de
|
|
17
|
-
en
|
|
18
|
-
es
|
|
19
|
-
fr
|
|
20
|
-
it
|
|
21
|
-
ja
|
|
22
|
-
ko
|
|
23
|
-
nl
|
|
24
|
-
pt
|
|
25
|
-
tr
|
|
26
|
-
vi
|
|
27
|
-
zh
|
|
28
|
-
pl
|
|
29
|
-
sv
|
|
1
|
+
import de from "./de.json.mjs";
|
|
2
|
+
import en from "./en.json.mjs";
|
|
3
|
+
import es from "./es.json.mjs";
|
|
4
|
+
import fr from "./fr.json.mjs";
|
|
5
|
+
import it from "./it.json.mjs";
|
|
6
|
+
import ja from "./ja.json.mjs";
|
|
7
|
+
import ko from "./ko.json.mjs";
|
|
8
|
+
import nl from "./nl.json.mjs";
|
|
9
|
+
import pt from "./pt.json.mjs";
|
|
10
|
+
import tr from "./tr.json.mjs";
|
|
11
|
+
import vi from "./vi.json.mjs";
|
|
12
|
+
import zh from "./zh.json.mjs";
|
|
13
|
+
import pl from "./pl.json.mjs";
|
|
14
|
+
import sv from "./sv.json.mjs";
|
|
15
|
+
var localizedMessages = {
|
|
16
|
+
de,
|
|
17
|
+
en,
|
|
18
|
+
es,
|
|
19
|
+
fr,
|
|
20
|
+
it,
|
|
21
|
+
ja,
|
|
22
|
+
ko,
|
|
23
|
+
nl,
|
|
24
|
+
pt,
|
|
25
|
+
tr,
|
|
26
|
+
vi,
|
|
27
|
+
zh,
|
|
28
|
+
pl,
|
|
29
|
+
sv
|
|
30
30
|
};
|
|
31
31
|
export {
|
|
32
|
-
|
|
32
|
+
localizedMessages
|
|
33
33
|
};
|
|
@@ -1,21 +1,27 @@
|
|
|
1
|
-
const
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
1
|
+
const leaveFeedback = "Feedback geben";
|
|
2
|
+
const learnMore = "Mehr erfahren";
|
|
3
|
+
const formTitle = "Feedback-Formular";
|
|
4
|
+
const submitButton = "Feedback senden";
|
|
5
|
+
const successMessage = "Vielen Dank für Ihr Feedback!";
|
|
6
|
+
const errorMessage = "Es ist ein Fehler aufgetreten. Versuchen Sie es erneut oder kontaktieren Sie uns unter {email}.";
|
|
7
|
+
const de = {
|
|
8
|
+
leaveFeedback,
|
|
9
|
+
learnMore,
|
|
10
|
+
formTitle,
|
|
11
|
+
submitButton,
|
|
12
|
+
successMessage,
|
|
13
|
+
errorMessage,
|
|
8
14
|
"FeedbackRating.SliderRating.ScreenReaderOnly.sliderDescriber": "Drücken Sie auf Enter, um die Bewertung auszuwählen",
|
|
9
15
|
"FeedbackRating.SliderRating.aria-valuetext.readonly": "Ihre Bewertung: {selectedRating} von {max}",
|
|
10
16
|
"FeedbackRating.SliderRating.aria-valuetext.empty": "Nicht festgelegt",
|
|
11
17
|
"FeedbackRating.SliderRating.aria-valuetext": "{selectedRating} von {max}"
|
|
12
18
|
};
|
|
13
19
|
export {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
20
|
+
de as default,
|
|
21
|
+
errorMessage,
|
|
22
|
+
formTitle,
|
|
23
|
+
learnMore,
|
|
24
|
+
leaveFeedback,
|
|
25
|
+
submitButton,
|
|
26
|
+
successMessage
|
|
21
27
|
};
|