@mittwald/flow-react-components 0.2.0-alpha.523 → 0.2.0-alpha.525

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 (160) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/assets/doc-properties.json +291 -253
  3. package/dist/css/all.css +1 -1
  4. package/dist/js/components/src/components/Autocomplete/Autocomplete.mjs +48 -36
  5. package/dist/js/components/src/components/Autocomplete/Autocomplete.mjs.map +1 -1
  6. package/dist/js/components/src/components/Checkbox/Checkbox.mjs +25 -7
  7. package/dist/js/components/src/components/Checkbox/Checkbox.mjs.map +1 -1
  8. package/dist/js/components/src/components/Checkbox/Checkbox.module.scss.mjs +3 -1
  9. package/dist/js/components/src/components/Checkbox/Checkbox.module.scss.mjs.map +1 -1
  10. package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs +28 -6
  11. package/dist/js/components/src/components/CheckboxButton/CheckboxButton.mjs.map +1 -1
  12. package/dist/js/components/src/components/CheckboxButton/CheckboxButton.module.scss.mjs +6 -4
  13. package/dist/js/components/src/components/CheckboxButton/CheckboxButton.module.scss.mjs.map +1 -1
  14. package/dist/js/components/src/components/CheckboxGroup/CheckboxGroup.mjs +22 -26
  15. package/dist/js/components/src/components/CheckboxGroup/CheckboxGroup.mjs.map +1 -1
  16. package/dist/js/components/src/components/ComboBox/ComboBox.mjs +31 -27
  17. package/dist/js/components/src/components/ComboBox/ComboBox.mjs.map +1 -1
  18. package/dist/js/components/src/components/DatePicker/DatePicker.mjs +8 -18
  19. package/dist/js/components/src/components/DatePicker/DatePicker.mjs.map +1 -1
  20. package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs +7 -19
  21. package/dist/js/components/src/components/DateRangePicker/DateRangePicker.mjs.map +1 -1
  22. package/dist/js/components/src/components/FieldError/FieldError.mjs +36 -5
  23. package/dist/js/components/src/components/FieldError/FieldError.mjs.map +1 -1
  24. package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs +22 -11
  25. package/dist/js/components/src/components/FileDropZone/FileDropZone.mjs.map +1 -1
  26. package/dist/js/components/src/components/FileField/FileField.mjs +33 -31
  27. package/dist/js/components/src/components/FileField/FileField.mjs.map +1 -1
  28. package/dist/js/components/src/components/FormField/FormField.module.scss.mjs +1 -3
  29. package/dist/js/components/src/components/FormField/FormField.module.scss.mjs.map +1 -1
  30. package/dist/js/components/src/components/NumberField/NumberField.mjs +9 -18
  31. package/dist/js/components/src/components/NumberField/NumberField.mjs.map +1 -1
  32. package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs +85 -79
  33. package/dist/js/components/src/components/PasswordCreationField/PasswordCreationField.mjs.map +1 -1
  34. package/dist/js/components/src/components/PasswordCreationField/lib/generateValidationTranslation.mjs +1 -0
  35. package/dist/js/components/src/components/PasswordCreationField/lib/generateValidationTranslation.mjs.map +1 -1
  36. package/dist/js/components/src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.mjs +1 -0
  37. package/dist/js/components/src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.mjs.map +1 -1
  38. package/dist/js/components/src/components/PasswordCreationField/worker/generatePassword.mjs +1 -0
  39. package/dist/js/components/src/components/PasswordCreationField/worker/generatePassword.mjs.map +1 -1
  40. package/dist/js/components/src/components/RadioGroup/RadioGroup.mjs +36 -34
  41. package/dist/js/components/src/components/RadioGroup/RadioGroup.mjs.map +1 -1
  42. package/dist/js/components/src/components/SearchField/SearchField.mjs +12 -17
  43. package/dist/js/components/src/components/SearchField/SearchField.mjs.map +1 -1
  44. package/dist/js/components/src/components/SegmentedControl/SegmentedControl.mjs +25 -23
  45. package/dist/js/components/src/components/SegmentedControl/SegmentedControl.mjs.map +1 -1
  46. package/dist/js/components/src/components/Select/Select.mjs +30 -30
  47. package/dist/js/components/src/components/Select/Select.mjs.map +1 -1
  48. package/dist/js/components/src/components/Slider/Slider.mjs +10 -5
  49. package/dist/js/components/src/components/Slider/Slider.mjs.map +1 -1
  50. package/dist/js/components/src/components/Switch/Switch.mjs +22 -31
  51. package/dist/js/components/src/components/Switch/Switch.mjs.map +1 -1
  52. package/dist/js/components/src/components/Switch/Switch.module.scss.mjs +2 -4
  53. package/dist/js/components/src/components/Switch/Switch.module.scss.mjs.map +1 -1
  54. package/dist/js/components/src/components/TextArea/TextArea.mjs +16 -1
  55. package/dist/js/components/src/components/TextArea/TextArea.mjs.map +1 -1
  56. package/dist/js/components/src/components/TextField/TextField.mjs +14 -1
  57. package/dist/js/components/src/components/TextField/TextField.mjs.map +1 -1
  58. package/dist/js/components/src/components/TextFieldBase/TextFieldBase.mjs +13 -22
  59. package/dist/js/components/src/components/TextFieldBase/TextFieldBase.mjs.map +1 -1
  60. package/dist/js/components/src/components/TimeField/TimeField.mjs +8 -32
  61. package/dist/js/components/src/components/TimeField/TimeField.mjs.map +1 -1
  62. package/dist/js/components/src/integrations/@mittwald/password-tools-js/generatePasswordCreationFieldValidation.mjs +19 -13
  63. package/dist/js/components/src/integrations/@mittwald/password-tools-js/generatePasswordCreationFieldValidation.mjs.map +1 -1
  64. package/dist/js/components/src/integrations/react-hook-form/components/Field/Field.mjs +29 -14
  65. package/dist/js/components/src/integrations/react-hook-form/components/Field/Field.mjs.map +1 -1
  66. package/dist/js/components/src/lib/hooks/useFieldComponent.mjs +36 -0
  67. package/dist/js/components/src/lib/hooks/useFieldComponent.mjs.map +1 -0
  68. package/dist/js/components/src/lib/hooks/useFieldError.mjs +43 -0
  69. package/dist/js/components/src/lib/hooks/useFieldError.mjs.map +1 -0
  70. package/dist/js/components/src/lib/hooks/useManagedValue.mjs +7 -3
  71. package/dist/js/components/src/lib/hooks/useManagedValue.mjs.map +1 -1
  72. package/dist/types/components/Autocomplete/Autocomplete.d.ts +1 -0
  73. package/dist/types/components/Autocomplete/Autocomplete.d.ts.map +1 -1
  74. package/dist/types/components/Checkbox/Checkbox.d.ts +3 -2
  75. package/dist/types/components/Checkbox/Checkbox.d.ts.map +1 -1
  76. package/dist/types/components/CheckboxButton/CheckboxButton.d.ts +2 -2
  77. package/dist/types/components/CheckboxButton/CheckboxButton.d.ts.map +1 -1
  78. package/dist/types/components/CheckboxGroup/CheckboxGroup.d.ts.map +1 -1
  79. package/dist/types/components/ComboBox/ComboBox.d.ts.map +1 -1
  80. package/dist/types/components/ComboBox/stories/Default.stories.d.ts.map +1 -1
  81. package/dist/types/components/DatePicker/DatePicker.d.ts +1 -3
  82. package/dist/types/components/DatePicker/DatePicker.d.ts.map +1 -1
  83. package/dist/types/components/DatePicker/stories/Default.stories.d.ts.map +1 -1
  84. package/dist/types/components/DateRangePicker/DateRangePicker.d.ts +1 -3
  85. package/dist/types/components/DateRangePicker/DateRangePicker.d.ts.map +1 -1
  86. package/dist/types/components/DateRangePicker/stories/Default.stories.d.ts.map +1 -1
  87. package/dist/types/components/FieldError/FieldError.d.ts +2 -2
  88. package/dist/types/components/FieldError/FieldError.d.ts.map +1 -1
  89. package/dist/types/components/FileDropZone/FileDropZone.d.ts.map +1 -1
  90. package/dist/types/components/FileDropZone/stories/Default.stories.d.ts.map +1 -1
  91. package/dist/types/components/FileField/FileField.d.ts.map +1 -1
  92. package/dist/types/components/NumberField/NumberField.d.ts +2 -2
  93. package/dist/types/components/NumberField/NumberField.d.ts.map +1 -1
  94. package/dist/types/components/PasswordCreationField/PasswordCreationField.d.ts.map +1 -1
  95. package/dist/types/components/RadioGroup/RadioGroup.d.ts.map +1 -1
  96. package/dist/types/components/SearchField/SearchField.d.ts.map +1 -1
  97. package/dist/types/components/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  98. package/dist/types/components/Select/Select.d.ts.map +1 -1
  99. package/dist/types/components/Slider/Slider.d.ts +1 -0
  100. package/dist/types/components/Slider/Slider.d.ts.map +1 -1
  101. package/dist/types/components/Switch/Switch.d.ts.map +1 -1
  102. package/dist/types/components/TextArea/TextArea.d.ts +1 -1
  103. package/dist/types/components/TextArea/TextArea.d.ts.map +1 -1
  104. package/dist/types/components/TextField/TextField.d.ts +1 -1
  105. package/dist/types/components/TextField/TextField.d.ts.map +1 -1
  106. package/dist/types/components/TextFieldBase/TextFieldBase.d.ts +2 -1
  107. package/dist/types/components/TextFieldBase/TextFieldBase.d.ts.map +1 -1
  108. package/dist/types/components/TimeField/TimeField.d.ts +2 -4
  109. package/dist/types/components/TimeField/TimeField.d.ts.map +1 -1
  110. package/dist/types/integrations/@mittwald/password-tools-js/generatePasswordCreationFieldValidation.d.ts.map +1 -1
  111. package/dist/types/integrations/react-hook-form/components/Field/Field.d.ts.map +1 -1
  112. package/dist/types/integrations/react-hook-form/components/Field/stories/Autocomplete.stories.d.ts +2 -1
  113. package/dist/types/integrations/react-hook-form/components/Field/stories/Autocomplete.stories.d.ts.map +1 -1
  114. package/dist/types/integrations/react-hook-form/components/Field/stories/Checkbox.stories.d.ts +2 -1
  115. package/dist/types/integrations/react-hook-form/components/Field/stories/Checkbox.stories.d.ts.map +1 -1
  116. package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxButton.stories.d.ts +9 -0
  117. package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxButton.stories.d.ts.map +1 -0
  118. package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxGroup.stories.d.ts +2 -1
  119. package/dist/types/integrations/react-hook-form/components/Field/stories/CheckboxGroup.stories.d.ts.map +1 -1
  120. package/dist/types/integrations/react-hook-form/components/Field/stories/ComboBox.stories.d.ts +2 -1
  121. package/dist/types/integrations/react-hook-form/components/Field/stories/ComboBox.stories.d.ts.map +1 -1
  122. package/dist/types/integrations/react-hook-form/components/Field/stories/DatePicker.stories.d.ts +2 -1
  123. package/dist/types/integrations/react-hook-form/components/Field/stories/DatePicker.stories.d.ts.map +1 -1
  124. package/dist/types/integrations/react-hook-form/components/Field/stories/DateRangePicker.stories.d.ts +2 -1
  125. package/dist/types/integrations/react-hook-form/components/Field/stories/DateRangePicker.stories.d.ts.map +1 -1
  126. package/dist/types/integrations/react-hook-form/components/Field/stories/FileField.stories.d.ts +2 -1
  127. package/dist/types/integrations/react-hook-form/components/Field/stories/FileField.stories.d.ts.map +1 -1
  128. package/dist/types/integrations/react-hook-form/components/Field/stories/MarkdownEditor.stories.d.ts +2 -1
  129. package/dist/types/integrations/react-hook-form/components/Field/stories/MarkdownEditor.stories.d.ts.map +1 -1
  130. package/dist/types/integrations/react-hook-form/components/Field/stories/NumberField.stories.d.ts +2 -1
  131. package/dist/types/integrations/react-hook-form/components/Field/stories/NumberField.stories.d.ts.map +1 -1
  132. package/dist/types/integrations/react-hook-form/components/Field/stories/PasswordCreationField.stories.d.ts +2 -1
  133. package/dist/types/integrations/react-hook-form/components/Field/stories/PasswordCreationField.stories.d.ts.map +1 -1
  134. package/dist/types/integrations/react-hook-form/components/Field/stories/RadioGroup.stories.d.ts +2 -1
  135. package/dist/types/integrations/react-hook-form/components/Field/stories/RadioGroup.stories.d.ts.map +1 -1
  136. package/dist/types/integrations/react-hook-form/components/Field/stories/SearchField.stories.d.ts +2 -1
  137. package/dist/types/integrations/react-hook-form/components/Field/stories/SearchField.stories.d.ts.map +1 -1
  138. package/dist/types/integrations/react-hook-form/components/Field/stories/SegmentedControl.stories.d.ts +2 -1
  139. package/dist/types/integrations/react-hook-form/components/Field/stories/SegmentedControl.stories.d.ts.map +1 -1
  140. package/dist/types/integrations/react-hook-form/components/Field/stories/Select.stories.d.ts +2 -1
  141. package/dist/types/integrations/react-hook-form/components/Field/stories/Select.stories.d.ts.map +1 -1
  142. package/dist/types/integrations/react-hook-form/components/Field/stories/Slider.stories.d.ts +2 -1
  143. package/dist/types/integrations/react-hook-form/components/Field/stories/Slider.stories.d.ts.map +1 -1
  144. package/dist/types/integrations/react-hook-form/components/Field/stories/Switch.stories.d.ts +2 -1
  145. package/dist/types/integrations/react-hook-form/components/Field/stories/Switch.stories.d.ts.map +1 -1
  146. package/dist/types/integrations/react-hook-form/components/Field/stories/TextArea.stories.d.ts +2 -1
  147. package/dist/types/integrations/react-hook-form/components/Field/stories/TextArea.stories.d.ts.map +1 -1
  148. package/dist/types/integrations/react-hook-form/components/Field/stories/TextField.stories.d.ts +2 -1
  149. package/dist/types/integrations/react-hook-form/components/Field/stories/TextField.stories.d.ts.map +1 -1
  150. package/dist/types/integrations/react-hook-form/components/Field/stories/TimeField.stories.d.ts +2 -1
  151. package/dist/types/integrations/react-hook-form/components/Field/stories/TimeField.stories.d.ts.map +1 -1
  152. package/dist/types/lib/hooks/useFieldComponent.d.ts +19 -0
  153. package/dist/types/lib/hooks/useFieldComponent.d.ts.map +1 -0
  154. package/dist/types/lib/hooks/useFieldError.d.ts +10 -0
  155. package/dist/types/lib/hooks/useFieldError.d.ts.map +1 -0
  156. package/dist/types/lib/hooks/useManagedValue.d.ts +9 -7
  157. package/dist/types/lib/hooks/useManagedValue.d.ts.map +1 -1
  158. package/package.json +4 -4
  159. package/dist/js/components/src/views/FieldErrorView.mjs +0 -15
  160. package/dist/js/components/src/views/FieldErrorView.mjs.map +0 -1
