@oslokommune/punkt-elements 19.5.2 → 19.7.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 +25 -0
- package/dist/base-elements/input-element.d.ts +3 -2
- package/dist/{checkbox-_NnoYkue.cjs → checkbox-D69leWDh.cjs} +3 -3
- package/dist/{checkbox-Bbxt-tVW.js → checkbox-Tq8ESzwH.js} +6 -3
- package/dist/combobox-BfdvXLBz.cjs +139 -0
- package/dist/{combobox-CjLX_Gfd.js → combobox-CMpYhgln.js} +47 -423
- package/dist/components/checkbox/checkbox.d.ts +2 -1
- package/dist/components/combobox/combobox-base.d.ts +2 -2
- package/dist/components/combobox/combobox.d.ts +9 -26
- package/dist/components/input-wrapper/input-wrapper.d.ts +5 -2
- package/dist/components/radiobutton/radiobutton.d.ts +2 -0
- package/dist/{datepicker-CFCRxFQL.js → datepicker-Bs7Z3EFn.js} +1 -1
- package/dist/{datepicker-Bk-m5Zaa.cjs → datepicker-CWHYYj-H.cjs} +1 -1
- package/dist/docs/components/radio-checkbox-sizes.d.ts +10 -0
- package/dist/{fileupload-B2606SvG.js → fileupload-BQFJx1ok.js} +1 -1
- package/dist/{fileupload-COAxc3sX.cjs → fileupload-CMIFZWJ5.cjs} +1 -1
- package/dist/{header-BhM7FRoC.cjs → header-C4Uojzoy.cjs} +1 -1
- package/dist/{header-BQdc29IO.js → header-Cc1Cy0U3.js} +1 -1
- package/dist/{input-wrapper-Bz9GwYrn.js → input-wrapper-BoTugCvh.js} +13 -3
- package/dist/{input-wrapper-BBG8EXQ8.cjs → input-wrapper-J3mEKhvR.cjs} +3 -3
- 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-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-header.cjs +1 -1
- package/dist/pkt-header.js +1 -1
- package/dist/pkt-index.cjs +1 -1
- package/dist/pkt-index.js +17 -17
- package/dist/pkt-input-wrapper.cjs +1 -1
- package/dist/pkt-input-wrapper.js +1 -1
- package/dist/pkt-radiobutton.cjs +1 -1
- package/dist/pkt-radiobutton.js +1 -1
- package/dist/pkt-select.cjs +1 -1
- package/dist/pkt-select.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/{radiobutton-C3kEjvHQ.cjs → radiobutton-BPr22VmL.cjs} +3 -3
- package/dist/{radiobutton-D9htviZG.js → radiobutton-l_3oGDbb.js} +6 -3
- package/dist/{select-BuQxosyi.cjs → select-CZYQ5Dmx.cjs} +1 -1
- package/dist/{select-BizHes0n.js → select-DYjKMmHa.js} +1 -1
- package/dist/shared-types/checkbox.d.ts +3 -1
- package/dist/shared-types/combobox.d.ts +73 -5
- package/dist/shared-types/index.d.ts +3 -1
- package/dist/shared-types/size.d.ts +3 -2
- package/dist/{textarea-CL1yUDVL.js → textarea-C2oaRlfb.js} +1 -1
- package/dist/{textarea-BXadsEdL.cjs → textarea-H1Lt2o6K.cjs} +1 -1
- package/dist/{textinput-Csil0Zda.js → textinput-C0eu70sH.js} +1 -1
- package/dist/{textinput-qi0f5NZH.cjs → textinput-C2Tx-OrN.cjs} +1 -1
- package/dist/{timepicker-DNoYMBAL.js → timepicker-B8TwchA2.js} +1 -1
- package/dist/{timepicker-CvL2-Siz.cjs → timepicker-DZG_gHIa.cjs} +1 -1
- package/package.json +2 -2
- package/src/components/checkbox/checkbox.test.ts +26 -0
- package/src/components/checkbox/checkbox.ts +3 -2
- package/src/components/combobox/combobox-base.ts +14 -8
- package/src/components/combobox/combobox-value.ts +2 -2
- package/src/components/combobox/combobox.attributes.test.ts +3 -2
- package/src/components/combobox/combobox.ts +26 -26
- package/src/components/input-wrapper/input-wrapper.test.ts +54 -0
- package/src/components/input-wrapper/input-wrapper.ts +12 -2
- package/src/components/input-wrapper/wrapper-parity.test.ts +9 -0
- package/src/components/radiobutton/radiobutton.test.ts +26 -0
- package/src/components/radiobutton/radiobutton.ts +3 -1
- package/dist/combobox-BBx87DCG.cjs +0 -139
|
@@ -633,3 +633,57 @@ describe('PktInputWrapper', () => {
|
|
|
633
633
|
})
|
|
634
634
|
})
|
|
635
635
|
})
|
|
636
|
+
|
|
637
|
+
describe('PktInputWrapper options container', () => {
|
|
638
|
+
const mount = async (attributes: string) => {
|
|
639
|
+
document.body.innerHTML = `<pkt-input-wrapper forId="g" label="Gruppe" ${attributes}><span class="valg">Valg</span></pkt-input-wrapper>`
|
|
640
|
+
const wrapper = document.querySelector('pkt-input-wrapper') as CustomElementFor<'pkt-input-wrapper'>
|
|
641
|
+
await wrapper.updateComplete
|
|
642
|
+
return wrapper
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
afterEach(() => {
|
|
646
|
+
document.body.innerHTML = ''
|
|
647
|
+
})
|
|
648
|
+
|
|
649
|
+
test('wraps the options of a fieldset in a vertical options container', async () => {
|
|
650
|
+
const wrapper = await mount('hasFieldset')
|
|
651
|
+
|
|
652
|
+
const options = wrapper.querySelector('.pkt-inputwrapper__options')
|
|
653
|
+
expect(options).not.toHaveClass('pkt-inputwrapper__options--horizontal')
|
|
654
|
+
expect(options?.querySelector('.valg')).toBeInTheDocument()
|
|
655
|
+
})
|
|
656
|
+
|
|
657
|
+
test('lays the options out horizontally with layout="horizontal"', async () => {
|
|
658
|
+
const wrapper = await mount('hasFieldset layout="horizontal"')
|
|
659
|
+
|
|
660
|
+
expect(wrapper.querySelector('.pkt-inputwrapper__options')).toHaveClass(
|
|
661
|
+
'pkt-inputwrapper__options--horizontal',
|
|
662
|
+
)
|
|
663
|
+
})
|
|
664
|
+
|
|
665
|
+
test('uses the options container for horizontal layout without a fieldset', async () => {
|
|
666
|
+
const wrapper = await mount('layout="horizontal"')
|
|
667
|
+
|
|
668
|
+
expect(wrapper.querySelector('.pkt-inputwrapper__options--horizontal .valg')).toBeInTheDocument()
|
|
669
|
+
})
|
|
670
|
+
|
|
671
|
+
test('keeps the markup unchanged without a fieldset and horizontal layout', async () => {
|
|
672
|
+
const wrapper = await mount('')
|
|
673
|
+
|
|
674
|
+
expect(wrapper.querySelector('.pkt-inputwrapper__options')).toBeNull()
|
|
675
|
+
expect(wrapper.querySelector('.pkt-contents .valg')).toBeInTheDocument()
|
|
676
|
+
})
|
|
677
|
+
|
|
678
|
+
test('switches layout when the property changes', async () => {
|
|
679
|
+
const wrapper = await mount('hasFieldset')
|
|
680
|
+
|
|
681
|
+
wrapper.layout = 'horizontal'
|
|
682
|
+
await wrapper.updateComplete
|
|
683
|
+
|
|
684
|
+
expect(wrapper.querySelector('.pkt-inputwrapper__options')).toHaveClass(
|
|
685
|
+
'pkt-inputwrapper__options--horizontal',
|
|
686
|
+
)
|
|
687
|
+
expect(wrapper.querySelectorAll('.valg')).toHaveLength(1)
|
|
688
|
+
})
|
|
689
|
+
})
|
|
@@ -8,7 +8,7 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js'
|
|
|
8
8
|
import { customElement, property } from 'lit/decorators.js'
|
|
9
9
|
import { ElementProps } from '@/types/typeUtils'
|
|
10
10
|
import { uuidish } from 'shared-utils/utils'
|
|
11
|
-
import { booleanishConverter, type Booleanish } from 'shared-types'
|
|
11
|
+
import { booleanishConverter, type Booleanish, type TLayout } from 'shared-types'
|
|
12
12
|
import { FocusModalityController } from '@/controllers/focus-modality-controller'
|
|
13
13
|
import specs from 'componentSpecs/input-wrapper.json'
|
|
14
14
|
import '@/components/helptext'
|
|
@@ -38,6 +38,7 @@ type Props = ElementProps<
|
|
|
38
38
|
| 'inline'
|
|
39
39
|
| 'ariaDescribedby'
|
|
40
40
|
| 'hasFieldset'
|
|
41
|
+
| 'layout'
|
|
41
42
|
| 'useWrapper'
|
|
42
43
|
| 'role'
|
|
43
44
|
> &
|
|
@@ -51,6 +52,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
|
|
|
51
52
|
@property({ type: String }) label: string = ''
|
|
52
53
|
@property({ type: String }) helptext: string | null = null
|
|
53
54
|
@property({ type: String }) helptextDropdown: string | null = null
|
|
55
|
+
/** @deprecated Bruk `strings={{ forms: { readMore: '…' } }}` eller `setPktStrings()`. */
|
|
54
56
|
@property({ type: String }) helptextDropdownButton: string | null = null
|
|
55
57
|
@property({ type: Boolean }) counter: boolean = specs.props.counter.default
|
|
56
58
|
@property({ type: Number }) counterCurrent: number = 0
|
|
@@ -71,6 +73,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
|
|
|
71
73
|
@property({ type: Boolean }) inline: boolean = specs.props.inline.default
|
|
72
74
|
@property({ type: String }) ariaDescribedby: string | undefined = undefined
|
|
73
75
|
@property({ type: Boolean }) hasFieldset: boolean = specs.props.hasFieldset.default
|
|
76
|
+
@property({ type: String }) layout: TLayout = specs.props.layout.default as TLayout
|
|
74
77
|
@property({ type: String, reflect: true }) role: string | null = null
|
|
75
78
|
@property({ type: Boolean, reflect: true, converter: booleanishConverter })
|
|
76
79
|
useWrapper: Booleanish = specs.props.useWrapper.default
|
|
@@ -221,7 +224,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
|
|
|
221
224
|
${labelElement()}
|
|
222
225
|
${helptextElement()}
|
|
223
226
|
${this.counterPosition === 'top' ? counterElement() : nothing}
|
|
224
|
-
<div class
|
|
227
|
+
<div class=${this.optionsClass()}>${slotContent(this)}</div>
|
|
225
228
|
${this.counterPosition === 'bottom' ? counterElement() : nothing}
|
|
226
229
|
${errorElement()}
|
|
227
230
|
`
|
|
@@ -238,6 +241,13 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
|
|
|
238
241
|
return wrapperElement()
|
|
239
242
|
}
|
|
240
243
|
|
|
244
|
+
private optionsClass(): string {
|
|
245
|
+
if (!this.hasFieldset && this.layout !== 'horizontal') return 'pkt-contents'
|
|
246
|
+
return this.layout === 'horizontal'
|
|
247
|
+
? 'pkt-inputwrapper__options pkt-inputwrapper__options--horizontal'
|
|
248
|
+
: 'pkt-inputwrapper__options'
|
|
249
|
+
}
|
|
250
|
+
|
|
241
251
|
private toggleDropdown(e: CustomEvent) {
|
|
242
252
|
this.dispatchEvent(
|
|
243
253
|
new CustomEvent('toggleHelpText', {
|
|
@@ -64,6 +64,15 @@ const OMITTED: Record<string, Partial<Record<keyof typeof COMPONENTS, string>>>
|
|
|
64
64
|
timepicker: 'teller over feltet er aldri støttet',
|
|
65
65
|
fileupload: 'teller over feltet er aldri støttet',
|
|
66
66
|
},
|
|
67
|
+
layout: {
|
|
68
|
+
textinput: 'layout gjelder alternativer i en gruppe, ikke ett felt',
|
|
69
|
+
textarea: 'layout gjelder alternativer i en gruppe, ikke ett felt',
|
|
70
|
+
select: 'layout gjelder alternativer i en gruppe, ikke ett felt',
|
|
71
|
+
combobox: 'layout gjelder alternativer i en gruppe, ikke ett felt',
|
|
72
|
+
datepicker: 'layout gjelder alternativer i en gruppe, ikke ett felt',
|
|
73
|
+
timepicker: 'layout gjelder alternativer i en gruppe, ikke ett felt',
|
|
74
|
+
fileupload: 'layout gjelder alternativer i en gruppe, ikke ett felt',
|
|
75
|
+
},
|
|
67
76
|
hasFieldset: {
|
|
68
77
|
fileupload: 'ikke støttet',
|
|
69
78
|
},
|
|
@@ -271,3 +271,29 @@ describe('pkt-radiobutton', () => {
|
|
|
271
271
|
expect(results).toHaveNoViolations()
|
|
272
272
|
})
|
|
273
273
|
})
|
|
274
|
+
|
|
275
|
+
describe('pkt-radiobutton inputSize', () => {
|
|
276
|
+
const root = async (attributes = '') => {
|
|
277
|
+
document.body.innerHTML = `<pkt-radiobutton id="s" name="s" label="Valg" ${attributes}></pkt-radiobutton>`
|
|
278
|
+
const el = document.querySelector('pkt-radiobutton') as HTMLElement & { updateComplete: Promise<unknown> }
|
|
279
|
+
await el.updateComplete
|
|
280
|
+
return el.querySelector('.pkt-input-check') as HTMLElement
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
afterEach(() => {
|
|
284
|
+
document.body.innerHTML = ''
|
|
285
|
+
})
|
|
286
|
+
|
|
287
|
+
test('adds no size class without input-size, so the size is inherited', async () => {
|
|
288
|
+
expect((await root()).className).toBe('pkt-input-check')
|
|
289
|
+
})
|
|
290
|
+
|
|
291
|
+
test('adds the size class for input-size', async () => {
|
|
292
|
+
expect(await root('input-size="small"')).toHaveClass('pkt-input-check--small')
|
|
293
|
+
expect(await root('input-size="xsmall"')).toHaveClass('pkt-input-check--xsmall')
|
|
294
|
+
})
|
|
295
|
+
|
|
296
|
+
test('adds the medium class when medium is set explicitly', async () => {
|
|
297
|
+
expect(await root('input-size="medium"')).toHaveClass('pkt-input-check--medium')
|
|
298
|
+
})
|
|
299
|
+
})
|
|
@@ -5,6 +5,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
|
|
|
5
5
|
import { html, nothing } from 'lit'
|
|
6
6
|
import { classMap } from 'lit/directives/class-map.js'
|
|
7
7
|
import { ElementProps } from '@/types/typeUtils'
|
|
8
|
+
import type { TPktInputSize } from 'shared-types'
|
|
8
9
|
|
|
9
10
|
type Props = ElementProps<
|
|
10
11
|
PktRadioButton,
|
|
@@ -27,6 +28,7 @@ export class PktRadioButton extends PktInputElement<Props> {
|
|
|
27
28
|
@property({ type: Boolean }) hasTile: boolean = false
|
|
28
29
|
@property({ type: Boolean, reflect: true }) checked: boolean | string | null = null
|
|
29
30
|
@property({ type: String, reflect: true }) type: string = 'radio'
|
|
31
|
+
@property({ type: String, attribute: 'input-size' }) inputSize: TPktInputSize | undefined = undefined
|
|
30
32
|
@property({ type: String }) tagText: string | null = null
|
|
31
33
|
@property({ type: Boolean }) optionalTag: boolean = false
|
|
32
34
|
/** @deprecated Bruk `strings={{ forms: { optional: '…' } }}` eller `setPktStrings()`. */
|
|
@@ -113,7 +115,7 @@ export class PktRadioButton extends PktInputElement<Props> {
|
|
|
113
115
|
}
|
|
114
116
|
|
|
115
117
|
return html`
|
|
116
|
-
<div class="pkt-input-check">
|
|
118
|
+
<div class="pkt-input-check${this.inputSize ? ` pkt-input-check--${this.inputSize}` : ''}">
|
|
117
119
|
<div class=${inputTileClasses}>
|
|
118
120
|
<input
|
|
119
121
|
id=${this.id + '-internal'}
|
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-D7sTqOr3.cjs");require("./icon-Dnv6LtPC.cjs");const i=require("./if-defined-2mkIDgOm.cjs"),a=require("./ref-Emu5PNxk.cjs");require("./tag-B5dUg7AD.cjs");const o=require("./repeat-Dh9YKoeV.cjs"),s=require("./listbox-g-vHHLkD.cjs"),c=require("./input-element-CSfDGslx.cjs"),l=require("./pkt-options-controller-CpEZcomb.cjs"),u=require("./input-wrapper-BBG8EXQ8.cjs");var d=(e,t,n)=>{switch(e){case`,`:return n?`addValue`:null;case`Enter`:return`addValue`;case`Tab`:case`ArrowDown`:return t?null:`focusListbox`;case`Escape`:return`closeOptions`;default:return null}},f=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=s.i(n,e);return!t.includes(e)&&!a?r?{action:`addUserValue`,value:e}:i?{action:`none`,value:null}:{action:`removeValue`,value:t[0]}:a&&!t.includes(a.value)?{action:`selectOption`,value:a.value}:{action:`none`,value:null}},p=(e,t,n,r,i)=>e.trim().toLowerCase()?{...s.c(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},m=(e,t,n)=>{let r=s.i(t,e);return n===`label`&&r?.label?r.label:e},h={markOptionSelected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!0;break}}},markOptionDeselected(e,t){if(t){for(let n of e)if(n.value===t){n.selected=!1;break}}},markAllSelected(e){for(let t of e)t.selected=!0},markAllDeselected(e){for(let t of e)t.selected=!1},removeUserAddedOptions(e){return e.filter(e=>!e.userAdded)}},g={parseOptionsFromSlot(e){let t=[];return e.forEach(e=>{if(!e.textContent&&!e.getAttribute(`value`))return;let n={value:e.getAttribute(`value`)||e.textContent||``,label:e.textContent||e.getAttribute(`value`)||``};e.getAttribute(`data-prefix`)&&(n.prefix=e.getAttribute(`data-prefix`)||void 0),e.getAttribute(`tagskincolor`)&&(n.tagSkinColor=e.getAttribute(`tagskincolor`)),e.getAttribute(`description`)&&(n.description=e.getAttribute(`description`)||void 0),n.fulltext=s.r(n),t.push(n)}),t}},_={cloneOptions(e){return Array.isArray(e)?e.map(e=>({...e})):[]},syncOptionsWithValues(e,t){let n=[...t];return e.forEach(e=>{e.value&&!e.label&&(e.label=e.value),e.selected&&!n.includes(e.value)&&n.push(e.value),e.fulltext=s.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t,n){return[...t.filter(e=>e?.userAdded&&n.includes(e.value)).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},v={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,"dark-mode":!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,category:`tech`},form:{name:`Skjema`,description:`ID-en til skjemaet feltet hører til, når feltet ligger utenfor skjemaet`,type:`string`,required:!1,category:`tech`},id:{type:`string`,name:`ID`,description:`Unik ID for feltet`,category:`tech`},label:{type:`string`,name:`Etikett/label`,description:`Tekst som vises over feltet`,category:`contents`},placeholder:{name:`Hint`,description:`Spesifiserer en kort hint som beskriver forventet verdi av feltet.`,type:`string`,category:`contents`,required:!1},multiple:{type:`boolean`,name:`Flervalg`,default:!1,description:`Mulighet for å velge flere valg`,category:`functionality`},tagPlacement:{attribute:`tag-placement`,type:[`inside`,`outside`],name:`Plassering av tags i flervalg`,description:`Plassering av valgte verdier i feltet ved flervalg`,category:`functionality`,showIf:{multiple:!0}},maxlength:{type:`number`,name:`Maks antall i flervalg`,description:`Maks antall valg dersom flervalg er aktivert`,category:`functionality`,showIf:{multiple:!0}},typeahead:{type:`boolean`,name:`Typeahead`,default:!1,description:`Mulighet for automatisk utfylling av feltet fra listen over valg`,category:`functionality`},includeSearch:{attribute:`include-search`,type:`boolean`,name:`Inkluder søk`,description:`Mulighet for å søke etter valg inni dropdown`,category:`functionality`},allowUserInput:{attribute:`allow-user-input`,type:`boolean`,name:`Brukervalgte verdier`,description:`Mulighet for å skrive inn egne verdier`,category:`functionality`},searchPlaceholder:{attribute:`search-placeholder`,type:`string`,name:`Søke-plassholder`,description:`Plassholdertekst for søkefeltet i dropdown`,category:`contents`,showIf:{includeSearch:!0}},displayValueAs:{attribute:`display-value-as`,type:[`label`,`value`,`prefixAndValue`],name:`Visning av valgt verdi`,description:`Hvordan valgt verdi vises i feltet`,default:`label`,category:`ui`},inputSize:{name:`Størrelse`,description:`Visuell størrelse via input-wrapper. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,category:`ui`},value:{name:`Verdi`,type:`string`,description:`Valgt verdi. Streng ved enkelt valg, array av strenger ved flervalg.`,category:`tech`},helptext:{type:`string`,name:`Hjelpetekst`,description:`Hjelpetekst som vises over feltet`,category:`contents`},helptextDropdown:{attribute:`helptextdropdown`,type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},helptextDropdownButton:{attribute:`helptextdropdownbutton`,type:`string`,name:`Knappetekst for hjelpetekst`,description:`Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst`,category:`contents`,default:`Les mer`},disabled:{type:`boolean`,name:`Deaktivert`,description:`Feltet er deaktivert`,category:`tech`},hasError:{attribute:`haserror`,type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},errorMessage:{attribute:`errormessage`,type:`string`,name:`Feilmelding`,description:`Tekst som vises under feltet ved feil`,category:`contents`},required:{type:`boolean`,name:`Påkrevd`,description:`Feltet må fylles ut`,category:`tech`},requiredTag:{attribute:`requiredtag`,type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{attribute:`requiredtext`,type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{attribute:`optionaltag`,type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{attribute:`optionaltext`,type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},tagText:{attribute:`tagtext`,type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},fullwidth:{type:`boolean`,name:`Full bredde`,description:`Skal feltet ta opp hele bredden?`,category:`ui`},defaultOptions:{attribute:`default-options`,name:`Initielle valg (default options)`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter (denne vil ikke modifiseres ved endring innad i komponenten)`,type:`IPktComboboxOption[]`,default:[],previewDefault:[{value:`bfr`,label:`Frogner`},{value:`bgo`,label:`Gamle Oslo`},{value:`bgr`,label:`Grorud`},{value:`bxx`,label:`Andre bydeler`}],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},options:{name:`Valg`,type:`IPktComboboxOption[]`,description:`Liste over valg som kan velges, om options sendes inn som array med objekter`,default:[],items:{type:`object`,properties:{value:{type:`string`,description:`Verdi som sendes ved valg`},label:{type:`string`,description:`Tekst som vises for valget`},prefix:{type:`string`,description:`Tekst som vises før valget`},description:{type:`string`,description:`Beskrivelse av valget`},disabled:{type:`boolean`,description:`Valget er deaktivert`},selected:{type:`boolean`,description:`Valget er valgt`},tagSkinColor:{type:[`blue`,`blue-dark`,`blue-light`,`green`,`red`,`yellow`,`beige`,`gray`,`grey`],description:`Farge på tag`}},required:[`value`]},category:`contents`},inline:{name:`Inline`,type:`boolean`,required:!1,default:!1,description:`Angir om feltet skal flyte med teksten`,category:`ui`},useWrapper:{attribute:`usewrapper`,name:`Bruk wrapper`,type:`boolean`,required:!1,displayAsFalse:!0,default:!0,description:`Indikerer om skjemaelementet skal bruke en wrapper`,category:`ui`},hasFieldset:{attribute:`hasfieldset`,name:`Bruk fieldset`,type:`boolean`,required:!1,default:null,description:`Bruk fieldset og legend i stedet for label. Utledes automatisk når feltet ikke har en input.`,category:`ui`},counter:{name:`Teller`,type:`boolean`,required:!1,default:null,description:`Viser teller under feltet. Slås på av seg selv når det finnes en grense å telle mot; sett til false for å skru den av.`,category:`ui`},defaultValue:{attribute:`defaultvalue`,type:`string | string[]`,name:`Standardverdi`,description:`Verdien feltet får ved oppstart og ved nullstilling av skjemaet`,category:`functionality`}},events:{change:{type:`Event`,description:`Returnerer valgt verdi som streng. Ved flervalg returneres kommaseparerte verdier.`},"value-change":{type:`CustomEvent`,description:`Returnerer valgt verdi. Ved enkeltvalg en streng, ved flervalg en <code>string[]</code>.`},search:{type:`CustomEvent`,description:`Returnerer søketeksten som streng i <code>event.detail</code> når brukeren skriver i søkefeltet`},toggleHelpText:{type:`CustomEvent`,description:`Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes`}}},y=class extends c.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder=null,this.multiple=!1,this.maxlength=null,this.displayValueAs=v.props.displayValueAs.default,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._messageValue=null,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._skipInputTab=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=a.t(),this.triggerRef=a.t(),this.listboxRef=a.t(),this._pendingDispatchFrom=null,this.optionsController=new l.t(this)}get _hasTextInput(){return this.typeahead||this.allowUserInput}get _selectionDescription(){if(!(!this.multiple||this._value.length===0))return`${this._value.length} valgt`}focusTrigger(){this._hasTextInput?this.inputRef.value?.focus():this.triggerRef.value?.focus()}focusAfterCommit(){this._skipInputTab=!0;let e=this.inputRef.value;e&&e.type!==`hidden`&&e.setAttribute(`tabindex`,`-1`),this.triggerRef.value?.focus()}restoreInputTab(){this._skipInputTab=!1}parseValue(){return this.parseToValues(this.value)}parseToValues(e){return Array.isArray(e)?this.multiple?e:e.length>0?[e[0]]:[]:e&&this.multiple?e.split(`,`):e?[e]:[]}updateMaxReached(){this._maxIsReached=s.l(this._value.length,this.maxlength)}syncPublicValue(){let e=this.multiple?this._value.join(`,`):this._value[0]||``;e!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this.value=e)}dispatchValueChange(e){let t=this._value;if(e?.join(`,`)!==t.join(`,`)){let e=this.multiple?[...t]:t[0]||``;this.onChange(e)}else t.length===0&&e&&e.length>0&&this.clearInputValue()}onChange(e){this.touched=!0,super.onChange(e)}valueChanged(){}};e.n([e.u({type:String,reflect:!0})],y.prototype,`value`,void 0),e.n([e.u({type:Array})],y.prototype,`options`,void 0),e.n([e.u({type:Array,attribute:`default-options`})],y.prototype,`defaultOptions`,void 0),e.n([e.u({type:Boolean,attribute:`allow-user-input`})],y.prototype,`allowUserInput`,void 0),e.n([e.u({type:Boolean})],y.prototype,`typeahead`,void 0),e.n([e.u({type:Boolean,attribute:`include-search`})],y.prototype,`includeSearch`,void 0),e.n([e.u({type:String,attribute:`search-placeholder`})],y.prototype,`searchPlaceholder`,void 0),e.n([e.u({type:Boolean})],y.prototype,`multiple`,void 0),e.n([e.u({type:Number})],y.prototype,`maxlength`,void 0),e.n([e.u({type:String,attribute:`display-value-as`})],y.prototype,`displayValueAs`,void 0),e.n([e.u({type:String,attribute:`tag-placement`})],y.prototype,`tagPlacement`,void 0),e.n([e.u({type:Boolean,attribute:`open`})],y.prototype,`isOpen`,void 0),e.n([e.l()],y.prototype,`_options`,void 0),e.n([e.l()],y.prototype,`_value`,void 0),e.n([e.l()],y.prototype,`_isOptionsOpen`,void 0),e.n([e.l()],y.prototype,`_userInfoMessage`,void 0),e.n([e.l()],y.prototype,`_messageValue`,void 0),e.n([e.l()],y.prototype,`_addValueText`,void 0),e.n([e.l()],y.prototype,`_maxIsReached`,void 0),e.n([e.l()],y.prototype,`_search`,void 0),e.n([e.l()],y.prototype,`_inputFocus`,void 0),e.n([e.l()],y.prototype,`_skipInputTab`,void 0);var b=class extends y{toggleValue(e){if(this.isDisabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=s.i(this.options,e)?.value||null,n=this._value.includes(e||t||``),r=!!t,i=this._options.find(t=>t.value===e)?.disabled||!1,a=!e?.trim(),o=!this.multiple,c=this.multiple,l=s.l(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=null,h=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=c):!r&&!this.allowUserInput?(o&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`noResults`):n?(this.removeValue(t),u=!0,o&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&o?(this.removeAllSelected(),u=!0):o?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1,f=`valueSelected`,p=this._hasTextInput?m(t||``,this.options,this.displayValueAs):s.s(s.i(this.options,t),this.displayValueAs)):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`maxSelected`,d=!1,h=e):(o&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,h=e),this._isOptionsOpen=u,u||window.setTimeout(()=>{this.focusAfterCommit()},0),this._search=h||``,this.resetComboboxInput(d),this._userInfoMessage=f,this._messageValue=p,c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&s.l(this._value.length,this.maxlength)){this._userInfoMessage=`maxSelected`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,h.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=s.i(this.options,e);t&&(h.markOptionDeselected(this.options,e),t.userAdded?(this._options=[...this._options.filter(t=>t.value!==e)],this.options=[...this.options.filter(t=>t.value!==e)]):this._options.some(t=>t.value===e)?this.refreshOptionsFromValue():this._options=[...this._options,t])}addAllOptions(){if(this.multiple){if(this.maxlength&&this._options.length>this.maxlength){this._userInfoMessage=`tooManySelected`;return}this._value=this._options.map(e=>e.value),h.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],h.markAllDeselected(this._options),this._options=h.removeUserAddedOptions(this._options),this.requestUpdate()}addValue(){let e=this.inputRef.value?.value.trim()||``;if(this._search=e,e&&this._value.includes(e)){this.resetComboboxInput(!0),this._userInfoMessage=`alreadySelected`;return}this.toggleValue(e)}removeValue(e){this._value=this.multiple?this._value.filter(t=>t!==e):[],this.removeSelected(e)}addNewUserValue(e){if(!e||e.trim()===``)return;if(!this.multiple)this._value[0]&&this.removeSelected(this._value[0]),this._value=[e];else if(!s.i(this.options,e)){if(s.l(this._value.length,this.maxlength))return;this._value=[...this._value,e]}let t={value:e,label:e,userAdded:!0,selected:!0};this.options=[t,...this.options],this._options=[t,...this._options],this.resetComboboxInput(!0),this.multiple||(this._isOptionsOpen=!1,window.setTimeout(()=>{this.focusAfterCommit()},0)),this.requestUpdate()}refreshOptionsFromValue(){let e=_.cloneOptions(this.options);e.forEach(e=>e.selected=this._value.includes(e.value)),this._options=_.syncOptionsWithValues(e,this._value).options}resetComboboxInput(e=!0){this._addValueText=null,this.inputRef.value&&this.inputRef.value.type!==`hidden`&&e&&(this._search=``,this.multiple?this.inputRef.value.value=``:(this.inputRef.value.value=this._value[0]?m(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this.refreshOptionsFromValue()}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},x=class extends b{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.isDisabled)return;this.touched=!0;let t=e.target;if(this._search=t.value,this.checkForMatches(),this.typeahead){if(this._search){let{filtered:n,suggestion:r}=s.o(this.options,this._search);this._options=n,e.inputType!==`deleteContentBackward`&&r?.label&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(t.value=r.label,window.setTimeout(()=>t.setSelectionRange(this._search.length,t.value.length),0),t.selectionDirection=`backward`)}else this.refreshOptionsFromValue()}}handleFocus(){if(!this.isDisabled){if(this._skipInputTab=!1,this._suppressNextOpen){this._suppressNextOpen=!1,this._inputFocus=!0,this.requestUpdate();return}!this.multiple&&this._value[0]&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=m(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this.refreshOptionsFromValue(),this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleCloseOptions(){this._isOptionsOpen=!1,this._hasTextInput&&(this._suppressNextOpen=!0),this.focusTrigger()}handleFocusOut(e){if(this.isDisabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id===this.id||e.target?.classList?.contains(`pkt-combobox__value`)||t===this.inputRef.value||t===this.triggerRef.value||this.closeAndProcessInput()}closeAndProcessInput(){if(this._inputFocus=!1,this._addValueText=null,this._userInfoMessage=``,this._search=``,this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=this.inputRef.value.value;if(!this.multiple){if(!e)this._value[0]&&this.removeSelected(this._value[0]);else{let t=s.i(this.options,e);t&&t.value!==this._value[0]?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t.value)):!t&&this.allowUserInput&&(this._value[0]&&this.removeSelected(this._value[0]),this.addNewUserValue(e))}}else if(e!==``){let{action:t,value:n}=f(e,this._value,this.options,this.allowUserInput,this.multiple);switch(t){case`addUserValue`:this.addNewUserValue(n);break;case`selectOption`:this.setSelected(n);break;case`removeValue`:this.removeValue(n)}}!this.multiple&&this._value[0]?this.inputRef.value.value=m(this._value[0],this.options,this.displayValueAs):this.inputRef.value.value=``}this._isOptionsOpen=!1,this.onBlur()}handleBlur(){this._inputFocus=!1,this.onBlur()}handleInputClick(e){if(this.isDisabled){e.preventDefault(),e.stopImmediatePropagation();return}this._hasTextInput?(this.inputRef.value?.focus(),this.requestUpdate()):(e.stopImmediatePropagation(),e.preventDefault(),this._isOptionsOpen=!this._isOptionsOpen,this._isOptionsOpen&&this.listboxRef.value?.focusFirstOrSelectedOption())}handlePlaceholderClick(e){this.isDisabled||(e.stopPropagation(),this._hasTextInput&&this.inputRef.value?(this.inputRef.value.focus(),this._inputFocus=!0,this.requestUpdate()):(this._isOptionsOpen=!this._isOptionsOpen,this.requestUpdate()))}handleSelectOnlyKeydown(e){if(!this.isDisabled)switch(e.key){case`Enter`:case` `:case`ArrowDown`:case`ArrowUp`:e.preventDefault(),this._isOptionsOpen?this._isOptionsOpen=!1:(this._isOptionsOpen=!0,this.listboxRef.value?.focusFirstOrSelectedOption());break;case`Escape`:this._isOptionsOpen&&=(e.preventDefault(),!1);break;case`Home`:case`End`:e.preventDefault(),this._isOptionsOpen||=!0,this.listboxRef.value?.focusFirstOrSelectedOption();break;case`ArrowLeft`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.focusTag(this._value.length-1));break;case`Backspace`:case`Delete`:this.multiple&&this._value.length>0&&(e.preventDefault(),this.removeSelected(this._value[this._value.length-1]))}}handleOptionToggled(e){this.toggleValue(e.detail)}handleSearch(e){e.stopPropagation(),this._search=e.detail.toLowerCase(),this.checkForMatches()}handleInputKeydown(e){if(e.key===`Backspace`){let t=!this.inputRef.value?.value;!this._search&&t&&this.multiple&&this._value.length>0&&this.removeLastValue(e);return}if(e.key===`ArrowLeft`&&this.multiple&&this._value.length>0){let t=this.inputRef.value;if(t&&t.selectionStart===0&&!t.value){e.preventDefault(),this.focusTag(this._value.length-1);return}}let t=d(e.key,e.shiftKey,this.multiple);if(t&&!(e.key===`Tab`&&!this._isOptionsOpen)){if(t===`focusListbox`&&e.key===`Tab`&&!this.listboxRef.value?.querySelector(`[role="option"]:not([data-disabled]), [data-type="new-option"]`)){this.closeAndProcessInput();return}switch(e.preventDefault(),t){case`addValue`:this.addValue();break;case`focusListbox`:this.listboxRef.value?.focusFirstOrSelectedOption();break;case`closeOptions`:this._isOptionsOpen=!1}}}handleTagRemove(e){this.removeSelected(e),this._hasTextInput&&this.inputRef.value&&(this._inputFocus=!0,this.inputRef.value.focus(),this.requestUpdate())}getInsideTags(){return Array.from(this.querySelectorAll(`.pkt-combobox__input .pkt-combobox__tag-list pkt-tag`))}focusTag(e){let t=this.getInsideTags();t.forEach((t,n)=>{t.buttonTabindex=n===e?0:-1}),(t[e]?.querySelector(`button`))?.focus()}resetTagTabindices(){this.getInsideTags().forEach(e=>{e.buttonTabindex=-1})}handleTagKeydown(e,t){e.stopPropagation();let n=()=>{this.resetTagTabindices(),this._hasTextInput&&this.inputRef.value?this.inputRef.value.focus():this.triggerRef.value?.focus()};switch(e.key){case`ArrowLeft`:e.preventDefault(),t>0&&this.focusTag(t-1);break;case`ArrowRight`:e.preventDefault(),t<this._value.length-1?this.focusTag(t+1):n();break;case`Backspace`:case`Delete`:e.preventDefault();{let e=this._value[t],r=t>=this._value.length-1?t-1:t;this.removeSelected(e),r>=0?(this.requestUpdate(),this.updateComplete.then(()=>this.focusTag(r))):n()}break;case`Tab`:this.resetTagTabindices();break;case`Escape`:e.preventDefault(),n()}}checkForMatches(){let e=p(this.inputRef.value?.value||this._search||``,this._value,this.options,this.allowUserInput,this.multiple);if(e.shouldRemoveValue&&this.removeValue(this._value[0]),e.shouldResetInput){this.resetComboboxInput(!1);return}this._addValueText=e.addValueText,this._userInfoMessage=e.userInfoMessage}},S=class extends x{constructor(...e){super(...e),this.handleBodyClick=e=>{this._isOptionsOpen&&!this.contains(e.target)&&this.closeAndProcessInput()}}connectedCallback(){if(super.connectedCallback(),document?.body.addEventListener(`click`,this.handleBodyClick),this._options=[],this.defaultOptions&&this.defaultOptions.length){let e=this.options?.filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=_.cloneOptions(this.options)}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=g.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=g.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}if(super.willUpdate(e),e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen),e.has(`defaultOptions`)&&this.defaultOptions.length){let e=(Array.isArray(this.options)?this.options:[]).filter(e=>e.userAdded)||[];this.options=[...e,...JSON.parse(JSON.stringify(this.defaultOptions))],this._options=_.cloneOptions(this.options)}let t=e.has(`value`),n=e.has(`_value`);if(t){let e=[...this._value],t=this.parseValue();t.join(`,`)!==this._value.join(`,`)&&(this._value=t,this._options.forEach(e=>e.selected=t.includes(e.value)),this._options=[...this._options]),this._pendingDispatchFrom??=e}else n&&(this._pendingDispatchFrom??=e.get(`_value`)??[]);if(e.has(`defaultValue`)&&this.defaultValue!=null&&!this._value.length){let e=this.parseToValues(this.defaultValue);e.length&&(this._pendingDispatchFrom??=[...this._value],this._value=e,this._options.forEach(t=>t.selected=e.includes(t.value)),this._options=[...this._options])}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=_.mergeWithUserAdded(_.cloneOptions(this.options),t,this._value);this._options=n,n.length>this.options.length&&(this.options=n);let r=_.syncOptionsWithValues(this._options,this._value);this._options=r.options,r.newValues.length>this._value.length&&(this._pendingDispatchFrom??=[...this._value],this._value=r.newValues)}(t||n||e.has(`options`)||e.has(`defaultValue`))&&this.updateMaxReached(),this._pendingDispatchFrom&&this.syncPublicValue()}updated(e){if(this._pendingDispatchFrom){let e=this._pendingDispatchFrom;this._pendingDispatchFrom=null,this.dispatchValueChange(e)}if(e.has(`_search`)&&this.dispatchEvent(new CustomEvent(`search`,{detail:this._search,bubbles:!1})),!this._isOptionsOpen&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`){let e=!this.multiple&&this._value[0]?m(this._value[0],this.options,this.displayValueAs):``;this.inputRef.value.value!==e&&(this.inputRef.value.value=e)}this.classList.add(`pkt-combobox-component`),this.classList.toggle(`pkt-combobox-component--fullwidth`,!!this.fullwidth),super.updated(e)}formResetCallback(){this.touched=!1;let e=this.defaultValue||(this.multiple,``);this.value=e,this._value=this.parseValue(),this._options=this._options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this.options=this.options.filter(e=>!e.userAdded).map(e=>({...e,selected:this._value.includes(e.value)})),this._search=``,this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._inputFocus=!1,this.updateMaxReached(),this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``),this.internals.setFormValue(``),this.internals.ariaInvalid=`false`,this.requestUpdate()}attributeChangedCallback(e,t,n){if(e===`options`){this._options=_.cloneOptions(this.options);let e=_.syncOptionsWithValues(this._options,this._value);this._options=e.options,e.newValues.length>this._value.length&&(this._value=e.newValues),this._search=``}super.attributeChangedCallback(e,t,n)}render(){return e._`
|
|
2
|
-
<pkt-input-wrapper
|
|
3
|
-
${r.n(this,[`helptext`])}
|
|
4
|
-
.strings=${this.strings}
|
|
5
|
-
.size=${this.inputSize}
|
|
6
|
-
.label=${this.label}
|
|
7
|
-
.helptext=${this.helptext}
|
|
8
|
-
.helptextDropdown=${i.t(this.helptextDropdown)}
|
|
9
|
-
.helptextDropdownButton=${i.t(this.helptextDropdownButton)}
|
|
10
|
-
?fullwidth=${this.fullwidth}
|
|
11
|
-
?counter=${this.effectiveCounter(!!this.multiple&&this.maxlength!=null)}
|
|
12
|
-
.counterCurrent=${this._value.length}
|
|
13
|
-
.counterMaxLength=${this.maxlength??0}
|
|
14
|
-
?hasError=${this.hasError}
|
|
15
|
-
?inline=${this.inline}
|
|
16
|
-
?disabled=${this.isDisabled}
|
|
17
|
-
.errorMessage=${this.errorMessage}
|
|
18
|
-
?optionalTag=${this.optionalTag}
|
|
19
|
-
.optionalText=${this.optionalText}
|
|
20
|
-
?requiredTag=${this.requiredTag}
|
|
21
|
-
.requiredText=${this.requiredText}
|
|
22
|
-
.tagText=${this.tagText}
|
|
23
|
-
useWrapper=${this.useWrapper}
|
|
24
|
-
.forId=${this._hasTextInput?this.id+`-input`:this.id+`-combobox`}
|
|
25
|
-
?hasFieldset=${this.effectiveHasFieldset(!this._hasTextInput)}
|
|
26
|
-
class="pkt-combobox__wrapper"
|
|
27
|
-
@labelClick=${this.handleInputClick}
|
|
28
|
-
>
|
|
29
|
-
<div class="pkt-combobox" @focusout=${this.handleFocusOut}>
|
|
30
|
-
<div
|
|
31
|
-
class=${t.t({"pkt-combobox__input":!0,[`pkt-combobox__input--${this.inputSize}`]:!0,"pkt-combobox__input--fullwidth":this.fullwidth,"pkt-combobox__input--open":this._isOptionsOpen,"pkt-combobox__input--error":this.hasError,"pkt-combobox__input--disabled":this.isDisabled})}
|
|
32
|
-
id=${i.t(this._hasTextInput?void 0:`${this.id}-combobox`)}
|
|
33
|
-
role=${i.t(this._hasTextInput?void 0:`combobox`)}
|
|
34
|
-
aria-expanded=${i.t(this._hasTextInput?void 0:this._isOptionsOpen?`true`:`false`)}
|
|
35
|
-
aria-controls=${i.t(this._hasTextInput?void 0:`${this.id}-listbox`)}
|
|
36
|
-
aria-haspopup=${i.t(this._hasTextInput?void 0:`listbox`)}
|
|
37
|
-
aria-describedby=${i.t(this._hasTextInput?void 0:this._describedBy())}
|
|
38
|
-
aria-labelledby=${i.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
|
|
39
|
-
aria-activedescendant=${i.t(!this._hasTextInput&&this._isOptionsOpen&&this._value[0]&&s.i(this.options,this._value[0])?`${this.id}-listbox-${s.a(this._options,this._value[0])}`:void 0)}
|
|
40
|
-
aria-description=${i.t(this._selectionDescription||void 0)}
|
|
41
|
-
tabindex=${this._hasTextInput||this.isDisabled?`-1`:`0`}
|
|
42
|
-
@click=${this.handleInputClick}
|
|
43
|
-
@keydown=${this._hasTextInput?e.h:this.handleSelectOnlyKeydown}
|
|
44
|
-
@blur=${this.restoreInputTab}
|
|
45
|
-
${a.n(this.triggerRef)}
|
|
46
|
-
>
|
|
47
|
-
${!this._hasTextInput&&this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement==`outside`)&&!this._inputFocus?e._`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
48
|
-
>${this.placeholder}</span
|
|
49
|
-
>`:this.tagPlacement===`outside`?e.h:this.renderSingleOrMultipleValues()}
|
|
50
|
-
${this.renderInputField()}
|
|
51
|
-
<pkt-icon
|
|
52
|
-
class=${t.t({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
|
|
53
|
-
name="chevron-thin-down"
|
|
54
|
-
aria-hidden="true"
|
|
55
|
-
></pkt-icon>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<pkt-listbox
|
|
59
|
-
id="${this.id}-listbox"
|
|
60
|
-
.options=${this._options}
|
|
61
|
-
.isOpen=${this._isOptionsOpen}
|
|
62
|
-
.searchPlaceholder=${this.searchPlaceholder}
|
|
63
|
-
.label="Liste: ${this.label||``}"
|
|
64
|
-
?disabled=${this.isDisabled}
|
|
65
|
-
?include-search=${this.includeSearch}
|
|
66
|
-
?is-multi-select=${this.multiple}
|
|
67
|
-
?allow-user-input=${this.allowUserInput&&!this._maxIsReached}
|
|
68
|
-
?max-is-reached=${this._maxIsReached}
|
|
69
|
-
.customUserInput=${i.t(this._addValueText)}
|
|
70
|
-
.userMessage=${this._userInfoMessage?n.t(this.pktStrings.get(`combobox`)[this._userInfoMessage],{value:this._messageValue??``}):``}
|
|
71
|
-
@search=${this.handleSearch}
|
|
72
|
-
@option-toggle=${this.handleOptionToggled}
|
|
73
|
-
@select-all=${this.addAllOptions}
|
|
74
|
-
@close-options=${this.handleCloseOptions}
|
|
75
|
-
@tab-close=${()=>this.closeAndProcessInput()}
|
|
76
|
-
.searchValue=${this._search||null}
|
|
77
|
-
.maxLength=${this.maxlength||0}
|
|
78
|
-
${a.n(this.listboxRef)}
|
|
79
|
-
></pkt-listbox>
|
|
80
|
-
</div>
|
|
81
|
-
|
|
82
|
-
${this.tagPlacement===`outside`&&this.multiple?e._`<div class="pkt-combobox__tags-outside">
|
|
83
|
-
${this.renderSingleOrMultipleValues()}
|
|
84
|
-
</div>`:e.h}
|
|
85
|
-
</pkt-input-wrapper>
|
|
86
|
-
`}_describedBy(){return u.r({id:this._hasTextInput?`${this.id}-input`:`${this.id}-combobox`,hasHelptext:!!this.helptext||this.hasSlotContent(`helptext`),ariaDescribedby:this.ariaDescribedby})}renderInputField(){return this.typeahead||this.allowUserInput?e._`
|
|
87
|
-
<div class="pkt-combobox__input-div combobox__input">
|
|
88
|
-
<input
|
|
89
|
-
type="text"
|
|
90
|
-
id="${this.id}-input"
|
|
91
|
-
name=${(this.name||this.id)+`-input`}
|
|
92
|
-
placeholder=${i.t(!this._value.length||this.multiple&&this.tagPlacement===`outside`?this.placeholder:void 0)}
|
|
93
|
-
@input=${this.handleInput}
|
|
94
|
-
@change=${e=>{e.stopPropagation(),e.stopImmediatePropagation()}}
|
|
95
|
-
tabindex=${i.t(this._skipInputTab?`-1`:void 0)}
|
|
96
|
-
@keydown=${this.handleInputKeydown}
|
|
97
|
-
@focus=${this.handleFocus}
|
|
98
|
-
@blur=${this.handleBlur}
|
|
99
|
-
autocomplete="off"
|
|
100
|
-
role="combobox"
|
|
101
|
-
aria-expanded=${this._isOptionsOpen?`true`:`false`}
|
|
102
|
-
aria-label=${i.t(this.label)}
|
|
103
|
-
aria-describedby=${i.t(this._describedBy())}
|
|
104
|
-
aria-autocomplete=${this.typeahead?`both`:this.allowUserInput?`list`:`none`}
|
|
105
|
-
aria-controls="${this.id}-listbox"
|
|
106
|
-
aria-activedescendant=${i.t(this._isOptionsOpen&&this._value[0]&&s.i(this.options,this._value[0])?`${this.id}-listbox-${s.a(this._options,this._value[0])}`:void 0)}
|
|
107
|
-
aria-description=${i.t(this._selectionDescription||void 0)}
|
|
108
|
-
${a.n(this.inputRef)}
|
|
109
|
-
/>
|
|
110
|
-
</div>
|
|
111
|
-
`:e._`
|
|
112
|
-
<input
|
|
113
|
-
type="hidden"
|
|
114
|
-
id="${this.id}-input"
|
|
115
|
-
name=${(this.name||this.id)+`-input`}
|
|
116
|
-
.value=${this._value.join(`,`)}
|
|
117
|
-
${a.n(this.inputRef)}
|
|
118
|
-
/>
|
|
119
|
-
`}renderSingleOrMultipleValues(){if(!this.multiple&&this._hasTextInput)return e.h;let t=!this.multiple,n=this.renderValueTag(s.i(this.options,this._value[0])),r=this.tagPlacement===`outside`,i=e._`
|
|
120
|
-
<ul role="list" class="pkt-combobox__tag-list">
|
|
121
|
-
${o.t(this._value,e=>e,(t,n)=>{let i=s.i(this.options,t),a=i?.tagSkinColor;return e._`
|
|
122
|
-
<li
|
|
123
|
-
role="listitem"
|
|
124
|
-
@click=${r?e.h:e=>e.stopPropagation()}
|
|
125
|
-
@mousedown=${r?e.h:e=>e.preventDefault()}
|
|
126
|
-
>
|
|
127
|
-
<pkt-tag
|
|
128
|
-
skin=${a||`blue-dark`}
|
|
129
|
-
?closeTag=${!this.isDisabled}
|
|
130
|
-
.buttonTabindex=${r?void 0:-1}
|
|
131
|
-
@close=${()=>this.handleTagRemove(t)}
|
|
132
|
-
@keydown=${r?e.h:e=>this.handleTagKeydown(e,n)}
|
|
133
|
-
>
|
|
134
|
-
${this.renderValueTag(i)}
|
|
135
|
-
</pkt-tag>
|
|
136
|
-
</li>
|
|
137
|
-
`})}
|
|
138
|
-
</ul>
|
|
139
|
-
`;return!t&&this._value.length===0?e.h:t?n:i}renderValueTag(t){if(!t)return``;switch(this.displayValueAs){case`prefixAndValue`:return e._`<span class="pkt-combobox__value">${t.prefix||``} ${t.value}</span>`;case`value`:return e._`<span class="pkt-combobox__value">${t.value}</span>`;default:return e._`<span class="pkt-combobox__value">${t.label||t.value}</span>`}}};try{e.d(`pkt-combobox`)(S)}catch{console.warn(`Forsøker å definere <pkt-combobox>, men den er allerede definert`)}var C=S;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return C}});
|