@folkehelseinstituttet/designsystem 0.45.0 → 0.45.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/{fhi-date-input.component-Bus7CeKM.js → fhi-date-input.component-C1cwkp36.js} +2 -2
  2. package/{fhi-date-input.component-Bus7CeKM.js.map → fhi-date-input.component-C1cwkp36.js.map} +1 -1
  3. package/fhi-date-input.js +1 -1
  4. package/fhi-text-area.js +7 -9
  5. package/fhi-text-area.js.map +1 -1
  6. package/fhi-text-input.js +1 -1
  7. package/fhi-text-input.js.map +1 -1
  8. package/index.js +1 -1
  9. package/package.json +1 -1
  10. package/web-types.json +1 -1
package/{fhi-date-input.component-Bus7CeKM.js → fhi-date-input.component-C1cwkp36.js} RENAMED
@@ -100,7 +100,7 @@ var c = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent), l = "f
100
100
  line-height: var(--fhi-typography-label-small-line-height);
101
101
  letter-spacing: var(--fhi-typography-label-small-letter-spacing);
102
102
  color: var(--fhi-color-neutral-text-default);
103
- margin: 0 0 var(--fhi-spacing-050) 0;
103
+ padding: 0 0 var(--fhi-spacing-050) 0;
104
104
  }
