@oslokommune/punkt-elements - npm Package Compare versions

Comparing version 12.3.10 to 12.3.11

dist/index.d.ts

@@ -299,3 +299,6 @@ import { LitElement } from 'lit';
     protected clearInputValue(): void;
-    protected onInput(value: string | string[]): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    protected onInput(): void;
+    protected onChange(value: string | string[]): void;
     protected firstUpdated(_changedProperties: PropertyValues): void;
@@ -302,0 +305,0 @@ }

dist/pkt-alert.js

@@ -1,6 +0,6 @@
-import { P as f, D as a, k as p, n as i } from "./index-BoxUN9GL.js";
-import { i as d, P as k, K as u } from "./ref-DzpbHCb_.js";
-import { R as y } from "./class-map-DnAEF9tj.js";
+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 { t as v } from "./directive-DA0-wdk7.js";
-import "./index-CsKoXqeT.js";
+import "./index-BtB1fCeq.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-BoxUN9GL.js";
+import "./index-DFB6cAPd.js";
 import "./converters-DNCwIFwr.js";
 import "./directive-DA0-wdk7.js";
-import "./class-map-DnAEF9tj.js";
-import { P as e } from "./index-BAKMcM4b.js";
-import "./index-CsKoXqeT.js";
+import "./class-map-CQf6i-xX.js";
+import { P as e } from "./index-erLPjF21.js";
+import "./index-BtB1fCeq.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-BoxUN9GL.js";
-import { i as h, P as m, K as u } from "./ref-DzpbHCb_.js";
-import { R as y } from "./class-map-DnAEF9tj.js";
+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 { t as f } from "./directive-DA0-wdk7.js";
-import "./index-CsKoXqeT.js";
+import "./index-BtB1fCeq.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-BoxUN9GL.js";
+import { P as m, k as h, t as u, n } from "./index-DFB6cAPd.js";
 import { t as f } from "./directive-DA0-wdk7.js";
-import { i as d, P as v, K as c } from "./ref-DzpbHCb_.js";
-import { R as g } from "./class-map-DnAEF9tj.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 { 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,11 +0,11 @@
-import { R as K, a as z, k as O, D as B, n as y } from "./index-BoxUN9GL.js";
+import { R as K, a as z, k as $, D as B, n as y } from "./index-DFB6cAPd.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 $, a as S, p as F, d as rt, i as C, K as P } from "./ref-DzpbHCb_.js";
-import { R } from "./class-map-DnAEF9tj.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 { 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-BAKMcM4b.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 "./pkt-input-wrapper.js";
-import "./index-CsKoXqeT.js";
+import "./index-BtB1fCeq.js";
 import "./pkt-tag.js";
-function Y(t) {
+function I(t) {
   return it(t, { weekStartsOn: 1 });
@@ -16,5 +16,5 @@ }
   a.setFullYear(n + 1, 0, 4), a.setHours(0, 0, 0, 0);
-  const r = Y(a), i = _(t, 0);
+  const r = I(a), i = _(t, 0);
   i.setFullYear(n, 0, 4), i.setHours(0, 0, 0, 0);
-  const s = Y(i);
+  const s = I(i);
   return e.getTime() >= r.getTime() ? n + 1 : e.getTime() >= s.getTime() ? n : n - 1;
@@ -46,3 +46,3 @@ }
   const e = U(t), n = _(t, 0);
-  return n.setFullYear(e, 0, 4), n.setHours(0, 0, 0, 0), Y(n);
+  return n.setFullYear(e, 0, 4), n.setHours(0, 0, 0, 0), I(n);
 }
@@ -129,3 +129,3 @@ function ft(t) {
 };
