@oslokommune/punkt-elements 19.0.5 → 19.2.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.
Files changed (68) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/alert-DsGNGcgd.cjs +40 -0
  3. package/dist/{alert-DaXpwnzT.js → alert-vIaasUjb.js} +23 -22
  4. package/dist/{calendar-BuSfyUR9.cjs → calendar-CtfdBqJN.cjs} +1 -1
  5. package/dist/{calendar-KUQ1dFeX.js → calendar-DWSW_GeN.js} +22 -22
  6. package/dist/{combobox-Bg98cVwV.js → combobox-DHL_CGYv.js} +4 -3
  7. package/dist/combobox-nqNZDvBR.cjs +139 -0
  8. package/dist/components/alert/alert.d.ts +1 -1
  9. package/dist/{datepicker-Ct4dbs4e.js → datepicker-BWp2PM9S.js} +2 -2
  10. package/dist/{datepicker-BtEZMsWH.cjs → datepicker-DvO3w0eM.cjs} +1 -1
  11. package/dist/{fileupload-BVAgrofy.cjs → fileupload-DDLvQaSS.cjs} +1 -1
  12. package/dist/{fileupload-Dqf_94m2.js → fileupload-DbtTD1aU.js} +2 -2
  13. package/dist/{footer-XrX6LFHY.cjs → footer-CupUAe8d.cjs} +1 -1
  14. package/dist/{header-fkKhLsyE.js → header-BxgtAiNM.js} +36 -36
  15. package/dist/{header-menu-DYZsigfH.cjs → header-menu-DGywRJCx.cjs} +1 -1
  16. package/dist/{header-DMMt5FtF.cjs → header-wdEiBTI9.cjs} +14 -14
  17. package/dist/{input-wrapper-CvFMiqIt.js → input-wrapper-B5GdwzAM.js} +8 -7
  18. package/dist/input-wrapper-BmPdpY4N.cjs +59 -0
  19. package/dist/{messagebox-CdNMgTz4.cjs → messagebox-D2xvSYWI.cjs} +1 -1
  20. package/dist/{messagebox-D0qxveug.js → messagebox-E8W7RyAJ.js} +1 -1
  21. package/dist/pkt-alert.cjs +1 -1
  22. package/dist/pkt-alert.js +1 -1
  23. package/dist/pkt-calendar.cjs +1 -1
  24. package/dist/pkt-calendar.js +1 -1
  25. package/dist/pkt-combobox.cjs +1 -1
  26. package/dist/pkt-combobox.js +1 -1
  27. package/dist/pkt-datepicker.cjs +1 -1
  28. package/dist/pkt-datepicker.js +1 -1
  29. package/dist/pkt-fileupload.cjs +1 -1
  30. package/dist/pkt-fileupload.js +1 -1
  31. package/dist/pkt-footer.cjs +1 -1
  32. package/dist/pkt-footer.js +1 -1
  33. package/dist/pkt-header-menu.cjs +1 -1
  34. package/dist/pkt-header-menu.js +1 -1
  35. package/dist/pkt-header.cjs +1 -1
  36. package/dist/pkt-header.js +1 -1
  37. package/dist/pkt-index.cjs +1 -1
  38. package/dist/pkt-index.js +22 -22
  39. package/dist/pkt-input-wrapper.cjs +1 -1
  40. package/dist/pkt-input-wrapper.js +1 -1
  41. package/dist/pkt-messagebox.cjs +1 -1
  42. package/dist/pkt-messagebox.js +1 -1
  43. package/dist/pkt-select.cjs +1 -1
  44. package/dist/pkt-select.js +1 -1
  45. package/dist/pkt-textarea.cjs +1 -1
  46. package/dist/pkt-textarea.js +1 -1
  47. package/dist/pkt-textinput.cjs +1 -1
  48. package/dist/pkt-textinput.js +1 -1
  49. package/dist/pkt-timepicker.cjs +1 -1
  50. package/dist/pkt-timepicker.js +1 -1
  51. package/dist/{select-B4gbFOil.js → select-BhK8veJn.js} +1 -1
  52. package/dist/{select-oIF7UVvV.cjs → select-CDoA2rpC.cjs} +1 -1
  53. package/dist/shared-types/alert.d.ts +6 -0
  54. package/dist/shared-types/footer.d.ts +14 -2
  55. package/dist/shared-types/index.d.ts +1 -1
  56. package/dist/{textarea-DNFX958g.cjs → textarea-BLVuKEng.cjs} +1 -1
  57. package/dist/{textarea-DGSMKcqK.js → textarea-sulH-Yk7.js} +1 -1
  58. package/dist/{textinput-Bzkdo2mN.cjs → textinput-CSrBua2N.cjs} +1 -1
  59. package/dist/{textinput-DpLeElI_.js → textinput-Di2lAf2R.js} +1 -1
  60. package/dist/{timepicker-CCNQeX5Q.js → timepicker-BaDGjuOR.js} +1 -1
  61. package/dist/{timepicker-DCzhlRuc.cjs → timepicker-Iq1-vWRn.cjs} +1 -1
  62. package/package.json +2 -2
  63. package/src/components/alert/alert.ts +2 -2
  64. package/dist/alert-Cfr6t5uz.cjs +0 -40
  65. package/dist/combobox-DzK6P9l1.cjs +0 -139
  66. package/dist/input-wrapper-BIrQijWT.cjs +0 -59
  67. package/dist/{footer-Bf6RFuia.js → footer-UT8MbnCT.js} +1 -1
  68. package/dist/{header-menu-CUHrJCvx.js → header-menu-CTEPH4St.js} +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oslokommune/punkt-elements",
