@oslokommune/punkt-elements 19.3.0 → 19.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/dist/{accordion-BLMbI8SQ.cjs → accordion-CZ0O4c0_.cjs} +1 -1
- package/dist/{accordion-Bwka5Mxo.js → accordion-DFcdonl-.js} +5 -5
- package/dist/{alert-vIaasUjb.js → alert-BhvjSA5X.js} +7 -7
- package/dist/{alert-DsGNGcgd.cjs → alert-D1bQjZ7C.cjs} +2 -2
- package/dist/{async-directive-U0EE5r36.cjs → async-directive-BGoo_npW.cjs} +1 -1
- package/dist/{async-directive-C8UAk8Mv.js → async-directive-DsdqP_X7.js} +2 -2
- package/dist/{backlink-DM220m4q.cjs → backlink-Bw6IcRIo.cjs} +1 -1
- package/dist/{backlink-BjJwDjuP.js → backlink-DIdgvE2j.js} +3 -3
- package/dist/{breadcrumbs-B1pDtQy8.js → breadcrumbs-BfgCx3Xj.js} +2 -2
- package/dist/{breadcrumbs-BUmbj-hP.cjs → breadcrumbs-C10K1XLP.cjs} +1 -1
- package/dist/{button-BUl8uWWh.js → button-B5rWxfei.js} +5 -5
- package/dist/{button-CCR4eyt_.cjs → button-CmNrMH-c.cjs} +1 -1
- package/dist/{calendar-CtfdBqJN.cjs → calendar-D-Ow5DAp.cjs} +1 -1
- package/dist/{calendar-DWSW_GeN.js → calendar-U8xkRdgF.js} +3 -3
- package/dist/{card-27RxxKxW.js → card-D2YYPZr5.js} +23 -22
- package/dist/{card-B-RKnu_C.cjs → card-DW1uklP6.cjs} +6 -6
- package/dist/{checkbox-B-ejHbFP.js → checkbox-B2O0fkh9.js} +4 -4
- package/dist/{checkbox-B2G_B_bg.cjs → checkbox-C0zLtnCI.cjs} +1 -1
- package/dist/{class-map-D5GHsely.js → class-map-C4hdfSfY.js} +1 -1
- package/dist/{class-map-B0FX3YsK.cjs → class-map-Drv0_anQ.cjs} +1 -1
- package/dist/{combobox-nqNZDvBR.cjs → combobox-BgduqUpf.cjs} +1 -1
- package/dist/{combobox-DHL_CGYv.js → combobox-DpXTwNr4.js} +12 -12
- package/dist/components/card/card.d.ts +2 -1
- package/dist/components/checkbox/checkbox.d.ts +1 -1
- package/dist/components/consent/consent.d.ts +6 -38
- package/dist/components/fileupload/fileupload-operations.d.ts +6 -3
- package/dist/components/fileupload/fileupload-renderers.d.ts +5 -3
- package/dist/{consent-BeoP4rOa.js → consent-CbJG04C1.js} +21 -17
- package/dist/consent-DxpJLExu.cjs +18 -0
- package/dist/{datepicker-DvO3w0eM.cjs → datepicker-53rj_Qqx.cjs} +1 -1
- package/dist/{datepicker-BWp2PM9S.js → datepicker-BLBimRTT.js} +11 -11
- package/dist/{directive-helpers-BushnrQQ.cjs → directive-helpers-BRrz3Bcj.cjs} +1 -1
- package/dist/{directive-helpers-DpyLJPJm.js → directive-helpers-D96YEsht.js} +1 -1
- package/dist/{element-CewjrA4g.cjs → element-BOmr9YLv.cjs} +1 -1
- package/dist/{element-CqC-sGuC.js → element-mwwC2Rra.js} +37 -3
- package/dist/{element-with-slot-MCvSBwUv.cjs → element-with-slot-2PHu2w7O.cjs} +1 -1
- package/dist/{element-with-slot-D_OKDlYo.js → element-with-slot-FD826ooP.js} +2 -2
- package/dist/{fileupload-DDLvQaSS.cjs → fileupload-4wgr4iAi.cjs} +78 -76
- package/dist/{fileupload-DbtTD1aU.js → fileupload-BxfBFhFt.js} +120 -100
- package/dist/{footer-UT8MbnCT.js → footer-CBkKAuvh.js} +4 -4
- package/dist/{footer-CupUAe8d.cjs → footer-DOp_9VdY.cjs} +1 -1
- package/dist/{header-BxgtAiNM.js → header-CF-Re0nT.js} +14 -13
- package/dist/{header-wdEiBTI9.cjs → header-Cs4t2XMM.cjs} +4 -3
- package/dist/{header-menu-DGywRJCx.cjs → header-menu-BnqZagI6.cjs} +3 -3
- package/dist/{header-menu-CTEPH4St.js → header-menu-C9k9xG9V.js} +6 -6
- package/dist/{heading-ELXWxyTv.js → heading-BRHCV_5J.js} +2 -2
- package/dist/{heading-BDdX4JiM.cjs → heading-u9Arof4p.cjs} +1 -1
- package/dist/{helptext-DQe6GO75.cjs → helptext-DYgeTMtA.cjs} +1 -1
- package/dist/{helptext-BQkrYsoV.js → helptext-sRC8EJqL.js} +4 -4
- package/dist/{icon-Clz68-Kz.cjs → icon-CoBsgGUR.cjs} +1 -1
- package/dist/{icon-B2v30QUk.js → icon-DmRyYNlY.js} +1 -1
- package/dist/if-defined-2mkIDgOm.cjs +1 -0
- package/dist/{if-defined-BNXGXCwT.js → if-defined-Bebu3LXY.js} +1 -1
- package/dist/{input-element-BTzuDh4h.js → input-element-B1BntJeJ.js} +2 -2
- package/dist/{input-element-BdIWsDl-.cjs → input-element-W6Gklt2E.cjs} +1 -1
- package/dist/{input-wrapper-B5GdwzAM.js → input-wrapper-C1zXIKBU.js} +6 -6
- package/dist/{input-wrapper-BmPdpY4N.cjs → input-wrapper-CSPPa4uc.cjs} +1 -1
- package/dist/{link-BxKWhYsn.js → link-DcxVUj8s.js} +4 -4
- package/dist/{link-1JEWpEDG.cjs → link-EMsHusF7.cjs} +1 -1
- package/dist/{linkcard-DXOkeQUy.cjs → linkcard-CWeR6t2a.cjs} +1 -1
- package/dist/{linkcard-CICSZ7pK.js → linkcard-MJFR7FLT.js} +4 -4
- package/dist/{listbox-3fi7wQz4.cjs → listbox-BoBwzL4p.cjs} +6 -6
- package/dist/{listbox-7pQ0UjKV.js → listbox-DEzd-dxF.js} +65 -61
- package/dist/{loader-nIl61aTv.js → loader-CqFQoJlM.js} +4 -4
- package/dist/{loader-BA__N62k.cjs → loader-SJ6NauNT.cjs} +1 -1
- package/dist/{messagebox-D2xvSYWI.cjs → messagebox-D5GYIdjE.cjs} +2 -2
- package/dist/{messagebox-E8W7RyAJ.js → messagebox-DsKi_rKn.js} +5 -5
- package/dist/{modal-D5tGq-nN.js → modal-CJqe6y-V.js} +7 -7
- package/dist/{modal-i3Qxv38H.cjs → modal-DaerHpVi.cjs} +3 -3
- package/dist/pkt-accordion.cjs +1 -1
- package/dist/pkt-accordion.js +1 -1
- package/dist/pkt-alert.cjs +1 -1
- package/dist/pkt-alert.js +1 -1
- package/dist/pkt-backlink.cjs +1 -1
- package/dist/pkt-backlink.js +1 -1
- package/dist/pkt-breadcrumbs.cjs +1 -1
- package/dist/pkt-breadcrumbs.js +1 -1
- package/dist/pkt-button.cjs +1 -1
- package/dist/pkt-button.js +1 -1
- package/dist/pkt-calendar.cjs +1 -1
- package/dist/pkt-calendar.js +1 -1
- package/dist/pkt-card.cjs +1 -1
- package/dist/pkt-card.js +1 -1
- package/dist/pkt-checkbox.cjs +1 -1
- package/dist/pkt-checkbox.js +1 -1
- package/dist/pkt-combobox.cjs +1 -1
- package/dist/pkt-combobox.js +1 -1
- package/dist/pkt-consent.cjs +1 -1
- package/dist/pkt-consent.js +1 -1
- package/dist/pkt-datepicker.cjs +1 -1
- package/dist/pkt-datepicker.js +1 -1
- package/dist/pkt-fileupload.cjs +1 -1
- package/dist/pkt-fileupload.js +1 -1
- package/dist/pkt-footer.cjs +1 -1
- package/dist/pkt-footer.js +1 -1
- package/dist/pkt-header-menu.cjs +1 -1
- package/dist/pkt-header-menu.js +1 -1
- package/dist/pkt-header.cjs +1 -1
- package/dist/pkt-header.js +1 -1
- package/dist/pkt-heading.cjs +1 -1
- package/dist/pkt-heading.js +1 -1
- package/dist/pkt-helptext.cjs +1 -1
- package/dist/pkt-helptext.js +1 -1
- package/dist/pkt-icon.cjs +1 -1
- package/dist/pkt-icon.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +34 -34
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -1
- package/dist/pkt-link.cjs +1 -1
- package/dist/pkt-link.js +1 -1
- package/dist/pkt-linkcard.cjs +1 -1
- package/dist/pkt-linkcard.js +1 -1
- package/dist/pkt-listbox.cjs +1 -1
- package/dist/pkt-listbox.js +1 -1
- package/dist/pkt-loader.cjs +1 -1
- package/dist/pkt-loader.js +1 -1
- package/dist/pkt-messagebox.cjs +1 -1
- package/dist/pkt-messagebox.js +1 -1
- package/dist/pkt-modal.cjs +1 -1
- package/dist/pkt-modal.js +1 -1
- package/dist/{pkt-options-controller-BClk341e.cjs → pkt-options-controller-Dz-rYCG1.cjs} +1 -1
- package/dist/{pkt-options-controller-v2bPM9iU.js → pkt-options-controller-sUzxHa5A.js} +1 -1
- package/dist/pkt-progressbar.cjs +1 -1
- package/dist/pkt-progressbar.js +1 -1
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -1
- package/dist/pkt-searchinput.cjs +1 -1
- package/dist/pkt-searchinput.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.js +1 -1
- package/dist/pkt-tabs.cjs +1 -1
- package/dist/pkt-tabs.js +1 -1
- package/dist/pkt-tag.cjs +1 -1
- package/dist/pkt-tag.js +1 -1
- package/dist/pkt-textarea.cjs +1 -1
- package/dist/pkt-textarea.js +1 -1
- package/dist/pkt-textinput.cjs +1 -1
- package/dist/pkt-textinput.js +1 -1
- package/dist/pkt-timepicker.cjs +1 -1
- package/dist/pkt-timepicker.js +1 -1
- package/dist/{progressbar-4WyR4T72.js → progressbar-Bd0DjiAb.js} +5 -5
- package/dist/{progressbar-CJFGbev-.cjs → progressbar-BrVlAcQI.cjs} +1 -1
- package/dist/{radiobutton-D7308uCY.js → radiobutton-B0V-jSEX.js} +4 -4
- package/dist/{radiobutton-BQRtv7PK.cjs → radiobutton-Cv1BlwLV.cjs} +1 -1
- package/dist/{ref-37-yxmc4.js → ref-CCSGk4MP.js} +2 -2
- package/dist/{ref-HT6KRjxp.cjs → ref-Emu5PNxk.cjs} +1 -1
- package/dist/{repeat-DntD73oB.js → repeat-CdxGS-_3.js} +2 -2
- package/dist/{repeat-Ddge5HTp.cjs → repeat-Dh9YKoeV.cjs} +1 -1
- package/dist/{searchinput-D1cJ73Ki.cjs → searchinput-7-VVdkss.cjs} +1 -1
- package/dist/{searchinput-j4IvYRzj.js → searchinput-CgzigmiI.js} +4 -4
- package/dist/{select-CDoA2rpC.cjs → select---PCiwmy.cjs} +1 -1
- package/dist/{select-BhK8veJn.js → select-BbcGPmPs.js} +7 -7
- package/dist/shared-strings/nb.d.ts +34 -0
- package/dist/shared-types/consent.d.ts +69 -0
- package/dist/shared-types/index.d.ts +2 -0
- package/dist/{tabs-DexV26qJ.js → tabs-B134M9k2.js} +4 -4
- package/dist/{tabs-95BpwB6j.cjs → tabs-Dw9E06fL.cjs} +1 -1
- package/dist/{tag-CQEyjF32.cjs → tag-HTYKd-iG.cjs} +1 -1
- package/dist/{tag-DoUC99hn.js → tag-wYnHhHLK.js} +5 -5
- package/dist/{textarea-sulH-Yk7.js → textarea-BcgVLLTt.js} +9 -9
- package/dist/{textarea-BLVuKEng.cjs → textarea-pA_xv8lI.cjs} +1 -1
- package/dist/{textinput-CSrBua2N.cjs → textinput-Czz2affL.cjs} +1 -1
- package/dist/{textinput-Di2lAf2R.js → textinput-Dpj1X5yr.js} +8 -8
- package/dist/{timepicker-Iq1-vWRn.cjs → timepicker-BwDZkSpo.cjs} +1 -1
- package/dist/{timepicker-BaDGjuOR.js → timepicker-CfQMZlaP.js} +8 -8
- package/package.json +2 -2
- package/src/components/alert/alert.test.ts +1 -1
- package/src/components/alert/alert.ts +1 -1
- package/src/components/card/card.ts +7 -2
- package/src/components/checkbox/checkbox.ts +1 -3
- package/src/components/consent/consent.test.ts +14 -0
- package/src/components/consent/consent.ts +28 -54
- package/src/components/fileupload/fileupload-operations.ts +31 -22
- package/src/components/fileupload/fileupload-renderers.ts +28 -17
- package/src/components/fileupload/fileupload.ts +26 -9
- package/src/components/header/header-global.ts +2 -1
- package/src/components/header/header-service.test.ts +15 -0
- package/src/components/header/header-user-menu.ts +1 -1
- package/src/components/header-menu/header-menu.ts +2 -2
- package/src/components/listbox/listbox.ts +9 -4
- package/src/components/messagebox/messagebox.ts +1 -1
- package/src/components/modal/modal.ts +2 -2
- package/dist/consent-Cle1hkPg.cjs +0 -18
- package/dist/if-defined-CjRKmMQs.cjs +0 -1
|
@@ -10,7 +10,9 @@ import type {
|
|
|
10
10
|
TQueueOperationContext,
|
|
11
11
|
TTransferProgress,
|
|
12
12
|
} from './fileupload-types'
|
|
13
|
-
import { formatString,
|
|
13
|
+
import { formatString, type TPktStrings } from 'shared-strings'
|
|
14
|
+
|
|
15
|
+
type TFileuploadStrings = TPktStrings['fileupload']
|
|
14
16
|
|
|
15
17
|
type TRenderQueueItemProps = {
|
|
16
18
|
file: FileItem
|
|
@@ -24,7 +26,7 @@ type TRenderQueueItemProps = {
|
|
|
24
26
|
transferErrorMessage?: string
|
|
25
27
|
transferShowProgress?: boolean
|
|
26
28
|
transferLastProgress?: number
|
|
27
|
-
|
|
29
|
+
strings: TFileuploadStrings
|
|
28
30
|
operations: TQueueItemOperation[]
|
|
29
31
|
activeOperationId?: string
|
|
30
32
|
truncateTail?: number
|
|
@@ -70,9 +72,11 @@ const getProgressState = (progress: TTransferProgress): 'in-progress' | 'error'
|
|
|
70
72
|
return 'idle'
|
|
71
73
|
}
|
|
72
74
|
|
|
73
|
-
const renderLoadingText = (
|
|
74
|
-
html`<span
|
|
75
|
-
|
|
75
|
+
const renderLoadingText = (strings: TFileuploadStrings) =>
|
|
76
|
+
html`<span
|
|
77
|
+
class="pkt-fileupload__queue-display__item__loading-text"
|
|
78
|
+
aria-label=${strings.uploadingFile}
|
|
79
|
+
>${strings.uploading}</span
|
|
76
80
|
>`
|
|
77
81
|
|
|
78
82
|
const createOperationContext = ({
|
|
@@ -112,7 +116,7 @@ const renderTransferInProgress = ({
|
|
|
112
116
|
disabled,
|
|
113
117
|
transferProgress,
|
|
114
118
|
transferShowProgress,
|
|
115
|
-
|
|
119
|
+
strings,
|
|
116
120
|
truncateTail,
|
|
117
121
|
onCancel,
|
|
118
122
|
iconName = 'document-text',
|
|
@@ -122,7 +126,7 @@ const renderTransferInProgress = ({
|
|
|
122
126
|
disabled: boolean
|
|
123
127
|
transferProgress: number
|
|
124
128
|
transferShowProgress?: boolean
|
|
125
|
-
|
|
129
|
+
strings: TFileuploadStrings
|
|
126
130
|
truncateTail?: number
|
|
127
131
|
onCancel: (fileId: string) => void
|
|
128
132
|
iconName?: string
|
|
@@ -140,11 +144,11 @@ const renderTransferInProgress = ({
|
|
|
140
144
|
<button
|
|
141
145
|
type="button"
|
|
142
146
|
class="pkt-fileupload__queue-display__item__cancel-button"
|
|
143
|
-
aria-label
|
|
147
|
+
aria-label=${strings.cancelUpload}
|
|
144
148
|
?disabled=${disabled}
|
|
145
149
|
@click=${() => onCancel(file.fileId)}
|
|
146
150
|
>
|
|
147
|
-
|
|
151
|
+
${strings.cancel}
|
|
148
152
|
</button>
|
|
149
153
|
${showProgressBar
|
|
150
154
|
? html`
|
|
@@ -159,7 +163,7 @@ const renderTransferInProgress = ({
|
|
|
159
163
|
>${Math.round(transferProgress * 100)}%</span
|
|
160
164
|
>
|
|
161
165
|
`
|
|
162
|
-
: renderLoadingText(
|
|
166
|
+
: renderLoadingText(strings)}
|
|
163
167
|
`
|
|
164
168
|
}
|
|
165
169
|
|
|
@@ -170,6 +174,7 @@ const renderTransferError = ({
|
|
|
170
174
|
transferShowProgress,
|
|
171
175
|
transferLastProgress,
|
|
172
176
|
transferErrorMessage,
|
|
177
|
+
strings,
|
|
173
178
|
truncateTail,
|
|
174
179
|
onCancel,
|
|
175
180
|
}: {
|
|
@@ -179,6 +184,7 @@ const renderTransferError = ({
|
|
|
179
184
|
transferShowProgress?: boolean
|
|
180
185
|
transferLastProgress?: number
|
|
181
186
|
transferErrorMessage?: string
|
|
187
|
+
strings: TFileuploadStrings
|
|
182
188
|
truncateTail?: number
|
|
183
189
|
onCancel: (fileId: string) => void
|
|
184
190
|
}) => {
|
|
@@ -196,11 +202,11 @@ const renderTransferError = ({
|
|
|
196
202
|
<button
|
|
197
203
|
type="button"
|
|
198
204
|
class="pkt-fileupload__queue-display__item__cancel-button"
|
|
199
|
-
aria-label
|
|
205
|
+
aria-label=${strings.removeFailedFile}
|
|
200
206
|
?disabled=${disabled}
|
|
201
207
|
@click=${() => onCancel(file.fileId)}
|
|
202
208
|
>
|
|
203
|
-
|
|
209
|
+
${strings.removeFailed}
|
|
204
210
|
</button>
|
|
205
211
|
${showProgressError
|
|
206
212
|
? html`
|
|
@@ -424,6 +430,7 @@ const renderThumbnailIdleMain = ({
|
|
|
424
430
|
previewEnabled,
|
|
425
431
|
canOpenPreview,
|
|
426
432
|
truncateTail,
|
|
433
|
+
strings,
|
|
427
434
|
onOpenPreview,
|
|
428
435
|
onThumbnailImageError,
|
|
429
436
|
}: {
|
|
@@ -432,6 +439,7 @@ const renderThumbnailIdleMain = ({
|
|
|
432
439
|
previewEnabled?: boolean
|
|
433
440
|
canOpenPreview?: boolean
|
|
434
441
|
truncateTail?: number
|
|
442
|
+
strings: TFileuploadStrings
|
|
435
443
|
onOpenPreview?: (fileId: string) => void
|
|
436
444
|
onThumbnailImageError?: (fileId: string) => void
|
|
437
445
|
}) => {
|
|
@@ -450,7 +458,7 @@ const renderThumbnailIdleMain = ({
|
|
|
450
458
|
<button
|
|
451
459
|
type="button"
|
|
452
460
|
class="pkt-fileupload__queue-display__item__thumbnail__image-wrapper pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--label-only"
|
|
453
|
-
aria-label=${formatString(
|
|
461
|
+
aria-label=${formatString(strings.previewImage, { filename })}
|
|
454
462
|
?disabled=${!isInteractive}
|
|
455
463
|
@click=${() => {
|
|
456
464
|
if (!isInteractive || !onOpenPreview) return
|
|
@@ -500,7 +508,7 @@ export const renderFilenameQueueItem = ({
|
|
|
500
508
|
transferErrorMessage,
|
|
501
509
|
transferShowProgress,
|
|
502
510
|
transferLastProgress,
|
|
503
|
-
|
|
511
|
+
strings,
|
|
504
512
|
truncateTail,
|
|
505
513
|
onCancel,
|
|
506
514
|
}: TRenderQueueItemProps) => {
|
|
@@ -550,7 +558,7 @@ export const renderFilenameQueueItem = ({
|
|
|
550
558
|
disabled,
|
|
551
559
|
transferProgress: transferProgress as number,
|
|
552
560
|
transferShowProgress,
|
|
553
|
-
|
|
561
|
+
strings,
|
|
554
562
|
truncateTail,
|
|
555
563
|
onCancel,
|
|
556
564
|
})
|
|
@@ -562,6 +570,7 @@ export const renderFilenameQueueItem = ({
|
|
|
562
570
|
transferShowProgress,
|
|
563
571
|
transferLastProgress,
|
|
564
572
|
transferErrorMessage,
|
|
573
|
+
strings,
|
|
565
574
|
truncateTail,
|
|
566
575
|
onCancel,
|
|
567
576
|
})
|
|
@@ -638,7 +647,7 @@ export const renderThumbnailQueueItem = ({
|
|
|
638
647
|
transferErrorMessage,
|
|
639
648
|
transferShowProgress,
|
|
640
649
|
transferLastProgress,
|
|
641
|
-
|
|
650
|
+
strings,
|
|
642
651
|
truncateTail,
|
|
643
652
|
onCancel,
|
|
644
653
|
onOpenPreview,
|
|
@@ -690,7 +699,7 @@ export const renderThumbnailQueueItem = ({
|
|
|
690
699
|
disabled,
|
|
691
700
|
transferProgress: transferProgress as number,
|
|
692
701
|
transferShowProgress,
|
|
693
|
-
|
|
702
|
+
strings,
|
|
694
703
|
truncateTail,
|
|
695
704
|
onCancel,
|
|
696
705
|
iconName: 'picture',
|
|
@@ -703,6 +712,7 @@ export const renderThumbnailQueueItem = ({
|
|
|
703
712
|
transferShowProgress,
|
|
704
713
|
transferLastProgress,
|
|
705
714
|
transferErrorMessage,
|
|
715
|
+
strings,
|
|
706
716
|
truncateTail,
|
|
707
717
|
onCancel,
|
|
708
718
|
})
|
|
@@ -723,6 +733,7 @@ export const renderThumbnailQueueItem = ({
|
|
|
723
733
|
previewEnabled,
|
|
724
734
|
canOpenPreview,
|
|
725
735
|
truncateTail,
|
|
736
|
+
strings,
|
|
726
737
|
onOpenPreview,
|
|
727
738
|
onThumbnailImageError,
|
|
728
739
|
})}
|
|
@@ -4,6 +4,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
|
|
|
4
4
|
import { customElement, state } from 'lit/decorators.js'
|
|
5
5
|
|
|
6
6
|
import { navigateCyclic, trapTabInside, type IFileAndTransfer } from 'shared-utils/fileupload'
|
|
7
|
+
import { formatString } from 'shared-strings'
|
|
7
8
|
|
|
8
9
|
import '@/components/alert'
|
|
9
10
|
import '@/components/icon'
|
|
@@ -161,7 +162,11 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
|
|
|
161
162
|
?required=${this.required && this.uploadStrategy === 'form'}
|
|
162
163
|
accept=${this.getResolvedAcceptValue()}
|
|
163
164
|
aria-label=${ifDefined(
|
|
164
|
-
this.label
|
|
165
|
+
this.label
|
|
166
|
+
? undefined
|
|
167
|
+
: this.multiple
|
|
168
|
+
? this.pktStrings.get('fileupload').openFileDialogLabelMultiple
|
|
169
|
+
: this.pktStrings.get('fileupload').openFileDialogLabelSingle,
|
|
165
170
|
)}
|
|
166
171
|
aria-required=${ifDefined(this.required ? 'true' : undefined)}
|
|
167
172
|
aria-invalid=${ifDefined(this.hasEffectiveError ? 'true' : undefined)}
|
|
@@ -231,6 +236,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
|
|
|
231
236
|
private renderQueueItem(file: IFileAndTransfer, previewableImages: IFileAndTransfer[]) {
|
|
232
237
|
const fileSize = typeof file.file?.size === 'number' ? this.formatFileSize(file.file.size) : ''
|
|
233
238
|
const operations = this.getQueueItemOperations()
|
|
239
|
+
const fileuploadStrings = this.pktStrings.get('fileupload')
|
|
234
240
|
|
|
235
241
|
if (this.itemRenderer === 'thumbnail') {
|
|
236
242
|
const canOpenPreview = this.canOpenPreview(file)
|
|
@@ -257,7 +263,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
|
|
|
257
263
|
transferErrorMessage: file.errorMessage,
|
|
258
264
|
transferShowProgress: file.showProgress,
|
|
259
265
|
transferLastProgress: file.lastProgress,
|
|
260
|
-
|
|
266
|
+
strings: fileuploadStrings,
|
|
261
267
|
truncateTail: this.truncateTail,
|
|
262
268
|
onCancel: (fileId) => this.cancelTransfer(fileId),
|
|
263
269
|
onOpenPreview: (fileId) => this.openPreview(fileId, previewableImages),
|
|
@@ -281,7 +287,7 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
|
|
|
281
287
|
transferErrorMessage: file.errorMessage,
|
|
282
288
|
transferShowProgress: file.showProgress,
|
|
283
289
|
transferLastProgress: file.lastProgress,
|
|
284
|
-
|
|
290
|
+
strings: fileuploadStrings,
|
|
285
291
|
truncateTail: this.truncateTail,
|
|
286
292
|
onCancel: (fileId) => this.cancelTransfer(fileId),
|
|
287
293
|
})
|
|
@@ -381,7 +387,10 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
|
|
|
381
387
|
? html`<button
|
|
382
388
|
type="button"
|
|
383
389
|
class="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--prev pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--icon-only"
|
|
384
|
-
aria-label=${
|
|
390
|
+
aria-label=${formatString(fileuploadStrings.previewPrevious, {
|
|
391
|
+
index: this.previewCurrentIndex,
|
|
392
|
+
total: previewableImages.length,
|
|
393
|
+
})}
|
|
385
394
|
@click=${() => this.navigatePreview('prev', previewableImages)}
|
|
386
395
|
>
|
|
387
396
|
<pkt-icon
|
|
@@ -397,7 +406,11 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
|
|
|
397
406
|
${hasImage
|
|
398
407
|
? html`<img
|
|
399
408
|
src=${imageUrl}
|
|
400
|
-
alt=${
|
|
409
|
+
alt=${formatString(fileuploadStrings.previewImageAlt, {
|
|
410
|
+
filename,
|
|
411
|
+
index: this.previewCurrentIndex + 1,
|
|
412
|
+
total: previewableImages.length,
|
|
413
|
+
})}
|
|
401
414
|
class="pkt-fileupload__image-preview__image"
|
|
402
415
|
@error=${() => this.markImageFailed(currentImage.fileId, 'preview')}
|
|
403
416
|
/>`
|
|
@@ -417,7 +430,10 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
|
|
|
417
430
|
? html`<button
|
|
418
431
|
type="button"
|
|
419
432
|
class="pkt-fileupload__image-preview__nav pkt-fileupload__image-preview__nav--next pkt-btn pkt-btn--medium pkt-btn--secondary pkt-btn--icon-only"
|
|
420
|
-
aria-label=${
|
|
433
|
+
aria-label=${formatString(fileuploadStrings.previewNext, {
|
|
434
|
+
index: this.previewCurrentIndex + 2,
|
|
435
|
+
total: previewableImages.length,
|
|
436
|
+
})}
|
|
421
437
|
@click=${() => this.navigatePreview('next', previewableImages)}
|
|
422
438
|
>
|
|
423
439
|
<pkt-icon
|
|
@@ -435,17 +451,18 @@ export class PktFileUpload extends PktFileUploadBase implements IPktFileUpload {
|
|
|
435
451
|
|
|
436
452
|
private getQueueItemOperations(): TQueueItemOperation[] {
|
|
437
453
|
const operations: TQueueItemOperation[] = []
|
|
454
|
+
const fileuploadStrings = this.pktStrings.get('fileupload')
|
|
438
455
|
|
|
439
456
|
if (this.renameFilesEnabled && this.itemRenderer !== 'thumbnail') {
|
|
440
|
-
operations.push(createRenameOperation())
|
|
457
|
+
operations.push(createRenameOperation(fileuploadStrings))
|
|
441
458
|
}
|
|
442
459
|
|
|
443
460
|
if (this.addCommentsEnabled && this.itemRenderer !== 'thumbnail') {
|
|
444
|
-
operations.push(createCommentOperation())
|
|
461
|
+
operations.push(createCommentOperation(fileuploadStrings))
|
|
445
462
|
}
|
|
446
463
|
|
|
447
464
|
operations.push(...this.extraOperations)
|
|
448
|
-
operations.push(createRemoveOperation((fileId) => this.removeFileItem(fileId)))
|
|
465
|
+
operations.push(createRemoveOperation((fileId) => this.removeFileItem(fileId), fileuploadStrings))
|
|
449
466
|
|
|
450
467
|
return operations
|
|
451
468
|
}
|
|
@@ -583,11 +583,12 @@ export class PktHeaderGlobal extends PktElement<IPktHeaderGlobal> implements IPk
|
|
|
583
583
|
locale=${this.locale}
|
|
584
584
|
open
|
|
585
585
|
mobile-breakpoint=${this.mobileBreakpoint}
|
|
586
|
+
.strings=${this.strings}
|
|
586
587
|
></pkt-header-menu>
|
|
587
588
|
`
|
|
588
589
|
: html`
|
|
589
590
|
<nav class="pkt-header-menu pkt-header-menu--open">
|
|
590
|
-
<p class="pkt-header-menu__error"
|
|
591
|
+
<p class="pkt-header-menu__error">${this.pktStrings.get('header').menuLoadError}</p>
|
|
591
592
|
</nav>
|
|
592
593
|
`}
|
|
593
594
|
</div>
|
|
@@ -443,6 +443,21 @@ describe('pkt-header-service', () => {
|
|
|
443
443
|
expect(element.userMenu[0].title).toBe('Mine bookinger')
|
|
444
444
|
expect(element.userMenu[1].title).toBe('Innstillinger')
|
|
445
445
|
})
|
|
446
|
+
|
|
447
|
+
it('renders the icon for link items (#3675)', async () => {
|
|
448
|
+
const { element } = await createHeaderServiceTest({ 'service-name': 'Svc', 'opened-menu': 'user' })
|
|
449
|
+
element.user = { name: 'Aksel' }
|
|
450
|
+
element.userMenu = [{ title: 'Mine bookinger', iconName: 'heart', target: '/bookinger' }]
|
|
451
|
+
await element.updateComplete
|
|
452
|
+
await waitForNestedElements()
|
|
453
|
+
|
|
454
|
+
const link = element.querySelector('pkt-link[href="/bookinger"]') as HTMLElement & {
|
|
455
|
+
updateComplete: Promise<boolean>
|
|
456
|
+
}
|
|
457
|
+
await link.updateComplete
|
|
458
|
+
expect(link.getAttribute('iconname')).toBe('heart')
|
|
459
|
+
expect(link.querySelector('pkt-icon[name="heart"]')).toBeInTheDocument()
|
|
460
|
+
})
|
|
446
461
|
})
|
|
447
462
|
|
|
448
463
|
describe('events', () => {
|
|
@@ -175,7 +175,7 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
|
|
|
175
175
|
if (this.loadState === 'loading') {
|
|
176
176
|
return html`
|
|
177
177
|
<nav aria-busy="true">
|
|
178
|
-
<p class="pkt-header-menu__loading"
|
|
178
|
+
<p class="pkt-header-menu__loading">${this.pktStrings.get('header').menuLoading}</p>
|
|
179
179
|
</nav>
|
|
180
180
|
`
|
|
181
181
|
}
|
|
@@ -183,7 +183,7 @@ export class PktHeaderMenu extends PktElement<IPktHeaderMenu> implements IPktHea
|
|
|
183
183
|
if (this.loadState === 'error' || !this.localeData) {
|
|
184
184
|
return html`
|
|
185
185
|
<nav aria-hidden=${!this.open}>
|
|
186
|
-
<p class="pkt-header-menu__error"
|
|
186
|
+
<p class="pkt-header-menu__error">${this.pktStrings.get('header').menuLoadError}</p>
|
|
187
187
|
</nav>
|
|
188
188
|
`
|
|
189
189
|
}
|
|
@@ -5,7 +5,7 @@ import { PktElement } from '@/base-elements/element'
|
|
|
5
5
|
import { repeat } from 'lit/directives/repeat.js'
|
|
6
6
|
import { classMap } from 'lit/directives/class-map.js'
|
|
7
7
|
import type { IPktComboboxOption } from 'shared-types/combobox'
|
|
8
|
-
import type
|
|
8
|
+
import { formatString, type IPktStringsProps } from 'shared-strings'
|
|
9
9
|
import { uuidish } from 'shared-utils/utils'
|
|
10
10
|
import { filterOptionsBySearch } from 'shared-utils/combobox/option-utils'
|
|
11
11
|
import {
|
|
@@ -179,7 +179,7 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
|
|
|
179
179
|
name="exclamation-mark-circle"
|
|
180
180
|
size="large"
|
|
181
181
|
></pkt-icon>
|
|
182
|
-
|
|
182
|
+
${this.pktStrings.get('listbox').empty}
|
|
183
183
|
</div>`
|
|
184
184
|
}
|
|
185
185
|
|
|
@@ -258,7 +258,9 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
|
|
|
258
258
|
@keydown=${this.handleOptionKeydown}
|
|
259
259
|
>
|
|
260
260
|
<pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
|
|
261
|
-
|
|
261
|
+
${formatString(this.pktStrings.get('listbox').addValue, {
|
|
262
|
+
value: this.customUserInput ?? '',
|
|
263
|
+
})}
|
|
262
264
|
</div>
|
|
263
265
|
`
|
|
264
266
|
: nothing
|
|
@@ -270,7 +272,10 @@ export class PktListbox extends PktElement<IPktListbox> implements IPktListbox {
|
|
|
270
272
|
return this.isMultiSelect && this._selectedOptions > 0 && this.maxLength > 0
|
|
271
273
|
? html`
|
|
272
274
|
<div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
|
|
273
|
-
${this.
|
|
275
|
+
${formatString(this.pktStrings.get('listbox').maxReached, {
|
|
276
|
+
selected: this._selectedOptions,
|
|
277
|
+
max: this.maxLength,
|
|
278
|
+
})}
|
|
274
279
|
</div>
|
|
275
280
|
`
|
|
276
281
|
: nothing
|
|
@@ -60,7 +60,7 @@ export class PktMessagebox extends PktElementWithSlot implements IPktMessagebox
|
|
|
60
60
|
<button
|
|
61
61
|
@click=${this.close}
|
|
62
62
|
class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--icon-only"
|
|
63
|
-
aria-label
|
|
63
|
+
aria-label=${this.pktStrings.get('generic').close}
|
|
64
64
|
>
|
|
65
65
|
<pkt-icon name="close" class="pkt-link__icon"></pkt-icon>
|
|
66
66
|
</button>
|
|
@@ -198,13 +198,13 @@ export class PktModal extends PktElementWithSlot implements IPktModal {
|
|
|
198
198
|
? html`<div class="${classMap(closeButtonClasses)}">
|
|
199
199
|
<pkt-button
|
|
200
200
|
@click=${(event: Event) => this.close(event)}
|
|
201
|
-
aria-label
|
|
201
|
+
aria-label=${this.pktStrings.get('generic').close}
|
|
202
202
|
iconname="close"
|
|
203
203
|
variant="icon-only"
|
|
204
204
|
size="medium"
|
|
205
205
|
skin=${isCloseButtonSkinDefault ? 'tertiary' : 'primary'}
|
|
206
206
|
>
|
|
207
|
-
|
|
207
|
+
${this.pktStrings.get('generic').close}
|
|
208
208
|
</pkt-button>
|
|
209
209
|
</div>`
|
|
210
210
|
: html`<div class="pkt-modal__noCloseButton"></div>`}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
const e=require("./element-CewjrA4g.cjs");require("./button-CCR4eyt_.cjs");var t={i18n:{nb:{contentPresentation:{title:`Oslo kommune bruker informasjonskapsler`,description:[`For at nettstedet skal fungere og være trygt, bruker Oslo kommune informasjonskapsler. Noen er teknisk nødvendige, mens andre sikrer ulik funksjonalitet.`,`Godtar du alle informasjonskapsler, tillater du også at vi samler inn data om statistikk og brukeradferd. Da hjelper du oss med å lage et bedre nettsted uten at du trenger å dele noe personlig informasjon med oss.`],buttons:{accept:`Godta alle`,reject:`Kun nødvendige`,settings:`Innstillinger for informasjonskapsler`}},contentSettings:{title:`Innstillinger for informasjonskapsler`,description:[`Her kan du velge hvilke typer informasjonskapsler du vil tillate. Tillatelsen gjelder i 90 dager. Husk at nødvendige informasjonskapsler ikke kan velges bort.`,`Du kan når som helst endre innstillingene og finne mer informasjon nederst på nettstedet under «Innstillinger for informasjonskapsler» og «Personvern og informasjonskapsler».`],buttons:{back:`Tilbake`,save:`Lagre innstillinger`}}},en:{contentPresentation:{title:`Before you visit Oslo kommune ...`,description:[`This website uses cookies to make improvements. In this context, we need your consent to measure the traffic on the website in relation to statistics and feedback.`,`To read more about what we use cookies for, go to our privacy declaration which you will find at the bottom of our websites.`],buttons:{accept:`Yes, I accept`,reject:`Only necessary`,settings:`Go to settings`}},contentSettings:{title:`Her kan du aktivt velge mellom ulike informasjonskapsler`,description:[`For å lese mer om hva vi bruker informasjonskapsler til gå til vår personvernserklering som du finner på våre nettsider`],buttons:{back:`Back`,save:`Save settings`}}}},cookies:[{name:`statistics`,defaultValue:null,i18n:{nb:{title:`Statistikk og analyse`,description:`Jeg godtar at Oslo kommune bruker informasjonskapsler til å innhente data om statistikk og brukeradferd.`,buttons:{yes:`Ja`,no:`Nei`}},en:{title:`Statistics and analytics`,description:`Select your preference for statistics and analytics`,buttons:{yes:`Yes`,no:`No`}}}},{name:`survey`,defaultValue:null,i18n:{nb:{title:`Skriftlige tilbakemeldinger`,description:`Jeg godtar at Oslo kommune bruker informasjonskapsler til å vise responsfelt og registrere tilbakemeldinger.`,buttons:{yes:`Ja`,no:`Nei`}},en:{title:`Survey`,description:`Select your preference for survey`,buttons:{yes:`Yes`,no:`No`}}}},{name:`functional`,defaultValue:!0,i18n:{nb:{title:`Funksjonelle informasjonskapsler`,description:`Jeg godtar at Oslo kommune bruker informasjonskapsler for å gjøre ulike funksjoner på nettstedet mulige (for eksempel skjemaer og barnehagevelger).`,buttons:{yes:`Ja`,no:`Nei`}},en:{title:`Functional cookies`,description:`For the website to function optimally, we recommend that you accept these cookies`,buttons:{yes:`Yes`,no:`No`}}}}]},n=null;function r(){return n||(n=new Promise((e,t)=>{if(document.querySelector(`#oslo-consent-script`)){e();return}let n=document.createElement(`script`);n.src=`https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.js`,n.id=`oslo-consent-script`,n.onload=()=>e(),n.onerror=t,document.head.appendChild(n);let r=document.createElement(`link`);r.href=`https://cdn.web.oslo.kommune.no/cb/cb-v1.1.0.css`,r.type=`text/css`,r.rel=`stylesheet`,r.id=`oslo-consent-styles`,document.head.appendChild(r)}),n)}var i=e=>{if(typeof e!=`string`)return e;try{return JSON.parse(e)}catch{return e}},a=e=>i(e.value).items.reduce((e,t)=>(e[t.name]=t.consent,e),{}),o=class extends e.t{constructor(...e){super(...e),this.devMode=!1,this.hotjarId=null,this.googleAnalyticsId=null,this.cookieDomain=null,this.cookieSecure=null,this.cookieExpiryDays=null,this.triggerType=`button`,this.triggerText=null,this.i18nLanguage=`nb`}connectedCallback(){super.connectedCallback();let e=this.i18nLanguage;this.triggerText=this.triggerText||t.i18n[e].contentPresentation.buttons.settings}disconnectedCallback(){super.disconnectedCallback(),this._cookieEventHandler&&window.__cookieEvents?.off(`CookieManager.setCookie`,this._cookieEventHandler)}returnJsonOrObject(e){return i(e)}emitCookieConsents(e){this.dispatchEvent(new CustomEvent(`toggle-consent`,{detail:a(e),bubbles:!0,cancelable:!1}))}async firstUpdated(e){window.cookieBanner_googleAnalyticsId=this.googleAnalyticsId,window.cookieBanner_hotjarId=this.hotjarId,this.cookieDomain&&(window.cookieBanner_cookieDomain=this.cookieDomain),this.cookieSecure&&(window.cookieBanner_cookieSecure=this.cookieSecure),this.cookieExpiryDays&&(window.cookieBanner_cookieExpiryDays=this.cookieExpiryDays),this.devMode&&(window.cookieBanner_devMode=this.devMode),await r(),this.triggerInit()}triggerInit(){window.document.dispatchEvent(new Event(`CookieBannerReady`,{bubbles:!0,cancelable:!0}));let e=window.cookieBanner,t=window.__cookieEvents;!e||!t||e.cookieConsent.validateConsentCookie().then(n=>{if(!n)return;let r=e.cookieConsent.getConsentCookie();window.setTimeout(()=>this.emitCookieConsents({value:r}),0),this._cookieEventHandler&&t.off(`CookieManager.setCookie`,this._cookieEventHandler),this._cookieEventHandler=e=>this.emitCookieConsents(e),t.on(`CookieManager.setCookie`,this._cookieEventHandler)})}openModal(e){e.preventDefault(),window.cookieBanner?.cookieConsent||this.triggerInit(),setTimeout(()=>window.cookieBanner?.openCookieModal())}render(){return this.triggerType===`link`?e._`<a href="#" class="pkt-link" aria-haspopup="dialog" @click=${this.openModal}
|
|
2
|
-
>${this.triggerText}</a
|
|
3
|
-
>`:this.triggerType===`footerlink`?e._`<a
|
|
4
|
-
href="#"
|
|
5
|
-
class="pkt-footer__link"
|
|
6
|
-
aria-haspopup="dialog"
|
|
7
|
-
@click=${this.openModal}
|
|
8
|
-
>${this.triggerText}</a
|
|
9
|
-
>`:this.triggerType===`icon`?e._`<pkt-button
|
|
10
|
-
skin="tertiary"
|
|
11
|
-
variant="icon-only"
|
|
12
|
-
iconName="cookie"
|
|
13
|
-
aria-haspopup="dialog"
|
|
14
|
-
@click=${this.openModal}
|
|
15
|
-
>${this.triggerText}</pkt-button
|
|
16
|
-
>`:e._`<pkt-button aria-haspopup="dialog" @click=${this.openModal}
|
|
17
|
-
>${this.triggerText}</pkt-button
|
|
18
|
-
>`}};e.n([e.u({type:Boolean})],o.prototype,`devMode`,void 0),e.n([e.u({type:String})],o.prototype,`hotjarId`,void 0),e.n([e.u({type:String})],o.prototype,`googleAnalyticsId`,void 0),e.n([e.u({type:String})],o.prototype,`cookieDomain`,void 0),e.n([e.u({type:String})],o.prototype,`cookieSecure`,void 0),e.n([e.u({type:String})],o.prototype,`cookieExpiryDays`,void 0),e.n([e.u({type:String})],o.prototype,`triggerType`,void 0),e.n([e.u({type:String})],o.prototype,`triggerText`,void 0),e.n([e.u({type:String})],o.prototype,`i18nLanguage`,void 0);try{e.d(`pkt-consent`)(o)}catch{console.warn(`Forsøker å definere <pkt-consent>, men den er allerede definert`)}var s=o;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const e=require("./element-CewjrA4g.cjs");var t=t=>t??e.h;Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});
|