@oslokommune/punkt-elements 13.4.1 → 13.5.0

package/dist/checkbox-CTRbpbye.js

@@ -1,120 +0,0 @@
-import { E as n, x as c, n as i, a as d } from "./element-CgEWt74-.js";
-import { P as k } from "./input-element-NnrDmp4r.js";
-import { e as b, n as f } from "./ref-BBYSqgeW.js";
-import { e as u } from "./class-map-BpTj9gtz.js";
-var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (s, h, p, a) => {
-  for (var l = a > 1 ? void 0 : a ? y(h, p) : h, o = s.length - 1, r; o >= 0; o--)
-    (r = s[o]) && (l = (a ? r(h, p, l) : r(l)) || l);
-  return a && l && g(h, p, l), l;
-};
-let t = class extends k {
-  constructor() {
-    super(...arguments), this.inputRef = b(), this.value = "", this.checkHelptext = null, this.defaultChecked = !1, this.hasTile = !1, this.isSwitch = !1, this.labelPosition = "right", this.hideLabel = !1, this.checked = null, this.type = "checkbox", this.tagText = null, this.optionalTag = !1, this.optionalText = "Valgfritt", this.requiredTag = !1, this.requiredText = "Må fylles ut";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  attributeChangedCallback(s, h, p) {
-    s === "defaultChecked" && !this.checked && (this.checked = this.defaultChecked), s === "checked" && (this.checked = this.checked === "" || this.checked === "true" || this.checked === !0), super.attributeChangedCallback(s, h, p);
-  }
-  firstUpdated(s) {
-    s.has("defaultChecked") && !this.checked && (this.checked = this.defaultChecked), super.firstUpdated(s);
-  }
-  render() {
-    const s = u({
-      "pkt-input-check__input": !0,
-      "pkt-input-check__input--tile": this.hasTile,
-      "pkt-input-check__input--tile-disabled": this.disabled && this.hasTile
-    }), h = u({
-      "pkt-input-check__input-checkbox": !0,
-      "pkt-input-check__input-checkbox--error": this.hasError
-    }), p = u({
-      "pkt-input-check__input-label": !0,
-      "pkt-input-check__input-label--disabled": this.disabled,
-      "pkt-input-check__input-label--left": this.labelPosition === "left",
-      "pkt-input-check__input-label--right": this.labelPosition === "right",
-      "pkt-sr-only": this.hideLabel
-    }), a = "pkt-tag pkt-tag--small pkt-tag--thin-text", l = () => c`
-        ${this.tagText ? c`<span class=${a + " pkt-tag--gray"}>${this.tagText}</span>` : n}
-        ${this.optionalTag ? c`<span class=${a + " pkt-tag--blue-light"}>${this.optionalText}</span>` : n}
-        ${this.requiredTag ? c`<span class=${a + " pkt-tag--beige"}>${this.requiredText}</span>` : n}
-      `, o = () => c`
-        <label class=${p} for=${this.id + "-internal"}>
-          ${this.label} ${l()}
-          ${this.checkHelptext ? c`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>` : n}
-        </label>
-      `;
-    return c`
-      <div class="pkt-input-check">
-        <div class=${s}>
-          ${this.labelPosition === "left" ? o() : n}
-          <input
-            id=${this.id + "-internal"}
-            class=${h}
-            type="checkbox"
-            ?disabled=${this.disabled}
-            name=${this.name + "-internal"}
-            ${f(this.inputRef)}
-            @change=${this.toggleChecked}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            role=${this.isSwitch ? "switch" : "checkbox"}
-          />
-          ${this.labelPosition === "right" ? o() : n}
-        </div>
-      </div>
-    `;
-  }
-  toggleChecked(s) {
-    s.stopImmediatePropagation(), this.touched = !0, this.inputRef.value && (this.checked = this.inputRef.value.matches(":checked"), this.valueChecked(this.checked));
-  }
-};
-e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "value", 2);
-e([
-  i({ type: String })
-], t.prototype, "checkHelptext", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "defaultChecked", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "hasTile", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "isSwitch", 2);
-e([
-  i({ type: String })
-], t.prototype, "labelPosition", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "hideLabel", 2);
-e([
-  i({ type: Boolean, reflect: !0 })
-], t.prototype, "checked", 2);
-e([
-  i({ type: String, reflect: !0 })
-], t.prototype, "type", 2);
-e([
-  i({ type: String })
-], t.prototype, "tagText", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "optionalTag", 2);
-e([
-  i({ type: String })
-], t.prototype, "optionalText", 2);
-e([
-  i({ type: Boolean })
-], t.prototype, "requiredTag", 2);
-e([
-  i({ type: String })
-], t.prototype, "requiredText", 2);
-t = e([
-  d("pkt-checkbox")
-], t);
-export {
-  t as P
-};

