@innspel/react-native 0.4.1 → 0.5.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.
Files changed (8) hide show
  1. package/README.md +13 -3
  2. package/dist/index.cjs +418 -373
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +20 -2
  5. package/dist/index.d.ts +20 -2
  6. package/dist/index.js +428 -383
  7. package/dist/index.js.map +1 -1
  8. package/package.json +5 -3
package/dist/index.cjs CHANGED
@@ -143,6 +143,7 @@ var t = {
143
143
  pill: 999
144
144
  },
145
145
  font: {
146
+ display: 40,
146
147
  h1: 24,
147
148
  h2: 21,
148
149
  h3: 18,
@@ -151,6 +152,7 @@ var t = {
151
152
  tiny: 11
152
153
  },
153
154
  lineHeight: {
155
+ display: 48,
154
156
  h1: 30,
155
157
  h2: 27,
156
158
  h3: 24,
@@ -169,6 +171,7 @@ var t = {
169
171
  base: 200,
170
172
  slow: 320
171
173
  },
174
+ icon: { inline: 20, minste: 16 },
172
175
  touch: 48,
173
176
  screenPadding: 24,
174
177
  hairline: 1
@@ -227,6 +230,7 @@ var light = {
227
230
  pill: 999
228
231
  },
229
232
  font: {
233
+ display: 40,
230
234
  h1: 24,
231
235
  h2: 21,
232
236
  h3: 18,
@@ -235,6 +239,7 @@ var light = {
235
239
  tiny: 11
236
240
  },
237
241
  lineHeight: {
242
+ display: 48,
238
243
  h1: 30,
239
244
  h2: 27,
240
245
  h3: 24,
@@ -253,6 +258,7 @@ var light = {
253
258
  base: 200,
254
259
  slow: 320
255
260
  },
261
+ icon: { inline: 20, minste: 16 },
256
262
  touch: 48,
257
263
  screenPadding: 24,
258
264
  hairline: 1
@@ -286,6 +292,7 @@ function useTema() {
286
292
  var import_core2 = require("@innspel/core");
287
293
  var import_react10 = require("react");
288
294
  var import_react_native9 = require("react-native");
295
+ var import_react_native_safe_area_context = require("react-native-safe-area-context");
289
296
 
290
297
  // src/widget/Felt.tsx
291
298
  var import_react4 = require("react");
@@ -506,7 +513,13 @@ var tekst = {
506
513
  rettesI: (versjon) => `Rettes i ${versjon}`,
507
514
  rettetI: (versjon) => `Rettet i ${versjon}`,
508
515
  // 2d + 2e — feltet og kontekstlinja
509
- feltLabelFeil: "Din feil",
516
+ /**
517
+ * «Ditt innspill», ikke «Din feil» (DD-54). «Din» festet saken til personen, og
518
+ * «feil» karakteriserte den før noen hadde lest den — innsenderen leste det som
519
+ * skyld. Ønskesporet beholder «Ditt ønske»: et ønske er ingen feil, og der finnes
520
+ * ikke problemet. De to står aldri ved siden av hverandre; sporet velges før dette.
521
+ */
522
+ feltLabelFeil: "Ditt innspill",
510
523
  feltLabelOnske: "Ditt \xF8nske",
511
524
  /** DD-45: to spørsmål i feilsporet. Kilde: Sentry «What's the bug? What did you expect?» */
512
525
  placeholderFeil: "Hva skjedde? Hva forventet du?",
@@ -705,229 +718,240 @@ function Felt({
705
718
  return verdi2 && !fjernedeFelter.includes(felt) ? { felt, etikett, verdi: verdi2 } : null;
706
719
  }).filter((x) => x !== null);
707
720
  }, [kontekst, fjernedeFelter]);
708
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { flex: 1, gap: tema.space.md }, children: [
709
- lenketTil ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
710
- import_react_native3.View,
721
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { testID: "skjema", style: { flexGrow: 1, flexShrink: 1, gap: tema.space.md }, children: [
722
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
723
+ import_react_native3.ScrollView,
711
724
  {
712
- style: {
713
- flexDirection: "row",
714
- alignItems: "center",
715
- gap: tema.space.sm,
716
- minHeight: tema.touch,
717
- borderWidth: tema.hairline,
718
- borderColor: tema.color.borderInteractive,
719
- borderRadius: tema.radius.pill,
720
- paddingLeft: tema.space.md,
721
- paddingRight: tema.space.xs
722
- },
725
+ testID: "skjema-kropp",
726
+ style: { flexGrow: 0, flexShrink: 1 },
727
+ contentContainerStyle: { gap: tema.space.md },
728
+ keyboardShouldPersistTaps: "handled",
723
729
  children: [
724
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: tekst.lenketTil(lenketTil.title) }),
725
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
726
- import_react_native3.Pressable,
730
+ lenketTil ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
731
+ import_react_native3.View,
727
732
  {
728
- testID: "fjern-lenke",
729
- accessibilityRole: "button",
730
- accessibilityLabel: tekst.fjernLenke,
731
- onPress: onFjernLenke,
732
- style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
733
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: "\u2715" })
733
+ style: {
734
+ flexDirection: "row",
735
+ alignItems: "center",
736
+ gap: tema.space.sm,
737
+ minHeight: tema.touch,
738
+ borderWidth: tema.hairline,
739
+ borderColor: tema.color.borderInteractive,
740
+ borderRadius: tema.radius.pill,
741
+ paddingLeft: tema.space.md,
742
+ paddingRight: tema.space.xs
743
+ },
744
+ children: [
745
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: tekst.lenketTil(lenketTil.title) }),
746
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
747
+ import_react_native3.Pressable,
748
+ {
749
+ testID: "fjern-lenke",
750
+ accessibilityRole: "button",
751
+ accessibilityLabel: tekst.fjernLenke,
752
+ onPress: onFjernLenke,
753
+ style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
754
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: "\u2715" })
755
+ }
756
+ )
757
+ ]
734
758
  }
735
- )
736
- ]
737
- }
738
- ) : null,
739
- uavklart ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
740
- import_react_native3.View,
741
- {
742
- style: {
743
- gap: tema.space.sm,
744
- backgroundColor: tema.color.warningBg,
745
- borderRadius: tema.radius.md,
746
- padding: tema.space.md
747
- },
748
- children: [
759
+ ) : null,
760
+ uavklart ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
761
+ import_react_native3.View,
762
+ {
763
+ style: {
764
+ gap: tema.space.sm,
765
+ backgroundColor: tema.color.warningBg,
766
+ borderRadius: tema.radius.md,
767
+ padding: tema.space.md
768
+ },
769
+ children: [
770
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
771
+ import_react_native3.Text,
772
+ {
773
+ accessibilityRole: "alert",
774
+ accessibilityLiveRegion: "polite",
775
+ style: {
776
+ color: tema.color.warning,
777
+ fontSize: tema.font.small,
778
+ lineHeight: tema.lineHeight.small,
779
+ fontWeight: tema.weight.medium
780
+ },
781
+ children: tekst.monsterSpm[uavklart.kind]
782
+ }
783
+ ),
784
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
785
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
786
+ Btn,
787
+ {
788
+ grow: true,
789
+ variant: "secondary",
790
+ testID: "monster-fjern",
791
+ label: tekst.monsterFjern,
792
+ onPress: () => onEndre(verdi.slice(0, uavklart.start) + verdi.slice(uavklart.end))
793
+ }
794
+ ),
795
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
796
+ Btn,
797
+ {
798
+ grow: true,
799
+ variant: "ghost",
800
+ testID: "monster-behold",
801
+ label: tekst.monsterBehold,
802
+ onPress: () => setBeholdt((b) => [...b, uavklart.match])
803
+ }
804
+ )
805
+ ] }),
806
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Hint, { children: tekst.monsterForklaring })
807
+ ]
808
+ }
809
+ ) : null,
810
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(H, { children: spor === "onske" ? tekst.feltLabelOnske : tekst.feltLabelFeil }),
749
811
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
812
+ import_react_native3.TextInput,
813
+ {
814
+ testID: "innspill-tekst",
815
+ accessibilityLabel: spor === "onske" ? tekst.feltLabelOnske : tekst.feltLabelFeil,
816
+ value: verdi,
817
+ onChangeText: onEndre,
818
+ maxLength: textMaxLength,
819
+ multiline: true,
820
+ numberOfLines: 4,
821
+ placeholder: spor === "onske" ? tekst.placeholderOnske : tekst.placeholderFeil,
822
+ placeholderTextColor: tema.color.textMuted,
823
+ style: {
824
+ backgroundColor: tema.color.surfaceRaised,
825
+ borderWidth: tema.hairline,
826
+ borderColor: full ? tema.color.warning : tema.color.borderStrong,
827
+ borderRadius: tema.radius.md,
828
+ padding: tema.space.md,
829
+ color: tema.color.textPrimary,
830
+ fontSize: tema.font.body,
831
+ lineHeight: tema.lineHeight.body,
832
+ minHeight: tema.touch * 2,
833
+ textAlignVertical: "top"
834
+ }
835
+ }
836
+ ),
837
+ visTeller ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
750
838
  import_react_native3.Text,
