@oslokommune/punkt-elements 12.31.2 → 12.32.7

package/dist/combobox.d.ts

@@ -0,0 +1,47 @@
+export { }
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-icon': PktIcon;
+    }
+}
+
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
+declare global {
+    interface Window {
+        pktTz: string;
+    }
+}

package/dist/datepicker-Bkiyh5P5.cjs

@@ -0,0 +1,153 @@
+"use strict";const d=require("./class-map-DvBKxTiW.cjs"),u=require("./if-defined-CoBDkDGb.cjs"),s=require("./element-DJpGVXjq.cjs"),k=require("./state-C4LdlTYO.cjs"),h=require("./calendar-Ds13AKr5.cjs"),m=require("./input-element-VNai8bsq.cjs"),r=require("./ref-CLqTsViF.cjs"),v=require("./repeat-t2oms1o6.cjs");require("./icon-UtDKPH3R.cjs");require("./input-wrapper-DWOw7Yn-.cjs");require("./tag-C52KeBmR.cjs");const $=require("./pkt-slot-controller-plQxXRvV.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 x=Object.defineProperty,b=Object.getOwnPropertyDescriptor,l=(c,t,e,i)=>{for(var n=i>1?void 0:i?b(t,e):t,a=c.length-1,p;a>=0;a--)(p=c[a])&&(n=(i?p(t,e,n):p(n))||n);return i&&n&&x(t,e,n),n};const g=c=>new Promise(t=>setTimeout(t,c));exports.PktDatepicker=class extends m.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,n=this.max?h.newDate(this.max):null,a=h.newDate(e.value.split(",")[0]);a&&!isNaN(a.getTime())&&(!i||a>=i)&&(!n||a<=n)&&this.calRef.value&&this.calRef.value.handleDateSelect(a),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 n,a;(n=this.inputRef)!=null&&n.value&&((a=this.btnRef)!=null&&a.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=${u.o(this.min)}
+        max=${u.o(this.max)}
+        @click=${t=>{t.preventDefault(),this.showCalendar()}}
+        ?disabled=${this.disabled}
+        @keydown=${t=>{var e;(t.key===","||t.key==="Enter")&&((e=this.inputRef.value)==null||e.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 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=${u.o(this.min)}
+        max=${u.o(this.max)}
+        ?disabled=${this.disabled}
+        @click=${e=>{e.preventDefault(),this.showCalendar()}}
+        @keydown=${e=>{var i;(e.key===","||e.key==="Enter")&&((i=this.inputRef.value)==null||i.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 i,n;if(e.target.value){this.manageValidity(e.target);const a=h.fromISOToDate(e.target.value);a&&this._value[0]!==e.target.value&&this._value[1]&&(this.clearInputValue(),(n=(i=this.calRef)==null?void 0:i.value)==null||n.handleDateSelect(a))}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=${u.o(this.min)}
+        max=${u.o(this.max)}
+        ?disabled=${this.disabled}
+        @click=${e=>{e.preventDefault(),this.showCalendar()}}
+        @keydown=${e=>{var i;(e.key===","||e.key==="Enter")&&((i=this.inputRefTo.value)==null||i.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 i,n,a;if((i=this.calRef.value)!=null&&i.contains(e.relatedTarget)||this.onBlur(),e.target.value){this.manageValidity(e.target);const p=e.target.value;this.min&&this.min>p?this.internals.setValidity({rangeUnderflow:!0},this.strings.forms.messages.rangeUnderflow,e.target):this.max&&this.max<p&&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)&&((a=(n=this.calRef)==null?void 0:n.value)==null||a.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=${u.o(this.min)}
+        max=${u.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=>{(t.key===","||t.key==="Enter")&&(t.preventDefault(),this.addToSelected(t)),(t.key==="Space"||t.key===" ")&&(t.preventDefault(),this.toggleCalendar(t))}}
+        @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}
+        .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(),n=e?i.height+30:i.height,a=this.popupRef.value.getBoundingClientRect().height;let p=e?"calc(100% - 30px)":"100%";i&&i.top+a>window.innerHeight&&i.top-a>0&&(p=`calc(100% - ${n}px - ${a}px)`),this.popupRef.value.style.top=p}}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([k.r()],exports.PktDatepicker.prototype,"inputClasses",2);l([k.r()],exports.PktDatepicker.prototype,"buttonClasses",2);exports.PktDatepicker=l([s.t("pkt-datepicker")],exports.PktDatepicker);

package/dist/datepicker-nWd89NwP.js

@@ -0,0 +1,449 @@
+import { e as f } from "./class-map-D4tSZX70.js";
+import { o } from "./if-defined-DeANa4n5.js";
+import { x as p, E as m, n as r, a as w } from "./element-DiqKrDty.js";
+import { r as b } from "./state-CDwPbiQj.js";
+import { n as $, f as v, a as R, b as y, d as x } from "./calendar-BNHDEEwT.js";
+import { P as C } from "./input-element-C4mmTk6h.js";
+import { e as g, n as u } from "./ref-B70YZNXm.js";
+import { c as _ } from "./repeat-CNLpCTun.js";
+import "./icon-BdY52BIt.js";
+import "./input-wrapper-P_oEi6dk.js";
+import "./tag-DoS5S2Bq.js";
+import { P as T } from "./pkt-slot-controller-BtVLTZb7.js";
+const D = {
+  dateformat: {
+    default: "dd.MM.yyyy"
+  },
+  min: {
+    default: null
+  },
+  max: {
+    default: null
+  },
+  weeknumbers: {
+    default: !1
+  },
+  withcontrols: {
+    default: !1
+  },
+  multiple: {
+    default: !1
+  },
+  range: {
+    default: !1
+  }
+}, c = {
+  props: D
+};
+var S = Object.defineProperty, I = Object.getOwnPropertyDescriptor, l = (t, e, i, n) => {
+  for (var s = n > 1 ? void 0 : n ? I(e, i) : e, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (s = (n ? d(e, i, s) : d(s)) || s);
+  return n && s && S(e, i, s), s;
+};
+const k = (t) => new Promise((e) => setTimeout(e, t));
+let a = class extends C {
+  /**
+   * Housekeeping / lifecycle methods
+   */
+  constructor() {
+    super(), this.value = "", this._value = this.value ? Array.isArray(this.value) ? this.value : this.value.split(",") : [], this.label = "Datovelger", this.dateformat = c.props.dateformat.default, this.multiple = c.props.multiple.default, this.maxlength = null, this.range = c.props.range.default, this.showRangeLabels = !1, this.min = null, this.max = null, this.weeknumbers = c.props.weeknumbers.default, this.withcontrols = c.props.withcontrols.default, this.excludedates = [], this.excludeweekdays = [], this.currentmonth = null, this.calendarOpen = !1, this.timezone = "Europe/Oslo", this.inputClasses = {}, this.buttonClasses = {}, this.inputRef = g(), this.inputRefTo = g(), this.btnRef = g(), this.calRef = g(), this.popupRef = g(), this.helptextSlot = g(), this.addToSelected = (t) => {
+      const e = t.target;
+      if (!e.value) return;
+      const i = this.min ? $(this.min) : null, n = this.max ? $(this.max) : null, s = $(e.value.split(",")[0]);
+      s && !isNaN(s.getTime()) && (!i || s >= i) && (!n || s <= n) && this.calRef.value && this.calRef.value.handleDateSelect(s), e.value = "";
+    }, this.slotController = new T(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 n, s;
+      (n = this.inputRef) != null && n.value && ((s = this.btnRef) != null && s.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 || c.props.min.default, this.max = this.max || c.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 k(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);
+  }
+  /**
+   * Rendering
+   */
+  renderInput() {
+    return p`
+      <input
+        class="${f(this.inputClasses)}"
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0] ?? ""}
+        min=${o(this.min)}
+        max=${o(this.max)}
+        @click=${(t) => {
+      t.preventDefault(), this.showCalendar();
+    }}
+        ?disabled=${this.disabled}
+        @keydown=${(t) => {
+      var e;
+      (t.key === "," || t.key === "Enter") && ((e = this.inputRef.value) == null || e.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 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();
+    }}
+        ${u(this.inputRef)}
+      />
+    `;
+  }
+  renderRangeInput() {
+    const t = {
+      "pkt-input-prefix": this.showRangeLabels,
+      "pkt-hide": !this.showRangeLabels
+    };
+    return p`
+      ${this.showRangeLabels ? p` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : m}
+      <input
+        class=${f(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        .value=${this._value[0] ?? ""}
+        min=${o(this.min)}
+        max=${o(this.max)}
+        ?disabled=${this.disabled}
+        @click=${(e) => {
+      e.preventDefault(), this.showCalendar();
+    }}
+        @keydown=${(e) => {
+      var i;
+      (e.key === "," || e.key === "Enter") && ((i = this.inputRef.value) == null || i.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 i, n;
+      if (e.target.value) {
+        this.manageValidity(e.target);
+        const s = v(e.target.value);
+        s && this._value[0] !== e.target.value && this._value[1] && (this.clearInputValue(), (n = (i = this.calRef) == null ? void 0 : i.value) == null || n.handleDateSelect(s));
+      } else this._value[0] && this.clearInputValue();
+    }}
+        @change=${(e) => {
+      e.stopImmediatePropagation();
+    }}
+        ${u(this.inputRef)}
+      />
+      <div class="${f(t)}" id="${this.id}-to-label">
+        ${this.strings.generic.to}
+      </div>
+      ${this.showRangeLabels ? m : p` <div class="pkt-input-separator">–</div> `}
+      <input
+        class=${f(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-to"
+        aria-labelledby="${this.id}-to-label"
+        .value=${this._value[1] ?? ""}
+        min=${o(this.min)}
+        max=${o(this.max)}
+        ?disabled=${this.disabled}
+        @click=${(e) => {
+      e.preventDefault(), this.showCalendar();
+    }}
+        @keydown=${(e) => {
+      var i;
+      (e.key === "," || e.key === "Enter") && ((i = this.inputRefTo.value) == null || i.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 i, n, s;
+      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 d = v(e.target.value);
+        d && this._value[1] !== R(d) && ((s = (n = this.calRef) == null ? void 0 : n.value) == null || s.handleDateSelect(d));
+      }
+    }}
+        @change=${(e) => {
+      e.stopImmediatePropagation();
+    }}
+        ${u(this.inputRefTo)}
+      />
+    `;
+  }
+  renderMultipleInput() {
+    return p`
+      <input
+        class=${f(this.inputClasses)}
+        .type=${this.inputType}
+        id="${this.id}-input"
+        min=${o(this.min)}
+        max=${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) => {
+      (t.key === "," || t.key === "Enter") && (t.preventDefault(), this.addToSelected(t)), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t));
+    }}
+        @change=${(t) => {
+      t.stopImmediatePropagation();
+    }}
+        ${u(this.inputRef)}
+      />
+    `;
+  }
+  renderTags() {
+    return p`
+      <div class="pkt-datepicker__tags" aria-live="polite">
+        ${this._value[0] ? _(
+      this._value ?? [],
+      (t) => t,
+      (t) => p`
+                <pkt-tag
+                  .id="${this.id + t + "-tag"}"
+                  closeTag
+                  ariaLabel="${this.strings.calendar.deleteDate} ${y(
+        t,
+        this.dateformat
+      )}"
+                  @close=${() => {
+        var e;
+        return (e = this.calRef.value) == null ? void 0 : e.handleDateSelect(v(t));
+      }}
+                  ><time datetime="${t}">${y(t, this.dateformat)}</time></pkt-tag
+                >
+              `
+    ) : m}
+      </div>
+    `;
+  }
+  renderCalendar() {
+    return p`<div
+      class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
+      @focusout=${(t) => {
+      this.calendarOpen && this.handleFocusOut(t);
+    }}
+      id="${this.id}-popup"
+      ${u(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 ? $(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();
+    }}
+        ${u(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
+    }, p`
+      <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}
+        .errorMessage=${this.errorMessage}
+        .helptext=${this.helptext}
+        .helptextDropdown=${this.helptextDropdown}
+        .helptextDropdownButton=${this.helptextDropdownButton}
+        .ariaDescribedBy=${this.ariaDescribedBy}
+        class="pkt-datepicker"
+      >
+        <div class="pkt-contents" ${u(this.helptextSlot)} name="helptext" slot="helptext"></div>
+        ${this.multiple ? this.renderTags() : m}
+        <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="${f(this.buttonClasses)}"
+              type="button"
+              @click=${this.toggleCalendar}
+              ?disabled=${this.disabled}
+              ${u(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()}
+    `;
+  }
+  /**
+   * Handlers
+   */
+  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(), n = e ? i.height + 30 : i.height, s = this.popupRef.value.getBoundingClientRect().height;
+      let h = e ? "calc(100% - 30px)" : "100%";
+      i && i.top + s > window.innerHeight && i.top - s > 0 && (h = `calc(100% - ${n}px - ${s}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 k(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([
+  r({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+l([
+  r({ type: Array })
+], a.prototype, "_value", 2);
+l([
+  r({ type: String, reflect: !0 })
+], a.prototype, "label", 2);
+l([
+  r({ type: String })
+], a.prototype, "dateformat", 2);
+l([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "multiple", 2);
+l([
+  r({ type: Number, reflect: !0 })
+], a.prototype, "maxlength", 2);
+l([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "range", 2);
+l([
+  r({ type: Boolean })
+], a.prototype, "showRangeLabels", 2);
+l([
+  r({ type: String, reflect: !0 })
+], a.prototype, "min", 2);
+l([
+  r({ type: String, reflect: !0 })
+], a.prototype, "max", 2);
+l([
+  r({ type: Boolean })
+], a.prototype, "weeknumbers", 2);
+l([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "withcontrols", 2);
+l([
+  r({ converter: x.csvToArray })
+], a.prototype, "excludedates", 2);
+l([
+  r({ converter: x.csvToArray })
+], a.prototype, "excludeweekdays", 2);
+l([
+  r({ type: String })
+], a.prototype, "currentmonth", 2);
+l([
+  r({ type: Boolean, reflect: !0 })
+], a.prototype, "calendarOpen", 2);
+l([
+  r({ type: String })
+], a.prototype, "timezone", 2);
+l([
+  b()
+], a.prototype, "inputClasses", 2);
+l([
+  b()
+], a.prototype, "buttonClasses", 2);
+a = l([
+  w("pkt-datepicker")
+], a);
+export {
+  a as P
+};