@folkehelseinstituttet/designsystem 0.40.0 → 0.40.2

package/fhi-radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-radio.js","sources":["../../src/components/fhi-radio/fhi-radio.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 FhiRadioSelector = 'fhi-radio';\n\n/**\n * ## FHI Radio\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n *\n * The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n *\n * @tag fhi-radio\n * @element fhi-radio\n */\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text label assigned to and displayed next to the radio.\n   * You should always provide a label.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\n   * All `<fhi-radio>` components with the same name belong to the same group.\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true }) name?: string = undefined;\n\n  /**\n   * Sets the visual status of the radio. There is currently only one status available: `error`.\n   * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n   * @reflect\n   * @type {'error' | undefined}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Disables the radio. 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   * Whether the radio button is checked or not.\n   * @type {boolean}\n   */\n  @property({ type: Boolean }) checked? = false;\n\n  /**\n   * The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n   * @type {string}\n   */\n  @property({ type: String }) value: string = 'on';\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _groupRoot: Document | HTMLFormElement;\n  private _internals: ElementInternals;\n\n  /**\n   * Indicates if the radio button is part of a form.\n   * @internal\n   */\n  public isFormElement = false;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    this._groupRoot = document;\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._setFocusOnInput);\n\n    this.isFormElement = !!this._internals.form;\n\n    if (this.isFormElement) {\n      this._updateFormValue();\n      this._groupRoot = this._internals.form!;\n    }\n\n    // If the radio has a name then it is part of a group and needs keyboard navigation\n    if (this.name) {\n      this.addEventListener('keydown', this._handleKeyDown);\n      this._SetTabbableRadios();\n    }\n  }\n\n  public disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeyDown);\n    this.removeEventListener('focus', this._setFocusOnInput);\n  }\n\n  private _setFocusOnInput() {\n    this._input.focus();\n  }\n\n  private _getRadioGroup() {\n    return Array.from(\n      this._groupRoot.querySelectorAll<FhiRadio>(\n        `${FhiRadioSelector}[name=\"${this.name}\"]`,\n      ),\n    );\n  }\n\n  private _SetTabbableRadios() {\n    const radios = this._getRadioGroup();\n\n    radios.forEach(radio => {\n      // Only the checked radio should be tabbable\n      radio.tabIndex = radio.checked ? 0 : -1;\n    });\n\n    // If none of the radios are checked, make the first one tabbable\n    if (!radios.some(radio => radio.checked) && radios.length > 0) {\n      radios[0].tabIndex = 0;\n    }\n  }\n\n  public updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    // make sure the radio input can be programmatically toggeled. e.g by a form reset\n    if (changedProperties.has('checked')) {\n      this._input.checked = !!this.checked;\n      this._updateFormValue();\n\n      if (this.checked) {\n        this.uncheckGroupMembers();\n      }\n    }\n\n    // update the form value when the value or name input changes and the radio is already checked\n    if (changedProperties.has('value') || changedProperties.has('name')) {\n      if (this._input.checked) {\n        this._updateFormValue();\n      }\n    }\n  }\n\n  public formResetCallback(): void {\n    const radiosCheckedByDefault = this._getRadioGroup().filter(\n      radio => typeof radio.getAttribute('checked') === 'string',\n    );\n\n    if (radiosCheckedByDefault.pop() === this) {\n      this.checked = true;\n    }\n\n    this._updateFormValue();\n  }\n\n  private uncheckGroupMembers(): void {\n    const radios = this._getRadioGroup();\n\n    radios.forEach(radio => {\n      if (radio === this) {\n        return;\n      }\n\n      if (radio.isFormElement && this._groupRoot === document) {\n        return;\n      }\n\n      radio.checked = false;\n    });\n  }\n\n  private _updateFormValue(): void {\n    if (!this.isFormElement) {\n      return;\n    }\n\n    this._internals.setFormValue(this.checked ? this.value : null);\n  }\n\n  private _handleChange(event: Event): void {\n    this.checked = (event.target as HTMLInputElement).checked;\n\n    this.uncheckGroupMembers();\n\n    this._updateFormValue();\n\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n  private _handleInput(event: Event): void {\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the radio is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the radio is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n    if (!arrows.includes(event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const radios = this._getRadioGroup();\n\n    if (radios.length < 2) {\n      return;\n    }\n\n    const currentIndex = radios.indexOf(this);\n\n    const nextIndex = currentIndex;\n    let nextRadio: FhiRadio;\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n    } else {\n      nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n    }\n\n    nextRadio.focus();\n    this.checked = false;\n    nextRadio.checked = true;\n    this._SetTabbableRadios();\n  }\n\n  render() {\n    return html`\n      <label>\n        <div class=\"radio-container\">\n          <input\n            type=\"radio\"\n            id=\"input-element\"\n            name=\"${ifDefined(this.name)}\"\n            value=\"${this.value}\"\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this._handleChange}\n            @input=${this._handleInput}\n          />\n          <svg\n            class=\"radio-dot\"\n            viewBox=\"0 0 18 18\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle r=\"6\" cx=\"9\" cy=\"9\" />\n          </svg>\n        </div>\n        ${this.label}\n      </label>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --motion-radio-transition: var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      --color-radio-label: var(--fhi-color-neutral-text-default);\n      --color-radio-border: var(--fhi-color-neutral-border-default);\n      --color-radio-background: var(--fhi-color-neutral-background-default);\n\n      --color-radio-border-hover: var(--fhi-color-accent-border-strong);\n      --color-radio-background-hover: var(--fhi-color-accent-background-subtle);\n\n      --color-radio-background-active: var(--fhi-color-accent-surface-default);\n\n      --color-radio-outline: var(--fhi-color-accent-surface-hover);\n\n      --typography-radio-label-font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n      --typography-radio-label-font-size: var(\n        --fhi-typography-body-medium-font-size\n      );\n\n      --typography-radio-label-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n\n      --typography-radio-label-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-radio-label-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-radio-label-gap: var(--fhi-spacing-050);\n      --dimension-radio-width: var(--fhi-spacing-250);\n      --dimension-radio-height: var(--fhi-spacing-250);\n      --dimension-radio-margin: 0.125rem;\n      --dimension-radio-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-radio-dot-size: 1.125rem;\n\n      /* Checked state */\n      --dimension-radio-border-width-checked: var(\n        --fhi-dimension-border-width-active\n      );\n\n      /* Error state */\n      --color-radio-border-error: var(--fhi-color-danger-border-default);\n      --color-radio-background-error: var(\n        --fhi-color-danger-background-default\n      );\n\n      --color-radio-border-error-hover: var(--fhi-color-danger-border-strong);\n      --color-radio-background-error-hover: var(\n        --fhi-color-danger-background-subtle\n      );\n\n      --color-radio-background-error-active: var(\n        --fhi-color-danger-surface-default\n      );\n\n      --color-radio-outline-error: var(--fhi-color-danger-surface-hover);\n\n      /* Disabled state */\n      --opacity-disabled: var(--fhi-opacity-disabled);\n    }\n\n    :host {\n      display: flex;\n      align-items: center;\n      width: max-content;\n\n      label {\n        display: flex;\n        position: relative;\n        gap: var(--dimension-radio-label-gap);\n        color: var(--color-radio-label);\n        font-family: var(--typography-radio-label-font-family);\n        font-size: var(--typography-radio-label-font-size);\n        font-weight: var(--typography-radio-label-font-weight);\n        line-height: var(--typography-radio-label-line-height);\n        letter-spacing: var(--typography-radio-label-letter-spacing);\n      }\n\n      .radio-container {\n        display: flex;\n        position: relative;\n      }\n\n      input {\n        appearance: none;\n        margin: var(--dimension-radio-margin);\n        width: var(--dimension-radio-width);\n        height: var(--dimension-radio-height);\n        background-color: var(--color-radio-background);\n        border: var(--dimension-radio-border-width) solid\n          var(--color-radio-border);\n        border-radius: var(--fhi-border-radius-full);\n        transition: all var(--motion-radio-transition);\n      }\n\n      .radio-dot {\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity var(--motion-radio-transition);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        height: var(--dimension-radio-dot-size);\n        width: var(--dimension-radio-dot-size);\n      }\n\n      input:checked {\n        border-width: var(--dimension-radio-border-width-checked);\n        ~ .radio-dot {\n          circle {\n            fill: var(--color-radio-border);\n          }\n          visibility: visible;\n          opacity: 1;\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      label,\n      input {\n        cursor: not-allowed;\n      }\n    }\n\n    :host(:not(:disabled)) {\n      input:hover:not(:checked) {\n        border-color: var(--color-radio-border-hover);\n        background-color: var(--color-radio-background-hover);\n      }\n\n      input:active:not(:checked) {\n        border-color: var(--color-radio-border-hover);\n        background-color: var(--color-radio-background-active);\n        outline: var(--fhi-dimension-border-width-focus) solid\n          var(--color-radio-outline);\n      }\n    }\n\n    :host([status='error']) {\n      input {\n        border-color: var(--color-radio-border-error);\n        background-color: var(--color-radio-background-error);\n      }\n\n      input:checked {\n        ~ .radio-dot {\n          circle {\n            fill: var(--color-radio-border-error);\n          }\n        }\n      }\n    }\n\n    :host([status='error']:not(:disabled)) {\n      input:hover:not(:checked) {\n        border-color: var(--color-radio-border-error-hover);\n        background-color: var(--color-radio-background-error-hover);\n      }\n\n      input:active:not(:checked) {\n        border-color: var(--color-radio-border-error-hover);\n        background-color: var(--color-radio-background-error-active);\n        outline-color: var(--color-radio-outline-error);\n      }\n    }\n  `;\n}\n"],"names":["FhiRadioSelector","FhiRadio","LitElement","radios","radio","changedProperties","event","nextIndex","nextRadio","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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"}
+{"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.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 FhiRadioSelector = 'fhi-radio';\n\n/**\n * ## FHI Radio\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n *\n * The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n *\n * @tag fhi-radio\n * @element fhi-radio\n */\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n  static readonly formAssociated = true;\n\n  /**\n   * The text label assigned to and displayed next to the radio.\n   * You should always provide a label.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\n   * All `<fhi-radio>` components with the same name belong to the same group.\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true }) name?: string = undefined;\n\n  /**\n   * Sets the visual status of the radio. There is currently only one status available: `error`.\n   * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n   * @reflect\n   * @type {'error' | undefined}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Disables the radio. 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   * Whether the radio button is checked or not.\n   * @type {boolean}\n   */\n  @property({ type: Boolean }) checked? = false;\n\n  /**\n   * The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n   * @type {string}\n   */\n  @property({ type: String }) value: string = 'on';\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _groupRoot: Document | HTMLFormElement;\n  private _internals: ElementInternals;\n\n  /**\n   * Indicates if the radio button is part of a form.\n   * @internal\n   */\n  public isFormElement = false;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n    this._groupRoot = document;\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._setFocusOnInput);\n\n    this.isFormElement = !!this._internals.form;\n\n    if (this.isFormElement) {\n      this._updateFormValue();\n      this._groupRoot = this._internals.form!;\n    }\n\n    // If the radio has a name then it is part of a group and needs keyboard navigation\n    if (this.name) {\n      this.addEventListener('keydown', this._handleKeyDown);\n      this._SetTabbableRadios();\n    }\n  }\n\n  public disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this._handleKeyDown);\n    this.removeEventListener('focus', this._setFocusOnInput);\n  }\n\n  private _setFocusOnInput() {\n    this._input.focus();\n  }\n\n  private _getRadioGroup() {\n    return Array.from(\n      this._groupRoot.querySelectorAll<FhiRadio>(\n        `${FhiRadioSelector}[name=\"${this.name}\"]`,\n      ),\n    );\n  }\n\n  private _SetTabbableRadios() {\n    const radios = this._getRadioGroup();\n\n    radios.forEach(radio => {\n      // Only the checked radio should be tabbable\n      radio.tabIndex = radio.checked ? 0 : -1;\n    });\n\n    // If none of the radios are checked, make the first one tabbable\n    if (!radios.some(radio => radio.checked) && radios.length > 0) {\n      radios[0].tabIndex = 0;\n    }\n  }\n\n  public updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    // make sure the radio input can be programmatically toggeled. e.g by a form reset\n    if (changedProperties.has('checked')) {\n      this._input.checked = !!this.checked;\n      this._updateFormValue();\n\n      if (this.checked) {\n        this.uncheckGroupMembers();\n      }\n    }\n\n    // update the form value when the value or name input changes and the radio is already checked\n    if (changedProperties.has('value') || changedProperties.has('name')) {\n      if (this._input.checked) {\n        this._updateFormValue();\n      }\n    }\n  }\n\n  public formResetCallback(): void {\n    const radiosCheckedByDefault = this._getRadioGroup().filter(\n      radio => typeof radio.getAttribute('checked') === 'string',\n    );\n\n    if (radiosCheckedByDefault.pop() === this) {\n      this.checked = true;\n    }\n\n    this._updateFormValue();\n  }\n\n  private uncheckGroupMembers(): void {\n    const radios = this._getRadioGroup();\n\n    radios.forEach(radio => {\n      if (radio === this) {\n        return;\n      }\n\n      if (radio.isFormElement && this._groupRoot === document) {\n        return;\n      }\n\n      radio.checked = false;\n    });\n  }\n\n  private _updateFormValue(): void {\n    if (!this.isFormElement) {\n      return;\n    }\n\n    this._internals.setFormValue(this.checked ? this.value : null);\n  }\n\n  private _handleChange(event: Event): void {\n    this.checked = (event.target as HTMLInputElement).checked;\n\n    this.uncheckGroupMembers();\n\n    this._updateFormValue();\n\n    event.stopPropagation();\n    this._dispatchChangeEvent();\n  }\n  private _handleInput(event: Event): void {\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the radio is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('change', { bubbles: true }));\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the radio is checked or unchecked.\n     */\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n    if (!arrows.includes(event.key)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    const radios = this._getRadioGroup();\n\n    if (radios.length < 2) {\n      return;\n    }\n\n    const currentIndex = radios.indexOf(this);\n\n    const nextIndex = currentIndex;\n    let nextRadio: FhiRadio;\n\n    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n    } else {\n      nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n    }\n\n    nextRadio.focus();\n    this.checked = false;\n    nextRadio.checked = true;\n    this._SetTabbableRadios();\n  }\n\n  render() {\n    return html`\n      <label>\n        <div class=\"radio-container\">\n          <input\n            type=\"radio\"\n            id=\"input-element\"\n            name=\"${ifDefined(this.name)}\"\n            value=\"${this.value}\"\n            ?checked=${this.checked}\n            ?disabled=${this.disabled}\n            @change=${this._handleChange}\n            @input=${this._handleInput}\n          />\n          <svg\n            class=\"radio-dot\"\n            viewBox=\"0 0 18 18\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <circle r=\"6\" cx=\"9\" cy=\"9\" />\n          </svg>\n        </div>\n        ${this.label}\n      </label>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --motion-radio-transition: var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      --color-radio-label: var(--fhi-color-neutral-text-default);\n      --color-radio-border: var(--fhi-color-neutral-border-default);\n      --color-radio-background: var(--fhi-color-neutral-background-default);\n\n      --color-radio-border-hover: var(--fhi-color-accent-border-strong);\n      --color-radio-background-hover: var(--fhi-color-accent-background-subtle);\n\n      --color-radio-background-active: var(--fhi-color-accent-surface-default);\n\n      --color-radio-outline: var(--fhi-color-accent-surface-hover);\n\n      --typography-radio-label-font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n      --typography-radio-label-font-size: var(\n        --fhi-typography-body-medium-font-size\n      );\n\n      --typography-radio-label-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n\n      --typography-radio-label-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-radio-label-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-radio-label-gap: var(--fhi-spacing-050);\n      --dimension-radio-width: var(--fhi-spacing-250);\n      --dimension-radio-height: var(--fhi-spacing-250);\n      --dimension-radio-margin: 0.125rem;\n      --dimension-radio-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-radio-dot-size: 1.125rem;\n\n      /* Checked state */\n      --dimension-radio-border-width-checked: var(\n        --fhi-dimension-border-width-active\n      );\n\n      /* Error state */\n      --color-radio-border-error: var(--fhi-color-danger-border-default);\n      --color-radio-background-error: var(\n        --fhi-color-danger-background-default\n      );\n\n      --color-radio-border-error-hover: var(--fhi-color-danger-border-strong);\n      --color-radio-background-error-hover: var(\n        --fhi-color-danger-background-subtle\n      );\n\n      --color-radio-background-error-active: var(\n        --fhi-color-danger-surface-default\n      );\n\n      --color-radio-outline-error: var(--fhi-color-danger-surface-hover);\n\n      /* Disabled state */\n      --opacity-disabled: var(--fhi-opacity-disabled);\n    }\n\n    :host {\n      display: flex;\n      align-items: center;\n      width: max-content;\n\n      label {\n        display: flex;\n        position: relative;\n        gap: var(--dimension-radio-label-gap);\n        color: var(--color-radio-label);\n        font-family: var(--typography-radio-label-font-family);\n        font-size: var(--typography-radio-label-font-size);\n        font-weight: var(--typography-radio-label-font-weight);\n        line-height: var(--typography-radio-label-line-height);\n        letter-spacing: var(--typography-radio-label-letter-spacing);\n      }\n\n      .radio-container {\n        display: flex;\n        position: relative;\n      }\n\n      input {\n        appearance: none;\n        margin: var(--dimension-radio-margin);\n        width: var(--dimension-radio-width);\n        height: var(--dimension-radio-height);\n        background-color: var(--color-radio-background);\n        border: var(--dimension-radio-border-width) solid\n          var(--color-radio-border);\n        border-radius: var(--fhi-border-radius-full);\n        transition: all var(--motion-radio-transition);\n      }\n\n      .radio-dot {\n        visibility: hidden;\n        opacity: 0;\n        transition: opacity var(--motion-radio-transition);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        height: var(--dimension-radio-dot-size);\n        width: var(--dimension-radio-dot-size);\n      }\n\n      input:checked {\n        border-width: var(--dimension-radio-border-width-checked);\n        ~ .radio-dot {\n          circle {\n            fill: var(--color-radio-border);\n          }\n          visibility: visible;\n          opacity: 1;\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      label,\n      input {\n        cursor: not-allowed;\n      }\n    }\n\n    :host(:not(:disabled)) {\n      input:hover:not(:checked) {\n        border-color: var(--color-radio-border-hover);\n        background-color: var(--color-radio-background-hover);\n      }\n\n      input:active:not(:checked) {\n        border-color: var(--color-radio-border-hover);\n        background-color: var(--color-radio-background-active);\n        outline: var(--fhi-dimension-border-width-focus) solid\n          var(--color-radio-outline);\n      }\n    }\n\n    :host([status='error']) {\n      input {\n        border-color: var(--color-radio-border-error);\n        background-color: var(--color-radio-background-error);\n      }\n\n      input:checked {\n        ~ .radio-dot {\n          circle {\n            fill: var(--color-radio-border-error);\n          }\n        }\n      }\n    }\n\n    :host([status='error']:not(:disabled)) {\n      input:hover:not(:checked) {\n        border-color: var(--color-radio-border-error-hover);\n        background-color: var(--color-radio-background-error-hover);\n      }\n\n      input:active:not(:checked) {\n        border-color: var(--color-radio-border-error-hover);\n        background-color: var(--color-radio-background-error-active);\n        outline-color: var(--color-radio-outline-error);\n      }\n    }\n  `;\n}\n"],"mappings":"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"}

