@oslokommune/punkt-elements - npm Package Compare versions

Comparing version 12.3.11 to 12.3.12

dist/pkt-alert.js

@@ -1,6 +0,6 @@
-import { P as f, D as a, k as p, n as i } from "./index-DFB6cAPd.js";
-import { i as d, P as k, K as u } from "./ref-ClWSy3zg.js";
-import { R as y } from "./class-map-CQf6i-xX.js";
+import { P as f, D as a, k as p, n as i } from "./index-m5WP1NKD.js";
+import { i as d, P as k, K as u } from "./ref-bNNrgsqL.js";
+import { R as y } from "./class-map-CL_lSLwn.js";
 import { t as v } from "./directive-DA0-wdk7.js";
-import "./index-BtB1fCeq.js";
+import "./index-exzYRW0z.js";
 var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, e = (l, r, n, o) => {
@@ -7,0 +7,0 @@ for (var s = o > 1 ? void 0 : o ? _(r, n) : r, c = l.length - 1, h; c >= 0; c--)

dist/pkt-calendar.js

@@ -1,9 +0,9 @@
-import "./index-DFB6cAPd.js";
+import "./index-m5WP1NKD.js";
 import "./converters-DNCwIFwr.js";
 import "./directive-DA0-wdk7.js";
-import "./class-map-CQf6i-xX.js";
-import { P as e } from "./index-erLPjF21.js";
-import "./index-BtB1fCeq.js";
+import "./class-map-CL_lSLwn.js";
+import { P as e } from "./index-Gx8odlcY.js";
+import "./index-exzYRW0z.js";
 export {
   e as PktCalendar
 };

dist/pkt-card.js

@@ -1,6 +0,6 @@
-import { P as g, k as r, D as k, n as a } from "./index-DFB6cAPd.js";
-import { i as h, P as m, K as u } from "./ref-ClWSy3zg.js";
-import { R as y } from "./class-map-CQf6i-xX.js";
+import { P as g, k as r, D as k, n as a } from "./index-m5WP1NKD.js";
+import { i as h, P as m, K as u } from "./ref-bNNrgsqL.js";
+import { R as y } from "./class-map-CL_lSLwn.js";
 import { t as f } from "./directive-DA0-wdk7.js";
-import "./index-BtB1fCeq.js";
+import "./index-exzYRW0z.js";
 import "./pkt-tag.js";
@@ -7,0 +7,0 @@ const b = "pkt-card", v = !0, $ = {

dist/pkt-component-template.js

@@ -1,5 +0,5 @@
-import { P as m, k as h, t as u, n } from "./index-DFB6cAPd.js";
+import { P as m, k as h, t as u, n } from "./index-m5WP1NKD.js";
 import { t as f } from "./directive-DA0-wdk7.js";
-import { i as d, P as v, K as c } from "./ref-ClWSy3zg.js";
-import { R as g } from "./class-map-CQf6i-xX.js";
+import { i as d, P as v, K as c } from "./ref-bNNrgsqL.js";
+import { R as g } from "./class-map-CL_lSLwn.js";
 import { c as k } from "./converters-DNCwIFwr.js";
@@ -6,0 +6,0 @@ var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (t, e, l, o) => {

dist/pkt-datepicker.js

@@ -1,9 +0,9 @@
-import { R as K, a as z, k as $, D as B, n as y } from "./index-DFB6cAPd.js";
+import { R as K, a as z, k as O, D as B, n as y } from "./index-m5WP1NKD.js";
 import { e as Z, i as tt, a as et, t as nt } from "./directive-DA0-wdk7.js";
-import { u as at, c as P, a as S, p as Y, d as rt, i as C, K as O } from "./ref-ClWSy3zg.js";
-import { R } from "./class-map-CQf6i-xX.js";
+import { u as at, c as $, a as S, p as Y, d as rt, i as C, K as P } from "./ref-bNNrgsqL.js";
+import { R } from "./class-map-CL_lSLwn.js";
 import { a as G } from "./converters-DNCwIFwr.js";
-import { s as it, t as k, c as _, m as st, a as ot, g as ut, b as lt, d as dt } from "./index-erLPjF21.js";
+import { s as it, t as k, c as _, m as st, a as ot, g as ut, b as lt, d as dt } from "./index-Gx8odlcY.js";
 import "./pkt-input-wrapper.js";
-import "./index-BtB1fCeq.js";
+import "./index-exzYRW0z.js";
 import "./pkt-tag.js";
@@ -184,11 +184,11 @@ function I(t) {
 }
-const $t = {
+const Ot = {
   narrow: ["B", "A"],
   abbreviated: ["BC", "AD"],
   wide: ["Before Christ", "Anno Domini"]
-}, Pt = {
+}, $t = {
   narrow: ["1", "2", "3", "4"],
   abbreviated: ["Q1", "Q2", "Q3", "Q4"],
   wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"]
-}, Ot = {
+}, Pt = {
   narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
@@ -223,3 +223,3 @@ abbreviated: [
   ]
-}, Dt = {
+}, Tt = {
   narrow: ["S", "M", "T", "W", "T", "F", "S"],
@@ -237,3 +237,3 @@ short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
   ]
-}, Tt = {
+}, Dt = {
   narrow: {
@@ -315,7 +315,7 @@ am: "a",
   era: E({
-    values: $t,
+    values: Ot,
     defaultWidth: "wide"
   }),
   quarter: E({
-    values: Pt,
+    values: $t,
     defaultWidth: "wide",
@@ -325,11 +325,11 @@ argumentCallback: (t) => t - 1
   month: E({
-    values: Ot,
+    values: Pt,
     defaultWidth: "wide"
   }),
   day: E({
-    values: Dt,
+    values: Tt,
     defaultWidth: "wide"
   }),
   dayPeriod: E({
-    values: Tt,
+    values: Dt,
     defaultWidth: "wide",
@@ -562,3 +562,3 @@ formattingValues: St,
   }
-}, T = {
+}, D = {
   am: "am",
@@ -907,3 +907,3 @@ pm: "pm",
     let r;
-    switch (a === 12 ? r = T.noon : a === 0 ? r = T.midnight : r = a / 12 >= 1 ? "pm" : "am", e) {
+    switch (a === 12 ? r = D.noon : a === 0 ? r = D.midnight : r = a / 12 >= 1 ? "pm" : "am", e) {
       case "b":
@@ -937,3 +937,3 @@ case "bb":
     let r;
-    switch (a >= 17 ? r = T.evening : a >= 12 ? r = T.afternoon : a >= 4 ? r = T.morning : r = T.night, e) {
+    switch (a >= 17 ? r = D.evening : a >= 12 ? r = D.afternoon : a >= 4 ? r = D.morning : r = D.night, e) {
       case "B":
@@ -1003,7 +1003,7 @@ case "BB":
       case "XX":
-        return D(a);
+        return T(a);
       case "XXXXX":
       case "XXX":
       default:
-        return D(a, ":");
+        return T(a, ":");
     }
@@ -1019,7 +1019,7 @@ },
       case "xx":
-        return D(a);
+        return T(a);
       case "xxxxx":
       case "xxx":
       default:
-        return D(a, ":");
+        return T(a, ":");
     }
@@ -1037,3 +1037,3 @@ },
       default:
-        return "GMT" + D(a, ":");
+        return "GMT" + T(a, ":");
     }
@@ -1051,3 +1051,3 @@ },
       default:
-        return "GMT" + D(a, ":");
+        return "GMT" + T(a, ":");
     }
@@ -1071,5 +1071,5 @@ },
 function L(t, e) {
-  return t % 60 === 0 ? (t > 0 ? "-" : "+") + o(Math.abs(t) / 60, 2) : D(t, e);
+  return t % 60 === 0 ? (t > 0 ? "-" : "+") + o(Math.abs(t) / 60, 2) : T(t, e);
 }
-function D(t, e = "") {
+function T(t, e = "") {
   const n = t > 0 ? "-" : "+", a = Math.abs(t), r = o(Math.trunc(a / 60), 2), i = o(a % 60, 2);
@@ -1217,6 +1217,6 @@ return n + r + e + i;
     else if (r[m] === null) m--;
-    else if (d[l] === s[h]) g[h] = P(r[l], i[h]), l++, h++;
-    else if (d[m] === s[u]) g[u] = P(r[m], i[u]), m--, u--;
-    else if (d[l] === s[u]) g[u] = P(r[l], i[u]), S(t, g[u + 1], r[l]), l++, u--;
-    else if (d[m] === s[h]) g[h] = P(r[m], i[h]), S(t, r[l], r[m]), m--, h++;
+    else if (d[l] === s[h]) g[h] = $(r[l], i[h]), l++, h++;
+    else if (d[m] === s[u]) g[u] = $(r[m], i[u]), m--, u--;
+    else if (d[l] === s[u]) g[u] = $(r[l], i[u]), S(t, g[u + 1], r[l]), l++, u--;
+    else if (d[m] === s[h]) g[h] = $(r[m], i[h]), S(t, r[l], r[m]), m--, h++;
     else if (v === void 0 && (v = X(s, h, u), x = X(d, l, m)), v.has(d[l])) if (v.has(d[m])) {
@@ -1226,4 +1226,4 @@ const c = x.get(s[h]), M = c !== void 0 ? r[c] : null;
         const N = S(t, r[l]);
-        P(N, i[h]), g[h] = N;
-      } else g[h] = P(M, i[h]), S(t, r[l], M), r[c] = null;
+        $(N, i[h]), g[h] = N;
+      } else g[h] = $(M, i[h]), S(t, r[l], M), r[c] = null;
       h++;
@@ -1234,3 +1234,3 @@ } else Y(r[m]), m--;
       const c = S(t, g[u + 1]);
-      P(c, i[h]), g[h++] = c;
+      $(c, i[h]), g[h++] = c;
     }
@@ -1464,3 +1464,3 @@ for (; l <= m; ) {
       var e, n;
-      (e = this.inputRef) != null && e.value && ((n = this.btnRef) != null && n.value) && !this.inputRef.value.contains(t.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(t.target)) && !this.btnRef.value.contains(t.target) && !t.target.closest(".pkt-calendar-popup") && this.hideCalendar();
+      (e = this.inputRef) != null && e.value && ((n = this.btnRef) != null && n.value) && !this.inputRef.value.contains(t.target) && !(this.inputRefTo.value && this.inputRefTo.value.contains(t.target)) && !this.btnRef.value.contains(t.target) && !t.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 || w.props.min.default, this.max = this.max || w.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 q(20), this.handleCalendarPosition());
@@ -1493,3 +1493,3 @@ }
   renderInput() {
-    return $`
+    return O`
       <input
@@ -1517,3 +1517,4 @@ class="${R(this.inputClasses)}"
         @blur=${(t) => {
-      this.onBlur(), this.manageValidity(t.target), this.value = t.target.value;
+      var e;
+      (e = this.calRef.value) != null && e.contains(t.relatedTarget) || this.onBlur(), this.manageValidity(t.target), this.value = t.target.value;
     }}
@@ -1523,3 +1524,3 @@ @change=${(t) => {
     }}
-        ${O(this.inputRef)}
+        ${P(this.inputRef)}
       />
@@ -1529,3 +1530,3 @@ `;
   renderRangeInput() {
-    return $`
+    return O`
       <div class="pkt-input-prefix">Fra</div>
@@ -1564,3 +1565,3 @@ <input
     }}
-        ${O(this.inputRef)}
+        ${P(this.inputRef)}
       />
@@ -1590,11 +1591,11 @@ <div class="pkt-input-prefix">Til</div>
         @blur=${(t) => {
-      var e, n;
-      if (this.onBlur(), t.target.value) {
+      var e, n, a;
+      if ((e = this.calRef.value) != null && e.contains(t.relatedTarget) || this.onBlur(), t.target.value) {
         this.manageValidity(t.target);
-        const a = t.target.value;
-        this.min && this.min > a ? this.internals.setValidity(
+        const r = t.target.value;
+        this.min && this.min > r ? this.internals.setValidity(
           { rangeUnderflow: !0 },
           this.strings.forms.messages.rangeUnderflow,
           t.target
-        ) : this.max && this.max < a && this.internals.setValidity(
+        ) : this.max && this.max < r && this.internals.setValidity(
           { rangeOverflow: !0 },
@@ -1604,4 +1605,4 @@ this.strings.forms.messages.rangeOverflow,
         );
-        const r = this.fromISOToDate(t.target.value);
-        r && this._value[1] !== this.formatISODate(r) && ((n = (e = this.calRef) == null ? void 0 : e.value) == null || n.handleDateSelect(r));
+        const i = this.fromISOToDate(t.target.value);
+        i && this._value[1] !== this.formatISODate(i) && ((a = (n = this.calRef) == null ? void 0 : n.value) == null || a.handleDateSelect(i));
       }
@@ -1612,3 +1613,3 @@ }}
     }}
-        ${O(this.inputRefTo)}
+        ${P(this.inputRefTo)}
       />
@@ -1618,3 +1619,3 @@ `;
   renderMultipleInput() {
-    return $`
+    return O`
       <input
@@ -1630,3 +1631,4 @@ class=${R(this.inputClasses)}
         @blur=${(t) => {
-      this.onBlur(), this.addToSelected(t);
+      var e;
+      (e = this.calRef.value) != null && e.contains(t.relatedTarget) || this.onBlur(), this.addToSelected(t);
     }}
@@ -1646,3 +1648,3 @@ @input=${(t) => {
     }}
-        ${O(this.inputRef)}
+        ${P(this.inputRef)}
       />
@@ -1652,3 +1654,3 @@ `;
   renderTags() {
-    return $`
+    return O`
       <div class="pkt-datepicker__tags" aria-live="polite">
@@ -1658,3 +1660,3 @@ ${this._value[0] ? fe(
       (t) => t,
-      (t) => $`
+      (t) => O`
                 <pkt-tag
@@ -1675,7 +1677,9 @@ .id="${this.id + t + "-tag"}"
   renderCalendar() {
-    return $`<div
+    return O`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
-      @focusout=${this.handleFocusOut}
+      @focusout=${(t) => {
+      this.calendarOpen && this.handleFocusOut(t);
+    }}
       id="${this.id}-popup"
-      ${O(this.popupRef)}
+      ${P(this.popupRef)}
     >
@@ -1697,4 +1701,6 @@ <pkt-calendar
     }}
-        @close=${this.hideCalendar}
-        ${O(this.calRef)}
+        @close=${() => {
+      this.onBlur(), this.hideCalendar();
+    }}
+        ${P(this.calRef)}
       ></pkt-calendar>
@@ -1704,3 +1710,3 @@ </div>`;
   render() {
-    return $`
+    return O`
       <pkt-input-wrapper
@@ -1734,3 +1740,3 @@ label="${this.label}"
               ?disabled=${this.disabled}
-              ${O(this.btnRef)}
+              ${P(this.btnRef)}
             >
@@ -1758,3 +1764,3 @@ <pkt-icon name="calendar"></pkt-icon>
   handleFocusOut(t) {
-    this.contains(t.target) || this.hideCalendar();
+    this.contains(t.target) || (this.onBlur(), this.hideCalendar());
   }
@@ -1761,0 +1767,0 @@ async showCalendar() {

dist/pkt-element.js

@@ -1,2 +0,2 @@
-import { P as a, a as m } from "./index-DFB6cAPd.js";
+import { P as a, a as m } from "./index-m5WP1NKD.js";
 export {
@@ -3,0 +3,0 @@ a as PktElement,

dist/pkt-icon.js

@@ -1,6 +0,6 @@
-import "./index-DFB6cAPd.js";
+import "./index-m5WP1NKD.js";
 import "./directive-DA0-wdk7.js";
-import { P as p } from "./index-BtB1fCeq.js";
+import { P as p } from "./index-exzYRW0z.js";
 export {
   p as PktIcon
 };

dist/pkt-index.js

@@ -1,6 +0,6 @@
-import { P as t } from "./index-erLPjF21.js";
+import { P as t } from "./index-Gx8odlcY.js";
 import { PktCard as p } from "./pkt-card.js";
 import { PktComponent as P } from "./pkt-component-template.js";
 import { PktDatepicker as x } from "./pkt-datepicker.js";
-import { P as f } from "./index-BtB1fCeq.js";
+import { P as f } from "./index-exzYRW0z.js";
 import { PktInputWrapper as s } from "./pkt-input-wrapper.js";
@@ -7,0 +7,0 @@ import { PktLink as c } from "./pkt-link.js";

dist/pkt-input-wrapper.js

@@ -1,5 +0,5 @@
-import { P as w, v as T, D as o, k as i, n as r } from "./index-DFB6cAPd.js";
-import { i as _, P as D, K as I } from "./ref-ClWSy3zg.js";
-import { a as f } from "./index-BtB1fCeq.js";
-import { R as c } from "./class-map-CQf6i-xX.js";
+import { P as w, v as T, D as o, k as i, n as r } from "./index-m5WP1NKD.js";
+import { i as _, P as D, K as I } from "./ref-bNNrgsqL.js";
+import { a as f } from "./index-exzYRW0z.js";
+import { R as c } from "./class-map-CL_lSLwn.js";
 import { t as S } from "./directive-DA0-wdk7.js";
@@ -6,0 +6,0 @@ /**

dist/pkt-link.js

@@ -1,6 +0,6 @@
-import { P as f, k, D as h, n as i } from "./index-DFB6cAPd.js";
-import { i as m, P as d, K as u } from "./ref-ClWSy3zg.js";
-import { R as P } from "./class-map-CQf6i-xX.js";
+import { P as f, k, D as h, n as i } from "./index-m5WP1NKD.js";
+import { i as m, P as d, K as u } from "./ref-bNNrgsqL.js";
+import { R as P } from "./class-map-CL_lSLwn.js";
 import { t as y } from "./directive-DA0-wdk7.js";
-import "./index-BtB1fCeq.js";
+import "./index-exzYRW0z.js";
 const g = "pkt-link", v = !0, _ = {
@@ -7,0 +7,0 @@ href: {

dist/pkt-messagebox.js

@@ -1,6 +0,6 @@
-import { P as m, D as c, k as h, n as o } from "./index-DFB6cAPd.js";
-import { i as b, P as f, K as k } from "./ref-ClWSy3zg.js";
-import { R as u } from "./class-map-CQf6i-xX.js";
+import { P as m, D as c, k as h, n as o } from "./index-m5WP1NKD.js";
+import { i as b, P as f, K as k } from "./ref-bNNrgsqL.js";
+import { R as u } from "./class-map-CL_lSLwn.js";
 import { t as y } from "./directive-DA0-wdk7.js";
-import "./index-BtB1fCeq.js";
+import "./index-exzYRW0z.js";
 var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (l, i, p, r) => {
@@ -7,0 +7,0 @@ for (var e = r > 1 ? void 0 : r ? v(i, p) : i, a = l.length - 1, n; a >= 0; a--)

dist/pkt-tag.js

@@ -1,6 +0,6 @@
-import { R as h } from "./class-map-CQf6i-xX.js";
+import { R as h } from "./class-map-CL_lSLwn.js";
 import { t as y } from "./directive-DA0-wdk7.js";
-import { r as d, P as g, k as p, D as k, n as i } from "./index-DFB6cAPd.js";
-import { i as m, P as b, K as f } from "./ref-ClWSy3zg.js";
-import "./index-BtB1fCeq.js";
+import { r as d, P as g, k as p, D as k, n as i } from "./index-m5WP1NKD.js";
+import { i as m, P as b, K as f } from "./ref-bNNrgsqL.js";
+import "./index-exzYRW0z.js";
 const S = "pkt-tag", _ = {
@@ -7,0 +7,0 @@ closeTag: {

package.json

 {
   "name": "@oslokommune/punkt-elements",
-  "version": "12.3.11",
+  "version": "12.3.12",
   "description": "Komponentbiblioteket til Punkt, et designsystem laget av Oslo Origo",
@@ -58,3 +58,3 @@ "homepage": "https://punkt.oslo.kommune.no",
   "license": "MIT",
-  "gitHead": "cab2d7b27cf3ba82a6ab36ca5b119a533e027a54"
+  "gitHead": "f255f1c88986bdb44f7c65523c96273e82b3171b"
 }

src/components/datepicker/index.ts

@@ -96,4 +96,6 @@ import { html, nothing, PropertyValues } from 'lit'
           !this.btnRef.value.contains(e.target as Node) &&
-          !(e.target as Element).closest('.pkt-calendar-popup')
+          !(e.target as Element).closest('.pkt-calendar-popup') &&
+          this.calendarOpen
         ) {
+          this.onBlur()
           this.hideCalendar()
@@ -261,4 +263,6 @@ }
         }}
-        @blur=${(e: Event) => {
-          this.onBlur()
+        @blur=${(e: FocusEvent) => {
+          if (!this.calRef.value?.contains(e.relatedTarget as Node)) {
+            this.onBlur()
+          }
           this.manageValidity(e.target as HTMLInputElement)
@@ -351,4 +355,6 @@ this.value = (e.target as HTMLInputElement).value
         }}
-        @blur=${(e: Event) => {
-          this.onBlur()
+        @blur=${(e: FocusEvent) => {
+          if (!this.calRef.value?.contains(e.relatedTarget as Node)) {
+            this.onBlur()
+          }
           if ((e.target as HTMLInputElement).value) {
@@ -398,4 +404,6 @@ this.manageValidity(e.target as HTMLInputElement)
         }}
-        @blur=${(e: Event) => {
-          this.onBlur()
+        @blur=${(e: FocusEvent) => {
+          if (!this.calRef.value?.contains(e.relatedTarget as Node)) {
+            this.onBlur()
+          }
           this.addToSelected(e)
@@ -452,3 +460,5 @@ }}
       class="pkt-calendar-popup pkt-${this.calendarOpen ? 'show' : 'hide'}"
-      @focusout=${this.handleFocusOut}
+      @focusout=${(e: FocusEvent) => {
+        if (this.calendarOpen) this.handleFocusOut(e)
+      }}
       id="${this.id}-popup"
@@ -483,3 +493,6 @@ ${ref(this.popupRef)}
         }}
-        @close=${this.hideCalendar}
+        @close=${() => {
+          this.onBlur()
+          this.hideCalendar()
+        }}
         ${ref(this.calRef)}
@@ -583,2 +596,3 @@ ></pkt-calendar>
     if (!this.contains(e.target as Node)) {
+      this.onBlur()
       this.hideCalendar()
@@ -585,0 +599,0 @@ }

src/components/element/index.ts

@@ -213,3 +213,3 @@ import { LitElement, PropertyValues } from 'lit'
   protected onFocus(): void {
-    this.dispatchEvent(new Event('focus'))
+    this.dispatchEvent(new FocusEvent('focus'))
   }
@@ -219,3 +219,3 @@
   protected onBlur(): void {
-    this.dispatchEvent(new Event('blur'))
+    this.dispatchEvent(new FocusEvent('blur'))
   }
@@ -225,3 +225,3 @@
   protected onInput(): void {
-    this.dispatchEvent(new Event('input'))
+    this.dispatchEvent(new InputEvent('input'))
   }
@@ -228,0 +228,0 @@

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

349174

increased by0.33%

Lines of code

8012

increased by0.28%

No dependency changes