3
- "version": "19.0.5",
3
+ "version": "19.2.0",
4
4
  "description": "Komponentbiblioteket til Punkt, designsystem for Oslo kommune",
5
5
  "homepage": "https://punkt.oslo.kommune.no",
6
6
  "author": "Team Designsystem, Oslo kommune",
@@ -84,5 +84,5 @@
84
84
  "engines": {
85
85
  "node": "^22.19.0 || ^24.0.0 || ^26.0.0"
86
86
  },
87
- "gitHead": "1c159f7c20465811cb0adb1be07c4e5f89e15716"
87
+ "gitHead": "9ffef14fdbc5993d24cba60a16324095834103f5"
88
88
  }
@@ -4,7 +4,7 @@ import { customElement, property, state } from 'lit/decorators.js'
4
4
  import { html, nothing, PropertyValues } from 'lit'
5
5
  import { PktElementWithSlot } from '@/base-elements/element-with-slot'
6
6
  import { slotContent } from '@/directives/slot-content'
7
- import type { TAriaLive, TAlertSkin, TAlertSize } from 'shared-types'
7
+ import { ALERT_DEFAULTS, type TAriaLive, type TAlertSkin, type TAlertSize } from 'shared-types'
8
8
  import { updateClassAttribute } from '@/utils/classutils'
9
9
  import { formatString, type IPktStringsProps } from 'shared-strings'
10
10
  import specs from 'componentSpecs/alert.spec'
@@ -36,7 +36,7 @@ export class PktAlert extends PktElementWithSlot<IPktAlert> implements IPktAlert
36
36
  // Properties
37
37
 
38
38
  @property({ type: Boolean, reflect: false })
39
- compact = specs.deprecated!.compact.default as boolean
39
+ compact = ALERT_DEFAULTS.compact
40
40
  @property({ type: String, reflect: true }) title: string = ''
