@oslokommune/punkt-elements 12.32.0 → 12.32.8

package/dist/datepicker-8MOgQsyL.js

@@ -1,611 +0,0 @@
-import { e as m } from "./class-map-ChuDQU5C.js";
-import { o as d } from "./if-defined-rCqT8Od1.js";
-import { x as p, E as g, n as l, a as w } from "./element-G8JoS0Lj.js";
-import { r as b } from "./state-gfUuUqVg.js";
-import { n as v, f as k, a as R, b as y, d as x } from "./calendar-1ryAEdX3.js";
-import { P as C } from "./input-element-DM2uSYaW.js";
-import { e as f, n as h } from "./ref-cRTOoM4R.js";
-import { c as T } from "./repeat-CArTw6-s.js";
-import "./icon-BJnwW0eh.js";
-import "./input-wrapper-DQmYzhcy.js";
-import "./tag-CWx1XsGR.js";
-import { P as S } from "./pkt-slot-controller-D1DakVrU.js";
-const D = "pkt-datepicker", _ = !0, I = {
-  name: {
-    type: "string",
-    name: "Navn",
-    description: "Navn som sendes brukes i skjema ved innsending"
-  },
-  label: {
-    type: "string",
-    name: "Etikett",
-    description: "Tekst som vises over datovelgeren"
-  },
-  helptext: {
-    type: "string",
-    name: "Hjelpetekst",
-    description: "Hjelpetekst som vises over datovelgeren"
-  },
-  helptextDropdown: {
-    type: "string",
-    name: "Utvidet hjelpetekst",
-    description: "Hjelpetekst som vises i en lukket boks man kan åpne"
-  },
-  helptextDropdownButton: {
-    type: "string",
-    name: "Knappetekst for hjelpetekst",
-    description: "Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst",
-    default: "Les mer"
-  },
-  dateformat: {
-    name: "Datoformat",
-    description: "Datoformat for valgte datoer i flervalgsmodus",
-    type: "string",
-    default: "dd.MM.yyyy"
-  },
-  currentmonth: {
-    name: "Nåværende måned",
-    type: "ISOdatestring",
-    description: "Måneden som skal vises i datovelgeren"
-  },
-  value: {
-    name: "Verdi",
-    type: "ISOdatestring",
-    variant: "multiple",
-    reflect: !0,
-    description: "Kommaseparert liste av valgte datoer"
-  },
-  excludeweekdays: {
-    name: "Utelat ukedager",
-    type: "string",
-    description: "Kommaseparert liste over ukedager (1-7) som skal ekskluderes"
-  },
-  excludedates: {
-    name: "Utelat datoer",
-    type: "ISOdatestring",
-    variant: "multiple",
-    description: "Kommaseparert liste over datoer som skal ekskluderes"
-  },
-  min: {
-    name: "Tidligst tillatt",
-    type: "ISOdatestring",
-    default: null,
-    description: "Første tillate dato i datovelgeren"
-  },
-  max: {
-    name: "Senest tillatt",
-    type: "ISOdatestring",
-    default: null,
-    description: "Siste tillate dato i datovelgeren"
-  },
-  weeknumbers: {
-    name: "Vis ukenummer",
-    type: "boolean",
-    reflect: !0,
-    default: !1,
-    description: "Vis ukedager i datovelgerens kalender"
-  },
-  withcontrols: {
-    name: "Med kontroller",
-    type: "boolean",
-    reflect: !0,
-    default: !1,
-    description: "Vis avanserte velgere for måned og år"
-  },
-  multiple: {
-    name: "Flervalg",
-    type: "boolean",
-    reflect: !0,
-    default: !1,
-    description: "Tillat valg av flere enn én dato i samme velger"
-  },
-  maxlength: {
-    name: "Maks antall",
-    description: "Maks valgte datoer i flervalgsmodus",
-    type: "number"
-  },
-  range: {
-    name: "Datotidsrom",
-    type: "boolean",
-    reflect: !0,
-    default: !1,
-    description: "Tillat å velge et tidsrom mellom to datoer i samme velger"
-  },
-  hasError: {
-    type: "boolean",
-    name: "Feil",
-    default: !1,
-    description: "Viser feiltilstand for datovelgeren"
-  },
-  errorMessage: {
-    type: "string",
-    name: "Feilmelding",
-    description: "Tekst som vises under datovelgeren ved feiltilstand"
-  },
-  disabled: {
-    type: "boolean",
-    name: "Deaktivert",
-    default: !1,
-    reflect: !0,
-    description: "Er datovelgeren deaktivert?"
-  },
-  fullwidth: {
-    type: "boolean",
-    name: "Full bredde",
-    default: !1,
-    reflect: !0,
-    description: "Skal datovelgeren ta opp hele bredden?"
-  },
-  required: {
-    type: "boolean",
-    name: "Påkrevd",
-    default: !1,
-    reflect: !0,
-    description: "Er datovelgeren påkrevd?"
-  },
-  requiredTag: {
-    type: "boolean",
-    name: "Vise påkrevd-merking",
-    default: !1,
-    description: "Viser en merking som indikerer at datovelgeren er påkrevd"
-  },
-  requiredText: {
-    type: "string",
-    name: "Påkrevd-tekst",
-    default: "Må fylles ut",
-    description: "Tekst som vises i påkrevd-merkingen"
-  },
-  optionalTag: {
-    type: "boolean",
-    name: "Vise valgfritt-merking",
-    default: !1,
-    description: "Viser en merking som indikerer at datovelgeren er valgfri"
-  },
-  optionalText: {
-    type: "string",
-    name: "Valgfritt-tekst",
-    default: "Valgfritt",
-    description: "Tekst som vises i valgfritt-merkingen"
-  },
-  useWrapper: {
-    type: "boolean",
-    name: "Bruk wrapper",
-    description: "Indikerer at feltet skal ha synlig label og hjelpetekst",
-    displayAsFalse: !0,
-    default: !0
-  },
-  id: {
-    type: "string",
-    name: "ID",
-    description: "Unik identifikasjon for datovelgeren"
-  }
-}, O = {
-  change: {
-    type: "Event",
-    description: "Returnerer valgt dato som streng i ISO-format"
-  },
-  "value-change": {
-    type: "CustomEvent",
-    description: "Returnerer en <code>array</code> med valgte datoer i ISO-format"
-  },
-  toggleHelpText: {
-    type: "CustomEvent",
-    description: "Returnerer <code>event.detail { isOpen: true }</code> eller <code>event.detail { isOpen: false }</code> når hjelpeteksten åpnes eller lukkes"
-  }
-}, c = {
-  name: D,
-  "css-class": "pkt-datepicker",
-  isElement: _,
-  props: I,
-  events: O
-};
-var P = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (e, t, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? B(t, i) : t, o = e.length - 1, u; o >= 0; o--)
-    (u = e[o]) && (s = (r ? u(t, i, s) : u(s)) || s);
-  return r && s && P(t, i, s), s;
-};
-const $ = (e) => new Promise((t) => setTimeout(t, e));
-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 = f(), this.inputRefTo = f(), this.btnRef = f(), this.calRef = f(), this.popupRef = f(), this.helptextSlot = f(), this.addToSelected = (e) => {
-      const t = e.target;
-      if (!t.value) return;
-      const i = this.min ? v(this.min) : null, r = this.max ? v(this.max) : null, s = v(t.value.split(",")[0]);
-      s && !isNaN(s.getTime()) && (!i || s >= i) && (!r || s <= r) && this.calRef.value && this.calRef.value.handleDateSelect(s), t.value = "";
-    }, this.slotController = new S(this, this.helptextSlot);
-  }
-  async connectedCallback() {
-    super.connectedCallback(), this.isMobileSafari = /iP(ad|od|hone)/i.test(window.navigator.userAgent) && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/), this.inputType = this.isMobileSafari ? "text" : "date", document && document.body.addEventListener("click", (e) => {
-      var t, i;
-      (t = this.inputRef) != null && t.value && ((i = this.btnRef) != null && i.value) && !this.inputRef.value.contains(e.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(e.target)) && !this.btnRef.value.contains(e.target) && !e.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 $(20), this.handleCalendarPosition());
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), document && document.body.removeEventListener("click", (e) => {
-      var t, i;
-      (t = this.inputRef) != null && t.value && ((i = this.btnRef) != null && i.value) && !this.inputRef.value.contains(e.target) && !this.btnRef.value.contains(e.target) && this.hideCalendar();
-    });
-  }
-  attributeChangedCallback(e, t, i) {
-    if (e === "value") {
-      if (this.range && (i == null ? void 0 : i.split(",").length) === 1) return;
-      this.value !== t && this.valueChanged(i, t);
-    }
-    e === "excludedates" && typeof this.excludedates == "string" && (this.excludedates = (i == null ? void 0 : i.split(",")) ?? []), e === "excludeweekdays" && typeof this.excludeweekdays == "string" && (this.excludeweekdays = (i == null ? void 0 : i.split(",")) ?? []), super.attributeChangedCallback(e, t, i);
-  }
-  updated(e) {
-    if (e.has("value")) {
-      if (this.range && this.value.length === 1) return;
-      this.valueChanged(this.value, e.get("value"));
-    }
-    super.updated(e);
-  }
-  /**
-   * Rendering
-   */
-  renderInput() {
-    return p`
-      <input
-        class="${m(this.inputClasses)}"
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0] ?? ""}
-        min=${d(this.min)}
-        max=${d(this.max)}
-        @click=${(e) => {
-      e.preventDefault(), this.showCalendar();
-    }}
-        ?disabled=${this.disabled}
-        @keydown=${(e) => {
-      var t;
-      (e.key === "," || e.key === "Enter") && ((t = this.inputRef.value) == null || t.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 t;
-      (t = this.calRef.value) != null && t.contains(e.relatedTarget) || this.onBlur(), this.manageValidity(e.target), this.value = e.target.value;
-    }}
-        @change=${(e) => {
-      e.stopImmediatePropagation();
-    }}
-        ${h(this.inputRef)}
-      />
-    `;
-  }
-  renderRangeInput() {
-    const e = {
-      "pkt-input-prefix": this.showRangeLabels,
-      "pkt-hide": !this.showRangeLabels
-    };
-    return p`
-      ${this.showRangeLabels ? p` <div class="pkt-input-prefix">${this.strings.generic.from}</div> ` : g}
-      <input
-        class=${m(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        .value=${this._value[0] ?? ""}
-        min=${d(this.min)}
-        max=${d(this.max)}
-        ?disabled=${this.disabled}
-        @click=${(t) => {
-      t.preventDefault(), this.showCalendar();
-    }}
-        @keydown=${(t) => {
-      var i;
-      (t.key === "," || t.key === "Enter") && ((i = this.inputRef.value) == null || i.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 i, r;
-      if (t.target.value) {
-        this.manageValidity(t.target);
-        const s = k(t.target.value);
-        s && this._value[0] !== t.target.value && this._value[1] && (this.clearInputValue(), (r = (i = this.calRef) == null ? void 0 : i.value) == null || r.handleDateSelect(s));
-      } else this._value[0] && this.clearInputValue();
-    }}
-        @change=${(t) => {
-      t.stopImmediatePropagation();
-    }}
-        ${h(this.inputRef)}
-      />
-      <div class="${m(e)}" id="${this.id}-to-label">
-        ${this.strings.generic.to}
-      </div>
-      ${this.showRangeLabels ? g : p` <div class="pkt-input-separator">–</div> `}
-      <input
-        class=${m(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-to"
-        aria-labelledby="${this.id}-to-label"
-        .value=${this._value[1] ?? ""}
-        min=${d(this.min)}
-        max=${d(this.max)}
-        ?disabled=${this.disabled}
-        @click=${(t) => {
-      t.preventDefault(), this.showCalendar();
-    }}
-        @keydown=${(t) => {
-      var i;
-      (t.key === "," || t.key === "Enter") && ((i = this.inputRefTo.value) == null || i.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 i, r, s;
-      if ((i = this.calRef.value) != null && i.contains(t.relatedTarget) || this.onBlur(), t.target.value) {
-        this.manageValidity(t.target);
-        const o = t.target.value;
-        this.min && this.min > o ? this.internals.setValidity(
-          { rangeUnderflow: !0 },
-          this.strings.forms.messages.rangeUnderflow,
-          t.target
-        ) : this.max && this.max < o && this.internals.setValidity(
-          { rangeOverflow: !0 },
-          this.strings.forms.messages.rangeOverflow,
-          t.target
-        );
-        const u = k(t.target.value);
-        u && this._value[1] !== R(u) && ((s = (r = this.calRef) == null ? void 0 : r.value) == null || s.handleDateSelect(u));
-      }
-    }}
-        @change=${(t) => {
-      t.stopImmediatePropagation();
-    }}
-        ${h(this.inputRefTo)}
-      />
-    `;
-  }
-  renderMultipleInput() {
-    return p`
-      <input
-        class=${m(this.inputClasses)}
-        .type=${this.inputType}
-        id="${this.id}-input"
-        min=${d(this.min)}
-        max=${d(this.max)}
-        ?disabled=${this.disabled || this.maxlength && this._value.length >= this.maxlength}
-        @click=${(e) => {
-      e.preventDefault(), this.showCalendar();
-    }}
-        @blur=${(e) => {
-      var t;
-      (t = this.calRef.value) != null && t.contains(e.relatedTarget) || this.onBlur(), this.addToSelected(e);
-    }}
-        @input=${(e) => {
-      this.onInput(), e.stopImmediatePropagation();
-    }}
-        @focus=${() => {
-      this.onFocus(), this.isMobileSafari && this.showCalendar();
-    }}
-        @keydown=${(e) => {
-      (e.key === "," || e.key === "Enter") && (e.preventDefault(), this.addToSelected(e)), (e.key === "Space" || e.key === " ") && (e.preventDefault(), this.toggleCalendar(e));
-    }}
-        @change=${(e) => {
-      e.stopImmediatePropagation();
-    }}
-        ${h(this.inputRef)}
-      />
-    `;
-  }
-  renderTags() {
-    return p`
-      <div class="pkt-datepicker__tags" aria-live="polite">
-        ${this._value[0] ? T(
-      this._value ?? [],
-      (e) => e,
-      (e) => p`
-                <pkt-tag
-                  .id="${this.id + e + "-tag"}"
-                  closeTag
-                  ariaLabel="${this.strings.calendar.deleteDate} ${y(
-        e,
-        this.dateformat
-      )}"
-                  @close=${() => {
-        var t;
-        return (t = this.calRef.value) == null ? void 0 : t.handleDateSelect(k(e));
-      }}
-                  ><time datetime="${e}">${y(e, this.dateformat)}</time></pkt-tag
-                >
-              `
-    ) : g}
-      </div>
-    `;
-  }
-  renderCalendar() {
-    return p`<div
-      class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
-      @focusout=${(e) => {
-      this.calendarOpen && this.handleFocusOut(e);
-    }}
-      id="${this.id}-popup"
-      ${h(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=${(e) => {
-      this.value = !this.multiple && !this.range ? e.detail[0] : e.detail, this._value = e.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();
-    }}
-        ${h(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" ${h(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="${m(this.buttonClasses)}"
-              type="button"
-              @click=${this.toggleCalendar}
-              ?disabled=${this.disabled}
-              ${h(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 e;
-    if (this.popupRef.value && this.inputRef.value) {
-      const t = this.multiple && !!this.maxlength, i = ((e = this.inputRef.value.parentElement) == null ? void 0 : e.getBoundingClientRect()) || this.inputRef.value.getBoundingClientRect(), r = t ? i.height + 30 : i.height, s = this.popupRef.value.getBoundingClientRect().height;
-      let o = t ? "calc(100% - 30px)" : "100%";
-      i && i.top + s > window.innerHeight && i.top - s > 0 && (o = `calc(100% - ${r}px - ${s}px)`), this.popupRef.value.style.top = o;
-    }
-  }
-  handleFocusOut(e) {
-    this.contains(e.target) || (this.onBlur(), this.hideCalendar());
-  }
-  async showCalendar() {
-    var e;
-    this.calendarOpen = !0, await $(20), this.handleCalendarPosition(), this.isMobileSafari && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
-  }
-  hideCalendar() {
-    this.calendarOpen = !1;
-  }
-  async toggleCalendar(e) {
-    e.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar();
-  }
-};
-n([
-  l({ type: String, reflect: !0 })
-], a.prototype, "value", 2);
-n([
-  l({ type: Array })
-], a.prototype, "_value", 2);
-n([
-  l({ type: String, reflect: !0 })
-], a.prototype, "label", 2);
-n([
-  l({ type: String })
-], a.prototype, "dateformat", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "multiple", 2);
-n([
-  l({ type: Number, reflect: !0 })
-], a.prototype, "maxlength", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "range", 2);
-n([
-  l({ type: Boolean })
-], a.prototype, "showRangeLabels", 2);
-n([
-  l({ type: String, reflect: !0 })
-], a.prototype, "min", 2);
-n([
-  l({ type: String, reflect: !0 })
-], a.prototype, "max", 2);
-n([
-  l({ type: Boolean })
-], a.prototype, "weeknumbers", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "withcontrols", 2);
-n([
-  l({ converter: x.csvToArray })
-], a.prototype, "excludedates", 2);
-n([
-  l({ converter: x.csvToArray })
-], a.prototype, "excludeweekdays", 2);
-n([
-  l({ type: String })
-], a.prototype, "currentmonth", 2);
-n([
-  l({ type: Boolean, reflect: !0 })
-], a.prototype, "calendarOpen", 2);
-n([
-  l({ type: String })
-], a.prototype, "timezone", 2);
-n([
-  b()
-], a.prototype, "inputClasses", 2);
-n([
-  b()
-], a.prototype, "buttonClasses", 2);
-a = n([
-  w("pkt-datepicker")
-], a);
-export {
-  a as P
-};