@@ -9,14 +9,12 @@ import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
9
9
  import styles from './PasswordCreationField.module.scss.mjs';
10
10
  import * as Aria from 'react-aria-components';
11
11
  import { FieldErrorContext } from 'react-aria-components';
12
- import formFieldStyles from '../FormField/FormField.module.scss.mjs';
13
12
  import clsx from 'clsx';
14
13
  import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
15
14
  import '../Action/Action.mjs';
16
15
  import { getStateFromLatestPolicyValidationResult } from './lib/getStateFromLatestPolicyValidationResult.mjs';
17
16
  import locales from '../../../../_virtual/_.locale.json@95341064edeb0e38b66d786dbd62955c.mjs';
18
17
  import { generateValidationTranslation } from './lib/generateValidationTranslation.mjs';
19
- import { FieldError } from '../FieldError/FieldError.mjs';
20
18
  import { FieldDescription } from '../FieldDescription/FieldDescription.mjs';
21
19
  import { ComplexityIndicator } from './components/ComplexityIndicator/ComplexityIndicator.mjs';
22
20
  import { generatePassword } from './worker/generatePassword.mjs';
@@ -33,6 +31,7 @@ import '@mittwald/password-tools-js/rules';
33
31
  import '@mittwald/password-tools-js/generator';
34
32
  import { usePolicyValidationResult } from './lib/usePolicyValidationResult.mjs';
35
33
  import { useManagedValue } from '../../lib/hooks/useManagedValue.mjs';
34
+ import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
36
35
 
37
36
  const PasswordCreationField = flowComponent(
38
37
  "PasswordCreationField",
@@ -48,6 +47,12 @@ const PasswordCreationField = flowComponent(
48
47
  isRequired,
49
48
  ...rest
50
49
  } = props;
50
+ const {
51
+ FieldErrorView,
52
+ FieldErrorResetContext,
53
+ fieldProps,
54
+ fieldPropsContext
55
+ } = useFieldComponent(props);
51
56
  const [isLoading, setIsLoading] = useState(false);
52
57
  const translate = useLocalizedContextStringFormatter(locales);
53
58
  const validationPolicy = useMemo(
@@ -135,6 +140,7 @@ const PasswordCreationField = flowComponent(
135
140
  setIsPasswordRevealed((old) => !old);
136
141
  };
137
142
  const propsContext = {
143
+ ...fieldPropsContext,
138
144
  Button: {
139
145
  tunnelId: "button",
140
146
  size: "m",
@@ -153,10 +159,8 @@ const PasswordCreationField = flowComponent(
153
159
  text: value
154
160
  },
155
161
  Label: {
156
- className: formFieldStyles.label,
162
+ ...fieldPropsContext.Label,
157
163
  tunnelId: "label",
158
- optional: !isRequired,
159
- isDisabled,
160
164
  children: dynamic((localProps) => {
161
165
  return /* @__PURE__ */ jsxs(Fragment, { children: [
162
166
  localProps.children,
@@ -177,87 +181,89 @@ const PasswordCreationField = flowComponent(
177
181
  )
178
182
  ] });
179
183
  })
180
- },
181
- FieldDescription: {
182
- className: formFieldStyles.fieldDescription
183
- },
184
- FieldError: {
185
- className: formFieldStyles.customFieldError,
186
- children: dynamic(() => {
187
- if (latestValidationErrorText) {
188
- return latestValidationErrorText;
189
- }
190
- })
191
184
  }
192
185
  };
193
186
  return /* @__PURE__ */ jsx(
194
- PropsContextProvider,
187
+ Aria.TextField,
195
188
  {
196
- props: propsContext,
197
- dependencies: [isDisabled, isRequired, value, policyValidationResult],
198
- children: /* @__PURE__ */ jsx(TunnelProvider, { children: /* @__PURE__ */ jsxs(
199
- Aria.TextField,
200
- {
201
- ...rest,
202
- value,
203
- type: isPasswordRevealed ? "text" : "password",
204
- onChange: handleOnChange,
205
- onPaste: onPasswordPasteHandler,
206
- className: clsx(className, formFieldStyles.formField),
207
- isDisabled,
208
- isInvalid,
209
- isRequired,
210
- children: [
211
- /* @__PURE__ */ jsx(TunnelExit, { id: "label" }),
212
- /* @__PURE__ */ jsxs(
213
- Aria.Group,
214
- {
215
- isDisabled,
216
- className: clsx(styles.inputGroup),
217
- children: [
218
- /* @__PURE__ */ jsx(
219
- ReactAriaControlledValueFix,
220
- {
221
- inputContext: Aria.InputContext,
222
- props: { ...props, value },
223
- children: /* @__PURE__ */ jsx(Aria.Input, { ref, className: styles.input })
224
- }
225
- ),
226
- /* @__PURE__ */ jsxs(Aria.Group, { className: styles.buttonContainer, children: [
189
+ ...rest,
190
+ value,
191
+ type: isPasswordRevealed ? "text" : "password",
192
+ onChange: handleOnChange,
193
+ onPaste: onPasswordPasteHandler,
194
+ className: clsx(className, fieldProps.className),
195
+ isDisabled,
196
+ isInvalid,
197
+ isRequired,
198
+ children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
199
+ /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsxs(
200
+ PropsContextProvider,
201
+ {
202
+ props: propsContext,
203
+ dependencies: [
204
+ isDisabled,
205
+ isRequired,
206
+ value,
207
+ policyValidationResult
208
+ ],
209
+ children: [
210
+ /* @__PURE__ */ jsx(TunnelExit, { id: "label" }),
211
+ /* @__PURE__ */ jsxs(
212
+ Aria.Group,
213
+ {
214
+ isDisabled,
215
+ className: clsx(styles.inputGroup),
216
+ children: [
227
217
  /* @__PURE__ */ jsx(
228
- TogglePasswordVisibilityButton,
218
+ ReactAriaControlledValueFix,
229
219
  {
230
- className: styles.button,
231
- isVisible: isPasswordRevealed,
232
- isDisabled,
233
- onPress: togglePasswordVisibilityHandler
220
+ inputContext: Aria.InputContext,
221
+ props: { ...props, value },
222
+ children: /* @__PURE__ */ jsx(Aria.Input, { ref, className: styles.input })
234
223
  }
235
224
  ),
236
- /* @__PURE__ */ jsx(TunnelExit, { id: "button" })
237
- ] }),
238
- /* @__PURE__ */ jsx(
239
- ComplexityIndicator,
240
- {
241
- isEmptyValue,
242
- isLoading,
243
- policyValidationResult,
244
- validationResultState: stateFromValidationResult
245
- }
246
- )
247
- ]
248
- }
249
- ),
250
- isValidFromValidationResult && /* @__PURE__ */ jsx(FieldDescription, { children: latestValidationErrorText }),
251
- isInvalidFromValidationResult && policyValidationResult.isValid !== "indeterminate" && /* @__PURE__ */ jsx(FieldError, { children: latestValidationErrorText }),
252
- /* @__PURE__ */ jsx(Wrap, { if: isInvalidFromValidationResult, children: /* @__PURE__ */ jsx(
225
+ /* @__PURE__ */ jsxs(Aria.Group, { className: styles.buttonContainer, children: [
226
+ /* @__PURE__ */ jsx(
227
+ TogglePasswordVisibilityButton,
228
+ {
229
+ className: styles.button,
230
+ isVisible: isPasswordRevealed,
231
+ isDisabled,
232
+ onPress: togglePasswordVisibilityHandler
233
+ }
234
+ ),
235
+ /* @__PURE__ */ jsx(TunnelExit, { id: "button" })
236
+ ] }),
237
+ /* @__PURE__ */ jsx(
238
+ ComplexityIndicator,
239
+ {
240
+ isEmptyValue,
241
+ isLoading,
242
+ policyValidationResult,
243
+ validationResultState: stateFromValidationResult
244
+ }
245
+ )
246
+ ]
247
+ }
248
+ ),
249
+ children,
250
+ isValidFromValidationResult && /* @__PURE__ */ jsx(FieldDescription, { children: latestValidationErrorText })
251
+ ]
252
+ }
253
+ ) }),
254
+ /* @__PURE__ */ jsx(
255
+ Wrap,
256
+ {
257
+ if: isInvalidFromValidationResult && policyValidationResult.isValid !== "indeterminate" && latestValidationErrorText,
258
+ children: /* @__PURE__ */ jsx(
253
259
  FieldErrorContext.Provider,
254
260
  {
255
261
  value: {
256
- isInvalid: false,
257
- validationErrors: [],
262
+ isInvalid: true,
263
+ validationErrors: [latestValidationErrorText ?? ""],
258
264
  validationDetails: {
259
- customError: false,
260
- valid: true,
265
+ customError: true,
266
+ valid: false,
261
267
  typeMismatch: false,
262
268
  stepMismatch: false,
263
269
  valueMissing: false,
@@ -269,12 +275,12 @@ const PasswordCreationField = flowComponent(
269
275
  rangeOverflow: false
270
276
  }
271
277
  },
272
- children
278
+ children: /* @__PURE__ */ jsx(FieldErrorView, {})
273
279
  }
274
- ) })
275
- ]
276
- }
277
- ) })
280
+ )
281
+ }
282
+ )
283
+ ] })
278
284
  }
279
285
  );
280
286
  }
