@folkehelseinstituttet/designsystem 0.46.0 → 0.47.1

package/fhi-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-segmented-control.js","names":[],"sources":["../../src/components/segmented-control/fhi-segmented-control/fhi-segmented-control.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport {\n  FhiSegmentedControlItemSelector,\n  type FhiSegmentedControlItem,\n} from '../fhi-segmented-control-item/fhi-segmented-control-item.component';\n\nexport const FhiSegmentedControlSelector = 'fhi-segmented-control';\n\n/**\n * ## FHI Segmented Control\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-segmented-control--docs}\n *\n * The <fhi-segmented-control> component lets the user select one option from a group of related choices. Each choice is defined with a <fhi-segmented-control-item> element.\n *\n * The choice should affect the content within the same context.\n *\n * Example usage:\n * ```html\n * <fhi-segmented-control value=\"item2\">\n *   <fhi-segmented-control-item value=\"item1\">Item 1</fhi-segmented-control-item>\n *   <fhi-segmented-control-item value=\"item2\">Item 2</fhi-segmented-control-item>\n *   <fhi-segmented-control-item value=\"item3\">Item 3</fhi-segmented-control-item>\n * </fhi-segmented-control>\n * ```\n *\n * @tag fhi-segmented-control\n * @element fhi-segmented-control\n *\n * @slot - The default slot. Used for placing <fhi-segmented-control-item> elements.\n */\n@customElement(FhiSegmentedControlSelector)\nexport class FhiSegmentedControl extends LitElement {\n  /**\n   * The visual style of the segmented control. This will be applied to all segmented control items within the group.\n   *\n   * @reflect\n   * @type {'strong' | 'subtle'}\n   */\n  @property({ type: String, reflect: true }) variant: 'strong' | 'subtle' =\n    'strong';\n\n  /**\n   * The currently selected value of the segmented control.\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true }) value?: string;\n\n  private _selectedItem: FhiSegmentedControlItem | null = null;\n\n  private readonly _mutationObserver = new MutationObserver(mutations => {\n    const hasItemChanges = mutations.some(\n      mutation => mutation.type !== 'attributes' || mutation.target !== this,\n    );\n\n    if (!hasItemChanges) {\n      return;\n    }\n\n    if (mutations.some(mutation => mutation.type === 'childList')) {\n      this._syncVariant();\n    }\n\n    this._syncSelectionFromItems();\n  });\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.setAttribute('role', 'radiogroup');\n\n    this._mutationObserver.observe(this, {\n      attributes: true,\n      attributeFilter: ['selected', 'value'],\n      childList: true,\n      characterData: true,\n      subtree: true,\n    });\n\n    if (this.hasUpdated) {\n      this._syncAfterReconnect();\n    }\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n    this._mutationObserver.disconnect();\n  }\n\n  protected update(changedProperties: PropertyValues): void {\n    if (changedProperties.has('variant') && !this.variant) {\n      this.variant = 'strong';\n    }\n\n    super.update(changedProperties);\n  }\n\n  public updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('variant')) {\n      this._syncVariant();\n    }\n\n    if (changedProperties.has('value')) {\n      this._syncSelectionFromValue();\n    }\n  }\n\n  private async _syncAfterReconnect(): Promise<void> {\n    await this.updateComplete;\n\n    if (!this.isConnected) {\n      return;\n    }\n\n    this._syncVariant();\n    this._syncSelectionFromItems();\n  }\n\n  private _syncSelectionFromValue() {\n    const items = this._getItems();\n    const selectedItem = this._getSelectedItem(items);\n\n    if (selectedItem && this._getItemValue(selectedItem) === this.value) {\n      this._setSelectedItem(selectedItem);\n      return;\n    }\n\n    const valueMatchingItem = items.find(\n      item => this._getItemValue(item) === this.value,\n    );\n\n    this._setSelectedItem(valueMatchingItem ?? selectedItem);\n  }\n\n  private _syncSelectionFromItems() {\n    // wait until all pending updates are completed before syncing.\n    if (this.isUpdatePending) {\n      void this.updateComplete.then(() => {\n        if (this.isConnected) {\n          this._syncSelectionFromItems();\n        }\n      });\n\n      return;\n    }\n\n    const items = this._getItems();\n    this._setSelectedItem(this._getSelectedItem(items));\n  }\n\n  private _getSelectedItem(\n    items: FhiSegmentedControlItem[],\n  ): FhiSegmentedControlItem | null {\n    const newlySelectedItem = items.find(\n      item => item.selected && item !== this._selectedItem,\n    );\n\n    const selectedItem = items.find(item => item.selected);\n\n    return newlySelectedItem ?? selectedItem ?? items[0] ?? null;\n  }\n\n  private _getItems(): FhiSegmentedControlItem[] {\n    return Array.from(\n      this.querySelectorAll<FhiSegmentedControlItem>(\n        FhiSegmentedControlItemSelector,\n      ),\n    );\n  }\n\n  private _dispatchChangeEvent() {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the selected item of the segmented control changes.\n     */\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n  }\n\n  private _getItemValue(item: FhiSegmentedControlItem | null): string {\n    return item?.value ?? item?.textContent?.trim() ?? '';\n  }\n\n  private _setSelectedItem(item: FhiSegmentedControlItem | null) {\n    const selectionChanged = this._selectedItem !== item;\n\n    this._getItems().forEach(groupItem => {\n      groupItem.selected = groupItem === item;\n    });\n\n    this._selectedItem = item;\n    this.value = this._getItemValue(item);\n\n    if (selectionChanged) {\n      this._dispatchChangeEvent();\n    }\n  }\n\n  private _syncVariant() {\n    this._getItems().forEach(item => {\n      item.variant = this.variant;\n    });\n  }\n\n  private _handleSlotChange = () => {\n    this._syncSelectionFromItems();\n  };\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    if (\n      event.key !== 'ArrowRight' &&\n      event.key !== 'ArrowUp' &&\n      event.key !== 'ArrowLeft' &&\n      event.key !== 'ArrowDown'\n    ) {\n      return;\n    }\n\n    const items = this._getItems();\n    const eventTravelPath = event.composedPath();\n    const currentIndex = items.findIndex(item =>\n      eventTravelPath.includes(item),\n    );\n\n    const nextIndex =\n      event.key === 'ArrowRight' || event.key === 'ArrowDown'\n        ? (currentIndex + 1) % items.length\n        : (currentIndex - 1 + items.length) % items.length;\n\n    const nextItem = items[nextIndex];\n\n    nextItem.shadowRoot?.querySelector('button')?.focus();\n\n    event.preventDefault();\n  }\n\n  render() {\n    return html`<slot\n      @slotchange=${this._handleSlotChange}\n      @keydown=${this._handleKeyDown}\n    ></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      width: fit-content;\n      border-radius: var(--fhi-border-radius-full);\n      border: 1px solid var(--fhi-color-neutral-border-subtle);\n      padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width));\n      gap: var(--fhi-spacing-050);\n    }\n\n    :host([variant='subtle']) {\n      background-color: var(--fhi-color-neutral-surface-default);\n      border-color: var(--fhi-color-neutral-surface-default);\n    }\n  `;\n}\n"],"mappings":"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"}

