npm - @folkehelseinstituttet/designsystem - Versions diffs - 0.47.2 → 0.47.3 - Mend

@folkehelseinstituttet/designsystem 0.47.2 → 0.47.3

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 (17) hide show

package/fhi-checkbox.js +1 -0
package/fhi-checkbox.js.map +1 -1
package/{fhi-date-input.component-CHBsiaAw.js → fhi-date-input.component-CWaw_GH4.js} +2 -1
package/fhi-date-input.component-CWaw_GH4.js.map +1 -0
package/fhi-date-input.js +1 -1
package/fhi-radio.js +1 -0
package/fhi-radio.js.map +1 -1
package/fhi-select.js +9 -7
package/fhi-select.js.map +1 -1
package/fhi-text-area.js +1 -0
package/fhi-text-area.js.map +1 -1
package/fhi-text-input.js +1 -0
package/fhi-text-input.js.map +1 -1
package/index.js +1 -1
package/package.json +1 -1
package/web-types.json +1 -1
package/fhi-date-input.component-CHBsiaAw.js.map +0 -1

package/fhi-checkbox.js CHANGED Viewed

@@ -49,6 +49,7 @@ var c = "fhi-checkbox", l = class extends r {
           name="${o(this.name)}"
           value="${o(this.value)}"
           ?disabled=${this.disabled}
+          aria-invalid=${o(this.status === "error" ? "true" : void 0)}
           .checked=${s(this.checked ?? !1)}
           @change=${this._handleChange}
           @input=${this._handleInput}

package/fhi-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fhi-checkbox.js","names":[],"sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n/*\n ## FHI Checkbox\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n \n The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n \n @tag fhi-checkbox\n * @element fhi-checkbox\n /\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n /* @internal /\n static readonly formAssociated = true;\n\n /\n The text label assigned to and displayed next to the checkbox.\n * You should always provide a label.\n * @type {string}\n /\n @property({ type: String }) label?: string = undefined;\n\n /\n The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n * @type {string}\n /\n @property({ type: String }) name?: string = undefined;\n\n /\n The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n * @type {string}\n /\n @property({ type: String }) value: string = 'on';\n\n /\n The help text shown below the label.\n * This is used to provide additional information or descriptions to the user.\n * @type {string}\n /\n @property({ type: String, attribute: 'help-text' }) helpText?: string;\n\n /\n Sets the visual status of the checkbox. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n * @reflect\n * @type {'error' \| undefined}\n /\n @property({ type: String, reflect: true }) status?: 'error' \| undefined;\n\n /\n Whether the checkbox is checked or not.\n * @type {boolean}\n /\n @property({ type: Boolean }) checked? = false;\n\n /\n Disables the checkbox. 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 private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._updateFormValue();\n }\n\n protected willUpdate(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('value')) {\n this.value = this.value ?? 'on';\n }\n }\n\n protected updated(_changedProperties: PropertyValues<FhiCheckbox>): void {\n if (_changedProperties.has('helpText') \|\| _changedProperties.has('label')) {\n if (!this.label && this.helpText) {\n console.error(\n 'The \"help-text\" property is set, but the \"label\" property is not. It is required to provide a label when using help text.',\n );\n }\n }\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _updateFormValue() {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _dispatchChangeEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the checkbox is checked or unchecked.\n /\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the checkbox is checked or unchecked.\n /\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n public formResetCallback() {\n this.checked = typeof this.getAttribute('checked') === 'string';\n this._updateFormValue();\n }\n\n render() {\n return html`\n <div class=\"checkbox-wrapper\">\n <input\n type=\"checkbox\"\n id=\"checkbox-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n ?disabled=${this.disabled}\n .checked=${live(this.checked ?? false)}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"checkmark\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n />\n </svg>\n </div>\n ${this.label && html`<label for=\"checkbox-element\">${this.label}</label>`}\n ${this.helpText\n ? html`<fhi-body size=\"small\" class=\"help-text\"\n >${this.helpText}</fhi-body\n >`\n : ''}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-checkbox-color: currentcolor;\n }\n\n :host {\n display: grid;\n width: max-content;\n height: fit-content;\n color: var(--fhi-checkbox-color);\n\n .checkbox-wrapper {\n position: relative;\n height: fit-content;\n }\n\n label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n\n label,\n fhi-body {\n grid-column: 2;\n padding-left: 7px;\n }\n\n input[type='checkbox'] {\n margin: 3px 0 0 3px;\n appearance: none;\n width: 1.125rem;\n height: 1.125rem;\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n &:not(:focus-visible) {\n outline-color: var(--fhi-color-accent-surface-hover);\n }\n\n &:hover {\n background-color: var(--fhi-color-accent-background-subtle);\n border-color: var(--fhi-color-accent-border-strong);\n }\n\n &:active {\n background-color: var(--fhi-color-accent-surface-default);\n outline: solid 5px var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-border-strong);\n }\n\n &:checked {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n ~ .checkmark {\n fill: var(--fhi-color-neutral-text-inverted);\n visibility: visible;\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--fhi-color-accent-base-hover);\n border-color: var(--fhi-color-accent-base-hover);\n }\n &:active {\n background-color: var(--fhi-color-accent-base-active);\n border-color: var(--fhi-color-accent-base-active);\n }\n }\n }\n\n .checkmark {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n top: 3px;\n left: 3px;\n height: 1.125rem;\n width: 1.125rem;\n pointer-events: none;\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n {\n cursor: not-allowed;\n }\n\n input {\n &:hover {\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n }\n\n &:active {\n outline: none;\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n }\n\n &:checked:hover {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n }\n\n &:checked:active {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n }\n }\n }\n\n :host([status='error']:not([disabled])) {\n input[type='checkbox'] {\n background-color: var(--fhi-color-danger-background-default);\n border-color: var(--fhi-color-danger-border-default);\n &:not(:focus-visible) {\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n\n &:hover {\n background-color: var(--fhi-color-danger-background-subtle);\n border-color: var(--fhi-color-danger-border-strong);\n }\n\n &:active {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-border-strong);\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n\n &:checked {\n background-color: var(--fhi-color-danger-base-default);\n border-color: var(--fhi-color-danger-base-default);\n &:hover {\n background-color: var(--fhi-color-danger-base-hover);\n border-color: var(--fhi-color-danger-base-hover);\n }\n\n &:active {\n background-color: var(--fhi-color-danger-base-active);\n border-color: var(--fhi-color-danger-base-active);\n }\n }\n }\n }\n `;\n}\n"],"mappings":";;;;;AAOA,IAAa,IAAsB,gBAc5B,IAAA,cAA0B,EAAW;;wBAET;;CAmDjC,cAAc;EAEZ,AADA,MAAM,gBA7CqC,KAAA,eAMD,KAAA,gBAMA,qBAqBJ,oBAOgB,IAMtD,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB;CACxB;CAEA,WAAqB,GAAyC;EAC5D,AAAI,EAAkB,IAAI,OAAO,MAC/B,KAAK,QAAQ,KAAK,SAAS;CAE/B;CAEA,QAAkB,GAAuD;EACvE,CAAI,EAAmB,IAAI,UAAU,KAAK,EAAmB,IAAI,OAAO,MAClE,CAAC,KAAK,SAAS,KAAK,YACtB,QAAQ,MACN,+HACF;CAGN;CAEA,cAAsB,GAAoB;EAKxC,AAJA,KAAK,UAAW,EAAM,OAA4B,SAClD,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CAEA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,mBAA2B;EACzB,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,uBAAqC;EAKnC,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAC3D;CAEA,sBAAoC;EAKlC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,oBAA2B;EAEzB,AADA,KAAK,UAAU,OAAO,KAAK,aAAa,SAAS,KAAM,UACvD,KAAK,iBAAiB;CACxB;CAEA,SAAS;EACP,OAAO,CAAI;;;;;kBAKG,EAAU,KAAK,IAAI,EAAE;mBACpB,EAAU,KAAK,KAAK,EAAE;sBACnB,KAAK,SAAS;qBACf,EAAK,KAAK,WAAW,EAAK,EAAE;oBAC7B,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;;;;;QAc7B,KAAK,SAAS,CAAI,iCAAiC,KAAK,MAAM,UAAU;QACxE,KAAK,WACH,CAAI;eACC,KAAK,SAAS;eAEnB,GAAG;;CAEX;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgKrB;GA9SG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAOzB,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAQjD,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAO1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UAlD3C,EAAc,CAAmB,CAAA,GAAA,CAAA"}
1	+ {"version":3,"file":"fhi-checkbox.js","names":[],"sources":["../../src/components/fhi-checkbox/fhi-checkbox.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiCheckboxSelector = 'fhi-checkbox';\n\n/*\n ## FHI Checkbox\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs}\n \n The `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\n * It allows users to make binary choices, such as selecting or deselecting an option.\n \n @tag fhi-checkbox\n * @element fhi-checkbox\n /\n@customElement(FhiCheckboxSelector)\nexport class FhiCheckbox extends LitElement {\n /* @internal /\n static readonly formAssociated = true;\n\n /\n The text label assigned to and displayed next to the checkbox.\n * You should always provide a label.\n * @type {string}\n /\n @property({ type: String }) label?: string = undefined;\n\n /\n The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.\n * @type {string}\n /\n @property({ type: String }) name?: string = undefined;\n\n /\n The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.\n * @type {string}\n /\n @property({ type: String }) value: string = 'on';\n\n /\n The help text shown below the label.\n * This is used to provide additional information or descriptions to the user.\n * @type {string}\n /\n @property({ type: String, attribute: 'help-text' }) helpText?: string;\n\n /\n Sets the visual status of the checkbox. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.\n * @reflect\n * @type {'error' \| undefined}\n /\n @property({ type: String, reflect: true }) status?: 'error' \| undefined;\n\n /\n Whether the checkbox is checked or not.\n * @type {boolean}\n /\n @property({ type: Boolean }) checked? = false;\n\n /\n Disables the checkbox. 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 private _internals: ElementInternals;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._updateFormValue();\n }\n\n protected willUpdate(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('value')) {\n this.value = this.value ?? 'on';\n }\n }\n\n protected updated(_changedProperties: PropertyValues<FhiCheckbox>): void {\n if (_changedProperties.has('helpText') \|\| _changedProperties.has('label')) {\n if (!this.label && this.helpText) {\n console.error(\n 'The \"help-text\" property is set, but the \"label\" property is not. It is required to provide a label when using help text.',\n );\n }\n }\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _updateFormValue() {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _dispatchChangeEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the checkbox is checked or unchecked.\n /\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the checkbox is checked or unchecked.\n /\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n public formResetCallback() {\n this.checked = typeof this.getAttribute('checked') === 'string';\n this._updateFormValue();\n }\n\n render() {\n return html`\n <div class=\"checkbox-wrapper\">\n <input\n type=\"checkbox\"\n id=\"checkbox-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${ifDefined(this.value)}\"\n ?disabled=${this.disabled}\n aria-invalid=${ifDefined(\n this.status === 'error' ? 'true' : undefined,\n )}\n .checked=${live(this.checked ?? false)}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"checkmark\"\n width=\"18\"\n height=\"18\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.043 6.04295C12.4335 5.65243 13.0666 5.65243 13.4571 6.04295C13.8476 6.43348 13.8476 7.06649 13.4571 7.45702L8.95708 11.957C8.56655 12.3475 7.93354 12.3475 7.54302 11.957L5.29302 9.70702C4.90249 9.31649 4.90249 8.68348 5.29302 8.29295C5.65913 7.92684 6.23813 7.90424 6.63091 8.22459L6.70708 8.29295L8.25005 9.83592L12.043 6.04295Z\"\n />\n </svg>\n </div>\n ${this.label && html`<label for=\"checkbox-element\">${this.label}</label>`}\n ${this.helpText\n ? html`<fhi-body size=\"small\" class=\"help-text\"\n >${this.helpText}</fhi-body\n >`\n : ''}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-checkbox-color: currentcolor;\n }\n\n :host {\n display: grid;\n width: max-content;\n height: fit-content;\n color: var(--fhi-checkbox-color);\n\n .checkbox-wrapper {\n position: relative;\n height: fit-content;\n }\n\n label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n\n label,\n fhi-body {\n grid-column: 2;\n padding-left: 7px;\n }\n\n input[type='checkbox'] {\n margin: 3px 0 0 3px;\n appearance: none;\n width: 1.125rem;\n height: 1.125rem;\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-050);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n &:not(:focus-visible) {\n outline-color: var(--fhi-color-accent-surface-hover);\n }\n\n &:hover {\n background-color: var(--fhi-color-accent-background-subtle);\n border-color: var(--fhi-color-accent-border-strong);\n }\n\n &:active {\n background-color: var(--fhi-color-accent-surface-default);\n outline: solid 5px var(--fhi-color-accent-surface-hover);\n border-color: var(--fhi-color-accent-border-strong);\n }\n\n &:checked {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n ~ .checkmark {\n fill: var(--fhi-color-neutral-text-inverted);\n visibility: visible;\n opacity: 1;\n }\n\n &:hover {\n background-color: var(--fhi-color-accent-base-hover);\n border-color: var(--fhi-color-accent-base-hover);\n }\n &:active {\n background-color: var(--fhi-color-accent-base-active);\n border-color: var(--fhi-color-accent-base-active);\n }\n }\n }\n\n .checkmark {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n top: 3px;\n left: 3px;\n height: 1.125rem;\n width: 1.125rem;\n pointer-events: none;\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n {\n cursor: not-allowed;\n }\n\n input {\n &:hover {\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n }\n\n &:active {\n outline: none;\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n }\n\n &:checked:hover {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n }\n\n &:checked:active {\n background-color: var(--fhi-color-neutral-base-default);\n border-color: var(--fhi-color-neutral-base-default);\n }\n }\n }\n\n :host([status='error']:not([disabled])) {\n input[type='checkbox'] {\n background-color: var(--fhi-color-danger-background-default);\n border-color: var(--fhi-color-danger-border-default);\n &:not(:focus-visible) {\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n\n &:hover {\n background-color: var(--fhi-color-danger-background-subtle);\n border-color: var(--fhi-color-danger-border-strong);\n }\n\n &:active {\n background-color: var(--fhi-color-danger-surface-default);\n border-color: var(--fhi-color-danger-border-strong);\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n\n &:checked {\n background-color: var(--fhi-color-danger-base-default);\n border-color: var(--fhi-color-danger-base-default);\n &:hover {\n background-color: var(--fhi-color-danger-base-hover);\n border-color: var(--fhi-color-danger-base-hover);\n }\n\n &:active {\n background-color: var(--fhi-color-danger-base-active);\n border-color: var(--fhi-color-danger-base-active);\n }\n }\n }\n }\n `;\n}\n"],"mappings":";;;;;AAOA,IAAa,IAAsB,gBAc5B,IAAA,cAA0B,EAAW;;wBAET;;CAmDjC,cAAc;EAEZ,AADA,MAAM,gBA7CqC,KAAA,eAMD,KAAA,gBAMA,qBAqBJ,oBAOgB,IAMtD,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB;CACxB;CAEA,WAAqB,GAAyC;EAC5D,AAAI,EAAkB,IAAI,OAAO,MAC/B,KAAK,QAAQ,KAAK,SAAS;CAE/B;CAEA,QAAkB,GAAuD;EACvE,CAAI,EAAmB,IAAI,UAAU,KAAK,EAAmB,IAAI,OAAO,MAClE,CAAC,KAAK,SAAS,KAAK,YACtB,QAAQ,MACN,+HACF;CAGN;CAEA,cAAsB,GAAoB;EAKxC,AAJA,KAAK,UAAW,EAAM,OAA4B,SAClD,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CAEA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,mBAA2B;EACzB,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,uBAAqC;EAKnC,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAC3D;CAEA,sBAAoC;EAKlC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,oBAA2B;EAEzB,AADA,KAAK,UAAU,OAAO,KAAK,aAAa,SAAS,KAAM,UACvD,KAAK,iBAAiB;CACxB;CAEA,SAAS;EACP,OAAO,CAAI;;;;;kBAKG,EAAU,KAAK,IAAI,EAAE;mBACpB,EAAU,KAAK,KAAK,EAAE;sBACnB,KAAK,SAAS;yBACX,EACb,KAAK,WAAW,UAAU,SAAS,KAAA,CACrC,EAAE;qBACS,EAAK,KAAK,WAAW,EAAK,EAAE;oBAC7B,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;;;;;QAc7B,KAAK,SAAS,CAAI,iCAAiC,KAAK,MAAM,UAAU;QACxE,KAAK,WACH,CAAI;eACC,KAAK,SAAS;eAEnB,GAAG;;CAEX;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgKrB;GAjTG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAOzB,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAQjD,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAMxC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAO1B,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,UAlD3C,EAAc,CAAmB,CAAA,GAAA,CAAA"}

package/{fhi-date-input.component-CHBsiaAw.js → fhi-date-input.component-CWaw_GH4.js} RENAMED Viewed

@@ -67,6 +67,7 @@ var c = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent), l = "f
           .value=${this.value ?? ""}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
+          aria-invalid=${s(this.status === "error" ? "true" : void 0)}
           @change=${this._handleChange}
           @input=${this._handleInput}
           @keydown=${this._handleKeyDown}
@@ -275,4 +276,4 @@ a([e({ type: String })], u.prototype, "label", void 0), a([e({ type: String })],
 //#endregion
 export { l as n, u as t };
-//# sourceMappingURL=fhi-date-input.component-CHBsiaAw.js.map
+//# sourceMappingURL=fhi-date-input.component-CWaw_GH4.js.map

package/fhi-date-input.component-CWaw_GH4.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"fhi-date-input.component-CWaw_GH4.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 aria-invalid=${ifDefined(\n this.status === 'error' ? 'true' : undefined,\n )}\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 Viewed

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

package/fhi-radio.js CHANGED Viewed

@@ -90,6 +90,7 @@ var l = "fhi-radio", u = class extends i {
           value="${this.value}"
           .checked=${c(this.checked ?? !1)}
           ?disabled=${this.disabled}
+          aria-invalid=${s(this.status === "error" ? "true" : void 0)}
           @change=${this._handleChange}
           @input=${this._handleInput}
         />

package/fhi-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiRadioSelector = 'fhi-radio';\n\n/*\n ## FHI Radio\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n \n The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n \n @tag fhi-radio\n * @element fhi-radio\n /\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n static readonly formAssociated = true;\n\n /\n The text label assigned to and displayed next to the radio.\n * You should always provide a label.\n * @type {string}\n /\n @property({ type: String }) label?: string = undefined;\n\n /\n The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\n * All `<fhi-radio>` components with the same name belong to the same group.\n * @reflect\n * @type {string}\n /\n @property({ type: String, reflect: true }) name?: string = undefined;\n\n /\n Sets the visual status of the radio. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n * @reflect\n * @type {'error' \| undefined}\n /\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /\n Disables the radio. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n /\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n /\n Whether the radio button is checked or not.\n * @type {boolean}\n /\n @property({ type: Boolean }) checked? = false;\n\n /\n The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n * @type {string}\n /\n @property({ type: String }) value: string = 'on';\n\n /\n The help text shown below the label.\n * This is used to provide additional information or descriptions to the user.\n * @type {string}\n /\n @property({ type: String, attribute: 'help-text' }) helpText?: string;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _internals: ElementInternals;\n\n /\n Indicates if the radio button is part of a form.\n * @internal\n /\n public get isFormElement(): boolean {\n return !!this._internals.form;\n }\n\n private get _groupRoot(): Document \| HTMLFormElement {\n return this._internals.form ?? document;\n }\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('focus', this._setFocusOnInput);\n\n this._updateFormValue();\n\n // If the radio has a name then it is part of a group and needs keyboard navigation\n if (this.name) {\n this.addEventListener('keydown', this._handleKeyDown);\n this._SetTabbableRadios();\n }\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeyDown);\n this.removeEventListener('focus', this._setFocusOnInput);\n }\n\n private _setFocusOnInput() {\n this._input.focus();\n }\n\n private _getRadioGroup() {\n return Array.from(\n this._groupRoot.querySelectorAll<FhiRadio>(\n `${FhiRadioSelector}[name=\"${this.name}\"]`,\n ),\n );\n }\n\n private _SetTabbableRadios() {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n // Only the checked radio should be tabbable\n radio.tabIndex = radio.checked ? 0 : -1;\n });\n\n // If none of the radios are checked, make the first one tabbable\n if (!radios.some(radio => radio.checked) && radios.length > 0) {\n radios[0].tabIndex = 0;\n }\n }\n\n protected willUpdate(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('value')) {\n this.value = this.value ?? 'on';\n }\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('checked')) {\n this._updateFormValue();\n\n if (this.checked) {\n this.uncheckGroupMembers();\n }\n }\n\n // update the form value when the value or name input changes and the radio is already checked\n if (changedProperties.has('value') \|\| changedProperties.has('name')) {\n if (this._input.checked) {\n this._updateFormValue();\n }\n }\n\n if (changedProperties.has('helpText') \|\| changedProperties.has('label')) {\n if (!this.label && this.helpText) {\n console.error(\n 'The \"help-text\" property is set, but the \"label\" property is not. It is required to provide a label when using help text.',\n );\n }\n }\n }\n\n public formResetCallback(): void {\n const radiosCheckedByDefault = this._getRadioGroup().filter(\n radio => typeof radio.getAttribute('checked') === 'string',\n );\n\n this.checked = radiosCheckedByDefault.pop() === this;\n\n this._updateFormValue();\n }\n\n private uncheckGroupMembers(): void {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n if (radio === this) {\n return;\n }\n\n if (radio.isFormElement && this._groupRoot === document) {\n return;\n }\n\n radio.checked = false;\n });\n }\n\n private _updateFormValue(): void {\n if (!this.isFormElement) {\n return;\n }\n\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n\n this.uncheckGroupMembers();\n\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the radio is checked or unchecked.\n /\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the radio is checked or unchecked.\n /\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n if (!arrows.includes(event.key)) {\n return;\n }\n\n event.preventDefault();\n\n const radios = this._getRadioGroup();\n\n if (radios.length < 2) {\n return;\n }\n\n const currentIndex = radios.indexOf(this);\n\n const nextIndex = currentIndex;\n let nextRadio: FhiRadio;\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n } else {\n nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n }\n\n nextRadio.focus();\n this.checked = false;\n nextRadio.checked = true;\n this._SetTabbableRadios();\n }\n\n render() {\n return html`\n <div class=\"radio-wrapper\">\n <input\n type=\"radio\"\n id=\"input-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${this.value}\"\n .checked=${live(this.checked ?? false)}\n ?disabled=${this.disabled}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"radio-dot\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle r=\"6\" cx=\"9\" cy=\"9\" />\n </svg>\n </div>\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText\n ? html`<fhi-body size=\"small\" class=\"help-text\"\n >${this.helpText}</fhi-body\n >`\n : ''}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-radio-color: currentcolor;\n }\n\n :host {\n display: grid;\n width: max-content;\n height: fit-content;\n grid-template-columns: auto auto;\n color: var(--fhi-radio-color);\n padding-left: 0.125rem;\n\n .radio-wrapper {\n display: flex;\n position: relative;\n height: fit-content;\n }\n\n label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n\n label,\n fhi-body {\n grid-column: 2;\n padding-left: 6px;\n }\n\n input {\n margin: 0.125rem 0 0.125rem 0;\n appearance: none;\n width: var(--fhi-spacing-250);\n height: var(--fhi-spacing-250);\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-full);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n &:not(:focus-visible) {\n outline-color: var(--fhi-color-accent-surface-hover);\n }\n }\n\n .radio-dot {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 1.125rem;\n }\n\n input:checked {\n border-width: var(--fhi-dimension-border-width-active);\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-neutral-border-default);\n }\n visibility: visible;\n opacity: 1;\n }\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n {\n cursor: not-allowed;\n }\n }\n\n :host(:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-surface-default);\n outline: var(--fhi-dimension-border-width-focus) solid\n var(--fhi-color-accent-surface-hover);\n }\n\n &:host([status='error']) {\n input {\n border-color: var(--fhi-color-danger-border-default);\n background-color: var(--fhi-color-danger-background-default);\n &:not(:focus-visible) {\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n }\n\n input:checked {\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-danger-border-default);\n }\n }\n }\n\n input:hover:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-surface-default);\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n }\n }\n `;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"fhi-radio.js","names":[],"sources":["../../src/components/fhi-radio/fhi-radio.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport '../typography/fhi-body/fhi-body.component';\n\nexport const FhiRadioSelector = 'fhi-radio';\n\n/*\n ## FHI Radio\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-radio--docs}\n \n The `<fhi-radio>` component represents a single radio button.\n * It should be used within a group of options, allowing users to select one option from a set.\n \n @tag fhi-radio\n * @element fhi-radio\n /\n@customElement(FhiRadioSelector)\nexport class FhiRadio extends LitElement {\n static readonly formAssociated = true;\n\n /\n The text label assigned to and displayed next to the radio.\n * You should always provide a label.\n * @type {string}\n /\n @property({ type: String }) label?: string = undefined;\n\n /\n The name of the radio. This is submitted with the form data as a `key` when the checkbox is checked.\n * All `<fhi-radio>` components with the same name belong to the same group.\n * @reflect\n * @type {string}\n /\n @property({ type: String, reflect: true }) name?: string = undefined;\n\n /\n Sets the visual status of the radio. There is currently only one status available: `error`.\n * The `error` status is used to indicate that there is an issue with the radio, such as a required radio not being checked.\n * @reflect\n * @type {'error' \| undefined}\n /\n @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n /\n Disables the radio. This changes its appearance and makes it non-interactive.\n * @reflect\n * @type {boolean}\n /\n @property({ type: Boolean, reflect: true }) disabled? = false;\n\n /\n Whether the radio button is checked or not.\n * @type {boolean}\n /\n @property({ type: Boolean }) checked? = false;\n\n /\n The value of the radio. This is submitted with the form data as a `value` when the radio is checked.\n * @type {string}\n /\n @property({ type: String }) value: string = 'on';\n\n /\n The help text shown below the label.\n * This is used to provide additional information or descriptions to the user.\n * @type {string}\n /\n @property({ type: String, attribute: 'help-text' }) helpText?: string;\n\n @query('#input-element')\n private _input!: HTMLInputElement;\n\n private _internals: ElementInternals;\n\n /\n Indicates if the radio button is part of a form.\n * @internal\n /\n public get isFormElement(): boolean {\n return !!this._internals.form;\n }\n\n private get _groupRoot(): Document \| HTMLFormElement {\n return this._internals.form ?? document;\n }\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n public connectedCallback(): void {\n super.connectedCallback();\n\n this.addEventListener('focus', this._setFocusOnInput);\n\n this._updateFormValue();\n\n // If the radio has a name then it is part of a group and needs keyboard navigation\n if (this.name) {\n this.addEventListener('keydown', this._handleKeyDown);\n this._SetTabbableRadios();\n }\n }\n\n public disconnectedCallback(): void {\n super.disconnectedCallback();\n this.removeEventListener('keydown', this._handleKeyDown);\n this.removeEventListener('focus', this._setFocusOnInput);\n }\n\n private _setFocusOnInput() {\n this._input.focus();\n }\n\n private _getRadioGroup() {\n return Array.from(\n this._groupRoot.querySelectorAll<FhiRadio>(\n `${FhiRadioSelector}[name=\"${this.name}\"]`,\n ),\n );\n }\n\n private _SetTabbableRadios() {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n // Only the checked radio should be tabbable\n radio.tabIndex = radio.checked ? 0 : -1;\n });\n\n // If none of the radios are checked, make the first one tabbable\n if (!radios.some(radio => radio.checked) && radios.length > 0) {\n radios[0].tabIndex = 0;\n }\n }\n\n protected willUpdate(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('value')) {\n this.value = this.value ?? 'on';\n }\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('checked')) {\n this._updateFormValue();\n\n if (this.checked) {\n this.uncheckGroupMembers();\n }\n }\n\n // update the form value when the value or name input changes and the radio is already checked\n if (changedProperties.has('value') \|\| changedProperties.has('name')) {\n if (this._input.checked) {\n this._updateFormValue();\n }\n }\n\n if (changedProperties.has('helpText') \|\| changedProperties.has('label')) {\n if (!this.label && this.helpText) {\n console.error(\n 'The \"help-text\" property is set, but the \"label\" property is not. It is required to provide a label when using help text.',\n );\n }\n }\n }\n\n public formResetCallback(): void {\n const radiosCheckedByDefault = this._getRadioGroup().filter(\n radio => typeof radio.getAttribute('checked') === 'string',\n );\n\n this.checked = radiosCheckedByDefault.pop() === this;\n\n this._updateFormValue();\n }\n\n private uncheckGroupMembers(): void {\n const radios = this._getRadioGroup();\n\n radios.forEach(radio => {\n if (radio === this) {\n return;\n }\n\n if (radio.isFormElement && this._groupRoot === document) {\n return;\n }\n\n radio.checked = false;\n });\n }\n\n private _updateFormValue(): void {\n if (!this.isFormElement) {\n return;\n }\n\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n private _handleChange(event: Event): void {\n this.checked = (event.target as HTMLInputElement).checked;\n\n this.uncheckGroupMembers();\n\n this._updateFormValue();\n\n event.stopPropagation();\n this._dispatchChangeEvent();\n }\n private _handleInput(event: Event): void {\n event.stopPropagation();\n this._dispatchInputEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the radio is checked or unchecked.\n /\n this.dispatchEvent(new Event('change', { bubbles: true }));\n }\n\n private _dispatchInputEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `input`.\n * This event is dispatched when the radio is checked or unchecked.\n /\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }\n\n private _handleKeyDown(event: KeyboardEvent): void {\n const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n\n if (!arrows.includes(event.key)) {\n return;\n }\n\n event.preventDefault();\n\n const radios = this._getRadioGroup();\n\n if (radios.length < 2) {\n return;\n }\n\n const currentIndex = radios.indexOf(this);\n\n const nextIndex = currentIndex;\n let nextRadio: FhiRadio;\n\n if (event.key === 'ArrowUp' \|\| event.key === 'ArrowLeft') {\n nextRadio = radios[nextIndex === 0 ? radios.length - 1 : nextIndex - 1];\n } else {\n nextRadio = radios[nextIndex === radios.length - 1 ? 0 : nextIndex + 1];\n }\n\n nextRadio.focus();\n this.checked = false;\n nextRadio.checked = true;\n this._SetTabbableRadios();\n }\n\n render() {\n return html`\n <div class=\"radio-wrapper\">\n <input\n type=\"radio\"\n id=\"input-element\"\n name=\"${ifDefined(this.name)}\"\n value=\"${this.value}\"\n .checked=${live(this.checked ?? false)}\n ?disabled=${this.disabled}\n aria-invalid=${ifDefined(\n this.status === 'error' ? 'true' : undefined,\n )}\n @change=${this._handleChange}\n @input=${this._handleInput}\n />\n <svg\n class=\"radio-dot\"\n viewBox=\"0 0 18 18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle r=\"6\" cx=\"9\" cy=\"9\" />\n </svg>\n </div>\n ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n ${this.helpText\n ? html`<fhi-body size=\"small\" class=\"help-text\"\n >${this.helpText}</fhi-body\n >`\n : ''}\n `;\n }\n\n static styles = css`\n :host {\n --fhi-radio-color: currentcolor;\n }\n\n :host {\n display: grid;\n width: max-content;\n height: fit-content;\n grid-template-columns: auto auto;\n color: var(--fhi-radio-color);\n padding-left: 0.125rem;\n\n .radio-wrapper {\n display: flex;\n position: relative;\n height: fit-content;\n }\n\n label {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n\n label,\n fhi-body {\n grid-column: 2;\n padding-left: 6px;\n }\n\n input {\n margin: 0.125rem 0 0.125rem 0;\n appearance: none;\n width: var(--fhi-spacing-250);\n height: var(--fhi-spacing-250);\n background-color: var(--fhi-color-neutral-background-default);\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-default);\n border-radius: var(--fhi-border-radius-full);\n transition: all var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n &:not(:focus-visible) {\n outline-color: var(--fhi-color-accent-surface-hover);\n }\n }\n\n .radio-dot {\n visibility: hidden;\n opacity: 0;\n transition: opacity var(--fhi-motion-ease-default)\n var(--fhi-motion-duration-quick);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 1.125rem;\n }\n\n input:checked {\n border-width: var(--fhi-dimension-border-width-active);\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-neutral-border-default);\n }\n visibility: visible;\n opacity: 1;\n }\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n {\n cursor: not-allowed;\n }\n }\n\n :host(:not(:disabled)) {\n input:hover:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-accent-border-strong);\n background-color: var(--fhi-color-accent-surface-default);\n outline: var(--fhi-dimension-border-width-focus) solid\n var(--fhi-color-accent-surface-hover);\n }\n\n &:host([status='error']) {\n input {\n border-color: var(--fhi-color-danger-border-default);\n background-color: var(--fhi-color-danger-background-default);\n &:not(:focus-visible) {\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n }\n\n input:checked {\n ~ .radio-dot {\n circle {\n fill: var(--fhi-color-danger-border-default);\n }\n }\n }\n\n input:hover:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-subtle);\n }\n\n input:active:not(:checked) {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-surface-default);\n outline-color: var(--fhi-color-danger-surface-hover);\n }\n }\n }\n `;\n}\n"],"mappings":";;;;;AAOA,IAAa,IAAmB,aAczB,IAAA,cAAuB,EAAW;;wBACN;;CA4DjC,IAAW,gBAAyB;EAClC,OAAO,CAAC,CAAC,KAAK,WAAW;CAC3B;CAEA,IAAY,aAAyC;EACnD,OAAO,KAAK,WAAW,QAAQ;CACjC;CAEA,cAAc;EAEZ,AADA,MAAM,gBA9DqC,KAAA,eAQc,KAAA,iBAQG,KAAA,mBAON,mBAMhB,iBAMI,MA4B1C,KAAK,aAAa,KAAK,gBAAgB;CACzC;CAEA,oBAAiC;EAQ/B,AAPA,MAAM,kBAAkB,GAExB,KAAK,iBAAiB,SAAS,KAAK,gBAAgB,GAEpD,KAAK,iBAAiB,GAGlB,KAAK,SACP,KAAK,iBAAiB,WAAW,KAAK,cAAc,GACpD,KAAK,mBAAmB;CAE5B;CAEA,uBAAoC;EAGlC,AAFA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,WAAW,KAAK,cAAc,GACvD,KAAK,oBAAoB,SAAS,KAAK,gBAAgB;CACzD;CAEA,mBAA2B;EACzB,KAAK,OAAO,MAAM;CACpB;CAEA,iBAAyB;EACvB,OAAO,MAAM,KACX,KAAK,WAAW,iBACd,GAAG,EAAiB,SAAS,KAAK,KAAK,GACzC,CACF;CACF;CAEA,qBAA6B;EAC3B,IAAM,IAAS,KAAK,eAAe;EAQnC,AANA,EAAO,SAAQ,MAAS;GAEtB,EAAM,WAAW,EAAM,UAAU,IAAI;EACvC,CAAC,GAGG,CAAC,EAAO,MAAK,MAAS,EAAM,OAAO,KAAK,EAAO,SAAS,MAC1D,EAAO,GAAG,WAAW;CAEzB;CAEA,WAAqB,GAAyC;EAC5D,AAAI,EAAkB,IAAI,OAAO,MAC/B,KAAK,QAAQ,KAAK,SAAS;CAE/B;CAEA,QAAe,GAAyC;EAkBtD,AAjBA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,SAAS,MACjC,KAAK,iBAAiB,GAElB,KAAK,WACP,KAAK,oBAAoB,KAKzB,EAAkB,IAAI,OAAO,KAAK,EAAkB,IAAI,MAAM,MAC5D,KAAK,OAAO,WACd,KAAK,iBAAiB,IAItB,EAAkB,IAAI,UAAU,KAAK,EAAkB,IAAI,OAAO,MAChE,CAAC,KAAK,SAAS,KAAK,YACtB,QAAQ,MACN,+HACF;CAGN;CAEA,oBAAiC;EAC/B,IAAM,IAAyB,KAAK,eAAe,EAAE,QACnD,MAAS,OAAO,EAAM,aAAa,SAAS,KAAM,QACpD;EAIA,AAFA,KAAK,UAAU,EAAuB,IAAI,MAAM,MAEhD,KAAK,iBAAiB;CACxB;CAEA,sBAAoC;EAGlC,KAFoB,eAEpB,EAAO,SAAQ,MAAS;GAClB,MAAU,SAIV,EAAM,iBAAiB,KAAK,eAAe,aAI/C,EAAM,UAAU;EAClB,CAAC;CACH;CAEA,mBAAiC;EAC1B,KAAK,iBAIV,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;CAC/D;CAEA,cAAsB,GAAoB;EAQxC,AAPA,KAAK,UAAW,EAAM,OAA4B,SAElD,KAAK,oBAAoB,GAEzB,KAAK,iBAAiB,GAEtB,EAAM,gBAAgB,GACtB,KAAK,qBAAqB;CAC5B;CACA,aAAqB,GAAoB;EAEvC,AADA,EAAM,gBAAgB,GACtB,KAAK,oBAAoB;CAC3B;CAEA,uBAAqC;EAKnC,KAAK,cAAc,IAAI,MAAM,UAAU,EAAE,SAAS,GAAK,CAAC,CAAC;CAC3D;CAEA,sBAAoC;EAKlC,KAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC1E;CAEA,eAAuB,GAA4B;EAGjD,IAAI,CAAC;GAFW;GAAW;GAAa;GAAa;EAEhD,EAAO,SAAS,EAAM,GAAG,GAC5B;EAGF,EAAM,eAAe;EAErB,IAAM,IAAS,KAAK,eAAe;EAEnC,IAAI,EAAO,SAAS,GAClB;EAKF,IAAM,IAFe,EAAO,QAAQ,IAElB,GACd;EAWJ,AATA,AAGE,IAHE,EAAM,QAAQ,aAAa,EAAM,QAAQ,cAC/B,EAAO,MAAc,IAAI,EAAO,SAAS,IAAI,IAAY,KAEzD,EAAO,MAAc,EAAO,SAAS,IAAI,IAAI,IAAY,IAGvE,EAAU,MAAM,GAChB,KAAK,UAAU,IACf,EAAU,UAAU,IACpB,KAAK,mBAAmB;CAC1B;CAEA,SAAS;EACP,OAAO,CAAI;;;;;kBAKG,EAAU,KAAK,IAAI,EAAE;mBACpB,KAAK,MAAM;qBACT,EAAK,KAAK,WAAW,EAAK,EAAE;sBAC3B,KAAK,SAAS;yBACX,EACb,KAAK,WAAW,UAAU,SAAS,KAAA,CACrC,EAAE;oBACQ,KAAK,cAAc;mBACpB,KAAK,aAAa;;;;;;;;;;QAU7B,KAAK,SAAS,CAAI,8BAA8B,KAAK,MAAM,UAAU;QACrE,KAAK,WACH,CAAI;eACC,KAAK,SAAS;eAEnB,GAAG;;CAEX;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgIrB;GAnZG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAQzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAQxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAMzC,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAM1B,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAOzB,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAY,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAEjD,EAAM,gBAAgB,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,UArDxB,EAAc,CAAgB,CAAA,GAAA,CAAA"}

package/fhi-select.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { a as e, f as t, n, o as r, r as i, s as a, t as o, u as s } from "./decorate-Cy1UktZk.js";
+import { t as c } from "./if-defined-Bwi1u9Ry.js";
 import "./fhi-body.js";
 import "./fhi-label.js";
 import "./fhi-icon-chevron-down.js";
 //#region src/components/select/fhi-select/fhi-select.component.ts
-var c = "fhi-select", l = class extends a {
+var l = "fhi-select", u = class extends a {
 	static {
 		this.formAssociated = !0;
 	}
@@ -90,6 +91,7 @@ var c = "fhi-select", l = class extends a {
           @change="${this._handleSelectChange}"
           @input="${this._handleSelectInput}"
           ?disabled="${this.disabled}"
+          aria-invalid=${c(this.status === "error" ? "true" : void 0)}
         >
           ${this._renderOptionElements()}
         </select>
@@ -212,20 +214,20 @@ var c = "fhi-select", l = class extends a {
 o([e({
 	type: String,
 	reflect: !0
-})], l.prototype, "name", void 0), o([e({ type: String })], l.prototype, "label", void 0), o([e({
+})], u.prototype, "name", void 0), o([e({ type: String })], u.prototype, "label", void 0), o([e({
 	type: String,
 	attribute: "help-text"
-})], l.prototype, "helpText", void 0), o([e({
+})], u.prototype, "helpText", void 0), o([e({
 	type: String,
 	reflect: !0
-})], l.prototype, "value", void 0), o([e({
+})], u.prototype, "value", void 0), o([e({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "disabled", void 0), o([e({
+})], u.prototype, "disabled", void 0), o([e({
 	type: String,
 	reflect: !0
-})], l.prototype, "status", void 0), o([e({ type: String })], l.prototype, "message", void 0), o([i("select")], l.prototype, "selectElement", void 0), o([n()], l.prototype, "slotElements", void 0), l = o([r(c)], l);
+})], u.prototype, "status", void 0), o([e({ type: String })], u.prototype, "message", void 0), o([i("select")], u.prototype, "selectElement", void 0), o([n()], u.prototype, "slotElements", void 0), u = o([r(l)], u);
 //#endregion
-export { l as FhiSelect, c as FhiSelectSelector };
+export { u as FhiSelect, l as FhiSelectSelector };
 //# sourceMappingURL=fhi-select.js.map

package/fhi-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fhi-select.js","names":[],"sources":["../../src/components/select/fhi-select/fhi-select.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n query,\n} from 'lit/decorators.js';\n\nimport { FhiSelectItem } from '../fhi-select-item/fhi-select-item.component';\n\nimport '../../typography/fhi-label/fhi-label.component';\nimport '../../typography/fhi-body/fhi-body.component';\nimport '../../icons/fhi-icon-chevron-down.component';\n\nexport const FhiSelectSelector = 'fhi-select';\n\n/*\n ## FHI Select\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-select--docs}\n \n The `<fhi-select>` component is used to create a dropdown list of options for users to choose from.\n * It provides a labeled select element (`fhi-select-item`) with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n \n @tag fhi-select\n * @element fhi-select\n \n @slot - The default slot is used to provide the options for the select element. Each option should be represented by a `<fhi-select-item>` element.\n /\n@customElement(FhiSelectSelector)\nexport class FhiSelect extends LitElement {\n /* @internal /\n static readonly formAssociated = true;\n\n /\n The name attribute of the select element. This property is used to identify the select element when submitting a form.\n * @type {string}\n /\n @property({ type: String, reflect: true })\n name: string = '';\n\n /\n The label attribute of the select element. This property is used to provide a descriptive label for the select element.\n * @type {string}\n /\n @property({ type: String })\n label: string = '';\n\n /\n The message shown above the Select.\n * This is often used to provide additional information to the user.\n * @type {string}\n /\n @property({ type: String, attribute: 'help-text' })\n helpText?: string;\n\n /\n The value attribute of the select element. This property is used to identify the selected option when submitting a form.\n * @type {string}\n /\n @property({ type: String, reflect: true })\n value: string = '';\n\n /\n The disabled attribute of the select element. This property is used to disable the select element.\n * @type {boolean}\n /\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n /\n The status attribute of the select element. This property is used to indicate the validation status of the select element.\n * @type {'error' \| undefined}\n /\n @property({ type: String, reflect: true })\n status?: 'error';\n\n /\n The message attribute of the select element. This property is used to provide a validation message for the select element.\n * @type {string}\n /\n @property({ type: String })\n message?: string;\n\n @query('select')\n selectElement!: HTMLSelectElement;\n\n @queryAssignedElements()\n slotElements!: Array<HTMLElement>;\n\n private _internals: ElementInternals;\n private _initialSelectedElement: HTMLOptionElement \| null = null;\n private _mutationObserver: MutationObserver \| null = null;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n this._mutationObserver = new MutationObserver(() =>\n this._handleSlotChange(),\n );\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this._mutationObserver?.disconnect();\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('name')) {\n this._internals.setFormValue(this.value);\n }\n\n if (!this._initialSelectedElement) {\n this._setInitialSelectedElement();\n }\n }\n\n public formResetCallback(): void {\n this.value = this._initialSelectedElement?.value ?? '';\n this._internals.setFormValue(this.value);\n }\n\n private _setInitialSelectedElement() {\n this.selectElement.querySelectorAll('option').forEach(option => {\n if (option.selected) {\n this._initialSelectedElement = option;\n }\n });\n }\n\n private _handleSelectChange(): void {\n this.value = this.selectElement.value;\n this._internals.setFormValue(this.value);\n\n this._dispatchChangeEvent();\n }\n\n private _handleSelectInput(): void {\n this._dispatchInputEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the chosen option of the select changes.\n /\n this.dispatchEvent(\n new Event('change', {\n bubbles: 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 chosen option of the select changes.\n /\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _renderOptionElements() {\n const items = this.slotElements.filter(\n element => element.tagName.toLowerCase() === 'fhi-select-item',\n ) as FhiSelectItem[];\n\n if (items.length === 0) {\n return html``;\n }\n\n const options = html`\n ${items.map(item => {\n const optionValue = item.value ?? item.textContent?.trim() ?? '';\n\n return html`<option\n value=\"${optionValue}\"\n label=\"${item.label ?? item.textContent?.trim() ?? null}\"\n ?selected=\"${this.value ? optionValue === this.value : item.selected}\"\n >\n ${item.textContent}\n </option>`;\n })}\n `;\n\n return options;\n }\n\n private _handleSlotChange() {\n this._observeItems();\n this.requestUpdate();\n\n this.updateComplete.then(() => {\n this.value = this.selectElement.value;\n this._internals.setFormValue(this.value);\n });\n }\n\n private _observeItems() {\n this._mutationObserver?.disconnect();\n\n for (const item of this.slotElements) {\n this._mutationObserver?.observe(item, {\n attributes: true,\n attributeFilter: ['selected', 'value', 'label'],\n });\n }\n }\n\n render() {\n return html`\n ${this.label\n ? html`\n <label for=\"select\">\n <fhi-label class=\"label\" size=\"small\">${this.label}</fhi-label>\n </label>\n `\n : null}\n ${this.helpText\n ? html`<fhi-body class=\"help-text\" size=\"small\"\n >${this.helpText}</fhi-body\n >`\n : null}\n\n <div class=\"select-container\">\n <fhi-icon-chevron-down aria-hidden=\"true\"></fhi-icon-chevron-down>\n <select\n id=\"select\"\n name=\"${this.name}\"\n .value=\"${this.value}\"\n @change=\"${this._handleSelectChange}\"\n @input=\"${this._handleSelectInput}\"\n ?disabled=\"${this.disabled}\"\n >\n ${this._renderOptionElements()}\n </select>\n </div>\n\n ${this.message\n ? html` <fhi-body class=\"message\" size=\"small\">\n ${this.message}\n </fhi-body>`\n : null}\n\n <slot hidden @slotchange=${this._handleSlotChange}></slot>\n `;\n }\n\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n color: var(--fhi-color-neutral-text-default);\n -webkit-font-smoothing: antialiased;\n\n .label {\n color: inherit;\n width: fit-content;\n padding-bottom: var(--fhi-spacing-050);\n }\n\n label:has(+ .help-text) {\n .label {\n padding-bottom: 0;\n }\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n width: fit-content;\n padding-bottom: var(--fhi-spacing-050);\n }\n\n .message {\n color: inherit;\n width: fit-content;\n padding-top: var(--fhi-spacing-050);\n }\n\n .select-container {\n position: relative;\n display: flex;\n }\n\n fhi-icon-chevron-down {\n color: inherit;\n position: absolute;\n pointer-events: none;\n align-self: center;\n right: 8px;\n }\n\n / TODO: Use customizable select styling when available. /\n / https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#browser_compatibility /\n select {\n color: inherit;\n box-sizing: border-box;\n flex: 1 1 auto;\n\n font: normal var(--fhi-typography-body-medium-font-weight)\n var(--fhi-typography-body-medium-font-size) /\n var(--fhi-typography-body-medium-line-height)\n var(--fhi-font-family-default);\n\n background-color: var(--fhi-color-neutral-background-default);\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: var(--fhi-spacing-100) var(--fhi-spacing-500)\n var(--fhi-spacing-100) var(--fhi-spacing-150);\n height: var(--fhi-spacing-500);\n\n appearance: none;\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n\n {\n cursor: not-allowed;\n }\n }\n\n :host([status='error']:not([disabled])) {\n .label,\n .help-text,\n select {\n color: var(--fhi-color-danger-text-default);\n }\n\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n\n select {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n }\n }\n\n :host(:not([status]):not([disabled])) {\n select:not(:open) {\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 }\n }\n `;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"fhi-select.js","names":[],"sources":["../../src/components/select/fhi-select/fhi-select.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n query,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { FhiSelectItem } from '../fhi-select-item/fhi-select-item.component';\n\nimport '../../typography/fhi-label/fhi-label.component';\nimport '../../typography/fhi-body/fhi-body.component';\nimport '../../icons/fhi-icon-chevron-down.component';\n\nexport const FhiSelectSelector = 'fhi-select';\n\n/*\n ## FHI Select\n \n {@link https://designsystem.fhi.no/?path=/docs/komponenter-select--docs}\n \n The `<fhi-select>` component is used to create a dropdown list of options for users to choose from.\n * It provides a labeled select element (`fhi-select-item`) with optional placeholder text, status indication, and a message area for additional information or validation feedback.\n \n @tag fhi-select\n * @element fhi-select\n \n @slot - The default slot is used to provide the options for the select element. Each option should be represented by a `<fhi-select-item>` element.\n /\n@customElement(FhiSelectSelector)\nexport class FhiSelect extends LitElement {\n /* @internal /\n static readonly formAssociated = true;\n\n /\n The name attribute of the select element. This property is used to identify the select element when submitting a form.\n * @type {string}\n /\n @property({ type: String, reflect: true })\n name: string = '';\n\n /\n The label attribute of the select element. This property is used to provide a descriptive label for the select element.\n * @type {string}\n /\n @property({ type: String })\n label: string = '';\n\n /\n The message shown above the Select.\n * This is often used to provide additional information to the user.\n * @type {string}\n /\n @property({ type: String, attribute: 'help-text' })\n helpText?: string;\n\n /\n The value attribute of the select element. This property is used to identify the selected option when submitting a form.\n * @type {string}\n /\n @property({ type: String, reflect: true })\n value: string = '';\n\n /\n The disabled attribute of the select element. This property is used to disable the select element.\n * @type {boolean}\n /\n @property({ type: Boolean, reflect: true })\n disabled: boolean = false;\n\n /\n The status attribute of the select element. This property is used to indicate the validation status of the select element.\n * @type {'error' \| undefined}\n /\n @property({ type: String, reflect: true })\n status?: 'error';\n\n /\n The message attribute of the select element. This property is used to provide a validation message for the select element.\n * @type {string}\n /\n @property({ type: String })\n message?: string;\n\n @query('select')\n selectElement!: HTMLSelectElement;\n\n @queryAssignedElements()\n slotElements!: Array<HTMLElement>;\n\n private _internals: ElementInternals;\n private _initialSelectedElement: HTMLOptionElement \| null = null;\n private _mutationObserver: MutationObserver \| null = null;\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n this._mutationObserver = new MutationObserver(() =>\n this._handleSlotChange(),\n );\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n this._mutationObserver?.disconnect();\n }\n\n public updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('name')) {\n this._internals.setFormValue(this.value);\n }\n\n if (!this._initialSelectedElement) {\n this._setInitialSelectedElement();\n }\n }\n\n public formResetCallback(): void {\n this.value = this._initialSelectedElement?.value ?? '';\n this._internals.setFormValue(this.value);\n }\n\n private _setInitialSelectedElement() {\n this.selectElement.querySelectorAll('option').forEach(option => {\n if (option.selected) {\n this._initialSelectedElement = option;\n }\n });\n }\n\n private _handleSelectChange(): void {\n this.value = this.selectElement.value;\n this._internals.setFormValue(this.value);\n\n this._dispatchChangeEvent();\n }\n\n private _handleSelectInput(): void {\n this._dispatchInputEvent();\n }\n\n private _dispatchChangeEvent(): void {\n /\n @type {Event} - Standard DOM event with the type `change`.\n * This event is dispatched when the chosen option of the select changes.\n /\n this.dispatchEvent(\n new Event('change', {\n bubbles: 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 chosen option of the select changes.\n /\n this.dispatchEvent(\n new Event('input', {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _renderOptionElements() {\n const items = this.slotElements.filter(\n element => element.tagName.toLowerCase() === 'fhi-select-item',\n ) as FhiSelectItem[];\n\n if (items.length === 0) {\n return html``;\n }\n\n const options = html`\n ${items.map(item => {\n const optionValue = item.value ?? item.textContent?.trim() ?? '';\n\n return html`<option\n value=\"${optionValue}\"\n label=\"${item.label ?? item.textContent?.trim() ?? null}\"\n ?selected=\"${this.value ? optionValue === this.value : item.selected}\"\n >\n ${item.textContent}\n </option>`;\n })}\n `;\n\n return options;\n }\n\n private _handleSlotChange() {\n this._observeItems();\n this.requestUpdate();\n\n this.updateComplete.then(() => {\n this.value = this.selectElement.value;\n this._internals.setFormValue(this.value);\n });\n }\n\n private _observeItems() {\n this._mutationObserver?.disconnect();\n\n for (const item of this.slotElements) {\n this._mutationObserver?.observe(item, {\n attributes: true,\n attributeFilter: ['selected', 'value', 'label'],\n });\n }\n }\n\n render() {\n return html`\n ${this.label\n ? html`\n <label for=\"select\">\n <fhi-label class=\"label\" size=\"small\">${this.label}</fhi-label>\n </label>\n `\n : null}\n ${this.helpText\n ? html`<fhi-body class=\"help-text\" size=\"small\"\n >${this.helpText}</fhi-body\n >`\n : null}\n\n <div class=\"select-container\">\n <fhi-icon-chevron-down aria-hidden=\"true\"></fhi-icon-chevron-down>\n <select\n id=\"select\"\n name=\"${this.name}\"\n .value=\"${this.value}\"\n @change=\"${this._handleSelectChange}\"\n @input=\"${this._handleSelectInput}\"\n ?disabled=\"${this.disabled}\"\n aria-invalid=${ifDefined(\n this.status === 'error' ? 'true' : undefined,\n )}\n >\n ${this._renderOptionElements()}\n </select>\n </div>\n\n ${this.message\n ? html` <fhi-body class=\"message\" size=\"small\">\n ${this.message}\n </fhi-body>`\n : null}\n\n <slot hidden @slotchange=${this._handleSlotChange}></slot>\n `;\n }\n\n static styles = css`\n :host {\n display: flex;\n flex-direction: column;\n color: var(--fhi-color-neutral-text-default);\n -webkit-font-smoothing: antialiased;\n\n .label {\n color: inherit;\n width: fit-content;\n padding-bottom: var(--fhi-spacing-050);\n }\n\n label:has(+ .help-text) {\n .label {\n padding-bottom: 0;\n }\n }\n\n .help-text {\n color: var(--fhi-color-neutral-text-subtle);\n width: fit-content;\n padding-bottom: var(--fhi-spacing-050);\n }\n\n .message {\n color: inherit;\n width: fit-content;\n padding-top: var(--fhi-spacing-050);\n }\n\n .select-container {\n position: relative;\n display: flex;\n }\n\n fhi-icon-chevron-down {\n color: inherit;\n position: absolute;\n pointer-events: none;\n align-self: center;\n right: 8px;\n }\n\n / TODO: Use customizable select styling when available. /\n / https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select#browser_compatibility /\n select {\n color: inherit;\n box-sizing: border-box;\n flex: 1 1 auto;\n\n font: normal var(--fhi-typography-body-medium-font-weight)\n var(--fhi-typography-body-medium-font-size) /\n var(--fhi-typography-body-medium-line-height)\n var(--fhi-font-family-default);\n\n background-color: var(--fhi-color-neutral-background-default);\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: var(--fhi-spacing-100) var(--fhi-spacing-500)\n var(--fhi-spacing-100) var(--fhi-spacing-150);\n height: var(--fhi-spacing-500);\n\n appearance: none;\n }\n }\n\n :host([disabled]) {\n opacity: var(--fhi-opacity-disabled);\n\n {\n cursor: not-allowed;\n }\n }\n\n :host([status='error']:not([disabled])) {\n .label,\n .help-text,\n select {\n color: var(--fhi-color-danger-text-default);\n }\n\n .message {\n color: var(--fhi-color-danger-text-subtle);\n }\n\n select {\n border-color: var(--fhi-color-danger-border-strong);\n background-color: var(--fhi-color-danger-background-default);\n }\n }\n\n :host(:not([status]):not([disabled])) {\n select:not(:open) {\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 }\n }\n `;\n}\n"],"mappings":"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"}

package/fhi-text-area.js CHANGED Viewed

@@ -64,6 +64,7 @@ var c = "fhi-text-area", l = class extends i {
           rows=${s(this.rows)}
           @change=${this.handleChange}
           @input=${this.handleInput}
+          aria-invalid=${s(this.status === "error" ? "true" : void 0)}
         ></textarea>
       </div>
       ${this.message ? o`

package/fhi-text-area.js.map CHANGED Viewed

	@@ -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)\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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"}
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 aria-invalid=${ifDefined(\n this.status === 'error' ? 'true' : undefined,\n )}\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 Viewed

@@ -75,6 +75,7 @@ var c = "fhi-text-input", l = class extends i {
           .value=${this.value}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
+          aria-invalid=${s(this.status === "error" ? "true" : void 0)}
           @change=${this.handleChange}
           @input=${this.handleInput}
           @keydown=${this.handleKeyDown}

package/fhi-text-input.js.map CHANGED Viewed

	@@ -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 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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"}
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 aria-invalid=${ifDefined(\n this.status === 'error' ? 'true' : undefined,\n )}\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 Viewed

@@ -4,7 +4,7 @@ import { FhiBody as i, FhiBodySelector as a } from "./fhi-body.js";
 import { FhiCallout as o, FhiCalloutSelector as s } from "./fhi-callout.js";
 import { FhiCheckbox as c, FhiCheckboxSelector as l } from "./fhi-checkbox.js";
 import { FhiIconCalendar as u, FhiIconCalendarSelector as d } from "./fhi-icon-calendar.js";
-import { n as f, t as p } from "./fhi-date-input.component-CHBsiaAw.js";
+import { n as f, t as p } from "./fhi-date-input.component-CWaw_GH4.js";
 import { FhiFlex as m, FhiFlexSelector as h } from "./fhi-flex.js";
 import { FhiGrid as g, FhiGridSelector as _ } from "./fhi-grid.js";
 import { FhiLink as v, FhiLinkSelector as y } from "./fhi-link.js";

package/package.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.47.2","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-segmented-control":{"default":"./fhi-segmented-control.js","types":"./fhi-segmented-control.d.ts"},"./fhi-segmented-control-item":{"default":"./fhi-segmented-control-item.js","types":"./fhi-segmented-control-item.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.47.3","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-segmented-control":{"default":"./fhi-segmented-control.js","types":"./fhi-segmented-control.d.ts"},"./fhi-segmented-control-item":{"default":"./fhi-segmented-control-item.js","types":"./fhi-segmented-control-item.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 Viewed

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@folkehelseinstituttet/designsystem",
-  "version": "0.47.2",
+  "version": "0.47.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/fhi-date-input.component-CHBsiaAw.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"fhi-date-input.component-CHBsiaAw.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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"}