@@ -1 +1 @@
1
- {"version":3,"file":"PasswordCreationField.mjs","sources":["../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useDeferredValue,\n useMemo,\n} from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"@/components/FormField/FormField.module.scss\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport { FieldError } from \"@/components/FieldError\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport { useLocalizedContextStringFormatter } from \"@/components/TranslationProvider/useLocalizedContextStringFormatter\";\nimport type {\n PolicyValidationResult,\n PolicyGenericDeclaration,\n RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n defaultPasswordCreationPolicy,\n Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useManagedValue } from \"@/lib/hooks/useManagedValue\";\n\nexport interface PasswordCreationFieldProps\n extends PropsWithChildren<\n Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n >,\n FlowComponentProps<HTMLInputElement> {\n value?: string;\n onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n defaultValue?: string;\n placeholder?: string;\n validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult\n extends Omit<PolicyValidationResult, \"isValid\"> {\n isValid: boolean | \"indeterminate\";\n ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n \"PasswordCreationField\",\n (props) => {\n const {\n children,\n className,\n ref,\n isDisabled,\n onValidationResult,\n isInvalid: invalidFromProps,\n validationPolicy:\n validationPolicyFromProps = defaultPasswordCreationPolicy,\n isRequired,\n ...rest\n } = props;\n\n const [isLoading, setIsLoading] = useState(false);\n const translate = useLocalizedContextStringFormatter(locales);\n const validationPolicy = useMemo(\n () => Policy.fromDeclaration(validationPolicyFromProps),\n [validationPolicyFromProps],\n );\n\n const { value, handleOnChange } = useManagedValue(props);\n const deferredValue = useDeferredValue(value);\n\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n isValid: true,\n complexity: {\n min: validationPolicy.minComplexity,\n actual: 4,\n warning: null,\n },\n ruleResults: [],\n };\n\n const [policyValidationResult, setPolicyValidationResult] = useState(\n initialPolicyValidationState,\n );\n usePolicyValidationResult(\n validationPolicy,\n deferredValue,\n () => {\n if (isEmptyValue) {\n return;\n }\n\n setIsLoading(() => true);\n },\n ({ password, isValid, results }) => {\n if (isEmptyValue) {\n setPolicyValidationResult(() => ({\n ...results,\n isValid: true,\n }));\n return;\n }\n\n setIsLoading(() => false);\n setPolicyValidationResult(() => results);\n onValidationResult?.({ password, isValid });\n },\n );\n\n const isEmptyValue = !value;\n const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n isEmptyValue,\n policyValidationResult,\n );\n let latestValidationErrorText = undefined;\n if (stateFromValidationResult) {\n const [translationKey, translationValues] = generateValidationTranslation(\n stateFromValidationResult,\n );\n latestValidationErrorText = translate.format(\n translationKey,\n translationValues,\n );\n }\n\n const isValidFromValidationResult =\n !isEmptyValue && stateFromValidationResult?.isValid;\n const isInvalidFromValidationResult =\n !isEmptyValue && !stateFromValidationResult?.isValid;\n const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n const setOptimisticPolicyValidationResult = (\n state: Partial<ResolvedPolicyValidationResult> = {},\n ) => {\n setIsLoading(() => false);\n setPolicyValidationResult(() => ({\n ...initialPolicyValidationState,\n ...state,\n isValid: true,\n }));\n };\n\n const onPasswordGenerateHandler: ActionFn = async () => {\n const generatedPassword = await generatePassword(validationPolicy);\n setOptimisticPolicyValidationResult();\n setIsPasswordRevealed(true);\n handleOnChange(generatedPassword);\n };\n\n const onPasswordPasteHandler = (event: ClipboardEvent) => {\n const pastedValue = event.clipboardData.getData(\"text\");\n if (pastedValue !== value) {\n setOptimisticPolicyValidationResult({\n isValid: \"indeterminate\",\n });\n }\n };\n\n const togglePasswordVisibilityHandler = () => {\n setIsPasswordRevealed((old) => !old);\n };\n\n const propsContext: PropsContext = {\n Button: {\n tunnelId: \"button\",\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n },\n CopyButton: {\n tunnelId: \"button\",\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n text: value,\n },\n Label: {\n className: formFieldStyles.label,\n tunnelId: \"label\",\n optional: !isRequired,\n isDisabled: isDisabled,\n children: dynamic((localProps) => {\n return (\n <>\n {localProps.children}\n <PasswordGenerateButton\n isDisabled={isDisabled}\n onGeneratePasswordAction={onPasswordGenerateHandler}\n />\n <ValidationResultButton\n isEmptyValue={isEmptyValue}\n isDisabled={isDisabled}\n policyValidationResult={policyValidationResult}\n />\n </>\n );\n }),\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n FieldError: {\n className: formFieldStyles.customFieldError,\n children: dynamic(() => {\n if (latestValidationErrorText) {\n return latestValidationErrorText;\n }\n }),\n },\n };\n\n return (\n <PropsContextProvider\n props={propsContext}\n dependencies={[isDisabled, isRequired, value, policyValidationResult]}\n >\n <TunnelProvider>\n <Aria.TextField\n {...rest}\n value={value}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n onChange={handleOnChange}\n onPaste={onPasswordPasteHandler}\n className={clsx(className, formFieldStyles.formField)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isRequired={isRequired}\n >\n <TunnelExit id=\"label\" />\n <Aria.Group\n isDisabled={isDisabled}\n className={clsx(styles.inputGroup)}\n >\n <ReactAriaControlledValueFix\n inputContext={Aria.InputContext}\n props={{ ...props, value }}\n >\n <Aria.Input ref={ref} className={styles.input} />\n </ReactAriaControlledValueFix>\n <Aria.Group className={styles.buttonContainer}>\n <TogglePasswordVisibilityButton\n className={styles.button}\n isVisible={isPasswordRevealed}\n isDisabled={isDisabled}\n onPress={togglePasswordVisibilityHandler}\n />\n <TunnelExit id=\"button\" />\n </Aria.Group>\n <ComplexityIndicator\n isEmptyValue={isEmptyValue}\n isLoading={isLoading}\n policyValidationResult={policyValidationResult}\n validationResultState={stateFromValidationResult}\n />\n </Aria.Group>\n {isValidFromValidationResult && (\n <FieldDescription>{latestValidationErrorText}</FieldDescription>\n )}\n {isInvalidFromValidationResult &&\n policyValidationResult.isValid !== \"indeterminate\" && (\n <FieldError>{latestValidationErrorText}</FieldError>\n )}\n <Wrap if={isInvalidFromValidationResult}>\n <FieldErrorContext.Provider\n value={{\n isInvalid: false,\n validationErrors: [],\n validationDetails: {\n customError: false,\n valid: true,\n typeMismatch: false,\n stepMismatch: false,\n valueMissing: false,\n tooShort: false,\n tooLong: false,\n rangeUnderflow: false,\n patternMismatch: false,\n badInput: false,\n rangeOverflow: false,\n },\n }}\n >\n {children}\n </FieldErrorContext.Provider>\n </Wrap>\n </Aria.TextField>\n </TunnelProvider>\n </PropsContextProvider>\n );\n },\n);\n\nexport default PasswordCreationField;\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"PasswordCreationField.mjs","sources":["../../../../../../src/components/PasswordCreationField/PasswordCreationField.tsx"],"sourcesContent":["import {\n type PropsWithChildren,\n useState,\n type ClipboardEvent,\n useDeferredValue,\n useMemo,\n} from \"react\";\nimport {\n dynamic,\n type PropsContext,\n PropsContextProvider,\n} from \"@/lib/propsContext\";\nimport {\n flowComponent,\n type FlowComponentProps,\n} from \"@/lib/componentFactory/flowComponent\";\nimport styles from \"./PasswordCreationField.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport { type ActionFn } from \"@/components/Action\";\nimport getStateFromLatestPolicyValidationResult from \"@/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult\";\nimport locales from \"./locales/*.locale.json\";\nimport generateValidationTranslation from \"@/components/PasswordCreationField/lib/generateValidationTranslation\";\nimport FieldDescription from \"@/components/FieldDescription\";\nimport ComplexityIndicator from \"@/components/PasswordCreationField/components/ComplexityIndicator/ComplexityIndicator\";\nimport { generatePassword } from \"@/components/PasswordCreationField/worker/generatePassword\";\nimport TogglePasswordVisibilityButton from \"@/components/PasswordCreationField/components/TogglePasswordVisibilityButton/TogglePasswordVisibilityButton\";\nimport { FieldErrorContext } from \"react-aria-components\";\nimport { Wrap } from \"@/components/Wrap\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { ValidationResultButton } from \"@/components/PasswordCreationField/components/ValidationResultButton/ValidationResultButton\";\nimport { PasswordGenerateButton } from \"@/components/PasswordCreationField/components/PasswordGenerateButton/PasswordGenerateButton\";\nimport { useLocalizedContextStringFormatter } from \"@/components/TranslationProvider/useLocalizedContextStringFormatter\";\nimport type {\n PolicyValidationResult,\n PolicyGenericDeclaration,\n RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport {\n defaultPasswordCreationPolicy,\n Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\nimport { usePolicyValidationResult } from \"@/components/PasswordCreationField/lib/usePolicyValidationResult\";\nimport { useManagedValue } from \"@/lib/hooks/useManagedValue\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface PasswordCreationFieldProps\n extends PropsWithChildren<\n Omit<Aria.TextFieldProps, \"children\" | \"value\" | \"defaultValue\"> &\n Partial<Pick<Aria.FieldErrorRenderProps, \"validationErrors\">>\n >,\n FlowComponentProps<HTMLInputElement> {\n value?: string;\n onValidationResult?: (result: { password: string; isValid: boolean }) => void;\n defaultValue?: string;\n placeholder?: string;\n validationPolicy?: PolicyGenericDeclaration;\n}\n\nexport interface ResolvedPolicyValidationResult\n extends Omit<PolicyValidationResult, \"isValid\"> {\n isValid: boolean | \"indeterminate\";\n ruleResults: RuleValidationResult[];\n}\n\n/** @flr-generate all */\nexport const PasswordCreationField = flowComponent(\n \"PasswordCreationField\",\n (props) => {\n const {\n children,\n className,\n ref,\n isDisabled,\n onValidationResult,\n isInvalid: invalidFromProps,\n validationPolicy:\n validationPolicyFromProps = defaultPasswordCreationPolicy,\n isRequired,\n ...rest\n } = props;\n\n const {\n FieldErrorView,\n FieldErrorResetContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props);\n\n const [isLoading, setIsLoading] = useState(false);\n const translate = useLocalizedContextStringFormatter(locales);\n\n const validationPolicy = useMemo(\n () => Policy.fromDeclaration(validationPolicyFromProps),\n [validationPolicyFromProps],\n );\n\n const { value, handleOnChange } = useManagedValue(props);\n const deferredValue = useDeferredValue(value);\n\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n const initialPolicyValidationState: ResolvedPolicyValidationResult = {\n isValid: true,\n complexity: {\n min: validationPolicy.minComplexity,\n actual: 4,\n warning: null,\n },\n ruleResults: [],\n };\n\n const [policyValidationResult, setPolicyValidationResult] = useState(\n initialPolicyValidationState,\n );\n usePolicyValidationResult(\n validationPolicy,\n deferredValue,\n () => {\n if (isEmptyValue) {\n return;\n }\n\n setIsLoading(() => true);\n },\n ({ password, isValid, results }) => {\n if (isEmptyValue) {\n setPolicyValidationResult(() => ({\n ...results,\n isValid: true,\n }));\n return;\n }\n\n setIsLoading(() => false);\n setPolicyValidationResult(() => results);\n onValidationResult?.({ password, isValid });\n },\n );\n\n const isEmptyValue = !value;\n const stateFromValidationResult = getStateFromLatestPolicyValidationResult(\n isEmptyValue,\n policyValidationResult,\n );\n let latestValidationErrorText = undefined;\n if (stateFromValidationResult) {\n const [translationKey, translationValues] = generateValidationTranslation(\n stateFromValidationResult,\n );\n latestValidationErrorText = translate.format(\n translationKey,\n translationValues,\n );\n }\n\n const isValidFromValidationResult =\n !isEmptyValue && stateFromValidationResult?.isValid;\n const isInvalidFromValidationResult =\n !isEmptyValue && !stateFromValidationResult?.isValid;\n const isInvalid = invalidFromProps || isInvalidFromValidationResult;\n\n const setOptimisticPolicyValidationResult = (\n state: Partial<ResolvedPolicyValidationResult> = {},\n ) => {\n setIsLoading(() => false);\n setPolicyValidationResult(() => ({\n ...initialPolicyValidationState,\n ...state,\n isValid: true,\n }));\n };\n\n const onPasswordGenerateHandler: ActionFn = async () => {\n const generatedPassword = await generatePassword(validationPolicy);\n setOptimisticPolicyValidationResult();\n setIsPasswordRevealed(true);\n handleOnChange(generatedPassword);\n };\n\n const onPasswordPasteHandler = (event: ClipboardEvent) => {\n const pastedValue = event.clipboardData.getData(\"text\");\n if (pastedValue !== value) {\n setOptimisticPolicyValidationResult({\n isValid: \"indeterminate\",\n });\n }\n };\n\n const togglePasswordVisibilityHandler = () => {\n setIsPasswordRevealed((old) => !old);\n };\n\n const propsContext: PropsContext = {\n ...fieldPropsContext,\n Button: {\n tunnelId: \"button\",\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n },\n CopyButton: {\n tunnelId: \"button\",\n size: \"m\",\n variant: \"plain\",\n color: \"secondary\",\n isDisabled: isDisabled,\n className: styles.button,\n text: value,\n },\n Label: {\n ...fieldPropsContext.Label,\n tunnelId: \"label\",\n children: dynamic((localProps) => {\n return (\n <>\n {localProps.children}\n <PasswordGenerateButton\n isDisabled={isDisabled}\n onGeneratePasswordAction={onPasswordGenerateHandler}\n />\n <ValidationResultButton\n isEmptyValue={isEmptyValue}\n isDisabled={isDisabled}\n policyValidationResult={policyValidationResult}\n />\n </>\n );\n }),\n },\n };\n\n return (\n <Aria.TextField\n {...rest}\n value={value}\n type={isPasswordRevealed ? \"text\" : \"password\"}\n onChange={handleOnChange}\n onPaste={onPasswordPasteHandler}\n className={clsx(className, fieldProps.className)}\n isDisabled={isDisabled}\n isInvalid={isInvalid}\n isRequired={isRequired}\n >\n <TunnelProvider>\n <FieldErrorResetContext>\n <PropsContextProvider\n props={propsContext}\n dependencies={[\n isDisabled,\n isRequired,\n value,\n policyValidationResult,\n ]}\n >\n <TunnelExit id=\"label\" />\n <Aria.Group\n isDisabled={isDisabled}\n className={clsx(styles.inputGroup)}\n >\n <ReactAriaControlledValueFix\n inputContext={Aria.InputContext}\n props={{ ...props, value }}\n >\n <Aria.Input ref={ref} className={styles.input} />\n </ReactAriaControlledValueFix>\n <Aria.Group className={styles.buttonContainer}>\n <TogglePasswordVisibilityButton\n className={styles.button}\n isVisible={isPasswordRevealed}\n isDisabled={isDisabled}\n onPress={togglePasswordVisibilityHandler}\n />\n <TunnelExit id=\"button\" />\n </Aria.Group>\n <ComplexityIndicator\n isEmptyValue={isEmptyValue}\n isLoading={isLoading}\n policyValidationResult={policyValidationResult}\n validationResultState={stateFromValidationResult}\n />\n </Aria.Group>\n {children}\n {isValidFromValidationResult && (\n <FieldDescription>{latestValidationErrorText}</FieldDescription>\n )}\n </PropsContextProvider>\n </FieldErrorResetContext>\n <Wrap\n if={\n isInvalidFromValidationResult &&\n policyValidationResult.isValid !== \"indeterminate\" &&\n latestValidationErrorText\n }\n >\n <FieldErrorContext.Provider\n value={{\n isInvalid: true,\n validationErrors: [latestValidationErrorText ?? \"\"],\n validationDetails: {\n customError: true,\n valid: false,\n typeMismatch: false,\n stepMismatch: false,\n valueMissing: false,\n tooShort: false,\n tooLong: false,\n rangeUnderflow: false,\n patternMismatch: false,\n badInput: false,\n rangeOverflow: false,\n },\n }}\n >\n <FieldErrorView />\n </FieldErrorContext.Provider>\n </Wrap>\n </TunnelProvider>\n </Aria.TextField>\n );\n },\n);\n\nexport default PasswordCreationField;\n"],"names":[],"mappings":"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"}
@@ -3,6 +3,7 @@
3
3
  import '../../../integrations/@mittwald/password-tools-js/defaultPasswordCreationPolicy.mjs';
