@folkehelseinstituttet/designsystem 0.37.0 → 0.38.1

package/fhi-text-input.js

@@ -1,13 +1,13 @@
-import { i as c, n as a, a as g, b as s, t as u } from "./property-DGdAXcEz.js";
-import { e as y } from "./query-Ddbd72Um.js";
-import { o as d } from "./if-defined-BW6N1yuF.js";
-var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, e, i, l) => {
-  for (var n = l > 1 ? void 0 : l ? f(e, i) : e, p = t.length - 1, h; p >= 0; p--)
-    (h = t[p]) && (n = (l ? h(e, i, n) : h(n)) || n);
-  return l && n && v(e, i, n), n;
+import { i as c, n as r, a as u, b as s, 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";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (t, e, i, n) => {
+  for (var l = n > 1 ? void 0 : n ? b(e, i) : e, h = t.length - 1, d; h >= 0; h--)
+    (d = t[h]) && (l = (n ? d(e, i, l) : d(l)) || l);
+  return n && l && v(e, i, l), l;
 };
-const b = "fhi-text-input";
-let o = class extends g {
+const y = "fhi-text-input";
+let o = class extends u {
   constructor() {
     super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.placeholder = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
   }
@@ -83,8 +83,8 @@ let o = class extends g {
       <div class="input-container">
         <input
           id="input-element"
-          name=${d(this.name)}
-          placeholder=${d(this.placeholder)}
+          name=${p(this.name)}
+          placeholder=${p(this.placeholder)}
           .value=${this.value}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
@@ -102,115 +102,24 @@ let o = class extends g {
 o.formAssociated = !0;
 o.styles = c`
     :host {
-      --typography-font-family: var(--fhi-font-family-default);
-
-      --opacity-disabled: var(--fhi-opacity-disabled);
-
-      /* label */
-      --color-label-text: var(--fhi-color-neutral-text-default);
-      --color-label-text-error: var(--fhi-color-danger-text-default);
-
-      --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-placeholder: var(--fhi-color-neutral-base-default);
-      --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);
-
-      --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);
-
-      /* 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);
+      --fhi-text-input-placeholder-color: unset;
     }
 
     :host {
       display: flex;
       flex-direction: column;
-      font-family: var(--typography-font-family);
+      font-family: var(--fhi-font-family-default);
       -webkit-font-smoothing: antialiased;
 
+      --fhi-text-input-placeholder-color: var(--fhi-color-neutral-base-default);
+
       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) {
@@ -220,30 +129,30 @@ o.styles = c`
       input {
         box-sizing: border-box;
         flex: 1 1 auto;
-        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);
-        color: var(--color-input-text);
-        background-color: var(--color-input-background);
-        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);
-        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);
+        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);
+        transition: all var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
         &: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 {
-          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);
         }
         &::placeholder {
-          color: var(--color-input-placeholder);
+          color: var(--fhi-text-input-placeholder-color);
         }
       }
 
