@mattilsynet/design 2.2.29 → 2.2.31

package/mtds/field/field-observer.js

@@ -1,119 +1,71 @@
-import { UHTMLComboboxElement } from "@u-elements/u-combobox";
-import { UHTMLDataListElement } from "@u-elements/u-datalist";
-import styles from "../styles.module.css.js";
-import { isBrowser, onLoaded, onMutation, on, QUICK_EVENT, isInputLike, attr, useId, anchorPosition } from "../utils.js";
-const CSS_FIELD = styles.field.split(" ")[0];
-const CSS_VALIDATIONS = styles.validation.split(" ");
-const CSS_VALIDATION = CSS_VALIDATIONS[0];
-const FIELDS = isBrowser() ? document.getElementsByClassName(CSS_FIELD) : [];
-function handleFieldMutation() {
-  for (const field of FIELDS)
-    if (field.isConnected) {
-      const labels = [];
-      const descriptions = [];
-      let combobox = null;
-      let input = null;
-      let valid = true;
-      for (const el of field.getElementsByTagName("*")) {
-        if (el instanceof HTMLLabelElement) labels.push(el);
-        else if (el instanceof UHTMLComboboxElement) combobox = el;
-        else if (isInputLike(el) && !el.hidden) input = el;
-        else if (el.hasAttribute("data-description")) descriptions.push(el);
-        else if (el.classList.contains(CSS_VALIDATION)) {
-          valid = attr(el, "data-color") === "success" || !el.clientHeight;
-          descriptions.unshift(el);
-        } else if (el instanceof HTMLParagraphElement)
-          descriptions.some((desc) => desc.contains(el)) || descriptions.push(el);
-      }
-      if (input) {
-        for (const label of labels) label.htmlFor = useId(input);
-        renderCombobox(combobox);
-        renderCounter(input);
-        renderTextareaSize(input);
-        attr(input, "aria-describedby", descriptions.map(useId).join(" "));
-        attr(input, "aria-invalid", `${!valid}`);
+import { UHTMLComboboxElement as T } from "@u-elements/u-combobox";
+import { UHTMLDataListElement as E } from "@u-elements/u-datalist";
+import p from "../styles.module.css.js";
+import { isBrowser as I, onLoaded as C, onMutation as M, on as c, QUICK_EVENT as m, isInputLike as b, attr as n, useId as f, anchorPosition as u } from "../utils.js";
+const g = p.field.split(" ")[0], h = p.validation.split(" "), $ = h[0], A = I() ? document.getElementsByClassName(g) : [];
+function H() {
+  for (const t of A)
+    if (t.isConnected) {
+      const a = [], i = [];
+      let e = null, s = null, l = !0;
+      for (const o of t.getElementsByTagName("*"))
+        o instanceof HTMLLabelElement ? a.push(o) : o instanceof T ? e = o : b(o) && !o.hidden ? s = o : o.hasAttribute("data-description") ? i.push(o) : o.classList.contains($) ? (l = n(o, "data-color") === "success" || !o.clientHeight, i.unshift(o)) : o instanceof HTMLParagraphElement && (i.some((d) => d.contains(o)) || i.push(o));
+      if (s) {
+        for (const o of a) o.htmlFor = f(s);
+        F(e), x(s), v(s), n(s, "aria-describedby", i.map(f).join(" ")), n(s, "aria-invalid", `${!l}`);
       }
     }
 }
-function renderTextareaSize(textarea) {
-  if (textarea instanceof HTMLTextAreaElement) {
-    textarea.style.setProperty("--mtds-textarea-height", "auto");
-    textarea.style.setProperty(
-      "--mtds-textarea-height",
-      `${textarea.scrollHeight}px`
-    );
-  }
+function v(t) {
+  t instanceof HTMLTextAreaElement && (t.style.setProperty("--mtds-textarea-height", "auto"), t.style.setProperty(
+    "--mtds-textarea-height",
+    `${t.scrollHeight}px`
+  ));
 }
-const getText = (style, key) => style.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || "";
-function renderCombobox(el) {
-  const { control, list } = el || {};
-  if (el && list && !el.hasAttribute("data-sr-added")) {
-    const style = window.getComputedStyle(el);
-    attr(el, "data-sr-added", getText(style, "combobox-added"));
-    attr(el, "data-sr-empty", getText(style, "combobox-empty"));
-    attr(el, "data-sr-found", getText(style, "combobox-found"));
-    attr(el, "data-sr-invalid", getText(style, "combobox-invalid"));
-    attr(el, "data-sr-of", getText(style, "combobox-of"));
-    attr(el, "data-sr-remove", getText(style, "combobox-remove"));
-    attr(el, "data-sr-removed", getText(style, "combobox-removed"));
-    attr(list, "data-sr-plural", getText(style, "datalist-plural"));
-    attr(list, "data-sr-singular", getText(style, "datalist-singular"));
-  }
-  if (list && control && !list.hasAttribute("popover")) {
-    attr(list, "popover", "manual");
-    attr(control, "popovertarget", useId(list));
+const r = (t, a) => t.getPropertyValue(`--mtds-text-${a}`)?.slice(1, -1) || "";
+function F(t) {
+  const { control: a, list: i } = t || {};
+  if (t && i && !t.hasAttribute("data-sr-added")) {
+    const e = window.getComputedStyle(t);
+    n(t, "data-sr-added", r(e, "combobox-added")), n(t, "data-sr-empty", r(e, "combobox-empty")), n(t, "data-sr-found", r(e, "combobox-found")), n(t, "data-sr-invalid", r(e, "combobox-invalid")), n(t, "data-sr-of", r(e, "combobox-of")), n(t, "data-sr-remove", r(e, "combobox-remove")), n(t, "data-sr-removed", r(e, "combobox-removed")), n(i, "data-sr-plural", r(e, "datalist-plural")), n(i, "data-sr-singular", r(e, "datalist-singular"));
   }
+  i && a && !i.hasAttribute("popover") && (n(i, "popover", "manual"), n(a, "popovertarget", f(i)));
 }
-function renderCounter(input) {
-  const el = input?.nextElementSibling;
-  const limit = el && attr(el, "data-count");
-  if (el && limit) {
-    const remainder = Number(limit) - input.value.length;
-    const nextInvalid = remainder < 0;
-    const prevInvalid = attr(el, "aria-live") === "polite";
-    const style = window.getComputedStyle(el || input);
-    const over = getText(style, "count-over");
-    const under = getText(style, "count-under");
-    const label = `${(nextInvalid ? over : under).replace("%d", `${Math.abs(remainder)}`)}`;
-    if (prevInvalid !== nextInvalid) {
-      attr(el, "aria-live", nextInvalid ? "polite" : "off");
-      for (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);
+function x(t) {
+  const a = t?.nextElementSibling, i = a && n(a, "data-count");
+  if (a && i) {
+    const e = Number(i) - t.value.length, s = e < 0, l = n(a, "aria-live") === "polite", o = window.getComputedStyle(a || t), d = r(o, "count-over"), y = r(o, "count-under"), L = `${(s ? d : y).replace("%d", `${Math.abs(e)}`)}`;
+    if (l !== s) {
+      n(a, "aria-live", s ? "polite" : "off");
+      for (const S of h) a.classList.toggle(S, s);
     }
-    attr(el, "aria-label", label);
+    n(a, "aria-label", L);
   }
 }
-function handleFieldToggle({ target: el, newState }) {
-  if (el instanceof UHTMLDataListElement) {
-    const root = el.getRootNode();
-    const anchor = root?.querySelector(
-      `[popovertarget="${el.id}"]`
+function N({ target: t, newState: a }) {
+  if (t instanceof E) {
+    const e = t.getRootNode()?.querySelector(
+      `[popovertarget="${t.id}"]`
     );
-    if (newState === "closed") anchorPosition(el, false);
-    else if (anchor)
-      anchorPosition(el, anchor, {
-        contain({ availableHeight }) {
-          el.style.width = `${anchor.clientWidth}px`;
-          el.style.maxHeight = `${Math.max(50, availableHeight)}px`;
-        }
-      });
+    a === "closed" ? u(t, !1) : e && u(t, e, {
+      contain({ availableHeight: s }) {
+        t.style.width = `${e.clientWidth}px`, t.style.maxHeight = `${Math.max(50, s)}px`;
+      }
+    });
   }
 }
-function handleFieldInput(event) {
-  if (isInputLike(event.target)) {
-    renderCounter(event.target);
-    renderTextareaSize(event.target);
-  }
+function w(t) {
+  b(t.target) && (x(t.target), v(t.target));
 }
-function handleFieldValdiation(event) {
-  if (event.target?.closest?.(`.${CSS_FIELD}`))
-    event.preventDefault();
+function D(t) {
+  t.target?.closest?.(`.${g}`) && t.preventDefault();
 }
-onLoaded(() => [
-  onMutation(() => handleFieldMutation(), "class"),
-  on(document, "input", handleFieldInput, QUICK_EVENT),
-  on(document, "toggle", handleFieldToggle, QUICK_EVENT),
+C(() => [
+  M(() => H(), "class"),
+  c(document, "input", w, m),
+  c(document, "toggle", N, m),
   // Use capture since toggle does not bubble
-  on(document, "invalid", handleFieldValdiation, true)
+  c(document, "invalid", D, !0)
   // Use capture as invalid and submit does not bubble
 ]);
 //# sourceMappingURL=field-observer.js.map

package/mtds/field/field-observer.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tisBrowser,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\nconst FIELDS = isBrowser() ? document.getElementsByClassName(CSS_FIELD) : [];\n\nfunction handleFieldMutation() {\n\tfor (const field of FIELDS)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descriptions: Element[] = [];\n\t\t\tconst validationMsg: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | null = null;\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLComboboxElement) combobox = el;\n\t\t\t\telse if (isInputLike(el) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descriptions.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tvalidationMsg.push(el);\n\t\t\t\t\tdescriptions.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescriptions.some((desc) => desc.contains(el)) ||\n\t\t\t\t\t\tdescriptions.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\trenderCombobox(combobox);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descriptions.map(useId).join(\" \"));\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tconst { control, list } = el || {};\n\n\tif (el && list && !el.hasAttribute(\"data-sr-added\")) {\n\t\tconst style = window.getComputedStyle(el);\n\t\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\t\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\t\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\t\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\t\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\t\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\t\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\t\tattr(list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\t}\n\tif (list && control && !list.hasAttribute(\"popover\")) {\n\t\tattr(list, \"popover\", \"manual\");\n\t\tattr(control, \"popovertarget\", useId(list));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\n\t\tconst label = `${(nextInvalid ? over : under).replace(\"%d\", `${Math.abs(remainder)}`)}`;\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tattr(el, \"aria-label\", label);\n\t}\n}\n\nfunction handleFieldToggle({ target: el, newState }: Partial<ToggleEvent>) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tcontain({ availableHeight }) {\n\t\t\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t},\n\t\t\t});\n\t}\n}\n// Update when typing\nfunction handleFieldInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t}\n}\n\nfunction handleFieldValdiation(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault(); // Prevent browsers from showing default validation bubbles\n}\n\nonLoaded(() => [\n\tonMutation(() => handleFieldMutation(), \"class\"),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"invalid\", handleFieldValdiation, true), // Use capture as invalid and submit does not bubble\n]);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"field-observer.js","sources":["../../designsystem/field/field-observer.ts"],"sourcesContent":["import { UHTMLComboboxElement } from \"@u-elements/u-combobox\";\nimport { UHTMLDataListElement } from \"@u-elements/u-datalist\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tisBrowser,\n\tisInputLike,\n\ton,\n\tonLoaded,\n\tonMutation,\n\tQUICK_EVENT,\n\tuseId,\n} from \"../utils\";\n\nconst CSS_FIELD = styles.field.split(\" \")[0];\nconst CSS_VALIDATIONS = styles.validation.split(\" \");\nconst CSS_VALIDATION = CSS_VALIDATIONS[0];\nconst FIELDS = isBrowser() ? document.getElementsByClassName(CSS_FIELD) : [];\n\nfunction handleFieldMutation() {\n\tfor (const field of FIELDS)\n\t\tif (field.isConnected) {\n\t\t\tconst labels: HTMLLabelElement[] = [];\n\t\t\tconst descriptions: Element[] = [];\n\t\t\tconst validationMsg: Element[] = [];\n\t\t\tlet combobox: UHTMLComboboxElement | null = null;\n\t\t\tlet input: HTMLInputElement | null = null;\n\t\t\tlet valid = true;\n\n\t\t\tfor (const el of field.getElementsByTagName(\"*\")) {\n\t\t\t\tif (el instanceof HTMLLabelElement) labels.push(el);\n\t\t\t\telse if (el instanceof UHTMLComboboxElement) combobox = el;\n\t\t\t\telse if (isInputLike(el) && !el.hidden) input = el;\n\t\t\t\telse if (el.hasAttribute(\"data-description\")) descriptions.push(el);\n\t\t\t\telse if (el.classList.contains(CSS_VALIDATION)) {\n\t\t\t\t\tvalid = attr(el, \"data-color\") === \"success\" || !el.clientHeight; // Only set invalid if Validation is visible\n\t\t\t\t\tvalidationMsg.push(el);\n\t\t\t\t\tdescriptions.unshift(el);\n\t\t\t\t} else if (el instanceof HTMLParagraphElement)\n\t\t\t\t\tdescriptions.some((desc) => desc.contains(el)) ||\n\t\t\t\t\t\tdescriptions.push(el); // Only add if not already inside description\n\t\t\t}\n\n\t\t\tif (input) {\n\t\t\t\tfor (const label of labels) label.htmlFor = useId(input);\n\t\t\t\trenderCombobox(combobox);\n\t\t\t\trenderCounter(input);\n\t\t\t\trenderTextareaSize(input);\n\t\t\t\tattr(input, \"aria-describedby\", descriptions.map(useId).join(\" \"));\n\t\t\t\tattr(input, \"aria-invalid\", `${!valid}`);\n\t\t\t}\n\t\t}\n}\n\n// iOS does not support field-sizing: content, so we need to manually resize\nfunction renderTextareaSize(textarea: Element) {\n\tif (textarea instanceof HTMLTextAreaElement) {\n\t\ttextarea.style.setProperty(\"--mtds-textarea-height\", \"auto\");\n\t\ttextarea.style.setProperty(\n\t\t\t\"--mtds-textarea-height\",\n\t\t\t`${textarea.scrollHeight}px`,\n\t\t);\n\t}\n}\n\nconst getText = (style: CSSStyleDeclaration, key: string) =>\n\tstyle.getPropertyValue(`--mtds-text-${key}`)?.slice(1, -1) || \"\"; // slice to trim quotes\n\n// Setup translations from CSS custom properties\nfunction renderCombobox(el: UHTMLComboboxElement | null) {\n\tconst { control, list } = el || {};\n\n\tif (el && list && !el.hasAttribute(\"data-sr-added\")) {\n\t\tconst style = window.getComputedStyle(el);\n\t\tattr(el, \"data-sr-added\", getText(style, \"combobox-added\"));\n\t\tattr(el, \"data-sr-empty\", getText(style, \"combobox-empty\"));\n\t\tattr(el, \"data-sr-found\", getText(style, \"combobox-found\"));\n\t\tattr(el, \"data-sr-invalid\", getText(style, \"combobox-invalid\"));\n\t\tattr(el, \"data-sr-of\", getText(style, \"combobox-of\"));\n\t\tattr(el, \"data-sr-remove\", getText(style, \"combobox-remove\"));\n\t\tattr(el, \"data-sr-removed\", getText(style, \"combobox-removed\"));\n\t\tattr(list, \"data-sr-plural\", getText(style, \"datalist-plural\"));\n\t\tattr(list, \"data-sr-singular\", getText(style, \"datalist-singular\"));\n\t}\n\tif (list && control && !list.hasAttribute(\"popover\")) {\n\t\tattr(list, \"popover\", \"manual\");\n\t\tattr(control, \"popovertarget\", useId(list));\n\t}\n}\n\nfunction renderCounter(input: HTMLInputElement) {\n\tconst el = input?.nextElementSibling;\n\tconst limit = el && attr(el, \"data-count\");\n\n\tif (el && limit) {\n\t\tconst remainder = Number(limit) - input.value.length;\n\t\tconst nextInvalid = remainder < 0;\n\t\tconst prevInvalid = attr(el, \"aria-live\") === \"polite\";\n\t\tconst style = window.getComputedStyle(el || input);\n\t\tconst over = getText(style, \"count-over\");\n\t\tconst under = getText(style, \"count-under\");\n\t\tconst label = `${(nextInvalid ? over : under).replace(\"%d\", `${Math.abs(remainder)}`)}`;\n\n\t\tif (prevInvalid !== nextInvalid) {\n\t\t\tattr(el, \"aria-live\", nextInvalid ? \"polite\" : \"off\");\n\t\t\tfor (const css of CSS_VALIDATIONS) el.classList.toggle(css, nextInvalid);\n\t\t}\n\t\tattr(el, \"aria-label\", label);\n\t}\n}\n\nfunction handleFieldToggle({ target: el, newState }: Partial<ToggleEvent>) {\n\tif (el instanceof UHTMLDataListElement) {\n\t\tconst root = el.getRootNode() as ShadowRoot | null;\n\t\tconst anchor = root?.querySelector<HTMLElement>(\n\t\t\t`[popovertarget=\"${el.id}\"]`,\n\t\t);\n\n\t\tif (newState === \"closed\") anchorPosition(el, false);\n\t\telse if (anchor)\n\t\t\tanchorPosition(el, anchor, {\n\t\t\t\tcontain({ availableHeight }) {\n\t\t\t\t\tel.style.width = `${anchor.clientWidth}px`;\n\t\t\t\t\tel.style.maxHeight = `${Math.max(50, availableHeight)}px`;\n\t\t\t\t},\n\t\t\t});\n\t}\n}\n// Update when typing\nfunction handleFieldInput(event: Event) {\n\tif (isInputLike(event.target)) {\n\t\trenderCounter(event.target);\n\t\trenderTextareaSize(event.target);\n\t}\n}\n\nfunction handleFieldValdiation(event: Event) {\n\tif ((event.target as Element)?.closest?.(`.${CSS_FIELD}`))\n\t\tevent.preventDefault(); // Prevent browsers from showing default validation bubbles\n}\n\nonLoaded(() => [\n\tonMutation(() => handleFieldMutation(), \"class\"),\n\ton(document, \"input\", handleFieldInput, QUICK_EVENT),\n\ton(document, \"toggle\", handleFieldToggle, QUICK_EVENT), // Use capture since toggle does not bubble\n\ton(document, \"invalid\", handleFieldValdiation, true), // Use capture as invalid and submit does not bubble\n]);\n"],"names":["CSS_FIELD","styles","CSS_VALIDATIONS","CSS_VALIDATION","FIELDS","isBrowser","handleFieldMutation","field","labels","descriptions","combobox","input","valid","el","UHTMLComboboxElement","isInputLike","attr","desc","label","useId","renderCombobox","renderCounter","renderTextareaSize","textarea","getText","style","key","control","list","limit","remainder","nextInvalid","prevInvalid","over","under","css","handleFieldToggle","newState","UHTMLDataListElement","anchor","anchorPosition","availableHeight","handleFieldInput","event","handleFieldValdiation","onLoaded","onMutation","on","QUICK_EVENT"],"mappings":"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"}

package/mtds/field/field.js

@@ -1,211 +1,179 @@
 'use client';
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
-import { forwardRef, useRef, useImperativeHandle, useEffect } from "react";
-import { HelpText } from "../helptext/helptext.js";
-import { Input } from "../input/input.js";
-import styles from "../styles.module.css.js";
-import { toCustomElementProps } from "../utils.js";
-import { Validation } from "../validation/validation.js";
-const toOption = (o) => typeof o === "string" ? { label: o, value: o } : o;
-const FieldComp = forwardRef(function Field2({
-  "data-size": size,
-  "data-validation": dataValidation,
-  as,
-  className,
-  count,
-  description,
-  error,
-  helpText,
-  helpTextLabel,
-  label,
-  prefix,
-  style,
-  suffix,
-  validation: validationContent,
-  ...rest
-}, ref) {
-  const Tag = as || "div";
-  const affixes = !!suffix || !!prefix;
-  const validation = validationContent || error;
-  const shared = {
-    "data-size": size,
-    "data-validation": dataValidation,
-    className: clsx(styles.field, className),
-    style
+import { jsx as e, Fragment as P, jsxs as W } from "react/jsx-runtime";
+import S from "clsx";
+import { forwardRef as s, useRef as k, useImperativeHandle as Y, useEffect as Z } from "react";
+import { HelpText as _ } from "../helptext/helptext.js";
+import { Input as $ } from "../input/input.js";
+import D from "../styles.module.css.js";
+import { toCustomElementProps as q } from "../utils.js";
+import { Validation as ee } from "../validation/validation.js";
+const T = (i) => typeof i == "string" ? { label: i, value: i } : i, ne = s(function({
+  "data-size": n,
+  "data-validation": t,
+  as: o,
+  className: u,
+  count: f,
+  description: m,
+  error: v,
+  helpText: x,
+  helpTextLabel: g,
+  label: b,
+  prefix: h,
+  style: O,
+  suffix: F,
+  validation: j,
+  ...r
+}, l) {
+  const C = o || "div", L = !!F || !!h, c = j || v, y = {
+    "data-size": n,
+    "data-validation": t,
+    className: S(D.field, u),
+    style: O
   };
-  if (as === "select" && !rest.children)
-    Object.assign(rest, {
-      options: void 0,
-      // Ensure options is not passed to DOM
-      children: /* @__PURE__ */ jsx(Fragment, { children: rest.options?.map(toOption).map(({ label: label2, value }) => /* @__PURE__ */ jsx("option", { value, children: label2 }, value)) })
-    });
-  return as ? /* @__PURE__ */ jsxs("div", { ...shared, children: [
-    !!label && /* @__PURE__ */ jsx(FieldLabel, { children: label }),
-    !!helpText && /* @__PURE__ */ jsx(HelpText, { "aria-label": helpTextLabel, children: helpText }),
-    !!description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
-    affixes ? /* @__PURE__ */ jsxs(FieldAffixes, { children: [
-      !!prefix && /* @__PURE__ */ jsx("span", { children: prefix }),
-      /* @__PURE__ */ jsx(
-        Tag,
+  return o === "select" && !r.children && Object.assign(r, {
+    options: void 0,
+    // Ensure options is not passed to DOM
+    children: /* @__PURE__ */ e(P, { children: r.options?.map(T).map(({ label: E, value: H }) => /* @__PURE__ */ e("option", { value: H, children: E }, H)) })
+  }), o ? /* @__PURE__ */ W("div", { ...y, children: [
+    !!b && /* @__PURE__ */ e(J, { children: b }),
+    !!x && /* @__PURE__ */ e(_, { "aria-label": g, children: x }),
+    !!m && /* @__PURE__ */ e(K, { children: m }),
+    L ? /* @__PURE__ */ W(V, { children: [
+      !!h && /* @__PURE__ */ e("span", { children: h }),
+      /* @__PURE__ */ e(
+        C,
         {
-          className: styles.input,
-          suppressHydrationWarning: true,
-          ref,
-          ...rest
+          className: D.input,
+          suppressHydrationWarning: !0,
+          ref: l,
+          ...r
         }
       ),
-      !!suffix && /* @__PURE__ */ jsx("span", { children: suffix })
-    ] }) : /* @__PURE__ */ jsx(
-      Tag,
+      !!F && /* @__PURE__ */ e("span", { children: F })
+    ] }) : /* @__PURE__ */ e(
+      C,
       {
-        className: typeof as === "string" ? styles.input : void 0,
-        suppressHydrationWarning: true,
-        ref,
-        ...rest
+        className: typeof o == "string" ? D.input : void 0,
+        suppressHydrationWarning: !0,
+        ref: l,
+        ...r
       }
     ),
-    !!validation && /* @__PURE__ */ jsx(Validation, { children: validation }),
-    !!count && /* @__PURE__ */ jsx(FieldCount, { "data-count": count })
-  ] }) : /* @__PURE__ */ jsx("div", { ref, ...shared, ...rest });
-});
-const FieldAffixes = forwardRef(
-  function FieldAffixes2({ className, ...rest }, ref) {
-    return /* @__PURE__ */ jsx("div", { className: clsx(styles.affixes, className), ref, ...rest });
+    !!c && /* @__PURE__ */ e(ee, { children: c }),
+    !!f && /* @__PURE__ */ e(M, { "data-count": f })
+  ] }) : /* @__PURE__ */ e("div", { ref: l, ...y, ...r });
+}), V = s(
+  function({ className: n, ...t }, o) {
+    return /* @__PURE__ */ e("div", { className: S(D.affixes, n), ref: o, ...t });
   }
-);
-const FieldDatalist = forwardRef(
-  function FieldDatalist2({ "data-nofilter": filter, ...rest }, ref) {
-    return /* @__PURE__ */ jsx(
+), B = s(
+  function({ "data-nofilter": n, ...t }, o) {
+    return /* @__PURE__ */ e(
       "u-datalist",
       {
-        "data-nofilter": !!filter || void 0,
-        ref,
-        ...toCustomElementProps(rest)
+        "data-nofilter": !!n || void 0,
+        ref: o,
+        ...q(t)
       }
     );
   }
-);
-const FieldOption = forwardRef(
-  function FieldOption2(props, ref) {
-    return /* @__PURE__ */ jsx("u-option", { ref, ...toCustomElementProps(props) });
+), G = s(
+  function(n, t) {
+    return /* @__PURE__ */ e("u-option", { ref: t, ...q(n) });
   }
-);
-const FieldCombobox = forwardRef(
-  function FieldCombobox2({
-    "aria-required": required,
-    "data-position": position,
-    "data-nofilter": nofilter,
-    "data-multiple": multiple,
-    onAfterChange,
-    onAfterSelect,
-    onBeforeChange,
-    onBeforeMatch,
-    onBeforeSelect,
-    onSelectedChange,
-    onInput,
-    onChange,
-    children,
-    disabled,
-    name,
-    options,
-    placeholder,
-    readOnly,
-    selected,
-    type,
-    ...props
-  }, ref) {
-    const innerRef = useRef(null);
-    const onSelected = useRef(onSelectedChange);
-    onSelected.current = onSelectedChange;
-    if (onAfterChange) {
-      onAfterSelect = onAfterChange;
-      console.warn(
-        `Combobox onAfterChange is deprecated, use onAfterSelect instead.`
-      );
-    }
-    if (onBeforeChange) {
-      onBeforeSelect = onBeforeChange;
-      console.warn(
-        `Combobox onBeforeChange is deprecated, use onBeforeSelect instead.`
-      );
-    }
-    useImperativeHandle(ref, () => innerRef.current);
-    useEffect(() => {
-      const self = innerRef.current;
-      const handleChange = (event) => {
-        const handleSelected = onSelected.current;
-        if (!onSelected) return;
-        event.preventDefault();
-        const { isConnected: remove, textContent, value } = event.detail;
-        const label = textContent?.trim() || "";
-        const prev = selected || [];
-        if (remove) handleSelected?.(prev.filter((i) => i.value !== value));
-        else if (multiple) handleSelected?.([...prev, { value, label }]);
-        else handleSelected?.([{ value, label }]);
+), te = s(
+  function({
+    "aria-required": n,
+    "data-position": t,
+    "data-nofilter": o,
+    "data-multiple": u,
+    onAfterChange: f,
+    onAfterSelect: m,
+    onBeforeChange: v,
+    onBeforeMatch: x,
+    onBeforeSelect: g,
+    onSelectedChange: b,
+    onInput: h,
+    onChange: O,
+    children: F,
+    disabled: j,
+    name: r,
+    options: l,
+    placeholder: C,
+    readOnly: L,
+    selected: c,
+    type: y,
+    ...E
+  }, H) {
+    const N = k(null), w = k(b);
+    return w.current = b, f && (m = f, console.warn(
+      "Combobox onAfterChange is deprecated, use onAfterSelect instead."
+    )), v && (g = v, console.warn(
+      "Combobox onBeforeChange is deprecated, use onBeforeSelect instead."
+    )), Y(H, () => N.current), Z(() => {
+      const p = N.current, d = (a) => {
+        const A = w.current;
+        if (!w) return;
+        a.preventDefault();
+        const { isConnected: Q, textContent: U, value: R } = a.detail, z = U?.trim() || "", I = c || [];
+        A?.(Q ? I.filter((X) => X.value !== R) : u ? [...I, { value: R, label: z }] : [{ value: R, label: z }]);
       };
-      self?.addEventListener("comboboxbeforeselect", handleChange);
-      return () => self?.removeEventListener("comboboxbeforeselect", handleChange);
-    }, [multiple, selected]);
-    return /* @__PURE__ */ jsxs(
+      return p?.addEventListener("comboboxbeforeselect", d), () => p?.removeEventListener("comboboxbeforeselect", d);
+    }, [u, c]), /* @__PURE__ */ W(
       "u-combobox",
       {
-        "data-multiple": multiple || void 0,
-        ...toCustomElementProps({
-          oncomboboxbeforeselect: onBeforeSelect,
-          oncomboboxbeforematch: onBeforeMatch,
-          oncomboboxafterselect: onAfterSelect,
-          ref: innerRef,
-          ...props
+        "data-multiple": u || void 0,
+        ...q({
+          oncomboboxbeforeselect: g,
+          oncomboboxbeforematch: x,
+          oncomboboxafterselect: m,
+          ref: N,
+          ...E
         }),
         children: [
-          selected?.map(({ children: children2, label, value }) => /* @__PURE__ */ jsx("data", { value, suppressHydrationWarning: true, children: children2 ?? label }, value)),
-          children || /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              Input,
+          c?.map(({ children: p, label: d, value: a }) => /* @__PURE__ */ e("data", { value: a, suppressHydrationWarning: !0, children: p ?? d }, a)),
+          F || /* @__PURE__ */ W(P, { children: [
+            /* @__PURE__ */ e(
+              $,
               {
-                "aria-required": required,
-                disabled,
-                name,
-                onInput,
-                onChange,
-                placeholder,
-                readOnly,
-                type
+                "aria-required": n,
+                disabled: j,
+                name: r,
+                onInput: h,
+                onChange: O,
+                placeholder: C,
+                readOnly: L,
+                type: y
               }
             ),
-            /* @__PURE__ */ jsx("del", { "aria-label": "Fjern tekst", suppressHydrationWarning: true })
+            /* @__PURE__ */ e("del", { "aria-label": "Fjern tekst", suppressHydrationWarning: !0 })
           ] }),
-          !!options && /* @__PURE__ */ jsx(FieldDatalist, { "data-nofilter": nofilter, "data-position": position, children: options.map(toOption).map(({ children: children2, label, value }) => /* @__PURE__ */ jsx(FieldOption, { value, label, children: children2 ?? label }, value)) })
+          !!l && /* @__PURE__ */ e(B, { "data-nofilter": o, "data-position": t, children: l.map(T).map(({ children: p, label: d, value: a }) => /* @__PURE__ */ e(G, { value: a, label: d, children: p ?? d }, a)) })
         ]
       }
     );
   }
-);
-const FieldLabel = forwardRef(
-  function FieldLabel2(rest, ref) {
-    return /* @__PURE__ */ jsx("label", { suppressHydrationWarning: true, ref, ...rest });
+), J = s(
+  function(n, t) {
+    return /* @__PURE__ */ e("label", { suppressHydrationWarning: !0, ref: t, ...n });
   }
-);
-const FieldDescription = forwardRef(function FieldDescription2(rest, ref) {
-  return /* @__PURE__ */ jsx("p", { suppressHydrationWarning: true, ref, ...rest });
-});
-const FieldCount = forwardRef(
-  function FieldCount2(rest, ref) {
-    return /* @__PURE__ */ jsx("p", { suppressHydrationWarning: true, ref, ...rest });
+), K = s(function(n, t) {
+  return /* @__PURE__ */ e("p", { suppressHydrationWarning: !0, ref: t, ...n });
+}), M = s(
+  function(n, t) {
+    return /* @__PURE__ */ e("p", { suppressHydrationWarning: !0, ref: t, ...n });
   }
-);
-const Field = Object.assign(FieldComp, {
-  Affixes: FieldAffixes,
-  Combobox: FieldCombobox,
-  Datalist: FieldDatalist,
-  Option: FieldOption,
-  Description: FieldDescription,
-  Label: FieldLabel,
-  Count: FieldCount
+), pe = Object.assign(ne, {
+  Affixes: V,
+  Combobox: te,
+  Datalist: B,
+  Option: G,
+  Description: K,
+  Label: J,
+  Count: M
 });
 export {
-  Field,
-  FieldComp
+  pe as Field,
+  ne as FieldComp
 };
 //# sourceMappingURL=field.js.map