@oslokommune/punkt-elements 16.7.1 → 16.7.4

package/dist/datepicker-DpmlsnH_.cjs

@@ -0,0 +1,273 @@
+const e=require(`./element-DjtxO-1r.cjs`),t=require(`./class-map-CJ-msbHs.cjs`),n=require(`./element-with-slot-CWoTGA1B.cjs`);require(`./icon-Dr8sfT2X.cjs`);const r=require(`./if-defined-XKOD_t_V.cjs`),i=require(`./ref-BaJ0mBT_.cjs`),a=require(`./calendar-E5jJLt8D.cjs`);require(`./tag-DLthw5b4.cjs`);const o=require(`./repeat-CqcDYBxr.cjs`),s=require(`./utils-CjAbIttF.cjs`),c=require(`./input-element-B1yxcfz4.cjs`);require(`./input-wrapper-BRuVELpK.cjs`);var l={calendar:{buttonAltText:`Åpne kalender`}},u={calendar:{buttonAltText:`Åpne kalender`},generic:{from:`Fra`,to:`Til`}},d=class extends e.t{constructor(...e){super(...e),this.dates=[],this.dateformat=`dd.MM.yyyy`,this.className=`pkt-datepicker__tags`,this.idBase=s.n()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},e.d`
+      <div class=${t.t(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates)&&this.dates[0]?o.t(a.p((this.dates??[]).filter(Boolean)),e=>e,t=>e.d` <pkt-tag
+                  id=${this.idBase+t+`-tag`}
+                  closeTag
+                  @close=${()=>{this.dispatchEvent(new CustomEvent(`date-tag-removed`,{detail:t}))}}
+                  .ariaLabel=${`${this.strings?.calendar.deleteDate} ${a.l(t,this.dateformat)}`}
+                >
+                  <time datetime=${t}>${a.l(t,this.dateformat)}</time>
+                </pkt-tag>`):e.l}
+      </div>
+    `}};e.r([e.s({type:Array})],d.prototype,`dates`,void 0),e.r([e.s({type:String})],d.prototype,`dateformat`,void 0),e.r([e.s({type:String,attribute:`class`})],d.prototype,`className`,void 0),e.r([e.s({type:String,attribute:`id-base`})],d.prototype,`idBase`,void 0);try{e.c(`pkt-date-tags`)(d)}catch{console.warn(`Forsøker å definere <pkt-date-tags>, men den er allerede definert`)}var f={name:`pkt-datepicker`,react:`PktDatepicker`,"css-class":`pkt-datepicker`,isElement:!0,isPureReact:!0,"dark-mode":!0,props:{name:{type:`string`,name:`Navn for innsending`,category:`tech`},label:{type:`string`,name:`Tekst/label`,category:`contents`},helptext:{type:`string`,name:`Hjelpetekst`,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 utvidet hjelpetekst`,default:`Les mer`,category:`contents`},dateformat:{name:`Datoformat for tags i flervalg`,type:`string`,default:`dd.MM.yyyy`,category:`tech`},currentmonth:{name:`Måned som vises i datovelgeren`,type:`ISOdatestring`,category:`tech`},value:{name:`Verdi (kommaseparert ved flervalg)`,type:`ISOdatestring`,variant:`multiple`,category:`tech`},excludeweekdays:{name:`Utelat ukedager`,type:`string`,description:`Kommaseparert liste over ukedager (1-7) som skal ekskluderes`,category:`functionality`},excludedates:{name:`Utelat datoer (Kommaseparerte ISO-datoer)`,type:`ISOdatestring`,variant:`multiple`,category:`functionality`},min:{name:`Tidligst tillatte dato`,type:`ISOdatestring`,default:null,category:`functionality`},max:{name:`Senest tillatte dato`,type:`ISOdatestring`,default:null,category:`functionality`},weeknumbers:{name:`Vis ukenummer`,type:`boolean`,reflect:!0,default:!1,category:`ui`},withcontrols:{name:`Med velgere for måned/år`,type:`boolean`,reflect:!0,default:!1,category:`ui`},multiple:{name:`Flervalg`,type:`boolean`,reflect:!0,default:!1,category:`functionality`},maxlength:{name:`Maks antall datoer i flervalg`,type:`number`,category:`functionality`,showIf:{multiple:!0}},range:{name:`Datotidsrom (fra og til)`,type:`boolean`,reflect:!0,default:!1,category:`functionality`},showRangeLabels:{attribute:`show-range-labels`,name:`Vis fra/til-etiketter`,type:`boolean`,default:!1,category:`ui`,showIf:{range:!0}},today:{name:`Dagens dato (overstyring)`,type:`ISOdatestring`,description:`ISO-datostreng som overstyrer dagens dato i kalenderen. Nyttig for snapshot-tester.`,category:`tech`},calendarOpen:{attribute:`calendar-open`,name:`Kalender åpen`,type:`boolean`,reflect:!0,default:!1,category:`ui`},hasError:{type:`boolean`,name:`Feil`,default:!1,category:`ui`},errorMessage:{type:`string`,name:`Feilmelding ved feil`,category:`contents`},disabled:{type:`boolean`,name:`Deaktivert`,default:!1,reflect:!0,category:`tech`},fullwidth:{type:`boolean`,name:`Full bredde`,default:!1,reflect:!0,category:`ui`},required:{type:`boolean`,name:`Påkrevd`,default:!1,reflect:!0,category:`tech`},requiredTag:{type:`boolean`,name:`Vise påkrevd-merking`,default:!1,category:`ui`},requiredText:{type:`string`,name:`Påkrevd-tekst`,default:`Må fylles ut`,category:`contents`},optionalTag:{type:`boolean`,name:`Vise valgfritt-merking`,default:!1,category:`ui`},optionalText:{type:`string`,name:`Valgfritt-tekst`,default:`Valgfritt`,category:`contents`},tagText:{type:`string`,name:`Tag-tekst`,description:`Tekst som vises i en tag ved siden av label`,category:`ui`},useWrapper:{type:`boolean`,name:`Bruk wrapper`,description:`Indikerer at feltet skal ha synlig label og hjelpetekst`,displayAsFalse:!0,default:!0,category:`ui`},id:{type:`string`,name:`ID`,description:`Unik identifikasjon for datovelgeren`,category:`tech`},ariaDescribedby:{attribute:`aria-describedby`,name:`aria-describedby`,description:`Spesifiserer ID-en til elementet som beskriver feltet.`,type:`string`,category:`accessibility`}},events:{change:{type:`Event`,name:`change (Elements)`,description:`Returnerer valgt dato som streng i ISO-format. I range-modus utløses kun når begge datoer er valgt.`},"value-change":{type:`CustomEvent`,name:`value-change (Elements)`,description:`Returnerer en <code>array</code> med valgte datoer i ISO-format. I range-modus utløses kun når begge datoer er valgt.`},toggleHelpText:{type:`CustomEvent`,description:`Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes`},onChange:{type:`Event`,name:`onChange (React)`,reactOnly:!0,description:`Utløses når en dato velges. <code>e.target.value</code> inneholder kommaseparerte ISO-datoer. I range-modus utløses kun når begge datoer er valgt.`},onValueChange:{type:`string[]`,name:`onValueChange (React)`,reactOnly:!0,description:`Returnerer en <code>string[]</code> med valgte datoer i ISO-format. I range-modus utløses kun når begge datoer er valgt.`}}},p=()=>{let e=navigator.userAgent;return!!(/iP(hone|od|ad)/.test(e)||/Macintosh/.test(e)&&`ontouchend`in document)},m=()=>p()?`text`:`date`,h=e=>!e||e.length!==2?!0:a.u(e[0],e[1]),g=e=>a.p(e),_=(e,t,n,r,i)=>a.o(e,t,n,r,i),v=(e,t,n,r,i,a)=>({"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":e,"pkt-datepicker--hasrangelabels":t,"pkt-datepicker--multiple":n,"pkt-datepicker--range":r,"ios-readonly-hack":i===!1&&a===`text`}),y=()=>({"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0}),b=e=>({"pkt-input-prefix":e,"pkt-hide":!e}),x=(e,t,n)=>!t&&!n?Array.isArray(e)?e[0]||``:e:Array.isArray(e)?e.join(`,`):e,S=(e,t,n=!1)=>{if(!e||!t)return;let r=t.parentElement?.getBoundingClientRect()||t.getBoundingClientRect(),i=n?r.height+30:r.height,a=e.getBoundingClientRect().height,o=n?`calc(100% - 30px)`:`100%`;r&&r.top+a>window.innerHeight&&r.top-a>0&&(o=`calc(100% - ${i}px - ${a}px)`),e.style.top=o},C=(e,t,n,r,i,a)=>{let{key:o}=e;o===`,`&&(e.preventDefault(),a?a(e):i&&i()),(o===`Space`||o===` `)&&(e.preventDefault(),t(e)),o===`Enter`&&(e.preventDefault(),n?n():r?r():i&&i())},w=(e,t)=>{let{key:n}=e;(n===`Enter`||n===` `||n===`Space`)&&(e.preventDefault(),t(e))},T={validateRangeOrder:h,sortDates:g,filterSelectableDates:_},E={getInputType:m},D={submitForm(e){let t=e.internals?.form;t&&t.requestSubmit()},submitFormOrFallback(e,t){let n=e?.form;n?n.requestSubmit():t()},validateDateInput(e,t,n,r,i){let a=e.value;a&&(n&&n>a?t.setValidity({rangeUnderflow:!0},i?.forms?.messages?.rangeUnderflow||`Value is below minimum`,e):r&&r<a&&t.setValidity({rangeOverflow:!0},i?.forms?.messages?.rangeOverflow||`Value is above maximum`,e))}},O={addToSelected(e,t,n,r){let i=e.target;if(!i.value)return;let o=n?a.d(n):null,s=r?a.d(r):null,c=a.d(i.value.split(`,`)[0]);c&&!isNaN(c.getTime())&&(!o||c>=o)&&(!s||c<=s)&&t.value&&t.value.handleDateSelect(c),i.value=``},handleCalendarPosition(e,t,n=!1){S(e.value??null,t.value??null,n)}},k={getInputClasses:v,getButtonClasses:y,getRangeLabelClasses:b},A={processDateSelection:x,updateInputValues(e,t,n,r,i,a){e.value&&(r&&t?.value?(e.value.value=n[0]??``,t.value.value=n[1]??``,a(e.value),a(t.value)):i||(e.value.value=n.length?n[0]:``,a(e.value)))},processRangeBlur(e,t,n,r,i){let o=e.target;if(o.value){i(o);let e=a.c(o.value);e&&n?.value?.handleDateSelect(e)}else t[0]&&r()}},j={handleInputKeydown:C,handleButtonKeydown:w},M=class extends e.t{constructor(...e){super(...e),this.open=!1,this.multiple=!1,this.range=!1,this.weeknumbers=!1,this.withcontrols=!1,this.maxMultiple=null,this.selected=[],this.earliest=null,this.latest=null,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.today=null,this._hasBeenOpened=!1,this.popupRef=i.t(),this.calendarRef=i.t(),this.handleDocumentClick=e=>{if(!this.open)return;let t=e.composedPath(),n=this.parentElement,r=this.popupRef.value;!t.includes(this)&&!t.includes(r)&&!(n&&t.includes(n))&&(this.hide(),this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0})))},this.handleDocumentKeydown=e=>{this.open&&e.key===`Escape`&&(this.hide(),this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0})))}}firstUpdated(){this.calRef=this.calendarRef}updated(e){super.updated(e),e.has(`open`)&&(this.open?(this._hasBeenOpened=!0,document.addEventListener(`keydown`,this.handleDocumentKeydown),document.addEventListener(`click`,this.handleDocumentClick)):(document.removeEventListener(`click`,this.handleDocumentClick),document.removeEventListener(`keydown`,this.handleDocumentKeydown)))}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(`click`,this.handleDocumentClick),document.removeEventListener(`keydown`,this.handleDocumentKeydown)}show(){this.open=!0,this.calendarRef.value?.focus()}hide(){this.open=!1}toggle(){this.open?this.hide():this.show()}contains(e){return!!e&&!!this.popupRef.value?.contains(e)}focusOnCurrentDate(){let e=this.calendarRef.value;e&&typeof e.focusOnCurrentDate==`function`&&e.focusOnCurrentDate()}addToSelected(e,t,n){if(this.calendarRef.value&&typeof O.addToSelected==`function`)return O.addToSelected(e,this.calendarRef,t,n);let r=e.target;if(!r.value)return;let i=t?a.d(t):null,o=n?a.d(n):null,s=a.d(r.value.split(`,`)[0]);s&&!isNaN(s.getTime())&&(!i||s>=i)&&(!o||s<=o)&&this.handleDateSelect(s),r.value=``}handleDateSelect(e){let t=this.calendarRef.value;if(t&&typeof t.handleDateSelect==`function`)return t.handleDateSelect(e);let n=a.s(e),r=this.selected.indexOf(n)>=0?this.selected.filter(e=>e!==n):[...this.selected,n];this.selected=r,this.dispatchEvent(new CustomEvent(`date-selected`,{detail:r,bubbles:!0,composed:!0}))}render(){return e.d`
+      <div
+        class="${t.t({"pkt-calendar-popup":!0,show:this.open,hide:!this.open})}"
+        ${i.n(this.popupRef)}
+        id="date-popup"
+        ?hidden=${!this.open}
+        aria-hidden="${!this.open}"
+      >
+        ${this.open||this._hasBeenOpened?e.d`<pkt-calendar
+              ${i.n(this.calendarRef)}
+              ?multiple=${this.multiple}
+              ?range=${this.range}
+              ?weeknumbers=${this.weeknumbers}
+              ?withcontrols=${this.withcontrols}
+              .maxMultiple=${this.maxMultiple}
+              .selected=${this.selected}
+              .earliest=${this.earliest}
+              .latest=${this.latest}
+              .excludedates=${this.excludedates}
+              .excludeweekdays=${this.excludeweekdays}
+              .currentmonth=${this.currentmonth}
+              .today=${this.today}
+              @date-selected=${e=>{this.selected=e.detail,this.dispatchEvent(new CustomEvent(`date-selected`,{detail:e.detail,bubbles:!0,composed:!0}))}}
+              @close=${()=>{this.hide(),this.dispatchEvent(new CustomEvent(`close`,{bubbles:!0,composed:!0}))}}
+            ></pkt-calendar>`:e.l}
+      </div>
+    `}};e.r([e.s({type:Boolean,reflect:!0})],M.prototype,`open`,void 0),e.r([e.s({type:Boolean})],M.prototype,`multiple`,void 0),e.r([e.s({type:Boolean})],M.prototype,`range`,void 0),e.r([e.s({type:Boolean})],M.prototype,`weeknumbers`,void 0),e.r([e.s({type:Boolean})],M.prototype,`withcontrols`,void 0),e.r([e.s({type:Number})],M.prototype,`maxMultiple`,void 0),e.r([e.s({type:Array})],M.prototype,`selected`,void 0),e.r([e.s({type:String})],M.prototype,`earliest`,void 0),e.r([e.s({type:String})],M.prototype,`latest`,void 0),e.r([e.s({type:Array})],M.prototype,`excludedates`,void 0),e.r([e.s({type:Array})],M.prototype,`excludeweekdays`,void 0),e.r([e.s({type:String})],M.prototype,`currentmonth`,void 0),e.r([e.s({type:String})],M.prototype,`today`,void 0),e.r([e.o()],M.prototype,`_hasBeenOpened`,void 0);try{e.c(`pkt-datepicker-popup`)(M)}catch{console.warn(`Forsøker å definere <pkt-datepicker-popup>, men den er allerede definert`)}var N=class extends e.t{constructor(...e){super(...e),this.inputType=`date`,this.id=``,this.readonly=!1,this.disabled=!1,this.inputClasses={},this.inputRef=i.t(),this.btnRef=i.t()}get inputElement(){return this.inputRef.value}get buttonElement(){return this.btnRef.value}get isInputReadonly(){return this.readonly||this.inputType===`text`}dispatchToggleCalendar(e){this.readonly||this.dispatchEvent(new CustomEvent(`toggle-calendar`,{detail:e,bubbles:!0,composed:!0}))}dispatchInput(e){this.dispatchEvent(new CustomEvent(`input-change`,{detail:e,bubbles:!0,composed:!0}))}dispatchFocus(){this.dispatchEvent(new CustomEvent(`input-focus`,{bubbles:!0,composed:!0}))}dispatchBlur(e){this.dispatchEvent(new CustomEvent(`input-blur`,{detail:e,bubbles:!0,composed:!0}))}dispatchChange(e){this.dispatchEvent(new CustomEvent(`input-changed`,{detail:e,bubbles:!0,composed:!0}))}renderCalendarButton(){return e.d`
+      <button
+        class="${t.t(k.getButtonClasses())}"
+        type="button"
+        @click=${e=>this.dispatchToggleCalendar(e)}
+        @keydown=${e=>{let{key:t}=e;(t===`Enter`||t===` `||t===`Space`)&&(e.preventDefault(),this.dispatchToggleCalendar(e))}}
+        ?disabled=${this.disabled}
+        ${this.btnRef}
+      >
+        <pkt-icon name="calendar"></pkt-icon>
+        <span class="pkt-btn__text">${this.strings.calendar?.buttonAltText||`Åpne kalender`}</span>
+      </button>
+    `}createRenderRoot(){return this}};e.r([e.s({type:String})],N.prototype,`inputType`,void 0),e.r([e.s({type:String})],N.prototype,`id`,void 0),e.r([e.s({type:String})],N.prototype,`min`,void 0),e.r([e.s({type:String})],N.prototype,`max`,void 0),e.r([e.s({type:String})],N.prototype,`placeholder`,void 0),e.r([e.s({type:Boolean})],N.prototype,`readonly`,void 0),e.r([e.s({type:Boolean})],N.prototype,`disabled`,void 0),e.r([e.s({type:Object})],N.prototype,`inputClasses`,void 0),e.r([e.s({type:Object})],N.prototype,`internals`,void 0);var P=class extends N{constructor(...e){super(...e),this.value=``,this.strings=l}dispatchManageValidity(e){this.dispatchEvent(new CustomEvent(`manage-validity`,{detail:e,bubbles:!0,composed:!0}))}render(){return e.d`
+      <div class="pkt-input__container">
+        <input
+          class="${t.t(this.inputClasses)}"
+          .type=${this.inputType}
+          id="${this.id}-input"
+          .value=${this.value}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          aria-describedby="${this.id}-helptext"
+          @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
+          @touchend=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
+          ?disabled=${this.disabled}
+          @keydown=${e=>j.handleInputKeydown(e,e=>this.dispatchToggleCalendar(e),()=>D.submitFormOrFallback(this.internals,()=>this.inputRef.value?.blur()),void 0,()=>this.inputRef.value?.blur())}
+          @input=${e=>{this.dispatchInput(e),e.stopImmediatePropagation()}}
+          @focus=${()=>{this.dispatchFocus(),p()&&this.dispatchToggleCalendar(new Event(`focus`))}}
+          @blur=${e=>{this.dispatchBlur(e),this.dispatchManageValidity(e.target),this.dispatchEvent(new CustomEvent(`value-change`,{detail:e.target.value,bubbles:!0,composed:!0}))}}
+          @change=${e=>{this.dispatchChange(e),e.stopImmediatePropagation()}}
+          ${i.n(this.inputRef)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `}};e.r([e.s({type:String})],P.prototype,`value`,void 0),e.r([e.s({type:Object})],P.prototype,`strings`,void 0);try{e.c(`pkt-datepicker-single`)(P)}catch{console.warn(`Forsøker å definere <pkt-datepicker-single>, men den er allerede definert`)}var F=class extends N{constructor(...e){super(...e),this.value=[],this.label=``,this.showRangeLabels=!1,this.strings=u,this.inputRefTo=i.t()}get inputElementTo(){return this.inputRefTo.value}render(){let n=k.getRangeLabelClasses(this.showRangeLabels);return e.d`
+      <div class="pkt-input__container">
+        ${this.showRangeLabels?e.d` <div class="pkt-input-prefix">${this.strings.generic?.from}</div> `:e.l}
+        <input
+          class=${t.t(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          aria-label="${this.label} ${this.strings.generic?.from??`Fra`}"
+          .value=${this.value[0]??``}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
+          @touchend=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
+          @keydown=${e=>j.handleInputKeydown(e,e=>this.dispatchToggleCalendar(e),()=>D.submitFormOrFallback(this.internals,()=>this.inputRefTo.value?.focus()),()=>this.inputRefTo.value?.focus(),()=>this.inputRef.value?.blur())}
+          @input=${e=>{this.dispatchInput(e),e.stopImmediatePropagation()}}
+          @focus=${()=>{this.dispatchFocus(),p()&&this.dispatchToggleCalendar(new Event(`focus`))}}
+          @blur=${e=>{this.dispatchBlur(e),this.dispatchEvent(new CustomEvent(`range-blur`,{detail:{event:e,values:this.value,inputType:`from`},bubbles:!0,composed:!0}))}}
+          @change=${e=>{this.dispatchChange(e),e.stopImmediatePropagation()}}
+          ${i.n(this.inputRef)}
+        />
+        <div class="${t.t(n)}" id="${this.id}-to-label">
+          ${this.strings.generic?.to}
+        </div>
+        ${this.showRangeLabels?e.l:e.d` <div class="pkt-input-separator">–</div> `}
+        <input
+          class=${t.t(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-to"
+          aria-label="${this.label} ${this.strings.generic?.to??`Til`}"
+          .value=${this.value[1]??``}
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.disabled}
+          @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
+          @touchend=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
+          @keydown=${e=>j.handleInputKeydown(e,e=>this.dispatchToggleCalendar(e),()=>D.submitFormOrFallback(this.internals,()=>this.inputRefTo.value?.blur()),void 0,()=>this.inputRefTo.value?.blur())}
+          @input=${e=>{this.dispatchInput(e),e.stopImmediatePropagation()}}
+          @focus=${()=>{this.dispatchFocus(),p()&&this.dispatchToggleCalendar(new Event(`focus`))}}
+          @blur=${e=>{this.dispatchBlur(e),this.dispatchEvent(new CustomEvent(`range-blur`,{detail:{event:e,values:this.value,inputType:`to`},bubbles:!0,composed:!0}))}}
+          @change=${e=>{this.dispatchChange(e),e.stopImmediatePropagation()}}
+          ${i.n(this.inputRefTo)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `}};e.r([e.s({type:Array})],F.prototype,`value`,void 0),e.r([e.s({type:String})],F.prototype,`label`,void 0),e.r([e.s({type:Boolean})],F.prototype,`showRangeLabels`,void 0),e.r([e.s({type:Object})],F.prototype,`strings`,void 0);try{e.c(`pkt-datepicker-range`)(F)}catch{console.warn(`Forsøker å definere <pkt-datepicker-range>, men den er allerede definert`)}var I=class extends N{constructor(...e){super(...e),this.value=[],this.strings=l}get isInputDisabled(){return this.disabled||this.maxlength!==void 0&&this.maxlength!==null&&this.value.length>=this.maxlength}dispatchAddToSelected(e){this.dispatchEvent(new CustomEvent(`add-to-selected`,{detail:e,bubbles:!0,composed:!0}))}render(){return e.d`
+      <div class="pkt-input__container">
+        <input
+          class=${t.t(this.inputClasses)}
+          .type=${this.inputType}
+          id="${this.id}-input"
+          min=${r.t(this.min)}
+          max=${r.t(this.max)}
+          placeholder=${r.t(this.placeholder)}
+          ?readonly=${this.isInputReadonly}
+          ?disabled=${this.isInputDisabled}
+          @click=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
+          @touchend=${e=>{e.preventDefault(),this.dispatchToggleCalendar(e)}}
+          @blur=${e=>{this.dispatchBlur(e),this.dispatchAddToSelected(e)}}
+          @input=${e=>{this.dispatchInput(e),e.stopImmediatePropagation()}}
+          @focus=${()=>{this.dispatchFocus(),p()&&this.dispatchToggleCalendar(new Event(`focus`))}}
+          @keydown=${e=>j.handleInputKeydown(e,e=>this.dispatchToggleCalendar(e),()=>D.submitFormOrFallback(this.internals,()=>this.inputRef.value?.blur()),void 0,void 0,e=>this.dispatchAddToSelected(e))}
+          @change=${e=>{this.dispatchChange(e),e.stopImmediatePropagation()}}
+          ${i.n(this.inputRef)}
+        />
+        ${this.renderCalendarButton()}
+      </div>
+    `}};e.r([e.s({type:Array})],I.prototype,`value`,void 0),e.r([e.s({type:Number})],I.prototype,`maxlength`,void 0),e.r([e.s({type:Object})],I.prototype,`strings`,void 0);try{e.c(`pkt-datepicker-multiple`)(I)}catch{console.warn(`Forsøker å definere <pkt-datepicker-multiple>, men den er allerede definert`)}var L=class extends c.t{constructor(...e){super(...e),this._valueProperty=``,this._valueProcessing=!1,this.datepickerPopupRef=i.t(),this._value=[],this.label=`Datovelger`,this.dateformat=f.props.dateformat.default,this.multiple=f.props.multiple.default,this.maxlength=null,this.range=f.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=f.props.weeknumbers.default,this.withcontrols=f.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.today=null,this.calendarOpen=!1,this.timezone=`Europe/Oslo`,this.inputClasses={},this.calRef=i.t(),this.popupRef=i.t(),this.singleInputRef=i.t(),this.rangeInputRef=i.t(),this.multipleInputRef=i.t(),this.addToSelected=e=>{let t=this.datepickerPopupRef.value;return t&&typeof t.addToSelected==`function`?t.addToSelected(e,this.min,this.max):O.addToSelected(e,this.calRef,this.min,this.max)}}get value(){return this._valueProperty}set value(e){let t=this._valueProperty;this._valueProperty=Array.isArray(e)?e.join(`,`):e||``,this.valueChanged(this._valueProperty,t),this.requestUpdate(`value`,t)}get inputType(){return E.getInputType()}connectedCallback(){super.connectedCallback(),this.timezone&&this.timezone!==window.pktTz&&(window.pktTz=this.timezone)}disconnectedCallback(){super.disconnectedCallback()}onInput(){this.dispatchEvent(new Event(`input`,{bubbles:!0}))}valueChanged(e,t){if(!(this._valueProcessing||e===t)){this._valueProcessing=!0;try{let n=a.a(e),r=this.multiple&&n.length>1?T.filterSelectableDates(n,this.min,this.max,this.excludedates,this.excludeweekdays):n;if(this.range&&!T.validateRangeOrder(r)){this._value=[],this._valueProperty=``,super.valueChanged(``,t);return}this._value=r;let i=a.i(r);if(this._valueProperty!==i&&(this._valueProperty=i),this.range&&r.length<2)return;super.valueChanged(i,t)}finally{this._valueProcessing=!1}}}attributeChangedCallback(e,t,n){e===`value`&&this.value!==t&&this.valueChanged(n,t),e===`excludedates`&&typeof this.excludedates==`string`&&(this.excludedates=a.a(n||``)),e===`excludeweekdays`&&typeof this.excludeweekdays==`string`&&(this.excludeweekdays=a.a(n||``)),super.attributeChangedCallback(e,t,n)}updated(e){if(e.has(`value`)&&(e.has(`multiple`)||e.has(`range`))){let t=Array.isArray(this.value)?this.value.join(`,`):this.value,n=e.get(`value`),r=Array.isArray(n)?n.join(`,`):n;this.valueChanged(t,r)}e.has(`multiple`)&&(this.multiple&&!Array.isArray(this._value)?this._value=a.a(this.value):!this.multiple&&Array.isArray(this._value)&&(this._value=this._value.filter(Boolean)),!this.multiple&&!this.range&&Array.isArray(this._value)&&(this._value=[this._value[0]??``])),super.updated(e)}get inputRef(){return{value:this.currentInputElement}}get inputRefTo(){return{value:this.currentInputElementTo}}get currentInputElement(){return this.multiple?this.multipleInputRef.value?.inputElement:this.range?this.rangeInputRef.value?.inputElement:this.singleInputRef.value?.inputElement}get currentInputElementTo(){if(this.range)return this.rangeInputRef.value?.inputElementTo}get currentButtonElement(){return this.multiple?this.multipleInputRef.value?.buttonElement:this.range?this.rangeInputRef.value?.buttonElement:this.singleInputRef.value?.buttonElement}get btnRef(){return{value:this.currentButtonElement}}renderInput(){return e.d`
+      <pkt-datepicker-single
+        .value=${this._value[0]??``}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
+        @input-change=${()=>this.onInput()}
+        @input-focus=${()=>this.onFocus()}
+        @input-blur=${e=>{this.calRef.value?.contains(e.detail.relatedTarget)||this.onBlur()}}
+        @manage-validity=${e=>this.manageValidity(e.detail)}
+        @value-change=${e=>{this.value=e.detail}}
+        @input-changed=${()=>{this.touched=!0}}
+        ${i.n(this.singleInputRef)}
+      ></pkt-datepicker-single>
+    `}renderRangeInput(){return e.d`
+      <pkt-datepicker-range
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .label=${this.label}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .showRangeLabels=${this.showRangeLabels}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
+        @input-change=${()=>this.onInput()}
+        @input-focus=${()=>this.onFocus()}
+        @input-blur=${e=>{this.calRef.value?.contains(e.detail.relatedTarget)||this.onBlur()}}
+        @range-blur=${e=>{let t=this.currentInputElement,n=this.currentInputElementTo;if(t&&n){let e=t.value,r=n.value;if(e&&r&&e>r)n.value=``,this._value=[e],this.value=e;else{let t=[e,r].filter(Boolean);t.length>0&&(t[0]!==this._value[0]||t[1]!==this._value[1])&&(this._value=t,this.value=t.join(`,`))}}A.processRangeBlur(e.detail.event,e.detail.values,this.calRef,()=>this.clearInputValue(),e=>this.manageValidity(e))}}
+        @manage-validity=${e=>this.manageValidity(e.detail)}
+        @validate-date-input=${e=>{D.validateDateInput(e.detail,this.internals,this.min,this.max,this.strings)}}
+        @handle-date-select=${e=>{let t=a.c(e.detail);if(t){let e=a.s(t);this._value[0]!==e&&this._value[1]!==e&&this.calRef?.value?.handleDateSelect(t)}}}
+        @input-changed=${()=>{this.touched=!0}}
+        ${i.n(this.rangeInputRef)}
+      ></pkt-datepicker-range>
+    `}renderMultipleInput(){return e.d`
+      <pkt-datepicker-multiple
+        .value=${this._value}
+        .inputType=${this.inputType}
+        .id=${this.id}
+        .min=${this.min}
+        .max=${this.max}
+        .placeholder=${this.placeholder}
+        .readonly=${this.readonly}
+        .disabled=${this.disabled}
+        .maxlength=${this.maxlength}
+        .inputClasses=${this.inputClasses}
+        .internals=${this.internals}
+        .strings=${this.strings}
+        @toggle-calendar=${e=>this.toggleCalendar(e.detail)}
+        @input-change=${()=>this.onInput()}
+        @input-focus=${()=>this.onFocus()}
+        @input-blur=${e=>{this.calRef.value?.contains(e.detail.relatedTarget)||this.onBlur()}}
+        @add-to-selected=${e=>this.addToSelected(e.detail)}
+        @input-changed=${()=>{this.touched=!0}}
+        ${i.n(this.multipleInputRef)}
+      ></pkt-datepicker-multiple>
+    `}renderCalendar(){return e.d`
+      <pkt-datepicker-popup
+        class="pkt-contents"
+        ?open=${this.calendarOpen}
+        ?multiple=${this.multiple}
+        ?range=${this.range}
+        ?weeknumbers=${this.weeknumbers}
+        ?withcontrols=${this.withcontrols}
+        .maxMultiple=${this.maxlength}
+        .selected=${this._value}
+        .earliest=${this.min}
+        .latest=${this.max}
+        .excludedates=${Array.isArray(this.excludedates)?this.excludedates:this.excludedates.split(`,`)}
+        .excludeweekdays=${this.excludeweekdays}
+        .currentmonth=${this.currentmonth?a.f(this.currentmonth):null}
+        .today=${this.today}
+        @date-selected=${e=>{this.value=A.processDateSelection(e.detail,this.multiple,this.range),this._value=e.detail,A.updateInputValues(this.inputRef,this.inputRefTo,this._value,this.range,this.multiple,e=>this.manageValidity(e))}}
+        @close=${()=>{this.onBlur(),this.hideCalendar()}}
+        ${i.n(this.datepickerPopupRef)}
+      ></pkt-datepicker-popup>
+    `}render(){return this.inputClasses=k.getInputClasses(this.fullwidth,this.showRangeLabels,this.multiple,this.range,this.readonly,this.inputType),e.d`
+      <pkt-input-wrapper
+        label="${this.label}"
+        forId="${this.id}-input"
+        ?counter=${this.multiple&&!!this.maxlength}
+        .counterCurrent=${this.value?this._value.length:0}
+        .counterMaxLength=${this.maxlength}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?required=${this.required}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        useWrapper=${this.useWrapper}
+        .optionalText=${this.optionalText}
+        .requiredText=${this.requiredText}
+        .tagText=${this.tagText}
+        .errorMessage=${this.errorMessage}
+        .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
+        .ariaDescribedBy=${this.ariaDescribedBy}
+        class="pkt-datepicker"
+      >
+        <div class="pkt-contents" slot="helptext">${n.n(this,`helptext`)}</div>
+        ${this.multiple?e.d`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${e=>{let t=this.datepickerPopupRef.value,n=a.c(e.detail);t&&n&&typeof t.handleDateSelect==`function`?t.handleDateSelect(n):this.calRef.value?.handleDateSelect(n)}}
+            ></pkt-date-tags>`:e.l}
+        <div class="pkt-datepicker__inputs ${this.range?`pkt-input__range-inputs`:``}">
+          ${this.range?this.renderRangeInput():this.multiple?this.renderMultipleInput():this.renderInput()}
+        </div>
+      </pkt-input-wrapper>
+      ${this.renderCalendar()}
+    `}handleCalendarPosition(){let e=this.multiple&&!!this.maxlength;O.handleCalendarPosition(this.popupRef,this.inputRef,e)}async showCalendar(){let e=this.datepickerPopupRef.value;if(this.calendarOpen=!0,e&&typeof e.show==`function`){e.show(),p()&&e.focusOnCurrentDate();return}await s.t(20),this.handleCalendarPosition(),p()&&this.calRef.value?.focusOnCurrentDate()}hideCalendar(){let e=this.datepickerPopupRef.value;if(this.calendarOpen=!1,e&&typeof e.hide==`function`)return e.hide()}async toggleCalendar(e){e.preventDefault();let t=this.datepickerPopupRef.value;if(t&&typeof t.toggle==`function`){let e=!!t.open;t.toggle(),this.calendarOpen=!e;return}this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=``,this.internals.setFormValue(this.value),this.dispatchEvent(new Event(`change`,{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`value-change`,{detail:this._value,bubbles:!0,composed:!0}))}};e.r([e.s({type:String,reflect:!0})],L.prototype,`value`,null),e.r([e.s({type:String,reflect:!0})],L.prototype,`label`,void 0),e.r([e.s({type:String})],L.prototype,`dateformat`,void 0),e.r([e.s({type:Boolean,reflect:!0})],L.prototype,`multiple`,void 0),e.r([e.s({type:Number,reflect:!0})],L.prototype,`maxlength`,void 0),e.r([e.s({type:Boolean,reflect:!0})],L.prototype,`range`,void 0),e.r([e.s({type:Boolean,attribute:`show-range-labels`})],L.prototype,`showRangeLabels`,void 0),e.r([e.s({type:String,reflect:!0})],L.prototype,`min`,void 0),e.r([e.s({type:String,reflect:!0})],L.prototype,`max`,void 0),e.r([e.s({type:Boolean})],L.prototype,`weeknumbers`,void 0),e.r([e.s({type:Boolean,reflect:!0})],L.prototype,`withcontrols`,void 0),e.r([e.s({converter:a.r.csvToArray})],L.prototype,`excludedates`,void 0),e.r([e.s({converter:a.r.csvToArray})],L.prototype,`excludeweekdays`,void 0),e.r([e.s({type:String})],L.prototype,`currentmonth`,void 0),e.r([e.s({type:String})],L.prototype,`today`,void 0),e.r([e.s({type:Boolean,reflect:!0,attribute:`calendar-open`})],L.prototype,`calendarOpen`,void 0),e.r([e.s({type:String})],L.prototype,`timezone`,void 0),e.r([e.o()],L.prototype,`inputClasses`,void 0);try{e.c(`pkt-datepicker`)(L)}catch{console.warn(`Forsøker å definere <pkt-datepicker>, men den er allerede definert`)}Object.defineProperty(exports,`a`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`i`,{enumerable:!0,get:function(){return P}}),Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return I}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return F}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return L}});