@oslokommune/punkt-elements/dist/datepicker-BhrUneAP.cjs

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

"use strict";const d=require("./class-map-BBG2gMX4.cjs"),p=require("./if-defined-Cni-RHLS.cjs"),s=require("./element-6DBpyGQm.cjs"),m=require("./state-DPobt-Yz.cjs"),h=require("./calendar-BZe2D4Sr.cjs"),k=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),v=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-DPk3fpEg.cjs");const $=require("./pkt-slot-controller-BzddBp7z.cjs"),y={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},o={props:y};var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,l=(c,t,e,i)=>{for(var a=i>1?void 0:i?x(t,e):t,n=c.length-1,u;n>=0;n--)(u=c[n])&&(a=(i?u(t,e,a):u(a))||a);return i&&a&&b(t,e,a),a};const g=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends k.PktInputElement{constructor(){super(),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=o.props.dateformat.default,this.multiple=o.props.multiple.default,this.maxlength=null,this.range=o.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=o.props.weeknumbers.default,this.withcontrols=o.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.helptextSlot=r.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?h.newDate(this.min):null,a=this.max?h.newDate(this.max):null,n=h.newDate(e.value.split(",")[0]);n&&!isNaN(n.getTime())&&(!i||n>=i)&&(!a||n<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(n),e.value=""},this.slotController=new $.PktSlotController(this,this.helptextSlot)}async connectedCallback(){super.connectedCallback();const t=navigator.userAgent,e=/iP(hone|od|ad)/.test(t);this.inputType=e?"text":"date",document&&document.body.addEventListener("click",i=>{var a,n;(a=this.inputRef)!=null&&a.value&&((n=this.btnRef)!=null&&n.value)&&!this.inputRef.value.contains(i.target)&&!(this.inputRefTo.value&&this.inputRefTo.value.contains(i.target))&&!this.btnRef.value.contains(i.target)&&!i.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||o.props.min.default,this.max=this.max||o.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 g(20),this.handleCalendarPosition())}disconnectedCallback(){super.disconnectedCallback(),document&&document.body.removeEventListener("click",t=>{var e,i;(e=this.inputRef)!=null&&e.value&&((i=this.btnRef)!=null&&i.value)&&!this.inputRef.value.contains(t.target)&&!this.btnRef.value.contains(t.target)&&this.hideCalendar()})}attributeChangedCallback(t,e,i){if(t==="value"){if(this.range&&(i==null?void 0:i.split(",").length)===1)return;this.value!==e&&this.valueChanged(i,e)}t==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=(i==null?void 0:i.split(","))??[]),t==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=(i==null?void 0:i.split(","))??[]),super.attributeChangedCallback(t,e,i)}updated(t){if(t.has("value")){if(this.range&&this.value.length===1)return;this.valueChanged(this.value,t.get("value"))}super.updated(t)}renderInput(){return s.x`
      <input
        class="${d.e(this.inputClasses)}"
        .type=${this.inputType}
        id="${this.id}-input"
        .value=${this._value[0]??""}
        min=${p.o(this.min)}
        max=${p.o(this.max)}
        @click=${t=>{t.preventDefault(),this.showCalendar()}}
        ?disabled=${this.disabled}
        @keydown=${t=>{var e,i;if(t.key===","&&((e=this.inputRef.value)==null||e.blur()),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t)),t.key==="Enter"){const a=this.internals.form;a?a.requestSubmit():(i=this.inputRef.value)==null||i.blur()}}}
        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
        @blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.manageValidity(t.target),this.value=t.target.value}}
        @change=${t=>{t.stopImmediatePropagation()}}
        ${r.n(this.inputRef)}
      />
    `}renderRangeInput(){const t={"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=${d.e(this.inputClasses)}
        .type=${this.inputType}
        id="${this.id}-input"
        .value=${this._value[0]??""}
        min=${p.o(this.min)}
        max=${p.o(this.max)}
        ?disabled=${this.disabled}
        @click=${e=>{e.preventDefault(),this.showCalendar()}}
        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRef.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const n=this.internals.form;n?n.requestSubmit():(a=this.inputRefTo.value)==null||a.focus()}}}
        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
        @blur=${e=>{var i,a;if(e.target.value){this.manageValidity(e.target);const n=h.fromISOToDate(e.target.value);n&&this._value[0]!==e.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=${e=>{e.stopImmediatePropagation()}}
        ${r.n(this.inputRef)}
      />
      <div class="${d.e(t)}" id="${this.id}-to-label">
        ${this.strings.generic.to}
      </div>
      ${this.showRangeLabels?s.E:s.x` <div class="pkt-input-separator">–</div> `}
      <input
        class=${d.e(this.inputClasses)}
        .type=${this.inputType}
        id="${this.id}-to"
        aria-labelledby="${this.id}-to-label"
        .value=${this._value[1]??""}
        min=${p.o(this.min)}
        max=${p.o(this.max)}
        ?disabled=${this.disabled}
        @click=${e=>{e.preventDefault(),this.showCalendar()}}
        @keydown=${e=>{var i,a;if(e.key===","&&((i=this.inputRefTo.value)==null||i.blur()),(e.key==="Space"||e.key===" ")&&(e.preventDefault(),this.toggleCalendar(e)),e.key==="Enter"){const n=this.internals.form;n?n.requestSubmit():(a=this.inputRefTo.value)==null||a.blur()}}}
        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
        @blur=${e=>{var i,a,n;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const u=e.target.value;this.min&&this.min>u?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<u&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,e.target);const f=h.fromISOToDate(e.target.value);f&&this._value[1]!==h.formatISODate(f)&&((n=(a=this.calRef)==null?void 0:a.value)==null||n.handleDateSelect(f))}}}
        @change=${e=>{e.stopImmediatePropagation()}}
        ${r.n(this.inputRefTo)}
      />
    `}renderMultipleInput(){return s.x`
      <input
        class=${d.e(this.inputClasses)}
        .type=${this.inputType}
        id="${this.id}-input"
        min=${p.o(this.min)}
        max=${p.o(this.max)}
        ?disabled=${this.disabled||this.maxlength&&this._value.length>=this.maxlength}
        @click=${t=>{t.preventDefault(),this.showCalendar()}}
        @blur=${t=>{var e;(e=this.calRef.value)!=null&&e.contains(t.relatedTarget)||this.onBlur(),this.addToSelected(t)}}
        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
        @focus=${()=>{this.onFocus(),this.isMobileSafari&&this.showCalendar()}}
        @keydown=${t=>{var e;if(t.key===","&&(t.preventDefault(),this.addToSelected(t)),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t)),t.key==="Enter"){const i=this.internals.form;i?i.requestSubmit():(e=this.inputRef.value)==null||e.blur()}}}
        @change=${t=>{t.stopImmediatePropagation()}}
        ${r.n(this.inputRef)}
      />
    `}renderTags(){return s.x`
      <div class="pkt-datepicker__tags" aria-live="polite">
        ${this._value[0]?v.c(this._value??[],t=>t,t=>s.x`
                <pkt-tag
                  .id="${this.id+t+"-tag"}"
                  closeTag
                  ariaLabel="${this.strings.calendar.deleteDate} ${h.fromISOtoLocal(t,this.dateformat)}"
                  @close=${()=>{var e;return(e=this.calRef.value)==null?void 0:e.handleDateSelect(h.fromISOToDate(t))}}
                  ><time datetime="${t}">${h.fromISOtoLocal(t,this.dateformat)}</time></pkt-tag
                >
              `):s.E}
      </div>
    `}renderCalendar(){return s.x`<div
      class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
      @focusout=${t=>{this.calendarOpen&&this.handleFocusOut(t)}}
      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?h.newDate(this.currentmonth):null}
        @date-selected=${t=>{this.value=!this.multiple&&!this.range?t.detail[0]:t.detail,this._value=t.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}
        ?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" ${r.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
        ${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="${d.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 t;if(this.popupRef.value&&this.inputRef.value){const e=this.multiple&&!!this.maxlength,i=((t=this.inputRef.value.parentElement)==null?void 0:t.getBoundingClientRect())||this.inputRef.value.getBoundingClientRect(),a=e?i.height+30:i.height,n=this.popupRef.value.getBoundingClientRect().height;let u=e?"calc(100% - 30px)":"100%";i&&i.top+n>window.innerHeight&&i.top-n>0&&(u=`calc(100% - ${a}px - ${n}px)`),this.popupRef.value.style.top=u}}handleFocusOut(t){this.contains(t.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var t;this.calendarOpen=!0,await g(20),this.handleCalendarPosition(),this.isMobileSafari&&((t=this.calRef.value)==null||t.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(t){t.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}};l([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",2);l([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);l([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);l([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);l([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);l([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);l([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);l([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);l([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);l([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);l([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);l([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);l([s.n({converter:h.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);l([s.n({converter:h.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);l([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);l([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);l([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);l([m.r()],exports.PktDatepicker.prototype,"inputClasses",2);l([m.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=l([s.t("pkt-datepicker")],exports.PktDatepicker);