41
41
  @property({ type: String, reflect: true }) skin: TAlertSkin = (
42
42
  specs.props!.skin as { default: TAlertSkin }
@@ -1,40 +0,0 @@
1
- const e=require("./element-CewjrA4g.cjs"),t=require("./class-map-B0FX3YsK.cjs"),n=require("./if-defined-CjRKmMQs.cjs"),r=require("./format-B8meU8Tm.cjs"),i=require("./element-with-slot-MCvSBwUv.cjs"),a=require("./classutils-CbklAJDe.cjs"),o=require("./define-component-spec-DBNd2FJY.cjs");require("./icon-Clz68-Kz.cjs"),require("./button-CCR4eyt_.cjs");var s=[`off`,`polite`,`assertive`],c=[`info`,`success`,`warning`,`error`],l=[`medium`,`small`,`xsmall`],u=o.t({name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{reactOnly:!0,description:`React: Klikk-event for 'Lukk'-knappen`},close:{elementsOnly:!0,description:`Vue: Klikk-event for 'Lukk'-knappen`}},props:{title:{name:`Tittel`,description:`Tittelen som vises øverst i på meldingen`,type:`string`,category:`contents`},skin:{name:`Utseende`,description:`Hvordan type melding er dette?`,type:[...c],default:`info`,category:`ui`},date:{name:`Sist oppdatert`,description:`Dato som vises nederst i på meldingen`,type:`string`,category:`contents`},ariaLive:{name:`aria-live`,description:`Hvordan skal skjermleseren lese opp meldingen?`,type:[...s],default:`polite`,category:`accessibility`},size:{name:`Størrelse`,description:`Endrer størrelsen på ulike elementer i alerten.`,type:[...l],default:`medium`,category:`ui`},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`}},slots:{default:{description:`Innholdet i meldingen`}},deprecated:{compact:{name:`Kompakt (deprecated)`,description:"Bruk `size` i stedet; uten eksplisitt `size` gir compact størrelsen 'small'.",type:`boolean`,category:`ui`,default:!1}}}),d=class extends i.t{constructor(){super(),this.compact=u.deprecated.compact.default,this.title=``,this.skin=u.props.skin.default,this.ariaLive=u.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=u.props.closeAlert.default,this.date=null,this.role=`status`,this._hostId=null,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`on-close`,{detail:{origin:e},bubbles:!0,composed:!0}))},this._isClosed=!1}connectedCallback(){super.connectedCallback(),this.ariaLiveAttr=this.getAttribute(`aria-live`)||this.ariaLive}willUpdate(e){super.willUpdate(e);let t=this.getAttribute(`id`);t&&(this._hostId=t,this.removeAttribute(`id`))}attributeChangedCallback(e,t,n){e===`ariaLive`&&(this.ariaLiveAttr=n),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`ariaLive`)&&e.get(`ariaLive`)!==void 0&&(this.ariaLiveAttr=this.ariaLive),e.has(`_isClosed`)&&a.t(this,`pkt-hide`,this._isClosed)}render(){let a=this.size??(this.compact?`small`:`medium`),o={"pkt-alert":!0,[`pkt-alert--${a}`]:!0,[`pkt-alert--${this.skin}`]:!0,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e._`
2
- <div
3
- class=${t.t(o)}
4
- id=${n.t(this._hostId||void 0)}
5
- aria-live=${this.ariaLiveAttr}
6
- role=${this.role}
7
- >
8
- <div class=${t.t(s)}>
9
- <pkt-icon
10
- class="pkt-alert__icon"
11
- aria-hidden="true"
12
- name=${this.skin===`info`?`alert-information`:`alert-${this.skin}`}
13
- ></pkt-icon>
14
-
15
- ${this.closeAlert?e._`
16
- <div class="pkt-alert__close">
17
- <pkt-button
18
- tabindex="0"
19
- aria-label="close"
20
- size=${a}
21
- type="button"
22
- skin="tertiary"
23
- iconName="close"
24
- variant="icon-only"
25
- @click=${this.close}
26
- >
27
- <span class="sr-only">${this.pktStrings.get(`generic`).close}</span>
28
- </pkt-button>
29
- </div>
30
- `:e.h}
31
- ${this.title?e._`<div class="pkt-alert__title">${this.title}</div>`:e.h}
32
-
33
- <div class="pkt-alert__text">${i.r(this)}</div>
34
-
35
- ${this.date?e._`<div class="pkt-alert__date">
36
- ${r.t(this.pktStrings.get(`alert`).lastUpdated,{date:this.date})}
37
- </div>`:e.h}
38
- </div>
39
- </div>
40
- `}};e.n([e.u({type:Boolean,reflect:!1})],d.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0})],d.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],d.prototype,`skin`,void 0),e.n([e.u({type:String})],d.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`aria-live`})],d.prototype,`ariaLiveAttr`,void 0),e.n([e.u({type:Boolean,reflect:!0})],d.prototype,`closeAlert`,void 0),e.n([e.u({type:String,reflect:!0})],d.prototype,`date`,void 0),e.n([e.u({type:String})],d.prototype,`role`,void 0),e.n([e.l()],d.prototype,`_hostId`,void 0),e.n([e.u({type:String,attribute:`size`})],d.prototype,`size`,void 0),e.n([e.l()],d.prototype,`_isClosed`,void 0);try{e.d(`pkt-alert`)(d)}catch{console.warn(`Forsøker å definere <pkt-alert>, men den er allerede definert`)}var f=d;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return f}});
@@ -1,139 +0,0 @@
1
- const e=require("./element-CewjrA4g.cjs"),t=require("./class-map-B0FX3YsK.cjs"),n=require("./if-defined-CjRKmMQs.cjs"),r=require("./format-B8meU8Tm.cjs"),i=require("./element-with-slot-MCvSBwUv.cjs");require("./icon-Clz68-Kz.cjs");const a=require("./ref-HT6KRjxp.cjs");require("./tag-CQEyjF32.cjs");const o=require("./repeat-Ddge5HTp.cjs"),s=require("./listbox-3fi7wQz4.cjs"),c=require("./input-element-BdIWsDl-.cjs"),l=require("./pkt-options-controller-BClk341e.cjs"),u=require("./input-wrapper-BIrQijWT.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,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:`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:{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.disabled)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.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}=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.disabled){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.disabled||!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.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=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
- .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">${i.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-describedby=${n.t(this._hasTextInput?void 0:this._describedBy())}
38
- aria-labelledby=${n.t(this._hasTextInput?void 0:`${this.id}-combobox-label`)}
39
- aria-activedescendant=${n.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=${n.t(this._selectionDescription||void 0)}
41
- tabindex=${this._hasTextInput||this.disabled?`-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.disabled}
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=${n.t(this._addValueText)}
70
- .userMessage=${this._userInfoMessage?r.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,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=${n.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=${n.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=${n.t(this.label)}
103
- aria-describedby=${n.t(this._describedBy())}
104
- aria-autocomplete=${this.typeahead?`both`:this.allowUserInput?`list`:`none`}
105
- aria-controls="${this.id}-listbox"
106
- aria-activedescendant=${n.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=${n.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.disabled}
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}});
@@ -1,59 +0,0 @@
1
- const e=require("./element-CewjrA4g.cjs"),t=require("./if-defined-CjRKmMQs.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-MCvSBwUv.cjs");require("./alert-Cfr6t5uz.cjs");const i=require("./icon-Clz68-Kz.cjs"),a=require("./booleanish-BF8l4scU.cjs"),o=require("./utils-63cRpWut.cjs");require("./helptext-DQe6GO75.cjs");const s=require("./focus-modality-controller-C1ocyv2J.cjs");var c=e=>{let t=[];return e.hasHelptext&&t.push(`${e.id}-helptext`),e.hasCounter&&t.push(`${e.id}-counter-status`),e.ariaDescribedby&&t.push(e.ariaDescribedby),t.length?t.join(` `):void 0},l=e=>`${e}-counter-status`,u=(e,t)=>!!t&&t>0&&(e??0)>t,d={name:`pkt-input-wrapper`,react:`PktInputWrapper`,"css-class":`pkt-inputwrapper`,isElement:!0,isPureReact:!0,events:{toggleHelpText:{description:`Event for å vise eller skjule hjelpetekst i dropdown`}},slots:{default:{description:`Innholdet i input-wrapperen, som kan være et skjemaelement eller en annen komponent`}},props:{forId:{name:`For ID`,description:`Id-en til skjemaelementet som dette wrapper rundt`,type:`string`,required:!0,category:`tech`},label:{name:`Merkelapp`,description:`Merkelapp for skjemaelementet`,type:`string`,required:!0,category:`contents`},helptext:{name:`Hjelpetekst`,description:`Hjelpetekst for skjemaelementet`,type:`string`,category:`contents`},helptextDropdown:{name:`Hjelpetekst i dropdown`,description:`Hjelpetekst som vises i ekspanderende felt`,type:`string`,category:`contents`},helptextDropdownButton:{name:`Tekst i hjelpetekst-knapp`,description:`Tekst som vises i knappen for å vise hjelpetekst i dropdown`,default:`Les mer <span class='pkt-sr-only'>om feltet</span>`,type:`string`,category:`contents`},ariaDescribedby:{name:`aria-describedby`,description:`Id-en til elementet som beskriver skjemaelementet`,type:`string`,category:`accessibility`},counter:{name:`Teller`,description:`Teller for antall tegn i skjemaelementet`,type:`boolean`,default:!1,category:`ui`},counterCurrent:{name:`Tellerverdi`,description:`Tellerens nåværende verdi`,type:`number`,category:`ui`,showIf:{counter:!0}},counterMaxLength:{name:`Maks tegn i teller`,description:`Maks antall tegn som kan skrives i skjemaelementet`,type:`number`,category:`ui`,showIf:{counter:!0}},counterPosition:{name:`Tellerplassering`,description:`Telleren sin plassering i forhold til elementet`,type:[`top`,`bottom`],default:`bottom`,category:`ui`,showIf:{counter:!0}},optionalTag:{name:`Vise valgfritt-merking`,description:`Viser en merking som indikerer at feltet er valgfritt`,type:`boolean`,default:!1,category:`ui`},optionalText:{name:`Valgfritt-tekst`,description:`Tekst som vises i valgfritt-merkingen`,type:`string`,default:`Valgfritt`,category:`contents`},requiredTag:{name:`Vise påkrevd-merking`,description:`Viser en merking som indikerer at feltet er påkrevd`,type:`boolean`,default:!1,category:`ui`},requiredText:{name:`Påkrevd-tekst`,description:`Tekst som vises i påkrevd-merkingen`,type:`string`,default:`Må fylles ut`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},hasError:{name:`Feil`,description:`Indikerer at skjemaelementet har en feil`,type:`boolean`,default:!1,category:`ui`},errorMessage:{name:`Feilmelding`,description:`Feilmelding som vises når skjemaelementet har en feil`,type:`string`,category:`contents`},disabled:{name:`Deaktivert`,description:`Indikerer at skjemaelementet er deaktivert`,type:`boolean`,default:!1,category:`tech`},inline:{name:`Inline`,description:`Indikerer at skjemaelementet skal flyte sammen med sidens innhold`,type:`boolean`,default:!1,category:`ui`},hasFieldset:{name:`Er fieldset`,description:`Indikerer at innholdet er et fieldset`,type:`boolean`,default:!1,category:`ui`},useWrapper:{name:`Bruk wrapper`,description:`Indikerer om skjemaelementet skal bruke en wrapper`,type:`boolean`,displayAsFalse:!0,default:!0,category:`ui`},role:{name:`Rolle`,description:`ARIA-rolle på wrapperen. Settes ikke som standard. Bruk hasFieldset for reelle grupper.`,type:`string`,default:null,category:`accessibility`},size:{name:`Størrelse`,description:`Visuell størrelse. small: kompakt wrapper og felt (42px). xsmall: samme wrapper som small, felt 36px.`,attribute:`input-wrapper-size`,type:[`small`,`medium`,`xsmall`],default:`medium`,category:`ui`}}},f=class extends r.t{constructor(...e){super(...e),this.forId=o.n(),this.label=``,this.helptext=null,this.helptextDropdown=null,this.helptextDropdownButton=null,this.counter=d.props.counter.default,this.counterCurrent=0,this.counterMaxLength=0,this.counterError=null,this.counterPosition=`bottom`,this.optionalTag=d.props.optionalTag.default,this.requiredTag=d.props.requiredTag.default,this.tagText=null,this.hasError=d.props.hasError.default,this.errorMessage=``,this.disabled=d.props.disabled.default,this.inline=d.props.inline.default,this.ariaDescribedby=void 0,this.hasFieldset=d.props.hasFieldset.default,this.role=null,this.useWrapper=d.props.useWrapper.default,this.size=`medium`,this.focusModality=new s.t(this)}updated(e){super.updated(e),this.classList.add(`pkt-inputwrapper`),this.classList.toggle(`pkt-inputwrapper--error`,this.hasError),this.classList.toggle(`pkt-inputwrapper--disabled`,this.disabled),this.classList.toggle(`pkt-inputwrapper--inline`,this.inline),this.classList.toggle(`pkt-inputwrapper--medium`,this.size===`medium`),this.classList.toggle(`pkt-inputwrapper--small`,this.size===`small`),this.classList.toggle(`pkt-inputwrapper--xsmall`,this.size===`xsmall`),this.role?this.setAttribute(`aria-labelledby`,`${this.forId}-label`):this.removeAttribute(`aria-labelledby`)}render(){let a=`pkt-tag pkt-tag--small pkt-tag--thin-text`,o=this.ariaDescribedby?this.ariaDescribedby:this.helptext?`${this.forId}-helptext`:e.h,s=this.pktStrings.get(`forms`),c=()=>e._`
2
- ${this.tagText?e._`<span class=${a+` pkt-tag--gray`}>${this.tagText}</span>`:e.h}
3
- ${this.optionalTag?e._`<span class=${a+` pkt-tag--blue-light`}
4
- >${this.optionalText??s.optional}</span
5
- >`:e.h}
6
- ${this.requiredTag?e._`<span class=${a+` pkt-tag--beige`}
7
- >${this.requiredText??s.required}</span
8
- >`:e.h}
9
- `,d=()=>this.useWrapper?this.hasFieldset?e._`<legend
10
- class="pkt-inputwrapper__legend"
11
- id="${this.forId}-label"
12
- @click=${this.handleLabelClick}
13
- >
14
- ${this.label} ${c()}
15
- </legend>`:e._`<label
16
- class="pkt-inputwrapper__label"
17
- for="${this.forId}"
18
- id="${this.forId}-label"
19
- @click=${this.handleLabelClick}
20
- >${this.label}${c()}</label
21
- >`:e._`<label for="${this.forId}" class="pkt-sr-only" id="${this.forId}-label">
22
- ${this.label}
23
- </label>`,f=()=>e._`
24
- <pkt-helptext
25
- class="${t.t(this.useWrapper?void 0:`pkt-hide`)}"
26
- .forId=${this.forId}
27
- .helptext=${this.helptext}
28
- .helptextDropdown=${this.helptextDropdown}
29
- .helptextDropdownButton=${this.helptextDropdownButton??s.readMore}
30
- @toggleHelpText=${e=>{this.toggleDropdown(e)}}
31
- >${r.r(this,`helptext`)}</pkt-helptext
32
- >
33
- `,p=()=>{if(!this.counter)return e.h;let t=u(this.counterCurrent,this.counterMaxLength);return e._`<div class="pkt-input__counter" aria-hidden="true">
34
- ${this.counterError?this.counterError:e.h} ${this.counterCurrent||0}
35
- ${this.counterMaxLength?`/${this.counterMaxLength}`:e.h}
36
- </div>
37
- <div class="pkt-sr-only" id=${l(this.forId)} aria-live="polite">
38
- ${t?n.t(this.pktStrings.get(`validation`).counterExceeded,{current:this.counterCurrent??0,max:this.counterMaxLength}):``}
39
- </div>`},m=()=>{if(this.hasError&&this.errorMessage){let t=this.size===`medium`?`small`:`xsmall`;return e._`<div class="pkt-inputwrapper__alert-wrapper">
40
- <pkt-alert
41
- skin="error"
42
- .size=${t}
43
- .role=${`alert`}
44
- id=${`${this.forId}-error`}
45
- aria-live="assertive"
46
- aria-atomic="true"
47
- >
48
- ${i.r(this.errorMessage)}
49
- </pkt-alert>
50
- </div>`}return e.h},h=()=>e._`
51
- ${d()}
52
- ${f()}
53
- ${this.counterPosition===`top`?p():e.h}
54
- <div class="pkt-contents">${r.r(this)}</div>
55
- ${this.counterPosition===`bottom`?p():e.h}
56
- ${m()}
57
- `;return this.hasFieldset?e._`<fieldset class="pkt-inputwrapper__fieldset" aria-describedby="${o}">
58
- ${h()}
59
- </fieldset>`:e._`<div class="pkt-inputwrapper__fieldset">${h()}</div>`}toggleDropdown(e){this.dispatchEvent(new CustomEvent(`toggleHelpText`,{bubbles:!1,detail:{isOpen:e.detail.isOpen}}))}handleLabelClick(){this.dispatchEvent(new CustomEvent(`labelClick`,{bubbles:!0,composed:!0,detail:`label clicked`}))}};e.n([e.u({type:String})],f.prototype,`forId`,void 0),e.n([e.u({type:String})],f.prototype,`label`,void 0),e.n([e.u({type:String})],f.prototype,`helptext`,void 0),e.n([e.u({type:String})],f.prototype,`helptextDropdown`,void 0),e.n([e.u({type:String})],f.prototype,`helptextDropdownButton`,void 0),e.n([e.u({type:Boolean})],f.prototype,`counter`,void 0),e.n([e.u({type:Number})],f.prototype,`counterCurrent`,void 0),e.n([e.u({type:Number})],f.prototype,`counterMaxLength`,void 0),e.n([e.u({type:String})],f.prototype,`counterError`,void 0),e.n([e.u({type:String,reflect:!1})],f.prototype,`counterPosition`,void 0),e.n([e.u({type:Boolean})],f.prototype,`optionalTag`,void 0),e.n([e.u({type:String})],f.prototype,`optionalText`,void 0),e.n([e.u({type:Boolean})],f.prototype,`requiredTag`,void 0),e.n([e.u({type:String})],f.prototype,`requiredText`,void 0),e.n([e.u({type:String})],f.prototype,`tagText`,void 0),e.n([e.u({type:Boolean})],f.prototype,`hasError`,void 0),e.n([e.u({type:String})],f.prototype,`errorMessage`,void 0),e.n([e.u({type:Boolean})],f.prototype,`disabled`,void 0),e.n([e.u({type:Boolean})],f.prototype,`inline`,void 0),e.n([e.u({type:String})],f.prototype,`ariaDescribedby`,void 0),e.n([e.u({type:Boolean})],f.prototype,`hasFieldset`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`role`,void 0),e.n([e.u({type:Boolean,reflect:!0,converter:a.t})],f.prototype,`useWrapper`,void 0),e.n([e.u({type:String,attribute:`input-wrapper-size`})],f.prototype,`size`,void 0);try{e.d(`pkt-input-wrapper`)(f)}catch{console.warn(`Forsøker å definere <pkt-input-wrapper>, men den er allerede definert`)}var p=f;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});
@@ -1,9 +1,9 @@
1
1
  import { _ as e, d as t, h as n, l as r, n as i, t as a, u as o } from "./element-CqC-sGuC.js";
2
2
  import { t as s } from "./if-defined-BNXGXCwT.js";
3
3
  import "./consent-BeoP4rOa.js";
4
- import "./icon-B2v30QUk.js";
5
4
  import { t as c } from "./booleanish-OQJTYSrw.js";
6
5
  import { n as l, r as u, t as d } from "./fetch-header-footer-data-Pc32etrk.js";
6
+ import "./icon-B2v30QUk.js";
7
7
  //#region ../../shared-utils/header-footer/external-domain.ts
8
8
  var f = "oslo.kommune.no", p = /\.(?:co|com|org|net|gov|edu|ac|kommune)\.[a-z]{2}$/i;
9
9
  function m(e) {
@@ -1,9 +1,9 @@
1
1
  import { _ as e, d as t, h as n, l as r, n as i, t as a, u as o } from "./element-CqC-sGuC.js";
2
2
  import { t as s } from "./class-map-D5GHsely.js";
3
- import "./icon-B2v30QUk.js";
4
- import "./accordion-Bwka5Mxo.js";
5
3
  import { t as c } from "./booleanish-OQJTYSrw.js";
6
4
  import { a as l, i as u, n as d, r as f, t as p } from "./fetch-header-footer-data-Pc32etrk.js";
5
+ import "./icon-B2v30QUk.js";
6
+ import "./accordion-Bwka5Mxo.js";
7
7
  //#region src/components/header-menu/header-menu.ts
8
8
  var m = class extends a {
9
9
  constructor(...e) {