105
105
  label:has(+ p) {
106
106
  margin: 0 0 0 0;
@@ -275,4 +275,4 @@ a([e({ type: String })], u.prototype, "label", void 0), a([e({ type: String })],
275
275
  //#endregion
276
276
  export { l as n, u as t };
277
277
 
278
- //# sourceMappingURL=fhi-date-input.component-Bus7CeKM.js.map
278
+ //# sourceMappingURL=fhi-date-input.component-C1cwkp36.js.map
package/{fhi-date-input.component-Bus7CeKM.js.map → fhi-date-input.component-C1cwkp36.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-date-input.component-Bus7CeKM.js","names":[],"sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n *\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text that labels the input field.\n * An input field should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the input field.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * The help-text shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) min?: FhiDateValue = undefined;\n\n /**\n * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) max?: FhiDateValue = undefined;\n\n /**\n * Sets the visual status of the input. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the input. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _name?: string | undefined = undefined;\n\n /**\n * The name of the input. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n\n set name(newName: string | undefined) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _value?: string = '';\n\n /**\n * The default value of the input field, formatted as `YYYY-MM-DD`.\n *\n * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): FhiDateValue {\n return this._value as FhiDateValue;\n }\n\n set value(newValue: FhiDateValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value ?? null);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _handleChange(): void {\n this._dispatchChangeEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleInput(event: Event): void {\n this.value = this._input.value as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this._internals.form) {\n this._internals.form!.requestSubmit();\n }\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _showDate(event?: KeyboardEvent) {\n if (\n event &&\n event.type == 'keydown' &&\n event.key !== 'Enter' &&\n event.code !== 'Space'\n ) {\n return;\n }\n this._input.showPicker();\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\n <div class=\"input-container\">\n <input\n type=\"date\"\n id=\"input-element\"\n name=${ifDefined(this.name)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${this.value ?? ''}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n @keydown=${this._handleKeyDown}\n />\n <span\n class=\"date-icon\"\n @click=${this._showDate}\n @keydown=${this._showDate}\n tabindex=${isSafari() ? '-1' : '0'}\n role=\"button\"\n aria-label=\"Vis datovelger\"\n aria-haspopup=\"true\"\n ><fhi-icon-calendar></fhi-icon-calendar\n ></span>\n </div>\n ${this.message && html`<p class=\"message\">${this.message}</p>`}\n `;\n }\n\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n width: calc(var(--fhi-spacing-1000) * 2);\n\n label {\n font-weight: var(--fhi-typography-label-small-font-weight);\n font-size: var(--fhi-typography-label-small-font-size);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n color: var(--fhi-color-neutral-text-default);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input[type='date'] {\n font-family: var(--fhi-font-family-default);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n font-size: var(--fhi-typography-body-medium-font-size);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n box-sizing: border-box;\n height: var(--fhi-spacing-500);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-background-default);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\n &:hover {\n border-color: var(--fhi-color-accent-border-default);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n &:focus {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-default);\n }\n }\n .message {\n margin: var(--fhi-spacing-050) 0 0 0;\n color: var(--fhi-color-neutral-text-default);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n [type='date']::-webkit-inner-spin-button {\n opacity: 0;\n }\n [type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n\n &:target {\n outline: solid;\n font-size: 5rem;\n }\n }\n .input-container {\n height: var(--fhi-spacing-500);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--fhi-spacing-100);\n height: fit-content;\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n border-radius: var(--fhi-border-radius-050);\n &:focus {\n outline: solid var(--fhi-color-accent-border-default);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n .date-icon {\n background-color: unset;\n &:focus {\n outline: none;\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input[type='date'] {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n &:hover + .date-icon {\n background-color: unset;\n }\n }\n .date-icon {\n background-color: unset;\n display: none;\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n input[type='date'] {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n .help-text {\n color: var(--fhi-color-danger-text-default);\n }\n .date-icon {\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n }\n\n @-moz-document url-prefix() {\n :host {\n .date-icon {\n display: none;\n visibility: hidden;\n }\n }\n }\n `;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-date-input.component-C1cwkp36.js","names":[],"sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n *\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n /** @internal */\n static readonly formAssociated = true;\n\n /**\n * The text that labels the input field.\n * An input field should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the input field.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * The help-text shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) min?: FhiDateValue = undefined;\n\n /**\n * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n * @type {string}\n */\n @property({ type: String }) max?: FhiDateValue = undefined;\n\n /**\n * Sets the visual status of the input. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the input. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _name?: string | undefined = undefined;\n\n /**\n * The name of the input. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n\n set name(newName: string | undefined) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _value?: string = '';\n\n /**\n * The default value of the input field, formatted as `YYYY-MM-DD`.\n *\n * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): FhiDateValue {\n return this._value as FhiDateValue;\n }\n\n set value(newValue: FhiDateValue) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value ?? null);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _handleChange(): void {\n this._dispatchChangeEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleInput(event: Event): void {\n this.value = this._input.value as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this._internals.form) {\n this._internals.form!.requestSubmit();\n }\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') as FhiDateValue;\n this._internals.setFormValue(this.value ?? null);\n }\n\n private _showDate(event?: KeyboardEvent) {\n if (\n event &&\n event.type == 'keydown' &&\n event.key !== 'Enter' &&\n event.code !== 'Space'\n ) {\n return;\n }\n this._input.showPicker();\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\n <div class=\"input-container\">\n <input\n type=\"date\"\n id=\"input-element\"\n name=${ifDefined(this.name)}\n min=${ifDefined(this.min)}\n max=${ifDefined(this.max)}\n .value=${this.value ?? ''}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n @keydown=${this._handleKeyDown}\n />\n <span\n class=\"date-icon\"\n @click=${this._showDate}\n @keydown=${this._showDate}\n tabindex=${isSafari() ? '-1' : '0'}\n role=\"button\"\n aria-label=\"Vis datovelger\"\n aria-haspopup=\"true\"\n ><fhi-icon-calendar></fhi-icon-calendar\n ></span>\n </div>\n ${this.message && html`<p class=\"message\">${this.message}</p>`}\n `;\n }\n\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n width: calc(var(--fhi-spacing-1000) * 2);\n\n label {\n font-weight: var(--fhi-typography-label-small-font-weight);\n font-size: var(--fhi-typography-label-small-font-size);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n color: var(--fhi-color-neutral-text-default);\n padding: 0 0 var(--fhi-spacing-050) 0;\n }\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input[type='date'] {\n font-family: var(--fhi-font-family-default);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n font-size: var(--fhi-typography-body-medium-font-size);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n box-sizing: border-box;\n height: var(--fhi-spacing-500);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-background-default);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n appearance: none;\n -moz-appearance: none;\n -webkit-appearance: none;\n width: 100%;\n &:hover {\n border-color: var(--fhi-color-accent-border-default);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n &:focus {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-default);\n }\n }\n .message {\n margin: var(--fhi-spacing-050) 0 0 0;\n color: var(--fhi-color-neutral-text-default);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n [type='date']::-webkit-inner-spin-button {\n opacity: 0;\n }\n [type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n -webkit-appearance: none;\n display: none;\n visibility: hidden;\n\n &:target {\n outline: solid;\n font-size: 5rem;\n }\n }\n .input-container {\n height: var(--fhi-spacing-500);\n position: relative;\n }\n .date-icon {\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--fhi-spacing-100);\n height: fit-content;\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n border-radius: var(--fhi-border-radius-050);\n &:focus {\n outline: solid var(--fhi-color-accent-border-default);\n }\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n * {\n cursor: not-allowed;\n }\n input[type='date'] {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n .date-icon {\n background-color: unset;\n &:focus {\n outline: none;\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input[type='date'] {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n &:hover + .date-icon {\n background-color: unset;\n }\n }\n .date-icon {\n background-color: unset;\n display: none;\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n input[type='date'] {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n .help-text {\n color: var(--fhi-color-danger-text-default);\n }\n .date-icon {\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n }\n\n @-moz-document url-prefix() {\n :host {\n .date-icon {\n display: none;\n visibility: hidden;\n }\n }\n }\n `;\n}\n"],"mappings":"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"}
package/fhi-date-input.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import "./fhi-icon-calendar.js";
2
- import { n as e, t } from "./fhi-date-input.component-Bus7CeKM.js";
2
+ import { n as e, t } from "./fhi-date-input.component-C1cwkp36.js";
3
3
  export { t as FhiDateInput, e as FhiDateInputSelector };
package/fhi-text-area.js CHANGED
@@ -85,8 +85,9 @@ var c = "fhi-text-area", l = class extends i {
85
85
  var(--fhi-color-neutral-border-default);
86
86
  border-radius: var(--fhi-border-radius-050);
87
87
  background-color: var(--fhi-color-neutral-background-default);
88
- transition: border-color var(--fhi-motion-ease-default) var(--fhi-motion-duration-quick);
89
-
88
+ transition: border-color var(--fhi-motion-ease-default)
89
+ var(--fhi-motion-duration-quick);
90
+
90
91
  &:hover {
91
92
  border-color: var(--fhi-color-accent-border-default);
92
93
  }
@@ -115,7 +116,8 @@ var c = "fhi-text-area", l = class extends i {
115
116
  font-size: var(--fhi-typography-body-medium-font-size);
116
117
  line-height: var(--fhi-typography-body-medium-line-height);
117
118
  letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
118
- transition: background-color var(--fhi-motion-ease-default) var(--fhi-motion-duration-quick);
119
+ transition: background-color var(--fhi-motion-ease-default)
120
+ var(--fhi-motion-duration-quick);
119
121
 
120
122
  &::placeholder {
121
123
  color: var(--fhi-color-neutral-base-default);
@@ -125,7 +127,7 @@ var c = "fhi-text-area", l = class extends i {
125
127
  border-color: var(--fhi-color-accent-border-default);
126
128
  background-color: var(--fhi-color-accent-background-subtle);
127
129
  }
128
-
130
+
129
131
  &:focus {
130
132
  background-color: var(--fhi-color-accent-background-default);
131
133
  }
@@ -133,11 +135,7 @@ var c = "fhi-text-area", l = class extends i {
133
135
 
134
136
  label {
135
137
  color: var(--fhi-color-neutral-text-default);
136
- margin: 0;
137
- }
138
-
139
- label + .textarea-container {
140
- margin-top: var(--fhi-spacing-050);
138
+ padding: 0 0 var(--fhi-spacing-050) 0;
141
139
  }
142
140
 
143
141
  .help-text {
package/fhi-text-area.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-text-area.js","names":[],"sources":["../../src/components/fhi-text-area/fhi-text-area.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../typography/fhi-body/fhi-body.component';\nimport '../typography/fhi-label/fhi-label.component';\n\nexport const FhiTextAreaSelector = 'fhi-text-area';\n\n/**\n * ## FHI Text Area\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-area--docs}\n *\n * The `<fhi-text-area>` component is used to collect user input in forms.\n * It provides a labeled text area with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-area\n * @element fhi-text-area\n */\n@customElement(FhiTextAreaSelector)\nexport class FhiTextArea extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * The text that labels the text area.\n * A text area should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the text area.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * The message shown above the text area.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets the placeholder text for the text area.\n * This text is displayed when the text area is empty, providing a hint to the user about the expected input.\n * @type {string}\n */\n @property({ type: String }) placeholder?: string = undefined;\n\n /**\n * Sets the visual status of the text area. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the text area, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the text area to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the text area. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n /**\n * Sets the number of visible text lines for the text area.\n * @reflect\n * @type {number}\n */\n @property({ type: Number }) rows? = 2;\n\n @query('#textarea-element')\n private _textarea!: HTMLTextAreaElement;\n\n private _name?: string = undefined;\n\n /**\n * The name of the text area. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for text areas.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n set name(newName: string) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this._value);\n }\n\n private _value: string = '';\n\n /**\n * The default value of the text area.\n *\n * You can fetch the current value of the text area by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for text areas.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): string {\n return this._value;\n }\n\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private handleChange(event: Event): void {\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private handleInput(event: Event): void {\n this.value = this._textarea.value;\n this._internals.setFormValue(this.value);\n\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') || '';\n this._internals.setFormValue(this.value);\n }\n\n render() {\n return html`\n ${this.label &&\n html`<label for=\"textarea-element\"\n ><fhi-label size=\"small\">${this.label}</fhi-label></label\n > `}\n ${this.helpText\n ? html`\n <fhi-body class=\"help-text\" size=\"small\">${this.helpText}</fhi-body>\n `\n : ''}\n <div class=\"textarea-container\">\n <textarea\n id=\"textarea-element\"\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n .value=${this.value}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n rows=${ifDefined(this.rows)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n ></textarea>\n </div>\n ${this.message\n ? html`\n <fhi-body size=\"small\" class=\"message\">${this.message}</fhi-body>\n `\n : ''}\n `;\n }\n\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n\n .textarea-container {\n overflow: hidden;\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n background-color: var(--fhi-color-neutral-background-default);\n transition: border-color var(--fhi-motion-ease-default) var(--fhi-motion-duration-quick);\n \n &:hover {\n border-color: var(--fhi-color-accent-border-default);\n }\n\n &:focus-within {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-default);\n outline: auto;\n outline-color: -webkit-focus-ring-color;\n }\n }\n\n textarea {\n box-sizing: border-box;\n display: block;\n width: 100%;\n resize: vertical;\n min-height: var(--fhi-spacing-500);\n padding: var(--fhi-spacing-100) var(--fhi-spacing-150);\n color: var(--fhi-color-neutral-text-default);\n background-color: transparent;\n margin: 0;\n border: none;\n font-family: var(--fhi-font-family-default);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n font-size: var(--fhi-typography-body-medium-font-size);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n transition: background-color var(--fhi-motion-ease-default) var(--fhi-motion-duration-quick);\n\n &::placeholder {\n color: var(--fhi-color-neutral-base-default);\n }\n\n &:hover:not(:disabled):not([readonly]) {\n border-color: var(--fhi-color-accent-border-default);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n \n &:focus {\n background-color: var(--fhi-color-accent-background-default);\n }\n }\n\n label {\n color: var(--fhi-color-neutral-text-default);\n margin: 0;\n }\n\n label + .textarea-container {\n margin-top: var(--fhi-spacing-050);\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n\n .message {\n margin: var(--fhi-spacing-050) 0 0 0;\n color: var(--fhi-color-neutral-text-default);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n label,\n textarea,\n .textarea-container {\n cursor: not-allowed;\n }\n .textarea-container {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n .textarea-container {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n .textarea-container {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n }\n textarea {\n color: var(--fhi-color-neutral-text-default);\n &:hover {\n background-color: var(--fhi-color-danger-background-default);\n }\n }\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n .help-text {\n color: var(--fhi-color-danger-text-default);\n }\n }\n `;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-text-area.js","names":[],"sources":["../../src/components/fhi-text-area/fhi-text-area.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../typography/fhi-body/fhi-body.component';\nimport '../typography/fhi-label/fhi-label.component';\n\nexport const FhiTextAreaSelector = 'fhi-text-area';\n\n/**\n * ## FHI Text Area\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-area--docs}\n *\n * The `<fhi-text-area>` component is used to collect user input in forms.\n * It provides a labeled text area with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-area\n * @element fhi-text-area\n */\n@customElement(FhiTextAreaSelector)\nexport class FhiTextArea extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * The text that labels the text area.\n * A text area should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the text area.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * The message shown above the text area.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets the placeholder text for the text area.\n * This text is displayed when the text area is empty, providing a hint to the user about the expected input.\n * @type {string}\n */\n @property({ type: String }) placeholder?: string = undefined;\n\n /**\n * Sets the visual status of the text area. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the text area, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the text area to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the text area. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n /**\n * Sets the number of visible text lines for the text area.\n * @reflect\n * @type {number}\n */\n @property({ type: Number }) rows? = 2;\n\n @query('#textarea-element')\n private _textarea!: HTMLTextAreaElement;\n\n private _name?: string = undefined;\n\n /**\n * The name of the text area. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for text areas.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n set name(newName: string) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this._value);\n }\n\n private _value: string = '';\n\n /**\n * The default value of the text area.\n *\n * You can fetch the current value of the text area by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for text areas.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): string {\n return this._value;\n }\n\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private handleChange(event: Event): void {\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private handleInput(event: Event): void {\n this.value = this._textarea.value;\n this._internals.setFormValue(this.value);\n\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') || '';\n this._internals.setFormValue(this.value);\n }\n\n render() {\n return html`\n ${this.label &&\n html`<label for=\"textarea-element\"\n ><fhi-label size=\"small\">${this.label}</fhi-label></label\n > `}\n ${this.helpText\n ? html`\n <fhi-body class=\"help-text\" size=\"small\">${this.helpText}</fhi-body>\n `\n : ''}\n <div class=\"textarea-container\">\n <textarea\n id=\"textarea-element\"\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n .value=${this.value}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n rows=${ifDefined(this.rows)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n ></textarea>\n </div>\n ${this.message\n ? html`\n <fhi-body size=\"small\" class=\"message\">${this.message}</fhi-body>\n `\n : ''}\n `;\n }\n\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n\n .textarea-container {\n overflow: hidden;\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n background-color: var(--fhi-color-neutral-background-default);\n transition: border-color var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n &:hover {\n border-color: var(--fhi-color-accent-border-default);\n }\n\n &:focus-within {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-default);\n outline: auto;\n outline-color: -webkit-focus-ring-color;\n }\n }\n\n textarea {\n box-sizing: border-box;\n display: block;\n width: 100%;\n resize: vertical;\n min-height: var(--fhi-spacing-500);\n padding: var(--fhi-spacing-100) var(--fhi-spacing-150);\n color: var(--fhi-color-neutral-text-default);\n background-color: transparent;\n margin: 0;\n border: none;\n font-family: var(--fhi-font-family-default);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n font-size: var(--fhi-typography-body-medium-font-size);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n transition: background-color var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n\n &::placeholder {\n color: var(--fhi-color-neutral-base-default);\n }\n\n &:hover:not(:disabled):not([readonly]) {\n border-color: var(--fhi-color-accent-border-default);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n\n &:focus {\n background-color: var(--fhi-color-accent-background-default);\n }\n }\n\n label {\n color: var(--fhi-color-neutral-text-default);\n padding: 0 0 var(--fhi-spacing-050) 0;\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n\n .message {\n margin: var(--fhi-spacing-050) 0 0 0;\n color: var(--fhi-color-neutral-text-default);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n label,\n textarea,\n .textarea-container {\n cursor: not-allowed;\n }\n .textarea-container {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n .textarea-container {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n .textarea-container {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n }\n textarea {\n color: var(--fhi-color-neutral-text-default);\n &:hover {\n background-color: var(--fhi-color-danger-background-default);\n }\n }\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n .help-text {\n color: var(--fhi-color-danger-text-default);\n }\n }\n `;\n}\n"],"mappings":"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"}
package/fhi-text-input.js CHANGED
@@ -105,7 +105,7 @@ var c = "fhi-text-input", l = class extends i {
105
105
  line-height: var(--fhi-typography-label-small-line-height);
106
106
  letter-spacing: var(--fhi-typography-label-small-letter-spacing);
107
107
  color: var(--fhi-color-neutral-text-default);
108
- margin: 0 0 var(--fhi-spacing-050) 0;
108
+ padding: 0 0 var(--fhi-spacing-050) 0;
109
109
  }
110
110
 
111
111
  label:has(+ p) {
package/fhi-text-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-text-input.js","names":[],"sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * The text that labels the input field.\n * An input field should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the input field.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * The message shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets the placeholder text for the input field.\n * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n * @type {string}\n */\n @property({ type: String }) placeholder?: string = undefined;\n\n /**\n * Sets the visual status of the input. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the input. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _name?: string = undefined;\n\n /**\n * The name of the input. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n set name(newName: string) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this._value);\n }\n\n private _value: string = '';\n\n /**\n * The default value of the input field.\n *\n * You can fetch the current value of the text input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): string {\n return this._value;\n }\n\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this._internals.setFormValue(this.value);\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private handleChange(event: Event): void {\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private handleInput(event: Event): void {\n this.value = this._input.value;\n this._internals.setFormValue(this.value);\n\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this._internals.form) {\n this._internals.form!.requestSubmit();\n }\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') || '';\n this._internals.setFormValue(this.value);\n }\n\n private _handleStartSlotChange(event: Event): void {\n const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n if (\n iconNode.nodeType === Node.ELEMENT_NODE &&\n (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = iconNode as HTMLElement;\n this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n icon.setAttribute('size', '1.5rem');\n } else {\n console.error(\n 'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n );\n }\n }\n\n private _handleEndSlotChange(event: Event): void {\n const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n if (\n iconNode.nodeType === Node.ELEMENT_NODE &&\n (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = iconNode as HTMLElement;\n this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n icon.setAttribute('size', '1.5rem');\n } else {\n console.error(\n 'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n );\n }\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ''}\n <div class=\"input-container\">\n <input\n id=\"input-element\"\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n .value=${this.value}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @keydown=${this.handleKeyDown}\n />\n <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\n </div>\n ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-text-input-placeholder-color: unset;\n }\n\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n\n --fhi-text-input-placeholder-color: var(--fhi-color-neutral-base-default);\n\n label {\n font-weight: var(--fhi-typography-label-small-font-weight);\n font-size: var(--fhi-typography-label-small-font-size);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n color: var(--fhi-color-neutral-text-default);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input {\n box-sizing: border-box;\n flex: 1 1 auto;\n height: var(--fhi-spacing-500);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-background-default);\n font-family: var(--fhi-font-family-default);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n font-size: var(--fhi-typography-body-medium-font-size);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n &:hover {\n border-color: var(--fhi-color-accent-border-default);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n &:focus {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-default);\n }\n &::placeholder {\n color: var(--fhi-text-input-placeholder-color);\n }\n }\n\n slot[name='start'] {\n color: var(--fhi-color-neutral-text-subtle);\n }\n\n input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n color: var(--fhi-color-accent-text-subtle);\n }\n input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n color: var(--fhi-color-accent-text-default);\n }\n\n .message {\n margin: var(--fhi-spacing-050) 0 0 0;\n color: var(--fhi-color-neutral-text-default);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n\n .input-container {\n position: relative;\n display: flex;\n }\n\n slot[name='start'] {\n display: block;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 8px;\n height: fit-content;\n pointer-events: none;\n }\n\n slot[name='end'] {\n display: block;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 8px;\n height: fit-content;\n pointer-events: none;\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n label,\n input {\n cursor: not-allowed;\n }\n input {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n input {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n .help-text {\n color: var(--fhi-color-danger-text-default);\n }\n slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n\n input:hover ~ slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n input:focus ~ slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n `;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-text-input.js","names":[],"sources":["../../src/components/fhi-text-input/fhi-text-input.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiTextInputSelector = 'fhi-text-input';\n\n/**\n * ## FHI Text Input\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-text-input--docs}\n *\n * The `<fhi-text-input>` component is used to collect user input in forms.\n * It provides a labeled input field with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n *\n * @tag fhi-text-input\n * @element fhi-text-input\n */\n@customElement(FhiTextInputSelector)\nexport class FhiTextInput extends LitElement {\n static readonly formAssociated = true;\n\n /**\n * The text that labels the input field.\n * An input field should always have a label to ensure accessibility.\n * @type {string}\n */\n @property({ type: String }) label?: string = undefined;\n\n /**\n * The message shown beneath the input field.\n * This is often used to provide additional information or feedback to the user.\n * @type {string}\n */\n @property({ type: String }) message?: string = undefined;\n\n /**\n * The message shown above the input field.\n * This is often used to provide additional information to the user.\n * @type {string}\n */\n @property({ type: String, attribute: 'help-text' }) helpText?: string =\n undefined;\n\n /**\n * Sets the placeholder text for the input field.\n * This text is displayed when the input field is empty, providing a hint to the user about the expected input.\n * @type {string}\n */\n @property({ type: String }) placeholder?: string = undefined;\n\n /**\n * Sets the visual status of the input. There is currently only one status available: `error`.\n *\n * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n * @reflect\n * @type {'error'}\n */\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /**\n * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) readonly? = false;\n\n /**\n * Disables the input. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _name?: string = undefined;\n\n /**\n * The name of the input. This is submitted with the form data as a `key`.\n *\n * This attribute conforms with the standard HTML `name` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n *\n * @reflect\n * @type {string}\n */\n @property({ type: String, reflect: true })\n get name(): string | undefined {\n return this._name;\n }\n set name(newName: string) {\n const oldName = this._name;\n this._name = newName;\n this.requestUpdate('name', oldName);\n this._internals.setFormValue(this._value);\n }\n\n private _value: string = '';\n\n /**\n * The default value of the input field.\n *\n * You can fetch the current value of the text input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n *\n * This attribute conforms with the standard HTML `value` attribute for input fields.\n * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n *\n * @type {string}\n */\n @property({ type: String })\n get value(): string {\n return this._value;\n }\n\n set value(newValue: string) {\n const oldValue = this._value;\n this._value = newValue;\n this.requestUpdate('value', oldValue);\n this._internals.setFormValue(this._value);\n }\n\n private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n this._internals.setFormValue(this.value);\n }\n\n private _dispatchChangeEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _dispatchInputEvent(): void {\n /**\n * @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the value of the input changes.\n */\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private handleChange(event: Event): void {\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private handleInput(event: Event): void {\n this.value = this._input.value;\n this._internals.setFormValue(this.value);\n\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private handleKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Enter' && this._internals.form) {\n this._internals.form!.requestSubmit();\n }\n }\n\n public formResetCallback(): void {\n this.value = this.getAttribute('value') || '';\n this._internals.setFormValue(this.value);\n }\n\n private _handleStartSlotChange(event: Event): void {\n const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n if (\n iconNode.nodeType === Node.ELEMENT_NODE &&\n (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = iconNode as HTMLElement;\n this._input.style.paddingLeft = 'var(--fhi-spacing-500)';\n icon.setAttribute('size', '1.5rem');\n } else {\n console.error(\n 'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n );\n }\n }\n\n private _handleEndSlotChange(event: Event): void {\n const iconNode: Node = (event.target as HTMLSlotElement).assignedNodes()[0];\n\n if (\n iconNode.nodeType === Node.ELEMENT_NODE &&\n (iconNode as Element).tagName.toLowerCase().startsWith('fhi-icon')\n ) {\n const icon = iconNode as HTMLElement;\n this._input.style.paddingRight = 'var(--fhi-spacing-500)';\n icon.setAttribute('size', '1.5rem');\n } else {\n console.error(\n 'Ivalid slot input. Fhi-text-input only accepts FHI Designsystem icons.',\n );\n }\n }\n\n render() {\n return html`\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : ''}\n <div class=\"input-container\">\n <input\n id=\"input-element\"\n name=${ifDefined(this.name)}\n placeholder=${ifDefined(this.placeholder)}\n .value=${this.value}\n ?readonly=${this.readonly}\n ?disabled=${this.disabled}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @keydown=${this.handleKeyDown}\n />\n <slot name=\"start\" @slotchange=${this._handleStartSlotChange}> </slot>\n <slot name=\"end\" @slotchange=${this._handleEndSlotChange}> </slot>\n </div>\n ${this.message ? html`<p class=\"message\">${this.message}</p>` : ''}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-text-input-placeholder-color: unset;\n }\n\n :host {\n display: flex;\n flex-direction: column;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n\n --fhi-text-input-placeholder-color: var(--fhi-color-neutral-base-default);\n\n label {\n font-weight: var(--fhi-typography-label-small-font-weight);\n font-size: var(--fhi-typography-label-small-font-size);\n line-height: var(--fhi-typography-label-small-line-height);\n letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n color: var(--fhi-color-neutral-text-default);\n padding: 0 0 var(--fhi-spacing-050) 0;\n }\n\n label:has(+ p) {\n margin: 0 0 0 0;\n }\n\n input {\n box-sizing: border-box;\n flex: 1 1 auto;\n height: var(--fhi-spacing-500);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n color: var(--fhi-color-neutral-text-default);\n background-color: var(--fhi-color-neutral-background-default);\n font-family: var(--fhi-font-family-default);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n font-size: var(--fhi-typography-body-medium-font-size);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n &:hover {\n border-color: var(--fhi-color-accent-border-default);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n &:focus {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-default);\n }\n &::placeholder {\n color: var(--fhi-text-input-placeholder-color);\n }\n }\n\n slot[name='start'] {\n color: var(--fhi-color-neutral-text-subtle);\n }\n\n input:not([disabled]):not([readonly]):hover ~ slot[name='start'] {\n color: var(--fhi-color-accent-text-subtle);\n }\n input:not([disabled]):not([readonly]):active ~ slot[name='start'],\n input:not([disabled]):not([readonly]):focus ~ slot[name='start'] {\n color: var(--fhi-color-accent-text-default);\n }\n\n .message {\n margin: var(--fhi-spacing-050) 0 0 0;\n color: var(--fhi-color-neutral-text-default);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n font-weight: var(--fhi-typography-body-small-font-weight);\n font-size: var(--fhi-typography-body-small-font-size);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n margin: 0 0 var(--fhi-spacing-050) 0;\n }\n\n .input-container {\n position: relative;\n display: flex;\n }\n\n slot[name='start'] {\n display: block;\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 8px;\n height: fit-content;\n pointer-events: none;\n }\n\n slot[name='end'] {\n display: block;\n position: absolute;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 8px;\n height: fit-content;\n pointer-events: none;\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n cursor: not-allowed;\n label,\n input {\n cursor: not-allowed;\n }\n input {\n &:hover {\n border-color: var(--fhi-color-neutral-border-default);\n background-color: var(--fhi-color-neutral-background-default);\n }\n }\n }\n\n :host([readonly]:not([disabled])) {\n input {\n border: unset;\n border-radius: unset;\n background-color: unset;\n border-left: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n }\n }\n\n :host([status='error']:not([disabled]):not([readonly])) {\n label {\n color: var(--fhi-color-danger-text-default);\n }\n input {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n color: var(--fhi-color-danger-text-default);\n }\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n .help-text {\n color: var(--fhi-color-danger-text-default);\n }\n slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n\n input:hover ~ slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n input:focus ~ slot[name='start'] {\n color: var(--fhi-color-danger-text-subtle);\n }\n }\n `;\n}\n"],"mappings":"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"}
package/index.js CHANGED
@@ -4,7 +4,7 @@ import { FhiBody as i, FhiBodySelector as a } from "./fhi-body.js";
4
4
  import { FhiCallout as o, FhiCalloutSelector as s } from "./fhi-callout.js";
5
5
  import { FhiCheckbox as c, FhiCheckboxSelector as l } from "./fhi-checkbox.js";
6
6
  import { FhiIconCalendar as u, FhiIconCalendarSelector as d } from "./fhi-icon-calendar.js";
7
- import { n as f, t as p } from "./fhi-date-input.component-Bus7CeKM.js";
7
+ import { n as f, t as p } from "./fhi-date-input.component-C1cwkp36.js";
8
8
  import { FhiFlex as m, FhiFlexSelector as h } from "./fhi-flex.js";
9
9
  import { FhiGrid as g, FhiGridSelector as _ } from "./fhi-grid.js";
10
10
  import { FhiLink as v, FhiLinkSelector as y } from "./fhi-link.js";
package/package.json CHANGED
@@ -1 +1 @@
1
- {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.45.0","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-callout":{"default":"./fhi-callout.js","types":"./fhi-callout.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-link":{"default":"./fhi-link.js","types":"./fhi-link.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-area":{"default":"./fhi-text-area.js","types":"./fhi-text-area.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-select":{"default":"./fhi-select.js","types":"./fhi-select.d.ts"},"./fhi-select-item":{"default":"./fhi-select-item.js","types":"./fhi-select-item.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
1
+ {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.45.1","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-callout":{"default":"./fhi-callout.js","types":"./fhi-callout.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-link":{"default":"./fhi-link.js","types":"./fhi-link.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-area":{"default":"./fhi-text-area.js","types":"./fhi-text-area.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-select":{"default":"./fhi-select.js","types":"./fhi-select.d.ts"},"./fhi-select-item":{"default":"./fhi-select-item.js","types":"./fhi-select-item.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@folkehelseinstituttet/designsystem",
4
- "version": "0.45.0",
4
+ "version": "0.45.1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {