@folkehelseinstituttet/designsystem 0.43.0 → 0.43.2

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 (8) hide show
  1. package/custom-elements.json +1 -1
  2. package/fhi-modal-dialog.js +1 -0
  3. package/fhi-modal-dialog.js.map +1 -1
  4. package/fhi-select.js +24 -7
  5. package/fhi-select.js.map +1 -1
  6. package/fhi-select.manifest.json +1 -1
  7. package/package.json +1 -1
  8. package/web-types.json +1 -1
package/fhi-modal-dialog.js CHANGED
@@ -129,6 +129,7 @@ var s = "fhi-modal-dialog", c = class extends i {
129
129
  gap: var(--fhi-spacing-050);
130
130
  padding: var(--fhi-spacing-500) var(--fhi-spacing-500) 0
131
131
  var(--fhi-spacing-500);
132
+ color: var(--fhi-color-neutral-text-default);
132
133
  }
133
134
  slot[name='body'] {
134
135
  display: block;
package/fhi-modal-dialog.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-modal-dialog.js","names":[],"sources":["../../src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '../fhi-button/fhi-button.component';\nimport '../icons/fhi-icon-x.component';\nimport '../typography/fhi-headline/fhi-headline.component';\n\nexport const FhiModalDialogSelector = 'fhi-modal-dialog';\n\n/**\n * ## FHI Modal Dialog\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-modal-dialog--docs}\n *\n * The `fhi-modal-dialog` component is used to display important information or prompt the user for input in a modal window.\n * It overlays the main content and usually requires user interaction before returning to the underlying page.\n *\n * @tag fhi-modal-dialog\n * @element fhi-modal-dialog\n *\n * @slot body - The main content of the dialog. Typically contains text or form elements.\n * @slot footer - The footer content of the dialog, typically containing action buttons.\n */\n@customElement(FhiModalDialogSelector)\nexport class FhiModalDialog extends LitElement {\n /**\n * Decides whether the dialog is open or closed.\n * By setting this property to true, the dialog will be shown. Setting it to false will close the dialog.\n *\n * This property is reflected as an attribute and will therefor also change if the user toggles the dialog or\n * if you use the `show()` and `close()` methods.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true })\n open: boolean = false;\n\n /**\n * Sets the maximum width of the dialog.\n * @type {'small' | 'medium'`}\n */\n @property({ type: String, attribute: 'size', reflect: true })\n size: 'small' | 'medium' = 'medium';\n\n /**\n * Label for the close button.\n * @type {string}\n */\n @property({ type: String, attribute: 'close-button-label' })\n closeButtonLabel: string = '';\n\n /**\n * The heading text of the dialog. This is displayed at the top of the dialog.\n * @type {string}\n */\n @property({ type: String })\n heading: string = '';\n\n @query('dialog')\n private _dialog!: HTMLDialogElement;\n\n @query('footer')\n private _footer!: HTMLElement;\n\n @query('slot[name=\"footer\"]')\n private _footerSlot!: HTMLSlotElement;\n\n private _triggerElement: HTMLElement | null = null;\n private _bodyOverflowStyle: string = '';\n private _mouseDownInsideDialog: boolean = false;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.show();\n } else {\n this.close();\n }\n }\n\n // if invalid size is provided, default to 'medium'\n if (changedProperties.has('size')) {\n if (this.size !== 'small' && this.size !== 'medium') {\n this.size = 'medium';\n }\n }\n\n if (changedProperties.has('closeButtonLabel')) {\n if (\n typeof this.closeButtonLabel !== 'string' ||\n this.closeButtonLabel.length === 0\n ) {\n throw new TypeError(\n 'The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons.',\n );\n }\n }\n\n if (changedProperties.has('closeButtonLabel')) {\n if (typeof this.heading !== 'string' || this.heading.length === 0) {\n throw new TypeError(\n 'The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.',\n );\n }\n }\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n this._toggleFooter();\n }\n\n /**\n * Programmatically opens the dialog.\n * You can also open the dialog by instead setting the `open` property to `true`.\n */\n public show() {\n if (!this.open) {\n this._triggerElement = document.activeElement as HTMLElement | null;\n this._bodyOverflowStyle = document.body.style.overflow;\n this.open = true;\n }\n\n document.body.style.overflow = 'hidden';\n\n this._dialog.showModal();\n\n // Delay focus to make sure the windows screen reader properly detects the dialog\n setTimeout(() => {\n this._focusDialog();\n }, 10);\n\n this._dispatchToggleEvent();\n\n this.addEventListener('keydown', this.handleKeyPress.bind(this));\n }\n\n /**\n * Programmatically closes the dialog.\n * You can also close the dialog by instead setting the `open` property to `false`.\n */\n public close() {\n if (this.open) {\n this.open = false;\n }\n\n document.body.style.overflow = this._bodyOverflowStyle;\n\n this._dialog.close();\n\n this._dispatchToggleEvent();\n this._dispatchCloseEvent();\n\n this._triggerElement?.focus();\n\n this.removeEventListener('keydown', this.handleKeyPress.bind(this));\n }\n\n private _focusDialog() {\n this._dialog.focus();\n }\n\n private _dispatchToggleEvent() {\n /**\n * @type {Event} - Standard DOM event with the type `toggle`\n * This event is fired whenever the dialog is opened or closed.\n * */\n this.dispatchEvent(\n new ToggleEvent('toggle', {\n newState: this.open ? 'open' : 'closed',\n oldState: this.open ? 'closed' : 'open',\n }),\n );\n }\n\n private _dispatchCloseEvent() {\n /**\n * @type {Event} - Standard DOM event with the type `close`\n * This event is fired whenever the dialog is closed.\n * */\n this.dispatchEvent(new CloseEvent('close'));\n }\n\n private _handleDialogMouseUp(event: MouseEvent) {\n if (this._mouseDownInsideDialog) {\n this._mouseDownInsideDialog = false;\n return;\n }\n\n if (event.target === this._dialog) {\n this.close();\n }\n\n event.stopPropagation();\n }\n\n private _handleCloseButtonClick() {\n this.close();\n }\n\n private _handleDialogContentMouseDown() {\n this._mouseDownInsideDialog = true;\n }\n\n private _handleFooterSlotChange() {\n this._toggleFooter();\n }\n\n private handleKeyPress(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n }\n }\n\n private _toggleFooter() {\n const nodes = this._footerSlot.assignedNodes({ flatten: true });\n\n if (nodes.length === 0) {\n this._footer.style.display = 'none';\n } else {\n this._footer.style.display = 'flex';\n }\n }\n\n render() {\n return html` <dialog\n @mouseup=${this._handleDialogMouseUp}\n aria-modal=\"true\"\n aria-labelledby=\"dialog-label\"\n closedby=\"none\"\n role=\"dialog\"\n >\n <section\n class=\"dialog-content\"\n @mousedown=${this._handleDialogContentMouseDown}\n >\n <header>\n <fhi-headline ?hidden=${!this.heading} id=\"dialog-label\" level=\"1\"\n >${this.heading}\n </fhi-headline>\n <fhi-button\n variant=\"text\"\n color=\"neutral\"\n size=\"small\"\n @click=${this._handleCloseButtonClick}\n >\n ${this.closeButtonLabel}\n <fhi-icon-x></fhi-icon-x>\n </fhi-button>\n </header>\n <slot name=\"body\"></slot>\n <footer>\n <slot\n name=\"footer\"\n @slotchange=${this._handleFooterSlotChange}\n ></slot>\n </footer>\n </section>\n </dialog>`;\n }\n\n static styles = css`\n @keyframes fhi-dialog-fade-in {\n from {\n opacity: 0;\n }\n }\n\n :host {\n --fhi-modal-dialog-width: unset;\n }\n\n :host {\n display: none;\n position: absolute;\n\n dialog {\n display: flex;\n width: var(--fhi-modal-dialog-width);\n overflow: hidden;\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-subtle);\n border-radius: var(--fhi-border-radius-200);\n animation: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default) fhi-dialog-fade-in;\n padding: 0;\n .dialog-content {\n overflow: auto;\n flex: 1;\n }\n header {\n display: flex;\n justify-content: space-between;\n align-items: start;\n gap: var(--fhi-spacing-050);\n padding: var(--fhi-spacing-500) var(--fhi-spacing-500) 0\n var(--fhi-spacing-500);\n }\n slot[name='body'] {\n display: block;\n padding: var(--fhi-spacing-500);\n }\n footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--fhi-spacing-050);\n flex-wrap: wrap;\n padding: 0 var(--fhi-spacing-500) var(--fhi-spacing-500)\n var(--fhi-spacing-500);\n }\n &::backdrop {\n background-color: var(--fhi-color-neutral-surface-active);\n opacity: var(--fhi-opacity-disabled);\n animation: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default) fhi-dialog-fade-in;\n }\n }\n }\n\n :host([open]) {\n display: block;\n }\n\n :host([size='small']) {\n --fhi-modal-dialog-width: 28rem;\n }\n\n :host([size='medium']) {\n --fhi-modal-dialog-width: 40rem;\n }\n `;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"fhi-modal-dialog.js","names":[],"sources":["../../src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '../fhi-button/fhi-button.component';\nimport '../icons/fhi-icon-x.component';\nimport '../typography/fhi-headline/fhi-headline.component';\n\nexport const FhiModalDialogSelector = 'fhi-modal-dialog';\n\n/**\n * ## FHI Modal Dialog\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-modal-dialog--docs}\n *\n * The `fhi-modal-dialog` component is used to display important information or prompt the user for input in a modal window.\n * It overlays the main content and usually requires user interaction before returning to the underlying page.\n *\n * @tag fhi-modal-dialog\n * @element fhi-modal-dialog\n *\n * @slot body - The main content of the dialog. Typically contains text or form elements.\n * @slot footer - The footer content of the dialog, typically containing action buttons.\n */\n@customElement(FhiModalDialogSelector)\nexport class FhiModalDialog extends LitElement {\n /**\n * Decides whether the dialog is open or closed.\n * By setting this property to true, the dialog will be shown. Setting it to false will close the dialog.\n *\n * This property is reflected as an attribute and will therefor also change if the user toggles the dialog or\n * if you use the `show()` and `close()` methods.\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true })\n open: boolean = false;\n\n /**\n * Sets the maximum width of the dialog.\n * @type {'small' | 'medium'`}\n */\n @property({ type: String, attribute: 'size', reflect: true })\n size: 'small' | 'medium' = 'medium';\n\n /**\n * Label for the close button.\n * @type {string}\n */\n @property({ type: String, attribute: 'close-button-label' })\n closeButtonLabel: string = '';\n\n /**\n * The heading text of the dialog. This is displayed at the top of the dialog.\n * @type {string}\n */\n @property({ type: String })\n heading: string = '';\n\n @query('dialog')\n private _dialog!: HTMLDialogElement;\n\n @query('footer')\n private _footer!: HTMLElement;\n\n @query('slot[name=\"footer\"]')\n private _footerSlot!: HTMLSlotElement;\n\n private _triggerElement: HTMLElement | null = null;\n private _bodyOverflowStyle: string = '';\n private _mouseDownInsideDialog: boolean = false;\n\n updated(changedProperties: PropertyValues<this>) {\n super.updated(changedProperties);\n\n if (changedProperties.has('open')) {\n if (this.open) {\n this.show();\n } else {\n this.close();\n }\n }\n\n // if invalid size is provided, default to 'medium'\n if (changedProperties.has('size')) {\n if (this.size !== 'small' && this.size !== 'medium') {\n this.size = 'medium';\n }\n }\n\n if (changedProperties.has('closeButtonLabel')) {\n if (\n typeof this.closeButtonLabel !== 'string' ||\n this.closeButtonLabel.length === 0\n ) {\n throw new TypeError(\n 'The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons.',\n );\n }\n }\n\n if (changedProperties.has('closeButtonLabel')) {\n if (typeof this.heading !== 'string' || this.heading.length === 0) {\n throw new TypeError(\n 'The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.',\n );\n }\n }\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties);\n this._toggleFooter();\n }\n\n /**\n * Programmatically opens the dialog.\n * You can also open the dialog by instead setting the `open` property to `true`.\n */\n public show() {\n if (!this.open) {\n this._triggerElement = document.activeElement as HTMLElement | null;\n this._bodyOverflowStyle = document.body.style.overflow;\n this.open = true;\n }\n\n document.body.style.overflow = 'hidden';\n\n this._dialog.showModal();\n\n // Delay focus to make sure the windows screen reader properly detects the dialog\n setTimeout(() => {\n this._focusDialog();\n }, 10);\n\n this._dispatchToggleEvent();\n\n this.addEventListener('keydown', this.handleKeyPress.bind(this));\n }\n\n /**\n * Programmatically closes the dialog.\n * You can also close the dialog by instead setting the `open` property to `false`.\n */\n public close() {\n if (this.open) {\n this.open = false;\n }\n\n document.body.style.overflow = this._bodyOverflowStyle;\n\n this._dialog.close();\n\n this._dispatchToggleEvent();\n this._dispatchCloseEvent();\n\n this._triggerElement?.focus();\n\n this.removeEventListener('keydown', this.handleKeyPress.bind(this));\n }\n\n private _focusDialog() {\n this._dialog.focus();\n }\n\n private _dispatchToggleEvent() {\n /**\n * @type {Event} - Standard DOM event with the type `toggle`\n * This event is fired whenever the dialog is opened or closed.\n * */\n this.dispatchEvent(\n new ToggleEvent('toggle', {\n newState: this.open ? 'open' : 'closed',\n oldState: this.open ? 'closed' : 'open',\n }),\n );\n }\n\n private _dispatchCloseEvent() {\n /**\n * @type {Event} - Standard DOM event with the type `close`\n * This event is fired whenever the dialog is closed.\n * */\n this.dispatchEvent(new CloseEvent('close'));\n }\n\n private _handleDialogMouseUp(event: MouseEvent) {\n if (this._mouseDownInsideDialog) {\n this._mouseDownInsideDialog = false;\n return;\n }\n\n if (event.target === this._dialog) {\n this.close();\n }\n\n event.stopPropagation();\n }\n\n private _handleCloseButtonClick() {\n this.close();\n }\n\n private _handleDialogContentMouseDown() {\n this._mouseDownInsideDialog = true;\n }\n\n private _handleFooterSlotChange() {\n this._toggleFooter();\n }\n\n private handleKeyPress(event: KeyboardEvent) {\n if (event.key === 'Escape') {\n event.preventDefault();\n this.close();\n }\n }\n\n private _toggleFooter() {\n const nodes = this._footerSlot.assignedNodes({ flatten: true });\n\n if (nodes.length === 0) {\n this._footer.style.display = 'none';\n } else {\n this._footer.style.display = 'flex';\n }\n }\n\n render() {\n return html` <dialog\n @mouseup=${this._handleDialogMouseUp}\n aria-modal=\"true\"\n aria-labelledby=\"dialog-label\"\n closedby=\"none\"\n role=\"dialog\"\n >\n <section\n class=\"dialog-content\"\n @mousedown=${this._handleDialogContentMouseDown}\n >\n <header>\n <fhi-headline ?hidden=${!this.heading} id=\"dialog-label\" level=\"1\"\n >${this.heading}\n </fhi-headline>\n <fhi-button\n variant=\"text\"\n color=\"neutral\"\n size=\"small\"\n @click=${this._handleCloseButtonClick}\n >\n ${this.closeButtonLabel}\n <fhi-icon-x></fhi-icon-x>\n </fhi-button>\n </header>\n <slot name=\"body\"></slot>\n <footer>\n <slot\n name=\"footer\"\n @slotchange=${this._handleFooterSlotChange}\n ></slot>\n </footer>\n </section>\n </dialog>`;\n }\n\n static styles = css`\n @keyframes fhi-dialog-fade-in {\n from {\n opacity: 0;\n }\n }\n\n :host {\n --fhi-modal-dialog-width: unset;\n }\n\n :host {\n display: none;\n position: absolute;\n\n dialog {\n display: flex;\n width: var(--fhi-modal-dialog-width);\n overflow: hidden;\n border: var(--fhi-dimension-border-width) solid\n var(--fhi-color-neutral-border-subtle);\n border-radius: var(--fhi-border-radius-200);\n animation: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default) fhi-dialog-fade-in;\n padding: 0;\n .dialog-content {\n overflow: auto;\n flex: 1;\n }\n header {\n display: flex;\n justify-content: space-between;\n align-items: start;\n gap: var(--fhi-spacing-050);\n padding: var(--fhi-spacing-500) var(--fhi-spacing-500) 0\n var(--fhi-spacing-500);\n color: var(--fhi-color-neutral-text-default);\n }\n slot[name='body'] {\n display: block;\n padding: var(--fhi-spacing-500);\n }\n footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: var(--fhi-spacing-050);\n flex-wrap: wrap;\n padding: 0 var(--fhi-spacing-500) var(--fhi-spacing-500)\n var(--fhi-spacing-500);\n }\n &::backdrop {\n background-color: var(--fhi-color-neutral-surface-active);\n opacity: var(--fhi-opacity-disabled);\n animation: var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default) fhi-dialog-fade-in;\n }\n }\n }\n\n :host([open]) {\n display: block;\n }\n\n :host([size='small']) {\n --fhi-modal-dialog-width: 28rem;\n }\n\n :host([size='medium']) {\n --fhi-modal-dialog-width: 40rem;\n }\n `;\n}\n"],"mappings":"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"}
package/fhi-select.js CHANGED
@@ -8,7 +8,10 @@ var c = "fhi-select", l = class extends a {
8
8
  this.formAssociated = !0;
9
9
  }