751
839
  {
752
- accessibilityRole: "alert",
753
- accessibilityLiveRegion: "polite",
840
+ testID: "teller",
841
+ accessibilityLiveRegion: full ? "assertive" : "polite",
754
842
  style: {
755
- color: tema.color.warning,
756
- fontSize: tema.font.small,
757
- lineHeight: tema.lineHeight.small,
758
- fontWeight: tema.weight.medium
843
+ alignSelf: "flex-end",
844
+ color: full ? tema.color.warning : tema.color.textMuted,
845
+ fontSize: tema.font.small
759
846
  },
760
- children: tekst.monsterSpm[uavklart.kind]
847
+ children: [
848
+ brukt,
849
+ " / ",
850
+ textMaxLength,
851
+ full ? tekst.tellerFull : ""
852
+ ]
761
853
  }
762
- ),
763
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
854
+ ) : null,
855
+ harVedlegg ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
856
+ import_react_native3.View,
857
+ {
858
+ testID: "vedlegg-chip",
859
+ style: {
860
+ flexDirection: "row",
861
+ alignItems: "center",
862
+ gap: tema.space.sm,
863
+ minHeight: tema.touch,
864
+ borderWidth: tema.hairline,
865
+ borderColor: tema.color.borderInteractive,
866
+ borderRadius: tema.radius.pill,
867
+ paddingLeft: tema.space.md,
868
+ paddingRight: tema.space.xs
869
+ },
870
+ children: [
871
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.small }, children: "\u{1F4F7}" }),
872
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: tekst.skjermbildeLagtVed }),
873
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
874
+ import_react_native3.Pressable,
875
+ {
876
+ testID: "fjern-vedlegg",
877
+ accessibilityRole: "button",
878
+ accessibilityLabel: tekst.fjernSkjermbilde,
879
+ onPress: onFjernVedlegg,
880
+ style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
881
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: "\u2715" })
882
+ }
883
+ )
884
+ ]
885
+ }
886
+ ) : onSkjermbilde ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
887
+ Btn,
888
+ {
889
+ variant: "secondary",
890
+ testID: "legg-ved-skjermbilde",
891
+ ikon: "\u{1F4F7}",
892
+ label: tekst.leggVedSkjermbilde,
893
+ hint: tekst.leggVedHint,
894
+ onPress: onSkjermbilde
895
+ }
896
+ ) : null,
897
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { borderTopWidth: tema.hairline, borderTopColor: tema.color.border, paddingTop: tema.space.sm }, children: [
764
898
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
765
- Btn,
899
+ import_react_native3.Pressable,
766
900
  {
767
- grow: true,
768
- variant: "secondary",
769
- testID: "monster-fjern",
770
- label: tekst.monsterFjern,
771
- onPress: () => onEndre(verdi.slice(0, uavklart.start) + verdi.slice(uavklart.end))
901
+ testID: "kontekst-bryter",
902
+ accessibilityRole: "button",
903
+ accessibilityState: { expanded: apen },
904
+ accessibilityLabel: `${tekst.kontekstLinje}${apen ? "" : tekst.kontekstVis}`,
905
+ onPress: () => setApen((a) => !a),
906
+ style: { minHeight: tema.touch, justifyContent: "center" },
907
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: [
908
+ apen ? "\u25B4" : "\u25BE",
909
+ " ",
910
+ tekst.kontekstLinje,
911
+ apen ? "" : tekst.kontekstVis
912
+ ] })
772
913
  }
773
914
  ),
774
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
775
- Btn,
776
- {
777
- grow: true,
778
- variant: "ghost",
779
- testID: "monster-behold",
780
- label: tekst.monsterBehold,
781
- onPress: () => setBeholdt((b) => [...b, uavklart.match])
782
- }
783
- )
784
- ] }),
785
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Hint, { children: tekst.monsterForklaring })
915
+ apen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { children: [
916
+ linjer.map((l) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
917
+ import_react_native3.View,
918
+ {
919
+ style: {
920
+ flexDirection: "row",
921
+ alignItems: "center",
922
+ gap: tema.space.sm,
923
+ minHeight: tema.touch,
924
+ borderBottomWidth: tema.hairline,
925
+ borderBottomColor: tema.color.border
926
+ },
927
+ children: [
928
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textMuted, fontSize: tema.font.small, minWidth: tema.touch * 2 }, children: l.etikett }),
929
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: l.verdi }),
930
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
931
+ import_react_native3.Pressable,
932
+ {
933
+ testID: `fjern-${l.felt}`,
934
+ accessibilityRole: "button",
935
+ accessibilityLabel: `${tekst.kontekstFjern} ${l.etikett.toLowerCase()} fra innsendingen`,
936
+ onPress: () => onFjernKontekst(l.felt),
937
+ style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
938
+ children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: [
939
+ "\u2715 ",
940
+ tekst.kontekstFjern
941
+ ] })
942
+ }
943
+ )
944
+ ]
945
+ },
946
+ l.felt
947
+ )),
948
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: { paddingTop: tema.space.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Hint, { children: tekst.kontekstAldri }) })
949
+ ] }) : null
950
+ ] })
786
951
  ]
787
952
  }
788
- ) : null,
789
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(H, { children: spor === "onske" ? tekst.feltLabelOnske : tekst.feltLabelFeil }),
790
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
791
- import_react_native3.TextInput,
792
- {
793
- testID: "innspill-tekst",
794
- accessibilityLabel: spor === "onske" ? tekst.feltLabelOnske : tekst.feltLabelFeil,
795
- value: verdi,
796
- onChangeText: onEndre,
797
- maxLength: textMaxLength,
798
- multiline: true,
799
- numberOfLines: 4,
800
- placeholder: spor === "onske" ? tekst.placeholderOnske : tekst.placeholderFeil,
801
- placeholderTextColor: tema.color.textMuted,
802
- style: {
803
- backgroundColor: tema.color.surfaceRaised,
804
- borderWidth: tema.hairline,
805
- borderColor: full ? tema.color.warning : tema.color.borderStrong,
806
- borderRadius: tema.radius.md,
807
- padding: tema.space.md,
808
- color: tema.color.textPrimary,
809
- fontSize: tema.font.body,
810
- lineHeight: tema.lineHeight.body,
811
- minHeight: tema.touch * 2,
812
- textAlignVertical: "top"
813
- }
814
- }
815
953
  ),
816
- visTeller ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
817
- import_react_native3.Text,
818
- {
819
- testID: "teller",
820
- accessibilityLiveRegion: full ? "assertive" : "polite",
821
- style: {
822
- alignSelf: "flex-end",
823
- color: full ? tema.color.warning : tema.color.textMuted,
824
- fontSize: tema.font.small
825
- },
826
- children: [
827
- brukt,
828
- " / ",
829
- textMaxLength,
830
- full ? tekst.tellerFull : ""
831
- ]
832
- }
833
- ) : null,
834
- harVedlegg ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
835
- import_react_native3.View,
836
- {
837
- testID: "vedlegg-chip",
838
- style: {
839
- flexDirection: "row",
840
- alignItems: "center",
841
- gap: tema.space.sm,
842
- minHeight: tema.touch,
843
- borderWidth: tema.hairline,
844
- borderColor: tema.color.borderInteractive,
845
- borderRadius: tema.radius.pill,
846
- paddingLeft: tema.space.md,
847
- paddingRight: tema.space.xs
848
- },
849
- children: [
850
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { accessibilityElementsHidden: true, importantForAccessibility: "no", style: { fontSize: tema.font.small }, children: "\u{1F4F7}" }),
851
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: tekst.skjermbildeLagtVed }),
852
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
853
- import_react_native3.Pressable,
854
- {
855
- testID: "fjern-vedlegg",
856
- accessibilityRole: "button",
857
- accessibilityLabel: tekst.fjernSkjermbilde,
858
- onPress: onFjernVedlegg,
859
- style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
860
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: "\u2715" })
861
- }
862
- )
863
- ]
864
- }
865
- ) : onSkjermbilde ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
866
- Btn,
867
- {
868
- variant: "secondary",
869
- testID: "legg-ved-skjermbilde",
870
- ikon: "\u{1F4F7}",
871
- label: tekst.leggVedSkjermbilde,
872
- hint: tekst.leggVedHint,
873
- onPress: onSkjermbilde
874
- }
875
- ) : null,
876
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { style: { borderTopWidth: tema.hairline, borderTopColor: tema.color.border, paddingTop: tema.space.sm }, children: [
877
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
878
- import_react_native3.Pressable,
879
- {
880
- testID: "kontekst-bryter",
881
- accessibilityRole: "button",
882
- accessibilityState: { expanded: apen },
883
- accessibilityLabel: `${tekst.kontekstLinje}${apen ? "" : tekst.kontekstVis}`,
884
- onPress: () => setApen((a) => !a),
885
- style: { minHeight: tema.touch, justifyContent: "center" },
886
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: [
887
- apen ? "\u25B4" : "\u25BE",
888
- " ",
889
- tekst.kontekstLinje,
890
- apen ? "" : tekst.kontekstVis
891
- ] })
892
- }
893
- ),
894
- apen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.View, { children: [
895
- linjer.map((l) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
896
- import_react_native3.View,
897
- {
898
- style: {
899
- flexDirection: "row",
900
- alignItems: "center",
901
- gap: tema.space.sm,
902
- minHeight: tema.touch,
903
- borderBottomWidth: tema.hairline,
904
- borderBottomColor: tema.color.border
905
- },
906
- children: [
907
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { color: tema.color.textMuted, fontSize: tema.font.small, minWidth: tema.touch * 2 }, children: l.etikett }),
908
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.Text, { style: { flex: 1, color: tema.color.textPrimary, fontSize: tema.font.small }, children: l.verdi }),
909
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
910
- import_react_native3.Pressable,
911
- {
912
- testID: `fjern-${l.felt}`,
913
- accessibilityRole: "button",
914
- accessibilityLabel: `${tekst.kontekstFjern} ${l.etikett.toLowerCase()} fra innsendingen`,
915
- onPress: () => onFjernKontekst(l.felt),
916
- style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
917
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native3.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.small }, children: [
918
- "\u2715 ",
919
- tekst.kontekstFjern
920
- ] })
921
- }
922
- )
923
- ]
924
- },
925
- l.felt
926
- )),
927
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: { paddingTop: tema.space.sm }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Hint, { children: tekst.kontekstAldri }) })
928
- ] }) : null
929
- ] }),
930
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { style: { flex: 1, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
954
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native3.View, { testID: "skjema-fot", style: { flexGrow: 1, flexShrink: 0, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
931
955
  Btn,
932
956
  {
933
957
  testID: "send",
@@ -1011,73 +1035,82 @@ function KjenteFeil({
1011
1035
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.ActivityIndicator, { accessibilityLabel: "Sjekker kjente feil", color: tema.color.textSecondary })
1012
1036
  ] });
1013
1037
  }
1014
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: { flex: 1, gap: tema.space.md }, children: [
1038
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { testID: "kjente-feil", style: { flexGrow: 1, flexShrink: 1, gap: tema.space.md }, children: [
1015
1039
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(H, { sub: spor === "onske" ? tekst.kjenteFeilUnderOnske : tekst.kjenteFeilUnderFeil, children: spor === "onske" ? tekst.kjenteFeilTittelOnske : tekst.kjenteFeilTittelFeil }),
1016
- kort.map((k) => {
1017
- const versjon = k.fixedIn ? k.status === "fikset" ? tekst.rettetI(k.fixedIn) : tekst.rettesI(k.fixedIn) : void 0;
1018
- const kontekst = versjon ? `${k.title}. ${versjon}` : k.title;
1019
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Card, { children: [
1020
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1021
- import_react_native5.Text,
1022
- {
1023
- style: {
1024
- color: tema.color.textPrimary,
1025
- fontSize: tema.font.body,
1026
- lineHeight: tema.lineHeight.body,
1027
- fontWeight: tema.weight.medium
1028
- },
1029
- children: k.title
1030
- }
1031
- ),
1032
- k.workaround ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
1033
- import_react_native5.Text,
1034
- {
1035
- style: {
1036
- color: tema.color.textSecondary,
1037
- fontSize: tema.font.small,
1038
- lineHeight: tema.lineHeight.small
1039
- },
1040
- children: [
1041
- tekst.omvei,
1042
- " ",
1043
- k.workaround
1044
- ]
1045
- }
1046
- ) : null,
1047
- versjon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1048
- StatusPill,
1049
- {
1050
- ikon: k.status === "fikset" ? "\u2713" : "\u{1F527}",
1051
- etikett: versjon,
1052
- farge: k.status === "fikset" ? "success" : "info"
1053
- }
1054
- ) : null,
1055
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
1056
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1057
- Btn,
1058
- {
1059
- grow: true,
1060
- testID: `ja-ogsa-${k.id}`,
1061
- label: tekst.svarJa,
1062
- accessibilityLabel: `${tekst.svarJa}. ${kontekst}`,
1063
- onPress: () => onJaOgsa(k)
1064
- }
1065
- ),
1066
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1067
- Btn,
1068
- {
1069
- grow: true,
1070
- variant: "secondary",
1071
- testID: `ligner-${k.id}`,
1072
- label: tekst.svarLigner,
1073
- accessibilityLabel: `${tekst.svarLigner}. ${kontekst}`,
1074
- onPress: () => onLigner(k)
1075
- }
1076
- )
1077
- ] })
1078
- ] }, k.id);
1079
- }),
1080
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Btn, { variant: "secondary", testID: "nei-noe-annet", label: tekst.svarNei, onPress: onNei })
1040
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1041
+ import_react_native5.ScrollView,
1042
+ {
1043
+ testID: "kjente-feil-liste",
1044
+ style: { flexGrow: 0, flexShrink: 1 },
1045
+ contentContainerStyle: { gap: tema.space.md },
1046
+ keyboardShouldPersistTaps: "handled",
1047
+ children: kort.map((k) => {
1048
+ const versjon = k.fixedIn ? k.status === "fikset" ? tekst.rettetI(k.fixedIn) : tekst.rettesI(k.fixedIn) : void 0;
1049
+ const kontekst = versjon ? `${k.title}. ${versjon}` : k.title;
1050
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Card, { children: [
1051
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1052
+ import_react_native5.Text,
1053
+ {
1054
+ style: {
1055
+ color: tema.color.textPrimary,
1056
+ fontSize: tema.font.body,
1057
+ lineHeight: tema.lineHeight.body,
1058
+ fontWeight: tema.weight.medium
1059
+ },
1060
+ children: k.title
1061
+ }
1062
+ ),
1063
+ k.workaround ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
1064
+ import_react_native5.Text,
1065
+ {
1066
+ style: {
1067
+ color: tema.color.textSecondary,
1068
+ fontSize: tema.font.small,
1069
+ lineHeight: tema.lineHeight.small
1070
+ },
1071
+ children: [
1072
+ tekst.omvei,
1073
+ " ",
1074
+ k.workaround
1075
+ ]
1076
+ }
1077
+ ) : null,
1078
+ versjon ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1079
+ StatusPill,
1080
+ {
1081
+ ikon: k.status === "fikset" ? "\u2713" : "\u{1F527}",
1082
+ etikett: versjon,
1083
+ farge: k.status === "fikset" ? "success" : "info"
1084
+ }
1085
+ ) : null,
1086
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native5.View, { style: { flexDirection: "row", gap: tema.space.sm }, children: [
1087
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1088
+ Btn,
1089
+ {
1090
+ grow: true,
1091
+ testID: `ja-ogsa-${k.id}`,
1092
+ label: tekst.svarJa,
1093
+ accessibilityLabel: `${tekst.svarJa}. ${kontekst}`,
1094
+ onPress: () => onJaOgsa(k)
1095
+ }
1096
+ ),
1097
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
1098
+ Btn,
1099
+ {
1100
+ grow: true,
1101
+ variant: "secondary",
1102
+ testID: `ligner-${k.id}`,
1103
+ label: tekst.svarLigner,
1104
+ accessibilityLabel: `${tekst.svarLigner}. ${kontekst}`,
1105
+ onPress: () => onLigner(k)
1106
+ }
1107
+ )
1108
+ ] })
1109
+ ] }, k.id);
1110
+ })
1111
+ }
1112
+ ),
1113
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native5.View, { testID: "kjente-feil-fot", style: { flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Btn, { variant: "secondary", testID: "nei-noe-annet", label: tekst.svarNei, onPress: onNei }) })
1081
1114
  ] });
