@folkehelseinstituttet/designsystem 0.44.0 → 0.45.1

package/{fhi-date-input.component-Bus7CeKM.js → fhi-date-input.component-C1cwkp36.js}

@@ -100,7 +100,7 @@ var c = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent), l = "f
         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;
+        padding: 0 0 var(--fhi-spacing-050) 0;
       }
       label:has(+ p) {
         margin: 0 0 0 0;
@@ -275,4 +275,4 @@ a([e({ type: String })], u.prototype, "label", void 0), a([e({ type: String })],
 //#endregion
 export { l as n, u as t };
 
-//# sourceMappingURL=fhi-date-input.component-Bus7CeKM.js.map
+//# sourceMappingURL=fhi-date-input.component-C1cwkp36.js.map

package/{fhi-date-input.component-Bus7CeKM.js.map → fhi-date-input.component-C1cwkp36.js.map}

@@ -1 +1 @@
-{"version":3,"file":"fhi-date-input.component-Bus7CeKM.js","names":[],"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"],"mappings":"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"}
+{"version":3,"file":"fhi-date-input.component-C1cwkp36.js","names":[],"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        padding: 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"],"mappings":"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"}

package/fhi-date-input.js

@@ -1,3 +1,3 @@
 import "./fhi-icon-calendar.js";
-import { n as e, t } from "./fhi-date-input.component-Bus7CeKM.js";
+import { n as e, t } from "./fhi-date-input.component-C1cwkp36.js";
 export { t as FhiDateInput, e as FhiDateInputSelector };

package/fhi-select.js

@@ -1,7 +1,7 @@
 import { a as e, d as t, n, o as r, r as i, s as a, t as o, u as s } from "./decorate-DFXIek-k.js";
 import "./fhi-body.js";
-import "./fhi-icon-chevron-down.js";
 import "./fhi-label.js";