4
4
  import '@mittwald/password-tools-js/policy';
5
5
  import 'remeda';
6
+ import 'react';
6
7
  import { RuleType } from '@mittwald/password-tools-js/rules';
7
8
  import '@mittwald/password-tools-js/generator';
8
9
 
@@ -1 +1 @@
1
- {"version":3,"file":"generateValidationTranslation.mjs","sources":["../../../../../../../src/components/PasswordCreationField/lib/generateValidationTranslation.ts"],"sourcesContent":["import {\n RuleType,\n type RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nconst generateTranslationString = (\n rule: Partial<RuleValidationResult> & { translationKey?: string },\n shortVersion = false,\n): string => {\n if (rule.translationKey) {\n return `validation.${rule.translationKey}`;\n }\n const translateString = `validation.${rule.ruleType ?? \"general\"}`;\n let finalTranslationString = \"\";\n\n if (\n (\"min\" in rule && rule.min !== undefined) ||\n (\"max\" in rule && rule.max !== undefined)\n ) {\n const breakingBoundaryProperty = rule.failingBoundary\n ? rule.failingBoundary\n : rule.min\n ? \"min\"\n : \"max\";\n\n if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}.${breakingBoundaryProperty}`;\n } else {\n finalTranslationString = `${translateString}.${breakingBoundaryProperty}`;\n }\n } else if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}`;\n } else {\n finalTranslationString = translateString;\n }\n\n return shortVersion\n ? `${finalTranslationString}.short`\n : finalTranslationString;\n};\n\nexport const generateValidationTranslation = (\n r: Partial<RuleValidationResult>,\n shotVersion = false,\n): [string, Record<string, string | number | boolean> | undefined] => {\n const translationKey = generateTranslationString(r, shotVersion);\n\n if (r.ruleType === RuleType.char && r.chars) {\n return [\n translationKey,\n { ...r, chars: r.chars.map((c) => c.char).join(\"\") },\n ];\n }\n\n return [\n translationKey,\n r as unknown as Record<string, string | number | boolean> | undefined,\n ];\n};\n\nexport default generateValidationTranslation;\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,yBAAA,GAA4B,CAChC,IAAA,EACA,YAAA,GAAe,KAAA,KACJ;AACX,EAAA,IAAI,KAAK,cAAA,EAAgB;AACvB,IAAA,OAAO,CAAA,WAAA,EAAc,KAAK,cAAc,CAAA,CAAA;AAAA,EAC1C;AACA,EAAA,MAAM,eAAA,GAAkB,CAAA,WAAA,EAAc,IAAA,CAAK,QAAA,IAAY,SAAS,CAAA,CAAA;AAChE,EAAA,IAAI,sBAAA,GAAyB,EAAA;AAE7B,EAAA,IACG,KAAA,IAAS,QAAQ,IAAA,CAAK,GAAA,KAAQ,UAC9B,KAAA,IAAS,IAAA,IAAQ,IAAA,CAAK,GAAA,KAAQ,MAAA,EAC/B;AACA,IAAA,MAAM,2BAA2B,IAAA,CAAK,eAAA,GAClC,KAAK,eAAA,GACL,IAAA,CAAK,MACH,KAAA,GACA,KAAA;AAEN,IAAA,IAAI,KAAK,UAAA,EAAY;AACnB,MAAA,sBAAA,GAAyB,GAAG,eAAe,CAAA,CAAA,EAAI,IAAA,CAAK,UAAU,IAAI,wBAAwB,CAAA,CAAA;AAAA,IAC5F,CAAA,MAAO;AACL,MAAA,sBAAA,GAAyB,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,wBAAwB,CAAA,CAAA;AAAA,IACzE;AAAA,EACF,CAAA,MAAA,IAAW,KAAK,UAAA,EAAY;AAC1B,IAAA,sBAAA,GAAyB,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,IAAA,CAAK,UAAU,CAAA,CAAA;AAAA,EAChE,CAAA,MAAO;AACL,IAAA,sBAAA,GAAyB,eAAA;AAAA,EAC3B;AAEA,EAAA,OAAO,YAAA,GACH,CAAA,EAAG,sBAAsB,CAAA,MAAA,CAAA,GACzB,sBAAA;AACN,CAAA;AAEO,MAAM,6BAAA,GAAgC,CAC3C,CAAA,EACA,WAAA,GAAc,KAAA,KACsD;AACpE,EAAA,MAAM,cAAA,GAAiB,yBAAA,CAA0B,CAAA,EAAG,WAAW,CAAA;AAE/D,EAAA,IAAI,CAAA,CAAE,QAAA,KAAa,QAAA,CAAS,IAAA,IAAQ,EAAE,KAAA,EAAO;AAC3C,IAAA,OAAO;AAAA,MACL,cAAA;AAAA,MACA,EAAE,GAAG,CAAA,EAAG,KAAA,EAAO,EAAE,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAI,CAAA,CAAE,IAAA,CAAK,EAAE,CAAA;AAAE,KACrD;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
1
+ {"version":3,"file":"generateValidationTranslation.mjs","sources":["../../../../../../../src/components/PasswordCreationField/lib/generateValidationTranslation.ts"],"sourcesContent":["import {\n RuleType,\n type RuleValidationResult,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nconst generateTranslationString = (\n rule: Partial<RuleValidationResult> & { translationKey?: string },\n shortVersion = false,\n): string => {\n if (rule.translationKey) {\n return `validation.${rule.translationKey}`;\n }\n const translateString = `validation.${rule.ruleType ?? \"general\"}`;\n let finalTranslationString = \"\";\n\n if (\n (\"min\" in rule && rule.min !== undefined) ||\n (\"max\" in rule && rule.max !== undefined)\n ) {\n const breakingBoundaryProperty = rule.failingBoundary\n ? rule.failingBoundary\n : rule.min\n ? \"min\"\n : \"max\";\n\n if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}.${breakingBoundaryProperty}`;\n } else {\n finalTranslationString = `${translateString}.${breakingBoundaryProperty}`;\n }\n } else if (rule.identifier) {\n finalTranslationString = `${translateString}.${rule.identifier}`;\n } else {\n finalTranslationString = translateString;\n }\n\n return shortVersion\n ? `${finalTranslationString}.short`\n : finalTranslationString;\n};\n\nexport const generateValidationTranslation = (\n r: Partial<RuleValidationResult>,\n shotVersion = false,\n): [string, Record<string, string | number | boolean> | undefined] => {\n const translationKey = generateTranslationString(r, shotVersion);\n\n if (r.ruleType === RuleType.char && r.chars) {\n return [\n translationKey,\n { ...r, chars: r.chars.map((c) => c.char).join(\"\") },\n ];\n }\n\n return [\n translationKey,\n r as unknown as Record<string, string | number | boolean> | undefined,\n ];\n};\n\nexport default generateValidationTranslation;\n"],"names":[],"mappings":";;;;;;;AAKA,MAAM,yBAAA,GAA4B,CAChC,IAAA,EACA,YAAA,GAAe,KAAA,KACJ;AACX,EAAA,IAAI,KAAK,cAAA,EAAgB;AACvB,IAAA,OAAO,CAAA,WAAA,EAAc,KAAK,cAAc,CAAA,CAAA;AAAA,EAC1C;AACA,EAAA,MAAM,eAAA,GAAkB,CAAA,WAAA,EAAc,IAAA,CAAK,QAAA,IAAY,SAAS,CAAA,CAAA;AAChE,EAAA,IAAI,sBAAA,GAAyB,EAAA;AAE7B,EAAA,IACG,KAAA,IAAS,QAAQ,IAAA,CAAK,GAAA,KAAQ,UAC9B,KAAA,IAAS,IAAA,IAAQ,IAAA,CAAK,GAAA,KAAQ,MAAA,EAC/B;AACA,IAAA,MAAM,2BAA2B,IAAA,CAAK,eAAA,GAClC,KAAK,eAAA,GACL,IAAA,CAAK,MACH,KAAA,GACA,KAAA;AAEN,IAAA,IAAI,KAAK,UAAA,EAAY;AACnB,MAAA,sBAAA,GAAyB,GAAG,eAAe,CAAA,CAAA,EAAI,IAAA,CAAK,UAAU,IAAI,wBAAwB,CAAA,CAAA;AAAA,IAC5F,CAAA,MAAO;AACL,MAAA,sBAAA,GAAyB,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,wBAAwB,CAAA,CAAA;AAAA,IACzE;AAAA,EACF,CAAA,MAAA,IAAW,KAAK,UAAA,EAAY;AAC1B,IAAA,sBAAA,GAAyB,CAAA,EAAG,eAAe,CAAA,CAAA,EAAI,IAAA,CAAK,UAAU,CAAA,CAAA;AAAA,EAChE,CAAA,MAAO;AACL,IAAA,sBAAA,GAAyB,eAAA;AAAA,EAC3B;AAEA,EAAA,OAAO,YAAA,GACH,CAAA,EAAG,sBAAsB,CAAA,MAAA,CAAA,GACzB,sBAAA;AACN,CAAA;AAEO,MAAM,6BAAA,GAAgC,CAC3C,CAAA,EACA,WAAA,GAAc,KAAA,KACsD;AACpE,EAAA,MAAM,cAAA,GAAiB,yBAAA,CAA0B,CAAA,EAAG,WAAW,CAAA;AAE/D,EAAA,IAAI,CAAA,CAAE,QAAA,KAAa,QAAA,CAAS,IAAA,IAAQ,EAAE,KAAA,EAAO;AAC3C,IAAA,OAAO;AAAA,MACL,cAAA;AAAA,MACA,EAAE,GAAG,CAAA,EAAG,KAAA,EAAO,EAAE,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAI,CAAA,CAAE,IAAA,CAAK,EAAE,CAAA;AAAE,KACrD;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
@@ -3,6 +3,7 @@
3
3
  import '../../../integrations/@mittwald/password-tools-js/defaultPasswordCreationPolicy.mjs';
4
4
  import '@mittwald/password-tools-js/policy';
5
5
  import 'remeda';
6
+ import 'react';
6
7
  import '@mittwald/password-tools-js/rules';
7
8
  import '@mittwald/password-tools-js/generator';
8
9
 
@@ -1 +1 @@
1
- {"version":3,"file":"getStateFromLatestPolicyValidationResult.mjs","sources":["../../../../../../../src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.ts"],"sourcesContent":["import { type RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\n\nexport type StateFromLatestPolicyValidationResult =\n | undefined\n | Partial<RuleValidationResult>;\n\n/** @internal */\nexport const getStateFromLatestPolicyValidationResult = (\n isEmptyValue: boolean,\n result: ResolvedPolicyValidationResult,\n): StateFromLatestPolicyValidationResult => {\n if (result.ruleResults.length >= 1) {\n const failingRule = result.ruleResults.find((r) => !r.isValid);\n if (failingRule) {\n return failingRule;\n }\n }\n\n if (result.isValid === \"indeterminate\") {\n return undefined;\n }\n\n if (!isEmptyValue) {\n if (result.complexity.actual < result.complexity.min) {\n return {\n isValid: false,\n identifier: \"failingComplexity\",\n };\n }\n\n if (result.complexity.actual === result.complexity.min) {\n return {\n isValid: result.isValid,\n identifier: \"optimizeComplexity\",\n };\n }\n }\n\n return {\n isValid: true,\n identifier: \"securePassword\",\n };\n};\n\nexport default getStateFromLatestPolicyValidationResult;\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,wCAAA,GAA2C,CACtD,YAAA,EACA,MAAA,KAC0C;AAC1C,EAAA,IAAI,MAAA,CAAO,WAAA,CAAY,MAAA,IAAU,CAAA,EAAG;AAClC,IAAA,MAAM,WAAA,GAAc,OAAO,WAAA,CAAY,IAAA,CAAK,CAAC,CAAA,KAAM,CAAC,EAAE,OAAO,CAAA;AAC7D,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,OAAO,WAAA;AAAA,IACT;AAAA,EACF;AAEA,EAAA,IAAI,MAAA,CAAO,YAAY,eAAA,EAAiB;AACtC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,IAAI,MAAA,CAAO,UAAA,CAAW,MAAA,GAAS,MAAA,CAAO,WAAW,GAAA,EAAK;AACpD,MAAA,OAAO;AAAA,QACL,OAAA,EAAS,KAAA;AAAA,QACT,UAAA,EAAY;AAAA,OACd;AAAA,IACF;AAEA,IAAA,IAAI,MAAA,CAAO,UAAA,CAAW,MAAA,KAAW,MAAA,CAAO,WAAW,GAAA,EAAK;AACtD,MAAA,OAAO;AAAA,QACL,SAAS,MAAA,CAAO,OAAA;AAAA,QAChB,UAAA,EAAY;AAAA,OACd;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,UAAA,EAAY;AAAA,GACd;AACF;;;;"}
1
+ {"version":3,"file":"getStateFromLatestPolicyValidationResult.mjs","sources":["../../../../../../../src/components/PasswordCreationField/lib/getStateFromLatestPolicyValidationResult.ts"],"sourcesContent":["import { type RuleValidationResult } from \"@/integrations/@mittwald/password-tools-js\";\nimport type { ResolvedPolicyValidationResult } from \"@/components/PasswordCreationField/PasswordCreationField\";\n\nexport type StateFromLatestPolicyValidationResult =\n | undefined\n | Partial<RuleValidationResult>;\n\n/** @internal */\nexport const getStateFromLatestPolicyValidationResult = (\n isEmptyValue: boolean,\n result: ResolvedPolicyValidationResult,\n): StateFromLatestPolicyValidationResult => {\n if (result.ruleResults.length >= 1) {\n const failingRule = result.ruleResults.find((r) => !r.isValid);\n if (failingRule) {\n return failingRule;\n }\n }\n\n if (result.isValid === \"indeterminate\") {\n return undefined;\n }\n\n if (!isEmptyValue) {\n if (result.complexity.actual < result.complexity.min) {\n return {\n isValid: false,\n identifier: \"failingComplexity\",\n };\n }\n\n if (result.complexity.actual === result.complexity.min) {\n return {\n isValid: result.isValid,\n identifier: \"optimizeComplexity\",\n };\n }\n }\n\n return {\n isValid: true,\n identifier: \"securePassword\",\n };\n};\n\nexport default getStateFromLatestPolicyValidationResult;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,wCAAA,GAA2C,CACtD,YAAA,EACA,MAAA,KAC0C;AAC1C,EAAA,IAAI,MAAA,CAAO,WAAA,CAAY,MAAA,IAAU,CAAA,EAAG;AAClC,IAAA,MAAM,WAAA,GAAc,OAAO,WAAA,CAAY,IAAA,CAAK,CAAC,CAAA,KAAM,CAAC,EAAE,OAAO,CAAA;AAC7D,IAAA,IAAI,WAAA,EAAa;AACf,MAAA,OAAO,WAAA;AAAA,IACT;AAAA,EACF;AAEA,EAAA,IAAI,MAAA,CAAO,YAAY,eAAA,EAAiB;AACtC,IAAA,OAAO,MAAA;AAAA,EACT;AAEA,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,IAAI,MAAA,CAAO,UAAA,CAAW,MAAA,GAAS,MAAA,CAAO,WAAW,GAAA,EAAK;AACpD,MAAA,OAAO;AAAA,QACL,OAAA,EAAS,KAAA;AAAA,QACT,UAAA,EAAY;AAAA,OACd;AAAA,IACF;AAEA,IAAA,IAAI,MAAA,CAAO,UAAA,CAAW,MAAA,KAAW,MAAA,CAAO,WAAW,GAAA,EAAK;AACtD,MAAA,OAAO;AAAA,QACL,SAAS,MAAA,CAAO,OAAA;AAAA,QAChB,UAAA,EAAY;AAAA,OACd;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,OAAA,EAAS,IAAA;AAAA,IACT,UAAA,EAAY;AAAA,GACd;AACF;;;;"}
@@ -3,6 +3,7 @@
3
3
  import '../../../integrations/@mittwald/password-tools-js/defaultPasswordCreationPolicy.mjs';
4
4
  import '@mittwald/password-tools-js/policy';
5
5
  import 'remeda';
6
+ import 'react';
6
7
  import '@mittwald/password-tools-js/rules';
7
8
  import { Generator } from '@mittwald/password-tools-js/generator';
8
9
 
@@ -1 +1 @@
1
- {"version":3,"file":"generatePassword.mjs","sources":["../../../../../../../src/components/PasswordCreationField/worker/generatePassword.ts"],"sourcesContent":["import {\n Generator,\n type Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nexport const generatePassword = async (\n validationPolicy: Policy,\n): Promise<string> => {\n return new Generator(validationPolicy).generatePassword();\n};\n"],"names":[],"mappings":";;;;;;AAKO,MAAM,gBAAA,GAAmB,OAC9B,gBAAA,KACoB;AACpB,EAAA,OAAO,IAAI,SAAA,CAAU,gBAAgB,CAAA,CAAE,gBAAA,EAAiB;AAC1D;;;;"}
1
+ {"version":3,"file":"generatePassword.mjs","sources":["../../../../../../../src/components/PasswordCreationField/worker/generatePassword.ts"],"sourcesContent":["import {\n Generator,\n type Policy,\n} from \"@/integrations/@mittwald/password-tools-js\";\n\nexport const generatePassword = async (\n validationPolicy: Policy,\n): Promise<string> => {\n return new Generator(validationPolicy).generatePassword();\n};\n"],"names":[],"mappings":";;;;;;;AAKO,MAAM,gBAAA,GAAmB,OAC9B,gBAAA,KACoB;AACpB,EAAA,OAAO,IAAI,SAAA,CAAU,gBAAgB,CAAA,CAAE,gBAAA,EAAiB;AAC1D;;;;"}
@@ -1,63 +1,65 @@
1
1
  "use client"
2
2
  /* */
3
- import { jsxs, jsx } from 'react/jsx-runtime';
3
+ import { jsx, jsxs } from 'react/jsx-runtime';
4
4
  import styles from './RadioGroup.module.scss.mjs';
5
5
  import * as Aria from 'react-aria-components';
6
6
  import clsx from 'clsx';
7
7
  import '../../lib/propsContext/propsContext.mjs';
8
8
  import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
9
- import { FieldError } from '../FieldError/FieldError.mjs';
10
9
  import { ColumnLayout } from '../ColumnLayout/ColumnLayout.mjs';
11
10
  import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
12
11
  import formFieldStyles from '../FormField/FormField.module.scss.mjs';
13
12
  import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
14
13
  import { useObjectRef } from '@react-aria/utils';
15
14
  import { useMakeFocusable } from '../../lib/hooks/dom/useMakeFocusable.mjs';
15
+ import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
16
16
 
17
17
  const RadioGroup = flowComponent("RadioGroup", (props) => {
18
18
  const { children, className, s, m, l, ref, ...rest } = props;
19
+ const {
20
+ FieldErrorView,
21
+ FieldErrorResetContext,
22
+ fieldProps,
23
+ fieldPropsContext
24
+ } = useFieldComponent(props);
19
25
  const rootClassName = clsx(formFieldStyles.formField, className);
20
26
  const propsContext = {
21
- Label: {
22
- className: formFieldStyles.label
23
- },
24
- FieldDescription: {
25
- className: formFieldStyles.fieldDescription,
26
- tunnelId: "fieldDescription"
27
- },
28
- FieldError: {
29
- className: formFieldStyles.customFieldError,
30
- tunnelId: "fieldError"
31
- },
32
27
  RadioButton: {
33
28
  tunnelId: "radioButtons"
34
29
  },
35
30
  Radio: {
36
31
  tunnelId: "radios"
37
- }
32
+ },
33
+ ...fieldPropsContext
38
34
  };
39
35
  const localRadioRef = useObjectRef(ref);
40
36
  useMakeFocusable(localRadioRef);
41
- return /* @__PURE__ */ jsxs(Aria.RadioGroup, { ...rest, className: rootClassName, ref: localRadioRef, children: [
42
- /* @__PURE__ */ jsx(PropsContextProvider, { dependencies: ["radio"], props: propsContext, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
43
- children,
44
- /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.radioGroup, children: /* @__PURE__ */ jsx(TunnelExit, { id: "radioButtons" }) }),
45
- /* @__PURE__ */ jsx(
46
- ColumnLayout,
47
- {
48
- s: s ?? [1],
49
- m: m ?? [1],
50
- l: l ?? [1],
51
- rowGap: "s",
52
- className: styles.radioGroup,
53
- children: /* @__PURE__ */ jsx(TunnelExit, { id: "radios" })
54
- }
55
- ),
56
- /* @__PURE__ */ jsx(TunnelExit, { id: "fieldDescription" }),
57
- /* @__PURE__ */ jsx(TunnelExit, { id: "fieldError" })
58
- ] }) }),
59
- /* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError })
60
- ] });
37
+ return /* @__PURE__ */ jsx(
38
+ Aria.RadioGroup,
39
+ {
40
+ ...rest,
41
+ className: clsx(rootClassName, fieldProps.className),
42
+ ref: localRadioRef,
43
+ children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
44
+ /* @__PURE__ */ jsx(FieldErrorResetContext, { children: /* @__PURE__ */ jsxs(PropsContextProvider, { dependencies: ["radio"], props: propsContext, children: [
45
+ /* @__PURE__ */ jsx(ColumnLayout, { s, m, l, className: styles.radioGroup, children: /* @__PURE__ */ jsx(TunnelExit, { id: "radioButtons" }) }),
46
+ /* @__PURE__ */ jsx(
47
+ ColumnLayout,
48
+ {
49
+ s: s ?? [1],
50
+ m: m ?? [1],
51
+ l: l ?? [1],
52
+ rowGap: "s",
53
+ className: styles.radioGroup,
54
+ children: /* @__PURE__ */ jsx(TunnelExit, { id: "radios" })
55
+ }
56
+ ),
57
+ children
58
+ ] }) }),
59
+ /* @__PURE__ */ jsx(FieldErrorView, {})
60
+ ] })
61
+ }
62
+ );
61
63
  });
