@oslokommune/punkt-elements 12.18.0 → 12.18.2

package/dist/datepicker-vX74tb3R.cjs

@@ -0,0 +1,154 @@
+"use strict";const $=require("./class-map-Boa7BqCc.cjs"),k=require("./if-defined-DEDlGbAc.cjs"),s=require("./icon-CdMQ6zBT.cjs"),T=require("./state-SKYD8kRO.cjs"),g=require("./calendar-QSulz7im.cjs"),S=require("./input-element-DNklGY_O.cjs"),r=require("./ref-DCOsLZQg.cjs");require("./input-wrapper-D-PNRJB_.cjs");require("./tag-CGy2mSLE.cjs");/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */const R=(o,e,t)=>{const i=new Map;for(let a=e;a<=t;a++)i.set(o[a],a);return i},P=s.e(class extends s.i{constructor(o){if(super(o),o.type!==s.t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(o,e,t){let i;t===void 0?t=e:e!==void 0&&(i=e);const a=[],n=[];let l=0;for(const c of o)a[l]=i?i(c,l):l,n[l]=t(c,l),l++;return{values:n,keys:a}}render(o,e,t){return this.dt(o,e,t).values}update(o,[e,t,i]){const a=r.p(o),{values:n,keys:l}=this.dt(e,t,i);if(!Array.isArray(a))return this.ut=l,n;const c=this.ut??(this.ut=[]),m=[];let b,w,u=0,h=a.length-1,d=0,f=n.length-1;for(;u<=h&&d<=f;)if(a[u]===null)u++;else if(a[h]===null)h--;else if(c[u]===l[d])m[d]=r.v(a[u],n[d]),u++,d++;else if(c[h]===l[f])m[f]=r.v(a[h],n[f]),h--,f--;else if(c[u]===l[f])m[f]=r.v(a[u],n[f]),r.r(o,m[f+1],a[u]),u++,f--;else if(c[h]===l[d])m[d]=r.v(a[h],n[d]),r.r(o,a[u],a[h]),h--,d++;else if(b===void 0&&(b=R(l,d,f),w=R(c,u,h)),b.has(c[u]))if(b.has(c[h])){const v=w.get(l[d]),x=v!==void 0?a[v]:null;if(x===null){const D=r.r(o,a[u]);r.v(D,n[d]),m[d]=D}else m[d]=r.v(x,n[d]),r.r(o,a[u],x),a[v]=null;d++}else r.M(a[h]),h--;else r.M(a[u]),u++;for(;d<=f;){const v=r.r(o,m[f+1]);r.v(v,n[d]),m[d++]=v}for(;u<=h;){const v=a[u++];v!==null&&r.M(v)}return this.ut=l,r.m(o,m),s.T}}),I="pkt-datepicker",_=!0,O={name:{type:"string",name:"Navn",description:"Navn som sendes brukes i skjema ved innsending"},label:{type:"string",name:"Etikett",description:"Tekst som vises over datovelgeren"},helptext:{type:"string",name:"Hjelpetekst",description:"Hjelpetekst som vises over datovelgeren"},helptextDropdown:{type:"string",name:"Utvidet hjelpetekst",description:"Hjelpetekst som vises i en lukket boks man kan åpne"},helptextDropdownButton:{type:"string",name:"Knappetekst for hjelpetekst",description:"Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",default:"Les mer"},dateformat:{name:"Datoformat",description:"Datoformat for valgte datoer i flervalgsmodus",type:"string",default:"dd.MM.yyyy"},currentmonth:{name:"Nåværende måned",type:"ISOdatestring",description:"Måneden som skal vises i datovelgeren"},value:{name:"Verdi",type:"ISOdatestring",variant:"multiple",reflect:!0,description:"Kommaseparert liste av valgte datoer"},excludeweekdays:{name:"Utelat ukedager",type:"string",description:"Kommaseparert liste over ukedager (1-7) som skal ekskluderes"},excludedates:{name:"Utelat datoer",type:"ISOdatestring",variant:"multiple",description:"Kommaseparert liste over datoer som skal ekskluderes"},min:{name:"Tidligst tillatt",type:"ISOdatestring",default:null,description:"Første tillate dato i datovelgeren"},max:{name:"Senest tillatt",type:"ISOdatestring",default:null,description:"Siste tillate dato i datovelgeren"},weeknumbers:{name:"Vis ukenummer",type:"boolean",reflect:!0,default:!1,description:"Vis ukedager i datovelgerens kalender"},withcontrols:{name:"Med kontroller",type:"boolean",reflect:!0,default:!1,description:"Vis avanserte velgere for måned og år"},multiple:{name:"Flervalg",type:"boolean",reflect:!0,default:!1,description:"Tillat valg av flere enn én dato i samme velger"},maxlength:{name:"Maks antall",description:"Maks valgte datoer i flervalgsmodus",type:"number"},range:{name:"Datotidsrom",type:"boolean",reflect:!0,default:!1,description:"Tillat å velge et tidsrom mellom to datoer i samme velger"},hasError:{type:"boolean",name:"Feil",default:!1,description:"Viser feiltilstand for datovelgeren"},errorMessage:{type:"string",name:"Feilmelding",description:"Tekst som vises under datovelgeren ved feiltilstand"},disabled:{type:"boolean",name:"Deaktivert",default:!1,reflect:!0,description:"Er datovelgeren deaktivert?"},fullwidth:{type:"boolean",name:"Full bredde",default:!1,reflect:!0,description:"Skal datovelgeren ta opp hele bredden?"},required:{type:"boolean",name:"Påkrevd",default:!1,reflect:!0,description:"Er datovelgeren påkrevd?"},requiredTag:{type:"boolean",name:"Vise påkrevd-merking",default:!1,description:"Viser en merking som indikerer at datovelgeren er påkrevd"},requiredText:{type:"string",name:"Påkrevd-tekst",default:"Må fylles ut",description:"Tekst som vises i påkrevd-merkingen"},optionalTag:{type:"boolean",name:"Vise valgfritt-merking",default:!1,description:"Viser en merking som indikerer at datovelgeren er valgfri"},optionalText:{type:"string",name:"Valgfritt-tekst",default:"Valgfritt",description:"Tekst som vises i valgfritt-merkingen"},useWrapper:{type:"boolean",name:"Bruk wrapper",description:"Indikerer at feltet skal ha synlig label og hjelpetekst",displayAsFalse:!0,default:!0},id:{type:"string",name:"ID",description:"Unik identifikasjon for datovelgeren"}},E={change:{type:"Event",description:"Returnerer valgt dato som streng i ISO-format"},"value-change":{type:"CustomEvent",description:"Returnerer en <code>array</code> med valgte datoer i ISO-format"},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={name:I,"css-class":"pkt-datepicker",isElement:_,props:O,events:E};var M=Object.defineProperty,B=Object.getOwnPropertyDescriptor,p=(o,e,t,i)=>{for(var a=i>1?void 0:i?B(e,t):e,n=o.length-1,l;n>=0;n--)(l=o[n])&&(a=(i?l(e,t,a):l(a))||a);return i&&a&&M(e,t,a),a};const C=o=>new Promise(e=>setTimeout(e,o));exports.PktDatepicker=class extends S.PktInputElement{constructor(){super(...arguments),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=y.props.dateformat.default,this.multiple=y.props.multiple.default,this.maxlength=null,this.range=y.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=y.props.weeknumbers.default,this.withcontrols=y.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=r.e(),this.inputRefTo=r.e(),this.btnRef=r.e(),this.calRef=r.e(),this.popupRef=r.e(),this.addToSelected=e=>{const t=e.target;if(!t.value)return;const i=this.min?g.newDate(this.min):null,a=this.max?g.newDate(this.max):null,n=g.newDate(t.value.split(",")[0]);n&&!isNaN(n.getTime())&&(!i||n>=i)&&(!a||n<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(n),t.value=""}}async connectedCallback(){super.connectedCallback(),this.isMobileSafari=/iP(ad|od|hone)/i.test(window.navigator.userAgent)&&!!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/),this.inputType=this.isMobileSafari?"text":"date",document&&document.body.addEventListener("click",e=>{var t,i;(t=this.inputRef)!=null&&t.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(e.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(e.target))&&!this.btnRef.value.contains(e.target)&&!e.target.closest(".pkt-calendar-popup")&&this.calendarOpen&&(this.onBlur(),this.hideCalendar())}),this.value.length&&this._value.length===0&&(this._value=Array.isArray(this.value)?this.value:this.value.split(",")),this.min=this.min||y.props.min.default,this.max=this.max||y.props.max.default,typeof this.excludedates=="string"&&(this.excludedates=this.excludedates.split(",")),typeof this.excludeweekdays=="string"&&(this.excludeweekdays=this.excludeweekdays.split(",")),(this.multiple||this.range)&&this.name&&!this.name.endsWith("[]")&&(this.name=this.name+"[]"),this.calendarOpen&&(await C(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",e=>{var t,i;(t=this.inputRef)!=null&&t.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(e.target)&&!this.btnRef.value.contains(e.target)&&this.hideCalendar()})}attributeChangedCallback(e,t,i){if(e==="value"){if(this.range&&(i==null?void 0:i.split(",").length)===1)return;this.value!==t&&this.valueChanged(i,t)}e==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),e==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(e,t,i)}updated(e){if(e.has("value")){if(this.range&&this.value.length===1)return;this.valueChanged(this.value,e.get("value"))}super.updated(e)}renderInput(){return s.x`
+      <input
+        class="${$.e(this.inputClasses)}"
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0]??""}
+        min=${k.o(this.min)}
+        max=${k.o(this.max)}
+        @click=${e=>{e.preventDefault(),this.showCalendar()}}
+        ?disabled=${this.disabled}
+        @keydown=${e=>{var t;(e.key===","||e.key==="Enter")&&((t=this.inputRef.value)==null||t.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e))}}
+        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
+        @blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.relatedTarget)||this.onBlur(),this.manageValidity(e.target),this.value=e.target.value}}
+        @change=${e=>{e.stopImmediatePropagation()}}
+        ${r.n(this.inputRef)}
+      />
+    `}renderRangeInput(){const e={"pkt-input-prefix":this.showRangeLabels,"pkt-hide":!this.showRangeLabels};return s.x`
+      ${this.showRangeLabels?s.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:s.E}
+      <input
+        class=${$.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0]??""}
+        min=${k.o(this.min)}
+        max=${k.o(this.max)}
+        ?disabled=${this.disabled}
+        @click=${t=>{t.preventDefault(),this.showCalendar()}}
+        @keydown=${t=>{var i;(t.key===","||t.key==="Enter")&&((i=this.inputRef.value)==null||i.blur()),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t))}}
+        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
+        @blur=${t=>{var i,a;if(t.target.value){this.manageValidity(t.target);const n=g.fromISOToDate(t.target.value);n&&this._value[0]!==t.target.value&&this._value[1]&&(this.clearInputValue(),(a=(i=this.calRef)==null?void 0:i.value)==null||a.handleDateSelect(n))}else this._value[0]&&this.clearInputValue()}}
+        @change=${t=>{t.stopImmediatePropagation()}}
+        ${r.n(this.inputRef)}
+      />
+      <div class="${$.e(e)}" id="${this.id}-to-label">
+        ${this.strings.generic.to}
+      </div>
+      ${this.showRangeLabels?s.E:s.x` <div class="pkt-input-separator">–</div> `}
+      <input
+        class=${$.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-to"
+        aria-labelledby="${this.id}-to-label"
+        .value=${this._value[1]??""}
+        min=${k.o(this.min)}
+        max=${k.o(this.max)}
+        ?disabled=${this.disabled}
+        @click=${t=>{t.preventDefault(),this.showCalendar()}}
+        @keydown=${t=>{var i;(t.key===","||t.key==="Enter")&&((i=this.inputRefTo.value)==null||i.blur()),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t))}}
+        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
+        @blur=${t=>{var i,a,n;if((i=this.calRef.value)!=null&&i.contains(t.relatedTarget)||this.onBlur(),t.target.value){this.manageValidity(t.target);const l=t.target.value;this.min&&this.min>l?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,t.target):this.max&&this.max<l&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,t.target);const c=g.fromISOToDate(t.target.value);c&&this._value[1]!==g.formatISODate(c)&&((n=(a=this.calRef)==null?void 0:a.value)==null||n.handleDateSelect(c))}}}
+        @change=${t=>{t.stopImmediatePropagation()}}
+        ${r.n(this.inputRefTo)}
+      />
+    `}renderMultipleInput(){return s.x`
+      <input
+        class=${$.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        min=${k.o(this.min)}
+        max=${k.o(this.max)}
+        ?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
+        @click=${e=>{e.preventDefault(),this.showCalendar()}}
+        @blur=${e=>{var t;(t=this.calRef.value)!=null&&t.contains(e.relatedTarget)||this.onBlur(),this.addToSelected(e)}}
+        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
+        @keydown=${e=>{(e.key===","||e.key==="Enter")&&(e.preventDefault(),this.addToSelected(e)),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e))}}
+        @change=${e=>{e.stopImmediatePropagation()}}
+        ${r.n(this.inputRef)}
+      />
+    `}renderTags(){return s.x`
+      <div class="pkt-datepicker__tags" aria-live="polite">
+        ${this._value[0]?P(this._value??[],e=>e,e=>s.x`
+                <pkt-tag
+                  .id="${this.id+e+"-tag"}"
+                  closeTag
+                  ariaLabel="${this.strings.calendar.deleteDate} ${g.fromISOtoLocal(e,this.dateformat)}"
+                  @close=${()=>{var t;return(t=this.calRef.value)==null?void 0:t.handleDateSelect(g.fromISOToDate(e))}}
+                  ><time datetime="${e}">${g.fromISOtoLocal(e,this.dateformat)}</time></pkt-tag
+                >
+              `):s.E}
+      </div>
+    `}renderCalendar(){return s.x`<div
+      class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
+      @focusout=${e=>{this.calendarOpen&&this.handleFocusOut(e)}}
+      id="${this.id}-popup"
+      ${r.n(this.popupRef)}
+    >
+      <pkt-calendar
+        id="${this.id}-calendar"
+        ?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?g.newDate(this.currentmonth):null}
+        @date-selected=${e=>{this.value=!this.multiple&&!this.range?e.detail[0]:e.detail,this._value=e.detail,this.inputRef.value&&(this.range&&this.inputRefTo.value?(this.inputRef.value.value=this._value[0]??"",this.inputRefTo.value.value=this._value[1]??""):this.multiple||(this.inputRef.value.value=this._value.length?this._value[0]:""))}}
+        @close=${()=>{this.onBlur(),this.hideCalendar()}}
+        ${r.n(this.calRef)}
+      ></pkt-calendar>
+    </div>`}render(){return this.inputClasses={"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":this.fullwidth,"pkt-datepicker--hasrangelabels":this.showRangeLabels,"pkt-datepicker--multiple":this.multiple,"pkt-datepicker--range":this.range},this.buttonClasses={"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0},s.x`
+      <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}
+        ?required=${this.required}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        ?useWrapper=${this.useWrapper}
+        .optionalText=${this.optionalText}
+        .requiredText=${this.requiredText}
+        .errorMessage=${this.errorMessage}
+        .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
+        .ariaDescribedBy=${this.ariaDescribedBy}
+        class="pkt-datepicker"
+      >
+        ${this.multiple?this.renderTags():s.E}
+        <div
+          class="pkt-datepicker__inputs ${this.range&&this.showRangeLabels?"pkt-input__range-inputs":""}"
+        >
+          <div class="pkt-input__container">
+            ${this.range?this.renderRangeInput():this.multiple?this.renderMultipleInput():this.renderInput()}
+            <button
+              class="${$.e(this.buttonClasses)}"
+              type="button"
+              @click=${this.toggleCalendar}
+              ?disabled=${this.disabled}
+              ${r.n(this.btnRef)}
+            >
+              <pkt-icon name="calendar"></pkt-icon>
+              <span class="pkt-btn__text">${this.strings.calendar.buttonAltText}</span>
+            </button>
+          </div>
+        </div>
+      </pkt-input-wrapper>
+      ${this.renderCalendar()}
+    `}handleCalendarPosition(){var e;if(this.popupRef.value&&this.inputRef.value){const t=this.multiple&&!!this.maxlength,i=((e=this.inputRef.value.parentElement)==null?void 0:e.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=t?i.height+30:i.height,n=this.popupRef.value.getBoundingClientRect().height;let l=t?"calc(100% - 30px)":"100%";i&&i.top+n>window.innerHeight&&i.top-n>0&&(l=`calc(100% - ${a}px - ${n}px)`),this.popupRef.value.style.top=l}}handleFocusOut(e){this.contains(e.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var e;this.calendarOpen=!0,await C(20),this.handleCalendarPosition(),this.isMobileSafari&&((e=this.calRef.value)==null||e.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(e){e.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}};p([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",2);p([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);p([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);p([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);p([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);p([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);p([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);p([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);p([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);p([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);p([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);p([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);p([s.n({converter:g.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);p([s.n({converter:g.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);p([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);p([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);p([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);p([T.r()],exports.PktDatepicker.prototype,"inputClasses",2);p([T.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=p([s.t("pkt-datepicker")],exports.PktDatepicker);

package/dist/helptext--4FLdAWi.js

@@ -0,0 +1,194 @@
+import { P as u, x as i, n as l, t as h, o as m, E as k } from "./icon-wUXeHiBk.js";
+import { e as c } from "./class-map-hz16xq5a.js";
+import { r as f } from "./state-BfyXV7EL.js";
+import { u as x } from "./stringutils-DJjRa8dG.js";
+const v = "pkt-inputwrapper", g = !0, y = {
+  toggleHelpText: {
+    description: "Event for å vise eller skjule hjelpetekst i dropdown"
+  }
+}, b = {
+  forId: {
+    name: "For ID",
+    description: "Id-en til skjemaelementet som dette wrapper rundt",
+    type: "string",
+    required: !0
+  },
+  label: {
+    name: "Merkelapp",
+    description: "Merkelapp for skjemaelementet",
+    type: "string",
+    required: !0
+  },
+  helptext: {
+    name: "Hjelpetekst",
+    description: "Hjelpetekst for skjemaelementet",
+    type: "string"
+  },
+  helptextDropdown: {
+    name: "Hjelpetekst i dropdown",
+    description: "Hjelpetekst som vises i ekspanderende felt",
+    type: "string"
+  },
+  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"
+  },
+  ariaDescribedby: {
+    name: "aria-describedby",
+    description: "Id-en til elementet som beskriver skjemaelementet",
+    type: "string"
+  },
+  counter: {
+    name: "Teller",
+    description: "Teller for antall tegn i skjemaelementet",
+    type: "boolean",
+    default: !1
+  },
+  counterCurrent: {
+    name: "Tellerverdi",
+    description: "Tellerens nåværende verdi",
+    type: "number"
+  },
+  counterMaxLength: {
+    name: "Maks tegn i teller",
+    description: "Maks antall tegn som kan skrives i skjemaelementet",
+    type: "number"
+  },
+  optionalTag: {
+    name: "Vise valgfritt-merking",
+    description: "Viser en merking som indikerer at feltet er valgfritt",
+    type: "boolean",
+    default: !1
+  },
+  optionalText: {
+    name: "Valgfritt-tekst",
+    description: "Tekst som vises i valgfritt-merkingen",
+    type: "string",
+    default: "Valgfritt"
+  },
+  requiredTag: {
+    name: "Vise påkrevd-merking",
+    description: "Viser en merking som indikerer at feltet er påkrevd",
+    type: "boolean",
+    default: !1
+  },
+  requiredText: {
+    name: "Påkrevd-tekst",
+    description: "Tekst som vises i påkrevd-merkingen",
+    type: "string",
+    default: "Må fylles ut"
+  },
+  hasError: {
+    name: "Feil",
+    description: "Indikerer at skjemaelementet har en feil",
+    type: "boolean",
+    default: !1
+  },
+  errorMessage: {
+    name: "Feilmelding",
+    description: "Feilmelding som vises i tilknytning til skjemaelementet",
+    type: "string"
+  },
+  disabled: {
+    name: "Deaktivert",
+    description: "Indikerer at skjemaelementet er deaktivert",
+    type: "boolean",
+    default: !1
+  },
+  inline: {
+    name: "Inline",
+    description: "Indikerer at skjemaelementet skal flyte sammen med sidens innhold",
+    type: "boolean",
+    default: !1
+  },
+  hasFieldset: {
+    name: "Har fieldset",
+    description: "Indikerer at skjemaelementet er en del av et fieldset",
+    type: "boolean",
+    default: !1
+  },
+  useWrapper: {
+    name: "Bruk wrapper",
+    description: "Indikerer om skjemaelementet skal bruke en wrapper",
+    type: "boolean",
+    displayAsFalse: !0,
+    default: !0
+  }
+}, w = {
+  name: v,
+  "css-class": "pkt-inputwrapper",
+  isElement: g,
+  events: y,
+  props: b
+};
+var j = Object.defineProperty, T = Object.getOwnPropertyDescriptor, n = (p, r, o, s) => {
+  for (var e = s > 1 ? void 0 : s ? T(r, o) : r, a = p.length - 1, d; a >= 0; a--)
+    (d = p[a]) && (e = (s ? d(r, o, e) : d(e)) || e);
+  return s && e && j(r, o, e), e;
+};
+let t = class extends u {
+  constructor() {
+    super(), this.forId = x(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = w.props.helptextDropdownButton.default, this.isHelpTextOpen = !1;
+  }
+  render() {
+    const p = () => {
+      this.isHelpTextOpen = !this.isHelpTextOpen, this.dispatchEvent(
+        new CustomEvent("toggleHelpText", {
+          bubbles: !0,
+          detail: { isOpen: !this.isHelpTextOpen }
+        })
+      );
+    };
+    return i`${this.helptext || this.helptextDropdown ? i`<div>
+          ${this.helptext ? i`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+                ${m(this.helptext)}
+              </div>` : k}
+          ${this.helptextDropdown ? i`<div class="pkt-inputwrapper__helptext-expandable">
+                <button
+                  class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
+                  type="button"
+                  @click=${p}
+                >
+                  <pkt-icon
+                    class="pkt-btn__icon"
+                    name="${this.isHelpTextOpen ? "chevron-thin-up" : "chevron-thin-down"}"
+                  ></pkt-icon>
+                  <span class="pkt-btn__text">${m(this.helptextDropdownButton)}</span>
+                </button>
+                <div
+                  class="${c({
+      "pkt-inputwrapper__helptext": !0,
+      "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
+      "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
+    })}"
+                >
+                  ${m(this.helptextDropdown)}
+                </div>
+              </div>` : k}
+        </div>` : k}`;
+  }
+};
+n([
+  l({ type: String, reflect: !0 })
+], t.prototype, "forId", 2);
+n([
+  l({ type: String, reflect: !0 })
+], t.prototype, "helptext", 2);
+n([
+  l({ type: String, reflect: !0 })
+], t.prototype, "helptextDropdown", 2);
+n([
+  l({ type: String, reflect: !0 })
+], t.prototype, "helptextDropdownButton", 2);
+n([
+  f()
+], t.prototype, "isHelpTextOpen", 2);
+t = n([
+  h("pkt-helptext")
+], t);
+export {
+  t as P,
+  w as s
+};

package/dist/helptext-iZEgxz2U.cjs

@@ -0,0 +1,23 @@
+"use strict";const e=require("./icon-CdMQ6zBT.cjs"),d=require("./class-map-Boa7BqCc.cjs"),k=require("./state-SKYD8kRO.cjs"),m=require("./stringutils-CkVRq4jP.cjs"),u="pkt-inputwrapper",c=!0,h={toggleHelpText:{description:"Event for å vise eller skjule hjelpetekst i dropdown"}},x={forId:{name:"For ID",description:"Id-en til skjemaelementet som dette wrapper rundt",type:"string",required:!0},label:{name:"Merkelapp",description:"Merkelapp for skjemaelementet",type:"string",required:!0},helptext:{name:"Hjelpetekst",description:"Hjelpetekst for skjemaelementet",type:"string"},helptextDropdown:{name:"Hjelpetekst i dropdown",description:"Hjelpetekst som vises i ekspanderende felt",type:"string"},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"},ariaDescribedby:{name:"aria-describedby",description:"Id-en til elementet som beskriver skjemaelementet",type:"string"},counter:{name:"Teller",description:"Teller for antall tegn i skjemaelementet",type:"boolean",default:!1},counterCurrent:{name:"Tellerverdi",description:"Tellerens nåværende verdi",type:"number"},counterMaxLength:{name:"Maks tegn i teller",description:"Maks antall tegn som kan skrives i skjemaelementet",type:"number"},optionalTag:{name:"Vise valgfritt-merking",description:"Viser en merking som indikerer at feltet er valgfritt",type:"boolean",default:!1},optionalText:{name:"Valgfritt-tekst",description:"Tekst som vises i valgfritt-merkingen",type:"string",default:"Valgfritt"},requiredTag:{name:"Vise påkrevd-merking",description:"Viser en merking som indikerer at feltet er påkrevd",type:"boolean",default:!1},requiredText:{name:"Påkrevd-tekst",description:"Tekst som vises i påkrevd-merkingen",type:"string",default:"Må fylles ut"},hasError:{name:"Feil",description:"Indikerer at skjemaelementet har en feil",type:"boolean",default:!1},errorMessage:{name:"Feilmelding",description:"Feilmelding som vises i tilknytning til skjemaelementet",type:"string"},disabled:{name:"Deaktivert",description:"Indikerer at skjemaelementet er deaktivert",type:"boolean",default:!1},inline:{name:"Inline",description:"Indikerer at skjemaelementet skal flyte sammen med sidens innhold",type:"boolean",default:!1},hasFieldset:{name:"Har fieldset",description:"Indikerer at skjemaelementet er en del av et fieldset",type:"boolean",default:!1},useWrapper:{name:"Bruk wrapper",description:"Indikerer om skjemaelementet skal bruke en wrapper",type:"boolean",displayAsFalse:!0,default:!0}},a={name:u,"css-class":"pkt-inputwrapper",isElement:c,events:h,props:x};var f=Object.defineProperty,g=Object.getOwnPropertyDescriptor,r=(i,n,p,s)=>{for(var t=s>1?void 0:s?g(n,p):n,l=i.length-1,o;l>=0;l--)(o=i[l])&&(t=(s?o(n,p,t):o(t))||t);return s&&t&&f(n,p,t),t};exports.PktHelptext=class extends e.PktElement{constructor(){super(),this.forId=m.uuidish(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=a.props.helptextDropdownButton.default,this.isHelpTextOpen=!1}render(){const n=()=>{this.isHelpTextOpen=!this.isHelpTextOpen,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:!this.isHelpTextOpen}}))},p=()=>this.helptext||this.helptextDropdown?e.x`<div>
+          ${this.helptext?e.x`<div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
+                ${e.o(this.helptext)}
+              </div>`:e.E}
+          ${this.helptextDropdown?e.x`<div class="pkt-inputwrapper__helptext-expandable">
+                <button
+                  class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
+                  type="button"
+                  @click=${n}
+                >
+                  <pkt-icon
+                    class="pkt-btn__icon"
+                    name="${this.isHelpTextOpen?"chevron-thin-up":"chevron-thin-down"}"
+                  ></pkt-icon>
+                  <span class="pkt-btn__text">${e.o(this.helptextDropdownButton)}</span>
+                </button>
+                <div
+                  class="${d.e({"pkt-inputwrapper__helptext":!0,"pkt-inputwrapper__helptext-expandable-open":this.isHelpTextOpen,"pkt-inputwrapper__helptext-expandable-closed":!this.isHelpTextOpen})}"
+                >
+                  ${e.o(this.helptextDropdown)}
+                </div>
+              </div>`:e.E}
+        </div>`:e.E;return e.x`${p()}`}};r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"forId",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptext",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptextDropdown",2);r([e.n({type:String,reflect:!0})],exports.PktHelptext.prototype,"helptextDropdownButton",2);r([k.r()],exports.PktHelptext.prototype,"isHelpTextOpen",2);exports.PktHelptext=r([e.t("pkt-helptext")],exports.PktHelptext);exports.specs=a;