package/fhi-tag.js

@@ -1,32 +1,21 @@
-import { i as f, n, a as d, b as h, t as u } from "./property-B2Ico5CW.js";
+import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
 import "./fhi-body.js";
-var v = Object.defineProperty, g = Object.getOwnPropertyDescriptor, s = (l, a, e, o) => {
-  for (var r = o > 1 ? void 0 : o ? g(a, e) : a, t = l.length - 1, i; t >= 0; t--)
-    (i = l[t]) && (r = (o ? i(a, e, r) : i(r)) || r);
-  return o && r && v(a, e, r), r;
-};
-const b = "fhi-tag";
-let c = class extends d {
-  constructor() {
-    super(...arguments), this.color = "neutral", this.variant = "subtle";
-  }
-  _handleSlotChange(l) {
-    const e = l.target.assignedNodes().filter(
-      (r) => {
-        var t;
-        return r.nodeType === Node.ELEMENT_NODE || r.nodeType === Node.TEXT_NODE && ((t = r.textContent) == null ? void 0 : t.trim());
-      }
-    );
-    if (e.length === 0)
-      return;
-    const o = e[0];
-    if (o.nodeType === Node.ELEMENT_NODE && o.tagName.toLowerCase().startsWith("fhi-icon")) {
-      const r = o;
-      r.setAttribute("size", "1rem"), r.style.marginLeft = "calc(-1 * var(--fhi-spacing-050))";
-    }
-  }
-  render() {
-    return h`
+//#region src/components/fhi-tag/fhi-tag.component.ts
+var o = "fhi-tag", s = class extends r {
+	constructor(...e) {
+		super(...e), this.color = "neutral", this.variant = "subtle";
+	}
+	_handleSlotChange(e) {
+		let t = e.target.assignedNodes().filter((e) => e.nodeType === Node.ELEMENT_NODE || e.nodeType === Node.TEXT_NODE && e.textContent?.trim());
+		if (t.length === 0) return;
+		let n = t[0];
+		if (n.nodeType === Node.ELEMENT_NODE && n.tagName.toLowerCase().startsWith("fhi-icon")) {
+			let e = n;
+			e.setAttribute("size", "1rem"), e.style.marginLeft = "calc(-1 * var(--fhi-spacing-050))";
+		}
+	}
+	render() {
+		return a`
       <fhi-body size="small">
         <slot
           class="slot-container"
@@ -34,9 +23,9 @@ let c = class extends d {
         ></slot>
       </fhi-body>
     `;
-  }
-};
-c.styles = f`
+	}
+	static {
+		this.styles = t`
     :host {
       --fhi-tag-border-color: unset;
     }
@@ -116,17 +105,16 @@ c.styles = f`
       }
     }
   `;
-s([
-  n({ type: String, reflect: !0 })
-], c.prototype, "color", 2);
-s([
-  n({ type: String, reflect: !0 })
-], c.prototype, "variant", 2);
-c = s([
-  u(b)
-], c);
-export {
-  c as FhiTag,
-  b as FhiTagSelector
+	}
 };
-//# sourceMappingURL=fhi-tag.js.map
+i([e({
+	type: String,
+	reflect: !0
+})], s.prototype, "color", void 0), i([e({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), s = i([n(o)], s);
+//#endregion
+export { s as FhiTag, o as FhiTagSelector };
+
+//# sourceMappingURL=fhi-tag.js.map

package/fhi-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-tag.js","sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/**\n * ## FHI Tag\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n *\n * The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n *\n * @tag fhi-tag\n * @element fhi-tag\n *\n * @slot - The content of the tag. This should be pure text with, or without, an icon.\n */\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n  /**\n   * Sets the color theme of the tag.\n   * @reflect\n   * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}\n   */\n  @property({ type: String, reflect: true }) color:\n    | 'neutral'\n    | 'accent'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'info' = 'neutral';\n\n  /**\n   * Sets the variant of the tag, which determines its visual style.\n   * @reflect\n   * @type {'subtle' | 'bordered'}\n   */\n  @property({ type: String, reflect: true })\n  variant: 'subtle' | 'bordered' = 'subtle';\n\n  private _handleSlotChange(event: Event): void {\n    const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n    const validNodes = nodes.filter(\n      node =>\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n    );\n\n    if (validNodes.length === 0) {\n      return;\n    }\n\n    const firstNode: Node = validNodes[0];\n\n    if (\n      firstNode.nodeType === Node.ELEMENT_NODE &&\n      (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = firstNode as HTMLElement;\n\n      icon.setAttribute('size', '1rem');\n      icon.style.marginLeft = 'calc(-1 * var(--fhi-spacing-050))';\n    }\n  }\n\n  render() {\n    return html`\n      <fhi-body size=\"small\">\n        <slot\n          class=\"slot-container\"\n          @slotchange=${this._handleSlotChange}\n        ></slot>\n      </fhi-body>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-tag-border-color: unset;\n    }\n\n    :host {\n      --fhi-tag-border-color: transparent;\n\n      display: flex;\n      width: fit-content;\n      align-items: center;\n\n      border: 1px solid var(--fhi-tag-border-color);\n      border-radius: var(--fhi-border-radius-050);\n\n      height: calc(var(--fhi-spacing-300) - 2px);\n      padding: 0 calc(var(--fhi-spacing-100) - 1px);\n\n      .slot-container {\n        display: flex;\n        align-items: center;\n\n        gap: var(--fhi-spacing-050);\n      }\n\n      & fhi-body {\n        color: inherit;\n        text-wrap: nowrap;\n      }\n    }\n\n    :host([color='neutral']) {\n      color: var(--fhi-color-neutral-text-default);\n      background-color: var(--fhi-color-neutral-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-neutral-surface-active);\n      }\n    }\n\n    :host([color='accent']) {\n      color: var(--fhi-color-accent-text-default);\n      background-color: var(--fhi-color-accent-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-accent-surface-active);\n      }\n    }\n\n    :host([color='success']) {\n      color: var(--fhi-color-success-text-default);\n      background-color: var(--fhi-color-success-surface-default);\n\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-success-surface-active);\n      }\n    }\n\n    :host([color='warning']) {\n      color: var(--fhi-color-warning-text-default);\n      background-color: var(--fhi-color-warning-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-warning-surface-active);\n      }\n    }\n\n    :host([color='danger']) {\n      color: var(--fhi-color-danger-text-default);\n      background-color: var(--fhi-color-danger-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-danger-surface-active);\n      }\n    }\n\n    :host([color='info']) {\n      color: var(--fhi-color-info-text-default);\n      background-color: var(--fhi-color-info-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-info-surface-active);\n      }\n    }\n  `;\n}\n"],"names":["FhiTagSelector","FhiTag","LitElement","event","validNodes","node","_a","firstNode","icon","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAiB;AAevB,IAAMC,IAAN,cAAqBC,EAAW;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,QAM9B,WAQb,KAAA,UAAiC;AAAA,EAAA;AAAA,EAEzB,kBAAkBC,GAAoB;AAG5C,UAAMC,IAFSD,EAAM,OAA2B,cAAA,EAEvB;AAAA,MACvB,CAAAE,MAAA;;AACE,eAAAA,EAAK,aAAa,KAAK,gBACtBA,EAAK,aAAa,KAAK,eAAaC,IAAAD,EAAK,gBAAL,gBAAAC,EAAkB;AAAA;AAAA,IAAK;AAGhE,QAAIF,EAAW,WAAW;AACxB;AAGF,UAAMG,IAAkBH,EAAW,CAAC;AAEpC,QACEG,EAAU,aAAa,KAAK,gBAC3BA,EAAsB,QAAQ,YAAA,EAAc,WAAW,UAAU,GAClE;AACA,YAAMC,IAAOD;AAEb,MAAAC,EAAK,aAAa,QAAQ,MAAM,GAChCA,EAAK,MAAM,aAAa;AAAA,IAC1B;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,wBAIa,KAAK,iBAAiB;AAAA;AAAA;AAAA;AAAA,EAI5C;AAkFF;AA3IaR,EA2DJ,SAASS;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AArD2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BX,EAMgC,WAAA,SAAA,CAAA;AAc3CU,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnB9BX,EAoBX,WAAA,WAAA,CAAA;AApBWA,IAANU,EAAA;AAAA,EADNE,EAAcb,CAAc;AAAA,GAChBC,CAAA;"}
+{"version":3,"file":"fhi-tag.js","names":[],"sources":["../../src/components/fhi-tag/fhi-tag.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiTagSelector = 'fhi-tag';\n\n/**\n * ## FHI Tag\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-tag--docs}\n *\n * The `<fhi-tag>` component is used to create non-interactive tags in accordance with the FHI Design System guidelines.\n *\n * @tag fhi-tag\n * @element fhi-tag\n *\n * @slot - The content of the tag. This should be pure text with, or without, an icon.\n */\n@customElement(FhiTagSelector)\nexport class FhiTag extends LitElement {\n  /**\n   * Sets the color theme of the tag.\n   * @reflect\n   * @type {'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'info'}\n   */\n  @property({ type: String, reflect: true }) color:\n    | 'neutral'\n    | 'accent'\n    | 'success'\n    | 'warning'\n    | 'danger'\n    | 'info' = 'neutral';\n\n  /**\n   * Sets the variant of the tag, which determines its visual style.\n   * @reflect\n   * @type {'subtle' | 'bordered'}\n   */\n  @property({ type: String, reflect: true })\n  variant: 'subtle' | 'bordered' = 'subtle';\n\n  private _handleSlotChange(event: Event): void {\n    const nodes = (event.target as HTMLSlotElement).assignedNodes();\n\n    const validNodes = nodes.filter(\n      node =>\n        node.nodeType === Node.ELEMENT_NODE ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()),\n    );\n\n    if (validNodes.length === 0) {\n      return;\n    }\n\n    const firstNode: Node = validNodes[0];\n\n    if (\n      firstNode.nodeType === Node.ELEMENT_NODE &&\n      (firstNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n    ) {\n      const icon = firstNode as HTMLElement;\n\n      icon.setAttribute('size', '1rem');\n      icon.style.marginLeft = 'calc(-1 * var(--fhi-spacing-050))';\n    }\n  }\n\n  render() {\n    return html`\n      <fhi-body size=\"small\">\n        <slot\n          class=\"slot-container\"\n          @slotchange=${this._handleSlotChange}\n        ></slot>\n      </fhi-body>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-tag-border-color: unset;\n    }\n\n    :host {\n      --fhi-tag-border-color: transparent;\n\n      display: flex;\n      width: fit-content;\n      align-items: center;\n\n      border: 1px solid var(--fhi-tag-border-color);\n      border-radius: var(--fhi-border-radius-050);\n\n      height: calc(var(--fhi-spacing-300) - 2px);\n      padding: 0 calc(var(--fhi-spacing-100) - 1px);\n\n      .slot-container {\n        display: flex;\n        align-items: center;\n\n        gap: var(--fhi-spacing-050);\n      }\n\n      & fhi-body {\n        color: inherit;\n        text-wrap: nowrap;\n      }\n    }\n\n    :host([color='neutral']) {\n      color: var(--fhi-color-neutral-text-default);\n      background-color: var(--fhi-color-neutral-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-neutral-surface-active);\n      }\n    }\n\n    :host([color='accent']) {\n      color: var(--fhi-color-accent-text-default);\n      background-color: var(--fhi-color-accent-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-accent-surface-active);\n      }\n    }\n\n    :host([color='success']) {\n      color: var(--fhi-color-success-text-default);\n      background-color: var(--fhi-color-success-surface-default);\n\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-success-surface-active);\n      }\n    }\n\n    :host([color='warning']) {\n      color: var(--fhi-color-warning-text-default);\n      background-color: var(--fhi-color-warning-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-warning-surface-active);\n      }\n    }\n\n    :host([color='danger']) {\n      color: var(--fhi-color-danger-text-default);\n      background-color: var(--fhi-color-danger-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-danger-surface-active);\n      }\n    }\n\n    :host([color='info']) {\n      color: var(--fhi-color-info-text-default);\n      background-color: var(--fhi-color-info-surface-default);\n      &:host([variant='bordered']) {\n        border-color: var(--fhi-color-info-surface-active);\n      }\n    }\n  `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAiB,WAevB,IAAA,cAAqB,EAAW;;4BAYxB,0BAQoB;;CAEjC,kBAA0B,GAAoB;EAG5C,IAAM,IAFS,EAAM,OAA2B,cAE7B,EAAM,QACvB,MACE,EAAK,aAAa,KAAK,gBACtB,EAAK,aAAa,KAAK,aAAa,EAAK,aAAa,KAAK,CAChE;EAEA,IAAI,EAAW,WAAW,GACxB;EAGF,IAAM,IAAkB,EAAW;EAEnC,IACE,EAAU,aAAa,KAAK,gBAC3B,EAAsB,QAAQ,YAAY,EAAE,WAAW,UAAU,GAClE;GACA,IAAM,IAAO;GAGb,AADA,EAAK,aAAa,QAAQ,MAAM,GAChC,EAAK,MAAM,aAAa;EAC1B;CACF;CAEA,SAAS;EACP,OAAO,CAAI;;;;wBAIS,KAAK,kBAAkB;;;;CAI7C;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFrB;GArIG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAaxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UApB1C,EAAc,CAAc,CAAA,GAAA,CAAA"}

package/fhi-text-input.js

@@ -1,90 +1,77 @@
-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 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();
-  }
-  get name() {
-    return this._name;
-  }
-  set name(t) {
-    const e = this._name;
-    this._name = t, this.requestUpdate("name", e), this._internals.setFormValue(this._value);
-  }
-  get value() {
-    return this._value;
-  }
-  set value(t) {
-    const e = this._value;
-    this._value = t, this.requestUpdate("value", e), this._internals.setFormValue(this._value);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this._internals.setFormValue(this.value);
-  }
-  _dispatchChangeEvent() {
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  _dispatchInputEvent() {
-    this.dispatchEvent(
-      new Event("input", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleChange(t) {
-    t.stopPropagation(), this._dispatchChangeEvent();
-  }
-  handleInput(t) {
-    this.value = this._input.value, this._internals.setFormValue(this.value), t.stopPropagation(), this._dispatchInputEvent();
-  }
-  handleKeyDown(t) {
-    t.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
-  }
-  formResetCallback() {
-    this.value = this.getAttribute("value") || "", this._internals.setFormValue(this.value);
-  }
-  _handleStartSlotChange(t) {
-    const e = t.target.assignedNodes()[0];
-    if (e.nodeType === Node.ELEMENT_NODE && e.tagName.toLowerCase().startsWith("fhi-icon")) {
-      const i = e;
-      this._input.style.paddingLeft = "var(--fhi-spacing-500)", i.setAttribute("size", "1.5rem");
-    } else
-      console.error(
-        "Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons."
-      );
-  }
-  _handleEndSlotChange(t) {
-    const e = t.target.assignedNodes()[0];
-    if (e.nodeType === Node.ELEMENT_NODE && e.tagName.toLowerCase().startsWith("fhi-icon")) {
-      const i = e;
-      this._input.style.paddingRight = "var(--fhi-spacing-500)", i.setAttribute("size", "1.5rem");
-    } else
-      console.error(
-        "Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons."
-      );
-  }
-  render() {
-    return s`
-      ${this.label && s`<label for="input-element">${this.label}</label>`}
-      ${this.helpText ? s`<p class="help-text">${this.helpText}</p>` : ""}
+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";
+//#region src/components/fhi-text-input/fhi-text-input.component.ts
+var c = "fhi-text-input", 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._name = void 0, this._value = "", this._internals = this.attachInternals();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._internals.setFormValue(this.value);
+	}
+	_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._input.value, this._internals.setFormValue(this.value), e.stopPropagation(), this._dispatchInputEvent();
+	}
+	handleKeyDown(e) {
+		e.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
+	}
+	formResetCallback() {
+		this.value = this.getAttribute("value") || "", this._internals.setFormValue(this.value);
+	}
+	_handleStartSlotChange(e) {
+		let t = e.target.assignedNodes()[0];
+		if (t.nodeType === Node.ELEMENT_NODE && t.tagName.toLowerCase().startsWith("fhi-icon")) {
+			let e = t;
+			this._input.style.paddingLeft = "var(--fhi-spacing-500)", e.setAttribute("size", "1.5rem");
+		} else console.error("Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.");
+	}
+	_handleEndSlotChange(e) {
+		let t = e.target.assignedNodes()[0];
+		if (t.nodeType === Node.ELEMENT_NODE && t.tagName.toLowerCase().startsWith("fhi-icon")) {
+			let e = t;
+			this._input.style.paddingRight = "var(--fhi-spacing-500)", e.setAttribute("size", "1.5rem");
+		} else console.error("Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.");
+	}
+	render() {
+		return o`
+      ${this.label && o`<label for="input-element">${this.label}</label>`}
+      ${this.helpText ? o`<p class="help-text">${this.helpText}</p>` : ""}
       <div class="input-container">
         <input
           id="input-element"
-          name=${p(this.name)}
-          placeholder=${p(this.placeholder)}
+          name=${s(this.name)}
+          placeholder=${s(this.placeholder)}
           .value=${this.value}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
@@ -95,12 +82,11 @@ let o = class extends u {
         <slot name="start" @slotchange=${this._handleStartSlotChange}> </slot>
         <slot name="end" @slotchange=${this._handleEndSlotChange}> </slot>
       </div>
-      ${this.message ? s`<p class="message">${this.message}</p>` : ""}
+      ${this.message ? o`<p class="message">${this.message}</p>` : ""}
     `;
-  }
-};
-o.formAssociated = !0;
-o.styles = c`
+	}
+	static {
+		this.styles = t`
     :host {
       --fhi-text-input-placeholder-color: unset;
     }
@@ -267,41 +253,25 @@ o.styles = c`
       }
     }
   `;
-a([
-  r({ type: String })
-], o.prototype, "label", 2);
-a([
-  r({ type: String })
-], o.prototype, "message", 2);
-a([
-  r({ type: String, attribute: "help-text" })
-], o.prototype, "helpText", 2);
-a([
-  r({ type: String })
-], o.prototype, "placeholder", 2);
-a([
-  r({ type: String, reflect: !0 })
-], o.prototype, "status", 2);
-a([
-  r({ type: Boolean, reflect: !0 })
-], o.prototype, "readonly", 2);
-a([
-  r({ type: Boolean, reflect: !0 })
-], o.prototype, "disabled", 2);
-a([
-  g("#input-element")
-], o.prototype, "_input", 2);
-a([
-  r({ type: String, reflect: !0 })
-], o.prototype, "name", 1);
-a([
-  r({ type: String })
-], o.prototype, "value", 1);
-o = a([
-  f(y)
-], o);
-export {
-  o as FhiTextInput,
-  y as FhiTextInputSelector
+	}
 };
-//# sourceMappingURL=fhi-text-input.js.map
+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([r("#input-element")], l.prototype, "_input", 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 FhiTextInput, c 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      --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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"}
+{"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":"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"}

package/fhi-title.js

@@ -1,36 +1,26 @@
-import { i as n, n as p, a as f, b as g, t as y } from "./property-B2Ico5CW.js";
-import { o as m } from "./unsafe-html-DfuTUjUu.js";
-var c = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (t, e, s, r) => {
-  for (var i = r > 1 ? void 0 : r ? v(e, s) : e, a = t.length - 1, h; a >= 0; a--)
-    (h = t[a]) && (i = (r ? h(e, s, i) : h(i)) || i);
-  return r && i && c(e, s, i), i;
-};
-const u = "fhi-title";
-let l = class extends f {
-  constructor() {
-    super(...arguments), this.size = "medium", this.color = "currentcolor";
-  }
-  updated(t) {
-    if (super.updated(t), t.has("level")) {
-      const e = Number(this.level);
-      (isNaN(e) || e < 1 || e > 6) && console.error(
-        new TypeError(
-          `The level property must be set to a number between 1 and 6. Current value: ${this.level}`
-        )
-      );
-    }
-    t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
-  }
-  render() {
-    const t = `
+import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
+import { t as o } from "./unsafe-html-CBTN3162.js";
+//#region src/components/typography/fhi-title/fhi-title.component.ts
+var s = "fhi-title", c = class extends r {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.color = "currentcolor";
+	}
+	updated(e) {
+		if (super.updated(e), e.has("level")) {
+			let e = Number(this.level);
+			(isNaN(e) || e < 1 || e > 6) && console.error(/* @__PURE__ */ TypeError(`The level property must be set to a number between 1 and 6. Current value: ${this.level}`));
+		}
+		e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
+	}
+	render() {
+		return a`${o(`
       <h${this.level} class="title">
         <slot></slot>
       </h${this.level}>
-    `;
-    return g`${m(t)}`;
-  }
-};
-l.styles = n`
+    `)}`;
+	}
+	static {
+		this.styles = t`
     :host {
       display: block;
       contain: layout;
@@ -68,20 +58,13 @@ l.styles = n`
       }
     }
   `;
-o([
-  p({ type: String, reflect: !0 })
-], l.prototype, "size", 2);
-o([
-  p({ type: String })
-], l.prototype, "color", 2);
-o([
-  p({ type: Number })
-], l.prototype, "level", 2);
-l = o([
-  y(u)
-], l);
-export {
-  l as FhiTitle,
-  u as FhiTitleSelector
+	}
 };
-//# sourceMappingURL=fhi-title.js.map
+i([e({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), i([e({ type: Number })], c.prototype, "level", void 0), c = i([n(s)], c);
+//#endregion
+export { c as FhiTitle, s as FhiTitleSelector };
+
+//# sourceMappingURL=fhi-title.js.map