package/fhi-segmented-control.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/segmented-control/fhi-segmented-control/fhi-segmented-control.component.ts","declarations":[{"kind":"class","description":"## FHI Segmented Control\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-segmented-control--docs\n\nThe <fhi-segmented-control> component lets the user select one option from a group of related choices. Each choice is defined with a <fhi-segmented-control-item> element.\n\nThe choice should affect the content within the same context.\n\nExample usage:\n```html\n<fhi-segmented-control value=\"item2\">\n  <fhi-segmented-control-item value=\"item1\">Item 1</fhi-segmented-control-item>\n  <fhi-segmented-control-item value=\"item2\">Item 2</fhi-segmented-control-item>\n  <fhi-segmented-control-item value=\"item3\">Item 3</fhi-segmented-control-item>\n</fhi-segmented-control>\n```","name":"FhiSegmentedControl","slots":[{"description":"The default slot. Used for placing <fhi-segmented-control-item> elements.","name":""}],"members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private"},{"kind":"method","name":"_getItems","privacy":"private","return":{"type":{"text":"FhiSegmentedControlItem[]"}}},{"kind":"method","name":"_getItemValue","privacy":"private","return":{"type":{"text":"string"}},"parameters":[{"name":"item","type":{"text":"FhiSegmentedControlItem | null"}}]},{"kind":"method","name":"_getSelectedItem","privacy":"private","return":{"type":{"text":"FhiSegmentedControlItem | null"}},"parameters":[{"name":"items","type":{"text":"FhiSegmentedControlItem[]"}}]},{"kind":"method","name":"_handleKeyDown","privacy":"private","parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"field","name":"_handleSlotChange","privacy":"private"},{"kind":"field","name":"_mutationObserver","privacy":"private","readonly":true,"default":"new MutationObserver(mutations => { const hasItemChanges = mutations.some( mutation => mutation.type !== 'attributes' || mutation.target !== this, ); if (!hasItemChanges) { return; } if (mutations.some(mutation => mutation.type === 'childList')) { this._syncVariant(); } this._syncSelectionFromItems(); })"},{"kind":"field","name":"_selectedItem","type":{"text":"FhiSegmentedControlItem | null"},"privacy":"private","default":"null"},{"kind":"method","name":"_setSelectedItem","privacy":"private","parameters":[{"name":"item","type":{"text":"FhiSegmentedControlItem | null"}}]},{"kind":"method","name":"_syncAfterReconnect","privacy":"private","return":{"type":{"text":"Promise<void>"}}},{"kind":"method","name":"_syncSelectionFromItems","privacy":"private"},{"kind":"method","name":"_syncSelectionFromValue","privacy":"private"},{"kind":"method","name":"_syncVariant","privacy":"private"},{"kind":"field","name":"value","type":{"text":"string"},"description":"The currently selected value of the segmented control.","reflects":true,"attribute":"value"},{"kind":"field","name":"variant","type":{"text":"'strong' | 'subtle'"},"default":"'strong'","description":"The visual style of the segmented control. This will be applied to all segmented control items within the group.","reflects":true,"attribute":"variant"}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the selected item of the segmented control changes."}],"attributes":[{"name":"value","type":{"text":"string"},"description":"The currently selected value of the segmented control.","fieldName":"value"},{"name":"variant","type":{"text":"'strong' | 'subtle'"},"default":"'strong'","description":"The visual style of the segmented control. This will be applied to all segmented control items within the group.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-segmented-control","customElement":true},{"kind":"variable","name":"FhiSegmentedControlSelector","type":{"text":"string"},"default":"'fhi-segmented-control'"}]}