10
10
  constructor() {
11
- super(), this.name = "", this.label = "", this.value = "", this.disabled = !1, this._initialSelectedElement = null, this._internals = this.attachInternals();
11
+ super(), this.name = "", this.label = "", this.value = "", this.disabled = !1, this._initialSelectedElement = null, this._mutationObserver = null, this._internals = this.attachInternals(), this._mutationObserver = new MutationObserver(() => this._handleSlotChange());
12
+ }
13
+ disconnectedCallback() {
14
+ super.disconnectedCallback(), this._mutationObserver?.disconnect();
12
15
  }
13
16
  updated(e) {
14
17
  e.has("name") && this._internals.setFormValue(this.value), this._initialSelectedElement || this._setInitialSelectedElement();
@@ -39,20 +42,34 @@ var c = "fhi-select", l = class extends a {
39
42
  _renderOptionElements() {
40
43
  let e = this.slotElements.filter((e) => e.tagName.toLowerCase() === "fhi-select-item");
41
44
  return e.length === 0 ? s`` : s`
42
- ${e.map((e) => s`<option
43
- value="${e.getAttribute("value") ?? e.textContent}"
44
- label="${e.getAttribute("label") ?? ""}"
45
- ?selected="${e.hasAttribute("selected")}"
45
+ ${e.map((e) => {
46
+ let t = e.value ?? e.textContent?.trim() ?? "";
47
+ return s`<option
48
+ value="${t}"
49
+ label="${e.label ?? t ?? ""}"
50
+ ?selected="${this.value ? t === this.value : e.selected}"
46
51
  >
47
52
  ${e.textContent}
48
- </option>`)}
53
+ </option>`;
54
+ })}
49
55
  `;
50
56
  }
51
57
  _handleSlotChange() {
52
- this.requestUpdate(), this.updateComplete.then(() => {
58
+ this._observeItems(), this.requestUpdate(), this.updateComplete.then(() => {
53
59
  this.value = this.selectElement.value, this._internals.setFormValue(this.value);
54
60
  });
55
61
  }
62
+ _observeItems() {
63
+ this._mutationObserver?.disconnect();
64
+ for (let e of this.slotElements) this._mutationObserver?.observe(e, {
65
+ attributes: !0,
66
+ attributeFilter: [
67
+ "selected",
68
+ "value",
69
+ "label"
70
+ ]
71
+ });
72
+ }
56
73
  render() {
57
74
  return s`
58
75
  ${this.label ? s`
package/fhi-select.js.map CHANGED
@@ -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\n constructor() {\n super();\n this._internals = this.attachInternals();\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 return html`<option\n value=\"${item.getAttribute('value') ?? item.textContent}\"\n label=\"${item.getAttribute('label') ?? ''}\"\n ?selected=\"${item.hasAttribute('selected')}\"\n >\n ${item.textContent}\n </option>`;\n })}\n `;\n\n return options;\n }\n\n private _handleSlotChange() {\n this.requestUpdate();\n\n this.updateComplete.then(() => {\n this.value = this.selectElement.value;\n this._internals.setFormValue(this.value);\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';\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 ?? optionValue ?? ''}\"\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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"}
package/fhi-select.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/select/fhi-select/fhi-select.component.ts","declarations":[{"kind":"class","description":"## FHI Select\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-select--docs\n\nThe `<fhi-select>` component is used to create a dropdown list of options for users to choose from.\nIt provides a labeled select element (`fhi-select-item`) with optional placeholder text, status indication, and a message area for additional information or validation feedback.","name":"FhiSelect","slots":[{"description":"The default slot is used to provide the options for the select element. Each option should be represented by a `<fhi-select-item>` element.","name":""}],"members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleSelectChange","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleSelectInput","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleSlotChange","privacy":"private"},{"kind":"field","name":"_initialSelectedElement","type":{"text":"HTMLOptionElement | null"},"privacy":"private","default":"null"},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"method","name":"_renderOptionElements","privacy":"private"},{"kind":"method","name":"_setInitialSelectedElement","privacy":"private"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"The disabled attribute of the select element. This property is used to disable the select element.","attribute":"disabled","reflects":true},{"kind":"method","name":"formResetCallback","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"field","name":"helpText","type":{"text":"string"},"description":"The message shown above the Select.\nThis is often used to provide additional information to the user.","attribute":"help-text"},{"kind":"field","name":"label","type":{"text":"string"},"default":"''","description":"The label attribute of the select element. This property is used to provide a descriptive label for the select element.","attribute":"label"},{"kind":"field","name":"message","type":{"text":"string"},"description":"The message attribute of the select element. This property is used to provide a validation message for the select element.","attribute":"message"},{"kind":"field","name":"name","type":{"text":"string"},"default":"''","description":"The name attribute of the select element. This property is used to identify the select element when submitting a form.","attribute":"name","reflects":true},{"kind":"field","name":"selectElement","type":{"text":"HTMLSelectElement"}},{"kind":"field","name":"slotElements","type":{"text":"Array<HTMLElement>"}},{"kind":"field","name":"status","type":{"text":"'error' | undefined"},"description":"The status attribute of the select element. This property is used to indicate the validation status of the select element.","attribute":"status","reflects":true},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The value attribute of the select element. This property is used to identify the selected option when submitting a form.","attribute":"value","reflects":true}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the chosen option of the select changes."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the chosen option of the select changes."}],"attributes":[{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"The disabled attribute of the select element. This property is used to disable the select element.","fieldName":"disabled"},{"name":"help-text","type":{"text":"string"},"description":"The message shown above the Select.\nThis is often used to provide additional information to the user.","fieldName":"helpText"},{"name":"label","type":{"text":"string"},"default":"''","description":"The label attribute of the select element. This property is used to provide a descriptive label for the select element.","fieldName":"label"},{"name":"message","type":{"text":"string"},"description":"The message attribute of the select element. This property is used to provide a validation message for the select element.","fieldName":"message"},{"name":"name","type":{"text":"string"},"default":"''","description":"The name attribute of the select element. This property is used to identify the select element when submitting a form.","fieldName":"name"},{"name":"status","type":{"text":"'error' | undefined"},"description":"The status attribute of the select element. This property is used to indicate the validation status of the select element.","fieldName":"status"},{"name":"value","type":{"text":"string"},"default":"''","description":"The value attribute of the select element. This property is used to identify the selected option when submitting a form.","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-select","customElement":true},{"kind":"variable","name":"FhiSelectSelector","type":{"text":"string"},"default":"'fhi-select'"}]}
1
+ {"kind":"javascript-module","path":"src/components/select/fhi-select/fhi-select.component.ts","declarations":[{"kind":"class","description":"## FHI Select\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-select--docs\n\nThe `<fhi-select>` component is used to create a dropdown list of options for users to choose from.\nIt provides a labeled select element (`fhi-select-item`) with optional placeholder text, status indication, and a message area for additional information or validation feedback.","name":"FhiSelect","slots":[{"description":"The default slot is used to provide the options for the select element. Each option should be represented by a `<fhi-select-item>` element.","name":""}],"members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleSelectChange","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleSelectInput","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleSlotChange","privacy":"private"},{"kind":"field","name":"_initialSelectedElement","type":{"text":"HTMLOptionElement | null"},"privacy":"private","default":"null"},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"field","name":"_mutationObserver","type":{"text":"MutationObserver | null"},"privacy":"private","default":"new MutationObserver(() => this._handleSlotChange(), )"},{"kind":"method","name":"_observeItems","privacy":"private"},{"kind":"method","name":"_renderOptionElements","privacy":"private"},{"kind":"method","name":"_setInitialSelectedElement","privacy":"private"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"The disabled attribute of the select element. This property is used to disable the select element.","attribute":"disabled","reflects":true},{"kind":"method","name":"formResetCallback","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"field","name":"helpText","type":{"text":"string"},"description":"The message shown above the Select.\nThis is often used to provide additional information to the user.","attribute":"help-text"},{"kind":"field","name":"label","type":{"text":"string"},"default":"''","description":"The label attribute of the select element. This property is used to provide a descriptive label for the select element.","attribute":"label"},{"kind":"field","name":"message","type":{"text":"string"},"description":"The message attribute of the select element. This property is used to provide a validation message for the select element.","attribute":"message"},{"kind":"field","name":"name","type":{"text":"string"},"default":"''","description":"The name attribute of the select element. This property is used to identify the select element when submitting a form.","attribute":"name","reflects":true},{"kind":"field","name":"selectElement","type":{"text":"HTMLSelectElement"}},{"kind":"field","name":"slotElements","type":{"text":"Array<HTMLElement>"}},{"kind":"field","name":"status","type":{"text":"'error' | undefined"},"description":"The status attribute of the select element. This property is used to indicate the validation status of the select element.","attribute":"status","reflects":true},{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"The value attribute of the select element. This property is used to identify the selected option when submitting a form.","attribute":"value","reflects":true}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the chosen option of the select changes."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the chosen option of the select changes."}],"attributes":[{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"The disabled attribute of the select element. This property is used to disable the select element.","fieldName":"disabled"},{"name":"help-text","type":{"text":"string"},"description":"The message shown above the Select.\nThis is often used to provide additional information to the user.","fieldName":"helpText"},{"name":"label","type":{"text":"string"},"default":"''","description":"The label attribute of the select element. This property is used to provide a descriptive label for the select element.","fieldName":"label"},{"name":"message","type":{"text":"string"},"description":"The message attribute of the select element. This property is used to provide a validation message for the select element.","fieldName":"message"},{"name":"name","type":{"text":"string"},"default":"''","description":"The name attribute of the select element. This property is used to identify the select element when submitting a form.","fieldName":"name"},{"name":"status","type":{"text":"'error' | undefined"},"description":"The status attribute of the select element. This property is used to indicate the validation status of the select element.","fieldName":"status"},{"name":"value","type":{"text":"string"},"default":"''","description":"The value attribute of the select element. This property is used to identify the selected option when submitting a form.","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-select","customElement":true},{"kind":"variable","name":"FhiSelectSelector","type":{"text":"string"},"default":"'fhi-select'"}]}
package/package.json CHANGED
@@ -1 +1 @@
1
- {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.43.0","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-callout":{"default":"./fhi-callout.js","types":"./fhi-callout.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-link":{"default":"./fhi-link.js","types":"./fhi-link.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-select":{"default":"./fhi-select.js","types":"./fhi-select.d.ts"},"./fhi-select-item":{"default":"./fhi-select-item.js","types":"./fhi-select-item.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
1
+ {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.43.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-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-select":{"default":"./fhi-select.js","types":"./fhi-select.d.ts"},"./fhi-select-item":{"default":"./fhi-select-item.js","types":"./fhi-select-item.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@folkehelseinstituttet/designsystem",
4
- "version": "0.43.0",
4
+ "version": "0.43.2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {