@folkehelseinstituttet/designsystem 0.38.0 → 0.38.2

package/fhi-date-input.js.map

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

package/fhi-display.js

@@ -1,12 +1,12 @@
-import { i as n, n as p, a as g, b as f, t as y } from "./property-B2Ico5CW.js";
-import { o as m } from "./unsafe-html-DfuTUjUu.js";
-var v = Object.defineProperty, d = Object.getOwnPropertyDescriptor, r = (e, t, s, a) => {
-  for (var i = a > 1 ? void 0 : a ? d(t, s) : t, o = e.length - 1, h; o >= 0; o--)
-    (h = e[o]) && (i = (a ? h(t, s, i) : h(i)) || i);
-  return a && i && v(t, s, i), i;
+import { i as y, n as h, a as n, b as f, t as g } from "./property-B2Ico5CW.js";
+import { o as d } from "./unsafe-html-DfuTUjUu.js";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? v(t, s) : t, o = e.length - 1, p; o >= 0; o--)
+    (p = e[o]) && (i = (r ? p(t, s, i) : p(i)) || i);
+  return r && i && m(t, s, i), i;
 };
 const u = "fhi-display";
-let l = class extends g {
+let l = class extends n {
   constructor() {
     super(...arguments), this.size = "medium";
   }
@@ -27,33 +27,10 @@ let l = class extends g {
         <slot></slot>
       </h${this.level}>
     `;
-    return f`${m(e)}`;
+    return f`${d(e)}`;
   }
 };
-l.styles = n`
-    :host {
-      --font-size-large: var(--fhi-typography-display-large-font-size);
-      --font-weight-large: var(--fhi-typography-display-large-font-weight);
-      --line-height-large: var(--fhi-typography-display-large-line-height);
-      --letter-spacing-large: var(
-        --fhi-typography-display-large-letter-spacing
-      );
-
-      --font-size-medium: var(--fhi-typography-display-medium-font-size);
-      --font-weight-medium: var(--fhi-typography-display-medium-font-weight);
-      --line-height-medium: var(--fhi-typography-display-medium-line-height);
-      --letter-spacing-medium: var(
-        --fhi-typography-display-medium-letter-spacing
-      );
-
-      --font-size-small: var(--fhi-typography-display-small-font-size);
-      --font-weight-small: var(--fhi-typography-display-small-font-weight);
-      --line-height-small: var(--fhi-typography-display-small-line-height);
-      --letter-spacing-small: var(
-        --fhi-typography-display-small-letter-spacing
-      );
-    }
-
+l.styles = y`
     :host {
       display: block;
       contain: layout;
@@ -67,42 +44,42 @@ l.styles = n`
 
     :host([size='large']) {
       .display {
-        font-size: var(--font-size-large);
-        font-weight: var(--font-weight-large);
-        line-height: var(--line-height-large);
-        letter-spacing: var(--letter-spacing-large);
+        font-size: var(--fhi-typography-display-large-font-size);
+        font-weight: var(--fhi-typography-display-large-font-weight);
+        line-height: var(--fhi-typography-display-large-line-height);
+        letter-spacing: var(--fhi-typography-display-large-letter-spacing);
       }
     }
 
     :host([size='medium']) {
       .display {
-        font-size: var(--font-size-medium);
-        font-weight: var(--font-weight-medium);
-        line-height: var(--line-height-medium);
-        letter-spacing: var(--letter-spacing-medium);
+        font-size: var(--fhi-typography-display-medium-font-size);
+        font-weight: var(--fhi-typography-display-medium-font-weight);
+        line-height: var(--fhi-typography-display-medium-line-height);
+        letter-spacing: var(--fhi-typography-display-medium-letter-spacing);
       }
     }
 
     :host([size='small']) {
       .display {
-        font-size: var(--font-size-small);
-        font-weight: var(--font-weight-small);
-        line-height: var(--line-height-small);
-        letter-spacing: var(--letter-spacing-small);
+        font-size: var(--fhi-typography-display-small-font-size);
+        font-weight: var(--fhi-typography-display-small-font-weight);
+        line-height: var(--fhi-typography-display-small-line-height);
+        letter-spacing: var(--fhi-typography-display-small-letter-spacing);
       }
     }
   `;
-r([
-  p({ type: String, reflect: !0 })
+a([
+  h({ type: String, reflect: !0 })
 ], l.prototype, "size", 2);
-r([
-  p({ type: String })
+a([
+  h({ type: String })
 ], l.prototype, "color", 2);
-r([
-  p({ type: Number })
+a([
+  h({ type: Number })
 ], l.prototype, "level", 2);
-l = r([
-  y(u)
+l = a([
+  g(u)
 ], l);
 export {
   l as FhiDisplay,

package/fhi-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n  /**\n   * Sets the font size of the given text.\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n   *\n   * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n   * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n   *\n   * Example:\n   * ```html\n   *  <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-display>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string;\n\n  /**\n   * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n   * @type {1 | 2 | 3 | 4 | 5 | 6}\n   */\n  @property({ type: Number }) level!: DisplayLevel;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('level')) {\n      const levelAsNumber = Number(this.level);\n      if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n        console.error(\n          new TypeError(\n            `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n          ),\n        );\n      }\n    }\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string'\n          ? this.color\n          : 'var(--fhi-color-neutral-text-default)';\n    }\n  }\n\n  render() {\n    const template = `\n      <h${this.level} class=\"display\">\n        <slot></slot>\n      </h${this.level}>\n    `;\n    return html`${unsafeHTML(template)}`;\n  }\n\n  static styles = css`\n    :host {\n      --font-size-large: var(--fhi-typography-display-large-font-size);\n      --font-weight-large: var(--fhi-typography-display-large-font-weight);\n      --line-height-large: var(--fhi-typography-display-large-line-height);\n      --letter-spacing-large: var(\n        --fhi-typography-display-large-letter-spacing\n      );\n\n      --font-size-medium: var(--fhi-typography-display-medium-font-size);\n      --font-weight-medium: var(--fhi-typography-display-medium-font-weight);\n      --line-height-medium: var(--fhi-typography-display-medium-line-height);\n      --letter-spacing-medium: var(\n        --fhi-typography-display-medium-letter-spacing\n      );\n\n      --font-size-small: var(--fhi-typography-display-small-font-size);\n      --font-weight-small: var(--fhi-typography-display-small-font-weight);\n      --line-height-small: var(--fhi-typography-display-small-line-height);\n      --letter-spacing-small: var(\n        --fhi-typography-display-small-letter-spacing\n      );\n    }\n\n    :host {\n      display: block;\n      contain: layout;\n      color: var(--fhi-color-neutral-text-default);\n      .display {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .display {\n        font-size: var(--font-size-large);\n        font-weight: var(--font-weight-large);\n        line-height: var(--line-height-large);\n        letter-spacing: var(--letter-spacing-large);\n      }\n    }\n\n    :host([size='medium']) {\n      .display {\n        font-size: var(--font-size-medium);\n        font-weight: var(--font-weight-medium);\n        line-height: var(--line-height-medium);\n        letter-spacing: var(--letter-spacing-medium);\n      }\n    }\n\n    :host([size='small']) {\n      .display {\n        font-size: var(--font-size-small);\n        font-weight: var(--font-weight-small);\n        line-height: var(--line-height-small);\n        letter-spacing: var(--letter-spacing-small);\n      }\n    }\n  `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAuB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AA/HaJ,EAiEJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAkB;AAAA,GACpBC,CAAA;"}
+{"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n  /**\n   * Sets the font size of the given text.\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n   *\n   * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n   * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n   *\n   * Example:\n   * ```html\n   *  <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-display>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string;\n\n  /**\n   * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n   * @type {1 | 2 | 3 | 4 | 5 | 6}\n   */\n  @property({ type: Number }) level!: DisplayLevel;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('level')) {\n      const levelAsNumber = Number(this.level);\n      if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n        console.error(\n          new TypeError(\n            `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n          ),\n        );\n      }\n    }\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string'\n          ? this.color\n          : 'var(--fhi-color-neutral-text-default)';\n    }\n  }\n\n  render() {\n    const template = `\n      <h${this.level} class=\"display\">\n        <slot></slot>\n      </h${this.level}>\n    `;\n    return html`${unsafeHTML(template)}`;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      contain: layout;\n      color: var(--fhi-color-neutral-text-default);\n      .display {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .display {\n        font-size: var(--fhi-typography-display-large-font-size);\n        font-weight: var(--fhi-typography-display-large-font-weight);\n        line-height: var(--fhi-typography-display-large-line-height);\n        letter-spacing: var(--fhi-typography-display-large-letter-spacing);\n      }\n    }\n\n    :host([size='medium']) {\n      .display {\n        font-size: var(--fhi-typography-display-medium-font-size);\n        font-weight: var(--fhi-typography-display-medium-font-weight);\n        line-height: var(--fhi-typography-display-medium-line-height);\n        letter-spacing: var(--fhi-typography-display-medium-letter-spacing);\n      }\n    }\n\n    :host([size='small']) {\n      .display {\n        font-size: var(--fhi-typography-display-small-font-size);\n        font-weight: var(--fhi-typography-display-small-font-weight);\n        line-height: var(--fhi-typography-display-small-line-height);\n        letter-spacing: var(--fhi-typography-display-small-letter-spacing);\n      }\n    }\n  `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAuB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAyCF;AAxGaJ,EAiEJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAkB;AAAA,GACpBC,CAAA;"}

package/fhi-headline.js

@@ -1,12 +1,12 @@
-import { i as g, n as s, a as p, b as f, t as m } from "./property-B2Ico5CW.js";
+import { i as p, n as s, a as f, b as g, t as y } from "./property-B2Ico5CW.js";
 import { o as d } from "./unsafe-html-DfuTUjUu.js";
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, t, h, a) => {
-  for (var i = a > 1 ? void 0 : a ? y(t, h) : t, n = e.length - 1, o; n >= 0; n--)
-    (o = e[n]) && (i = (a ? o(t, h, i) : o(i)) || i);
-  return a && i && v(t, h, i), i;
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (e, t, h, r) => {
+  for (var i = r > 1 ? void 0 : r ? v(t, h) : t, o = e.length - 1, n; o >= 0; o--)
+    (n = e[o]) && (i = (r ? n(t, h, i) : n(i)) || i);
+  return r && i && m(t, h, i), i;
 };
 const u = "fhi-headline";
-let l = class extends p {
+let l = class extends f {
   constructor() {
     super(...arguments), this.size = "medium";
   }
@@ -27,33 +27,10 @@ let l = class extends p {
         <slot></slot>
       </h${this.level}>
     `;
-    return f`${d(e)}`;
+    return g`${d(e)}`;
   }
 };
-l.styles = g`
-    :host {
-      --font-size-large: var(--fhi-typography-headline-large-font-size);
-      --font-weight-large: var(--fhi-typography-headline-large-font-weight);
-      --line-height-large: var(--fhi-typography-headline-large-line-height);
-      --letter-spacing-large: var(
-        --fhi-typography-headline-large-letter-spacing
-      );
-
-      --font-size-medium: var(--fhi-typography-headline-medium-font-size);
-      --font-weight-medium: var(--fhi-typography-headline-medium-font-weight);
-      --line-height-medium: var(--fhi-typography-headline-medium-line-height);
-      --letter-spacing-medium: var(
-        --fhi-typography-headline-medium-letter-spacing
-      );
-
-      --font-size-small: var(--fhi-typography-headline-small-font-size);
-      --font-weight-small: var(--fhi-typography-headline-small-font-weight);
-      --line-height-small: var(--fhi-typography-headline-small-line-height);
-      --letter-spacing-small: var(
-        --fhi-typography-headline-small-letter-spacing
-      );
-    }
-
+l.styles = p`
     :host {
       display: block;
       contain: layout;
@@ -67,42 +44,42 @@ l.styles = g`
 
     :host([size='large']) {
       .headline {
-        font-size: var(--font-size-large);
-        font-weight: var(--font-weight-large);
-        line-height: var(--line-height-large);
-        letter-spacing: var(--letter-spacing-large);
+        font-size: var(--fhi-typography-headline-large-font-size);
+        font-weight: var(--fhi-typography-headline-large-font-weight);
+        line-height: var(--fhi-typography-headline-large-line-height);
+        letter-spacing: var(--fhi-typography-headline-large-letter-spacing);
       }
     }
 
     :host([size='medium']) {
       .headline {
-        font-size: var(--font-size-medium);
-        font-weight: var(--font-weight-medium);
-        line-height: var(--line-height-medium);
-        letter-spacing: var(--letter-spacing-medium);
+        font-size: var(--fhi-typography-headline-medium-font-size);
+        font-weight: var(--fhi-typography-headline-medium-font-weight);
+        line-height: var(--fhi-typography-headline-medium-line-height);
+        letter-spacing: var(--fhi-typography-headline-medium-letter-spacing);
       }
     }
 
     :host([size='small']) {
       .headline {
-        font-size: var(--font-size-small);
-        font-weight: var(--font-weight-small);
-        line-height: var(--line-height-small);
-        letter-spacing: var(--letter-spacing-small);
+        font-size: var(--fhi-typography-headline-small-font-size);
+        font-weight: var(--fhi-typography-headline-small-font-weight);
+        line-height: var(--fhi-typography-headline-small-line-height);
+        letter-spacing: var(--fhi-typography-headline-small-letter-spacing);
       }
     }
   `;
-r([
+a([
   s({ type: String, reflect: !0 })
 ], l.prototype, "size", 2);
-r([
+a([
   s({ type: String })
 ], l.prototype, "color", 2);
-r([
+a([
   s({ type: Number })
 ], l.prototype, "level", 2);
-l = r([
-  m(u)
+l = a([
+  y(u)
 ], l);
 export {
   l as FhiHeadline,

package/fhi-headline.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-headline.js","sources":["../../src/components/typography/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For larger, more prominent headline text, use the `<fhi-display>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n  /**\n   * Sets the size of the text styles.\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n   *\n   * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n   * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n   *\n   * Example:\n   * ```html\n   *  <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-headline>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string;\n\n  /**\n   * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n   * @type {1 | 2 | 3 | 4 | 5 | 6}\n   */\n  @property({ type: Number }) level!: HeadlineLevel;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('level')) {\n      const levelAsNumber = Number(this.level);\n      if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n        console.error(\n          new TypeError(\n            `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n          ),\n        );\n      }\n    }\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string'\n          ? this.color\n          : 'var(--fhi-color-neutral-text-default)';\n    }\n  }\n\n  render() {\n    const template = `\n      <h${this.level} class=\"headline\">\n        <slot></slot>\n      </h${this.level}>\n    `;\n    return html`${unsafeHTML(template)}`;\n  }\n\n  static styles = css`\n    :host {\n      --font-size-large: var(--fhi-typography-headline-large-font-size);\n      --font-weight-large: var(--fhi-typography-headline-large-font-weight);\n      --line-height-large: var(--fhi-typography-headline-large-line-height);\n      --letter-spacing-large: var(\n        --fhi-typography-headline-large-letter-spacing\n      );\n\n      --font-size-medium: var(--fhi-typography-headline-medium-font-size);\n      --font-weight-medium: var(--fhi-typography-headline-medium-font-weight);\n      --line-height-medium: var(--fhi-typography-headline-medium-line-height);\n      --letter-spacing-medium: var(\n        --fhi-typography-headline-medium-letter-spacing\n      );\n\n      --font-size-small: var(--fhi-typography-headline-small-font-size);\n      --font-weight-small: var(--fhi-typography-headline-small-font-weight);\n      --line-height-small: var(--fhi-typography-headline-small-line-height);\n      --letter-spacing-small: var(\n        --fhi-typography-headline-small-letter-spacing\n      );\n    }\n\n    :host {\n      display: block;\n      contain: layout;\n      color: var(--fhi-color-neutral-text-default);\n      .headline {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .headline {\n        font-size: var(--font-size-large);\n        font-weight: var(--font-weight-large);\n        line-height: var(--line-height-large);\n        letter-spacing: var(--letter-spacing-large);\n      }\n    }\n\n    :host([size='medium']) {\n      .headline {\n        font-size: var(--font-size-medium);\n        font-weight: var(--font-weight-medium);\n        line-height: var(--line-height-medium);\n        letter-spacing: var(--letter-spacing-medium);\n      }\n    }\n\n    :host([size='small']) {\n      .headline {\n        font-size: var(--font-size-small);\n        font-weight: var(--font-weight-small);\n        line-height: var(--line-height-small);\n        letter-spacing: var(--letter-spacing-small);\n      }\n    }\n  `;\n}\n"],"names":["FhiHeadlineSelector","FhiHeadline","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAuB5B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AA/HaJ,EAiEJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAmB;AAAA,GACrBC,CAAA;"}
+{"version":3,"file":"fhi-headline.js","sources":["../../src/components/typography/fhi-headline/fhi-headline.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiHeadlineSelector = 'fhi-headline';\n\nexport type HeadlineLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Headline\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-headline--preview}\n *\n * The `<fhi-headline>` component is used to display standard headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For larger, more prominent headline text, use the `<fhi-display>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-headline\n * @element fhi-headline\n *\n * @slot - The content of the fhi-headline component. This should be pure text.\n */\n@customElement(FhiHeadlineSelector)\nexport class FhiHeadline extends LitElement {\n  /**\n   * Sets the size of the text styles.\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n   *\n   * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n   * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n   *\n   * Example:\n   * ```html\n   *  <fhi-headline color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-headline>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string;\n\n  /**\n   * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n   * @type {1 | 2 | 3 | 4 | 5 | 6}\n   */\n  @property({ type: Number }) level!: HeadlineLevel;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('level')) {\n      const levelAsNumber = Number(this.level);\n      if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n        console.error(\n          new TypeError(\n            `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n          ),\n        );\n      }\n    }\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string'\n          ? this.color\n          : 'var(--fhi-color-neutral-text-default)';\n    }\n  }\n\n  render() {\n    const template = `\n      <h${this.level} class=\"headline\">\n        <slot></slot>\n      </h${this.level}>\n    `;\n    return html`${unsafeHTML(template)}`;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      contain: layout;\n      color: var(--fhi-color-neutral-text-default);\n      .headline {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .headline {\n        font-size: var(--fhi-typography-headline-large-font-size);\n        font-weight: var(--fhi-typography-headline-large-font-weight);\n        line-height: var(--fhi-typography-headline-large-line-height);\n        letter-spacing: var(--fhi-typography-headline-large-letter-spacing);\n      }\n    }\n\n    :host([size='medium']) {\n      .headline {\n        font-size: var(--fhi-typography-headline-medium-font-size);\n        font-weight: var(--fhi-typography-headline-medium-font-weight);\n        line-height: var(--fhi-typography-headline-medium-line-height);\n        letter-spacing: var(--fhi-typography-headline-medium-letter-spacing);\n      }\n    }\n\n    :host([size='small']) {\n      .headline {\n        font-size: var(--fhi-typography-headline-small-font-size);\n        font-weight: var(--fhi-typography-headline-small-font-weight);\n        line-height: var(--fhi-typography-headline-small-line-height);\n        letter-spacing: var(--fhi-typography-headline-small-letter-spacing);\n      }\n    }\n  `;\n}\n"],"names":["FhiHeadlineSelector","FhiHeadline","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAsB;AAuB5B,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAyCF;AAxGaJ,EAiEJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAmB;AAAA,GACrBC,CAAA;"}

package/fhi-label.js

@@ -1,10 +1,10 @@
-import { i as g, n, a as f, b as p, t as m } from "./property-B2Ico5CW.js";
-var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, s = (t, a, r, i) => {
-  for (var e = i > 1 ? void 0 : i ? v(a, r) : a, o = t.length - 1, h; o >= 0; o--)
+import { i as n, n as p, a as f, b as g, t as y } from "./property-B2Ico5CW.js";
+var b = Object.defineProperty, c = Object.getOwnPropertyDescriptor, s = (t, a, r, i) => {
+  for (var e = i > 1 ? void 0 : i ? c(a, r) : a, o = t.length - 1, h; o >= 0; o--)
     (h = t[o]) && (e = (i ? h(a, r, e) : h(e)) || e);
-  return i && e && y(a, r, e), e;
+  return i && e && b(a, r, e), e;
 };
-const c = "fhi-label";
+const m = "fhi-label";
 let l = class extends f {
   constructor() {
     super(...arguments), this.size = "medium";
@@ -13,33 +13,14 @@ let l = class extends f {
     super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "var(--fhi-color-neutral-text-default)");
   }
   render() {
-    return p`
+    return g`
       <span class="label">
         <slot></slot>
       </span>
     `;
   }
 };
-l.styles = g`
-    :host {
-      --font-size-large: var(--fhi-typography-label-large-font-size);
-      --font-weight-large: var(--fhi-typography-label-large-font-weight);
-      --line-height-large: var(--fhi-typography-label-large-line-height);
-      --letter-spacing-large: var(--fhi-typography-label-large-letter-spacing);
-
-      --font-size-medium: var(--fhi-typography-label-medium-font-size);
-      --font-weight-medium: var(--fhi-typography-label-medium-font-weight);
-      --line-height-medium: var(--fhi-typography-label-medium-line-height);
-      --letter-spacing-medium: var(
-        --fhi-typography-label-medium-letter-spacing
-      );
-
-      --font-size-small: var(--fhi-typography-label-small-font-size);
-      --font-weight-small: var(--fhi-typography-label-small-font-weight);
-      --line-height-small: var(--fhi-typography-label-small-line-height);
-      --letter-spacing-small: var(--fhi-typography-label-small-letter-spacing);
-    }
-
+l.styles = n`
     :host {
       display: block;
       contain: layout;
@@ -53,42 +34,42 @@ l.styles = g`
 
     :host([size='large']) {
       .label {
-        font-size: var(--font-size-large);
-        font-weight: var(--font-weight-large);
-        line-height: var(--line-height-large);
-        letter-spacing: var(--letter-spacing-large);
+        font-size: var(--fhi-typography-label-large-font-size);
+        font-weight: var(--fhi-typography-label-large-font-weight);
+        line-height: var(--fhi-typography-label-large-line-height);
+        letter-spacing: var(--fhi-typography-label-large-letter-spacing);
       }
     }
 
     :host([size='medium']) {
       .label {
-        font-size: var(--font-size-medium);
-        font-weight: var(--font-weight-medium);
-        line-height: var(--line-height-medium);
-        letter-spacing: var(--letter-spacing-medium);
+        font-size: var(--fhi-typography-label-medium-font-size);
+        font-weight: var(--fhi-typography-label-medium-font-weight);
+        line-height: var(--fhi-typography-label-medium-line-height);
+        letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
       }
     }
 
     :host([size='small']) {
       .label {
-        font-size: var(--font-size-small);
-        font-weight: var(--font-weight-small);
-        line-height: var(--line-height-small);
-        letter-spacing: var(--letter-spacing-small);
+        font-size: var(--fhi-typography-label-small-font-size);
+        font-weight: var(--fhi-typography-label-small-font-weight);
+        line-height: var(--fhi-typography-label-small-line-height);
+        letter-spacing: var(--fhi-typography-label-small-letter-spacing);
       }
     }
   `;
 s([
-  n({ type: String, reflect: !0 })
+  p({ type: String, reflect: !0 })
 ], l.prototype, "size", 2);
 s([
-  n({ type: String })
+  p({ type: String })
 ], l.prototype, "color", 2);
 l = s([
-  m(c)
+  y(m)
 ], l);
 export {
   l as FhiLabel,
-  c as FhiLabelSelector
+  m as FhiLabelSelector
 };
 //# sourceMappingURL=fhi-label.js.map

package/fhi-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-label.js","sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel extends LitElement {\n  /**\n   * Sets the font size of the given text.\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n   *\n   * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n   * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n   *\n   * Example:\n   * ```html\n   *  <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-label>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string'\n          ? this.color\n          : 'var(--fhi-color-neutral-text-default)';\n    }\n  }\n\n  render() {\n    return html`\n      <span class=\"label\">\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --font-size-large: var(--fhi-typography-label-large-font-size);\n      --font-weight-large: var(--fhi-typography-label-large-font-weight);\n      --line-height-large: var(--fhi-typography-label-large-line-height);\n      --letter-spacing-large: var(--fhi-typography-label-large-letter-spacing);\n\n      --font-size-medium: var(--fhi-typography-label-medium-font-size);\n      --font-weight-medium: var(--fhi-typography-label-medium-font-weight);\n      --line-height-medium: var(--fhi-typography-label-medium-line-height);\n      --letter-spacing-medium: var(\n        --fhi-typography-label-medium-letter-spacing\n      );\n\n      --font-size-small: var(--fhi-typography-label-small-font-size);\n      --font-weight-small: var(--fhi-typography-label-small-font-weight);\n      --line-height-small: var(--fhi-typography-label-small-line-height);\n      --letter-spacing-small: var(--fhi-typography-label-small-letter-spacing);\n    }\n\n    :host {\n      display: block;\n      contain: layout;\n      color: var(--fhi-color-neutral-text-default);\n      .label {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .label {\n        font-size: var(--font-size-large);\n        font-weight: var(--font-weight-large);\n        line-height: var(--line-height-large);\n        letter-spacing: var(--letter-spacing-large);\n      }\n    }\n\n    :host([size='medium']) {\n      .label {\n        font-size: var(--font-size-medium);\n        font-weight: var(--font-weight-medium);\n        line-height: var(--line-height-medium);\n        letter-spacing: var(--letter-spacing-medium);\n      }\n    }\n\n    :host([size='small']) {\n      .label {\n        font-size: var(--font-size-small);\n        font-weight: var(--font-weight-small);\n        line-height: var(--line-height-small);\n        letter-spacing: var(--letter-spacing-small);\n      }\n    }\n  `;\n}\n"],"names":["FhiLabelSelector","FhiLabel","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAmB;AAgBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AA4DF;AAzGaH,EA+CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAzC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAgB;AAAA,GAClBC,CAAA;"}
+{"version":3,"file":"fhi-label.js","sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel extends LitElement {\n  /**\n   * Sets the font size of the given text.\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n   *\n   * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n   * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n   *\n   * Example:\n   * ```html\n   *  <fhi-label color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-label>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string'\n          ? this.color\n          : 'var(--fhi-color-neutral-text-default)';\n    }\n  }\n\n  render() {\n    return html`\n      <span class=\"label\">\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      contain: layout;\n      color: var(--fhi-color-neutral-text-default);\n      .label {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .label {\n        font-size: var(--fhi-typography-label-large-font-size);\n        font-weight: var(--fhi-typography-label-large-font-weight);\n        line-height: var(--fhi-typography-label-large-line-height);\n        letter-spacing: var(--fhi-typography-label-large-letter-spacing);\n      }\n    }\n\n    :host([size='medium']) {\n      .label {\n        font-size: var(--fhi-typography-label-medium-font-size);\n        font-weight: var(--fhi-typography-label-medium-font-weight);\n        line-height: var(--fhi-typography-label-medium-line-height);\n        letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n      }\n    }\n\n    :host([size='small']) {\n      .label {\n        font-size: var(--fhi-typography-label-small-font-size);\n        font-weight: var(--fhi-typography-label-small-font-weight);\n        line-height: var(--fhi-typography-label-small-line-height);\n        letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n      }\n    }\n  `;\n}\n"],"names":["FhiLabelSelector","FhiLabel","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAmB;AAgBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAmBd,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAyCF;AAtFaH,EA+CJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAzC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAgB;AAAA,GAClBC,CAAA;"}