package/dist/checkbox-wJ26voZd.cjs

@@ -1,30 +0,0 @@
-"use strict";const t=require("./element-6DBpyGQm.cjs"),k=require("./input-element-C4xJoM-X.cjs"),n=require("./ref-iJtiv3o2.cjs"),o=require("./class-map-BBG2gMX4.cjs");var r=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(p,e,c,h)=>{for(var s=h>1?void 0:h?u(e,c):e,a=p.length-1,l;a>=0;a--)(l=p[a])&&(s=(h?l(e,c,s):l(s))||s);return h&&s&&r(e,c,s),s};exports.PktCheckbox=class extends k.PktInputElement{constructor(){super(...arguments),this.inputRef=n.e(),this.value="",this.checkHelptext=null,this.defaultChecked=!1,this.hasTile=!1,this.isSwitch=!1,this.labelPosition="right",this.hideLabel=!1,this.checked=null,this.type="checkbox",this.tagText=null,this.optionalTag=!1,this.optionalText="Valgfritt",this.requiredTag=!1,this.requiredText="Må fylles ut"}connectedCallback(){super.connectedCallback()}attributeChangedCallback(e,c,h){e==="defaultChecked"&&!this.checked&&(this.checked=this.defaultChecked),e==="checked"&&(this.checked=this.checked===""||this.checked==="true"||this.checked===!0),super.attributeChangedCallback(e,c,h)}firstUpdated(e){e.has("defaultChecked")&&!this.checked&&(this.checked=this.defaultChecked),super.firstUpdated(e)}render(){const e=o.e({"pkt-input-check__input":!0,"pkt-input-check__input--tile":this.hasTile,"pkt-input-check__input--tile-disabled":this.disabled&&this.hasTile}),c=o.e({"pkt-input-check__input-checkbox":!0,"pkt-input-check__input-checkbox--error":this.hasError}),h=o.e({"pkt-input-check__input-label":!0,"pkt-input-check__input-label--disabled":this.disabled,"pkt-input-check__input-label--left":this.labelPosition==="left","pkt-input-check__input-label--right":this.labelPosition==="right","pkt-sr-only":this.hideLabel}),s="pkt-tag pkt-tag--small pkt-tag--thin-text",a=()=>t.x`
-        ${this.tagText?t.x`<span class=${s+" pkt-tag--gray"}>${this.tagText}</span>`:t.E}
-        ${this.optionalTag?t.x`<span class=${s+" pkt-tag--blue-light"}>${this.optionalText}</span>`:t.E}
-        ${this.requiredTag?t.x`<span class=${s+" pkt-tag--beige"}>${this.requiredText}</span>`:t.E}
-      `,l=()=>t.x`
-        <label class=${h} for=${this.id+"-internal"}>
-          ${this.label} ${a()}
-          ${this.checkHelptext?t.x`<div class="pkt-input-check__input-helptext">${this.checkHelptext}</div>`:t.E}
-        </label>
-      `;return t.x`
-      <div class="pkt-input-check">
-        <div class=${e}>
-          ${this.labelPosition==="left"?l():t.E}
-          <input
-            id=${this.id+"-internal"}
-            class=${c}
-            type="checkbox"
-            ?disabled=${this.disabled}
-            name=${this.name+"-internal"}
-            ${n.n(this.inputRef)}
-            @change=${this.toggleChecked}
-            @blur=${this.onBlur}
-            @focus=${this.onFocus}
-            ?checked=${this.checked}
-            role=${this.isSwitch?"switch":"checkbox"}
-          />
-          ${this.labelPosition==="right"?l():t.E}
-        </div>
-      </div>
-    `}toggleChecked(e){e.stopImmediatePropagation(),this.touched=!0,this.inputRef.value&&(this.checked=this.inputRef.value.matches(":checked"),this.valueChecked(this.checked))}};i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"value",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"checkHelptext",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"defaultChecked",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hasTile",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"isSwitch",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"labelPosition",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"hideLabel",2);i([t.n({type:Boolean,reflect:!0})],exports.PktCheckbox.prototype,"checked",2);i([t.n({type:String,reflect:!0})],exports.PktCheckbox.prototype,"type",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"tagText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"optionalTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"optionalText",2);i([t.n({type:Boolean})],exports.PktCheckbox.prototype,"requiredTag",2);i([t.n({type:String})],exports.PktCheckbox.prototype,"requiredText",2);exports.PktCheckbox=i([t.t("pkt-checkbox")],exports.PktCheckbox);

