@oslokommune/punkt-elements 13.6.10 → 13.6.12

package/dist/datepicker-n49TAIAt.cjs

@@ -1,169 +0,0 @@
-"use strict";const g=require("./class-map-CG3vIaNm.cjs"),d=require("./if-defined-CkVc_RJD.cjs"),l=require("./element-D62wHiNU.cjs"),P=require("./state-BkE_Rxl7.cjs"),u=require("./calendar-DH-fCGyW.cjs"),S=require("./input-element-Y8sdrq9C.cjs"),p=require("./ref-BfgcOXko.cjs");require("./icon-__Hjt2XZ.cjs");require("./input-wrapper-C9rZEgju.cjs");const _=require("./repeat-DzibMwhi.cjs");require("./tag-BKq07hGI.cjs");const O=require("./stringutils-CkVRq4jP.cjs"),T=require("./pkt-slot-controller-BzddBp7z.cjs"),I=i=>new Promise(e=>setTimeout(e,i)),m={isIOS(){const i=navigator.userAgent;return/iP(hone|od|ad)/.test(i)},isMobileSafari(){const i=navigator.userAgent;return/iP(hone|od|ad)/.test(i)&&/Safari/.test(i)&&!/CriOS|FxiOS/.test(i)}},c={parseValue(i){return i?Array.isArray(i)?i.filter(Boolean):typeof i=="string"?i.split(",").filter(Boolean):String(i).split(",").filter(Boolean):[]},formatValue(i){return i.join(",")},normalizeNameForMultiple(i,e,t){return i?(e||t)&&!i.endsWith("[]")?i+"[]":i:null},normalizeStringArray(i){return typeof i=="string"?i.split(",").filter(Boolean):Array.isArray(i)?i:[]},validateRangeOrder(i){return!i||i.length!==2?!0:u.isValidDateRange(i[0],i[1])},sortDates(i){return u.sortDateStrings(i)},filterSelectableDates(i,e,t,a,s){return u.filterSelectableDates(i,e,t,a,s)}},A={getInputType(){return m.isIOS()?"text":"date"}},f={submitForm(i){var t;const e=(t=i.internals)==null?void 0:t.form;e&&e.requestSubmit()},submitFormOrFallback(i,e){const t=i==null?void 0:i.form;t?t.requestSubmit():e()},validateDateInput(i,e,t,a,s){var n,h,D,x;const r=i.value;r&&(t&&t>r?e.setValidity({rangeUnderflow:!0},((h=(n=s==null?void 0:s.forms)==null?void 0:n.messages)==null?void 0:h.rangeUnderflow)||"Value is below minimum",i):a&&a<r&&e.setValidity({rangeOverflow:!0},((x=(D=s==null?void 0:s.forms)==null?void 0:D.messages)==null?void 0:x.rangeOverflow)||"Value is above maximum",i))}},C={addToSelected(i,e,t,a){const s=i.target;if(!s.value)return;const r=t?u.newDate(t):null,n=a?u.newDate(a):null,h=u.newDate(s.value.split(",")[0]);h&&!isNaN(h.getTime())&&(!r||h>=r)&&(!n||h<=n)&&e.value&&e.value.handleDateSelect(h),s.value=""},handleCalendarPosition(i,e,t=!1){var h;if(!i.value||!e.value)return;const a=((h=e.value.parentElement)==null?void 0:h.getBoundingClientRect())||e.value.getBoundingClientRect(),s=t?a.height+30:a.height,r=i.value.getBoundingClientRect().height;let n=t?"calc(100% - 30px)":"100%";a&&a.top+r>window.innerHeight&&a.top-r>0&&(n=`calc(100% - ${s}px - ${r}px)`),i.value.style.top=n}},$={createDocumentClickListener(i,e,t,a,s,r){return n=>{i!=null&&i.value&&(t!=null&&t.value)&&!i.value.contains(n.target)&&!(e!=null&&e.value&&e.value.contains(n.target))&&!t.value.contains(n.target)&&!n.target.closest(".pkt-calendar-popup")&&a()&&(s(),r())}},createDocumentKeydownListener(i,e){return t=>{t.key==="Escape"&&i()&&e()}},handleFocusOut(i,e,t,a){e.contains(i.target)||(t(),a())}},b={getInputClasses(i,e,t,a){return{"pkt-input":!0,"pkt-datepicker__input":!0,"pkt-input--fullwidth":i,"pkt-datepicker--hasrangelabels":e,"pkt-datepicker--multiple":t,"pkt-datepicker--range":a}},getButtonClasses(){return{"pkt-input-icon":!0,"pkt-btn":!0,"pkt-btn--icon-only":!0,"pkt-btn--tertiary":!0,"pkt-datepicker__calendar-button":!0}},getRangeLabelClasses(i){return{"pkt-input-prefix":i,"pkt-hide":!i}}},w={processDateSelection(i,e,t){return!e&&!t?i[0]||"":Array.isArray(i)?i.join(","):i},updateInputValues(i,e,t,a,s,r){i.value&&(a&&(e!=null&&e.value)?(i.value.value=t[0]??"",e.value.value=t[1]??"",r(i.value),r(e.value)):s||(i.value.value=t.length?t[0]:"",r(i.value)))},processRangeBlur(i,e,t,a,s){var n;const r=i.target;if(r.value){s(r);const h=u.fromISOToDate(r.value);h&&e[0]!==r.value&&e[1]&&(a(),(n=t==null?void 0:t.value)==null||n.handleDateSelect(h))}else e[0]&&a()}},y={handleInputKeydown(i,e,t,a,s,r){const{key:n}=i;n===","&&(i.preventDefault(),r?r(i):s&&s()),(n==="Space"||n===" ")&&(i.preventDefault(),e(i)),n==="Enter"&&(i.preventDefault(),t?t():a?a():s&&s())},handleButtonKeydown(i,e){const{key:t}=i;(t==="Enter"||t===" "||t==="Space")&&(i.preventDefault(),e(i))}};var B=Object.defineProperty,L=Object.getOwnPropertyDescriptor,k=(i,e,t,a)=>{for(var s=a>1?void 0:a?L(e,t):e,r=i.length-1,n;r>=0;r--)(n=i[r])&&(s=(a?n(e,t,s):n(s))||s);return a&&s&&B(e,t,s),s};exports.PktDateTags=class extends l.PktElement{constructor(){super(...arguments),this.dates=[],this.dateformat="dd.MM.yyyy",this.className="pkt-datepicker__tags",this.idBase=O.uuidish()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},l.x`
-      <div class=${g.e(this.classes)} aria-live="polite">
-        ${Array.isArray(this.dates)&&this.dates[0]?_.c(c.sortDates((this.dates??[]).filter(Boolean)),e=>e,e=>{var t;return l.x` <pkt-tag
-                  id=${this.idBase+e+"-tag"}
-                  closeTag
-                  @close=${()=>{this.dispatchEvent(new CustomEvent("date-tag-removed",{detail:e}))}}
-                  .ariaLabel=${`${(t=this.strings)==null?void 0:t.calendar.deleteDate} ${u.fromISOtoLocal(e,this.dateformat)}`}
-                >
-                  <time datetime=${e}>${u.fromISOtoLocal(e,this.dateformat)}</time>
-                </pkt-tag>`}):l.E}
-      </div>
-    `}};k([l.n({type:Array})],exports.PktDateTags.prototype,"dates",2);k([l.n({type:String})],exports.PktDateTags.prototype,"dateformat",2);k([l.n({type:String,attribute:"class"})],exports.PktDateTags.prototype,"className",2);k([l.n({type:String,attribute:"id-base"})],exports.PktDateTags.prototype,"idBase",2);exports.PktDateTags=k([l.t("pkt-date-tags")],exports.PktDateTags);const F={dateformat:{default:"dd.MM.yyyy"},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},v={props:F};var q=Object.defineProperty,E=Object.getOwnPropertyDescriptor,o=(i,e,t,a)=>{for(var s=a>1?void 0:a?E(e,t):e,r=i.length-1,n;r>=0;r--)(n=i[r])&&(s=(a?n(e,t,s):n(s))||s);return a&&s&&q(e,t,s),s};exports.PktDatepicker=class extends S.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=v.props.dateformat.default,this.multiple=v.props.multiple.default,this.maxlength=null,this.range=v.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=v.props.weeknumbers.default,this.withcontrols=v.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=p.e(),this.inputRefTo=p.e(),this.btnRef=p.e(),this.calRef=p.e(),this.popupRef=p.e(),this.helptextSlot=p.e(),this.addToSelected=e=>{C.addToSelected(e,this.calRef,this.min,this.max)},this.slotController=new T.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(e){const t=this._valueProperty;this._valueProperty=Array.isArray(e)?e.join(","):e||"",this.valueChanged(this._valueProperty,t),this.requestUpdate("value",t)}get inputType(){return A.getInputType()}connectedCallback(){super.connectedCallback(),this.timezone&&this.timezone!==window.pktTz&&(window.pktTz=this.timezone),this.name=c.normalizeNameForMultiple(this.name,this.multiple,this.range)||this.name,this.documentClickListener=$.createDocumentClickListener(this.inputRef,this.inputRefTo,this.btnRef,()=>this.calendarOpen,this.onBlur.bind(this),this.hideCalendar.bind(this)),this.documentKeydownListener=$.createDocumentKeydownListener(()=>this.calendarOpen,this.hideCalendar.bind(this)),document.addEventListener("click",this.documentClickListener),document.addEventListener("keydown",this.documentKeydownListener)}disconnectedCallback(){super.disconnectedCallback(),this.documentClickListener&&document.removeEventListener("click",this.documentClickListener),this.documentKeydownListener&&document.removeEventListener("keydown",this.documentKeydownListener)}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(e,t){if(e===t)return;const a=c.parseValue(e),s=this.multiple&&a.length>1?c.filterSelectableDates(a,this.min,this.max,this.excludedates,this.excludeweekdays):a;if(this.range&&!c.validateRangeOrder(s)){this._value=[],this._valueProperty="",super.valueChanged("",t);return}this._value=s;const r=c.formatValue(s);this._valueProperty!==r&&(this._valueProperty=r),super.valueChanged(r,t)}attributeChangedCallback(e,t,a){e==="value"&&this.value!==t&&this.valueChanged(a,t),e==="excludedates"&&typeof this.excludedates=="string"&&(this.excludedates=c.normalizeStringArray(a||"")),e==="excludeweekdays"&&typeof this.excludeweekdays=="string"&&(this.excludeweekdays=c.normalizeStringArray(a||"")),super.attributeChangedCallback(e,t,a)}updated(e){if(e.has("value")){const t=Array.isArray(this.value)?this.value.join(","):this.value,a=e.get("value"),s=Array.isArray(a)?a.join(","):a;this.valueChanged(t,s)}(e.has("multiple")||e.has("range"))&&(this.name=c.normalizeNameForMultiple(this.name,this.multiple,this.range)||this.name),e.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=c.parseValue(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)}renderInput(){return l.x`
-      <input
-        class="${g.e(this.inputClasses)}"
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0]??""}
-        min=${d.o(this.min)}
-        max=${d.o(this.max)}
-        placeholder=${d.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        aria-describedby="${this.id}-helptext"
-        @click=${e=>{e.preventDefault(),this.showCalendar()}}
-        ?disabled=${this.disabled}
-        @keydown=${e=>y.handleInputKeydown(e,t=>this.toggleCalendar(t),()=>f.submitFormOrFallback(this.internals,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()}),void 0,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()})}
-        @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),m.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=>{this.touched=!0,e.stopImmediatePropagation()}}
-        ${p.n(this.inputRef)}
-      />
-    `}renderRangeInput(){const e=b.getRangeLabelClasses(this.showRangeLabels);return l.x`
-      ${this.showRangeLabels?l.x` <div class="pkt-input-prefix">${this.strings.generic.from}</div> `:l.E}
-      <input
-        class=${g.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0]??""}
-        min=${d.o(this.min)}
-        max=${d.o(this.max)}
-        placeholder=${d.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @click=${t=>{t.preventDefault(),this.showCalendar()}}
-        @keydown=${t=>y.handleInputKeydown(t,a=>this.toggleCalendar(a),()=>f.submitFormOrFallback(this.internals,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.focus()}),()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.focus()},()=>{var a;return(a=this.inputRef.value)==null?void 0:a.blur()})}
-        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
-        @blur=${t=>{w.processRangeBlur(t,this._value,this.calRef,()=>this.clearInputValue(),a=>this.manageValidity(a))}}
-        @change=${t=>{t.stopImmediatePropagation()}}
-        ${p.n(this.inputRef)}
-      />
-      <div class="${g.e(e)}" id="${this.id}-to-label">
-        ${this.strings.generic.to}
-      </div>
-      ${this.showRangeLabels?l.E:l.x` <div class="pkt-input-separator">–</div> `}
-      <input
-        class=${g.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-to"
-        aria-labelledby="${this.id}-to-label"
-        .value=${this._value[1]??""}
-        min=${d.o(this.min)}
-        max=${d.o(this.max)}
-        placeholder=${d.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?disabled=${this.disabled}
-        @click=${t=>{t.preventDefault(),this.showCalendar()}}
-        @keydown=${t=>y.handleInputKeydown(t,a=>this.toggleCalendar(a),()=>f.submitFormOrFallback(this.internals,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.blur()}),void 0,()=>{var a;return(a=this.inputRefTo.value)==null?void 0:a.blur()})}
-        @input=${t=>{this.onInput(),t.stopImmediatePropagation()}}
-        @focus=${()=>{this.onFocus(),m.isMobileSafari()&&this.showCalendar()}}
-        @blur=${t=>{var a,s,r;if((a=this.calRef.value)!=null&&a.contains(t.relatedTarget)||this.onBlur(),t.target.value){this.manageValidity(t.target),f.validateDateInput(t.target,this.internals,this.min,this.max,this.strings);const n=u.fromISOToDate(t.target.value);n&&this._value[1]!==u.formatISODate(n)&&((r=(s=this.calRef)==null?void 0:s.value)==null||r.handleDateSelect(n))}}}
-        @change=${t=>{this.touched=!0,t.stopImmediatePropagation()}}
-        ${p.n(this.inputRefTo)}
-      />
-    `}renderMultipleInput(){return l.x`
-      <input
-        class=${g.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        min=${d.o(this.min)}
-        max=${d.o(this.max)}
-        placeholder=${d.o(this.placeholder)}
-        ?readonly=${this.readonly}
-        ?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(),m.isMobileSafari()&&this.showCalendar()}}
-        @keydown=${e=>y.handleInputKeydown(e,t=>this.toggleCalendar(t),()=>f.submitFormOrFallback(this.internals,()=>{var t;return(t=this.inputRef.value)==null?void 0:t.blur()}),void 0,void 0,t=>this.addToSelected(t))}
-        @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
-        ${p.n(this.inputRef)}
-      />
-    `}renderCalendar(){return l.x`<div
-      class="pkt-calendar-popup pkt-${this.calendarOpen?"show":"hide"}"
-      @focusout=${e=>{this.calendarOpen&&this.handleFocusOut(e)}}
-      id="${this.id}-popup"
-      ${p.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?u.parseISODateString(this.currentmonth):null}
-        @date-selected=${e=>{this.value=w.processDateSelection(e.detail,this.multiple,this.range),this._value=e.detail,w.updateInputValues(this.inputRef,this.inputRefTo,this._value,this.range,this.multiple,t=>this.manageValidity(t))}}
-        @close=${()=>{this.onBlur(),this.hideCalendar()}}
-        ${p.n(this.calRef)}
-      ></pkt-calendar>
-    </div>`}render(){return this.inputClasses=b.getInputClasses(this.fullwidth,this.showRangeLabels,this.multiple,this.range),this.buttonClasses=b.getButtonClasses(),l.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" ${p.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
-        ${this.multiple?l.x`<pkt-date-tags
-              .dates=${this._value}
-              dateformat=${this.dateformat}
-              strings=${this.strings}
-              id-base=${this.id}
-              @date-tag-removed=${e=>{var t;(t=this.calRef.value)==null||t.handleDateSelect(u.fromISOToDate(e.detail))}}
-            ></pkt-date-tags>`:l.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="${g.e(this.buttonClasses)}"
-              type="button"
-              @click=${this.toggleCalendar}
-              @keydown=${e=>y.handleButtonKeydown(e,t=>this.toggleCalendar(t))}
-              ?disabled=${this.disabled}
-              ${p.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(){const e=this.multiple&&!!this.maxlength;C.handleCalendarPosition(this.popupRef,this.inputRef,e)}handleFocusOut(e){$.handleFocusOut(e,this,this.onBlur.bind(this),this.hideCalendar.bind(this))}async showCalendar(){var e;this.calendarOpen=!0,await I(20),this.handleCalendarPosition(),m.isMobileSafari()&&((e=this.calRef.value)==null||e.focusOnCurrentDate())}hideCalendar(){this.calendarOpen=!1}async toggleCalendar(e){e.preventDefault(),this.calendarOpen?this.hideCalendar():this.showCalendar()}clearInputValue(){this._value=[],this.value=""}};o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);o([l.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);o([l.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);o([l.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);o([l.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);o([l.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);o([l.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);o([l.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);o([l.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);o([l.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);o([P.r()],exports.PktDatepicker.prototype,"inputClasses",2);o([P.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=o([l.t("pkt-datepicker")],exports.PktDatepicker);