npm - kanto-ds - Versions diffs - 1.2.0 → 1.3.0 - Mend

kanto-ds 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/dist/components/forms/kt-input/kt-input.js CHANGED Viewed

@@ -1,30 +1,31 @@
-import { css as v, nothing as n, html as l } from "lit";
-import { query as w, state as p, property as a } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { live as x } from "lit/directives/live.js";
-import { K as m, d as $ } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { e as u } from "../../../chunks/events-Bjl5Zmmq.js";
-import { a as C, s as b, b as k } from "../../../chunks/form-control-CxjBTt1c.js";
+import { css as w, nothing as n, html as l } from "lit";
+import { query as x, state as y, property as a } from "lit/decorators.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { live as $ } from "lit/directives/live.js";
+import { K as b, d as C } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { e as c } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as k, s as g, b as P } from "../../../chunks/form-control-CxjBTt1c.js";
+import { s as d } from "../../../chunks/index-fzPIgxe2.js";
 import "../../core/kt-icon/kt-icon.js";
-const P = [
+const O = [
   { id: "us", name: "United States", dialCode: "1", format: "123-456-7890" },
   { id: "gb", name: "United Kingdom", dialCode: "44", format: "7123 456789" },
   { id: "de", name: "Germany", dialCode: "49", format: "1234 567890" },
   { id: "fr", name: "France", dialCode: "33", format: "1 23 45 67 89" },
   { id: "be", name: "Belgium", dialCode: "32", format: "1 23 45 67 89" },
   { id: "ch", name: "Switzerland", dialCode: "41", format: "12 345 67 89" }
-], O = 127462, S = 65;
-function g(s) {
+], V = 127462, S = 65;
+function v(s) {
   return /^[a-z]{2}$/i.test(s) ? String.fromCodePoint(
     ...[...s.toUpperCase()].map(
-      (e) => O + e.charCodeAt(0) - S
+      (e) => V + e.charCodeAt(0) - S
     )
   ) : "";
 }
-function V(s) {
+function z(s) {
   return s.replace(/\D/g, "");
 }
-function z(s, e) {
+function E(s, e) {
   if (!s) return "";
   const r = [];
   let t = s;
@@ -32,9 +33,9 @@ function z(s, e) {
     for (r.push(t.slice(0, 1)), t = t.slice(1); t; )
       r.push(t.slice(0, 2)), t = t.slice(2);
   else if (e?.id === "us" || e?.id === "ca") {
-    for (const d of [3, 3, 4]) {
+    for (const u of [3, 3, 4]) {
       if (!t) break;
-      r.push(t.slice(0, d)), t = t.slice(d);
+      r.push(t.slice(0, u)), t = t.slice(u);
     }
     t && r.push(t);
   } else
@@ -42,21 +43,21 @@ function z(s, e) {
       r.push(t.slice(0, 3)), t = t.slice(3);
   return r.filter(Boolean).join(" ");
 }
-function E(s, e) {
+function A(s, e) {
   const r = e.trim().toLowerCase();
   return r ? s.filter(
     (t) => t.name.toLowerCase().includes(r) || t.dialCode.includes(r.replace(/^\+/, "")) || t.id === r
   ) : s;
 }
-var A = Object.defineProperty, o = (s, e, r, t) => {
-  for (var d = void 0, h = s.length - 1, y; h >= 0; h--)
-    (y = s[h]) && (d = y(e, r, d) || d);
-  return d && A(e, r, d), d;
+var B = Object.defineProperty, o = (s, e, r, t) => {
+  for (var u = void 0, p = s.length - 1, f; p >= 0; p--)
+    (f = s[p]) && (u = f(e, r, u) || u);
+  return u && B(e, r, u), u;
 };
-const c = 18;
-class i extends m {
+const h = 18;
+class i extends b {
   constructor() {
-    super(...arguments), this.internals = null, this.passwordVisible = !1, this.countryOpen = !1, this.countryQuery = "", this.value = "", this.name = "", this.type = "text", this.placeholder = "", this.size = "medium", this.disabled = !1, this.readonly = !1, this.required = !1, this.icon = "", this.error = "", this.clearable = !0, this.label = "", this.autocomplete = "", this.countries = P, this.country = "us", this.defaultValue = "", this.closeCountryPanel = (e) => {
+    super(...arguments), this.internals = null, this.passwordVisible = !1, this.countryOpen = !1, this.countryQuery = "", this.value = "", this.name = "", this.type = "text", this.placeholder = "", this.size = "medium", this.disabled = !1, this.readonly = !1, this.required = !1, this.icon = "", this.error = "", this.clearable = !0, this.label = "", this.autocomplete = "", this.countries = O, this.country = "us", this.defaultValue = "", this.closeCountryPanel = (e) => {
       e.composedPath().includes(this) || (this.countryOpen = !1);
     };
   }
@@ -65,8 +66,8 @@ class i extends m {
   }
   static {
     this.styles = [
-      m.styles,
-      v`
+      b.styles,
+      w`
       :host {
         display: block;
       }
@@ -296,14 +297,14 @@ class i extends m {
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("pointerdown", this.closeCountryPanel), this.internals ??= C(this), this.defaultValue = this.value, b(this.internals, this.formValue);
+    super.connectedCallback(), document.addEventListener("pointerdown", this.closeCountryPanel), this.internals ??= k(this), this.defaultValue = this.value, g(this.internals, this.formValue);
   }
   willUpdate(e) {
-    (e.has("value") || e.has("required") || e.has("error") || e.has("country")) && (b(this.internals, this.value), this.refreshValidity());
+    (e.has("value") || e.has("required") || e.has("error") || e.has("country") || this.stringsChanged(e)) && (g(this.internals, this.value), this.refreshValidity());
   }
   refreshValidity() {
-    const e = this.required && this.value.length === 0, r = this.error || (e ? "This field is required." : "");
-    k(
+    const e = this.required && this.value.length === 0, r = this.error || (e ? d().required : "");
+    P(
       this.internals,
       { valueMissing: e, customError: !!this.error },
       r
@@ -346,7 +347,7 @@ class i extends m {
     return !this.isPhone || !this.value ? this.value : `+${this.selectedCountry?.dialCode ?? ""}${this.value}`;
   }
   get displayValue() {
-    return this.isPhone ? z(this.value, this.selectedCountry) : this.value;
+    return this.isPhone ? E(this.value, this.selectedCountry) : this.value;
   }
   get showClear() {
     return this.clearable && this.value.length > 0 && !this.readonly && !this.disabled;
@@ -356,53 +357,53 @@ class i extends m {
   }
   onInput(e) {
     const r = e.target.value;
-    this.value = this.isPhone ? V(r) : r, u(this, "kt-input", { value: this.value });
+    this.value = this.isPhone ? z(r) : r, c(this, "kt-input", { value: this.value });
   }
   toggleCountryPanel() {
     this.countryOpen = !this.countryOpen, this.countryQuery = "";
   }
   selectCountry(e) {
-    this.country = e.id, this.countryOpen = !1, this.countryQuery = "", u(this, "kt-country-change", { country: e.id, dialCode: e.dialCode }), this.focus();
+    this.country = e.id, this.countryOpen = !1, this.countryQuery = "", c(this, "kt-country-change", { country: e.id, dialCode: e.dialCode }), this.focus();
   }
   onCountryKeyDown(e) {
     e.key === "Escape" && this.countryOpen && (e.stopPropagation(), this.countryOpen = !1, this.shadowRoot?.querySelector(".country")?.focus());
   }
   renderCountryPicker() {
-    const e = this.selectedCountry, r = E(this.countries, this.countryQuery);
+    const e = this.selectedCountry, r = A(this.countries, this.countryQuery);
     return l`<button
         type="button"
         class="country"
         aria-haspopup="listbox"
         aria-expanded=${this.countryOpen ? "true" : "false"}
-        aria-label=${`Country code: ${e?.name ?? "none"}`}
+        aria-label=${d().countryCode(e?.name)}
         ?disabled=${this.disabled || this.readonly}
         @click=${this.toggleCountryPanel}
       >
-        <span aria-hidden="true">${g(this.country)}</span>
+        <span aria-hidden="true">${v(this.country)}</span>
         <span class="dial">+${e?.dialCode ?? ""}</span>
-        <span class=${f({ chevron: !0, open: this.countryOpen })}>
+        <span class=${m({ chevron: !0, open: this.countryOpen })}>
           <kt-icon name="chevron-down" size="14"></kt-icon>
         </span>
       </button>
       ${this.countryOpen ? l`<div class="country-panel" @pointerdown=${(t) => t.stopPropagation()}>
               <input
                 class="country-search"
-                placeholder="Search country or dial code"
+                placeholder=${d().searchCountry}
                 .value=${this.countryQuery}
-                aria-label="Search country or dial code"
+                aria-label=${d().searchCountry}
                 @input=${(t) => {
       this.countryQuery = t.target.value;
     }}
               />
               <ul class="country-list" role="listbox">
-                ${r.length === 0 ? l`<li class="country-empty">No country found</li>` : r.map(
+                ${r.length === 0 ? l`<li class="country-empty">${d().noCountry}</li>` : r.map(
       (t) => l`<li
                             class="country-item"
                             role="option"
                             aria-selected=${t.id === this.country ? "true" : "false"}
                             @click=${() => this.selectCountry(t)}
                           >
-                            <span aria-hidden="true">${g(t.id)}</span>
+                            <span aria-hidden="true">${v(t.id)}</span>
                             <span class="country-name">${t.name}</span>
                             <span class="dial">+${t.dialCode}</span>
                           </li>`
@@ -411,10 +412,10 @@ class i extends m {
             </div>` : n}`;
   }
   onChange(e) {
-    e.stopPropagation(), u(this, "kt-change", { value: this.value });
+    e.stopPropagation(), c(this, "kt-change", { value: this.value });
   }
   clear() {
-    this.value = "", u(this, "kt-clear"), u(this, "kt-input", { value: "" }), u(this, "kt-change", { value: "" }), this.focus();
+    this.value = "", c(this, "kt-clear"), c(this, "kt-input", { value: "" }), c(this, "kt-change", { value: "" }), this.focus();
   }
   togglePassword() {
     this.passwordVisible = !this.passwordVisible;
@@ -427,7 +428,7 @@ class i extends m {
     const e = this.type === "password" || !!this.icon || !!this.error || this.showClear;
     return l`<div
       part="base"
-      class=${f({
+      class=${m({
       field: !0,
       [this.size]: !0,
       error: !!this.error,
@@ -446,7 +447,7 @@ class i extends m {
         part="control"
         type=${this.resolvedType}
         name=${this.name || n}
-        .value=${x(this.displayValue)}
+        .value=${$(this.displayValue)}
         placeholder=${this.placeholder || this.selectedCountry?.format || n}
         autocomplete=${this.autocomplete || n}
         inputmode=${this.isPhone ? "tel" : n}
@@ -466,44 +467,44 @@ class i extends m {
                       type="button"
                       class="icon-button"
                       tabindex="-1"
-                      aria-label=${this.passwordVisible ? "Hide password" : "Show password"}
+                      aria-label=${this.passwordVisible ? d().hidePassword : d().showPassword}
                       @click=${this.togglePassword}
                     >
                       <kt-icon
                         name=${this.passwordVisible ? "eye-off" : "eye"}
-                        size=${c}
+                        size=${h}
                       ></kt-icon>
                     </button>` : n}
               ${this.icon ? l`<span class="adornment">
-                      <kt-icon name=${this.icon} size=${c}></kt-icon>
+                      <kt-icon name=${this.icon} size=${h}></kt-icon>
                     </span>` : n}
               ${this.error ? l`<span class="adornment error-icon" title=${this.error}>
-                      <kt-icon name="circle-alert" size=${c} label=${this.error}></kt-icon>
+                      <kt-icon name="circle-alert" size=${h} label=${this.error}></kt-icon>
                     </span>` : n}
               ${this.showClear ? l`<button
                       type="button"
                       class="icon-button clear"
                       tabindex="-1"
-                      aria-label="Clear"
+                      aria-label=${d().clear}
                       @click=${this.clear}
                     >
-                      <kt-icon name="x" size=${c}></kt-icon>
+                      <kt-icon name="x" size=${h}></kt-icon>
                     </button>` : n}
             </div>` : n}
     </div>`;
   }
 }
 o([
-  w("input")
+  x("input")
 ], i.prototype, "input");
 o([
-  p()
+  y()
 ], i.prototype, "passwordVisible");
 o([
-  p()
+  y()
 ], i.prototype, "countryOpen");
 o([
-  p()
+  y()
 ], i.prototype, "countryQuery");
 o([
   a({ type: String })
@@ -553,7 +554,7 @@ o([
 o([
   a({ type: String })
 ], i.prototype, "country");
-$("kt-input", i);
+C("kt-input", i);
 export {
   i as KtInput
 };

package/dist/components/forms/kt-input/kt-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-input.js","sources":["../../../../src/internal/countries.ts","../../../../src/components/forms/kt-input/kt-input.ts"],"sourcesContent":["/*\n Country data for the phone mode of `<kt-input>`.\n \n Deliberately a short list rather than all 195: an exhaustive picker is a\n * worse experience than a handful of entries and a search box. Applications\n * that need more pass their own list to the element.\n /\n\nexport interface KtCountry {\n /* ISO 3166-1 alpha-2, lowercase. /\n readonly id: string;\n readonly name: string;\n /* International dialling code, without the leading `+`. /\n readonly dialCode: string;\n /* Placeholder showing the local format. /\n readonly format: string;\n}\n\nexport const DEFAULT_COUNTRIES: readonly KtCountry[] = [\n { id: 'us', name: 'United States', dialCode: '1', format: '123-456-7890' },\n { id: 'gb', name: 'United Kingdom', dialCode: '44', format: '7123 456789' },\n { id: 'de', name: 'Germany', dialCode: '49', format: '1234 567890' },\n { id: 'fr', name: 'France', dialCode: '33', format: '1 23 45 67 89' },\n { id: 'be', name: 'Belgium', dialCode: '32', format: '1 23 45 67 89' },\n { id: 'ch', name: 'Switzerland', dialCode: '41', format: '12 345 67 89' },\n];\n\nconst REGIONAL_INDICATOR_A = 0x1f1e6;\nconst LETTER_A = 'A'.charCodeAt(0);\n\n/\n The flag emoji for a country code, built from regional indicator symbols.\n \n This is the one place emoji appear in a Kanto interface. They are here\n * because no flag icon set ships with the system, and a country picker without\n * flags is markedly slower to scan.\n /\nexport function flagEmoji(id: string): string {\n if (!/^[a-z]{2}$/i.test(id)) return '';\n return String.fromCodePoint(\n ...[...id.toUpperCase()].map(\n (letter) => REGIONAL_INDICATOR_A + letter.charCodeAt(0) - LETTER_A,\n ),\n );\n}\n\n/* Keeps only the digits — what gets stored and submitted. /\nexport function digitsOnly(value: string): string {\n return value.replace(/\\D/g, '');\n}\n\n/\n Groups digits for display, per country.\n \n North American numbers read as `123 456 7890`, French ones as\n * `6 12 34 56 78` — a single leading digit, then pairs. Everything else falls\n * back to groups of three.\n /\nexport function formatNationalNumber(digits: string, country: KtCountry \| undefined): string {\n if (!digits) return '';\n\n const groups: string[] = [];\n let rest = digits;\n\n if (country?.id === 'fr') {\n groups.push(rest.slice(0, 1));\n rest = rest.slice(1);\n while (rest) {\n groups.push(rest.slice(0, 2));\n rest = rest.slice(2);\n }\n } else if (country?.id === 'us' \|\| country?.id === 'ca') {\n for (const size of [3, 3, 4]) {\n if (!rest) break;\n groups.push(rest.slice(0, size));\n rest = rest.slice(size);\n }\n if (rest) groups.push(rest);\n } else {\n while (rest) {\n groups.push(rest.slice(0, 3));\n rest = rest.slice(3);\n }\n }\n\n return groups.filter(Boolean).join(' ');\n}\n\n/* Filters by name, dial code or country code — whatever the user types. /\nexport function searchCountries(\n countries: readonly KtCountry[],\n query: string,\n): readonly KtCountry[] {\n const needle = query.trim().toLowerCase();\n if (!needle) return countries;\n\n return countries.filter(\n (country) =>\n country.name.toLowerCase().includes(needle) \|\|\n country.dialCode.includes(needle.replace(/^\\+/, '')) \|\|\n country.id === needle,\n );\n}\n","import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport {\n attachFormInternals,\n setFormValue,\n setValidity,\n type UsableInternals,\n} from '#internal/form-control';\nimport {\n DEFAULT_COUNTRIES,\n digitsOnly,\n flagEmoji,\n formatNationalNumber,\n searchCountries,\n type KtCountry,\n} from '#internal/countries';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtInputSize = 'small' \| 'medium' \| 'large';\n\n/* Icon size inside a field, at every field size. /\nconst ICON_SIZE = 18;\n\n/\n A single-line text field.\n \n Borderless by design: the field is a fill on `--color-dark-12` that gains a\n * 2px outline — grey on hover, primary on focus, danger on error. An outline\n * sits outside the box, so nothing reflows when the state changes.\n \n The element is form-associated: it serialises into `FormData` under its\n * `name`, resets with the form, and reports validity like a native input.\n \n @element kt-input\n \n @csspart base - The field container.\n * @csspart control - The native `<input>`.\n * @csspart actions - The trailing icon row.\n \n @fires kt-input - On every keystroke. `detail: { value }`.\n * @fires kt-change - When the value is committed (blur or Enter). `detail: { value }`.\n * @fires kt-clear - The clear button was pressed.\n \n @example\n * ```html\n * <kt-input placeholder=\"Search everything...\" icon=\"search\"></kt-input>\n * <kt-input type=\"password\" name=\"password\"></kt-input>\n * <kt-input error=\"Invalid email address\" value=\"not-an-address\"></kt-input>\n * ```\n /\nexport class KtInput extends KtElement {\n static readonly formAssociated = true;\n\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .field {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 100%;\n height: var(--button-height);\n padding: 0 var(--button-padding-x);\n gap: var(--gap-button);\n background-color: var(--surface-field);\n border-radius: var(--radius-input);\n / A resting hairline. A field is a fill on --surface-field, which is\n one ramp step from the page in dark and almost the same colour in\n light — so on a card or inside a modal it simply disappeared and\n read as a bare native control.\n\n A border rather than an outline, because the control inside fills\n the field exactly and a coincident outline is painted over by the\n native widget. A border insets the control by its own width, so it\n cannot be covered. box-sizing: border-box keeps the outer size.\n\n The hover and focus rings stay outlines on top of it, and the\n transparent resting outline is what they animate from: without it\n outline-color starts at the initial value, which resolves to the\n text colour, and hover flashed near-white before settling. /\n border: var(--border-width) solid var(--border-field);\n outline: var(--outline-width) solid transparent;\n transition: outline-color var(--duration-instant);\n }\n\n / Outline, never border: it sits outside the box, so hover and focus\n change nothing about the layout. /\n .field:hover {\n outline: var(--outline-width) solid var(--color-text-700);\n }\n .field:focus-within {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n\n .small {\n height: var(--button-height-small);\n }\n .large {\n height: var(--button-height-large);\n }\n\n .error,\n .error:hover,\n .error:focus-within {\n outline: var(--outline-width) solid var(--color-danger-base);\n }\n .error input {\n color: var(--color-danger-text);\n }\n\n .disabled {\n background-color: var(--color-dark-14);\n pointer-events: none;\n }\n .disabled input {\n color: var(--text-disabled);\n }\n\n input {\n width: 100%;\n min-width: 0;\n padding: 0;\n color: var(--text-body);\n font: var(--font-input);\n background: transparent;\n border: none;\n outline: none;\n }\n\n input::placeholder {\n color: var(--text-muted);\n }\n\n / The clear button is ours; the browser's is redundant. /\n input::-webkit-search-cancel-button {\n display: none;\n }\n\n .actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--gap-button);\n }\n\n .icon-button {\n display: inline-flex;\n align-items: center;\n padding: 0;\n color: var(--text-body);\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .icon-button:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n .clear {\n transition: transform var(--duration-instant) ease-in-out;\n }\n .clear:hover {\n transform: rotate(90deg);\n }\n\n .adornment {\n display: flex;\n align-items: center;\n color: var(--text-muted);\n }\n\n .error-icon {\n color: var(--color-danger-text);\n }\n\n / === PHONE MODE === /\n .country {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n gap: var(--gap-element);\n height: 100%;\n margin-right: var(--button-padding-x);\n padding: 0 var(--button-padding-x) 0 0;\n color: var(--text-body);\n background: none;\n border: none;\n border-right: var(--border-width) solid var(--color-dark-16);\n cursor: pointer;\n font: var(--font-normal-regular);\n user-select: none;\n }\n\n .country:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: -2px;\n }\n\n .chevron {\n display: inline-flex;\n transform-origin: 50% 50%;\n transition: transform var(--duration-fast) ease-in-out;\n }\n .chevron.open {\n transform: scaleY(-1);\n }\n\n .dial {\n color: var(--text-muted);\n }\n\n .country-panel {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--z-dropdown);\n display: flex;\n flex-direction: column;\n gap: var(--gap-element);\n width: 280px;\n max-height: 225px;\n padding: var(--padding-expand);\n background: var(--color-dark-20);\n border-radius: var(--radius-input);\n }\n\n .country-search {\n width: 100%;\n height: var(--button-height-small);\n padding: 0 12px;\n color: var(--text-body);\n font: var(--font-normal-regular);\n background: var(--color-dark-12);\n border: none;\n border-radius: var(--radius-input);\n outline: none;\n }\n\n .country-list {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--gap-element);\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style: none;\n scrollbar-width: thin;\n }\n\n .country-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: var(--radius-input);\n cursor: pointer;\n font: var(--font-normal-regular);\n }\n .country-item:hover,\n .country-item[aria-selected='true'] {\n background: var(--color-dark-23);\n }\n\n .country-name {\n flex: 1;\n }\n\n .country-empty {\n padding: 8px 12px;\n color: var(--text-muted);\n font: var(--font-normal-small);\n }\n `,\n ];\n\n @query('input')\n private input!: HTMLInputElement;\n\n private internals: UsableInternals \| null = null;\n\n /* True while a `password` field is showing its contents. /\n @state()\n private passwordVisible = false;\n\n @state()\n private countryOpen = false;\n\n @state()\n private countryQuery = '';\n\n /* The field's value. The `value` attribute seeds it and acts as the reset value. /\n @property({ type: String })\n value = '';\n\n @property({ type: String })\n name = '';\n\n /* Any native input type. `password` adds the reveal toggle. /\n @property({ type: String })\n type = 'text';\n\n @property({ type: String })\n placeholder = '';\n\n /* Field height: 32 / 40 / 48px at the desktop scale. /\n @property({ type: String, reflect: true })\n size: KtInputSize = 'medium';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /* Trailing Lucide icon, kebab-case. /\n @property({ type: String })\n icon = '';\n\n /* Error message. A non-empty value puts the field in its error state. /\n @property({ type: String, reflect: true })\n error = '';\n\n /* Shows the clear button once there is something to clear. /\n @property({ type: Boolean })\n clearable = true;\n\n /* Accessible name, when no `<kt-label-input>` wraps the field. /\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n autocomplete = '';\n\n @property({ type: Number })\n maxlength?: number;\n\n /\n Countries offered in phone mode. Replace it to widen the list.\n /\n @property({ attribute: false })\n countries: readonly KtCountry[] = DEFAULT_COUNTRIES;\n\n /* Selected country in phone mode, as an ISO 3166-1 alpha-2 code. /\n @property({ type: String })\n country = 'us';\n\n /* The value the enclosing form resets to. /\n private defaultValue = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('pointerdown', this.closeCountryPanel);\n this.internals ??= attachFormInternals(this);\n this.defaultValue = this.value;\n setFormValue(this.internals, this.formValue);\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (\n changed.has('value') \|\|\n changed.has('required') \|\|\n changed.has('error') \|\|\n changed.has('country')\n ) {\n setFormValue(this.internals, this.value);\n this.refreshValidity();\n }\n }\n\n private refreshValidity(): void {\n const missing = this.required && this.value.length === 0;\n const message = this.error \|\| (missing ? 'This field is required.' : '');\n setValidity(\n this.internals,\n { valueMissing: missing, customError: Boolean(this.error) },\n message,\n );\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('pointerdown', this.closeCountryPanel);\n }\n\n /* Called by the platform when the enclosing form is reset. /\n formResetCallback(): void {\n this.value = this.defaultValue;\n this.passwordVisible = false;\n }\n\n /* Called by the platform when the browser restores a session. /\n formStateRestoreCallback(state: string): void {\n this.value = state;\n }\n\n override focus(options?: FocusOptions): void {\n this.input?.focus(options);\n }\n\n override blur(): void {\n this.input?.blur();\n }\n\n /* Selects the field's contents, as `HTMLInputElement.select()` does. /\n select(): void {\n this.input?.select();\n }\n\n /* Phone mode: the country picker, digit-only storage and grouped display. /\n private get isPhone(): boolean {\n return this.type === 'tel';\n }\n\n private get selectedCountry(): KtCountry \| undefined {\n return this.countries.find((candidate) => candidate.id === this.country);\n }\n\n /\n What the form receives. In phone mode that is the full international\n * number — submitting national digits alone would throw away the country\n * the user picked.\n /\n private get formValue(): string {\n if (!this.isPhone \|\| !this.value) return this.value;\n return `+${this.selectedCountry?.dialCode ?? ''}${this.value}`;\n }\n\n private get displayValue(): string {\n return this.isPhone ? formatNationalNumber(this.value, this.selectedCountry) : this.value;\n }\n\n private get showClear(): boolean {\n return this.clearable && this.value.length > 0 && !this.readonly && !this.disabled;\n }\n\n private get resolvedType(): string {\n // Phone mode renders grouped digits, which type=\"tel\" would not accept\n // back; the value is normalised to digits on input either way.\n if (this.isPhone) return 'text';\n if (this.type !== 'password') return this.type;\n return this.passwordVisible ? 'text' : 'password';\n }\n\n private onInput(event: Event): void {\n const raw = (event.target as HTMLInputElement).value;\n this.value = this.isPhone ? digitsOnly(raw) : raw;\n emit(this, 'kt-input', { value: this.value });\n }\n\n private toggleCountryPanel(): void {\n this.countryOpen = !this.countryOpen;\n this.countryQuery = '';\n }\n\n private selectCountry(country: KtCountry): void {\n this.country = country.id;\n this.countryOpen = false;\n this.countryQuery = '';\n emit(this, 'kt-country-change', { country: country.id, dialCode: country.dialCode });\n this.focus();\n }\n\n private closeCountryPanel = (event: Event): void => {\n if (event.composedPath().includes(this)) return;\n this.countryOpen = false;\n };\n\n private onCountryKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Escape' && this.countryOpen) {\n event.stopPropagation();\n this.countryOpen = false;\n this.shadowRoot?.querySelector<HTMLButtonElement>('.country')?.focus();\n }\n }\n\n private renderCountryPicker(): TemplateResult {\n const selected = this.selectedCountry;\n const matches = searchCountries(this.countries, this.countryQuery);\n\n return html`<button\n type=\"button\"\n class=\"country\"\n aria-haspopup=\"listbox\"\n aria-expanded=${this.countryOpen ? 'true' : 'false'}\n aria-label=${`Country code: ${selected?.name ?? 'none'}`}\n ?disabled=${this.disabled \|\| this.readonly}\n @click=${this.toggleCountryPanel}\n >\n <span aria-hidden=\"true\">${flagEmoji(this.country)}</span>\n <span class=\"dial\">+${selected?.dialCode ?? ''}</span>\n <span class=${classMap({ chevron: true, open: this.countryOpen })}>\n <kt-icon name=\"chevron-down\" size=\"14\"></kt-icon>\n </span>\n </button>\n ${\n this.countryOpen\n ? html`<div class=\"country-panel\" @pointerdown=${(e: Event) => e.stopPropagation()}>\n <input\n class=\"country-search\"\n placeholder=\"Search country or dial code\"\n .value=${this.countryQuery}\n aria-label=\"Search country or dial code\"\n @input=${(e: Event) => {\n this.countryQuery = (e.target as HTMLInputElement).value;\n }}\n />\n <ul class=\"country-list\" role=\"listbox\">\n ${\n matches.length === 0\n ? html`<li class=\"country-empty\">No country found</li>`\n : matches.map(\n (candidate) =>\n html`<li\n class=\"country-item\"\n role=\"option\"\n aria-selected=${candidate.id === this.country ? 'true' : 'false'}\n @click=${() => this.selectCountry(candidate)}\n >\n <span aria-hidden=\"true\">${flagEmoji(candidate.id)}</span>\n <span class=\"country-name\">${candidate.name}</span>\n <span class=\"dial\">+${candidate.dialCode}</span>\n </li>`,\n )\n }\n </ul>\n </div>`\n : nothing\n }`;\n }\n\n private onChange(event: Event): void {\n // The native change event does not cross the shadow boundary; re-emit it\n // under a name consumers can actually listen for.\n event.stopPropagation();\n emit(this, 'kt-change', { value: this.value });\n }\n\n private clear(): void {\n this.value = '';\n emit(this, 'kt-clear');\n emit(this, 'kt-input', { value: '' });\n emit(this, 'kt-change', { value: '' });\n this.focus();\n }\n\n private togglePassword(): void {\n this.passwordVisible = !this.passwordVisible;\n }\n\n /* Clicking the padding around the input should focus it, as on a native field. */\n private onFieldPointerDown(event: PointerEvent): void {\n if (event.target === this.input) return;\n if ((event.target as HTMLElement).closest('button')) return;\n event.preventDefault();\n this.focus();\n }\n\n override render(): TemplateResult {\n const hasActions =\n this.type === 'password' \|\| Boolean(this.icon) \|\| Boolean(this.error) \|\| this.showClear;\n\n return html`<div\n part=\"base\"\n class=${classMap({\n field: true,\n [this.size]: true,\n error: Boolean(this.error),\n disabled: this.disabled,\n })}\n @pointerdown=${this.onFieldPointerDown}\n @keydown=${this.onCountryKeyDown}\n >\n ${\n // The icon only shows that something is wrong; this is what gets read\n // out. aria-describedby rather than aria-errormessage, which most\n // screen readers still ignore.\n this.error\n ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n : nothing\n }\n ${this.isPhone ? this.renderCountryPicker() : nothing}\n\n <input\n part=\"control\"\n type=${this.resolvedType}\n name=${this.name \|\| nothing}\n .value=${live(this.displayValue)}\n placeholder=${this.placeholder \|\| this.selectedCountry?.format \|\| nothing}\n autocomplete=${this.autocomplete \|\| nothing}\n inputmode=${this.isPhone ? 'tel' : nothing}\n maxlength=${this.maxlength ?? nothing}\n aria-label=${this.label \|\| nothing}\n aria-invalid=${this.error ? 'true' : nothing}\n aria-describedby=${this.error ? 'error-message' : nothing}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @input=${this.onInput}\n @change=${this.onChange}\n />\n\n ${\n hasActions\n ? html`<div part=\"actions\" class=\"actions\">\n ${\n this.type === 'password'\n ? html`<button\n type=\"button\"\n class=\"icon-button\"\n tabindex=\"-1\"\n aria-label=${this.passwordVisible ? 'Hide password' : 'Show password'}\n @click=${this.togglePassword}\n >\n <kt-icon\n name=${this.passwordVisible ? 'eye-off' : 'eye'}\n size=${ICON_SIZE}\n ></kt-icon>\n </button>`\n : nothing\n }\n ${\n this.icon\n ? html`<span class=\"adornment\">\n <kt-icon name=${this.icon} size=${ICON_SIZE}></kt-icon>\n </span>`\n : nothing\n }\n ${\n this.error\n ? html`<span class=\"adornment error-icon\" title=${this.error}>\n <kt-icon name=\"circle-alert\" size=${ICON_SIZE} label=${this.error}></kt-icon>\n </span>`\n : nothing\n }\n ${\n this.showClear\n ? html`<button\n type=\"button\"\n class=\"icon-button clear\"\n tabindex=\"-1\"\n aria-label=\"Clear\"\n @click=${this.clear}\n >\n <kt-icon name=\"x\" size=${ICON_SIZE}></kt-icon>\n </button>`\n : nothing\n }\n </div>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-input', KtInput);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-input': KtInput;\n }\n}\n"],"names":["DEFAULT_COUNTRIES","REGIONAL_INDICATOR_A","LETTER_A","flagEmoji","id","letter","digitsOnly","value","formatNationalNumber","digits","country","groups","rest","size","searchCountries","countries","query","needle","ICON_SIZE","KtInput","KtElement","event","css","attachFormInternals","setFormValue","changed","missing","message","setValidity","state","options","candidate","raw","emit","selected","matches","html","classMap","e","nothing","hasActions","live","__decorateClass","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-input.js","sources":["../../../../src/internal/countries.ts","../../../../src/components/forms/kt-input/kt-input.ts"],"sourcesContent":["/*\n Country data for the phone mode of `<kt-input>`.\n \n Deliberately a short list rather than all 195: an exhaustive picker is a\n * worse experience than a handful of entries and a search box. Applications\n * that need more pass their own list to the element.\n /\n\nexport interface KtCountry {\n /* ISO 3166-1 alpha-2, lowercase. /\n readonly id: string;\n readonly name: string;\n /* International dialling code, without the leading `+`. /\n readonly dialCode: string;\n /* Placeholder showing the local format. /\n readonly format: string;\n}\n\nexport const DEFAULT_COUNTRIES: readonly KtCountry[] = [\n { id: 'us', name: 'United States', dialCode: '1', format: '123-456-7890' },\n { id: 'gb', name: 'United Kingdom', dialCode: '44', format: '7123 456789' },\n { id: 'de', name: 'Germany', dialCode: '49', format: '1234 567890' },\n { id: 'fr', name: 'France', dialCode: '33', format: '1 23 45 67 89' },\n { id: 'be', name: 'Belgium', dialCode: '32', format: '1 23 45 67 89' },\n { id: 'ch', name: 'Switzerland', dialCode: '41', format: '12 345 67 89' },\n];\n\nconst REGIONAL_INDICATOR_A = 0x1f1e6;\nconst LETTER_A = 'A'.charCodeAt(0);\n\n/\n The flag emoji for a country code, built from regional indicator symbols.\n \n This is the one place emoji appear in a Kanto interface. They are here\n * because no flag icon set ships with the system, and a country picker without\n * flags is markedly slower to scan.\n /\nexport function flagEmoji(id: string): string {\n if (!/^[a-z]{2}$/i.test(id)) return '';\n return String.fromCodePoint(\n ...[...id.toUpperCase()].map(\n (letter) => REGIONAL_INDICATOR_A + letter.charCodeAt(0) - LETTER_A,\n ),\n );\n}\n\n/* Keeps only the digits — what gets stored and submitted. /\nexport function digitsOnly(value: string): string {\n return value.replace(/\\D/g, '');\n}\n\n/\n Groups digits for display, per country.\n \n North American numbers read as `123 456 7890`, French ones as\n * `6 12 34 56 78` — a single leading digit, then pairs. Everything else falls\n * back to groups of three.\n /\nexport function formatNationalNumber(digits: string, country: KtCountry \| undefined): string {\n if (!digits) return '';\n\n const groups: string[] = [];\n let rest = digits;\n\n if (country?.id === 'fr') {\n groups.push(rest.slice(0, 1));\n rest = rest.slice(1);\n while (rest) {\n groups.push(rest.slice(0, 2));\n rest = rest.slice(2);\n }\n } else if (country?.id === 'us' \|\| country?.id === 'ca') {\n for (const size of [3, 3, 4]) {\n if (!rest) break;\n groups.push(rest.slice(0, size));\n rest = rest.slice(size);\n }\n if (rest) groups.push(rest);\n } else {\n while (rest) {\n groups.push(rest.slice(0, 3));\n rest = rest.slice(3);\n }\n }\n\n return groups.filter(Boolean).join(' ');\n}\n\n/* Filters by name, dial code or country code — whatever the user types. /\nexport function searchCountries(\n countries: readonly KtCountry[],\n query: string,\n): readonly KtCountry[] {\n const needle = query.trim().toLowerCase();\n if (!needle) return countries;\n\n return countries.filter(\n (country) =>\n country.name.toLowerCase().includes(needle) \|\|\n country.dialCode.includes(needle.replace(/^\\+/, '')) \|\|\n country.id === needle,\n );\n}\n","import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport {\n attachFormInternals,\n setFormValue,\n setValidity,\n type UsableInternals,\n} from '#internal/form-control';\nimport {\n DEFAULT_COUNTRIES,\n digitsOnly,\n flagEmoji,\n formatNationalNumber,\n searchCountries,\n type KtCountry,\n} from '#internal/countries';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtInputSize = 'small' \| 'medium' \| 'large';\n\n/* Icon size inside a field, at every field size. /\nconst ICON_SIZE = 18;\n\n/\n A single-line text field.\n \n Borderless by design: the field is a fill on `--color-dark-12` that gains a\n * 2px outline — grey on hover, primary on focus, danger on error. An outline\n * sits outside the box, so nothing reflows when the state changes.\n \n The element is form-associated: it serialises into `FormData` under its\n * `name`, resets with the form, and reports validity like a native input.\n \n @element kt-input\n \n @csspart base - The field container.\n * @csspart control - The native `<input>`.\n * @csspart actions - The trailing icon row.\n \n @fires kt-input - On every keystroke. `detail: { value }`.\n * @fires kt-change - When the value is committed (blur or Enter). `detail: { value }`.\n * @fires kt-clear - The clear button was pressed.\n \n @example\n * ```html\n * <kt-input placeholder=\"Search everything...\" icon=\"search\"></kt-input>\n * <kt-input type=\"password\" name=\"password\"></kt-input>\n * <kt-input error=\"Invalid email address\" value=\"not-an-address\"></kt-input>\n * ```\n /\nexport class KtInput extends KtElement {\n static readonly formAssociated = true;\n\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .field {\n position: relative;\n display: inline-flex;\n align-items: center;\n width: 100%;\n height: var(--button-height);\n padding: 0 var(--button-padding-x);\n gap: var(--gap-button);\n background-color: var(--surface-field);\n border-radius: var(--radius-input);\n / A resting hairline. A field is a fill on --surface-field, which is\n one ramp step from the page in dark and almost the same colour in\n light — so on a card or inside a modal it simply disappeared and\n read as a bare native control.\n\n A border rather than an outline, because the control inside fills\n the field exactly and a coincident outline is painted over by the\n native widget. A border insets the control by its own width, so it\n cannot be covered. box-sizing: border-box keeps the outer size.\n\n The hover and focus rings stay outlines on top of it, and the\n transparent resting outline is what they animate from: without it\n outline-color starts at the initial value, which resolves to the\n text colour, and hover flashed near-white before settling. /\n border: var(--border-width) solid var(--border-field);\n outline: var(--outline-width) solid transparent;\n transition: outline-color var(--duration-instant);\n }\n\n / Outline, never border: it sits outside the box, so hover and focus\n change nothing about the layout. /\n .field:hover {\n outline: var(--outline-width) solid var(--color-text-700);\n }\n .field:focus-within {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n\n .small {\n height: var(--button-height-small);\n }\n .large {\n height: var(--button-height-large);\n }\n\n .error,\n .error:hover,\n .error:focus-within {\n outline: var(--outline-width) solid var(--color-danger-base);\n }\n .error input {\n color: var(--color-danger-text);\n }\n\n .disabled {\n background-color: var(--color-dark-14);\n pointer-events: none;\n }\n .disabled input {\n color: var(--text-disabled);\n }\n\n input {\n width: 100%;\n min-width: 0;\n padding: 0;\n color: var(--text-body);\n font: var(--font-input);\n background: transparent;\n border: none;\n outline: none;\n }\n\n input::placeholder {\n color: var(--text-muted);\n }\n\n / The clear button is ours; the browser's is redundant. /\n input::-webkit-search-cancel-button {\n display: none;\n }\n\n .actions {\n display: flex;\n flex: none;\n align-items: center;\n gap: var(--gap-button);\n }\n\n .icon-button {\n display: inline-flex;\n align-items: center;\n padding: 0;\n color: var(--text-body);\n background: none;\n border: none;\n cursor: pointer;\n }\n\n .icon-button:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n border-radius: 2px;\n }\n\n .clear {\n transition: transform var(--duration-instant) ease-in-out;\n }\n .clear:hover {\n transform: rotate(90deg);\n }\n\n .adornment {\n display: flex;\n align-items: center;\n color: var(--text-muted);\n }\n\n .error-icon {\n color: var(--color-danger-text);\n }\n\n / === PHONE MODE === /\n .country {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n gap: var(--gap-element);\n height: 100%;\n margin-right: var(--button-padding-x);\n padding: 0 var(--button-padding-x) 0 0;\n color: var(--text-body);\n background: none;\n border: none;\n border-right: var(--border-width) solid var(--color-dark-16);\n cursor: pointer;\n font: var(--font-normal-regular);\n user-select: none;\n }\n\n .country:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: -2px;\n }\n\n .chevron {\n display: inline-flex;\n transform-origin: 50% 50%;\n transition: transform var(--duration-fast) ease-in-out;\n }\n .chevron.open {\n transform: scaleY(-1);\n }\n\n .dial {\n color: var(--text-muted);\n }\n\n .country-panel {\n position: absolute;\n top: calc(100% + 6px);\n left: 0;\n z-index: var(--z-dropdown);\n display: flex;\n flex-direction: column;\n gap: var(--gap-element);\n width: 280px;\n max-height: 225px;\n padding: var(--padding-expand);\n background: var(--color-dark-20);\n border-radius: var(--radius-input);\n }\n\n .country-search {\n width: 100%;\n height: var(--button-height-small);\n padding: 0 12px;\n color: var(--text-body);\n font: var(--font-normal-regular);\n background: var(--color-dark-12);\n border: none;\n border-radius: var(--radius-input);\n outline: none;\n }\n\n .country-list {\n display: flex;\n flex: 1;\n flex-direction: column;\n gap: var(--gap-element);\n margin: 0;\n padding: 0;\n overflow-y: auto;\n list-style: none;\n scrollbar-width: thin;\n }\n\n .country-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n border-radius: var(--radius-input);\n cursor: pointer;\n font: var(--font-normal-regular);\n }\n .country-item:hover,\n .country-item[aria-selected='true'] {\n background: var(--color-dark-23);\n }\n\n .country-name {\n flex: 1;\n }\n\n .country-empty {\n padding: 8px 12px;\n color: var(--text-muted);\n font: var(--font-normal-small);\n }\n `,\n ];\n\n @query('input')\n private input!: HTMLInputElement;\n\n private internals: UsableInternals \| null = null;\n\n /* True while a `password` field is showing its contents. /\n @state()\n private passwordVisible = false;\n\n @state()\n private countryOpen = false;\n\n @state()\n private countryQuery = '';\n\n /* The field's value. The `value` attribute seeds it and acts as the reset value. /\n @property({ type: String })\n value = '';\n\n @property({ type: String })\n name = '';\n\n /* Any native input type. `password` adds the reveal toggle. /\n @property({ type: String })\n type = 'text';\n\n @property({ type: String })\n placeholder = '';\n\n /* Field height: 32 / 40 / 48px at the desktop scale. /\n @property({ type: String, reflect: true })\n size: KtInputSize = 'medium';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /* Trailing Lucide icon, kebab-case. /\n @property({ type: String })\n icon = '';\n\n /* Error message. A non-empty value puts the field in its error state. /\n @property({ type: String, reflect: true })\n error = '';\n\n /* Shows the clear button once there is something to clear. /\n @property({ type: Boolean })\n clearable = true;\n\n /* Accessible name, when no `<kt-label-input>` wraps the field. /\n @property({ type: String })\n label = '';\n\n @property({ type: String })\n autocomplete = '';\n\n @property({ type: Number })\n maxlength?: number;\n\n /\n Countries offered in phone mode. Replace it to widen the list.\n /\n @property({ attribute: false })\n countries: readonly KtCountry[] = DEFAULT_COUNTRIES;\n\n /* Selected country in phone mode, as an ISO 3166-1 alpha-2 code. /\n @property({ type: String })\n country = 'us';\n\n /* The value the enclosing form resets to. /\n private defaultValue = '';\n\n override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('pointerdown', this.closeCountryPanel);\n this.internals ??= attachFormInternals(this);\n this.defaultValue = this.value;\n setFormValue(this.internals, this.formValue);\n }\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (\n changed.has('value') \|\|\n changed.has('required') \|\|\n changed.has('error') \|\|\n changed.has('country') \|\|\n this.stringsChanged(changed)\n ) {\n setFormValue(this.internals, this.value);\n this.refreshValidity();\n }\n }\n\n private refreshValidity(): void {\n const missing = this.required && this.value.length === 0;\n const message = this.error \|\| (missing ? strings().required : '');\n setValidity(\n this.internals,\n { valueMissing: missing, customError: Boolean(this.error) },\n message,\n );\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n document.removeEventListener('pointerdown', this.closeCountryPanel);\n }\n\n /* Called by the platform when the enclosing form is reset. /\n formResetCallback(): void {\n this.value = this.defaultValue;\n this.passwordVisible = false;\n }\n\n /* Called by the platform when the browser restores a session. /\n formStateRestoreCallback(state: string): void {\n this.value = state;\n }\n\n override focus(options?: FocusOptions): void {\n this.input?.focus(options);\n }\n\n override blur(): void {\n this.input?.blur();\n }\n\n /* Selects the field's contents, as `HTMLInputElement.select()` does. /\n select(): void {\n this.input?.select();\n }\n\n /* Phone mode: the country picker, digit-only storage and grouped display. /\n private get isPhone(): boolean {\n return this.type === 'tel';\n }\n\n private get selectedCountry(): KtCountry \| undefined {\n return this.countries.find((candidate) => candidate.id === this.country);\n }\n\n /\n What the form receives. In phone mode that is the full international\n * number — submitting national digits alone would throw away the country\n * the user picked.\n /\n private get formValue(): string {\n if (!this.isPhone \|\| !this.value) return this.value;\n return `+${this.selectedCountry?.dialCode ?? ''}${this.value}`;\n }\n\n private get displayValue(): string {\n return this.isPhone ? formatNationalNumber(this.value, this.selectedCountry) : this.value;\n }\n\n private get showClear(): boolean {\n return this.clearable && this.value.length > 0 && !this.readonly && !this.disabled;\n }\n\n private get resolvedType(): string {\n // Phone mode renders grouped digits, which type=\"tel\" would not accept\n // back; the value is normalised to digits on input either way.\n if (this.isPhone) return 'text';\n if (this.type !== 'password') return this.type;\n return this.passwordVisible ? 'text' : 'password';\n }\n\n private onInput(event: Event): void {\n const raw = (event.target as HTMLInputElement).value;\n this.value = this.isPhone ? digitsOnly(raw) : raw;\n emit(this, 'kt-input', { value: this.value });\n }\n\n private toggleCountryPanel(): void {\n this.countryOpen = !this.countryOpen;\n this.countryQuery = '';\n }\n\n private selectCountry(country: KtCountry): void {\n this.country = country.id;\n this.countryOpen = false;\n this.countryQuery = '';\n emit(this, 'kt-country-change', { country: country.id, dialCode: country.dialCode });\n this.focus();\n }\n\n private closeCountryPanel = (event: Event): void => {\n if (event.composedPath().includes(this)) return;\n this.countryOpen = false;\n };\n\n private onCountryKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Escape' && this.countryOpen) {\n event.stopPropagation();\n this.countryOpen = false;\n this.shadowRoot?.querySelector<HTMLButtonElement>('.country')?.focus();\n }\n }\n\n private renderCountryPicker(): TemplateResult {\n const selected = this.selectedCountry;\n const matches = searchCountries(this.countries, this.countryQuery);\n\n return html`<button\n type=\"button\"\n class=\"country\"\n aria-haspopup=\"listbox\"\n aria-expanded=${this.countryOpen ? 'true' : 'false'}\n aria-label=${strings().countryCode(selected?.name)}\n ?disabled=${this.disabled \|\| this.readonly}\n @click=${this.toggleCountryPanel}\n >\n <span aria-hidden=\"true\">${flagEmoji(this.country)}</span>\n <span class=\"dial\">+${selected?.dialCode ?? ''}</span>\n <span class=${classMap({ chevron: true, open: this.countryOpen })}>\n <kt-icon name=\"chevron-down\" size=\"14\"></kt-icon>\n </span>\n </button>\n ${\n this.countryOpen\n ? html`<div class=\"country-panel\" @pointerdown=${(e: Event) => e.stopPropagation()}>\n <input\n class=\"country-search\"\n placeholder=${strings().searchCountry}\n .value=${this.countryQuery}\n aria-label=${strings().searchCountry}\n @input=${(e: Event) => {\n this.countryQuery = (e.target as HTMLInputElement).value;\n }}\n />\n <ul class=\"country-list\" role=\"listbox\">\n ${\n matches.length === 0\n ? html`<li class=\"country-empty\">${strings().noCountry}</li>`\n : matches.map(\n (candidate) =>\n html`<li\n class=\"country-item\"\n role=\"option\"\n aria-selected=${candidate.id === this.country ? 'true' : 'false'}\n @click=${() => this.selectCountry(candidate)}\n >\n <span aria-hidden=\"true\">${flagEmoji(candidate.id)}</span>\n <span class=\"country-name\">${candidate.name}</span>\n <span class=\"dial\">+${candidate.dialCode}</span>\n </li>`,\n )\n }\n </ul>\n </div>`\n : nothing\n }`;\n }\n\n private onChange(event: Event): void {\n // The native change event does not cross the shadow boundary; re-emit it\n // under a name consumers can actually listen for.\n event.stopPropagation();\n emit(this, 'kt-change', { value: this.value });\n }\n\n private clear(): void {\n this.value = '';\n emit(this, 'kt-clear');\n emit(this, 'kt-input', { value: '' });\n emit(this, 'kt-change', { value: '' });\n this.focus();\n }\n\n private togglePassword(): void {\n this.passwordVisible = !this.passwordVisible;\n }\n\n /* Clicking the padding around the input should focus it, as on a native field. */\n private onFieldPointerDown(event: PointerEvent): void {\n if (event.target === this.input) return;\n if ((event.target as HTMLElement).closest('button')) return;\n event.preventDefault();\n this.focus();\n }\n\n override render(): TemplateResult {\n const hasActions =\n this.type === 'password' \|\| Boolean(this.icon) \|\| Boolean(this.error) \|\| this.showClear;\n\n return html`<div\n part=\"base\"\n class=${classMap({\n field: true,\n [this.size]: true,\n error: Boolean(this.error),\n disabled: this.disabled,\n })}\n @pointerdown=${this.onFieldPointerDown}\n @keydown=${this.onCountryKeyDown}\n >\n ${\n // The icon only shows that something is wrong; this is what gets read\n // out. aria-describedby rather than aria-errormessage, which most\n // screen readers still ignore.\n this.error\n ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n : nothing\n }\n ${this.isPhone ? this.renderCountryPicker() : nothing}\n\n <input\n part=\"control\"\n type=${this.resolvedType}\n name=${this.name \|\| nothing}\n .value=${live(this.displayValue)}\n placeholder=${this.placeholder \|\| this.selectedCountry?.format \|\| nothing}\n autocomplete=${this.autocomplete \|\| nothing}\n inputmode=${this.isPhone ? 'tel' : nothing}\n maxlength=${this.maxlength ?? nothing}\n aria-label=${this.label \|\| nothing}\n aria-invalid=${this.error ? 'true' : nothing}\n aria-describedby=${this.error ? 'error-message' : nothing}\n ?disabled=${this.disabled}\n ?readonly=${this.readonly}\n ?required=${this.required}\n @input=${this.onInput}\n @change=${this.onChange}\n />\n\n ${\n hasActions\n ? html`<div part=\"actions\" class=\"actions\">\n ${\n this.type === 'password'\n ? html`<button\n type=\"button\"\n class=\"icon-button\"\n tabindex=\"-1\"\n aria-label=${this.passwordVisible ? strings().hidePassword : strings().showPassword}\n @click=${this.togglePassword}\n >\n <kt-icon\n name=${this.passwordVisible ? 'eye-off' : 'eye'}\n size=${ICON_SIZE}\n ></kt-icon>\n </button>`\n : nothing\n }\n ${\n this.icon\n ? html`<span class=\"adornment\">\n <kt-icon name=${this.icon} size=${ICON_SIZE}></kt-icon>\n </span>`\n : nothing\n }\n ${\n this.error\n ? html`<span class=\"adornment error-icon\" title=${this.error}>\n <kt-icon name=\"circle-alert\" size=${ICON_SIZE} label=${this.error}></kt-icon>\n </span>`\n : nothing\n }\n ${\n this.showClear\n ? html`<button\n type=\"button\"\n class=\"icon-button clear\"\n tabindex=\"-1\"\n aria-label=${strings().clear}\n @click=${this.clear}\n >\n <kt-icon name=\"x\" size=${ICON_SIZE}></kt-icon>\n </button>`\n : nothing\n }\n </div>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-input', KtInput);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-input': KtInput;\n }\n}\n"],"names":["DEFAULT_COUNTRIES","REGIONAL_INDICATOR_A","LETTER_A","flagEmoji","id","letter","digitsOnly","value","formatNationalNumber","digits","country","groups","rest","size","searchCountries","countries","query","needle","ICON_SIZE","KtInput","KtElement","event","css","attachFormInternals","setFormValue","changed","missing","message","strings","setValidity","state","options","candidate","raw","emit","selected","matches","html","classMap","e","nothing","hasActions","live","__decorateClass","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-input-menu/kt-input-menu.d.ts CHANGED Viewed

@@ -36,7 +36,7 @@ export declare class KtInputMenu extends KtElement {
     required: boolean;
     error: string;
     label: string;
-    emptyText: string;
+    emptyText: string | undefined;
     connectedCallback(): void;
     disconnectedCallback(): void;
     willUpdate(changed: PropertyValues<this>): void;