-function q(t) {
+function F(t) {
   return (e = {}) => {
@@ -152,11 +152,11 @@ const n = e.width ? String(e.width) : t.defaultWidth;
 }, kt = {
-  date: q({
+  date: F({
     formats: vt,
     defaultWidth: "full"
   }),
-  time: q({
+  time: F({
     formats: wt,
     defaultWidth: "full"
   }),
-  dateTime: q({
+  dateTime: F({
     formats: bt,
@@ -188,11 +188,11 @@ defaultWidth: "full"
 }
-const Ot = {
+const $t = {
   narrow: ["B", "A"],
   abbreviated: ["BC", "AD"],
   wide: ["Before Christ", "Anno Domini"]
-}, $t = {
+}, Pt = {
   narrow: ["1", "2", "3", "4"],
   abbreviated: ["Q1", "Q2", "Q3", "Q4"],
   wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"]
-}, Pt = {
+}, Ot = {
   narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
@@ -317,7 +317,7 @@ abbreviated: [
   era: E({
-    values: Ot,
+    values: $t,
     defaultWidth: "wide"
   }),
   quarter: E({
-    values: $t,
+    values: Pt,
     defaultWidth: "wide",
@@ -327,3 +327,3 @@ argumentCallback: (t) => t - 1
   month: E({
-    values: Pt,
+    values: Ot,
     defaultWidth: "wide"
@@ -382,7 +382,7 @@ }),
 }
-const Yt = /^(\d+)(th|st|nd|rd)?/i, Ft = /\d+/i, qt = {
+const It = /^(\d+)(th|st|nd|rd)?/i, Yt = /\d+/i, Ft = {
   narrow: /^(b|a)/i,
   abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i,
   wide: /^(before christ|before common era|anno domini|common era)/i
-}, It = {
+}, qt = {
   any: [/^b/i, /^(a|c)/i]
@@ -452,10 +452,10 @@ }, Nt = {
   ordinalNumber: _t({
-    matchPattern: Yt,
-    parsePattern: Ft,
+    matchPattern: It,
+    parsePattern: Yt,
     valueCallback: (t) => parseInt(t, 10)
   }),
   era: W({
-    matchPatterns: qt,
+    matchPatterns: Ft,
     defaultMatchWidth: "wide",
-    parsePatterns: It,
+    parsePatterns: qt,
     defaultParseWidth: "any"
@@ -505,3 +505,3 @@ }),
 function Jt(t) {
-  const e = k(t), n = +Y(e) - +ht(e);
+  const e = k(t), n = +I(e) - +ht(e);
   return Math.round(n / ot) + 1;
@@ -1214,6 +1214,6 @@ }
     else if (r[m] === null) m--;
-    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 (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 (v === void 0 && (v = X(s, h, u), x = X(d, l, m)), v.has(d[l])) if (v.has(d[m])) {
@@ -1223,14 +1223,14 @@ const c = x.get(s[h]), M = c !== void 0 ? r[c] : null;
         const N = S(t, r[l]);
-        $(N, i[h]), g[h] = N;
-      } else g[h] = $(M, i[h]), S(t, r[l], M), r[c] = null;
+        P(N, i[h]), g[h] = N;
+      } else g[h] = P(M, i[h]), S(t, r[l], M), r[c] = null;
       h++;
-    } else F(r[m]), m--;
-    else F(r[l]), l++;
+    } else Y(r[m]), m--;
+    else Y(r[l]), l++;
     for (; h <= u; ) {
       const c = S(t, g[u + 1]);
-      $(c, i[h]), g[h++] = c;
+      P(c, i[h]), g[h++] = c;
     }
     for (; l <= m; ) {
       const c = r[l++];
-      c !== null && F(c);
+      c !== null && Y(c);
     }
@@ -1426,3 +1426,3 @@ return this.ut = s, rt(t, g), K;
 };
-const I = (t) => new Promise((e) => setTimeout(e, t));
+const q = (t) => new Promise((e) => setTimeout(e, t));
 let f = class extends z {
@@ -1462,3 +1462,3 @@ constructor() {
       (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();
-    }), 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 I(20), this.handleCalendarPosition());
+    }), 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());
   }
@@ -1490,3 +1490,3 @@ disconnectedCallback() {
   renderInput() {
-    return O`
+    return $`
       <input
@@ -1507,7 +1507,10 @@ class="${R(this.inputClasses)}"
     }}
+        @input=${(t) => {
+      this.onInput(), t.stopImmediatePropagation();
+    }}
         @focus=${() => {
-      this.isMobileSafari && this.showCalendar();
+      this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(t) => {
-      this.manageValidity(t.target), this.value = t.target.value;
+      this.onBlur(), this.manageValidity(t.target), this.value = t.target.value;
     }}
@@ -1517,3 +1520,3 @@ @change=${(t) => {
     }}
-        ${P(this.inputRef)}
+        ${O(this.inputRef)}
       />
@@ -1523,3 +1526,3 @@ `;
   renderRangeInput() {
-    return O`
+    return $`
       <div class="pkt-input-prefix">Fra</div>
@@ -1541,4 +1544,7 @@ <input
     }}
+        @input=${(t) => {
+      this.onInput(), t.stopImmediatePropagation();
+    }}
         @focus=${() => {
-      this.isMobileSafari && this.showCalendar();
+      this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
@@ -1556,3 +1562,3 @@ @blur=${(t) => {
     }}
-        ${P(this.inputRef)}
+        ${O(this.inputRef)}
       />
@@ -1575,8 +1581,11 @@ <div class="pkt-input-prefix">Til</div>
     }}
+        @input=${(t) => {
+      this.onInput(), t.stopImmediatePropagation();
+    }}
         @focus=${() => {
-      this.isMobileSafari && this.showCalendar();
+      this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
         @blur=${(t) => {
       var e, n;
-      if (t.target.value) {
+      if (this.onBlur(), t.target.value) {
         this.manageValidity(t.target);
@@ -1600,3 +1609,3 @@ const a = t.target.value;
     }}
-        ${P(this.inputRefTo)}
+        ${O(this.inputRefTo)}
       />
@@ -1606,3 +1615,3 @@ `;
   renderMultipleInput() {
-    return O`
+    return $`
       <input
@@ -1618,6 +1627,9 @@ class=${R(this.inputClasses)}
         @blur=${(t) => {
-      this.addToSelected(t);
+      this.onBlur(), this.addToSelected(t);
     }}
+        @input=${(t) => {
+      this.onInput(), t.stopImmediatePropagation();
+    }}
         @focus=${() => {
-      this.isMobileSafari && this.showCalendar();
+      this.onFocus(), this.isMobileSafari && this.showCalendar();
     }}
@@ -1631,3 +1643,3 @@ @keydown=${(t) => {
     }}
-        ${P(this.inputRef)}
+        ${O(this.inputRef)}
       />
@@ -1637,3 +1649,3 @@ `;
   renderTags() {
-    return O`
+    return $`
       <div class="pkt-datepicker__tags" aria-live="polite">
@@ -1643,3 +1655,3 @@ ${this._value[0] ? fe(
       (t) => t,
-      (t) => O`
+      (t) => $`
                 <pkt-tag
@@ -1660,7 +1672,7 @@ .id="${this.id + t + "-tag"}"
   renderCalendar() {
-    return O`<div
+    return $`<div
       class="pkt-calendar-popup pkt-${this.calendarOpen ? "show" : "hide"}"
       @focusout=${this.handleFocusOut}
       id="${this.id}-popup"
-      ${P(this.popupRef)}
+      ${O(this.popupRef)}
     >
@@ -1683,3 +1695,3 @@ <pkt-calendar
         @close=${this.hideCalendar}
-        ${P(this.calRef)}
+        ${O(this.calRef)}
       ></pkt-calendar>
@@ -1689,3 +1701,3 @@ </div>`;
   render() {
-    return O`
+    return $`
       <pkt-input-wrapper
@@ -1719,3 +1731,3 @@ label="${this.label}"
               ?disabled=${this.disabled}
-              ${P(this.btnRef)}
+              ${O(this.btnRef)}
             >
@@ -1747,3 +1759,3 @@ <pkt-icon name="calendar"></pkt-icon>
     var t;
-    this.calendarOpen = !0, await I(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
+    this.calendarOpen = !0, await q(20), this.handleCalendarPosition(), this.isMobileSafari && ((t = this.calRef.value) == null || t.focusOnCurrentDate());
   }
@@ -1755,3 +1767,3 @@ hideCalendar() {
     var e;
-    t.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar(), await I(20), this.isMobileSafari && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
+    t.preventDefault(), this.calendarOpen ? this.hideCalendar() : this.showCalendar(), await q(20), this.isMobileSafari && ((e = this.calRef.value) == null || e.focusOnCurrentDate());
   }
@@ -1758,0 +1770,0 @@ };

dist/pkt-element.js

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

dist/pkt-icon.js

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

dist/pkt-index.js

@@ -1,6 +0,6 @@
-import { P as t } from "./index-BAKMcM4b.js";
+import { P as t } from "./index-erLPjF21.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-CsKoXqeT.js";
+import { P as f } from "./index-BtB1fCeq.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-BoxUN9GL.js";
-import { i as _, P as D, K as I } from "./ref-DzpbHCb_.js";
-import { a as f } from "./index-CsKoXqeT.js";
-import { R as c } from "./class-map-DnAEF9tj.js";
+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 { 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-BoxUN9GL.js";
-import { i as m, P as d, K as u } from "./ref-DzpbHCb_.js";
-import { R as P } from "./class-map-DnAEF9tj.js";
+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 { t as y } from "./directive-DA0-wdk7.js";
-import "./index-CsKoXqeT.js";
+import "./index-BtB1fCeq.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-BoxUN9GL.js";
-import { i as b, P as f, K as k } from "./ref-DzpbHCb_.js";
-import { R as u } from "./class-map-DnAEF9tj.js";
+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 { t as y } from "./directive-DA0-wdk7.js";
-import "./index-CsKoXqeT.js";
+import "./index-BtB1fCeq.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-DnAEF9tj.js";
+import { R as h } from "./class-map-CQf6i-xX.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-BoxUN9GL.js";
-import { i as m, P as b, K as f } from "./ref-DzpbHCb_.js";
-import "./index-CsKoXqeT.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";
 const S = "pkt-tag", _ = {
@@ -7,0 +7,0 @@ closeTag: {

package.json

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

src/components/datepicker/index.ts

@@ -250,3 +250,8 @@ import { html, nothing, PropertyValues } from 'lit'
         }}
+        @input=${(e: Event) => {
+          this.onInput()
+          e.stopImmediatePropagation()
+        }}
         @focus=${() => {
+          this.onFocus()
           if (this.isMobileSafari) {
@@ -257,2 +262,3 @@ this.showCalendar()
         @blur=${(e: Event) => {
+          this.onBlur()
           this.manageValidity(e.target as HTMLInputElement)
@@ -289,3 +295,8 @@ this.value = (e.target as HTMLInputElement).value
         }}
+        @input=${(e: Event) => {
+          this.onInput()
+          e.stopImmediatePropagation()
+        }}
         @focus=${() => {
+          this.onFocus()
           if (this.isMobileSafari) {
@@ -331,3 +342,8 @@ this.showCalendar()
         }}
+        @input=${(e: Event) => {
+          this.onInput()
+          e.stopImmediatePropagation()
+        }}
         @focus=${() => {
+          this.onFocus()
           if (this.isMobileSafari) {
@@ -338,2 +354,3 @@ this.showCalendar()
         @blur=${(e: Event) => {
+          this.onBlur()
           if ((e.target as HTMLInputElement).value) {
@@ -384,5 +401,11 @@ this.manageValidity(e.target as HTMLInputElement)
         @blur=${(e: Event) => {
+          this.onBlur()
           this.addToSelected(e)
         }}
+        @input=${(e: Event) => {
+          this.onInput()
+          e.stopImmediatePropagation()
+        }}
         @focus=${() => {
+          this.onFocus()
           if (this.isMobileSafari) {
@@ -389,0 +412,0 @@ this.showCalendar()

src/components/element/index.ts

@@ -191,3 +191,3 @@ import { LitElement, PropertyValues } from 'lit'
     } else if (this.value && this.value.toString() !== _old?.toString()) {
-      this.onInput(this.value)
+      this.onChange(this.value)
     }
@@ -212,4 +212,19 @@ this.updateComplete.then(() => this.requestUpdate())
 
+  // When user enters the input, we need to push that event out to the form
+  protected onFocus(): void {
+    this.dispatchEvent(new Event('focus'))
+  }
+
+  // And also when the user leaves the input...
+  protected onBlur(): void {
+    this.dispatchEvent(new Event('blur'))
+  }
+
+  // Trigger this when user types in the input
+  protected onInput(): void {
+    this.dispatchEvent(new Event('input'))
+  }
+
   // Trigger this when you want to set the value of the input out to the form
-  protected onInput(value: string | string[]): void {
+  protected onChange(value: string | string[]): void {
     if (!this.touched) {
@@ -239,5 +254,2 @@ this.touched = true
 
-    // This should be moved to a separate trigger for text inputs
-    this.dispatchEvent(new Event('input'))
-
     // Change events
@@ -244,0 +256,0 @@ this.dispatchEvent(new Event('change'))

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

348013

increased by0.65%

Lines of code

7990

increased by0.81%

No dependency changes