62
64
 
63
65
  export { RadioGroup, RadioGroup as default };
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.mjs","sources":["../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { FieldError } from \"@/components/FieldError\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\n\nexport interface RadioGroupProps\n extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n FlowComponentProps,\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n const { children, className, s, m, l, ref, ...rest } = props;\n\n const rootClassName = clsx(formFieldStyles.formField, className);\n\n const propsContext: PropsContext = {\n Label: {\n className: formFieldStyles.label,\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n tunnelId: \"fieldDescription\",\n },\n FieldError: {\n className: formFieldStyles.customFieldError,\n tunnelId: \"fieldError\",\n },\n RadioButton: {\n tunnelId: \"radioButtons\",\n },\n Radio: {\n tunnelId: \"radios\",\n },\n };\n\n const localRadioRef = useObjectRef(ref);\n useMakeFocusable(localRadioRef);\n\n return (\n <Aria.RadioGroup {...rest} className={rootClassName} ref={localRadioRef}>\n <PropsContextProvider dependencies={[\"radio\"]} props={propsContext}>\n <TunnelProvider>\n {children}\n\n <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n <TunnelExit id=\"radioButtons\" />\n </ColumnLayout>\n\n <ColumnLayout\n s={s ?? [1]}\n m={m ?? [1]}\n l={l ?? [1]}\n rowGap=\"s\"\n className={styles.radioGroup}\n >\n <TunnelExit id=\"radios\" />\n </ColumnLayout>\n\n <TunnelExit id=\"fieldDescription\" />\n <TunnelExit id=\"fieldError\" />\n </TunnelProvider>\n </PropsContextProvider>\n <FieldError className={formFieldStyles.fieldError} />\n </Aria.RadioGroup>\n );\n});\n\nexport default RadioGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAEvD,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,eAAA,CAAgB,SAAA,EAAW,SAAS,CAAA;AAE/D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAW,eAAA,CAAgB;AAAA,KAC7B;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAW,eAAA,CAAgB,gBAAA;AAAA,MAC3B,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAW,eAAA,CAAgB,gBAAA;AAAA,MAC3B,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,WAAA,EAAa;AAAA,MACX,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU;AAAA;AACZ,GACF;AAEA,EAAA,MAAM,aAAA,GAAgB,aAAa,GAAG,CAAA;AACtC,EAAA,gBAAA,CAAiB,aAAa,CAAA;AAE9B,EAAA,uBACE,IAAA,CAAC,KAAK,UAAA,EAAL,EAAiB,GAAG,IAAA,EAAM,SAAA,EAAW,aAAA,EAAe,GAAA,EAAK,aAAA,EACxD,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,cAAc,CAAC,OAAO,GAAG,KAAA,EAAO,YAAA,EACpD,+BAAC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBAED,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,UAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,cAAA,EAAe,CAAA,EAChC,CAAA;AAAA,sBAEA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,UACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,UACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,UACV,MAAA,EAAO,GAAA;AAAA,UACP,WAAW,MAAA,CAAO,UAAA;AAAA,UAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,QAAA,EAAS;AAAA;AAAA,OAC1B;AAAA,sBAEA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,kBAAA,EAAmB,CAAA;AAAA,sBAClC,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,YAAA,EAAa;AAAA,KAAA,EAC9B,CAAA,EACF,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,eAAA,CAAgB,UAAA,EAAY;AAAA,GAAA,EACrD,CAAA;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"RadioGroup.mjs","sources":["../../../../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./RadioGroup.module.scss\";\nimport * as Aria from \"react-aria-components\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { ColumnLayoutProps } from \"@/components/ColumnLayout\";\nimport { ColumnLayout } from \"@/components/ColumnLayout\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useMakeFocusable } from \"@/lib/hooks/dom/useMakeFocusable\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface RadioGroupProps\n extends PropsWithChildren<Omit<Aria.RadioGroupProps, \"children\">>,\n FlowComponentProps,\n Pick<ColumnLayoutProps, \"s\" | \"m\" | \"l\"> {}\n\n/** @flr-generate all */\nexport const RadioGroup = flowComponent(\"RadioGroup\", (props) => {\n const { children, className, s, m, l, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorResetContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props);\n\n const rootClassName = clsx(formFieldStyles.formField, className);\n const propsContext: PropsContext = {\n RadioButton: {\n tunnelId: \"radioButtons\",\n },\n Radio: {\n tunnelId: \"radios\",\n },\n ...fieldPropsContext,\n };\n\n const localRadioRef = useObjectRef(ref);\n useMakeFocusable(localRadioRef);\n\n return (\n <Aria.RadioGroup\n {...rest}\n className={clsx(rootClassName, fieldProps.className)}\n ref={localRadioRef}\n >\n <TunnelProvider>\n <FieldErrorResetContext>\n <PropsContextProvider dependencies={[\"radio\"]} props={propsContext}>\n <ColumnLayout s={s} m={m} l={l} className={styles.radioGroup}>\n <TunnelExit id=\"radioButtons\" />\n </ColumnLayout>\n\n <ColumnLayout\n s={s ?? [1]}\n m={m ?? [1]}\n l={l ?? [1]}\n rowGap=\"s\"\n className={styles.radioGroup}\n >\n <TunnelExit id=\"radios\" />\n </ColumnLayout>\n\n {children}\n </PropsContextProvider>\n </FieldErrorResetContext>\n <FieldErrorView />\n </TunnelProvider>\n </Aria.RadioGroup>\n );\n});\n\nexport default RadioGroup;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBO,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,EAAc,CAAC,KAAA,KAAU;AAC/D,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,CAAA,EAAG,GAAG,CAAA,EAAG,GAAA,EAAK,GAAG,IAAA,EAAK,GAAI,KAAA;AAEvD,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,eAAA,CAAgB,SAAA,EAAW,SAAS,CAAA;AAC/D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,WAAA,EAAa;AAAA,MACX,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,KAAA,EAAO;AAAA,MACL,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,aAAA,GAAgB,aAAa,GAAG,CAAA;AACtC,EAAA,gBAAA,CAAiB,aAAa,CAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA,CAAK,UAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MACnD,GAAA,EAAK,aAAA;AAAA,MAEL,+BAAC,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,sBAAA,EAAA,EACC,+BAAC,oBAAA,EAAA,EAAqB,YAAA,EAAc,CAAC,OAAO,CAAA,EAAG,OAAO,YAAA,EACpD,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA,EAAM,CAAA,EAAM,CAAA,EAAM,SAAA,EAAW,MAAA,CAAO,UAAA,EAChD,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,cAAA,EAAe,CAAA,EAChC,CAAA;AAAA,0BAEA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,CAAA,EAAG,CAAA,IAAK,CAAC,CAAC,CAAA;AAAA,cACV,MAAA,EAAO,GAAA;AAAA,cACP,WAAW,MAAA,CAAO,UAAA;AAAA,cAElB,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAG,QAAA,EAAS;AAAA;AAAA,WAC1B;AAAA,UAEC;AAAA,SAAA,EACH,CAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA,OAAA,EAClB;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}
@@ -7,7 +7,6 @@ import styles from './SearchField.module.scss.mjs';
7
7
  import clsx from 'clsx';