+import "./fhi-icon-chevron-down.js";
 //#region src/components/select/fhi-select/fhi-select.component.ts
 var c = "fhi-select", l = class extends a {
 	static {

package/fhi-text-area.d.ts

@@ -0,0 +1 @@
+export {};

package/fhi-text-area.js

@@ -0,0 +1,221 @@
+import { a as e, d as t, o as n, r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
+import { t as s } from "./if-defined-Dl-W5B5_.js";
+import "./fhi-body.js";
+import "./fhi-label.js";
+//#region src/components/fhi-text-area/fhi-text-area.component.ts
+var c = "fhi-text-area", l = class extends i {
+	static {
+		this.formAssociated = !0;
+	}
+	get name() {
+		return this._name;
+	}
+	set name(e) {
+		let t = this._name;
+		this._name = e, this.requestUpdate("name", t), this._internals.setFormValue(this._value);
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		let t = this._value;
+		this._value = e, this.requestUpdate("value", t), this._internals.setFormValue(this._value);
+	}
+	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.rows = 2, this._name = void 0, this._value = "", this._internals = this.attachInternals();
+	}
+	_dispatchChangeEvent() {
+		this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_dispatchInputEvent() {
+		this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleChange(e) {
+		e.stopPropagation(), this._dispatchChangeEvent();
+	}
+	handleInput(e) {
+		this.value = this._textarea.value, this._internals.setFormValue(this.value), e.stopPropagation(), this._dispatchInputEvent();
+	}
+	formResetCallback() {
+		this.value = this.getAttribute("value") || "", this._internals.setFormValue(this.value);
+	}
+	render() {
+		return o`
+      ${this.label && o`<label for="textarea-element"
+        ><fhi-label size="small">${this.label}</fhi-label></label
+      > `}
+      ${this.helpText ? o`
+            <fhi-body class="help-text" size="small">${this.helpText}</fhi-body>
+          ` : ""}
+      <div class="textarea-container">
+        <textarea
+          id="textarea-element"
+          name=${s(this.name)}
+          placeholder=${s(this.placeholder)}
+          .value=${this.value}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          rows=${s(this.rows)}
+          @change=${this.handleChange}
+          @input=${this.handleInput}
+        ></textarea>
+      </div>
+      ${this.message ? o`
+            <fhi-body size="small" class="message">${this.message}</fhi-body>
+          ` : ""}
+    `;
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: flex;
+      flex-direction: column;
+      font-family: var(--fhi-font-family-default);
+      -webkit-font-smoothing: antialiased;
+
+      .textarea-container {
+        overflow: hidden;
+        border: var(--fhi-dimension-border-width) solid
+          var(--fhi-color-neutral-border-default);
+        border-radius: var(--fhi-border-radius-050);
+        background-color: var(--fhi-color-neutral-background-default);
+        transition: border-color var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
+
+        &:hover {
+          border-color: var(--fhi-color-accent-border-default);
+        }
+
+        &:focus-within {
+          border-color: var(--fhi-color-accent-border-strong);
+          background-color: var(--fhi-color-accent-background-default);
+          outline: auto;
+          outline-color: -webkit-focus-ring-color;
+        }
+      }
+
+      textarea {
+        box-sizing: border-box;
+        display: block;
+        width: 100%;
+        resize: vertical;
+        min-height: var(--fhi-spacing-500);
+        padding: var(--fhi-spacing-100) var(--fhi-spacing-150);
+        color: var(--fhi-color-neutral-text-default);
+        background-color: transparent;
+        margin: 0;
+        border: none;
+        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: background-color var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
+
+        &::placeholder {
+          color: var(--fhi-color-neutral-base-default);
+        }
+
+        &:hover:not(:disabled):not([readonly]) {
+          border-color: var(--fhi-color-accent-border-default);
+          background-color: var(--fhi-color-accent-background-subtle);
+        }
+
+        &:focus {
+          background-color: var(--fhi-color-accent-background-default);
+        }
+      }
+
+      label {
+        color: var(--fhi-color-neutral-text-default);
+        padding: 0 0 var(--fhi-spacing-050) 0;
+      }
+
+      .help-text {
+        color: var(--fhi-color-neutral-text-subtle);
+        margin: 0 0 var(--fhi-spacing-050) 0;
+      }
+
+      .message {
+        margin: var(--fhi-spacing-050) 0 0 0;
+        color: var(--fhi-color-neutral-text-default);
+      }
+    }
+
+    :host([disabled]) {
+      opacity: var(--fhi-opacity-disabled);
+      cursor: not-allowed;
+      label,
+      textarea,
+      .textarea-container {
+        cursor: not-allowed;
+      }
+      .textarea-container {
+        &:hover {
+          border-color: var(--fhi-color-neutral-border-default);
+          background-color: var(--fhi-color-neutral-background-default);
+        }
+      }
+    }
+
+    :host([readonly]:not([disabled])) {
+      .textarea-container {
+        border: unset;
+        border-radius: unset;
+        background-color: unset;
+        border-left: var(--fhi-dimension-border-width) solid
+          var(--fhi-color-neutral-border-default);
+      }
+    }
+
+    :host([status='error']:not([disabled]):not([readonly])) {
+      label {
+        color: var(--fhi-color-danger-text-default);
+      }
+      .textarea-container {
+        border-color: var(--fhi-color-danger-border-strong);
+        background-color: var(--fhi-color-danger-background-default);
+      }
+      textarea {
+        color: var(--fhi-color-neutral-text-default);
+        &:hover {
+          background-color: var(--fhi-color-danger-background-default);
+        }
+      }
+      .message {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+      .help-text {
+        color: var(--fhi-color-danger-text-default);
+      }
+    }
+  `;
+	}
+};
+a([e({ type: String })], l.prototype, "label", void 0), a([e({ type: String })], l.prototype, "message", void 0), a([e({
+	type: String,
+	attribute: "help-text"
+})], l.prototype, "helpText", void 0), a([e({ type: String })], l.prototype, "placeholder", void 0), a([e({
+	type: String,
+	reflect: !0
+})], l.prototype, "status", void 0), a([e({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "readonly", void 0), a([e({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), a([e({ type: Number })], l.prototype, "rows", void 0), a([r("#textarea-element")], l.prototype, "_textarea", void 0), a([e({
+	type: String,
+	reflect: !0
+})], l.prototype, "name", null), a([e({ type: String })], l.prototype, "value", null), l = a([n(c)], l);
+//#endregion
+export { l as FhiTextArea, c as FhiTextAreaSelector };
+
+//# sourceMappingURL=fhi-text-area.js.map

package/fhi-text-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-text-area.js","names":[],"sources":["../../src/components/fhi-text-area/fhi-text-area.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';\nimport '../typography/fhi-body/fhi-body.component';\nimport '../typography/fhi-label/fhi-label.component';\n\nexport const FhiTextAreaSelector = 'fhi-text-area';\n\n/**\n * ## FHI Text Area\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-area--docs}\n *\n * The `<fhi-text-area>` component is used to collect user input in forms.\n * It provides a labeled text area with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-area\n * @element fhi-text-area\n */\n@customElement(FhiTextAreaSelector)\nexport class FhiTextArea extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the text area.\n   * A text area 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 text area.\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 text area.\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 text area.\n   * This text is displayed when the text area 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 text area. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the text area, 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 text area 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 text area.  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  /**\n   * Sets the number of visible text lines for the text area.\n   * @reflect\n   * @type {number}\n   */\n  @property({ type: Number }) rows? = 2;\n\n  @query('#textarea-element')\n  private _textarea!: HTMLTextAreaElement;\n\n  private _name?: string = undefined;\n\n  /**\n   * The name of the text area. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for text areas.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#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 text area.\n   *\n   * You can fetch the current value of the text area 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 text areas.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/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  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._textarea.value;\n    this._internals.setFormValue(this.value);\n\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') || '';\n    this._internals.setFormValue(this.value);\n  }\n\n  render() {\n    return html`\n      ${this.label &&\n      html`<label for=\"textarea-element\"\n        ><fhi-label size=\"small\">${this.label}</fhi-label></label\n      > `}\n      ${this.helpText\n        ? html`\n            <fhi-body class=\"help-text\" size=\"small\">${this.helpText}</fhi-body>\n          `\n        : ''}\n      <div class=\"textarea-container\">\n        <textarea\n          id=\"textarea-element\"\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          .value=${this.value}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          rows=${ifDefined(this.rows)}\n          @change=${this.handleChange}\n          @input=${this.handleInput}\n        ></textarea>\n      </div>\n      ${this.message\n        ? html`\n            <fhi-body size=\"small\" class=\"message\">${this.message}</fhi-body>\n          `\n        : ''}\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\n      .textarea-container {\n        overflow: hidden;\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        border-radius: var(--fhi-border-radius-050);\n        background-color: var(--fhi-color-neutral-background-default);\n        transition: border-color var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n\n        &:hover {\n          border-color: var(--fhi-color-accent-border-default);\n        }\n\n        &:focus-within {\n          border-color: var(--fhi-color-accent-border-strong);\n          background-color: var(--fhi-color-accent-background-default);\n          outline: auto;\n          outline-color: -webkit-focus-ring-color;\n        }\n      }\n\n      textarea {\n        box-sizing: border-box;\n        display: block;\n        width: 100%;\n        resize: vertical;\n        min-height: var(--fhi-spacing-500);\n        padding: var(--fhi-spacing-100) var(--fhi-spacing-150);\n        color: var(--fhi-color-neutral-text-default);\n        background-color: transparent;\n        margin: 0;\n        border: none;\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: background-color var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n\n        &::placeholder {\n          color: var(--fhi-color-neutral-base-default);\n        }\n\n        &:hover:not(:disabled):not([readonly]) {\n          border-color: var(--fhi-color-accent-border-default);\n          background-color: var(--fhi-color-accent-background-subtle);\n        }\n\n        &:focus {\n          background-color: var(--fhi-color-accent-background-default);\n        }\n      }\n\n      label {\n        color: var(--fhi-color-neutral-text-default);\n        padding: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n        margin: 0 0 var(--fhi-spacing-050) 0;\n      }\n\n      .message {\n        margin: var(--fhi-spacing-050) 0 0 0;\n        color: var(--fhi-color-neutral-text-default);\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      cursor: not-allowed;\n      label,\n      textarea,\n      .textarea-container {\n        cursor: not-allowed;\n      }\n      .textarea-container {\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      .textarea-container {\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      .textarea-container {\n        border-color: var(--fhi-color-danger-border-strong);\n        background-color: var(--fhi-color-danger-background-default);\n      }\n      textarea {\n        color: var(--fhi-color-neutral-text-default);\n        &:hover {\n          background-color: var(--fhi-color-danger-background-default);\n        }\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    }\n  `;\n}\n"],"mappings":"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"}

package/fhi-text-area.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-text-area/fhi-text-area.component.ts","declarations":[{"kind":"class","description":"## FHI Text Area\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-text-area--docs\n\nThe `<fhi-text-area>` component is used to collect user input in forms.\nIt provides a labeled text area with optional placeholder text, status indication, and a message area for additional information or validation feedback.","name":"FhiTextArea","members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"field","name":"_name","type":{"text":"string | undefined"},"privacy":"private","default":"undefined"},{"kind":"field","name":"_textarea","type":{"text":"HTMLTextAreaElement"},"privacy":"private"},{"kind":"field","name":"_value","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the text area.  This changes its appearance and makes it non-interactive.","reflects":true,"attribute":"disabled"},{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"readonly":true,"default":"true"},{"kind":"method","name":"formResetCallback","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"method","name":"handleChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"handleInput","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"helpText","type":{"text":"string"},"default":"undefined","description":"The message shown above the text area.\nThis is often used to provide additional information to the user.","attribute":"help-text"},{"kind":"field","name":"label","type":{"text":"string"},"default":"undefined","description":"The text that labels the text area.\nA text area should always have a label to ensure accessibility.","attribute":"label"},{"kind":"field","name":"message","type":{"text":"string"},"default":"undefined","description":"The message shown beneath the text area.\nThis is often used to provide additional information or feedback to the user.","attribute":"message"},{"kind":"field","name":"name","type":{"text":"string"},"description":"The name of the text area. This is submitted with the form data as a `key`.\n\nThis attribute conforms with the standard HTML `name` attribute for text areas.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name","reflects":true,"attribute":"name"},{"kind":"field","name":"placeholder","type":{"text":"string"},"default":"undefined","description":"Sets the placeholder text for the text area.\nThis text is displayed when the text area is empty, providing a hint to the user about the expected input.","attribute":"placeholder"},{"kind":"field","name":"readonly","type":{"text":"boolean"},"default":"false","description":"Sets the text area to read-only. A read-only field cannot be modified by the user but may be submitted with the form.","reflects":true,"attribute":"readonly"},{"kind":"field","name":"rows","type":{"text":"number"},"default":"2","description":"Sets the number of visible text lines for the text area.","reflects":true,"attribute":"rows"},{"kind":"field","name":"status","type":{"text":"'error'"},"default":"undefined","description":"Sets the visual status of the text area. There is currently only one status available: `error`.\n\nThe `error` status is used to indicate that there is an issue with the text area, such as invalid or missing data.","reflects":true,"attribute":"status"},{"kind":"field","name":"value","type":{"text":"string"},"description":"The default value of the text area.\n\nYou can fetch the current value of the text area 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\nThis attribute conforms with the standard HTML `value` attribute for text areas.\nSee: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/value","attribute":"value"}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the value of the input changes."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the value of the input changes."}],"attributes":[{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the text area.  This changes its appearance and makes it non-interactive.","fieldName":"disabled"},{"name":"help-text","type":{"text":"string"},"default":"undefined","description":"The message shown above the text area.\nThis is often used to provide additional information to the user.","fieldName":"helpText"},{"name":"label","type":{"text":"string"},"default":"undefined","description":"The text that labels the text area.\nA text area should always have a label to ensure accessibility.","fieldName":"label"},{"name":"message","type":{"text":"string"},"default":"undefined","description":"The message shown beneath the text area.\nThis is often used to provide additional information or feedback to the user.","fieldName":"message"},{"name":"name","type":{"text":"string"},"description":"The name of the text area. This is submitted with the form data as a `key`.\n\nThis attribute conforms with the standard HTML `name` attribute for text areas.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name","fieldName":"name"},{"name":"placeholder","type":{"text":"string"},"default":"undefined","description":"Sets the placeholder text for the text area.\nThis text is displayed when the text area is empty, providing a hint to the user about the expected input.","fieldName":"placeholder"},{"name":"readonly","type":{"text":"boolean"},"default":"false","description":"Sets the text area to read-only. A read-only field cannot be modified by the user but may be submitted with the form.","fieldName":"readonly"},{"name":"rows","type":{"text":"number"},"default":"2","description":"Sets the number of visible text lines for the text area.","fieldName":"rows"},{"name":"status","type":{"text":"'error'"},"default":"undefined","description":"Sets the visual status of the text area. There is currently only one status available: `error`.\n\nThe `error` status is used to indicate that there is an issue with the text area, such as invalid or missing data.","fieldName":"status"},{"name":"value","type":{"text":"string"},"description":"The default value of the text area.\n\nYou can fetch the current value of the text area 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\nThis attribute conforms with the standard HTML `value` attribute for text areas.\nSee: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/value","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-text-area","customElement":true},{"kind":"variable","name":"FhiTextAreaSelector","type":{"text":"string"},"default":"'fhi-text-area'"}]}

package/fhi-text-input.js

@@ -105,7 +105,7 @@ var c = "fhi-text-input", l = class extends i {
         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;
+        padding: 0 0 var(--fhi-spacing-050) 0;
       }
 
       label:has(+ p) {

package/fhi-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-text-input.js","names":[],"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"],"mappings":";;;AAIA,IAAa,IAAuB,kBAc7B,IAAA,cAA2B,EAAW;;wBACV;;CAoEjC,IACI,OAA2B;EAC7B,OAAO,KAAK;CACd;CACA,IAAI,KAAK,GAAiB;EACxB,IAAM,IAAU,KAAK;EAGrB,AAFA,KAAK,QAAQ,GACb,KAAK,cAAc,QAAQ,CAAO,GAClC,KAAK,WAAW,aAAa,KAAK,MAAM;CAC1C;CAcA,IACI,QAAgB;EAClB,OAAO,KAAK;CACd;CAEA,IAAI,MAAM,GAAkB;EAC1B,IAAM,IAAW,KAAK;EAGtB,AAFA,KAAK,SAAS,GACd,KAAK,cAAc,SAAS,CAAQ,GACpC,KAAK,WAAW,aAAa,KAAK,MAAM;CAC1C;CAIA,cAAc;EAEZ,AADA,MAAM,gBAnGqC,KAAA,kBAOE,KAAA,mBAQ7C,KAAA,sBAOiD,KAAA,iBASW,KAAA,mBAON,oBAOA,iBAK/B,KAAA,iBAsBA,IA4BvB,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAAiC;EAE/B,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,aAAa,KAAK,KAAK;CACzC;CAEA,uBAAqC;EAKnC,KAAK,cACH,IAAI,MAAM,UAAU;GAClB,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,sBAAoC;EAKlC,KAAK,cACH,IAAI,MAAM,SAAS;GACjB,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CAEA,YAAoB,GAAoB;EAKtC,AAJA,KAAK,QAAQ,KAAK,OAAO,OACzB,KAAK,WAAW,aAAa,KAAK,KAAK,GAEvC,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,cAAsB,GAA4B;EAChD,AAAI,EAAM,QAAQ,WAAW,KAAK,WAAW,QAC3C,KAAK,WAAW,KAAM,cAAc;CAExC;CAEA,oBAAiC;EAE/B,AADA,KAAK,QAAQ,KAAK,aAAa,OAAO,KAAK,IAC3C,KAAK,WAAW,aAAa,KAAK,KAAK;CACzC;CAEA,uBAA+B,GAAoB;EACjD,IAAM,IAAkB,EAAM,OAA2B,cAAc,EAAE;EACzE,IACE,EAAS,aAAa,KAAK,gBAC1B,EAAqB,QAAQ,YAAY,EAAE,WAAW,UAAU,GACjE;GACA,IAAM,IAAO;GAEb,AADA,KAAK,OAAO,MAAM,cAAc,0BAChC,EAAK,aAAa,QAAQ,QAAQ;EACpC,OACE,QAAQ,MACN,wEACF;CAEJ;CAEA,qBAA6B,GAAoB;EAC/C,IAAM,IAAkB,EAAM,OAA2B,cAAc,EAAE;EAEzE,IACE,EAAS,aAAa,KAAK,gBAC1B,EAAqB,QAAQ,YAAY,EAAE,WAAW,UAAU,GACjE;GACA,IAAM,IAAO;GAEb,AADA,KAAK,OAAO,MAAM,eAAe,0BACjC,EAAK,aAAa,QAAQ,QAAQ;EACpC,OACE,QAAQ,MACN,wEACF;CAEJ;CAEA,SAAS;EACP,OAAO,CAAI;QACP,KAAK,SAAS,CAAI,8BAA8B,KAAK,MAAM,UAAU;QACrE,KAAK,WAAW,CAAI,wBAAwB,KAAK,SAAS,QAAQ,GAAG;;;;iBAI5D,EAAU,KAAK,IAAI,EAAE;wBACd,EAAU,KAAK,WAAW,EAAE;mBACjC,KAAK,MAAM;sBACR,KAAK,SAAS;sBACd,KAAK,SAAS;oBAChB,KAAK,aAAa;mBACnB,KAAK,YAAY;qBACf,KAAK,cAAc;;yCAEC,KAAK,uBAAuB;uCAC9B,KAAK,qBAAqB;;QAEzD,KAAK,UAAU,CAAI,sBAAsB,KAAK,QAAQ,QAAQ,GAAG;;CAEvE;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKrB;GA7XG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAOzB,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAQjD,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,MASzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAOzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAEzC,EAAM,gBAAgB,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MActB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,IAAA,MAuBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA,UA7F3B,EAAc,CAAoB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"fhi-text-input.js","names":[],"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        padding: 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"],"mappings":"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"}