package/fhi-select-item.js

@@ -1,4 +1,4 @@
-import { a as e, o as t, s as n, t as r } from "./decorate-DFXIek-k.js";
+import { a as e, o as t, s as n, t as r } from "./decorate-Cy1UktZk.js";
 //#region src/components/select/fhi-select-item/fhi-select-item.component.ts
 var i = "fhi-select-item", a = class extends n {
 	constructor(...e) {

package/fhi-select.js

@@ -1,4 +1,4 @@
-import { a as e, d as t, n, o as r, r as i, s as a, t as o, u as s } from "./decorate-DFXIek-k.js";
+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 "./fhi-body.js";
 import "./fhi-label.js";
 import "./fhi-icon-chevron-down.js";

package/fhi-tag.js

@@ -1,4 +1,4 @@
-import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
+import { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
 import "./fhi-body.js";
 //#region src/components/fhi-tag/fhi-tag.component.ts
 var o = "fhi-tag", s = class extends r {

package/fhi-text-area.js

@@ -1,5 +1,5 @@
-import { a as e, d as t, o as n, r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
-import { t as s } from "./if-defined-Dl-W5B5_.js";
+import { a as e, f as t, o as n, r, s as i, t as a, u as o } from "./decorate-Cy1UktZk.js";
+import { t as s } from "./if-defined-Bwi1u9Ry.js";
 import "./fhi-body.js";
 import "./fhi-label.js";
 //#region src/components/fhi-text-area/fhi-text-area.component.ts

package/fhi-text-input.js

@@ -1,5 +1,5 @@
-import { a as e, d as t, o as n, r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
-import { t as s } from "./if-defined-Dl-W5B5_.js";
+import { a as e, f as t, o as n, r, s as i, t as a, u as o } from "./decorate-Cy1UktZk.js";
+import { t as s } from "./if-defined-Bwi1u9Ry.js";
 //#region src/components/fhi-text-input/fhi-text-input.component.ts
 var c = "fhi-text-input", l = class extends i {
 	static {

package/fhi-title.js

@@ -1,6 +1,6 @@
-import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
-import { t as o } from "./if-defined-Dl-W5B5_.js";
-import { t as s } from "./unsafe-html-CBTN3162.js";
+import { a as e, f as t, o as n, s as r, t as i, u as a } from "./decorate-Cy1UktZk.js";
+import { t as o } from "./if-defined-Bwi1u9Ry.js";
+import { t as s } from "./unsafe-html-Bl-zY61x.js";
 //#region src/components/typography/fhi-title/fhi-title.component.ts
 var c = "fhi-title", l = class extends r {
 	constructor(...e) {

package/{fhi-tooltip.component-O9cZeuTN.js → fhi-tooltip.component-CyNQ5alT.js}

@@ -1,4 +1,4 @@
-import { a as e, d as t, i as n, o as r, r as i, s as a, t as o, u as s } from "./decorate-DFXIek-k.js";
+import { a as e, f as t, i as n, o as r, r as i, s as a, t as o, u as s } from "./decorate-Cy1UktZk.js";
 //#region ../../node_modules/.pnpm/@floating-ui+utils@0.2.12/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var c = Math.min, l = Math.max, u = Math.round, d = Math.floor, f = (e) => ({
 	x: e,
@@ -878,4 +878,4 @@ o([e({ type: String })], $.prototype, "message", void 0), o([e({ type: String })
 //#endregion
 export { Ye as n, $ as t };
 
-//# sourceMappingURL=fhi-tooltip.component-O9cZeuTN.js.map
+//# sourceMappingURL=fhi-tooltip.component-CyNQ5alT.js.map