8
8
  import '../../lib/propsContext/propsContext.mjs';
9
9
  import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
10
- import { FieldError } from '../FieldError/FieldError.mjs';
11
10
  import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
12
11
  import { Button } from '../Button/Button.mjs';
13
12
  import 'react';
@@ -19,9 +18,16 @@ import { IconSearch } from '../Icon/components/icons/IconSearch.mjs';
19
18
  import locales from '../../../../_virtual/_.locale.json@e940efc6da10fdf09417eb079b65a343.mjs';
20
19
  import { useLocalizedStringFormatter } from 'react-aria';
21
20
  import { ReactAriaControlledValueFix } from '../../lib/react/ReactAriaControlledValueFix.mjs';
21
+ import { useFieldComponent } from '../../lib/hooks/useFieldComponent.mjs';
22
22
 
23
23
  const SearchField = flowComponent("SearchField", (props) => {
24
24
  const { children, className, ref, ...rest } = props;
25
+ const {
26
+ FieldErrorView,
27
+ FieldErrorResetContext,
28
+ fieldProps,
29
+ fieldPropsContext
30
+ } = useFieldComponent(props);
25
31
  const rootClassName = clsx(
26
32
  formFieldStyles.formField,
27
33
  styles.searchField,
@@ -29,26 +35,15 @@ const SearchField = flowComponent("SearchField", (props) => {
29
35
  );
30
36
  const stringFormatter = useLocalizedStringFormatter(locales);
31
37
  const searchText = stringFormatter.format(`searchField.search`);
32
- const propsContext = {
33
- Label: {
34
- className: formFieldStyles.label,
35
- optional: !props.isRequired
36
- },
37
- FieldDescription: {
38
- className: formFieldStyles.fieldDescription
39
- },
40
- FieldError: {
41
- className: formFieldStyles.customFieldError
42
- }
43
- };
44
38
  return /* @__PURE__ */ jsxs(
45
39
  Aria.SearchField,
46
40
  {
47
- "aria-label": searchText,
48
41
  ...rest,
49
- className: rootClassName,
42
+ ...fieldProps,
43
+ "aria-label": searchText,
44
+ className: clsx(rootClassName, fieldProps.className),
50
45
  children: [
51
- /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children }),
46
+ /* @__PURE__ */ jsx(PropsContextProvider, { props: fieldPropsContext, children: /* @__PURE__ */ jsx(FieldErrorResetContext, { children }) }),
52
47
  /* @__PURE__ */ jsxs("div", { className: styles.inputContainer, children: [
53
48
  /* @__PURE__ */ jsx(IconSearch, { className: styles.searchIcon }),
54
49
  /* @__PURE__ */ jsx(
@@ -76,7 +71,7 @@ const SearchField = flowComponent("SearchField", (props) => {
76
71
  }
77
72
  )
78
73
  ] }),
79
- /* @__PURE__ */ jsx(FieldError, { className: formFieldStyles.fieldError })
74
+ /* @__PURE__ */ jsx(FieldErrorView, {})
80
75
  ]
81
76
  }
82
77
  );
@@ -1 +1 @@
1
- {"version":3,"file":"SearchField.mjs","sources":["../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport type { PropsContext } from \"@/lib/propsContext\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport { FieldError } from \"@/components/FieldError\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\n\nexport interface SearchFieldProps\n extends PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const rootClassName = clsx(\n formFieldStyles.formField,\n styles.searchField,\n className,\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n\n const searchText = stringFormatter.format(`searchField.search`);\n\n const propsContext: PropsContext = {\n Label: {\n className: formFieldStyles.label,\n optional: !props.isRequired,\n },\n FieldDescription: {\n className: formFieldStyles.fieldDescription,\n },\n FieldError: {\n className: formFieldStyles.customFieldError,\n },\n };\n\n return (\n <Aria.SearchField\n aria-label={searchText}\n {...rest}\n className={rootClassName}\n >\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n <div className={styles.inputContainer}>\n <IconSearch className={styles.searchIcon} />\n <ReactAriaControlledValueFix\n inputContext={Aria.InputContext}\n props={props}\n >\n <Aria.Input\n placeholder={searchText}\n className={styles.input}\n ref={ref}\n />\n </ReactAriaControlledValueFix>\n <Button\n className={styles.clearButton}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconClose />\n </Button>\n </div>\n <FieldError className={formFieldStyles.fieldError} />\n </Aria.SearchField>\n );\n});\n\nexport default SearchField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,WAAA;AAAA,IACP;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAE3D,EAAA,MAAM,UAAA,GAAa,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,CAAoB,CAAA;AAE9D,EAAA,MAAM,YAAA,GAA6B;AAAA,IACjC,KAAA,EAAO;AAAA,MACL,WAAW,eAAA,CAAgB,KAAA;AAAA,MAC3B,QAAA,EAAU,CAAC,KAAA,CAAM;AAAA,KACnB;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,WAAW,eAAA,CAAgB;AAAA,KAC7B;AAAA,IACA,UAAA,EAAY;AAAA,MACV,WAAW,eAAA,CAAgB;AAAA;AAC7B,GACF;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACC,YAAA,EAAY,UAAA;AAAA,MACX,GAAG,IAAA;AAAA,MACJ,SAAA,EAAW,aAAA;AAAA,MAEX,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,oBAAA,EAAA,EAAqB,KAAA,EAAO,YAAA,EAC1B,QAAA,EACH,CAAA;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,MAAA,CAAO,UAAA,EAAY,CAAA;AAAA,0BAC1C,GAAA;AAAA,YAAC,2BAAA;AAAA,YAAA;AAAA,cACC,cAAc,IAAA,CAAK,YAAA;AAAA,cACnB,KAAA;AAAA,cAEA,QAAA,kBAAA,GAAA;AAAA,gBAAC,IAAA,CAAK,KAAA;AAAA,gBAAL;AAAA,kBACC,WAAA,EAAa,UAAA;AAAA,kBACb,WAAW,MAAA,CAAO,KAAA;AAAA,kBAClB;AAAA;AAAA;AACF;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAA,CAAO,WAAA;AAAA,cAClB,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,eAAA,CAAgB,UAAA,EAAY;AAAA;AAAA;AAAA,GACrD;AAEJ,CAAC;;;;"}
1
+ {"version":3,"file":"SearchField.mjs","sources":["../../../../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport formFieldStyles from \"../FormField/FormField.module.scss\";\nimport styles from \"./SearchField.module.scss\";\nimport clsx from \"clsx\";\nimport { PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose, IconSearch } from \"@/components/Icon/components/icons\";\nimport locales from \"./locales/*.locale.json\";\nimport { useLocalizedStringFormatter } from \"react-aria\";\nimport { ReactAriaControlledValueFix } from \"@/lib/react/ReactAriaControlledValueFix\";\nimport { useFieldComponent } from \"@/lib/hooks/useFieldComponent\";\n\nexport interface SearchFieldProps\n extends PropsWithChildren<Omit<Aria.SearchFieldProps, \"children\">>,\n FlowComponentProps<HTMLInputElement> {}\n\n/** @flr-generate all */\nexport const SearchField = flowComponent(\"SearchField\", (props) => {\n const { children, className, ref, ...rest } = props;\n\n const {\n FieldErrorView,\n FieldErrorResetContext,\n fieldProps,\n fieldPropsContext,\n } = useFieldComponent(props);\n\n const rootClassName = clsx(\n formFieldStyles.formField,\n styles.searchField,\n className,\n );\n\n const stringFormatter = useLocalizedStringFormatter(locales);\n const searchText = stringFormatter.format(`searchField.search`);\n\n return (\n <Aria.SearchField\n {...rest}\n {...fieldProps}\n aria-label={searchText}\n className={clsx(rootClassName, fieldProps.className)}\n >\n <PropsContextProvider props={fieldPropsContext}>\n <FieldErrorResetContext>{children}</FieldErrorResetContext>\n </PropsContextProvider>\n <div className={styles.inputContainer}>\n <IconSearch className={styles.searchIcon} />\n <ReactAriaControlledValueFix\n inputContext={Aria.InputContext}\n props={props}\n >\n <Aria.Input\n placeholder={searchText}\n className={styles.input}\n ref={ref}\n />\n </ReactAriaControlledValueFix>\n <Button\n className={styles.clearButton}\n variant=\"plain\"\n color=\"secondary\"\n >\n <IconClose />\n </Button>\n </div>\n <FieldErrorView />\n </Aria.SearchField>\n );\n});\n\nexport default SearchField;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,WAAA,GAAc,aAAA,CAAc,aAAA,EAAe,CAAC,KAAA,KAAU;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAE9C,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,sBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,kBAAkB,KAAK,CAAA;AAE3B,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,eAAA,CAAgB,SAAA;AAAA,IAChB,MAAA,CAAO,WAAA;AAAA,IACP;AAAA,GACF;AAEA,EAAA,MAAM,eAAA,GAAkB,4BAA4B,OAAO,CAAA;AAC3D,EAAA,MAAM,UAAA,GAAa,eAAA,CAAgB,MAAA,CAAO,CAAA,kBAAA,CAAoB,CAAA;AAE9D,EAAA,uBACE,IAAA;AAAA,IAAC,IAAA,CAAK,WAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACH,GAAG,UAAA;AAAA,MACJ,YAAA,EAAY,UAAA;AAAA,MACZ,SAAA,EAAW,IAAA,CAAK,aAAA,EAAe,UAAA,CAAW,SAAS,CAAA;AAAA,MAEnD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,wBAAqB,KAAA,EAAO,iBAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,sBAAA,EAAA,EAAwB,UAAS,CAAA,EACpC,CAAA;AAAA,wBACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAA,EACrB,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,UAAA,EAAA,EAAW,SAAA,EAAW,MAAA,CAAO,UAAA,EAAY,CAAA;AAAA,0BAC1C,GAAA;AAAA,YAAC,2BAAA;AAAA,YAAA;AAAA,cACC,cAAc,IAAA,CAAK,YAAA;AAAA,cACnB,KAAA;AAAA,cAEA,QAAA,kBAAA,GAAA;AAAA,gBAAC,IAAA,CAAK,KAAA;AAAA,gBAAL;AAAA,kBACC,WAAA,EAAa,UAAA;AAAA,kBACb,WAAW,MAAA,CAAO,KAAA;AAAA,kBAClB;AAAA;AAAA;AACF;AAAA,WACF;AAAA,0BACA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,MAAA,CAAO,WAAA;AAAA,cAClB,OAAA,EAAQ,OAAA;AAAA,cACR,KAAA,EAAM,WAAA;AAAA,cAEN,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA;AACb,SAAA,EACF,CAAA;AAAA,4BACC,cAAA,EAAA,EAAe;AAAA;AAAA;AAAA,GAClB;AAEJ,CAAC;;;;"}