@oslokommune/punkt-elements/dist/datepicker-CEfh3TTA.js

Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo

import { e as f } from "./class-map-BpTj9gtz.js";
import { o } from "./if-defined-CmuO4Vz9.js";
import { x as u, E as g, n as r, a as w } from "./element-CgEWt74-.js";
import { r as k } from "./state-Bo2bck5_.js";
import { n as v, f as $, a as R, b as y, d as x } from "./calendar-DevQhOup.js";
import { P as C } from "./input-element-NnrDmp4r.js";
import { e as m, n as p } from "./ref-BBYSqgeW.js";
import { c as T } from "./repeat-C8BeHwYx.js";
import "./icon-CC1js8eR.js";
import "./input-wrapper-Dr__Sxql.js";
import "./tag-BWm6s48d.js";
import { P as _ } from "./pkt-slot-controller-BPGj-LC5.js";
const S = {
  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: S
};
var D = Object.defineProperty, I = Object.getOwnPropertyDescriptor, n = (t, e, i, a) => {
  for (var s = a > 1 ? void 0 : a ? I(e, i) : e, h = t.length - 1, d; h >= 0; h--)
    (d = t[h]) && (s = (a ? d(e, i, s) : d(s)) || s);
  return a && s && D(e, i, s), s;
};
const b = (t) => new Promise((e) => setTimeout(e, t));
let l = 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 = m(), this.inputRefTo = m(), this.btnRef = m(), this.calRef = m(), this.popupRef = m(), this.helptextSlot = m(), this.addToSelected = (t) => {
      const e = t.target;
      if (!e.value) return;
      const i = this.min ? v(this.min) : null, a = this.max ? v(this.max) : null, s = v(e.value.split(",")[0]);
      s && !isNaN(s.getTime()) && (!i || s >= i) && (!a || s <= a) && this.calRef.value && this.calRef.value.handleDateSelect(s), e.value = "";
    }, this.slotController = new _(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, s;
      (a = this.inputRef) != null && a.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 b(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 u`
      <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, i;
      if (t.key === "," && ((e = this.inputRef.value) == null || e.blur()), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t)), t.key === "Enter") {
        const a = this.internals.form;
        a ? a.requestSubmit() : (i = this.inputRef.value) == null || i.blur();
      }
    }}
        @input=${(t) => {
      this.onInput(), t.stopImmediatePropagation();
    }}
        @focus=${() => {
      this.onFocus(), this.isMobileSafari && this.showCalendar();
    }}
        @blur=${(t) => {
      var e;
      (e = this.calRef.value) != null && e.contains(t.relatedTarget) || this.onBlur(), this.manageValidity(t.target), this.value = t.target.value;
    }}
        @change=${(t) => {
      t.stopImmediatePropagation();
    }}
        ${p(this.inputRef)}
      />
    `;
  }
  renderRangeInput() {
    const t = {
      "pkt-input-prefix": this.showRangeLabels,
      "pkt-hide": !this.showRangeLabels
    };
    return u`
      ${this.showRangeLabels ? u` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : g}
      <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, 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 s = this.internals.form;
        s ? s.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 s = $(e.target.value);
        s && this._value[0] !== e.target.value && this._value[1] && (this.clearInputValue(), (a = (i = this.calRef) == null ? void 0 : i.value) == null || a.handleDateSelect(s));
      } else this._value[0] && this.clearInputValue();
    }}
        @change=${(e) => {
      e.stopImmediatePropagation();
    }}
        ${p(this.inputRef)}
      />
      <div class="${f(t)}" id="${this.id}-to-label">
        ${this.strings.generic.to}
      </div>
      ${this.showRangeLabels ? g : u` <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, 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 s = this.internals.form;
        s ? s.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, 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 = $(e.target.value);
        d && this._value[1] !== R(d) && ((s = (a = this.calRef) == null ? void 0 : a.value) == null || s.handleDateSelect(d));
      }
    }}
        @change=${(e) => {
      e.stopImmediatePropagation();
    }}
        ${p(this.inputRefTo)}
      />
    `;
  }
  renderMultipleInput() {
    return u`
      <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) => {
      var e;
      if (t.key === "," && (t.preventDefault(), this.addToSelected(t)), (t.key === "Space" || t.key === " ") && (t.preventDefault(), this.toggleCalendar(t)), t.key === "Enter") {
        const i = this.internals.form;
        i ? i.requestSubmit() : (e = this.inputRef.value) == null || e.blur();
      }
    }}
        @change=${(t) => {
      t.stopImmediatePropagation();
    }}
        ${p(this.inputRef)}
      />
    `;
  }
  renderTags() {
    return u`
      <div class="pkt-datepicker__tags" aria-live="polite">
        ${this._value[0] ? T(
      this._value ?? [],
      (t) => t,
      (t) => u`
                <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($(t));
      }}
                  ><time datetime="${t}">${y(t, this.dateformat)}</time></pkt-tag
                >
              `
    ) : g}
      </div>
    `;
  }
  renderCalendar() {
    return u`<div
      class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
      @focusout=${(t) => {
      this.calendarOpen && this.handleFocusOut(t);
    }}
      id="${this.id}-popup"
      ${p(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 ? v(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();
    }}
        ${p(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
    }, u`
      <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(this.helptextSlot)} name="helptext" slot="helptext"></div>
        ${this.multiple ? this.renderTags() : g}
        <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}
              ${p(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(), a = 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% - ${a}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 b(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([
  r({ type: String, reflect: !0 })
], l.prototype, "value", 2);
n([
  r({ type: Array })
], l.prototype, "_value", 2);
n([
  r({ type: String, reflect: !0 })
], l.prototype, "label", 2);
n([
  r({ type: String })
], l.prototype, "dateformat", 2);
n([
  r({ type: Boolean, reflect: !0 })
], l.prototype, "multiple", 2);
n([
  r({ type: Number, reflect: !0 })
], l.prototype, "maxlength", 2);
n([
  r({ type: Boolean, reflect: !0 })
], l.prototype, "range", 2);
n([
  r({ type: Boolean })
], l.prototype, "showRangeLabels", 2);
n([
  r({ type: String, reflect: !0 })
], l.prototype, "min", 2);
n([
  r({ type: String, reflect: !0 })
], l.prototype, "max", 2);
n([
  r({ type: Boolean })
], l.prototype, "weeknumbers", 2);
n([
  r({ type: Boolean, reflect: !0 })
], l.prototype, "withcontrols", 2);
n([
  r({ converter: x.csvToArray })
], l.prototype, "excludedates", 2);
n([
  r({ converter: x.csvToArray })
], l.prototype, "excludeweekdays", 2);
n([
  r({ type: String })
], l.prototype, "currentmonth", 2);
n([
  r({ type: Boolean, reflect: !0 })
], l.prototype, "calendarOpen", 2);
n([
  r({ type: String })
], l.prototype, "timezone", 2);
n([
  k()
], l.prototype, "inputClasses", 2);
n([
  k()
], l.prototype, "buttonClasses", 2);
l = n([
  w("pkt-datepicker")
], l);
export {
  l as P
};