@@ -260,21 +169,21 @@ o.styles = c`
       }
 
       .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 {
-        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;
       }
 
       .input-container {
@@ -307,7 +216,7 @@ o.styles = c`
     }
 
     :host([disabled]) {
-      opacity: var(--opacity-disabled);
+      opacity: var(--fhi-opacity-disabled);
       cursor: not-allowed;
       label,
       input {
@@ -315,8 +224,8 @@ o.styles = c`
       }
       input {
         &: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);
         }
       }
     }
@@ -326,25 +235,25 @@ o.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);
       }
     }
 
     :host([status='error']:not([disabled]):not([readonly])) {
       label {
-        color: var(--color-label-text-error);
+        color: var(--fhi-color-danger-text-default);
       }
       input {
-        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);
       }
       slot[name='start'] {
         color: var(--fhi-color-danger-text-subtle);
@@ -358,41 +267,41 @@ o.styles = c`
       }
     }
   `;
-r([
-  a({ type: String })
+a([
+  r({ type: String })
 ], o.prototype, "label", 2);
-r([
-  a({ type: String })
+a([
+  r({ type: String })
 ], o.prototype, "message", 2);
-r([
-  a({ type: String, attribute: "help-text" })
+a([
+  r({ type: String, attribute: "help-text" })
 ], o.prototype, "helpText", 2);
-r([
-  a({ type: String })
+a([
+  r({ type: String })
 ], o.prototype, "placeholder", 2);
-r([
-  a({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], o.prototype, "status", 2);
-r([
-  a({ type: Boolean, reflect: !0 })
+a([
+  r({ type: Boolean, reflect: !0 })
 ], o.prototype, "readonly", 2);
-r([
-  a({ type: Boolean, reflect: !0 })
+a([
+  r({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-r([
-  y("#input-element")
+a([
+  g("#input-element")
 ], o.prototype, "_input", 2);
-r([
-  a({ type: String, reflect: !0 })
+a([
+  r({ type: String, reflect: !0 })
 ], o.prototype, "name", 1);
-r([
-  a({ type: String })
+a([
+  r({ type: String })
 ], o.prototype, "value", 1);
-o = r([
-  u(b)
+o = a([
+  f(y)
 ], o);
 export {
   o as FhiTextInput,
-  b as FhiTextInputSelector
+  y as FhiTextInputSelector
 };
 //# sourceMappingURL=fhi-text-input.js.map

package/fhi-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-text-input.js","sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\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 message 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 the placeholder text for the input field.\n   * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n   * @type {string}\n   */\n  @property({ type: String }) placeholder?: string = 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;\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  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  /**\n   * The default value of the input field.\n   *\n   * You can fetch the current value of the text 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(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\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);\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 _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 handleChange(event: Event): void {\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private handleInput(event: Event): void {\n    this.value = this._input.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\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') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  private _handleStartSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\n  }\n\n  private _handleEndSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\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          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\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        <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n        <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\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      /* 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-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-placeholder: var(--fhi-color-neutral-base-default);\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\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      /* 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      --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\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\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input {\n        box-sizing: border-box;\n        flex: 1 1 auto;\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        color: var(--color-input-text);\n        background-color: var(--color-input-background);\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        transition: var(--motion-input-transition);\n        &:hover {\n          border-color: var(--color-input-border-hover);\n          background-color: var(--color-input-background-hover);\n        }\n        &:focus {\n          border-color: var(--color-input-border-active);\n          background-color: var(--color-input-background-active);\n        }\n        &::placeholder {\n          color: var(--color-input-placeholder);\n        }\n      }\n\n      slot[name='start'] {\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n\n      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-subtle);\n      }\n      input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-default);\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        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\n      .input-container {\n        position: relative;\n        display: flex;\n      }\n\n      slot[name='start'] {\n        display: block;\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-left: 8px;\n        height: fit-content;\n        pointer-events: none;\n      }\n\n      slot[name='end'] {\n        display: block;\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: 8px;\n        height: fit-content;\n        pointer-events: none;\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      cursor: not-allowed;\n      label,\n      input {\n        cursor: not-allowed;\n      }\n      input {\n        &:hover {\n          border-color: var(--color-input-border);\n          background-color: var(--color-input-background);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input {\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      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--color-label-text-error);\n      }\n      input {\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      slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n\n      input:hover ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      input:focus ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n    }\n  `;\n}\n"],"names":["FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","iconNode","icon","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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AAA;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;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAtNYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GARfb,EAQiB,WAAA,SAAA,CAAA;AAOAY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAffb,EAeiB,WAAA,WAAA,CAAA;AAOwBY,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAtBvCb,EAsByC,WAAA,YAAA,CAAA;AAQxBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9Bfb,EA8BiB,WAAA,eAAA,CAAA;AASeY,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvC9Bb,EAuCgC,WAAA,UAAA,CAAA;AAOCY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9C/Bb,EA8CiC,WAAA,YAAA,CAAA;AAOAY,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArD/Bb,EAqDiC,WAAA,YAAA,CAAA;AAGpCY,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GAvDZd,EAwDH,WAAA,UAAA,CAAA;AAcJY,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArE9Bb,EAsEP,WAAA,QAAA,CAAA;AAuBAY,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5Ffb,EA6FP,WAAA,SAAA,CAAA;AA7FOA,IAANY,EAAA;AAAA,EADNG,EAAchB,CAAoB;AAAA,GACtBC,CAAA;"}
+{"version":3,"file":"fhi-text-input.js","sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\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 message 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 the placeholder text for the input field.\n   * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n   * @type {string}\n   */\n  @property({ type: String }) placeholder?: string = 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;\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  set name(newName: string) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this._value);\n  }\n\n  private _value: string = '';\n\n  /**\n   * The default value of the input field.\n   *\n   * You can fetch the current value of the text 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(): string {\n    return this._value;\n  }\n\n  set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value);\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);\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 _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 handleChange(event: Event): void {\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n\n  private handleInput(event: Event): void {\n    this.value = this._input.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\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') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  private _handleStartSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\n  }\n\n  private _handleEndSlotChange(event: Event): void {\n    const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n    if (\n      iconNode.nodeType === Node.ELEMENT_NODE &&\n      (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = iconNode as HTMLElement;\n      this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n      icon.setAttribute('size', '1.5rem');\n    } else {\n      console.error(\n        'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n      );\n    }\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          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\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        <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n        <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\n      </div>\n      ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-text-input-placeholder-color: unset;\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n\n      --fhi-text-input-placeholder-color: var(--fhi-color-neutral-base-default);\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\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input {\n        box-sizing: border-box;\n        flex: 1 1 auto;\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        color: var(--fhi-color-neutral-text-default);\n        background-color: var(--fhi-color-neutral-background-default);\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        transition: all var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\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        &::placeholder {\n          color: var(--fhi-text-input-placeholder-color);\n        }\n      }\n\n      slot[name='start'] {\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n\n      input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-subtle);\n      }\n      input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n      input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n        color: var(--fhi-color-accent-text-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\n      .input-container {\n        position: relative;\n        display: flex;\n      }\n\n      slot[name='start'] {\n        display: block;\n        position: absolute;\n        left: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-left: 8px;\n        height: fit-content;\n        pointer-events: none;\n      }\n\n      slot[name='end'] {\n        display: block;\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: 8px;\n        height: fit-content;\n        pointer-events: none;\n        color: var(--fhi-color-neutral-text-subtle);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      cursor: not-allowed;\n      label,\n      input {\n        cursor: not-allowed;\n      }\n      input {\n        &:hover {\n          border-color: var(--fhi-color-neutral-border-default);\n          background-color: var(--fhi-color-neutral-background-default);\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input {\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      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--fhi-color-danger-text-default);\n      }\n      input {\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      slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n\n      input:hover ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      input:focus ~ slot[name='start'] {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n    }\n  `;\n}\n"],"names":["FhiTextInputSelector","FhiTextInput","LitElement","newName","oldName","newValue","oldValue","event","iconNode","icon","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}

package/fhi-title.js

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

package/fhi-tooltip.js

@@ -1,4 +1,4 @@
-import { n as j, i as Ht, a as It, b as Xt, t as jt } from "./property-DGdAXcEz.js";
+import { n as j, i as Ht, a as It, b as Xt, t as jt } from "./property-B2Ico5CW.js";
 import { e as Lt } from "./query-Ddbd72Um.js";
 /**
  * @license

package/{if-defined-BW6N1yuF.js → if-defined-B_sR6Mtk.js}

@@ -1,4 +1,4 @@
-import { A as r } from "./property-DGdAXcEz.js";
+import { A as r } from "./property-B2Ico5CW.js";
 /**
  * @license
  * Copyright 2018 Google LLC
@@ -8,4 +8,4 @@ const m = (o) => o ?? r;
 export {
   m as o
 };
-//# sourceMappingURL=if-defined-BW6N1yuF.js.map
+//# sourceMappingURL=if-defined-B_sR6Mtk.js.map

package/{if-defined-BW6N1yuF.js.map → if-defined-B_sR6Mtk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"if-defined-BW6N1yuF.js","sources":["../../../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/directives/if-defined.js"],"sourcesContent":["import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n"],"names":["o","t"],"mappings":";AACA;AAAA;AAAA;AAAA;AAAA;AAIQ,MAACA,IAAE,OAAG,KAAGC;","x_google_ignoreList":[0]}
+{"version":3,"file":"if-defined-B_sR6Mtk.js","sources":["../../../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.js"],"sourcesContent":["import{nothing as t}from\"../lit-html.js\";\n/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const o=o=>o??t;export{o as ifDefined};\n//# sourceMappingURL=if-defined.js.map\n"],"names":["o","t"],"mappings":";AACA;AAAA;AAAA;AAAA;AAAA;AAIQ,MAACA,IAAE,OAAG,KAAGC;","x_google_ignoreList":[0]}