@folkehelseinstituttet/designsystem 0.37.0 → 0.38.1

package/fhi-body.js

@@ -1,4 +1,4 @@
-import { i as g, n, a as f, b as p, t as y } from "./property-DGdAXcEz.js";
+import { i as g, n, a as f, b as p, t as y } from "./property-B2Ico5CW.js";
 var m = Object.defineProperty, d = Object.getOwnPropertyDescriptor, s = (t, r, o, a) => {
   for (var e = a > 1 ? void 0 : a ? d(r, o) : r, l = t.length - 1, h; l >= 0; l--)
     (h = t[l]) && (e = (a ? h(r, o, e) : h(e)) || e);

package/fhi-button.js

@@ -1,4 +1,4 @@
-import { i as u, n as i, a as s, b, t as v } from "./property-DGdAXcEz.js";
+import { i as u, n as i, a as s, b, t as v } from "./property-B2Ico5CW.js";
 var g = Object.defineProperty, h = Object.getOwnPropertyDescriptor, n = (r, e, a, c) => {
   for (var t = c > 1 ? void 0 : c ? h(e, a) : e, o = r.length - 1, d; o >= 0; o--)
     (d = r[o]) && (t = (c ? d(e, a, t) : d(t)) || t);

package/fhi-checkbox.js

@@ -1,5 +1,5 @@
-import { i as b, n as a, a as v, b as s, t as k } from "./property-DGdAXcEz.js";
-import { o as d } from "./if-defined-BW6N1yuF.js";
+import { i as b, n as a, a as v, b as s, t as k } from "./property-B2Ico5CW.js";
+import { o as d } from "./if-defined-B_sR6Mtk.js";
 var p = Object.defineProperty, u = Object.getOwnPropertyDescriptor, c = (r, t, i, h) => {
   for (var e = h > 1 ? void 0 : h ? u(t, i) : t, l = r.length - 1, n; l >= 0; l--)
     (n = r[l]) && (e = (h ? n(t, i, e) : n(e)) || e);

package/fhi-data-table-cell.js

@@ -1,4 +1,4 @@
-import { i as d, n as s, a as f, b as c, t as p } from "./property-DGdAXcEz.js";
+import { i as d, n as s, a as f, b as c, t as p } from "./property-B2Ico5CW.js";
 var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (e, a, r, l) => {
   for (var t = l > 1 ? void 0 : l ? b(a, r) : a, o = e.length - 1, n; o >= 0; o--)
     (n = e[o]) && (t = (l ? n(a, r, t) : n(t)) || t);

package/fhi-data-table-row.js

@@ -1,4 +1,4 @@
-import { i as c, n as f, a as u, b as v, t as w } from "./property-DGdAXcEz.js";
+import { i as c, n as f, a as u, b as v, t as w } from "./property-B2Ico5CW.js";
 import { e as p } from "./base-D76d76ww.js";
 /**
  * @license

package/fhi-data-table.js

@@ -1,4 +1,4 @@
-import { i as h, n as b, a as c, b as n, t as f } from "./property-DGdAXcEz.js";
+import { i as h, n as b, a as c, b as n, t as f } from "./property-B2Ico5CW.js";
 import "./fhi-grid.js";
 import "./fhi-body.js";
 var u = Object.defineProperty, p = Object.getOwnPropertyDescriptor, s = (t, r, l, o) => {

package/fhi-date-input.js

@@ -1,31 +1,31 @@
-import { i as c, n as o, a as u, b as l, t as g } from "./property-DGdAXcEz.js";
-import { e as y } from "./query-Ddbd72Um.js";
-import { o as d } from "./if-defined-BW6N1yuF.js";
+import { i as c, n as r, a as u, b as l, t as f } from "./property-B2Ico5CW.js";
+import { e as g } from "./query-Ddbd72Um.js";
+import { o as p } from "./if-defined-B_sR6Mtk.js";
 import "./fhi-icon-calendar.js";
 const v = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, a, p, n) => {
-  for (var i = n > 1 ? void 0 : n ? m(a, p) : a, s = t.length - 1, h; s >= 0; s--)
-    (h = t[s]) && (i = (n ? h(a, p, i) : h(i)) || i);
-  return n && i && f(a, p, i), i;
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (e, i, s, n) => {
+  for (var o = n > 1 ? void 0 : n ? y(i, s) : i, h = e.length - 1, d; h >= 0; h--)
+    (d = e[h]) && (o = (n ? d(i, s, o) : d(o)) || o);
+  return n && o && b(i, s, o), o;
 };
-const b = "fhi-date-input";
-let e = class extends u {
+const m = "fhi-date-input";
+let t = class extends u {
   constructor() {
     super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.min = void 0, this.max = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
   }
   get name() {
     return this._name;
   }
-  set name(t) {
-    const a = this._name;
-    this._name = t, this.requestUpdate("name", a), this._internals.setFormValue(this.value ?? null);
+  set name(e) {
+    const i = this._name;
+    this._name = e, this.requestUpdate("name", i), this._internals.setFormValue(this.value ?? null);
   }
   get value() {
     return this._value;
   }
-  set value(t) {
-    const a = this._value;
-    this._value = t, this.requestUpdate("value", a), this._internals.setFormValue(this._value ?? null);
+  set value(e) {
+    const i = this._value;
+    this._value = e, this.requestUpdate("value", i), this._internals.setFormValue(this._value ?? null);
   }
   connectedCallback() {
     super.connectedCallback(), this._internals.setFormValue(this.value ?? null);
@@ -41,8 +41,8 @@ let e = class extends u {
       })
     );
   }
-  _handleInput(t) {
-    this.value = this._input.value, this._internals.setFormValue(this.value ?? null), t.stopPropagation(), this._dispatchInputEvent();
+  _handleInput(e) {
+    this.value = this._input.value, this._internals.setFormValue(this.value ?? null), e.stopPropagation(), this._dispatchInputEvent();
   }
   _dispatchInputEvent() {
     this.dispatchEvent(
@@ -52,14 +52,14 @@ let e = class extends u {
       })
     );
   }
-  _handleKeyDown(t) {
-    t.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
+  _handleKeyDown(e) {
+    e.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
   }
   formResetCallback() {
     this.value = this.getAttribute("value"), this._internals.setFormValue(this.value ?? null);
   }
-  _showDate(t) {
-    t && t.type == "keydown" && t.key !== "Enter" && t.code !== "Space" || this._input.showPicker();
+  _showDate(e) {
+    e && e.type == "keydown" && e.key !== "Enter" && e.code !== "Space" || this._input.showPicker();
   }
   render() {
     return l`
@@ -69,9 +69,9 @@ let e = class extends u {
         <input
           type="date"
           id="input-element"
-          name=${d(this.name)}
-          min=${d(this.min)}
-          max=${d(this.max)}
+          name=${p(this.name)}
+          min=${p(this.min)}
+          max=${p(this.max)}
           .value=${this.value ?? ""}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
@@ -94,186 +94,73 @@ let e = class extends u {
     `;
   }
 };
-e.formAssociated = !0;
-e.styles = c`
-    :host {
-      --typography-font-family: var(--fhi-font-family-default);
-
-      --opacity-disabled: var(--fhi-opacity-disabled);
-
-      --dimension-width: calc(var(--fhi-spacing-1000) * 2);
-
-      /* label */
-      --color-label-text: var(--fhi-color-neutral-text-default);
-      --color-label-text-error: var(--fhi-color-danger-text-default);
-
-      --typography-label-font-family: var(--fhi-typography-label-small-font);
-      --typography-label-font-weight: var(
-        --fhi-typography-label-small-font-weight
-      );
-      --typography-label-font-size: var(--fhi-typography-label-small-font-size);
-      --typography-label-line-height: var(
-        --fhi-typography-label-small-line-height
-      );
-      --typography-label-letter-spacing: var(
-        --fhi-typography-label-small-letter-spacing
-      );
-      --dimension-label-margin-bottom: var(--fhi-spacing-050);
-
-      /* input */
-      --color-input-text: var(--fhi-color-neutral-text-default);
-      --color-input-text-error: var(--fhi-color-danger-text-default);
-      --color-input-background: var(--fhi-color-neutral-background-default);
-      --color-input-background-active: var(
-        --fhi-color-accent-background-default
-      );
-      --color-input-background-hover: var(--fhi-color-accent-background-subtle);
-      --color-input-background-error: var(
-        --fhi-color-danger-background-default
-      );
-      --color-input-border: var(--fhi-color-neutral-border-default);
-      --color-input-border-hover: var(--fhi-color-accent-border-default);
-      --color-input-border-active: var(--fhi-color-accent-border-strong);
-      --color-input-border-error: var(--fhi-color-danger-border-strong);
-      --color-input-border-disabled: var(--fhi-color-neutral-border-default);
-      --color-input-selection-background: var(
-        --fhi-color-accent-surface-active
-      );
-
-      --typography-input-font-weight: var(
-        --fhi-typography-body-medium-font-weight
-      );
-      --typography-input-font-size: var(--fhi-typography-body-medium-font-size);
-      --typography-input-line-height: var(
-        --fhi-typography-body-medium-line-height
-      );
-      --typography-input-letter-spacing: var(
-        --fhi-typography-body-medium-letter-spacing
-      );
-
-      --dimension-input-border-width: var(--fhi-dimension-border-width);
-
-      --dimension-input-height: var(--fhi-spacing-500);
-      --dimension-input-border-radius: var(--fhi-border-radius-050);
-      --dimension-input-padding-left: var(--fhi-spacing-150);
-      --dimension-input-padding-right: var(--fhi-spacing-150);
-
-      --motion-input-transition: all var(--fhi-motion-ease-default)
-        var(--fhi-motion-duration-quick);
-
-      /* icon */
-      --dimension-icon-margin-right: var(--fhi-spacing-100);
-      --dimension-icon-padding-left: var(--fhi-spacing-050);
-
-      --color-icon-focus-outline: var(--fhi-color-accent-border-default);
-
-      --dimension-icon-border-radius: var(--fhi-border-radius-050);
-
-      /* message */
-      --color-message-text: var(--fhi-color-neutral-text-default);
-      --color-message-text-error: var(--fhi-color-danger-text-subtle);
-
-      --typography-message-font-weight: var(
-        --fhi-typography-body-small-font-weight
-      );
-      --typography-message-font-size: var(
-        --fhi-typography-body-small-font-size
-      );
-      --typography-message-line-height: var(
-        --fhi-typography-body-small-line-height
-      );
-      --typography-message-letter-spacing: var(
-        --fhi-typography-body-small-letter-spacing
-      );
-
-      --dimension-message-margin-top: var(--fhi-spacing-050);
-
-      /* help-text */
-      --color-help-text-text: var(--fhi-color-neutral-text-subtle);
-      --color-help-text-text-error: var(--fhi-color-danger-text-default);
-
-      --typography-help-text-font-weight: var(
-        --fhi-typography-body-small-font-weight
-      );
-      --typography-help-text-font-size: var(
-        --fhi-typography-body-small-font-size
-      );
-      --typography-help-text-line-height: var(
-        --fhi-typography-body-small-line-height
-      );
-      --typography-help-text-letter-spacing: var(
-        --fhi-typography-body-small-letter-spacing
-      );
-      --dimension-help-text-margin-bottom: var(--fhi-spacing-050);
-    }
-
+t.formAssociated = !0;
+t.styles = c`
     :host {
       display: flex;
       flex-direction: column;
-      font-family: var(--typography-font-family);
+      font-family: var(--fhi-font-family-default);
       -webkit-font-smoothing: antialiased;
-      width: var(--dimension-width);
+      width: calc(var(--fhi-spacing-1000) * 2);
 
       label {
-        font-weight: var(--typography-label-font-weight);
-        font-size: var(--typography-label-font-size);
-        line-height: var(--typography-label-line-height);
-        letter-spacing: var(--typography-label-letter-spacing);
-        color: var(--color-label-text);
-        margin: 0 0 var(--dimension-label-margin-bottom) 0;
+        font-weight: var(--fhi-typography-label-small-font-weight);
+        font-size: var(--fhi-typography-label-small-font-size);
+        line-height: var(--fhi-typography-label-small-line-height);
+        letter-spacing: var(--fhi-typography-label-small-letter-spacing);
+        color: var(--fhi-color-neutral-text-default);
+        margin: 0 0 var(--fhi-spacing-050) 0;
       }
       label:has(+ p) {
         margin: 0 0 0 0;
       }
 
       input[type='date'] {
-        font-family: var(--typography-font-family);
-        font-weight: var(--typography-input-font-weight);
-        font-size: var(--typography-input-font-size);
-        line-height: var(--typography-input-line-height);
-        letter-spacing: var(--typography-input-letter-spacing);
+        font-family: var(--fhi-font-family-default);
+        font-weight: var(--fhi-typography-body-medium-font-weight);
+        font-size: var(--fhi-typography-body-medium-font-size);
+        line-height: var(--fhi-typography-body-medium-line-height);
+        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
         box-sizing: border-box;
-        height: var(--dimension-input-height);
-        border: var(--dimension-input-border-width) solid
-          var(--color-input-border);
-        border-radius: var(--dimension-input-border-radius);
-        padding: 0 var(--dimension-input-padding-right) 0
-          var(--dimension-input-padding-left);
-        margin-top: var(--dimension-input-margin-top);
-        color: var(--color-input-text);
-        background-color: var(--color-input-background);
-        transition: var(--motion-input-transition);
+        height: var(--fhi-spacing-500);
+        border: var(--fhi-dimension-border-width) solid
+          var(--fhi-color-neutral-border-default);
+        border-radius: var(--fhi-border-radius-050);
+        padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);
+
+        color: var(--fhi-color-neutral-text-default);
+        background-color: var(--fhi-color-neutral-background-default);
+        transition: all var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
         appearance: none;
         -moz-appearance: none;
         -webkit-appearance: none;
         width: 100%;
         &:hover {
-          border-color: var(--color-input-border-hover);
-          background-color: var(--color-input-background-hover);
+          border-color: var(--fhi-color-accent-border-default);
+          background-color: var(--fhi-color-accent-background-subtle);
         }
         &:focus {
-          outline: none;
-          border-color: var(--color-input-border-active);
-          background-color: var(--color-input-background-active);
+          border-color: var(--fhi-color-accent-border-strong);
+          background-color: var(--fhi-color-accent-background-default);
         }
       }
       .message {
-        margin: var(--dimension-message-margin-top) 0 0 0;
-        color: var(--color-message-text);
-        font-weight: var(--typography-message-font-weight);
-        font-size: var(--typography-message-font-size);
-        line-height: var(--typography-message-line-height);
-        letter-spacing: var(--typography-message-letter-spacing);
+        margin: var(--fhi-spacing-050) 0 0 0;
+        color: var(--fhi-color-neutral-text-default);
+        font-weight: var(--fhi-typography-body-small-font-weight);
+        font-size: var(--fhi-typography-body-small-font-size);
+        line-height: var(--fhi-typography-body-small-line-height);
+        letter-spacing: var(--fhi-typography-body-small-letter-spacing);
       }
 
       .help-text {
-        margin: var(--dimension-help-text-margin-top) 0 0 0;
-        color: var(--color-help-text-text);
-        font-weight: var(--typography-help-text-font-weight);
-        font-size: var(--typography-help-text-font-size);
-        line-height: var(--typography-help-text-line-height);
-        letter-spacing: var(--typography-help-text-letter-spacing);
-        margin: 0 0 var(--dimension-help-text-margin-bottom) 0;
+        color: var(--fhi-color-neutral-text-subtle);
+        font-weight: var(--fhi-typography-body-small-font-weight);
+        font-size: var(--fhi-typography-body-small-font-size);
+        line-height: var(--fhi-typography-body-small-line-height);
+        letter-spacing: var(--fhi-typography-body-small-letter-spacing);
+        margin: 0 0 var(--fhi-spacing-050) 0;
       }
       [type='date']::-webkit-inner-spin-button {
         opacity: 0;
@@ -290,7 +177,7 @@ e.styles = c`
         }
       }
       .input-container {
-        height: var(--dimension-input-height);
+        height: var(--fhi-spacing-500);
         position: relative;
       }
       .date-icon {
@@ -298,26 +185,27 @@ e.styles = c`
         right: 0;
         top: 50%;
         transform: translateY(-50%);
-        margin-right: var(--dimension-icon-margin-right);
+        margin-right: var(--fhi-spacing-100);
         height: fit-content;
-        transition: var(--motion-input-transition);
-        border-radius: var(--dimension-icon-border-radius);
+        transition: all var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
+        border-radius: var(--fhi-border-radius-050);
         &:focus {
-          outline: solid var(--color-icon-focus-outline);
+          outline: solid var(--fhi-color-accent-border-default);
         }
       }
     }
 
     :host([disabled]) {
-      opacity: var(--opacity-disabled);
+      opacity: var(--fhi-opacity-disabled);
       cursor: not-allowed;
       * {
         cursor: not-allowed;
       }
       input[type='date'] {
         &:hover {
-          border-color: var(--color-input-border);
-          background-color: var(--color-input-background);
+          border-color: var(--fhi-color-neutral-border-default);
+          background-color: var(--fhi-color-neutral-background-default);
         }
       }
       .date-icon {
@@ -333,8 +221,8 @@ e.styles = c`
         border: unset;
         border-radius: unset;
         background-color: unset;
-        border-left: var(--dimension-input-border-width) solid
-          var(--color-input-border);
+        border-left: var(--fhi-dimension-border-width) solid
+          var(--fhi-color-neutral-border-default);
         &:hover + .date-icon {
           background-color: unset;
         }
@@ -347,22 +235,22 @@ e.styles = c`
 
     :host([status='error']:not([disabled]):not([readonly])) {
       label {
-        color: var(--color-label-text-error);
+        color: var(--fhi-color-danger-text-default);
       }
       input[type='date'] {
-        border-color: var(--color-input-border-error);
-        background-color: var(--color-input-background-error);
-        color: var(--color-input-text-error);
+        border-color: var(--fhi-color-danger-border-strong);
+        background-color: var(--fhi-color-danger-background-default);
+        color: var(--fhi-color-danger-text-default);
       }
       .message {
-        color: var(--color-message-text-error);
+        color: var(--fhi-color-danger-text-subtle);
       }
       .help-text {
-        color: var(--color-help-text-text-error);
+        color: var(--fhi-color-danger-text-default);
       }
       .date-icon {
-        background-color: var(--color-input-background-error);
-        color: var(--color-input-text-error);
+        background-color: var(--fhi-color-danger-background-default);
+        color: var(--fhi-color-danger-text-default);
       }
     }
 
@@ -375,44 +263,44 @@ e.styles = c`
       }
     }
   `;
-r([
-  o({ type: String })
-], e.prototype, "label", 2);
-r([
-  o({ type: String })
-], e.prototype, "message", 2);
-r([
-  o({ type: String, attribute: "help-text" })
-], e.prototype, "helpText", 2);
-r([
-  o({ type: String })
-], e.prototype, "min", 2);
-r([
-  o({ type: String })
-], e.prototype, "max", 2);
-r([
-  o({ type: String, reflect: !0 })
-], e.prototype, "status", 2);
-r([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "readonly", 2);
-r([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-r([
-  y("#input-element")
-], e.prototype, "_input", 2);
-r([
-  o({ type: String, reflect: !0 })
-], e.prototype, "name", 1);
-r([
-  o({ type: String })
-], e.prototype, "value", 1);
-e = r([
-  g(b)
-], e);
+a([
+  r({ type: String })
+], t.prototype, "label", 2);
+a([
+  r({ type: String })
+], t.prototype, "message", 2);
+a([
+  r({ type: String, attribute: "help-text" })
+], t.prototype, "helpText", 2);
+a([
+  r({ type: String })
+], t.prototype, "min", 2);
+a([
+  r({ type: String })
+], t.prototype, "max", 2);
+a([
+  r({ type: String, reflect: !0 })
+], t.prototype, "status", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "readonly", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+a([
+  g("#input-element")
+], t.prototype, "_input", 2);
+a([
+  r({ type: String, reflect: !0 })
+], t.prototype, "name", 1);
+a([
+  r({ type: String })
+], t.prototype, "value", 1);
+t = a([
+  f(m)
+], t);
 export {
-  e as FhiDateInput,
-  b as FhiDateInputSelector
+  t as FhiDateInput,
+  m as FhiDateInputSelector
 };
 //# sourceMappingURL=fhi-date-input.js.map

package/fhi-date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-date-input.js","sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n *\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n  /** @internal */\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the input field.\n   * An input field should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the input field.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The help-text shown above the input field.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n   * @type {string}\n   */\n  @property({ type: String }) min?: FhiDateValue = undefined;\n\n  /**\n   * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n   * @type {string}\n   */\n  @property({ type: String }) max?: FhiDateValue = undefined;\n\n  /**\n   * Sets the visual status of the input. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the input.  This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) disabled? = false;\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _name?: string | undefined = undefined;\n\n  /**\n   * The name of the input. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n\n  set name(newName: string | undefined) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _value?: string = '';\n\n  /**\n   * The default value of the input field, formatted as `YYYY-MM-DD`.\n   *\n   * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): FhiDateValue {\n    return this._value as FhiDateValue;\n  }\n\n  set value(newValue: FhiDateValue) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value ?? null);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _handleChange(): void {\n    this._dispatchChangeEvent();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleInput(event: Event): void {\n    this.value = this._input.value as FhiDateValue;\n    this._internals.setFormValue(this.value ?? null);\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') as FhiDateValue;\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _showDate(event?: KeyboardEvent) {\n    if (\n      event &&\n      event.type == 'keydown' &&\n      event.key !== 'Enter' &&\n      event.code !== 'Space'\n    ) {\n      return;\n    }\n    this._input.showPicker();\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\n      <div class=\"input-container\">\n        <input\n          type=\"date\"\n          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${this.value ?? ''}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          @change=${this._handleChange}\n          @input=${this._handleInput}\n          @keydown=${this._handleKeyDown}\n        />\n        <span\n          class=\"date-icon\"\n          @click=${this._showDate}\n          @keydown=${this._showDate}\n          tabindex=${isSafari() ? '-1' : '0'}\n          role=\"button\"\n          aria-label=\"Vis datovelger\"\n          aria-haspopup=\"true\"\n          ><fhi-icon-calendar></fhi-icon-calendar\n        ></span>\n      </div>\n      ${this.message && html`<p class=\"message\">${this.message}</p>`}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --typography-font-family: var(--fhi-font-family-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      --dimension-width: calc(var(--fhi-spacing-1000) * 2);\n\n      /* label */\n      --color-label-text: var(--fhi-color-neutral-text-default);\n      --color-label-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-label-font-family: var(--fhi-typography-label-small-font);\n      --typography-label-font-weight: var(\n        --fhi-typography-label-small-font-weight\n      );\n      --typography-label-font-size: var(--fhi-typography-label-small-font-size);\n      --typography-label-line-height: var(\n        --fhi-typography-label-small-line-height\n      );\n      --typography-label-letter-spacing: var(\n        --fhi-typography-label-small-letter-spacing\n      );\n      --dimension-label-margin-bottom: var(--fhi-spacing-050);\n\n      /* input */\n      --color-input-text: var(--fhi-color-neutral-text-default);\n      --color-input-text-error: var(--fhi-color-danger-text-default);\n      --color-input-background: var(--fhi-color-neutral-background-default);\n      --color-input-background-active: var(\n        --fhi-color-accent-background-default\n      );\n      --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n      --color-input-background-error: var(\n        --fhi-color-danger-background-default\n      );\n      --color-input-border: var(--fhi-color-neutral-border-default);\n      --color-input-border-hover: var(--fhi-color-accent-border-default);\n      --color-input-border-active: var(--fhi-color-accent-border-strong);\n      --color-input-border-error: var(--fhi-color-danger-border-strong);\n      --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n      --color-input-selection-background: var(\n        --fhi-color-accent-surface-active\n      );\n\n      --typography-input-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n      --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n      --typography-input-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-input-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-input-height: var(--fhi-spacing-500);\n      --dimension-input-border-radius: var(--fhi-border-radius-050);\n      --dimension-input-padding-left: var(--fhi-spacing-150);\n      --dimension-input-padding-right: var(--fhi-spacing-150);\n\n      --motion-input-transition: all var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      /* icon */\n      --dimension-icon-margin-right: var(--fhi-spacing-100);\n      --dimension-icon-padding-left: var(--fhi-spacing-050);\n\n      --color-icon-focus-outline: var(--fhi-color-accent-border-default);\n\n      --dimension-icon-border-radius: var(--fhi-border-radius-050);\n\n      /* message */\n      --color-message-text: var(--fhi-color-neutral-text-default);\n      --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n      --typography-message-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-message-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-message-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-message-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n\n      --dimension-message-margin-top: var(--fhi-spacing-050);\n\n      /* help-text */\n      --color-help-text-text: var(--fhi-color-neutral-text-subtle);\n      --color-help-text-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-help-text-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-help-text-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-help-text-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-help-text-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n      --dimension-help-text-margin-bottom: var(--fhi-spacing-050);\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--typography-font-family);\n      -webkit-font-smoothing: antialiased;\n      width: var(--dimension-width);\n\n      label {\n        font-weight: var(--typography-label-font-weight);\n        font-size: var(--typography-label-font-size);\n        line-height: var(--typography-label-line-height);\n        letter-spacing: var(--typography-label-letter-spacing);\n        color: var(--color-label-text);\n        margin: 0 0 var(--dimension-label-margin-bottom) 0;\n      }\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input[type='date'] {\n        font-family: var(--typography-font-family);\n        font-weight: var(--typography-input-font-weight);\n        font-size: var(--typography-input-font-size);\n        line-height: var(--typography-input-line-height);\n        letter-spacing: var(--typography-input-letter-spacing);\n        box-sizing: border-box;\n        height: var(--dimension-input-height);\n        border: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        border-radius: var(--dimension-input-border-radius);\n        padding: 0 var(--dimension-input-padding-right) 0\n          var(--dimension-input-padding-left);\n        margin-top: var(--dimension-input-margin-top);\n        color: var(--color-input-text);\n        background-color: var(--color-input-background);\n        transition: var(--motion-input-transition);\n        appearance: none;\n        -moz-appearance: none;\n        -webkit-appearance: none;\n        width: 100%;\n        &:hover {\n          border-color: var(--color-input-border-hover);\n          background-color: var(--color-input-background-hover);\n        }\n        &:focus {\n          outline: none;\n          border-color: var(--color-input-border-active);\n          background-color: var(--color-input-background-active);\n        }\n      }\n      .message {\n        margin: var(--dimension-message-margin-top) 0 0 0;\n        color: var(--color-message-text);\n        font-weight: var(--typography-message-font-weight);\n        font-size: var(--typography-message-font-size);\n        line-height: var(--typography-message-line-height);\n        letter-spacing: var(--typography-message-letter-spacing);\n      }\n\n      .help-text {\n        margin: var(--dimension-help-text-margin-top) 0 0 0;\n        color: var(--color-help-text-text);\n        font-weight: var(--typography-help-text-font-weight);\n        font-size: var(--typography-help-text-font-size);\n        line-height: var(--typography-help-text-line-height);\n        letter-spacing: var(--typography-help-text-letter-spacing);\n        margin: 0 0 var(--dimension-help-text-margin-bottom) 0;\n      }\n      [type='date']::-webkit-inner-spin-button {\n        opacity: 0;\n      }\n      [type='date']::-webkit-calendar-picker-indicator {\n        opacity: 0;\n        -webkit-appearance: none;\n        display: none;\n        visibility: hidden;\n\n        &:target {\n          outline: solid;\n          font-size: 5rem;\n        }\n      }\n      .input-container {\n        height: var(--dimension-input-height);\n        position: relative;\n      }\n      .date-icon {\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: var(--dimension-icon-margin-right);\n        height: fit-content;\n        transition: var(--motion-input-transition);\n        border-radius: var(--dimension-icon-border-radius);\n        &:focus {\n          outline: solid var(--color-icon-focus-outline);\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      cursor: not-allowed;\n      * {\n        cursor: not-allowed;\n      }\n      input[type='date'] {\n        &:hover {\n          border-color: var(--color-input-border);\n          background-color: var(--color-input-background);\n        }\n      }\n      .date-icon {\n        background-color: unset;\n        &:focus {\n          outline: none;\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input[type='date'] {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        &:hover + .date-icon {\n          background-color: unset;\n        }\n      }\n      .date-icon {\n        background-color: unset;\n        display: none;\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--color-label-text-error);\n      }\n      input[type='date'] {\n        border-color: var(--color-input-border-error);\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n      .message {\n        color: var(--color-message-text-error);\n      }\n      .help-text {\n        color: var(--color-help-text-text-error);\n      }\n      .date-icon {\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n    }\n\n    @-moz-document url-prefix() {\n      :host {\n        .date-icon {\n          display: none;\n          visibility: hidden;\n        }\n      }\n    }\n  `;\n}\n"],"names":["isSafari","FhiDateInputSelector","FhiDateInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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A;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA/MYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfX,EASiB,WAAA,SAAA,CAAA;AAOAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfX,EAgBiB,WAAA,WAAA,CAAA;AAOwBU,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAvBvCX,EAuByC,WAAA,YAAA,CAAA;AAOxBU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9BfX,EA8BiB,WAAA,OAAA,CAAA;AAMAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfX,EAoCiB,WAAA,OAAA,CAAA;AASeU,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7C9BX,EA6CgC,WAAA,UAAA,CAAA;AAOCU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApD/BX,EAoDiC,WAAA,YAAA,CAAA;AAOAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3D/BX,EA2DiC,WAAA,YAAA,CAAA;AAGpCU,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GA7DZZ,EA8DH,WAAA,UAAA,CAAA;AAcJU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3E9BX,EA4EP,WAAA,QAAA,CAAA;AAwBAU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnGfX,EAoGP,WAAA,SAAA,CAAA;AApGOA,IAANU,EAAA;AAAA,EADNG,EAAcd,CAAoB;AAAA,GACtBC,CAAA;"}
+{"version":3,"file":"fhi-date-input.js","sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n *\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n  /** @internal */\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the input field.\n   * An input field should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the input field.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The help-text shown above the input field.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n   * @type {string}\n   */\n  @property({ type: String }) min?: FhiDateValue = undefined;\n\n  /**\n   * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n   * @type {string}\n   */\n  @property({ type: String }) max?: FhiDateValue = undefined;\n\n  /**\n   * Sets the visual status of the input. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the input.  This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) disabled? = false;\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _name?: string | undefined = undefined;\n\n  /**\n   * The name of the input. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n\n  set name(newName: string | undefined) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _value?: string = '';\n\n  /**\n   * The default value of the input field, formatted as `YYYY-MM-DD`.\n   *\n   * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): FhiDateValue {\n    return this._value as FhiDateValue;\n  }\n\n  set value(newValue: FhiDateValue) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value ?? null);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _handleChange(): void {\n    this._dispatchChangeEvent();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleInput(event: Event): void {\n    this.value = this._input.value as FhiDateValue;\n    this._internals.setFormValue(this.value ?? null);\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') as FhiDateValue;\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _showDate(event?: KeyboardEvent) {\n    if (\n      event &&\n      event.type == 'keydown' &&\n      event.key !== 'Enter' &&\n      event.code !== 'Space'\n    ) {\n      return;\n    }\n    this._input.showPicker();\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\n      <div class=\"input-container\">\n        <input\n          type=\"date\"\n          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${this.value ?? ''}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          @change=${this._handleChange}\n          @input=${this._handleInput}\n          @keydown=${this._handleKeyDown}\n        />\n        <span\n          class=\"date-icon\"\n          @click=${this._showDate}\n          @keydown=${this._showDate}\n          tabindex=${isSafari() ? '-1' : '0'}\n          role=\"button\"\n          aria-label=\"Vis datovelger\"\n          aria-haspopup=\"true\"\n          ><fhi-icon-calendar></fhi-icon-calendar\n        ></span>\n      </div>\n      ${this.message && html`<p class=\"message\">${this.message}</p>`}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n      width: calc(var(--fhi-spacing-1000) * 2);\n\n      label {\n        font-weight: var(--fhi-typography-label-small-font-weight);\n        font-size: var(--fhi-typography-label-small-font-size);\n        line-height: var(--fhi-typography-label-small-line-height);\n        letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n        color: var(--fhi-color-neutral-text-default);\n        margin: 0 0 var(--fhi-spacing-050) 0;\n      }\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input[type='date'] {\n        font-family: var(--fhi-font-family-default);\n        font-weight: var(--fhi-typography-body-medium-font-weight);\n        font-size: var(--fhi-typography-body-medium-font-size);\n        line-height: var(--fhi-typography-body-medium-line-height);\n        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n        box-sizing: border-box;\n        height: var(--fhi-spacing-500);\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        border-radius: var(--fhi-border-radius-050);\n        padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n\n        color: var(--fhi-color-neutral-text-default);\n        background-color: var(--fhi-color-neutral-background-default);\n        transition: all var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n        appearance: none;\n        -moz-appearance: none;\n        -webkit-appearance: none;\n        width: 100%;\n        &:hover {\n          border-color: var(--fhi-color-accent-border-default);\n          background-color: var(--fhi-color-accent-background-subtle);\n        }\n        &:focus {\n          border-color: var(--fhi-color-accent-border-strong);\n          background-color: var(--fhi-color-accent-background-default);\n        }\n      }\n      .message {\n        margin: var(--fhi-spacing-050) 0 0 0;\n        color: var(--fhi-color-neutral-text-default);\n        font-weight: var(--fhi-typography-body-small-font-weight);\n        font-size: var(--fhi-typography-body-small-font-size);\n        line-height: var(--fhi-typography-body-small-line-height);\n        letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n      }\n\n      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n        font-weight: var(--fhi-typography-body-small-font-weight);\n        font-size: var(--fhi-typography-body-small-font-size);\n        line-height: var(--fhi-typography-body-small-line-height);\n        letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n        margin: 0 0 var(--fhi-spacing-050) 0;\n      }\n      [type='date']::-webkit-inner-spin-button {\n        opacity: 0;\n      }\n      [type='date']::-webkit-calendar-picker-indicator {\n        opacity: 0;\n        -webkit-appearance: none;\n        display: none;\n        visibility: hidden;\n\n        &:target {\n          outline: solid;\n          font-size: 5rem;\n        }\n      }\n      .input-container {\n        height: var(--fhi-spacing-500);\n        position: relative;\n      }\n      .date-icon {\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: var(--fhi-spacing-100);\n        height: fit-content;\n        transition: all var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n        border-radius: var(--fhi-border-radius-050);\n        &:focus {\n          outline: solid var(--fhi-color-accent-border-default);\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      cursor: not-allowed;\n      * {\n        cursor: not-allowed;\n      }\n      input[type='date'] {\n        &:hover {\n          border-color: var(--fhi-color-neutral-border-default);\n          background-color: var(--fhi-color-neutral-background-default);\n        }\n      }\n      .date-icon {\n        background-color: unset;\n        &:focus {\n          outline: none;\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input[type='date'] {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        &:hover + .date-icon {\n          background-color: unset;\n        }\n      }\n      .date-icon {\n        background-color: unset;\n        display: none;\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--fhi-color-danger-text-default);\n      }\n      input[type='date'] {\n        border-color: var(--fhi-color-danger-border-strong);\n        background-color: var(--fhi-color-danger-background-default);\n        color: var(--fhi-color-danger-text-default);\n      }\n      .message {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      .help-text {\n        color: var(--fhi-color-danger-text-default);\n      }\n      .date-icon {\n        background-color: var(--fhi-color-danger-background-default);\n        color: var(--fhi-color-danger-text-default);\n      }\n    }\n\n    @-moz-document url-prefix() {\n      :host {\n        .date-icon {\n          display: none;\n          visibility: hidden;\n        }\n      }\n    }\n  `;\n}\n"],"names":["isSafari","FhiDateInputSelector","FhiDateInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}

package/fhi-display.js

@@ -1,5 +1,5 @@
-import { i as n, n as p, a as g, b as f, t as y } from "./property-DGdAXcEz.js";
-import { o as m } from "./unsafe-html-lUureUEN.js";
+import { i as n, n as p, a as g, b as f, t as y } from "./property-B2Ico5CW.js";
+import { o as m } from "./unsafe-html-DfuTUjUu.js";
 var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (e, t, s, a) => {
   for (var i = a > 1 ? void 0 : a ? d(t, s) : t, o = e.length - 1, h; o >= 0; o--)
     (h = e[o]) && (i = (a ? h(t, s, i) : h(i)) || i);

package/fhi-flex.js

@@ -1,4 +1,4 @@
-import { i as g, n, a as h, b as m, t as c } from "./property-DGdAXcEz.js";
+import { i as g, n, a as h, b as m, t as c } from "./property-B2Ico5CW.js";
 var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, a, r, o) => {
   for (var e = o > 1 ? void 0 : o ? f(a, r) : a, p = s.length - 1, l; p >= 0; p--)
     (l = s[p]) && (e = (o ? l(a, r, e) : l(e)) || e);