@oslokommune/punkt-elements 18.7.1 → 18.7.2
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 +17 -0
- package/dist/{accordion-NO9LYXaN.cjs → accordion-CsrLQXEA.cjs} +1 -1
- package/dist/{accordion-BI-Qiznz.js → accordion-DoxhiwK-.js} +5 -5
- package/dist/{alert-HFqn-cvb.cjs → alert-DH3VqNqh.cjs} +1 -1
- package/dist/{alert-CayKowTW.js → alert-DxAGxSX_.js} +6 -6
- package/dist/{async-directive-CAZoZMez.js → async-directive-BSwJ8-GL.js} +2 -2
- package/dist/{async-directive-DlB0Sf4j.cjs → async-directive-CfPXShXu.cjs} +1 -1
- package/dist/{backlink-DYO8qA9C.cjs → backlink-CDH824db.cjs} +1 -1
- package/dist/{backlink-BHtxOlTw.js → backlink-CGc7r9CS.js} +3 -3
- package/dist/{breadcrumbs-HG9wzGtr.cjs → breadcrumbs-B37tsIoh.cjs} +1 -1
- package/dist/{breadcrumbs-BlRDuZbZ.js → breadcrumbs-DRGhIXmN.js} +2 -2
- package/dist/{button-CIb0IxTg.cjs → button-Cx6Xdp6t.cjs} +1 -1
- package/dist/{button-DWMHtdWk.js → button-D6QhHPWH.js} +5 -5
- package/dist/{calendar-CBghTpkZ.js → calendar-42o_q-jI.js} +3 -3
- package/dist/{calendar-CA1mz04B.cjs → calendar-CAwIY7x_.cjs} +1 -1
- package/dist/{card-CsSNvjZV.cjs → card-CB72gwBC.cjs} +1 -1
- package/dist/{card-PXDm9JXv.js → card-cyZE94EO.js} +6 -6
- package/dist/{checkbox-DReZOEy2.js → checkbox-C6JdANel.js} +4 -4
- package/dist/{checkbox-CMu4pF8-.cjs → checkbox-CddODhna.cjs} +1 -1
- package/dist/{class-map-BL_YL_Ed.js → class-map-DSoj1J68.js} +1 -1
- package/dist/{class-map-BEib48YL.cjs → class-map-DupQbnhE.cjs} +1 -1
- package/dist/{combobox-DcBFiuwP.js → combobox-Cqqokx73.js} +172 -128
- package/dist/combobox-N3NP77le.cjs +137 -0
- package/dist/components/combobox/combobox-base.d.ts +14 -12
- package/dist/components/combobox/combobox-handlers.d.ts +1 -0
- package/dist/components/combobox/combobox-utils.d.ts +3 -1
- package/dist/components/combobox/combobox-value.d.ts +5 -0
- package/dist/components/combobox/combobox.attributes.test.d.ts +0 -0
- package/dist/components/combobox/combobox.d.ts +31 -2
- package/dist/components/combobox/combobox.preselection.test.d.ts +0 -0
- package/dist/components/combobox/index.d.ts +1 -1
- package/dist/components/index.d.ts +1 -1
- package/dist/components/listbox/listbox.d.ts +3 -1
- package/dist/{consent-Yt1MpkUy.js → consent-CsgKWDsR.js} +2 -2
- package/dist/{consent-D1SMUJLs.cjs → consent-DnE6IPEj.cjs} +1 -1
- package/dist/{datepicker-NSWMVoGi.cjs → datepicker-BzRhOIkG.cjs} +1 -1
- package/dist/{datepicker-DboWQcrh.js → datepicker-CtSYgxMs.js} +11 -11
- package/dist/{directive-helpers-Ddr8wUxL.cjs → directive-helpers-2mcpDDv5.cjs} +1 -1
- package/dist/{directive-helpers-CohhRNQz.js → directive-helpers-ChEduoup.js} +1 -1
- package/dist/{element-DRc10X2R.cjs → element-D_mCyFeX.cjs} +1 -1
- package/dist/{element-e2MAMNEP.js → element-J8nynuVk.js} +1 -0
- package/dist/{element-with-slot-GwTT3WRD.js → element-with-slot-BOuXlWSY.js} +2 -2
- package/dist/{element-with-slot-DgtT8lCH.cjs → element-with-slot-C66Jck5e.cjs} +1 -1
- package/dist/{fileupload-BYVtnSaI.cjs → fileupload-3OtW4Xlo.cjs} +1 -1
- package/dist/{fileupload-CqxWUH0y.js → fileupload-PJWEBD88.js} +8 -8
- package/dist/{footer-YrlXRq7e.js → footer-ByAxlj9_.js} +4 -4
- package/dist/{footer-CLSihvYS.cjs → footer-Ca3DM544.cjs} +1 -1
- package/dist/{header-DsaPCLjJ.js → header-CxfDtS3Y.js} +11 -11
- package/dist/{header-DzVHM7gZ.cjs → header-D2SD2JLt.cjs} +1 -1
- package/dist/{header-menu-wcnhBSzs.cjs → header-menu-B9ABa0WW.cjs} +1 -1
- package/dist/{header-menu-DKAcUFzh.js → header-menu-CIuu8_UC.js} +4 -4
- package/dist/{heading-OfJKjUi2.cjs → heading-4ZHACOeL.cjs} +1 -1
- package/dist/{heading-C23xQS4l.js → heading-BHWdVbvN.js} +2 -2
- package/dist/{helptext-DyHzv2ZG.cjs → helptext-6HsH-I6a.cjs} +1 -1
- package/dist/{helptext-DqdOdYRj.js → helptext-BESB9Vlq.js} +4 -4
- package/dist/{icon-DBFTFd-J.cjs → icon-BzxBkRyE.cjs} +1 -1
- package/dist/{icon-jEFbKTB_.js → icon-DkVqRWbC.js} +1 -1
- package/dist/{if-defined-r8tKY4tG.js → if-defined-BILLSM7i.js} +1 -1
- package/dist/if-defined-BbUZeoaQ.cjs +1 -0
- package/dist/{input-element-kvI_5er5.cjs → input-element-DhIEFeuP.cjs} +1 -1
- package/dist/{input-element-BiUfK_gU.js → input-element-Qb0w3ChW.js} +2 -2
- package/dist/{input-wrapper-Bwh720ke.js → input-wrapper-Bg06k-cj.js} +6 -6
- package/dist/{input-wrapper-wyvCnWPp.cjs → input-wrapper-D64Qn-QH.cjs} +1 -1
- package/dist/{link-BWAhHUku.cjs → link-Bk7aDZCC.cjs} +1 -1
- package/dist/{link-BvjWWWlc.js → link-C7fOEv66.js} +4 -4
- package/dist/{linkcard-6CbGf4I_.js → linkcard-Bguo9oCv.js} +4 -4
- package/dist/{linkcard-D6fRaZSc.cjs → linkcard-rZpQuO1Z.cjs} +1 -1
- package/dist/{listbox-CsP0qbU1.js → listbox-CrQboPG6.js} +80 -63
- package/dist/listbox-kV4OO1Qa.cjs +111 -0
- package/dist/{loader-B5t78Yk7.cjs → loader-BAn68gBb.cjs} +1 -1
- package/dist/{loader-BS7EJqxD.js → loader-C3gwO0i3.js} +4 -4
- package/dist/{messagebox-Bt0IvUlD.js → messagebox-DAE59dMX.js} +4 -4
- package/dist/{messagebox-DBVUz-DN.cjs → messagebox-WH2HjT5I.cjs} +1 -1
- package/dist/{modal-C1g2fiUq.cjs → modal-DZm_fn3K.cjs} +1 -1
- package/dist/{modal-z5RzZ-fr.js → modal-DdC1_qT3.js} +5 -5
- 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-AFYyv3-b.cjs → pkt-options-controller-DXAAVcBJ.cjs} +1 -1
- package/dist/{pkt-options-controller-DKkmDDzT.js → pkt-options-controller-XcIgx_v1.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-BPHLC7ce.js → progressbar-D1x6MwdY.js} +5 -5
- package/dist/{progressbar-BpcsDCnG.cjs → progressbar-DsE4-qaW.cjs} +1 -1
- package/dist/{radiobutton-bGdAEz26.js → radiobutton-B2P48MMf.js} +4 -4
- package/dist/{radiobutton-B6pzZQZV.cjs → radiobutton-CdwYbHnx.cjs} +1 -1
- package/dist/{ref-BkV4Cd8U.cjs → ref-AuNEkS5a.cjs} +1 -1
- package/dist/{ref-lE1mGUOL.js → ref-DNowxdYH.js} +2 -2
- package/dist/{repeat-uBgVG8Ch.cjs → repeat-B3ksuY2F.cjs} +1 -1
- package/dist/{repeat-CCnTfedv.js → repeat-CZ1oMXnW.js} +2 -2
- package/dist/{searchinput-DrUcPajl.js → searchinput-CmyWnNr6.js} +4 -4
- package/dist/{searchinput-CiPB8xvh.cjs → searchinput-vi7twt5b.cjs} +1 -1
- package/dist/{select-ay8WHI7p.cjs → select-TAwBNhhf.cjs} +1 -1
- package/dist/{select-D7r2s7Cw.js → select-c15YAQbr.js} +7 -7
- package/dist/shared-strings/nb.d.ts +1 -0
- package/dist/{tabs-DqzPOdi9.cjs → tabs-hiTrWsXq.cjs} +1 -1
- package/dist/{tabs-DHvCjUi4.js → tabs-kxsX1ZEf.js} +4 -4
- package/dist/{tag-Cojf4jgA.cjs → tag-CGlxtBOH.cjs} +1 -1
- package/dist/{tag-D2Xvsy1i.js → tag-bztxjcF0.js} +5 -5
- package/dist/{textarea-s4IDLsBi.cjs → textarea-BHGZhMN4.cjs} +1 -1
- package/dist/{textarea-CzAL8e6L.js → textarea-BPQVrOp9.js} +9 -9
- package/dist/{textinput-B9w4jhIP.cjs → textinput-Cv4tal5W.cjs} +1 -1
- package/dist/{textinput-DT3HR9eU.js → textinput-DHGUOsIA.js} +8 -8
- package/dist/{timepicker-C-Ip5Jgl.cjs → timepicker-BBUYnYzM.cjs} +1 -1
- package/dist/{timepicker-BE0UouVr.js → timepicker-C8DHbOpM.js} +8 -8
- package/package.json +2 -2
- package/src/components/combobox/combobox-base.ts +42 -28
- package/src/components/combobox/combobox-handlers.ts +11 -5
- package/src/components/combobox/combobox-utils.ts +9 -1
- package/src/components/combobox/combobox-value.ts +32 -16
- package/src/components/combobox/combobox.accessibility.test.ts +29 -3
- package/src/components/combobox/combobox.attributes.test.ts +82 -0
- package/src/components/combobox/combobox.core.test.ts +46 -1
- package/src/components/combobox/combobox.interaction.test.ts +167 -0
- package/src/components/combobox/combobox.preselection.test.ts +271 -0
- package/src/components/combobox/combobox.ts +143 -79
- package/src/components/combobox/index.ts +6 -1
- package/src/components/index.ts +1 -0
- package/src/components/listbox/listbox.ts +56 -29
- package/dist/combobox-BZm_12qR.cjs +0 -140
- package/dist/if-defined-BeVQnl3C.cjs +0 -1
- package/dist/listbox-D95b5zAd.cjs +0 -106
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./if-defined-BeVQnl3C.cjs"),r=require("./element-with-slot-DgtT8lCH.cjs");require("./icon-DBFTFd-J.cjs");const i=require("./ref-BkV4Cd8U.cjs");require("./tag-Cojf4jgA.cjs");const a=require("./repeat-uBgVG8Ch.cjs"),o=require("./listbox-D95b5zAd.cjs"),s=require("./input-element-kvI_5er5.cjs"),c=require("./pkt-options-controller-AFYyv3-b.cjs");require("./input-wrapper-wyvCnWPp.cjs");var l=(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}},u=(e,t,n,r,i)=>{if(!e)return{action:`none`,value:null};let a=o.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}},d=(e,t,n,r,i)=>e.trim().toLowerCase()?{...o.s(e,t,n,r),shouldRemoveValue:!1,shouldResetInput:!1}:{addValueText:null,userInfoMessage:``,shouldRemoveValue:!i&&!!t[0],shouldResetInput:!0},f=(e,t,n)=>{let r=o.i(t,e);return n===`label`&&r?.label?r.label:e},p={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)}},m={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=o.r(n),t.push(n)}),t}},h={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=o.r(e),e.selected=e.selected||n.includes(e.value)}),{options:e,newValues:n}},mergeWithUserAdded(e,t){return[...t.filter(e=>e?.userAdded&&e.selected).filter(t=>!(Array.isArray(e)?e:[]).some(e=>e.value===t.value)),...e]}},g={name:`pkt-combobox`,react:`PktCombobox`,"css-class":`pkt-combobox`,isElement:!0,isPureReact:!0,props:{name:{type:`string`,name:`Navn`,description:`Navn som brukes i skjema ved innsending`,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:{type:`string`,name:`Utvidet hjelpetekst`,description:`Hjelpetekst som vises i en lukket boks man kan åpne`,category:`contents`},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:{type:`boolean`,name:`Feil`,description:`Feltet har en feil`,category:`ui`},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:{type:`boolean`,name:`Påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,category:`ui`},requiredText:{type:`string`,name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,category:`contents`},optionalTag:{type:`boolean`,name:`Valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,category:`ui`},optionalText:{type:`string`,name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,category:`contents`},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:`array`,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:`array`,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:{name:`Bruk wrapper`,type:`boolean`,required:!1,displayAsFalse:!0,default:!0,description:`Indikerer om skjemaelementet skal bruke en wrapper`,category:`ui`},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`}},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`}}},_=class extends s.t{constructor(){super(),this.value=``,this.options=[],this.defaultOptions=[],this.allowUserInput=!1,this.typeahead=!1,this.includeSearch=!1,this.searchPlaceholder=``,this.multiple=!1,this.maxlength=null,this.displayValueAs=g.props.displayValueAs.default,this.tagPlacement=null,this.isOpen=!1,this._options=[],this._value=[],this._isOptionsOpen=!1,this._userInfoMessage=``,this._addValueText=null,this._maxIsReached=!1,this._search=``,this._inputFocus=!1,this._internalValueSync=!1,this._optionsFromSlot=!1,this._lastSlotGeneration=0,this._suppressNextOpen=!1,this.inputRef=i.t(),this.triggerRef=i.t(),this.listboxRef=i.t(),this.optionsController=new c.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()}parseValue(){return Array.isArray(this.value)?this.multiple?this.value:this.value.length>0?[this.value[0]]:[]:this.value&&this.multiple?this.value.split(`,`):this.value?[this.value]:[]}updateMaxReached(){this._maxIsReached=o.c(this._value.length,this.maxlength)}syncValueAndDispatch(e){let t=this._value,n=this.multiple?t.join(`,`):t[0]||``;if(n!==(Array.isArray(this.value)?this.value.join(`,`):String(this.value||``))&&(this._internalValueSync=!0,this.value=n),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})],_.prototype,`value`,void 0),e.n([e.u({type:Array})],_.prototype,`options`,void 0),e.n([e.u({type:Array,attribute:`default-options`})],_.prototype,`defaultOptions`,void 0),e.n([e.u({type:Boolean,attribute:`allow-user-input`})],_.prototype,`allowUserInput`,void 0),e.n([e.u({type:Boolean})],_.prototype,`typeahead`,void 0),e.n([e.u({type:Boolean,attribute:`include-search`})],_.prototype,`includeSearch`,void 0),e.n([e.u({type:String,attribute:`search-placeholder`})],_.prototype,`searchPlaceholder`,void 0),e.n([e.u({type:Boolean})],_.prototype,`multiple`,void 0),e.n([e.u({type:Number})],_.prototype,`maxlength`,void 0),e.n([e.u({type:String,attribute:`display-value-as`})],_.prototype,`displayValueAs`,void 0),e.n([e.u({type:String,attribute:`tag-placement`})],_.prototype,`tagPlacement`,void 0),e.n([e.u({type:Boolean,attribute:`open`})],_.prototype,`isOpen`,void 0),e.n([e.l()],_.prototype,`_options`,void 0),e.n([e.l()],_.prototype,`_value`,void 0),e.n([e.l()],_.prototype,`_isOptionsOpen`,void 0),e.n([e.l()],_.prototype,`_userInfoMessage`,void 0),e.n([e.l()],_.prototype,`_addValueText`,void 0),e.n([e.l()],_.prototype,`_maxIsReached`,void 0),e.n([e.l()],_.prototype,`_search`,void 0),e.n([e.l()],_.prototype,`_inputFocus`,void 0);var v=class extends _{toggleValue(e){if(this.disabled)return;this.touched=!0,this._userInfoMessage=``,this._addValueText=null;let t=o.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(),s=!this.multiple,c=this.multiple,l=o.c(this._value.length,this.maxlength),u=!1,d=!0,f=``,p=``;i||(!r&&this.allowUserInput&&!a?(this.addNewUserValue(e),f=`valueAdded`,u=c):!r&&!this.allowUserInput?(s&&this._value[0]&&this.removeValue(this._value[0]),d=!1,u=!0,f=`noResults`):n?(this.removeValue(t),u=!0,s&&this._hasTextInput&&this.inputRef.value&&this.inputRef.value.type!==`hidden`&&(this.inputRef.value.value=``)):a&&s?(this.removeAllSelected(),u=!0):s?(this._value[0]&&this.removeSelected(this._value[0]),this.setSelected(t),u=!1):c&&!l?(this.setSelected(t),u=!0):c&&l?(f=`maxSelected`,d=!1,p=e):(s&&this.removeAllSelected(),f=`noValidValue`,d=!1,u=!0,p=e),this._isOptionsOpen=u,u||(s&&this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this._userInfoMessage=f,this._search=p||``,this.resetComboboxInput(d),c&&this.updateMaxReached())}setSelected(e){if(!this._value.includes(e)){if(this.multiple&&o.c(this._value.length,this.maxlength)){this._userInfoMessage=`maxSelected`;return}!this.multiple&&this.removeAllSelected(),this._value=e?[...this._value,e]:this._value,p.markOptionSelected(this._options,e),this.resetComboboxInput(!0)}}removeSelected(e){if(!e)return;this._value=this._value.filter(t=>t!==e);let t=o.i(this.options,e);t&&(p.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._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),p.markAllSelected(this._options),this.requestUpdate()}}removeAllSelected(){this._value=[],p.markAllDeselected(this._options),this._options=p.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(!o.i(this.options,e)){if(o.c(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,this._hasTextInput&&(this._suppressNextOpen=!0),window.setTimeout(()=>{this.focusTrigger()},0)),this.requestUpdate()}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]?f(this._value[0],this.options,this.displayValueAs):``,this._userInfoMessage=``)),this._options=[...this.options]}removeLastValue(e){if(this._value.length===0)return;e.preventDefault();let t=this._value[this._value.length-1];t&&this.removeSelected(t),this.updateMaxReached()}},y=class extends v{handleInput(e){if(e.stopPropagation(),e.stopImmediatePropagation(),this.disabled)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}=o.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._options=[...this.options]}}handleFocus(){if(!this.disabled){if(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=f(this._value[0],this.options,this.displayValueAs)),this._inputFocus=!0,this._search=``,this._options=[...this.options],this._isOptionsOpen=!0,this.onFocus(),this.requestUpdate()}}handleFocusOut(e){if(this.disabled||!this._isOptionsOpen)return;let t=e.relatedTarget;t?.closest(`pkt-combobox`)?.id!==this.id&&e.target?.getAttribute(`data-focusfix`)!==this.id&&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=o.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}=u(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=f(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.disabled){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.disabled||(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.disabled)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=l(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=d(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}},b=class extends y{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=Array.isArray(this.options)?[...this.options]:[]}if(this.optionsController?.nodes&&this.optionsController.nodes.length){let e=m.parseOptionsFromSlot(this.optionsController.nodes);e.length&&(this.options=[...e],this._options=[...e],this._optionsFromSlot=!0,this._lastSlotGeneration=this.optionsController.generation)}}willUpdate(e){if(this._optionsFromSlot&&this.optionsController){let e=this.optionsController.generation;if(e!==this._lastSlotGeneration){this._lastSlotGeneration=e;let t=m.parseOptionsFromSlot(this.optionsController.nodes),n=this._options.filter(e=>e.userAdded);this.options=[...n,...t]}}super.willUpdate(e)}disconnectedCallback(){super.disconnectedCallback(),document?.body.removeEventListener(`click`,this.handleBodyClick)}firstUpdated(e){this.defaultValue!==null&&!this.value&&(this.value=this.defaultValue),super.firstUpdated(e)}updated(e){e.has(`isOpen`)&&(this._isOptionsOpen=this.isOpen);let t=e.has(`value`),n=e.has(`_value`);if(t&&this._internalValueSync)this._internalValueSync=!1,n&&this.syncValueAndDispatch(e.get(`_value`));else 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.forEach(e=>e.selected=t.includes(e.value)),this._options=[...this._options]),this.updateMaxReached(),this.syncValueAndDispatch(e)}else n&&this.syncValueAndDispatch(e.get(`_value`));if(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=Array.isArray(this.options)?[...this.options]:[]}if(e.has(`options`)){let t=e.get(`options`)||this._options||[],n=h.mergeWithUserAdded(this.options,t);this._options=n,n.length>this.options.length&&(this.options=n);let r=h.syncOptionsWithValues(this._options,this._value);if(this._options=r.options,r.newValues.length>this._value.length){let e=[...this._value];this._value=r.newValues,this.syncValueAndDispatch(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]?f(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=Array.isArray(this.options)?[...this.options]:[];let e=h.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
|
-
.strings=${this.strings}
|
|
4
|
-
.size=${this.inputSize}
|
|
5
|
-
.label=${this.label}
|
|
6
|
-
.helptext=${this.helptext}
|
|
7
|
-
.helptextDropdown=${n.t(this.helptextDropdown)}
|
|
8
|
-
.helptextDropdownButton=${n.t(this.helptextDropdownButton)}
|
|
9
|
-
?fullwidth=${this.fullwidth}
|
|
10
|
-
?counter=${this.effectiveCounter(!!this.multiple&&this.maxlength!=null)}
|
|
11
|
-
.counterCurrent=${this._value.length}
|
|
12
|
-
.counterMaxLength=${this.maxlength??0}
|
|
13
|
-
?hasError=${this.hasError}
|
|
14
|
-
?inline=${this.inline}
|
|
15
|
-
?disabled=${this.disabled}
|
|
16
|
-
.errorMessage=${this.errorMessage}
|
|
17
|
-
?optionalTag=${this.optionalTag}
|
|
18
|
-
.optionalText=${this.optionalText}
|
|
19
|
-
?requiredTag=${this.requiredTag}
|
|
20
|
-
.requiredText=${this.requiredText}
|
|
21
|
-
.tagText=${this.tagText}
|
|
22
|
-
useWrapper=${this.useWrapper}
|
|
23
|
-
.forId=${this._hasTextInput?this.id+`-input`:this.id+`-combobox`}
|
|
24
|
-
?hasFieldset=${this.effectiveHasFieldset(!this._hasTextInput)}
|
|
25
|
-
class="pkt-combobox__wrapper"
|
|
26
|
-
@labelClick=${this.handleInputClick}
|
|
27
|
-
>
|
|
28
|
-
<div class="pkt-contents" slot="helptext">${r.r(this,`helptext`)}</div>
|
|
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.disabled})}
|
|
32
|
-
id=${n.t(this._hasTextInput?void 0:`${this.id}-combobox`)}
|
|
33
|
-
role=${n.t(this._hasTextInput?void 0:`combobox`)}
|
|
34
|
-
aria-expanded=${n.t(this._hasTextInput?void 0:this._isOptionsOpen?`true`:`false`)}
|
|
35
|
-
aria-controls=${n.t(this._hasTextInput?void 0:`${this.id}-listbox`)}
|
|
36
|
-
aria-haspopup=${n.t(this._hasTextInput?void 0:`listbox`)}
|
|
37
|
-
aria-labelledby=${n.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
|
|
38
|
-
aria-activedescendant=${n.t(!this._hasTextInput&&this._value[0]&&o.i(this.options,this._value[0])?`${this.id}-listbox-${o.a(this._options,this._value[0])}`:void 0)}
|
|
39
|
-
aria-description=${n.t(this._selectionDescription||void 0)}
|
|
40
|
-
tabindex=${this._hasTextInput||this.disabled?`-1`:`0`}
|
|
41
|
-
@click=${this.handleInputClick}
|
|
42
|
-
@keydown=${this._hasTextInput?e.h:this.handleSelectOnlyKeydown}
|
|
43
|
-
${i.n(this.triggerRef)}
|
|
44
|
-
>
|
|
45
|
-
${!this._hasTextInput&&this.placeholder&&(!this._value.length||this.multiple&&this.tagPlacement==`outside`)&&!this._inputFocus?e._`<span class="pkt-combobox__placeholder" @click=${this.handlePlaceholderClick}
|
|
46
|
-
>${this.placeholder}</span
|
|
47
|
-
>`:this.tagPlacement===`outside`?e.h:this.renderSingleOrMultipleValues()}
|
|
48
|
-
${this.renderInputField()}
|
|
49
|
-
<pkt-icon
|
|
50
|
-
class=${t.t({"pkt-combobox__arrow-icon":!0,"pkt-combobox__arrow-icon--open":this._isOptionsOpen})}
|
|
51
|
-
name="chevron-thin-down"
|
|
52
|
-
aria-hidden="true"
|
|
53
|
-
></pkt-icon>
|
|
54
|
-
</div>
|
|
55
|
-
|
|
56
|
-
<pkt-listbox
|
|
57
|
-
id="${this.id}-listbox"
|
|
58
|
-
.options=${this._options}
|
|
59
|
-
.isOpen=${this._isOptionsOpen}
|
|
60
|
-
.searchPlaceholder=${this.searchPlaceholder}
|
|
61
|
-
.label="Liste: ${this.label||``}"
|
|
62
|
-
?include-search=${this.includeSearch}
|
|
63
|
-
?is-multi-select=${this.multiple}
|
|
64
|
-
?allow-user-input=${this.allowUserInput&&!this._maxIsReached}
|
|
65
|
-
?max-is-reached=${this._maxIsReached}
|
|
66
|
-
.customUserInput=${n.t(this._addValueText)}
|
|
67
|
-
.userMessage=${this._userInfoMessage?this.pktStrings.get(`combobox`)[this._userInfoMessage]:``}
|
|
68
|
-
@search=${this.handleSearch}
|
|
69
|
-
@option-toggle=${this.handleOptionToggled}
|
|
70
|
-
@select-all=${this.addAllOptions}
|
|
71
|
-
@close-options=${()=>this._isOptionsOpen=!1}
|
|
72
|
-
@tab-close=${()=>this.closeAndProcessInput()}
|
|
73
|
-
.searchValue=${this._search||null}
|
|
74
|
-
.maxLength=${this.maxlength||0}
|
|
75
|
-
${i.n(this.listboxRef)}
|
|
76
|
-
></pkt-listbox>
|
|
77
|
-
</div>
|
|
78
|
-
|
|
79
|
-
${this.tagPlacement===`outside`&&this.multiple?e._`<div class="pkt-combobox__tags-outside">
|
|
80
|
-
${this.renderSingleOrMultipleValues()}
|
|
81
|
-
</div>`:e.h}
|
|
82
|
-
</pkt-input-wrapper>
|
|
83
|
-
`}renderInputField(){return this.typeahead||this.allowUserInput?e._`
|
|
84
|
-
<div class="pkt-combobox__input-div combobox__input">
|
|
85
|
-
<input
|
|
86
|
-
type="text"
|
|
87
|
-
id="${this.id}-input"
|
|
88
|
-
name=${(this.name||this.id)+`-input`}
|
|
89
|
-
placeholder=${n.t(!this._value.length||this.multiple&&this.tagPlacement===`outside`?this.placeholder:void 0)}
|
|
90
|
-
@input=${this.handleInput}
|
|
91
|
-
@change=${e=>{e.stopPropagation(),e.stopImmediatePropagation()}}
|
|
92
|
-
@keydown=${this.handleInputKeydown}
|
|
93
|
-
@focus=${this.handleFocus}
|
|
94
|
-
@blur=${this.handleBlur}
|
|
95
|
-
autocomplete="off"
|
|
96
|
-
role="combobox"
|
|
97
|
-
aria-expanded=${this._isOptionsOpen?`true`:`false`}
|
|
98
|
-
aria-label=${n.t(this.label)}
|
|
99
|
-
aria-autocomplete=${this.typeahead?`both`:this.allowUserInput?`list`:`none`}
|
|
100
|
-
aria-controls="${this.id}-listbox"
|
|
101
|
-
aria-activedescendant=${n.t(this._value[0]&&o.i(this.options,this._value[0])?`${this.id}-listbox-${o.a(this._options,this._value[0])}`:void 0)}
|
|
102
|
-
aria-description=${n.t(this._selectionDescription||void 0)}
|
|
103
|
-
${i.n(this.inputRef)}
|
|
104
|
-
/>
|
|
105
|
-
</div>
|
|
106
|
-
`:e._`
|
|
107
|
-
<input
|
|
108
|
-
type="hidden"
|
|
109
|
-
id="${this.id}-input"
|
|
110
|
-
name=${(this.name||this.id)+`-input`}
|
|
111
|
-
.value=${this._value.join(`,`)}
|
|
112
|
-
${i.n(this.inputRef)}
|
|
113
|
-
/>
|
|
114
|
-
`}renderSingleOrMultipleValues(){if(!this.multiple&&this._hasTextInput)return e.h;let t=!this.multiple,n=this.renderValueTag(o.i(this.options,this._value[0])),r=this.tagPlacement===`outside`,i=e._`
|
|
115
|
-
<ul role="list" class="pkt-combobox__tag-list">
|
|
116
|
-
${a.t(this._value,e=>e,(t,n)=>{let i=o.i(this.options,t),a=i?.tagSkinColor;return e._`
|
|
117
|
-
<li
|
|
118
|
-
role="listitem"
|
|
119
|
-
@click=${r?e.h:e=>e.stopPropagation()}
|
|
120
|
-
@mousedown=${r?e.h:e=>e.preventDefault()}
|
|
121
|
-
>
|
|
122
|
-
<pkt-tag
|
|
123
|
-
skin=${a||`blue-dark`}
|
|
124
|
-
?closeTag=${!this.disabled}
|
|
125
|
-
.buttonTabindex=${r?void 0:-1}
|
|
126
|
-
@close=${()=>this.handleTagRemove(t)}
|
|
127
|
-
@keydown=${r?e.h:e=>this.handleTagKeydown(e,n)}
|
|
128
|
-
>
|
|
129
|
-
${this.renderValueTag(i)}
|
|
130
|
-
</pkt-tag>
|
|
131
|
-
</li>
|
|
132
|
-
`})}
|
|
133
|
-
</ul>
|
|
134
|
-
`;return t?n:i}renderValueTag(t){if(!t)return``;switch(this.displayValueAs){case`prefixAndValue`:return e._`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
135
|
-
>${t.prefix||``} ${t.value}</span
|
|
136
|
-
>`;case`value`:return e._`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
137
|
-
>${t.value}</span
|
|
138
|
-
>`;default:return e._`<span class="pkt-combobox__value" data-focusfix=${this.id}
|
|
139
|
-
>${t.label||t.value}</span
|
|
140
|
-
>`}}};try{e.d(`pkt-combobox`)(b)}catch{console.warn(`Forsøker å definere <pkt-combobox>, men den er allerede definert`)}var x=b;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return x}});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const e=require("./element-DRc10X2R.cjs");var t=t=>t??e.h;Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return t}});
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./if-defined-BeVQnl3C.cjs"),r=require("./repeat-uBgVG8Ch.cjs"),i=require("./utils-63cRpWut.cjs");var a=(e,t)=>t&&(e.find(e=>e.value===t)||e.find(e=>e.label===t))||null,o=(e,t)=>{if(!t)return-1;let n=e.findIndex(e=>e.value===t);return n>=0?n:e.findIndex(e=>e.label===t)},s=(e,t)=>{if(!t)return[...e];let n=t.toLowerCase();return e.filter(e=>(e.fulltext||e.value+(e.label||``)+(e.prefix||``)).toLowerCase().includes(n))},c=e=>e.value+(e.label||``)+(e.prefix||``),l=(e,t)=>t!==null&&e>=t,u=(e,t)=>{if(!t)return{filtered:[...e],suggestion:null};let n=t.toLowerCase(),r=e.filter(e=>e.fulltext?.toLowerCase().includes(n));return{filtered:r,suggestion:r.find(e=>!e.selected&&e.label?.toLowerCase().startsWith(n))||null}},d=(e,t,n,r)=>{if(!e.trim())return{addValueText:null,userInfoMessage:``};let i=e.trim().toLowerCase(),a=t.find(e=>e.toLowerCase()===i),o=n.filter(e=>e.label?.toLowerCase().includes(i)||e.value.toLowerCase().includes(i)),s=o.find(e=>e.label?.toLowerCase()===i||e.value.toLowerCase()===i);return(o.length===0||!s)&&r?{addValueText:e,userInfoMessage:``}:o.length===0&&!r?{addValueText:null,userInfoMessage:`noResults`}:a?{addValueText:null,userInfoMessage:`alreadySelected`}:{addValueText:null,userInfoMessage:``}},f=e=>/^[\p{L} ]$/u.test(e),p=(e=500)=>{let t=``,n;return{append:r=>(t+=r.toLowerCase(),n!==void 0&&clearTimeout(n),n=setTimeout(()=>{t=``},e),t),reset:()=>{t=``,n!==void 0&&(clearTimeout(n),n=void 0)},getBuffer:()=>t}},m=(e,t)=>{let n=t.toLowerCase();return e.findIndex(e=>e.textContent?.trim().toLowerCase().startsWith(n))},h=e=>{e.scrollIntoView({block:`nearest`}),window.setTimeout(()=>e.focus(),0)},g=e=>Array.from(e.querySelectorAll(`[role="option"]:not([data-disabled])`)||[]),_=e=>{let t=e.nextElementSibling;t&&h(t)},v=(e,t,n)=>{let r=e.previousElementSibling;if(e.dataset.index===`0`&&n){let e=t.querySelector(`[role="searchbox"]`);e&&h(e)}else r&&h(r)},y=e=>{let t=g(e);t[0]&&h(t[0])},b=e=>{let t=g(e),n=t[t.length-1];n&&h(n)},x=(e,t)=>{if(t.disabled)return;let n=g(e);if(t.allowUserInput&&t.customUserInput){let t=e.querySelector(`[data-type="new-option"]`);if(t){h(t);return}}let r=n.find(e=>e.dataset.selected===`true`);if(r){h(r);return}if(t.includeSearch&&!(document.activeElement instanceof HTMLInputElement)){let t=e.querySelector(`[role="searchbox"]`);if(t){window.setTimeout(()=>t.focus(),0);return}}n[0]&&h(n[0])},S=class extends e.t{constructor(...e){super(...e),this.id=i.n(),this.label=null,this.options=[],this.isOpen=!1,this.disabled=!1,this.includeSearch=!1,this.isMultiSelect=!1,this.allowUserInput=!1,this.maxIsReached=!1,this.customUserInput=null,this.searchPlaceholder=null,this.searchValue=null,this.maxLength=0,this.userMessage=null,this._selectedOptions=0,this.typeahead=p(),this._filteredOptions=[]}connectedCallback(){super.connectedCallback(),this.includeSearch&&!this.searchValue&&(this.searchValue=``),this.options.length>0&&this.filterOptions(),this.setAttribute(`tabindex`,`-1`),this.addEventListener(`focus`,this.focusFirstOrSelectedOption)}disconnectedCallback(){super.disconnectedCallback(),this.typeahead.reset()}updated(e){(e.has(`options`)||e.has(`searchValue`))&&this.filterOptions(),super.updated(e)}attributeChangedCallback(e,t,n){(e===`options`||e===`search-value`)&&this.filterOptions(),super.attributeChangedCallback(e,t,n)}get _hasOptions(){return this._filteredOptions.length>0||this.options.length>0}render(){return e._`
|
|
2
|
-
<div
|
|
3
|
-
class=${t.t({"pkt-listbox":!0,"pkt-listbox__open":this.isOpen,"pkt-txt-16-light":!0})}
|
|
4
|
-
role=${n.t(this._hasOptions?`listbox`:void 0)}
|
|
5
|
-
aria-multiselectable=${n.t(this._hasOptions&&this.isMultiSelect?`true`:void 0)}
|
|
6
|
-
aria-label=${n.t(this._hasOptions?this.label??void 0:void 0)}
|
|
7
|
-
>
|
|
8
|
-
<div class="pkt-listbox__banners">
|
|
9
|
-
${this.renderSearch()} ${this.renderMaximumReachedBanner()} ${this.renderUserMessage()}
|
|
10
|
-
${this.renderEmptyMessage()} ${this.renderNewOptionBanner()}
|
|
11
|
-
</div>
|
|
12
|
-
<ul class="pkt-listbox__options" role="presentation">
|
|
13
|
-
${this.renderList()}
|
|
14
|
-
</ul>
|
|
15
|
-
</div>
|
|
16
|
-
<div aria-live="polite" class="pkt-visually-hidden">${this.userMessage}</div>
|
|
17
|
-
`}renderCheckboxOrCheckIcon(t,n){return this.isMultiSelect?e._`
|
|
18
|
-
<input
|
|
19
|
-
class="pkt-input-check__input-checkbox"
|
|
20
|
-
type="checkbox"
|
|
21
|
-
role="presentation"
|
|
22
|
-
tabindex="-1"
|
|
23
|
-
value=${t.value}
|
|
24
|
-
@change=${e=>{e.stopPropagation()}}
|
|
25
|
-
.checked=${t.selected}
|
|
26
|
-
aria-labelledby=${this.id+`-option-label-`+n}
|
|
27
|
-
?disabled=${this.disabled||t.disabled||this.maxIsReached&&!t.selected}
|
|
28
|
-
/>
|
|
29
|
-
`:t.selected?e._`<pkt-icon name="check-big"></pkt-icon>`:e.h}renderEmptyMessage(){return this.options.length>0||this._filteredOptions.length>0||this.userMessage?e.h:e._`<div class="pkt-listbox__banner pkt-listbox__banner--empty">
|
|
30
|
-
<pkt-icon
|
|
31
|
-
class="pkt-listbox__banner-icon"
|
|
32
|
-
name="exclamation-mark-circle"
|
|
33
|
-
size="large"
|
|
34
|
-
></pkt-icon>
|
|
35
|
-
Tom liste
|
|
36
|
-
</div>`}renderList(){return e._`
|
|
37
|
-
${r.t(this._filteredOptions,e=>e.value,(n,r)=>e._`
|
|
38
|
-
<li
|
|
39
|
-
@click=${()=>{this.toggleOption(n)}}
|
|
40
|
-
aria-selected=${n.selected?`true`:`false`}
|
|
41
|
-
@keydown=${this.handleOptionKeydown}
|
|
42
|
-
class=${t.t({"pkt-listbox__option":!0,"pkt-listbox__option--selected":!!(!this.isMultiSelect&&n.selected),"pkt-listbox__option--checkBox":this.isMultiSelect})}
|
|
43
|
-
tabindex="${this.disabled||n.disabled?`-1`:`0`}"
|
|
44
|
-
data-index=${r}
|
|
45
|
-
data-value=${n.value}
|
|
46
|
-
data-selected=${n.selected?`true`:`false`}
|
|
47
|
-
?data-disabled=${this.disabled||n.disabled||this.maxIsReached&&!n.selected}
|
|
48
|
-
aria-disabled=${this.disabled||n.disabled||this.maxIsReached&&!n.selected?`true`:`false`}
|
|
49
|
-
role="option"
|
|
50
|
-
id=${`${this.id}-${r}`}
|
|
51
|
-
>
|
|
52
|
-
${this.renderCheckboxOrCheckIcon(n,r)}
|
|
53
|
-
<span class="pkt-listbox__option-label" id=${this.id+`-option-label-`+r}>
|
|
54
|
-
${n.prefix?e._`<span class="pkt-listbox__option-prefix">${n.prefix}</span>`:e.h}
|
|
55
|
-
${n.label||n.value}
|
|
56
|
-
</span>
|
|
57
|
-
${n.description?e._`<span class="pkt-listbox__option-description pkt-txt-14-light"
|
|
58
|
-
>${n.description}</span
|
|
59
|
-
>`:e.h}
|
|
60
|
-
</li>
|
|
61
|
-
`)}
|
|
62
|
-
`}renderNewOptionBanner(){return this.allowUserInput&&this.customUserInput?e._`
|
|
63
|
-
<div
|
|
64
|
-
class="pkt-listbox__banner pkt-listbox__banner--new-option pkt-listbox__option"
|
|
65
|
-
data-type="new-option"
|
|
66
|
-
data-value=${this.customUserInput}
|
|
67
|
-
data-selected="false"
|
|
68
|
-
tabindex="0"
|
|
69
|
-
@click=${()=>this.toggleOption({value:this.customUserInput||``})}
|
|
70
|
-
@keydown=${this.handleOptionKeydown}
|
|
71
|
-
>
|
|
72
|
-
<pkt-icon class="pkt-listbox__banner-icon" name="plus-sign" size="large"></pkt-icon>
|
|
73
|
-
Legg til "${this.customUserInput}"
|
|
74
|
-
</div>
|
|
75
|
-
`:e.h}renderMaximumReachedBanner(){return this._selectedOptions=this.options.filter(e=>e.selected).length,this.isMultiSelect&&this._selectedOptions>0&&this.maxLength>0?e._`
|
|
76
|
-
<div class="pkt-listbox__banner pkt-listbox__banner--maximum-reached">
|
|
77
|
-
${this._selectedOptions} av maks ${this.maxLength} mulige er valgt.
|
|
78
|
-
</div>
|
|
79
|
-
`:e.h}renderUserMessage(){return this.userMessage?e._`<div class="pkt-listbox__banner pkt-listbox__banner--user-message">
|
|
80
|
-
<pkt-icon
|
|
81
|
-
class="pkt-listbox__banner-icon"
|
|
82
|
-
name="exclamation-mark-circle"
|
|
83
|
-
size="large"
|
|
84
|
-
></pkt-icon>
|
|
85
|
-
${this.userMessage}
|
|
86
|
-
</div>`:e.h}renderSearch(){let t=this.pktStrings.get(`listbox`);return this.includeSearch?e._`
|
|
87
|
-
<div class="pkt-listbox__search">
|
|
88
|
-
<span class="pkt-listbox__search-icon">
|
|
89
|
-
<pkt-icon name="magnifying-glass-small" size="large"></pkt-icon>
|
|
90
|
-
</span>
|
|
91
|
-
<input
|
|
92
|
-
class="pkt-txt-16-light"
|
|
93
|
-
type="text"
|
|
94
|
-
aria-label=${t.searchLabel}
|
|
95
|
-
form=""
|
|
96
|
-
placeholder=${this.searchPlaceholder??t.searchPlaceholder}
|
|
97
|
-
@input=${this.handleSearchInput}
|
|
98
|
-
@keydown=${this.handleSearchKeydown}
|
|
99
|
-
.value=${this.searchValue}
|
|
100
|
-
data-type="searchbox"
|
|
101
|
-
?disabled=${this.disabled}
|
|
102
|
-
?readonly=${this.disabled}
|
|
103
|
-
role="searchbox"
|
|
104
|
-
/>
|
|
105
|
-
</div>
|
|
106
|
-
`:e.h}handleSearchInput(e){this.searchValue=e.target.value,this.dispatchEvent(new CustomEvent(`search`,{detail:this.searchValue,bubbles:!1}))}handleSearchKeydown(e){switch(e.key){case`Enter`:e.preventDefault();break;case`ArrowUp`:case`Escape`:this.closeOptions(),e.preventDefault();break;case`ArrowDown`:this.focusFirstOrSelectedOption();break;case`Tab`:this.tabClose()}}handleOptionKeydown(e){let t=e.currentTarget,n=t.dataset.value,r=t.dataset.type,i=t.dataset.selected===`true`;if(!(!g(this).length&&(!this.customUserInput||!this.allowUserInput&&this.customUserInput)&&r!==`new-option`&&r!==`searchbox`))switch(e.key){case` `:case`Enter`:this.toggleOption(t),e.preventDefault();break;case`Backspace`:n&&(i?this.toggleOption(t):this.closeOptions()),e.preventDefault();break;case`Escape`:this.closeOptions(),e.preventDefault();break;case`Tab`:this.tabClose();break;case`ArrowDown`:e.altKey?b(this):r===`searchbox`||r===`new-option`?y(this):_(t),e.preventDefault();break;case`ArrowUp`:if(e.altKey)y(this);else if(t.dataset.index===`0`&&this.includeSearch){let e=this.querySelector(`[role="searchbox"]`);e&&e.focus()}else if(t.dataset.index===`0`&&this.customUserInput){let e=this.querySelector(`[data-type="new-option"]`);e&&e.focus()}else v(t,this,this.includeSearch);e.preventDefault();break;case`Home`:y(this),e.preventDefault();break;case`End`:b(this),e.preventDefault();break;default:(e.metaKey||e.ctrlKey)&&e.key===`a`&&(this.selectAll(),e.preventDefault()),f(e.key)&&(this.handleTypeAhead(e.key),e.preventDefault())}}focusFirstOrSelectedOption(){x(this,{disabled:this.disabled,allowUserInput:this.allowUserInput,customUserInput:this.customUserInput,includeSearch:this.includeSearch})}toggleOption(e){let t=e instanceof HTMLElement?e.dataset.disabled:e.disabled;if(this.disabled||t)return;let n=e instanceof HTMLElement?e.dataset.value:e.value;this.dispatchEvent(new CustomEvent(`option-toggle`,{detail:n,bubbles:!1}))}selectAll(){this.dispatchEvent(new CustomEvent(`select-all`,{bubbles:!1}))}closeOptions(){this.dispatchEvent(new CustomEvent(`close-options`,{bubbles:!1}))}tabClose(){this.dispatchEvent(new CustomEvent(`tab-close`,{bubbles:!1}))}filterOptions(){this._filteredOptions=s(this.options,this.searchValue)}handleTypeAhead(e){let t=this.typeahead.append(e),n=g(this),r=m(n,t);r>=0&&h(n[r])}};e.n([e.u({type:String})],S.prototype,`id`,void 0),e.n([e.u({type:String})],S.prototype,`label`,void 0),e.n([e.u({type:Array})],S.prototype,`options`,void 0),e.n([e.u({type:Boolean,reflect:!0,attribute:`is-open`})],S.prototype,`isOpen`,void 0),e.n([e.u({type:Boolean})],S.prototype,`disabled`,void 0),e.n([e.u({type:Boolean,attribute:`include-search`})],S.prototype,`includeSearch`,void 0),e.n([e.u({type:Boolean,attribute:`is-multi-select`})],S.prototype,`isMultiSelect`,void 0),e.n([e.u({type:Boolean,attribute:`allow-user-input`})],S.prototype,`allowUserInput`,void 0),e.n([e.u({type:Boolean,attribute:`max-is-reached`})],S.prototype,`maxIsReached`,void 0),e.n([e.u({type:String,attribute:`custom-user-input`})],S.prototype,`customUserInput`,void 0),e.n([e.u({type:String,attribute:`search-placeholder`})],S.prototype,`searchPlaceholder`,void 0),e.n([e.u({type:String,attribute:`search-value`})],S.prototype,`searchValue`,void 0),e.n([e.u({type:Number,attribute:`max-length`})],S.prototype,`maxLength`,void 0),e.n([e.u({type:String,attribute:`user-message`})],S.prototype,`userMessage`,void 0),e.n([e.l()],S.prototype,`_filteredOptions`,void 0);try{e.d(`pkt-listbox`)(S)}catch{console.warn(`Forsøker å definere <pkt-listbox>, men den er allerede definert`)}var C=S;Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"c",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"s",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return C}});
|