1082
1115
  }
1083
1116
 
@@ -1475,6 +1508,7 @@ function Widget({
1475
1508
  tenantName
1476
1509
  }) {
1477
1510
  const tema = useTema();
1511
+ const insets = (0, import_react10.useContext)(import_react_native_safe_area_context.SafeAreaInsetsContext) ?? import_react_native_safe_area_context.initialWindowMetrics?.insets ?? { top: 0, bottom: 0, left: 0, right: 0 };
1478
1512
  const skjermbilde = useSkjermbilde();
1479
1513
  const previewRef = (0, import_react10.useRef)(null);
1480
1514
  const [steg, setSteg] = (0, import_react10.useState)("valg");
@@ -1668,108 +1702,119 @@ function Widget({
1668
1702
  animationType: "slide",
1669
1703
  onRequestClose: lukk,
1670
1704
  accessibilityViewIsModal: true,
1671
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, { style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1672
- import_react_native9.View,
1705
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1706
+ import_react_native9.KeyboardAvoidingView,
1673
1707
  {
1674
- testID: "innspel-widget",
1675
- accessibilityViewIsModal: true,
1676
- accessibilityRole: "none",
1677
- style: {
1678
- backgroundColor: tema.color.bg,
1679
- borderTopLeftRadius: tema.radius.lg * 2,
1680
- borderTopRightRadius: tema.radius.lg * 2,
1681
- padding: tema.screenPadding,
1682
- gap: tema.space.md,
1683
- maxHeight: "92%",
1684
- minHeight: "60%"
1685
- },
1686
- children: [
1687
- /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
1688
- steg === "skjermbilde" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: fjernBilde }) : steg !== "valg" && steg !== "kvittering" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: nullstill }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, {}),
1689
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1690
- import_react_native9.Pressable,
1691
- {
1692
- testID: "lukk",
1693
- accessibilityRole: "button",
1694
- accessibilityLabel: tekst.lukk,
1695
- onPress: lukk,
1696
- style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
1697
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
1698
- }
1699
- )
1700
- ] }),
1701
- feil ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.sendefeilBanner(feil) }) : null,
1702
- steg === "valg" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
1703
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Valg, { onVelg: velgSpor }),
1704
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "mine-innspill", ikon: "\u{1F4CB}", label: tekst.mineTittel, onPress: visMine })
1705
- ] }) : null,
1706
- steg === "kjenteFeil" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1707
- KjenteFeil,
1708
- {
1709
- kort,
1710
- spor,
1711
- laster: lasterKort,
1712
- onJaOgsa: jaOgsa,
1713
- onLigner: (k) => {
1714
- setLenketTil(k);
1715
- setSteg("felt");
1716
- },
1717
- onNei: () => spor === "onske" ? void send() : setSteg("felt")
1718
- }
1719
- ) : null,
1720
- steg === "felt" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1721
- Felt,
1722
- {
1723
- spor,
1724
- verdi,
1725
- onEndre: endreTekst,
1726
- minTextLength: innstillinger.minTextLength,
1727
- textMaxLength: innstillinger.textMaxLength,
1728
- kontekst: client.context,
1729
- fjernedeFelter: fjernede,
1730
- onFjernKontekst: (f) => setFjernede((x) => [...x, f]),
1731
- ...lenketTil ? { lenketTil, onFjernLenke: () => setLenketTil(void 0) } : {},
1732
- funn,
1733
- onSend: send,
1734
- sender,
1735
- ...skjermbildeMulig ? { onSkjermbilde: taSkjermbilde } : {},
1736
- harVedlegg: vedlegg !== void 0,
1737
- onFjernVedlegg: fjernBilde
1738
- }
1739
- ) : null,
1740
- steg === "skjermbilde" && bilde ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1741
- Skjermbilde,
1742
- {
1743
- bilde,
1744
- automaskerRot: automasker,
1745
- rotStorrelse,
1746
- previewRef,
1747
- komponerer,
1748
- onFjern: fjernBilde,
1749
- onLeggVed: leggVedBilde
1750
- }
1751
- ) : null,
1752
- steg === "kvittering" && kvittering ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1753
- Kvittering,
1754
- {
1755
- art: kvittering.art,
1756
- ...kvittering.nr ? { saksnummer: kvittering.nr } : {},
1757
- ...kvittering.vedlegg ? { vedlegg: kvittering.vedlegg } : {},
1758
- onLukk: lukk
1759
- }
1760
- ) : null,
1761
- steg === "mine" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1762
- MineInnspill,
1763
- {
1764
- rader: mine,
1765
- laster: lasterMine,
1766
- ...tenantName ? { tenantName } : {},
1767
- onNytt: nullstill
1768
- }
1769
- ) : null
1770
- ]
1708
+ behavior: "padding",
1709
+ keyboardVerticalOffset: -insets.bottom,
1710
+ style: { flex: 1, backgroundColor: tema.color.scrim, justifyContent: "flex-end", paddingTop: insets.top },
1711
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
1712
+ import_react_native9.View,
1713
+ {
1714
+ testID: "innspel-widget",
1715
+ accessibilityViewIsModal: true,
1716
+ accessibilityRole: "none",
1717
+ style: {
1718
+ backgroundColor: tema.color.bg,
1719
+ borderTopLeftRadius: tema.radius.lg * 2,
1720
+ borderTopRightRadius: tema.radius.lg * 2,
1721
+ padding: tema.screenPadding,
1722
+ paddingBottom: tema.screenPadding + insets.bottom,
1723
+ paddingLeft: tema.screenPadding + insets.left,
1724
+ paddingRight: tema.screenPadding + insets.right,
1725
+ gap: tema.space.md,
1726
+ maxHeight: "92%",
1727
+ minHeight: "60%"
1728
+ },
1729
+ children: [
1730
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native9.View, { style: { flexDirection: "row", justifyContent: "space-between", alignItems: "center" }, children: [
1731
+ steg === "skjermbilde" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: fjernBilde }) : steg !== "valg" && steg !== "kvittering" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "tilbake", ikon: "\u2190", label: tekst.tilbake, onPress: nullstill }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.View, {}),
1732
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1733
+ import_react_native9.Pressable,
1734
+ {
1735
+ testID: "lukk",
1736
+ accessibilityRole: "button",
1737
+ accessibilityLabel: tekst.lukk,
1738
+ onPress: lukk,
1739
+ style: { minWidth: tema.touch, minHeight: tema.touch, alignItems: "center", justifyContent: "center" },
1740
+ children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native9.Text, { style: { color: tema.color.textSecondary, fontSize: tema.font.body }, children: "\u2715" })
1741
+ }
1742
+ )
1743
+ ] }),
1744
+ feil ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Banner, { live: true, ikon: "\u26A0", tone: "danger", children: tekst.sendefeilBanner(feil) }) : null,
1745
+ steg === "valg" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
1746
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Valg, { onVelg: velgSpor }),
1747
+ /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Btn, { variant: "ghost", testID: "mine-innspill", ikon: "\u{1F4CB}", label: tekst.mineTittel, onPress: visMine })
1748
+ ] }) : null,
1749
+ steg === "kjenteFeil" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1750
+ KjenteFeil,
1751
+ {
1752
+ kort,
1753
+ spor,
1754
+ laster: lasterKort,
1755
+ onJaOgsa: jaOgsa,
1756
+ onLigner: (k) => {
1757
+ setLenketTil(k);
1758
+ setSteg("felt");
1759
+ },
1760
+ onNei: () => spor === "onske" ? void send() : setSteg("felt")
1761
+ }
1762
+ ) : null,
1763
+ steg === "felt" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1764
+ Felt,
1765
+ {
1766
+ spor,
1767
+ verdi,
1768
+ onEndre: endreTekst,
1769
+ minTextLength: innstillinger.minTextLength,
1770
+ textMaxLength: innstillinger.textMaxLength,
1771
+ kontekst: client.context,
1772
+ fjernedeFelter: fjernede,
1773
+ onFjernKontekst: (f) => setFjernede((x) => [...x, f]),
1774
+ ...lenketTil ? { lenketTil, onFjernLenke: () => setLenketTil(void 0) } : {},
1775
+ funn,
1776
+ onSend: send,
1777
+ sender,
1778
+ ...skjermbildeMulig ? { onSkjermbilde: taSkjermbilde } : {},
1779
+ harVedlegg: vedlegg !== void 0,
1780
+ onFjernVedlegg: fjernBilde
1781
+ }
1782
+ ) : null,
1783
+ steg === "skjermbilde" && bilde ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1784
+ Skjermbilde,
1785
+ {
1786
+ bilde,
1787
+ automaskerRot: automasker,
1788
+ rotStorrelse,
1789
+ previewRef,
1790
+ komponerer,
1791
+ onFjern: fjernBilde,
1792
+ onLeggVed: leggVedBilde
1793
+ }
1794
+ ) : null,
1795
+ steg === "kvittering" && kvittering ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1796
+ Kvittering,
1797
+ {
1798
+ art: kvittering.art,
1799
+ ...kvittering.nr ? { saksnummer: kvittering.nr } : {},
1800
+ ...kvittering.vedlegg ? { vedlegg: kvittering.vedlegg } : {},
1801
+ onLukk: lukk
1802
+ }
1803
+ ) : null,
1804
+ steg === "mine" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
1805
+ MineInnspill,
1806
+ {
1807
+ rader: mine,
1808
+ laster: lasterMine,
1809
+ ...tenantName ? { tenantName } : {},
1810
+ onNytt: nullstill
1811
+ }
1812
+ ) : null
1813
+ ]
1814
+ }
1815
+ )
1771
1816
  }
1772
- ) })
1817
+ )
1773
1818
  }
1774
1819
  );
1775
1820
  }