@oslokommune/punkt-elements 13.5.13 → 13.6.1

package/dist/datepicker-CV73pLqD.cjs

@@ -0,0 +1,169 @@
+"use strict";const c=require("./class-map-CG3vIaNm.cjs"),o=require("./if-defined-CkVc_RJD.cjs"),s=require("./element-D62wHiNU.cjs"),m=require("./state-BkE_Rxl7.cjs"),u=require("./calendar-CL9O0tLP.cjs"),y=require("./input-element-Y8sdrq9C.cjs"),n=require("./ref-BfgcOXko.cjs");require("./icon-__Hjt2XZ.cjs");require("./input-wrapper-C9rZEgju.cjs");const k=require("./repeat-DzibMwhi.cjs");require("./tag-BKq07hGI.cjs");const $=require("./stringutils-CkVRq4jP.cjs"),b=require("./pkt-slot-controller-BzddBp7z.cjs");var x=Object.defineProperty,D=Object.getOwnPropertyDescriptor,f=(p,t,e,i)=>{for(var a=i>1?void 0:i?D(t,e):t,l=p.length-1,h;l>=0;l--)(h=p[l])&&(a=(i?h(t,e,a):h(a))||a);return i&&a&&x(t,e,a),a};exports.PktDateTags=class extends s.PktElement{constructor(){super(...arguments),this.dates=[],this.dateformat="dd.MM.yyyy",this.className="pkt-datepicker__tags",this.idBase=$.uuidish()}render(){return this.classes={"pkt-date-tags":!0,[this.className]:!0},s.x`
+      <div class=${c.e(this.classes)} aria-live="polite">
+        ${Array.isArray(this.dates)&&this.dates[0]?k.c((this.dates??[]).filter(Boolean).sort(),t=>t,t=>{var e;return s.x` <pkt-tag
+                  id=${this.idBase+t+"-tag"}
+                  closeTag
+                  @close=${()=>{this.dispatchEvent(new CustomEvent("date-tag-removed",{detail:t}))}}
+                  .ariaLabel=${`${(e=this.strings)==null?void 0:e.calendar.deleteDate} ${u.fromISOtoLocal(t,this.dateformat)}`}
+                >
+                  <time datetime=${t}>${u.fromISOtoLocal(t,this.dateformat)}</time>
+                </pkt-tag>`}):s.E}
+      </div>
+    `}};f([s.n({type:Array})],exports.PktDateTags.prototype,"dates",2);f([s.n({type:String})],exports.PktDateTags.prototype,"dateformat",2);f([s.n({type:String,attribute:"class"})],exports.PktDateTags.prototype,"className",2);f([s.n({type:String,attribute:"id-base"})],exports.PktDateTags.prototype,"idBase",2);exports.PktDateTags=f([s.t("pkt-date-tags")],exports.PktDateTags);const w={dateformat:{default:"dd.MM.yyyy"},min:{default:null},max:{default:null},weeknumbers:{default:!1},withcontrols:{default:!1},multiple:{default:!1},range:{default:!1}},d={props:w};var R=Object.defineProperty,C=Object.getOwnPropertyDescriptor,r=(p,t,e,i)=>{for(var a=i>1?void 0:i?C(t,e):t,l=p.length-1,h;l>=0;l--)(h=p[l])&&(a=(i?h(t,e,a):h(a))||a);return i&&a&&R(t,e,a),a};const v=p=>new Promise(t=>setTimeout(t,p));exports.PktDatepicker=class extends y.PktInputElement{constructor(){super(),this._valueProperty="",this._value=[],this.label="Datovelger",this.dateformat=d.props.dateformat.default,this.multiple=d.props.multiple.default,this.maxlength=null,this.range=d.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=d.props.weeknumbers.default,this.withcontrols=d.props.withcontrols.default,this.excludedates=[],this.excludeweekdays=[],this.currentmonth=null,this.calendarOpen=!1,this.timezone="Europe/Oslo",this.inputClasses={},this.buttonClasses={},this.inputRef=n.e(),this.inputRefTo=n.e(),this.btnRef=n.e(),this.calRef=n.e(),this.popupRef=n.e(),this.helptextSlot=n.e(),this.addToSelected=t=>{const e=t.target;if(!e.value)return;const i=this.min?u.newDate(this.min):null,a=this.max?u.newDate(this.max):null,l=u.newDate(e.value.split(",")[0]);l&&!isNaN(l.getTime())&&(!i||l>=i)&&(!a||l<=a)&&this.calRef.value&&this.calRef.value.handleDateSelect(l),e.value=""},this.slotController=new b.PktSlotController(this,this.helptextSlot)}get value(){return this._valueProperty}set value(t){const e=this._valueProperty;this._valueProperty=Array.isArray(t)?t.join(","):t||"",this.valueChanged(this._valueProperty,e),this.requestUpdate("value",e)}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,l;(a=this.inputRef)!=null&&a.value&&((l=this.btnRef)!=null&&l.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())}),document&&document.body.addEventListener("keydown",i=>{i.key==="Escape"&&this.calendarOpen&&this.hideCalendar()}),this.value&&(this._value=Array.isArray(this.value)?this.value.filter(Boolean):this.value.split(",").filter(Boolean)),this.min=this.min||d.props.min.default,this.max=this.max||d.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 v(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()})}onInput(){this.dispatchEvent(new Event("input",{bubbles:!0}))}valueChanged(t,e){if(t===e)return;let i=[];t&&(typeof t=="string"?i=t.split(",").filter(Boolean):i=String(t).split(",").filter(Boolean)),this._value=i;const a=i.join(",");this._valueProperty!==a&&(this._valueProperty=a),super.valueChanged(a,e)}attributeChangedCallback(t,e,i){t==="value"&&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")){const e=Array.isArray(this.value)?this.value.join(","):this.value,i=t.get("value"),a=Array.isArray(i)?i.join(","):i;this.valueChanged(e,a)}t.has("multiple")&&(this.multiple&&!Array.isArray(this._value)?this._value=typeof this.value=="string"?this.value?this.value.split(",").filter(Boolean):[]:[]:!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(t)}renderInput(){return s.x`
+      <input
+        class="${c.e(this.inputClasses)}"
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0]??""}
+        min=${o.o(this.min)}
+        max=${o.o(this.max)}
+        placeholder=${o.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        aria-describedby="${this.id}-helptext"
+        @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=>{this.touched=!0,t.stopImmediatePropagation()}}
+        ${n.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=${c.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0]??""}
+        min=${o.o(this.min)}
+        max=${o.o(this.max)}
+        placeholder=${o.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?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 l=this.internals.form;l?l.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 l=u.fromISOToDate(e.target.value);l&&this._value[0]!==e.target.value&&this._value[1]&&(this.clearInputValue(),(a=(i=this.calRef)==null?void 0:i.value)==null||a.handleDateSelect(l))}else this._value[0]&&this.clearInputValue()}}
+        @change=${e=>{e.stopImmediatePropagation()}}
+        ${n.n(this.inputRef)}
+      />
+      <div class="${c.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=${c.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-to"
+        aria-labelledby="${this.id}-to-label"
+        .value=${this._value[1]??""}
+        min=${o.o(this.min)}
+        max=${o.o(this.max)}
+        placeholder=${o.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?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 l=this.internals.form;l?l.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,l;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const h=e.target.value;this.min&&this.min>h?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<h&&this.internals.setValidity({rangeOverflow:!0},this.strings.forms.messages.rangeOverflow,e.target);const g=u.fromISOToDate(e.target.value);g&&this._value[1]!==u.formatISODate(g)&&((l=(a=this.calRef)==null?void 0:a.value)==null||l.handleDateSelect(g))}}}
+        @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
+        ${n.n(this.inputRefTo)}
+      />
+    `}renderMultipleInput(){return s.x`
+      <input
+        class=${c.e(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        min=${o.o(this.min)}
+        max=${o.o(this.max)}
+        placeholder=${o.o(this.placeholder)}
+        ?readonly=${this.readonly}
+        ?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=>{this.touched=!0,t.stopImmediatePropagation()}}
+        ${n.n(this.inputRef)}
+      />
+    `}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"
+      ${n.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=${t=>{this.value=!this.multiple&&!this.range?t.detail[0]:Array.isArray(t.detail)?t.detail.join(","):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.manageValidity(this.inputRef.value),this.manageValidity(this.inputRefTo.value)):this.multiple||(this.inputRef.value.value=this._value.length?this._value[0]:"",this.manageValidity(this.inputRef.value)))}}
+        @close=${()=>{this.onBlur(),this.hideCalendar()}}
+        ${n.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,"pkt-datepicker__calendar-button":!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" ${n.n(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        ${this.multiple?s.x`<pkt-date-tags
+              .dates=${this._value}
+              dateformat=${this.dateformat}
+              strings=${this.strings}
+              id-base=${this.id}
+              @date-tag-removed=${t=>{var e;(e=this.calRef.value)==null||e.handleDateSelect(u.fromISOToDate(t.detail))}}
+            ></pkt-date-tags>`: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="${c.e(this.buttonClasses)}"
+              type="button"
+              @click=${this.toggleCalendar}
+              @keydown=${t=>{(t.key==="Enter"||t.key===" "||t.key==="Space")&&(t.preventDefault(),this.toggleCalendar(t))}}
+              ?disabled=${this.disabled}
+              ${n.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,l=this.popupRef.value.getBoundingClientRect().height;let h=e?"calc(100% - 30px)":"100%";i&&i.top+l>window.innerHeight&&i.top-l>0&&(h=`calc(100% - ${a}px - ${l}px)`),this.popupRef.value.style.top=h}}handleFocusOut(t){this.contains(t.target)||(this.onBlur(),this.hideCalendar())}async showCalendar(){var t;this.calendarOpen=!0,await v(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()}clearInputValue(){this._value=[],this.value=""}};r([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",1);r([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);r([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);r([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);r([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);r([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);r([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);r([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);r([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);r([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);r([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);r([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);r([s.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);r([s.n({converter:u.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);r([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);r([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);r([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);r([m.r()],exports.PktDatepicker.prototype,"inputClasses",2);r([m.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=r([s.t("pkt-datepicker")],exports.PktDatepicker);