package/dist/datepicker-B9rhz_AF.cjs

@@ -1,154 +0,0 @@
-"use strict";const d=require("./class-map-BBG2gMX4.cjs"),o=require("./if-defined-Cni-RHLS.cjs"),s=require("./element-6DBpyGQm.cjs"),m=require("./state-DPobt-Yz.cjs"),h=require("./calendar-BZe2D4Sr.cjs"),v=require("./input-element-C4xJoM-X.cjs"),r=require("./ref-iJtiv3o2.cjs"),k=require("./repeat-CDsZqct8.cjs");require("./icon-B_ryAy4Q.cjs");require("./input-wrapper-CZ-a00V7.cjs");require("./tag-Bbs0U_Au.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}},p={props:y};var b=Object.defineProperty,x=Object.getOwnPropertyDescriptor,n=(c,t,e,i)=>{for(var a=i>1?void 0:i?x(t,e):t,l=c.length-1,u;l>=0;l--)(u=c[l])&&(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 v.PktInputElement{constructor(){super(),this.value="",this._value=this.value?Array.isArray(this.value)?this.value:this.value.split(","):[],this.label="Datovelger",this.dateformat=p.props.dateformat.default,this.multiple=p.props.multiple.default,this.maxlength=null,this.range=p.props.range.default,this.showRangeLabels=!1,this.min=null,this.max=null,this.weeknumbers=p.props.weeknumbers.default,this.withcontrols=p.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,l=h.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 $.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,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())}),this.value.length&&this._value.length===0&&(this._value=Array.isArray(this.value)?this.value:this.value.split(",")),this.min=this.min||p.props.min.default,this.max=this.max||p.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){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&&Array.isArray(this._value)&&(this._value=[this._value[0]??""])),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=${o.o(this.min)}
-        max=${o.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=>{this.touched=!0,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=${o.o(this.min)}
-        max=${o.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 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=h.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()}}
-        ${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=${o.o(this.min)}
-        max=${o.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 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 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)&&((l=(a=this.calRef)==null?void 0:a.value)==null||l.handleDateSelect(f))}}}
-        @change=${e=>{this.touched=!0,e.stopImmediatePropagation()}}
-        ${r.n(this.inputRefTo)}
-      />
-    `}renderMultipleInput(){return console.log("range",this.range,"multiple",this.multiple),s.x`
-      <input
-        class=${d.e(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        min=${o.o(this.min)}
-        max=${o.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=>{this.touched=!0,t.stopImmediatePropagation()}}
-        ${r.n(this.inputRef)}
-      />
-    `}renderTags(){return s.x`
-      <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0]?k.c((this._value??[]).filter(Boolean),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 console.log("multiple",this.multiple,"value",this.value,"_value",this._value),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,l=this.popupRef.value.getBoundingClientRect().height;let u=e?"calc(100% - 30px)":"100%";i&&i.top+l>window.innerHeight&&i.top-l>0&&(u=`calc(100% - ${a}px - ${l}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()}};n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"value",2);n([s.n({type:Array})],exports.PktDatepicker.prototype,"_value",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"label",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"dateformat",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"multiple",2);n([s.n({type:Number,reflect:!0})],exports.PktDatepicker.prototype,"maxlength",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"range",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"showRangeLabels",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"min",2);n([s.n({type:String,reflect:!0})],exports.PktDatepicker.prototype,"max",2);n([s.n({type:Boolean})],exports.PktDatepicker.prototype,"weeknumbers",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"withcontrols",2);n([s.n({converter:h.converters.csvToArray})],exports.PktDatepicker.prototype,"excludedates",2);n([s.n({converter:h.converters.csvToArray})],exports.PktDatepicker.prototype,"excludeweekdays",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"currentmonth",2);n([s.n({type:Boolean,reflect:!0})],exports.PktDatepicker.prototype,"calendarOpen",2);n([s.n({type:String})],exports.PktDatepicker.prototype,"timezone",2);n([m.r()],exports.PktDatepicker.prototype,"inputClasses",2);n([m.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=n([s.t("pkt-datepicker")],exports.PktDatepicker);