@folkehelseinstituttet/designsystem 0.45.4 → 0.47.0

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 (15) hide show
  1. package/custom-elements.json +1 -1
  2. package/fhi-body.js +32 -4
  3. package/fhi-body.js.map +1 -1
  4. package/fhi-body.manifest.json +1 -1
  5. package/fhi-segmented-control-item.d.ts +1 -0
  6. package/fhi-segmented-control-item.js +114 -0
  7. package/fhi-segmented-control-item.js.map +1 -0
  8. package/fhi-segmented-control-item.manifest.json +1 -0
  9. package/fhi-segmented-control.d.ts +1 -0
  10. package/fhi-segmented-control.js +119 -0
  11. package/fhi-segmented-control.js.map +1 -0
  12. package/fhi-segmented-control.manifest.json +1 -0
  13. package/index.js +6 -4
  14. package/package.json +1 -1
  15. package/web-types.json +124 -1
package/fhi-body.js CHANGED
@@ -1,17 +1,22 @@
1
1
  import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
2
2
  import { t as o } from "./if-defined-Dl-W5B5_.js";
3
+ import { t as s } from "./unsafe-html-CBTN3162.js";
3
4
  //#region src/components/typography/fhi-body/fhi-body.component.ts
4
- var s = "fhi-body", c = class extends r {
5
+ var c = "fhi-body", l = class extends r {
5
6
  constructor(...e) {
6
7
  super(...e), this.size = "medium";
7
8
  }
9
+ renderContent() {
10
+ let e = [];
11
+ return this.strong && e.push("strong"), this.emphasized && e.push("em"), s(e.reduceRight((e, t) => `<${t}>${e}</${t}>`, "<slot></slot>"));
12
+ }
8
13
  render() {
9
14
  return a`
10
15
  <span
11
16
  class="body"
12
17
  style=${o(this.color ? `color: ${this.color}` : void 0)}
13
18
  >
14
- <slot></slot>
19
+ ${this.renderContent()}
15
20
  </span>
16
21
  `;
17
22
  }
@@ -32,6 +37,10 @@ var s = "fhi-body", c = class extends r {
32
37
  -webkit-font-smoothing: antialiased;
33
38
  margin: 0;
34
39
  }
40
+
41
+ ::slotted(fhi-body) {
42
+ display: inline;
43
+ }
35
44
  }
36
45
 
37
46
  :host([size='large']) {
@@ -60,14 +69,33 @@ var s = "fhi-body", c = class extends r {
60
69
  letter-spacing: var(--fhi-typography-body-small-letter-spacing);
61
70
  }
62
71
  }
72
+
73
+ :host([strong]) {
74
+ .body strong {
75
+ font-weight: var(--fhi-font-weight-bold);
76
+ }
77
+ }
78
+
79
+ :host([emphasized]) {
80
+ .body em {
81
+ font-style: unset;
82
+ font-variation-settings: 'slnt' -8;
83
+ }
84
+ }
63
85
  `;
64
86
  }
65
87
  };
66
88
  i([e({
67
89
  type: String,
68
90
  reflect: !0
69
- })], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), c = i([n(s)], c);
91
+ })], l.prototype, "size", void 0), i([e({ type: String })], l.prototype, "color", void 0), i([e({
92
+ type: Boolean,
93
+ reflect: !0
94
+ })], l.prototype, "strong", void 0), i([e({
95
+ type: Boolean,
96
+ reflect: !0
97
+ })], l.prototype, "emphasized", void 0), l = i([n(c)], l);
70
98
  //#endregion
71
- export { c as FhiBody, s as FhiBodySelector };
99
+ export { l as FhiBody, c as FhiBodySelector };
72
100
 
73
101
  //# sourceMappingURL=fhi-body.js.map
package/fhi-body.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"fhi-body.js","names":[],"sources":["../../src/components/typography/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nexport const FhiBodySelector = 'fhi-body';\n\n/**\n * ## FHI Body\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview}\n *\n * The `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n *\n * @tag fhi-body\n * @element fhi-body\n *\n * @slot - The content of the fhi-body component. This should be pure text.\n */\n@customElement(FhiBodySelector)\nexport class FhiBody extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-body>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n render() {\n return html`\n <span\n class=\"body\"\n style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}\n >\n <slot></slot>\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-body-color: unset;\n }\n\n :host {\n --fhi-body-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-body-color);\n .body {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n }\n\n :host([size='large']) {\n .body {\n font-size: var(--fhi-typography-body-large-font-size);\n font-weight: var(--fhi-typography-body-large-font-weight);\n line-height: var(--fhi-typography-body-large-line-height);\n letter-spacing: var(--fhi-typography-body-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .body {\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .body {\n font-size: var(--fhi-typography-body-small-font-size);\n font-weight: var(--fhi-typography-body-small-font-weight);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n }\n `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAkB,YAgBxB,IAAA,cAAsB,EAAW;;2BASxB;;CAmBd,SAAS;EACP,OAAO,CAAI;;;gBAGC,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;;;;;CAKzE;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CrB;GA9EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UA3B3B,EAAc,CAAe,CAAA,GAAA,CAAA"}
1
+ {"version":3,"file":"fhi-body.js","names":[],"sources":["../../src/components/typography/fhi-body/fhi-body.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiBodySelector = 'fhi-body';\n\n/**\n * ## FHI Body\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview}\n *\n * The `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.\n *\n * @tag fhi-body\n * @element fhi-body\n *\n * @slot - The content of the fhi-body component. This should be pure text.\n */\n@customElement(FhiBodySelector)\nexport class FhiBody extends LitElement {\n /**\n * Sets the font size of the given text.\n * @reflect\n * @type {'large' | 'medium' | 'small'}\n */\n @property({ type: String, reflect: true }) size:\n | 'large'\n | 'medium'\n | 'small' = 'medium';\n\n /**\n * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n *\n * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n *\n * Example:\n * ```html\n * <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n * This text will be in the primary text color.\n * </fhi-body>\n * ```\n *\n * @type {string}\n */\n @property({ type: String }) color?: string;\n\n /**\n * Sets the text to be bold and semantically important.\n *\n * Example:\n * \n * </fhi-body>\n * ```\n *\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) strong?: boolean;\n\n /**\n * Sets the text to be in italics and semantically emphasized.\n *\n * Example:\n * \n * </fhi-body>\n * ```\n *\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) emphasized?: boolean;\n\n private renderContent() {\n const tags: string[] = [];\n\n if (this.strong) {\n tags.push('strong');\n }\n\n if (this.emphasized) {\n tags.push('em');\n }\n\n return unsafeHTML(\n tags.reduceRight(\n (accumulation, tag) => `<${tag}>${accumulation}</${tag}>`,\n `<slot></slot>`,\n ),\n );\n }\n\n render() {\n return html`\n <span\n class=\"body\"\n style=${ifDefined(this.color ? `color: ${this.color}` : undefined)}\n >\n ${this.renderContent()}\n </span>\n `;\n }\n\n static styles = css`\n :host {\n --fhi-body-color: unset;\n }\n\n :host {\n --fhi-body-color: currentcolor;\n\n display: block;\n contain: layout;\n color: var(--fhi-body-color);\n .body {\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n margin: 0;\n }\n\n ::slotted(fhi-body) {\n display: inline;\n }\n }\n\n :host([size='large']) {\n .body {\n font-size: var(--fhi-typography-body-large-font-size);\n font-weight: var(--fhi-typography-body-large-font-weight);\n line-height: var(--fhi-typography-body-large-line-height);\n letter-spacing: var(--fhi-typography-body-large-letter-spacing);\n }\n }\n\n :host([size='medium']) {\n .body {\n font-size: var(--fhi-typography-body-medium-font-size);\n font-weight: var(--fhi-typography-body-medium-font-weight);\n line-height: var(--fhi-typography-body-medium-line-height);\n letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n }\n }\n\n :host([size='small']) {\n .body {\n font-size: var(--fhi-typography-body-small-font-size);\n font-weight: var(--fhi-typography-body-small-font-weight);\n line-height: var(--fhi-typography-body-small-line-height);\n letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n }\n }\n\n :host([strong]) {\n .body strong {\n font-weight: var(--fhi-font-weight-bold);\n }\n }\n\n :host([emphasized]) {\n .body em {\n font-style: unset;\n font-variation-settings: 'slnt' -8;\n }\n }\n `;\n}\n"],"mappings":";;;;AAKA,IAAa,IAAkB,YAgBxB,IAAA,cAAsB,EAAW;;2BASxB;;CA2Cd,gBAAwB;EACtB,IAAM,IAAiB,CAAC;EAUxB,OARI,KAAK,UACP,EAAK,KAAK,QAAQ,GAGhB,KAAK,cACP,EAAK,KAAK,IAAI,GAGT,EACL,EAAK,aACF,GAAc,MAAQ,IAAI,EAAI,GAAG,EAAa,IAAI,EAAI,IACvD,eACF,CACF;CACF;CAEA,SAAS;EACP,OAAO,CAAI;;;gBAGC,EAAU,KAAK,QAAQ,UAAU,KAAK,UAAU,KAAA,CAAS,EAAE;;UAEjE,KAAK,cAAc,EAAE;;;CAG7B;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DrB;GA1IG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAYzB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAYzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,UAnD3C,EAAc,CAAe,CAAA,GAAA,CAAA"}
package/fhi-body.manifest.json CHANGED
@@ -1 +1 @@
1
- {"kind":"javascript-module","path":"src/components/typography/fhi-body/fhi-body.component.ts","declarations":[{"kind":"class","description":"## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.","name":"FhiBody","slots":[{"description":"The content of the fhi-body component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-body>\n```","attribute":"color"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-body>\n```","fieldName":"color"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-body","customElement":true},{"kind":"variable","name":"FhiBodySelector","type":{"text":"string"},"default":"'fhi-body'"}]}
1
+ {"kind":"javascript-module","path":"src/components/typography/fhi-body/fhi-body.component.ts","declarations":[{"kind":"class","description":"## FHI Body\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-body--preview\n\nThe `<fhi-body>` component is used to display body text in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML paragraph element, `<p>`, to ensure consistent styling across your application.","name":"FhiBody","slots":[{"description":"The content of the fhi-body component. This should be pure text.","name":""}],"members":[{"kind":"field","name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-body>\n```","attribute":"color"},{"kind":"field","name":"emphasized","type":{"text":"boolean"},"description":"Sets the text to be in italics and semantically emphasized.\n\nExample:\n\n </fhi-body>\n```","attribute":"emphasized","reflects":true},{"kind":"method","name":"renderContent","privacy":"private"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","reflects":true,"attribute":"size"},{"kind":"field","name":"strong","type":{"text":"boolean"},"description":"Sets the text to be bold and semantically important.\n\nExample:\n\n </fhi-body>\n```","attribute":"strong","reflects":true}],"attributes":[{"name":"color","type":{"text":"string"},"description":"Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n\nIt is recommended to use Design Tokens for colors defined in the FHI Design System.\nSee: https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs\n\nExample:\n```html\n <fhi-body color=\"var(--fhi-color-primary-text-default)\">\n This text will be in the primary text color.\n </fhi-body>\n```","fieldName":"color"},{"name":"emphasized","type":{"text":"boolean"},"description":"Sets the text to be in italics and semantically emphasized.\n\nExample:\n\n </fhi-body>\n```","fieldName":"emphasized"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the font size of the given text.","fieldName":"size"},{"name":"strong","type":{"text":"boolean"},"description":"Sets the text to be bold and semantically important.\n\nExample:\n\n </fhi-body>\n```","fieldName":"strong"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-body","customElement":true},{"kind":"variable","name":"FhiBodySelector","type":{"text":"string"},"default":"'fhi-body'"}]}
package/fhi-segmented-control-item.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/fhi-segmented-control-item.js ADDED
@@ -0,0 +1,114 @@
1
+ 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";
2
+ //#region src/components/segmented-control/fhi-segmented-control-item/fhi-segmented-control-item.component.ts
3
+ var c = "fhi-segmented-control-item", l = class extends a {
4
+ constructor(...e) {
5
+ super(...e), this.variant = "strong", this.selected = !1, this.value = null;
6
+ }
7
+ click() {
8
+ this.shadowRoot?.querySelector("button")?.click();
9
+ }
10
+ _handleClick() {
11
+ this.selected = !0;
12
+ }
13
+ handleSlotChange() {
14
+ !this.contentSlot.assignedNodes().some((e) => e.nodeType !== Node.TEXT_NODE || e.textContent?.trim() !== "") && this.iconSlotElements.length !== 0 && console.warn(`${c} cannot have an icon without also having text content.`);
15
+ }
16
+ render() {
17
+ return s`
18
+ <button
19
+ type="button"
20
+ aria-checked=${this.selected ? "true" : "false"}
21
+ tabindex=${this.selected ? "0" : "-1"}
22
+ @click=${this._handleClick}
23
+ role="radio"
24
+ >
25
+ <slot name="icon" @slotchange=${this.handleSlotChange}></slot>
26
+ <slot class="content" @slotchange=${this.handleSlotChange}></slot>
27
+ </button>
28
+ `;
29
+ }
30
+ static {
31
+ this.styles = t`
32
+ button {
33
+ display: inline-flex;
34
+ gap: var(--fhi-spacing-050);
35
+ align-items: center;
36
+ justify-content: center;
37
+ border-radius: var(--fhi-border-radius-full);
38
+ border: solid var(--fhi-dimension-border-width) transparent;
39
+ font-family: var(--fhi-font-family-default);
40
+ -webkit-font-smoothing: antialiased;
41
+ transition:
42
+ background-color var(--fhi-motion-duration-quick)
43
+ var(--fhi-motion-ease-default),
44
+ border-color var(--fhi-motion-duration-quick)
45
+ var(--fhi-motion-ease-default),
46
+ color var(--fhi-motion-duration-quick) var(--fhi-motion-ease-default);
47
+ cursor: pointer;
48
+ background-color: transparent;
49
+
50
+ font-size: var(--fhi-typography-label-medium-font-size);
51
+ font-weight: var(--fhi-typography-label-medium-font-weight);
52
+ line-height: var(--fhi-typography-label-medium-line-height);
53
+ letter-spacing: var(--fhi-typography-label-medium-letter-spacing);
54
+ text-wrap: nowrap;
55
+ padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))
56
+ calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));
57
+ color: var(--fhi-color-neutral-text-subtle);
58
+ }
59
+
60
+ .content {
61
+ display: inline;
62
+ margin: 0 var(--fhi-spacing-050);
63
+ }
64
+
65
+ :host([variant='strong']) button {
66
+ &:hover {
67
+ background-color: var(--fhi-color-neutral-surface-default);
68
+ color: var(--fhi-color-neutral-text-default);
69
+ }
70
+ &:active {
71
+ background-color: var(--fhi-color-neutral-surface-hover);
72
+ color: var(--fhi-color-neutral-text-default);
73
+ }
74
+ }
75
+
76
+ :host([variant='strong'][selected]) button {
77
+ background-color: var(--fhi-color-neutral-base-default);
78
+ color: var(--fhi-color-neutral-text-inverted);
79
+ }
80
+
81
+ :host([variant='subtle']) button {
82
+ &:hover {
83
+ background-color: var(--fhi-color-neutral-surface-hover);
84
+ color: var(--fhi-color-neutral-text-default);
85
+ }
86
+
87
+ &:active {
88
+ background-color: var(--fhi-color-neutral-surface-active);
89
+ color: var(--fhi-color-neutral-text-default);
90
+ }
91
+ }
92
+
93
+ :host([variant='subtle'][selected]) button {
94
+ background-color: var(--fhi-color-neutral-background-default);
95
+ border-color: var(--fhi-color-neutral-border-default);
96
+ color: var(--fhi-color-neutral-text-default);
97
+ }
98
+ `;
99
+ }
100
+ };
101
+ o([e({
102
+ type: String,
103
+ reflect: !0
104
+ })], l.prototype, "variant", void 0), o([e({
105
+ type: Boolean,
106
+ reflect: !0
107
+ })], l.prototype, "selected", void 0), o([e({
108
+ type: String,
109
+ reflect: !0
110
+ })], l.prototype, "value", void 0), o([n({ slot: "icon" })], l.prototype, "iconSlotElements", void 0), o([i("slot.content")], l.prototype, "contentSlot", void 0), l = o([r(c)], l);
111
+ //#endregion
112
+ export { l as FhiSegmentedControlItem, c as FhiSegmentedControlItemSelector };
113
+
114
+ //# sourceMappingURL=fhi-segmented-control-item.js.map
package/fhi-segmented-control-item.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"fhi-segmented-control-item.js","names":[],"sources":["../../src/components/segmented-control/fhi-segmented-control-item/fhi-segmented-control-item.component.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport {\n customElement,\n property,\n queryAssignedElements,\n query,\n} from 'lit/decorators.js';\n\nexport const FhiSegmentedControlItemSelector = 'fhi-segmented-control-item';\n\n/**\n * ## FHI Segmented Control Item\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-segmented-control--docs}\n *\n * The <fhi-segmented-control-item> component represents an individual choice within a <fhi-segmented-control>. It can display text content with or without an icon.\n *\n *\n * @tag fhi-segmented-control-item\n * @element fhi-segmented-control-item\n *\n * @slot icon - Slot for placing an icon.\n * @slot - The default slot. Used for placing the text content.\n */\n@customElement(FhiSegmentedControlItemSelector)\nexport class FhiSegmentedControlItem extends LitElement {\n /**\n * Sets the segmented control item's visual style and emphasis. This is automatically inherited from the parent segmented control.\n *\n * @reflect\n * @type {'strong' | 'subtle'}\n */\n @property({ type: String, reflect: true }) variant: 'strong' | 'subtle' =\n 'strong';\n\n /**\n * Whether the segmented control button is selected or not.\n *\n * @reflect\n * @type {boolean}\n */\n @property({ type: Boolean, reflect: true }) selected? = false;\n\n /**\n * The value of the segmented control item.\n * If not specified, the value will be derived from the items text content.\n *\n * @reflect\n * @type {string | null}\n */\n @property({ type: String, reflect: true }) value: string | null = null;\n\n public override click(): void {\n this.shadowRoot?.querySelector('button')?.click();\n }\n\n private _handleClick(): void {\n this.selected = true;\n }\n\n @queryAssignedElements({ slot: 'icon' })\n iconSlotElements!: Array<HTMLElement>;\n\n @query('slot.content')\n contentSlot!: HTMLSlotElement;\n\n private handleSlotChange(): void {\n const hasContentNodes = this.contentSlot\n .assignedNodes()\n .some(\n node =>\n node.nodeType !== Node.TEXT_NODE || node.textContent?.trim() !== '',\n );\n\n if (!hasContentNodes && this.iconSlotElements.length !== 0) {\n console.warn(\n `${FhiSegmentedControlItemSelector} cannot have an icon without also having text content.`,\n );\n }\n }\n\n render() {\n return html`\n <button\n type=\"button\"\n aria-checked=${this.selected ? 'true' : 'false'}\n tabindex=${this.selected ? '0' : '-1'}\n @click=${this._handleClick}\n role=\"radio\"\n >\n <slot name=\"icon\" @slotchange=${this.handleSlotChange}></slot>\n <slot class=\"content\" @slotchange=${this.handleSlotChange}></slot>\n </button>\n `;\n }\n\n static styles = css`\n button {\n display: inline-flex;\n gap: var(--fhi-spacing-050);\n align-items: center;\n justify-content: center;\n border-radius: var(--fhi-border-radius-full);\n border: solid var(--fhi-dimension-border-width) transparent;\n font-family: var(--fhi-font-family-default);\n -webkit-font-smoothing: antialiased;\n transition:\n background-color var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default),\n border-color var(--fhi-motion-duration-quick)\n var(--fhi-motion-ease-default),\n color var(--fhi-motion-duration-quick) var(--fhi-motion-ease-default);\n cursor: pointer;\n background-color: transparent;\n\n font-size: var(--fhi-typography-label-medium-font-size);\n font-weight: var(--fhi-typography-label-medium-font-weight);\n line-height: var(--fhi-typography-label-medium-line-height);\n letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n text-wrap: nowrap;\n padding: calc(var(--fhi-spacing-100) - var(--fhi-dimension-border-width))\n calc(var(--fhi-spacing-150) - var(--fhi-dimension-border-width));\n color: var(--fhi-color-neutral-text-subtle);\n }\n\n .content {\n display: inline;\n margin: 0 var(--fhi-spacing-050);\n }\n\n :host([variant='strong']) button {\n &:hover {\n background-color: var(--fhi-color-neutral-surface-default);\n color: var(--fhi-color-neutral-text-default);\n }\n &:active {\n background-color: var(--fhi-color-neutral-surface-hover);\n color: var(--fhi-color-neutral-text-default);\n }\n }\n\n :host([variant='strong'][selected]) button {\n background-color: var(--fhi-color-neutral-base-default);\n color: var(--fhi-color-neutral-text-inverted);\n }\n\n :host([variant='subtle']) button {\n &:hover {\n background-color: var(--fhi-color-neutral-surface-hover);\n color: var(--fhi-color-neutral-text-default);\n }\n\n &:active {\n background-color: var(--fhi-color-neutral-surface-active);\n color: var(--fhi-color-neutral-text-default);\n }\n }\n\n :host([variant='subtle'][selected]) button {\n background-color: var(--fhi-color-neutral-background-default);\n border-color: var(--fhi-color-neutral-border-default);\n color: var(--fhi-color-neutral-text-default);\n }\n `;\n}\n"],"mappings":";;AAQA,IAAa,IAAkC,8BAiBxC,IAAA,cAAsC,EAAW;;8BAQpD,0BAQsD,iBASU;;CAElE,QAA8B;EAC5B,KAAK,YAAY,cAAc,QAAQ,GAAG,MAAM;CAClD;CAEA,eAA6B;EAC3B,KAAK,WAAW;CAClB;CAQA,mBAAiC;EAQ/B,AAAI,CAPoB,KAAK,YAC1B,cAAc,EACd,MACC,MACE,EAAK,aAAa,KAAK,aAAa,EAAK,aAAa,KAAK,MAAM,EAGlE,KAAmB,KAAK,iBAAiB,WAAW,KACvD,QAAQ,KACN,GAAG,EAAgC,uDACrC;CAEJ;CAEA,SAAS;EACP,OAAO,CAAI;;;uBAGQ,KAAK,WAAW,SAAS,QAAQ;mBACrC,KAAK,WAAW,MAAM,KAAK;iBAC7B,KAAK,aAAa;;;wCAGK,KAAK,iBAAiB;4CAClB,KAAK,iBAAiB;;;CAGhE;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoErB;GApIG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MASxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MASzC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAUxC,EAAsB,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,oBAAA,KAAA,CAAA,MAGtC,EAAM,cAAc,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,UAvCtB,EAAc,CAA+B,CAAA,GAAA,CAAA"}
package/fhi-segmented-control-item.manifest.json ADDED
@@ -0,0 +1 @@
1
+ {"kind":"javascript-module","path":"src/components/segmented-control/fhi-segmented-control-item/fhi-segmented-control-item.component.ts","declarations":[{"kind":"class","description":"## FHI Segmented Control Item\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-segmented-control--docs\n\nThe <fhi-segmented-control-item> component represents an individual choice within a <fhi-segmented-control>. It can display text content with or without an icon.","name":"FhiSegmentedControlItem","slots":[{"description":"The default slot. Used for placing the text content.","name":""},{"description":"Slot for placing an icon.","name":"icon"}],"members":[{"kind":"method","name":"_handleClick","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"click","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"field","name":"contentSlot","type":{"text":"HTMLSlotElement"}},{"kind":"method","name":"handleSlotChange","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"iconSlotElements","type":{"text":"Array<HTMLElement>"}},{"kind":"field","name":"selected","type":{"text":"boolean"},"default":"false","description":"Whether the segmented control button is selected or not.","reflects":true,"attribute":"selected"},{"kind":"field","name":"value","type":{"text":"string | null"},"default":"null","description":"The value of the segmented control item.\nIf not specified, the value will be derived from the items text content.","reflects":true,"attribute":"value"},{"kind":"field","name":"variant","type":{"text":"'strong' | 'subtle'"},"default":"'strong'","description":"Sets the segmented control item's visual style and emphasis. This is automatically inherited from the parent segmented control.","reflects":true,"attribute":"variant"}],"attributes":[{"name":"selected","type":{"text":"boolean"},"default":"false","description":"Whether the segmented control button is selected or not.","fieldName":"selected"},{"name":"value","type":{"text":"string | null"},"default":"null","description":"The value of the segmented control item.\nIf not specified, the value will be derived from the items text content.","fieldName":"value"},{"name":"variant","type":{"text":"'strong' | 'subtle'"},"default":"'strong'","description":"Sets the segmented control item's visual style and emphasis. This is automatically inherited from the parent segmented control.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-segmented-control-item","customElement":true},{"kind":"variable","name":"FhiSegmentedControlItemSelector","type":{"text":"string"},"default":"'fhi-segmented-control-item'"}]}
package/fhi-segmented-control.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/fhi-segmented-control.js ADDED
@@ -0,0 +1,119 @@
1
+ import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
2
+ import { FhiSegmentedControlItemSelector as o } from "./fhi-segmented-control-item.js";
3
+ //#region src/components/segmented-control/fhi-segmented-control/fhi-segmented-control.component.ts
4
+ var s = "fhi-segmented-control", c = class extends r {
5
+ constructor(...e) {
6
+ super(...e), this.variant = "strong", this._selectedItem = null, this._mutationObserver = new MutationObserver((e) => {
7
+ e.some((e) => e.type !== "attributes" || e.target !== this) && (e.some((e) => e.type === "childList") && this._syncVariant(), this._syncSelectionFromItems());
8
+ }), this._handleSlotChange = () => {
9
+ this._syncSelectionFromItems();
10
+ };
11
+ }
12
+ connectedCallback() {
13
+ super.connectedCallback(), this.setAttribute("role", "radiogroup"), this._mutationObserver.observe(this, {
14
+ attributes: !0,
15
+ attributeFilter: ["selected", "value"],
16
+ childList: !0,
17
+ characterData: !0,
18
+ subtree: !0
19
+ }), this.hasUpdated && this._syncAfterReconnect();
20
+ }
21
+ disconnectedCallback() {
22
+ super.disconnectedCallback(), this._mutationObserver.disconnect();
23
+ }
24
+ update(e) {
25
+ e.has("variant") && !this.variant && (this.variant = "strong"), super.update(e);
26
+ }
27
+ updated(e) {
28
+ e.has("variant") && this._syncVariant(), e.has("value") && this._syncSelectionFromValue();
29
+ }
30
+ async _syncAfterReconnect() {
31
+ await this.updateComplete, this.isConnected && (this._syncVariant(), this._syncSelectionFromItems());
32
+ }
33
+ _syncSelectionFromValue() {
34
+ let e = this._getItems(), t = this._getSelectedItem(e);
35
+ if (t && this._getItemValue(t) === this.value) {
36
+ this._setSelectedItem(t);
37
+ return;
38
+ }
39
+ let n = e.find((e) => this._getItemValue(e) === this.value);
40
+ this._setSelectedItem(n ?? t);
41
+ }
42
+ _syncSelectionFromItems() {
43
+ if (this.isUpdatePending) {
44
+ this.updateComplete.then(() => {
45
+ this.isConnected && this._syncSelectionFromItems();
46
+ });
47
+ return;
48
+ }
49
+ let e = this._getItems();
50
+ this._setSelectedItem(this._getSelectedItem(e));
51
+ }
52
+ _getSelectedItem(e) {
53
+ let t = e.find((e) => e.selected && e !== this._selectedItem), n = e.find((e) => e.selected);
54
+ return t ?? n ?? e[0] ?? null;
55
+ }
56
+ _getItems() {
57
+ return Array.from(this.querySelectorAll(o));
58
+ }
59
+ _dispatchChangeEvent() {
60
+ this.dispatchEvent(new Event("change", {
61
+ bubbles: !0,
62
+ composed: !0
63
+ }));
64
+ }
65
+ _getItemValue(e) {
66
+ return e?.value ?? e?.textContent?.trim() ?? "";
67
+ }
68
+ _setSelectedItem(e) {
69
+ let t = this._selectedItem !== e;
70
+ this._getItems().forEach((t) => {
71
+ t.selected = t === e;
72
+ }), this._selectedItem = e, this.value = this._getItemValue(e), t && this._dispatchChangeEvent();
73
+ }
74
+ _syncVariant() {
75
+ this._getItems().forEach((e) => {
76
+ e.variant = this.variant;
77
+ });
78
+ }
79
+ _handleKeyDown(e) {
80
+ if (e.key !== "ArrowRight" && e.key !== "ArrowUp" && e.key !== "ArrowLeft" && e.key !== "ArrowDown") return;
81
+ let t = this._getItems(), n = e.composedPath(), r = t.findIndex((e) => n.includes(e));
82
+ t[e.key === "ArrowRight" || e.key === "ArrowDown" ? (r + 1) % t.length : (r - 1 + t.length) % t.length].shadowRoot?.querySelector("button")?.focus(), e.preventDefault();
83
+ }
84
+ render() {
85
+ return a`<slot
86
+ @slotchange=${this._handleSlotChange}
87
+ @keydown=${this._handleKeyDown}
88
+ ></slot>`;
89
+ }
90
+ static {
91
+ this.styles = t`
92
+ :host {
93
+ display: inline-flex;
94
+ align-items: center;
95
+ width: fit-content;
96
+ border-radius: var(--fhi-border-radius-full);
97
+ border: 1px solid var(--fhi-color-neutral-border-subtle);
98
+ padding: calc(var(--fhi-spacing-050) - var(--fhi-dimension-border-width));
99
+ gap: var(--fhi-spacing-050);
100
+ }
101
+
102
+ :host([variant='subtle']) {
103
+ background-color: var(--fhi-color-neutral-surface-default);
104
+ border-color: var(--fhi-color-neutral-surface-default);
105
+ }
106
+ `;
107
+ }
108
+ };
109
+ i([e({
110
+ type: String,
111
+ reflect: !0
112
+ })], c.prototype, "variant", void 0), i([e({
113
+ type: String,
114
+ reflect: !0
115
+ })], c.prototype, "value", void 0), c = i([n(s)], c);
116
+ //#endregion
117
+ export { c as FhiSegmentedControl, s as FhiSegmentedControlSelector };
118
+
119
+ //# sourceMappingURL=fhi-segmented-control.js.map
package/fhi-segmented-control.js.map ADDED
@@ -0,0 +1 @@
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":";;;AAOA,IAAa,IAA8B,yBA0BpC,IAAA,cAAkC,EAAW;;8BAQhD,+BAUsD,+BAEnB,IAAI,kBAAiB,MAAa;GAC9C,EAAU,MAC/B,MAAY,EAAS,SAAS,gBAAgB,EAAS,WAAW,IAG/D,MAID,EAAU,MAAK,MAAY,EAAS,SAAS,WAAW,KAC1D,KAAK,aAAa,GAGpB,KAAK,wBAAwB;EAC/B,CAAC,kCA2IiC;GAChC,KAAK,wBAAwB;EAC/B;;CA3IA,oBAA2B;EAazB,AAZA,MAAM,kBAAkB,GAExB,KAAK,aAAa,QAAQ,YAAY,GAEtC,KAAK,kBAAkB,QAAQ,MAAM;GACnC,YAAY;GACZ,iBAAiB,CAAC,YAAY,OAAO;GACrC,WAAW;GACX,eAAe;GACf,SAAS;EACX,CAAC,GAEG,KAAK,cACP,KAAK,oBAAoB;CAE7B;CAEA,uBAA8B;EAE5B,AADA,MAAM,qBAAqB,GAC3B,KAAK,kBAAkB,WAAW;CACpC;CAEA,OAAiB,GAAyC;EAKxD,AAJI,EAAkB,IAAI,SAAS,KAAK,CAAC,KAAK,YAC5C,KAAK,UAAU,WAGjB,MAAM,OAAO,CAAiB;CAChC;CAEA,QAAe,GAAmC;EAKhD,AAJI,EAAkB,IAAI,SAAS,KACjC,KAAK,aAAa,GAGhB,EAAkB,IAAI,OAAO,KAC/B,KAAK,wBAAwB;CAEjC;CAEA,MAAc,sBAAqC;EACjD,MAAM,KAAK,gBAEN,KAAK,gBAIV,KAAK,aAAa,GAClB,KAAK,wBAAwB;CAC/B;CAEA,0BAAkC;EAChC,IAAM,IAAQ,KAAK,UAAU,GACvB,IAAe,KAAK,iBAAiB,CAAK;EAEhD,IAAI,KAAgB,KAAK,cAAc,CAAY,MAAM,KAAK,OAAO;GACnE,KAAK,iBAAiB,CAAY;GAClC;EACF;EAEA,IAAM,IAAoB,EAAM,MAC9B,MAAQ,KAAK,cAAc,CAAI,MAAM,KAAK,KAC5C;EAEA,KAAK,iBAAiB,KAAqB,CAAY;CACzD;CAEA,0BAAkC;EAEhC,IAAI,KAAK,iBAAiB;GACxB,KAAU,eAAe,WAAW;IAClC,AAAI,KAAK,eACP,KAAK,wBAAwB;GAEjC,CAAC;GAED;EACF;EAEA,IAAM,IAAQ,KAAK,UAAU;EAC7B,KAAK,iBAAiB,KAAK,iBAAiB,CAAK,CAAC;CACpD;CAEA,iBACE,GACgC;EAChC,IAAM,IAAoB,EAAM,MAC9B,MAAQ,EAAK,YAAY,MAAS,KAAK,aACzC,GAEM,IAAe,EAAM,MAAK,MAAQ,EAAK,QAAQ;EAErD,OAAO,KAAqB,KAAgB,EAAM,MAAM;CAC1D;CAEA,YAA+C;EAC7C,OAAO,MAAM,KACX,KAAK,iBACH,CACF,CACF;CACF;CAEA,uBAA+B;EAK7B,KAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAC3E;CAEA,cAAsB,GAA8C;EAClE,OAAO,GAAM,SAAS,GAAM,aAAa,KAAK,KAAK;CACrD;CAEA,iBAAyB,GAAsC;EAC7D,IAAM,IAAmB,KAAK,kBAAkB;EAShD,AAPA,KAAK,UAAU,EAAE,SAAQ,MAAa;GACpC,EAAU,WAAW,MAAc;EACrC,CAAC,GAED,KAAK,gBAAgB,GACrB,KAAK,QAAQ,KAAK,cAAc,CAAI,GAEhC,KACF,KAAK,qBAAqB;CAE9B;CAEA,eAAuB;EACrB,KAAK,UAAU,EAAE,SAAQ,MAAQ;GAC/B,EAAK,UAAU,KAAK;EACtB,CAAC;CACH;CAMA,eAAuB,GAAsB;EAC3C,IACE,EAAM,QAAQ,gBACd,EAAM,QAAQ,aACd,EAAM,QAAQ,eACd,EAAM,QAAQ,aAEd;EAGF,IAAM,IAAQ,KAAK,UAAU,GACvB,IAAkB,EAAM,aAAa,GACrC,IAAe,EAAM,WAAU,MACnC,EAAgB,SAAS,CAAI,CAC/B;EAWA,AAFA,EANE,EAAM,QAAQ,gBAAgB,EAAM,QAAQ,eACvC,IAAe,KAAK,EAAM,UAC1B,IAAe,IAAI,EAAM,UAAU,EAAM,QAIvC,YAAY,cAAc,QAAQ,GAAG,MAAM,GAEpD,EAAM,eAAe;CACvB;CAEA,SAAS;EACP,OAAO,CAAI;oBACK,KAAK,kBAAkB;iBAC1B,KAAK,eAAe;;CAEnC;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;AAgBrB;GA7NG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MASxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjB1C,EAAc,CAA2B,CAAA,GAAA,CAAA"}
package/fhi-segmented-control.manifest.json ADDED
@@ -0,0 +1 @@
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/index.js CHANGED
@@ -122,7 +122,9 @@ import { FhiIconUser as Tr, FhiIconUserSelector as Er } from "./fhi-icon-user.js
122
122
  import { FhiDataTable as Dr, FhiDataTableSelector as Or } from "./fhi-data-table.js";
123
123
  import { FhiDataTableCell as kr, FhiDataTableCellSelector as Ar } from "./fhi-data-table-cell.js";
124
124
  import { FhiDataTableRow as jr, FhiDataTableRowSelector as Mr } from "./fhi-data-table-row.js";
125
- import { FhiSelect as Nr, FhiSelectSelector as Pr } from "./fhi-select.js";
126
- import { FhiSelectItem as Fr, FhiSelectItemSelector as Ir } from "./fhi-select-item.js";
127
- import { FhiDisplay as Lr, FhiDisplaySelector as Rr } from "./fhi-display.js";
128
- export { i as FhiBody, a as FhiBodySelector, e as FhiButton, t as FhiButtonSelector, o as FhiCallout, s as FhiCalloutSelector, c as FhiCheckbox, l as FhiCheckboxSelector, Dr as FhiDataTable, kr as FhiDataTableCell, Ar as FhiDataTableCellSelector, jr as FhiDataTableRow, Mr as FhiDataTableRowSelector, Or as FhiDataTableSelector, p as FhiDateInput, f as FhiDateInputSelector, Lr as FhiDisplay, Rr as FhiDisplaySelector, m as FhiFlex, h as FhiFlexSelector, g as FhiGrid, _ as FhiGridSelector, S as FhiHeadline, C as FhiHeadlineSelector, H as FhiIconArrowDown, R as FhiIconArrowDownLeft, z as FhiIconArrowDownLeftSelector, B as FhiIconArrowDownRight, V as FhiIconArrowDownRightSelector, U as FhiIconArrowDownSelector, W as FhiIconArrowLeft, G as FhiIconArrowLeftSelector, J as FhiIconArrowRight, K as FhiIconArrowRightLeft, q as FhiIconArrowRightLeftSelector, Y as FhiIconArrowRightSelector, ne as FhiIconArrowUp, X as FhiIconArrowUpDown, Z as FhiIconArrowUpDownSelector, Q as FhiIconArrowUpLeft, $ as FhiIconArrowUpLeftSelector, ee as FhiIconArrowUpRight, te as FhiIconArrowUpRightSelector, re as FhiIconArrowUpSelector, ie as FhiIconBell, ae as FhiIconBellSelector, u as FhiIconCalendar, oe as FhiIconCalendarClock, se as FhiIconCalendarClockSelector, d as FhiIconCalendarSelector, ue as FhiIconChartBar, de as FhiIconChartBarSelector, ce as FhiIconChartBarStacked, le as FhiIconChartBarStackedSelector, me as FhiIconChartColumn, he as FhiIconChartColumnSelector, fe as FhiIconChartColumnStacked, pe as FhiIconChartColumnStackedSelector, ge as FhiIconChartLine, _e as FhiIconChartLineSelector, ve as FhiIconChartNoAxesCombined, ye as FhiIconChartNoAxesCombinedSelector, be as FhiIconChartPie, xe as FhiIconChartPieSelector, Se as FhiIconCheck, Ce as FhiIconCheckSelector, we as FhiIconChevronDown, Te as FhiIconChevronDownSelector, Ee as FhiIconChevronLeft, De as FhiIconChevronLeftSelector, Oe as FhiIconChevronRight, ke as FhiIconChevronRightSelector, Ae as FhiIconChevronUp, je as FhiIconChevronUpSelector, Me as FhiIconChevronsDown, Ne as FhiIconChevronsDownSelector, Pe as FhiIconChevronsLeft, Fe as FhiIconChevronsLeftSelector, Ie as FhiIconChevronsRight, Le as FhiIconChevronsRightSelector, Re as FhiIconChevronsUp, ze as FhiIconChevronsUpSelector, vt as FhiIconCircle, Be as FhiIconCircleArrowDown, Ve as FhiIconCircleArrowDownSelector, He as FhiIconCircleArrowLeft, Ue as FhiIconCircleArrowLeftSelector, We as FhiIconCircleArrowRight, Ge as FhiIconCircleArrowRightSelector, Ke as FhiIconCircleArrowUp, qe as FhiIconCircleArrowUpSelector, Xe as FhiIconCircleCheck, Je as FhiIconCircleCheckBig, Ye as FhiIconCircleCheckBigSelector, Ze as FhiIconCircleCheckSelector, Qe as FhiIconCircleChevronDown, $e as FhiIconCircleChevronDownSelector, et as FhiIconCircleChevronLeft, tt as FhiIconCircleChevronLeftSelector, nt as FhiIconCircleChevronRight, rt as FhiIconCircleChevronRightSelector, it as FhiIconCircleChevronUp, at as FhiIconCircleChevronUpSelector, ot as FhiIconCircleExclamation, st as FhiIconCircleExclamationSelector, ct as FhiIconCircleInfo, lt as FhiIconCircleInfoSelector, ut as FhiIconCircleMinus, dt as FhiIconCircleMinusSelector, ft as FhiIconCirclePlus, pt as FhiIconCirclePlusSelector, mt as FhiIconCircleQuestion, ht as FhiIconCircleQuestionSelector, yt as FhiIconCircleSelector, gt as FhiIconCircleX, _t as FhiIconCircleXSelector, bt as FhiIconClock, xt as FhiIconClockSelector, St as FhiIconCopy, Ct as FhiIconCopySelector, wt as FhiIconDownload, Tt as FhiIconDownloadSelector, Ot as FhiIconEllipsis, kt as FhiIconEllipsisSelector, Et as FhiIconEllipsisVertical, Dt as FhiIconEllipsisVerticalSelector, At as FhiIconExclamation, jt as FhiIconExclamationSelector, Mt as FhiIconExpand, Nt as FhiIconExpandSelector, Pt as FhiIconExternalLink, Ft as FhiIconExternalLinkSelector, Rt as FhiIconEye, It as FhiIconEyeOff, Lt as FhiIconEyeOffSelector, zt as FhiIconEyeSelector, Ht as FhiIconFile, Ut as FhiIconFileSelector, Bt as FhiIconFileText, Vt as FhiIconFileTextSelector, Wt as FhiIconFilter, Gt as FhiIconFilterSelector, Kt as FhiIconFolder, qt as FhiIconFolderSelector, Jt as FhiIconGear, Yt as FhiIconGearSelector, Xt as FhiIconGrid9Dots, Zt as FhiIconGrid9DotsSelector, Qt as FhiIconGripHorizontal, $t as FhiIconGripHorizontalSelector, en as FhiIconGripVertical, tn as FhiIconGripVerticalSelector, nn as FhiIconHistory, rn as FhiIconHistorySelector, an as FhiIconInfo, on as FhiIconInfoSelector, dn as FhiIconLink, ln as FhiIconLink2, sn as FhiIconLink2Off, cn as FhiIconLink2OffSelector, un as FhiIconLink2Selector, fn as FhiIconLinkSelector, hn as FhiIconLock, pn as FhiIconLockOpen, mn as FhiIconLockOpenSelector, gn as FhiIconLockSelector, _n as FhiIconLogIn, vn as FhiIconLogInSelector, yn as FhiIconLogOut, bn as FhiIconLogOutSelector, xn as FhiIconMail, Sn as FhiIconMailSelector, Cn as FhiIconMapPin, wn as FhiIconMapPinSelector, Tn as FhiIconMenu, En as FhiIconMenuSelector, Dn as FhiIconMessage, On as FhiIconMessageSelector, kn as FhiIconMinus, An as FhiIconMinusSelector, jn as FhiIconOctagonAlert, Mn as FhiIconOctagonAlertSelector, Nn as FhiIconPaperclip, Pn as FhiIconPaperclipSelector, Fn as FhiIconPencil, In as FhiIconPencilSelector, Ln as FhiIconPhone, Rn as FhiIconPhoneSelector, Vn as FhiIconPin, zn as FhiIconPinOff, Bn as FhiIconPinOffSelector, Hn as FhiIconPinSelector, Un as FhiIconPlus, Wn as FhiIconPlusSelector, Gn as FhiIconPrinter, Kn as FhiIconPrinterSelector, qn as FhiIconQuestion, Jn as FhiIconQuestionSelector, Yn as FhiIconRefresh, Xn as FhiIconRefreshSelector, Zn as FhiIconRotateLeft, Qn as FhiIconRotateLeftSelector, $n as FhiIconRotateRight, er as FhiIconRotateRightSelector, tr as FhiIconSearch, nr as FhiIconSearchSelector, rr as FhiIconSend, ir as FhiIconSendSelector, ar as FhiIconShare, or as FhiIconShareSelector, sr as FhiIconSheet, cr as FhiIconSheetSelector, _r as FhiIconSquare, dr as FhiIconSquareCheck, lr as FhiIconSquareCheckBig, ur as FhiIconSquareCheckBigSelector, fr as FhiIconSquareCheckSelector, pr as FhiIconSquarePen, mr as FhiIconSquarePenSelector, vr as FhiIconSquareSelector, hr as FhiIconSquareX, gr as FhiIconSquareXSelector, yr as FhiIconTrash, br as FhiIconTrashSelector, xr as FhiIconTriangleAlert, Sr as FhiIconTriangleAlertSelector, Cr as FhiIconUpload, wr as FhiIconUploadSelector, Tr as FhiIconUser, Er as FhiIconUserSelector, b as FhiIconX, x as FhiIconXSelector, A as FhiLabel, j as FhiLabelSelector, v as FhiLink, y as FhiLinkSelector, w as FhiModalDialog, T as FhiModalDialogSelector, E as FhiRadio, D as FhiRadioSelector, Nr as FhiSelect, Fr as FhiSelectItem, Ir as FhiSelectItemSelector, Pr as FhiSelectSelector, O as FhiTag, k as FhiTagSelector, M as FhiTextArea, N as FhiTextAreaSelector, P as FhiTextInput, F as FhiTextInputSelector, n as FhiTitle, r as FhiTitleSelector, L as FhiTooltip, I as FhiTooltipSelector };
125
+ import { FhiSegmentedControlItem as Nr, FhiSegmentedControlItemSelector as Pr } from "./fhi-segmented-control-item.js";
126
+ import { FhiSegmentedControl as Fr, FhiSegmentedControlSelector as Ir } from "./fhi-segmented-control.js";
127
+ import { FhiSelect as Lr, FhiSelectSelector as Rr } from "./fhi-select.js";
128
+ import { FhiSelectItem as zr, FhiSelectItemSelector as Br } from "./fhi-select-item.js";
129
+ import { FhiDisplay as Vr, FhiDisplaySelector as Hr } from "./fhi-display.js";
130
+ export { i as FhiBody, a as FhiBodySelector, e as FhiButton, t as FhiButtonSelector, o as FhiCallout, s as FhiCalloutSelector, c as FhiCheckbox, l as FhiCheckboxSelector, Dr as FhiDataTable, kr as FhiDataTableCell, Ar as FhiDataTableCellSelector, jr as FhiDataTableRow, Mr as FhiDataTableRowSelector, Or as FhiDataTableSelector, p as FhiDateInput, f as FhiDateInputSelector, Vr as FhiDisplay, Hr as FhiDisplaySelector, m as FhiFlex, h as FhiFlexSelector, g as FhiGrid, _ as FhiGridSelector, S as FhiHeadline, C as FhiHeadlineSelector, H as FhiIconArrowDown, R as FhiIconArrowDownLeft, z as FhiIconArrowDownLeftSelector, B as FhiIconArrowDownRight, V as FhiIconArrowDownRightSelector, U as FhiIconArrowDownSelector, W as FhiIconArrowLeft, G as FhiIconArrowLeftSelector, J as FhiIconArrowRight, K as FhiIconArrowRightLeft, q as FhiIconArrowRightLeftSelector, Y as FhiIconArrowRightSelector, ne as FhiIconArrowUp, X as FhiIconArrowUpDown, Z as FhiIconArrowUpDownSelector, Q as FhiIconArrowUpLeft, $ as FhiIconArrowUpLeftSelector, ee as FhiIconArrowUpRight, te as FhiIconArrowUpRightSelector, re as FhiIconArrowUpSelector, ie as FhiIconBell, ae as FhiIconBellSelector, u as FhiIconCalendar, oe as FhiIconCalendarClock, se as FhiIconCalendarClockSelector, d as FhiIconCalendarSelector, ue as FhiIconChartBar, de as FhiIconChartBarSelector, ce as FhiIconChartBarStacked, le as FhiIconChartBarStackedSelector, me as FhiIconChartColumn, he as FhiIconChartColumnSelector, fe as FhiIconChartColumnStacked, pe as FhiIconChartColumnStackedSelector, ge as FhiIconChartLine, _e as FhiIconChartLineSelector, ve as FhiIconChartNoAxesCombined, ye as FhiIconChartNoAxesCombinedSelector, be as FhiIconChartPie, xe as FhiIconChartPieSelector, Se as FhiIconCheck, Ce as FhiIconCheckSelector, we as FhiIconChevronDown, Te as FhiIconChevronDownSelector, Ee as FhiIconChevronLeft, De as FhiIconChevronLeftSelector, Oe as FhiIconChevronRight, ke as FhiIconChevronRightSelector, Ae as FhiIconChevronUp, je as FhiIconChevronUpSelector, Me as FhiIconChevronsDown, Ne as FhiIconChevronsDownSelector, Pe as FhiIconChevronsLeft, Fe as FhiIconChevronsLeftSelector, Ie as FhiIconChevronsRight, Le as FhiIconChevronsRightSelector, Re as FhiIconChevronsUp, ze as FhiIconChevronsUpSelector, vt as FhiIconCircle, Be as FhiIconCircleArrowDown, Ve as FhiIconCircleArrowDownSelector, He as FhiIconCircleArrowLeft, Ue as FhiIconCircleArrowLeftSelector, We as FhiIconCircleArrowRight, Ge as FhiIconCircleArrowRightSelector, Ke as FhiIconCircleArrowUp, qe as FhiIconCircleArrowUpSelector, Xe as FhiIconCircleCheck, Je as FhiIconCircleCheckBig, Ye as FhiIconCircleCheckBigSelector, Ze as FhiIconCircleCheckSelector, Qe as FhiIconCircleChevronDown, $e as FhiIconCircleChevronDownSelector, et as FhiIconCircleChevronLeft, tt as FhiIconCircleChevronLeftSelector, nt as FhiIconCircleChevronRight, rt as FhiIconCircleChevronRightSelector, it as FhiIconCircleChevronUp, at as FhiIconCircleChevronUpSelector, ot as FhiIconCircleExclamation, st as FhiIconCircleExclamationSelector, ct as FhiIconCircleInfo, lt as FhiIconCircleInfoSelector, ut as FhiIconCircleMinus, dt as FhiIconCircleMinusSelector, ft as FhiIconCirclePlus, pt as FhiIconCirclePlusSelector, mt as FhiIconCircleQuestion, ht as FhiIconCircleQuestionSelector, yt as FhiIconCircleSelector, gt as FhiIconCircleX, _t as FhiIconCircleXSelector, bt as FhiIconClock, xt as FhiIconClockSelector, St as FhiIconCopy, Ct as FhiIconCopySelector, wt as FhiIconDownload, Tt as FhiIconDownloadSelector, Ot as FhiIconEllipsis, kt as FhiIconEllipsisSelector, Et as FhiIconEllipsisVertical, Dt as FhiIconEllipsisVerticalSelector, At as FhiIconExclamation, jt as FhiIconExclamationSelector, Mt as FhiIconExpand, Nt as FhiIconExpandSelector, Pt as FhiIconExternalLink, Ft as FhiIconExternalLinkSelector, Rt as FhiIconEye, It as FhiIconEyeOff, Lt as FhiIconEyeOffSelector, zt as FhiIconEyeSelector, Ht as FhiIconFile, Ut as FhiIconFileSelector, Bt as FhiIconFileText, Vt as FhiIconFileTextSelector, Wt as FhiIconFilter, Gt as FhiIconFilterSelector, Kt as FhiIconFolder, qt as FhiIconFolderSelector, Jt as FhiIconGear, Yt as FhiIconGearSelector, Xt as FhiIconGrid9Dots, Zt as FhiIconGrid9DotsSelector, Qt as FhiIconGripHorizontal, $t as FhiIconGripHorizontalSelector, en as FhiIconGripVertical, tn as FhiIconGripVerticalSelector, nn as FhiIconHistory, rn as FhiIconHistorySelector, an as FhiIconInfo, on as FhiIconInfoSelector, dn as FhiIconLink, ln as FhiIconLink2, sn as FhiIconLink2Off, cn as FhiIconLink2OffSelector, un as FhiIconLink2Selector, fn as FhiIconLinkSelector, hn as FhiIconLock, pn as FhiIconLockOpen, mn as FhiIconLockOpenSelector, gn as FhiIconLockSelector, _n as FhiIconLogIn, vn as FhiIconLogInSelector, yn as FhiIconLogOut, bn as FhiIconLogOutSelector, xn as FhiIconMail, Sn as FhiIconMailSelector, Cn as FhiIconMapPin, wn as FhiIconMapPinSelector, Tn as FhiIconMenu, En as FhiIconMenuSelector, Dn as FhiIconMessage, On as FhiIconMessageSelector, kn as FhiIconMinus, An as FhiIconMinusSelector, jn as FhiIconOctagonAlert, Mn as FhiIconOctagonAlertSelector, Nn as FhiIconPaperclip, Pn as FhiIconPaperclipSelector, Fn as FhiIconPencil, In as FhiIconPencilSelector, Ln as FhiIconPhone, Rn as FhiIconPhoneSelector, Vn as FhiIconPin, zn as FhiIconPinOff, Bn as FhiIconPinOffSelector, Hn as FhiIconPinSelector, Un as FhiIconPlus, Wn as FhiIconPlusSelector, Gn as FhiIconPrinter, Kn as FhiIconPrinterSelector, qn as FhiIconQuestion, Jn as FhiIconQuestionSelector, Yn as FhiIconRefresh, Xn as FhiIconRefreshSelector, Zn as FhiIconRotateLeft, Qn as FhiIconRotateLeftSelector, $n as FhiIconRotateRight, er as FhiIconRotateRightSelector, tr as FhiIconSearch, nr as FhiIconSearchSelector, rr as FhiIconSend, ir as FhiIconSendSelector, ar as FhiIconShare, or as FhiIconShareSelector, sr as FhiIconSheet, cr as FhiIconSheetSelector, _r as FhiIconSquare, dr as FhiIconSquareCheck, lr as FhiIconSquareCheckBig, ur as FhiIconSquareCheckBigSelector, fr as FhiIconSquareCheckSelector, pr as FhiIconSquarePen, mr as FhiIconSquarePenSelector, vr as FhiIconSquareSelector, hr as FhiIconSquareX, gr as FhiIconSquareXSelector, yr as FhiIconTrash, br as FhiIconTrashSelector, xr as FhiIconTriangleAlert, Sr as FhiIconTriangleAlertSelector, Cr as FhiIconUpload, wr as FhiIconUploadSelector, Tr as FhiIconUser, Er as FhiIconUserSelector, b as FhiIconX, x as FhiIconXSelector, A as FhiLabel, j as FhiLabelSelector, v as FhiLink, y as FhiLinkSelector, w as FhiModalDialog, T as FhiModalDialogSelector, E as FhiRadio, D as FhiRadioSelector, Fr as FhiSegmentedControl, Nr as FhiSegmentedControlItem, Pr as FhiSegmentedControlItemSelector, Ir as FhiSegmentedControlSelector, Lr as FhiSelect, zr as FhiSelectItem, Br as FhiSelectItemSelector, Rr as FhiSelectSelector, O as FhiTag, k as FhiTagSelector, M as FhiTextArea, N as FhiTextAreaSelector, P as FhiTextInput, F as FhiTextInputSelector, n as FhiTitle, r as FhiTitleSelector, L as FhiTooltip, I as FhiTooltipSelector };
package/package.json CHANGED
@@ -1 +1 @@
1
- {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.45.4","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-callout":{"default":"./fhi-callout.js","types":"./fhi-callout.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-link":{"default":"./fhi-link.js","types":"./fhi-link.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-area":{"default":"./fhi-text-area.js","types":"./fhi-text-area.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-select":{"default":"./fhi-select.js","types":"./fhi-select.d.ts"},"./fhi-select-item":{"default":"./fhi-select-item.js","types":"./fhi-select-item.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}
1
+ {"title":"FHI Designsystem","author":"FHI Designsystem team","name":"@folkehelseinstituttet/designsystem","version":"0.47.0","description":"The official design system for the Norwegian Institute of Public Health implemented as web components","keywords":["fhi","folkehelseinstituttet","components","design","system","framework","frontend","web-component","web component","ui"],"customElements":".temp/custom-elements.json","web-types":"./web-types.json","homepage":"https://github.com/FHIDev/Fhi.Designsystem","bugs":{"url":"https://github.com/FHIDev/Fhi.Designsystem/issues"},"repository":{"type":"git","url":"git+https://github.com/FHIDev/Fhi.Designsystem.git"},"license":"MIT","browserslist":["> 0.5%","last 2 versions"],"main":"index.js","type":"module","scripts":{"dev":"vite","build":"pnpm analyze && pnpm build:cdn && pnpm build:npm && pnpm build:github && pnpm clean","build:cdn":"tsc && cross-env DEPLOY_TARGET=cdn vite build","build:npm":"tsc && cross-env DEPLOY_TARGET=npm vite build","build:github":"tsc && cross-env DEPLOY_TARGET=github vite build","storybook":"storybook dev -p 6006","storybook:build":"pnpm analyze && storybook build","generate:icons":"node ./scripts/generate-icon-components.js --input ./src/assets/icons/ --output ./src/components/icons --clean-output-folder","test":"wtr ./**/*.test.ts --node-resolve --playwright --browsers chromium webkit","lint":"pnpm lint:eslint && pnpm lint:prettier","lint:eslint":"eslint \"**/*.{js,ts}\"","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format":"pnpm format:eslint && pnpm format:prettier","format:eslint":"eslint \"**/*.{js,ts}\" --fix","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","publish:npm":"pnpm build && cd dist/npm && npm publish","changelog:ci":"release-it --ci","analyze":"cem analyze --litelement","clean":"rimraf .temp","build-storybook":"storybook build"},"peerDependencies":{"lit":"~3.2.0"},"devDependencies":{"@custom-elements-manifest/analyzer":"^0.11.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"~4.0.0","@playwright/test":"^1.61.0","@release-it/conventional-changelog":"~11.0.1","@storybook/addon-docs":"^10.4.6","@storybook/web-components-vite":"^10.4.6","@types/mocha":"~10.0.10","@types/node":"~26.0.0","@types/react":"^19.2.17","@wc-toolkit/cem-sorter":"^1.0.1","@wc-toolkit/type-parser":"^1.2.1","@web/dev-server":"~0.4.6","@web/dev-server-esbuild":"~1.0.5","@web/test-runner":"~0.20.2","@web/test-runner-playwright":"~0.11.1","cross-env":"10.1.0","custom-element-jet-brains-integration":"^1.7.0","lit":"~3.3.3","mocha":"~11.7.6","playwright":"^1.61.0","release-it":"~20.2.0","rimraf":"^6.1.3","storybook":"^10.4.6","storybook-design-token":"^5.0.0","svgo":"^4.0.1","vite":"~8.0.16","vite-plugin-static-copy":"~4.1.1"},"dependencies":{"@floating-ui/dom":"^1.7.6"},"pnpm":{"overrides":{"diff@>=6.0.0 <8.0.3":">=8.0.3","serialize-javascript@<=7.0.2":">=7.0.3","yaml@>=2.0.0 <2.8.3":">=2.8.3","serialize-javascript@>=5.0.0 <7.0.5":">=7.0.5","esbuild@>=0.27.3 <0.28.1":">=0.28.1","undici@>=7.23.0 <7.28.0":">=7.28.0","undici@>=7.0.0 <7.28.0":">=7.28.0"}},"exports":{"./fhi-button":{"default":"./fhi-button.js","types":"./fhi-button.d.ts"},"./fhi-callout":{"default":"./fhi-callout.js","types":"./fhi-callout.d.ts"},"./fhi-checkbox":{"default":"./fhi-checkbox.js","types":"./fhi-checkbox.d.ts"},"./fhi-date-input":{"default":"./fhi-date-input.js","types":"./fhi-date-input.d.ts"},"./fhi-flex":{"default":"./fhi-flex.js","types":"./fhi-flex.d.ts"},"./fhi-grid":{"default":"./fhi-grid.js","types":"./fhi-grid.d.ts"},"./fhi-link":{"default":"./fhi-link.js","types":"./fhi-link.d.ts"},"./fhi-modal-dialog":{"default":"./fhi-modal-dialog.js","types":"./fhi-modal-dialog.d.ts"},"./fhi-radio":{"default":"./fhi-radio.js","types":"./fhi-radio.d.ts"},"./fhi-tag":{"default":"./fhi-tag.js","types":"./fhi-tag.d.ts"},"./fhi-text-area":{"default":"./fhi-text-area.js","types":"./fhi-text-area.d.ts"},"./fhi-text-input":{"default":"./fhi-text-input.js","types":"./fhi-text-input.d.ts"},"./fhi-tooltip":{"default":"./fhi-tooltip.js","types":"./fhi-tooltip.d.ts"},"./fhi-icon-arrow-down-left":{"default":"./fhi-icon-arrow-down-left.js","types":"./fhi-icon-arrow-down-left.d.ts"},"./fhi-icon-arrow-down-right":{"default":"./fhi-icon-arrow-down-right.js","types":"./fhi-icon-arrow-down-right.d.ts"},"./fhi-icon-arrow-down":{"default":"./fhi-icon-arrow-down.js","types":"./fhi-icon-arrow-down.d.ts"},"./fhi-icon-arrow-left":{"default":"./fhi-icon-arrow-left.js","types":"./fhi-icon-arrow-left.d.ts"},"./fhi-icon-arrow-right-left":{"default":"./fhi-icon-arrow-right-left.js","types":"./fhi-icon-arrow-right-left.d.ts"},"./fhi-icon-arrow-right":{"default":"./fhi-icon-arrow-right.js","types":"./fhi-icon-arrow-right.d.ts"},"./fhi-icon-arrow-up-down":{"default":"./fhi-icon-arrow-up-down.js","types":"./fhi-icon-arrow-up-down.d.ts"},"./fhi-icon-arrow-up-left":{"default":"./fhi-icon-arrow-up-left.js","types":"./fhi-icon-arrow-up-left.d.ts"},"./fhi-icon-arrow-up-right":{"default":"./fhi-icon-arrow-up-right.js","types":"./fhi-icon-arrow-up-right.d.ts"},"./fhi-icon-arrow-up":{"default":"./fhi-icon-arrow-up.js","types":"./fhi-icon-arrow-up.d.ts"},"./fhi-icon-bell":{"default":"./fhi-icon-bell.js","types":"./fhi-icon-bell.d.ts"},"./fhi-icon-calendar-clock":{"default":"./fhi-icon-calendar-clock.js","types":"./fhi-icon-calendar-clock.d.ts"},"./fhi-icon-calendar":{"default":"./fhi-icon-calendar.js","types":"./fhi-icon-calendar.d.ts"},"./fhi-icon-chart-bar-stacked":{"default":"./fhi-icon-chart-bar-stacked.js","types":"./fhi-icon-chart-bar-stacked.d.ts"},"./fhi-icon-chart-bar":{"default":"./fhi-icon-chart-bar.js","types":"./fhi-icon-chart-bar.d.ts"},"./fhi-icon-chart-column-stacked":{"default":"./fhi-icon-chart-column-stacked.js","types":"./fhi-icon-chart-column-stacked.d.ts"},"./fhi-icon-chart-column":{"default":"./fhi-icon-chart-column.js","types":"./fhi-icon-chart-column.d.ts"},"./fhi-icon-chart-line":{"default":"./fhi-icon-chart-line.js","types":"./fhi-icon-chart-line.d.ts"},"./fhi-icon-chart-no-axes-combined":{"default":"./fhi-icon-chart-no-axes-combined.js","types":"./fhi-icon-chart-no-axes-combined.d.ts"},"./fhi-icon-chart-pie":{"default":"./fhi-icon-chart-pie.js","types":"./fhi-icon-chart-pie.d.ts"},"./fhi-icon-check":{"default":"./fhi-icon-check.js","types":"./fhi-icon-check.d.ts"},"./fhi-icon-chevron-down":{"default":"./fhi-icon-chevron-down.js","types":"./fhi-icon-chevron-down.d.ts"},"./fhi-icon-chevron-left":{"default":"./fhi-icon-chevron-left.js","types":"./fhi-icon-chevron-left.d.ts"},"./fhi-icon-chevron-right":{"default":"./fhi-icon-chevron-right.js","types":"./fhi-icon-chevron-right.d.ts"},"./fhi-icon-chevron-up":{"default":"./fhi-icon-chevron-up.js","types":"./fhi-icon-chevron-up.d.ts"},"./fhi-icon-chevrons-down":{"default":"./fhi-icon-chevrons-down.js","types":"./fhi-icon-chevrons-down.d.ts"},"./fhi-icon-chevrons-left":{"default":"./fhi-icon-chevrons-left.js","types":"./fhi-icon-chevrons-left.d.ts"},"./fhi-icon-chevrons-right":{"default":"./fhi-icon-chevrons-right.js","types":"./fhi-icon-chevrons-right.d.ts"},"./fhi-icon-chevrons-up":{"default":"./fhi-icon-chevrons-up.js","types":"./fhi-icon-chevrons-up.d.ts"},"./fhi-icon-circle-arrow-down":{"default":"./fhi-icon-circle-arrow-down.js","types":"./fhi-icon-circle-arrow-down.d.ts"},"./fhi-icon-circle-arrow-left":{"default":"./fhi-icon-circle-arrow-left.js","types":"./fhi-icon-circle-arrow-left.d.ts"},"./fhi-icon-circle-arrow-right":{"default":"./fhi-icon-circle-arrow-right.js","types":"./fhi-icon-circle-arrow-right.d.ts"},"./fhi-icon-circle-arrow-up":{"default":"./fhi-icon-circle-arrow-up.js","types":"./fhi-icon-circle-arrow-up.d.ts"},"./fhi-icon-circle-check-big":{"default":"./fhi-icon-circle-check-big.js","types":"./fhi-icon-circle-check-big.d.ts"},"./fhi-icon-circle-check":{"default":"./fhi-icon-circle-check.js","types":"./fhi-icon-circle-check.d.ts"},"./fhi-icon-circle-chevron-down":{"default":"./fhi-icon-circle-chevron-down.js","types":"./fhi-icon-circle-chevron-down.d.ts"},"./fhi-icon-circle-chevron-left":{"default":"./fhi-icon-circle-chevron-left.js","types":"./fhi-icon-circle-chevron-left.d.ts"},"./fhi-icon-circle-chevron-right":{"default":"./fhi-icon-circle-chevron-right.js","types":"./fhi-icon-circle-chevron-right.d.ts"},"./fhi-icon-circle-chevron-up":{"default":"./fhi-icon-circle-chevron-up.js","types":"./fhi-icon-circle-chevron-up.d.ts"},"./fhi-icon-circle-exclamation":{"default":"./fhi-icon-circle-exclamation.js","types":"./fhi-icon-circle-exclamation.d.ts"},"./fhi-icon-circle-info":{"default":"./fhi-icon-circle-info.js","types":"./fhi-icon-circle-info.d.ts"},"./fhi-icon-circle-minus":{"default":"./fhi-icon-circle-minus.js","types":"./fhi-icon-circle-minus.d.ts"},"./fhi-icon-circle-plus":{"default":"./fhi-icon-circle-plus.js","types":"./fhi-icon-circle-plus.d.ts"},"./fhi-icon-circle-question":{"default":"./fhi-icon-circle-question.js","types":"./fhi-icon-circle-question.d.ts"},"./fhi-icon-circle-x":{"default":"./fhi-icon-circle-x.js","types":"./fhi-icon-circle-x.d.ts"},"./fhi-icon-circle":{"default":"./fhi-icon-circle.js","types":"./fhi-icon-circle.d.ts"},"./fhi-icon-clock":{"default":"./fhi-icon-clock.js","types":"./fhi-icon-clock.d.ts"},"./fhi-icon-copy":{"default":"./fhi-icon-copy.js","types":"./fhi-icon-copy.d.ts"},"./fhi-icon-download":{"default":"./fhi-icon-download.js","types":"./fhi-icon-download.d.ts"},"./fhi-icon-ellipsis-vertical":{"default":"./fhi-icon-ellipsis-vertical.js","types":"./fhi-icon-ellipsis-vertical.d.ts"},"./fhi-icon-ellipsis":{"default":"./fhi-icon-ellipsis.js","types":"./fhi-icon-ellipsis.d.ts"},"./fhi-icon-exclamation":{"default":"./fhi-icon-exclamation.js","types":"./fhi-icon-exclamation.d.ts"},"./fhi-icon-expand":{"default":"./fhi-icon-expand.js","types":"./fhi-icon-expand.d.ts"},"./fhi-icon-external-link":{"default":"./fhi-icon-external-link.js","types":"./fhi-icon-external-link.d.ts"},"./fhi-icon-eye-off":{"default":"./fhi-icon-eye-off.js","types":"./fhi-icon-eye-off.d.ts"},"./fhi-icon-eye":{"default":"./fhi-icon-eye.js","types":"./fhi-icon-eye.d.ts"},"./fhi-icon-file-text":{"default":"./fhi-icon-file-text.js","types":"./fhi-icon-file-text.d.ts"},"./fhi-icon-file":{"default":"./fhi-icon-file.js","types":"./fhi-icon-file.d.ts"},"./fhi-icon-filter":{"default":"./fhi-icon-filter.js","types":"./fhi-icon-filter.d.ts"},"./fhi-icon-folder":{"default":"./fhi-icon-folder.js","types":"./fhi-icon-folder.d.ts"},"./fhi-icon-gear":{"default":"./fhi-icon-gear.js","types":"./fhi-icon-gear.d.ts"},"./fhi-icon-grid-9-dots":{"default":"./fhi-icon-grid-9-dots.js","types":"./fhi-icon-grid-9-dots.d.ts"},"./fhi-icon-grip-horizontal":{"default":"./fhi-icon-grip-horizontal.js","types":"./fhi-icon-grip-horizontal.d.ts"},"./fhi-icon-grip-vertical":{"default":"./fhi-icon-grip-vertical.js","types":"./fhi-icon-grip-vertical.d.ts"},"./fhi-icon-history":{"default":"./fhi-icon-history.js","types":"./fhi-icon-history.d.ts"},"./fhi-icon-info":{"default":"./fhi-icon-info.js","types":"./fhi-icon-info.d.ts"},"./fhi-icon-link-2-off":{"default":"./fhi-icon-link-2-off.js","types":"./fhi-icon-link-2-off.d.ts"},"./fhi-icon-link-2":{"default":"./fhi-icon-link-2.js","types":"./fhi-icon-link-2.d.ts"},"./fhi-icon-link":{"default":"./fhi-icon-link.js","types":"./fhi-icon-link.d.ts"},"./fhi-icon-lock-open":{"default":"./fhi-icon-lock-open.js","types":"./fhi-icon-lock-open.d.ts"},"./fhi-icon-lock":{"default":"./fhi-icon-lock.js","types":"./fhi-icon-lock.d.ts"},"./fhi-icon-log-in":{"default":"./fhi-icon-log-in.js","types":"./fhi-icon-log-in.d.ts"},"./fhi-icon-log-out":{"default":"./fhi-icon-log-out.js","types":"./fhi-icon-log-out.d.ts"},"./fhi-icon-mail":{"default":"./fhi-icon-mail.js","types":"./fhi-icon-mail.d.ts"},"./fhi-icon-map-pin":{"default":"./fhi-icon-map-pin.js","types":"./fhi-icon-map-pin.d.ts"},"./fhi-icon-menu":{"default":"./fhi-icon-menu.js","types":"./fhi-icon-menu.d.ts"},"./fhi-icon-message":{"default":"./fhi-icon-message.js","types":"./fhi-icon-message.d.ts"},"./fhi-icon-minus":{"default":"./fhi-icon-minus.js","types":"./fhi-icon-minus.d.ts"},"./fhi-icon-octagon-alert":{"default":"./fhi-icon-octagon-alert.js","types":"./fhi-icon-octagon-alert.d.ts"},"./fhi-icon-paperclip":{"default":"./fhi-icon-paperclip.js","types":"./fhi-icon-paperclip.d.ts"},"./fhi-icon-pencil":{"default":"./fhi-icon-pencil.js","types":"./fhi-icon-pencil.d.ts"},"./fhi-icon-phone":{"default":"./fhi-icon-phone.js","types":"./fhi-icon-phone.d.ts"},"./fhi-icon-pin-off":{"default":"./fhi-icon-pin-off.js","types":"./fhi-icon-pin-off.d.ts"},"./fhi-icon-pin":{"default":"./fhi-icon-pin.js","types":"./fhi-icon-pin.d.ts"},"./fhi-icon-plus":{"default":"./fhi-icon-plus.js","types":"./fhi-icon-plus.d.ts"},"./fhi-icon-printer":{"default":"./fhi-icon-printer.js","types":"./fhi-icon-printer.d.ts"},"./fhi-icon-question":{"default":"./fhi-icon-question.js","types":"./fhi-icon-question.d.ts"},"./fhi-icon-refresh":{"default":"./fhi-icon-refresh.js","types":"./fhi-icon-refresh.d.ts"},"./fhi-icon-rotate-left":{"default":"./fhi-icon-rotate-left.js","types":"./fhi-icon-rotate-left.d.ts"},"./fhi-icon-rotate-right":{"default":"./fhi-icon-rotate-right.js","types":"./fhi-icon-rotate-right.d.ts"},"./fhi-icon-search":{"default":"./fhi-icon-search.js","types":"./fhi-icon-search.d.ts"},"./fhi-icon-send":{"default":"./fhi-icon-send.js","types":"./fhi-icon-send.d.ts"},"./fhi-icon-share":{"default":"./fhi-icon-share.js","types":"./fhi-icon-share.d.ts"},"./fhi-icon-sheet":{"default":"./fhi-icon-sheet.js","types":"./fhi-icon-sheet.d.ts"},"./fhi-icon-square-check-big":{"default":"./fhi-icon-square-check-big.js","types":"./fhi-icon-square-check-big.d.ts"},"./fhi-icon-square-check":{"default":"./fhi-icon-square-check.js","types":"./fhi-icon-square-check.d.ts"},"./fhi-icon-square-pen":{"default":"./fhi-icon-square-pen.js","types":"./fhi-icon-square-pen.d.ts"},"./fhi-icon-square-x":{"default":"./fhi-icon-square-x.js","types":"./fhi-icon-square-x.d.ts"},"./fhi-icon-square":{"default":"./fhi-icon-square.js","types":"./fhi-icon-square.d.ts"},"./fhi-icon-trash":{"default":"./fhi-icon-trash.js","types":"./fhi-icon-trash.d.ts"},"./fhi-icon-triangle-alert":{"default":"./fhi-icon-triangle-alert.js","types":"./fhi-icon-triangle-alert.d.ts"},"./fhi-icon-upload":{"default":"./fhi-icon-upload.js","types":"./fhi-icon-upload.d.ts"},"./fhi-icon-user":{"default":"./fhi-icon-user.js","types":"./fhi-icon-user.d.ts"},"./fhi-icon-x":{"default":"./fhi-icon-x.js","types":"./fhi-icon-x.d.ts"},"./fhi-data-table":{"default":"./fhi-data-table.js","types":"./fhi-data-table.d.ts"},"./fhi-data-table-cell":{"default":"./fhi-data-table-cell.js","types":"./fhi-data-table-cell.d.ts"},"./fhi-data-table-row":{"default":"./fhi-data-table-row.js","types":"./fhi-data-table-row.d.ts"},"./fhi-segmented-control":{"default":"./fhi-segmented-control.js","types":"./fhi-segmented-control.d.ts"},"./fhi-segmented-control-item":{"default":"./fhi-segmented-control-item.js","types":"./fhi-segmented-control-item.d.ts"},"./fhi-select":{"default":"./fhi-select.js","types":"./fhi-select.d.ts"},"./fhi-select-item":{"default":"./fhi-select-item.js","types":"./fhi-select-item.d.ts"},"./fhi-body":{"default":"./fhi-body.js","types":"./fhi-body.d.ts"},"./fhi-display":{"default":"./fhi-display.js","types":"./fhi-display.d.ts"},"./fhi-headline":{"default":"./fhi-headline.js","types":"./fhi-headline.d.ts"},"./fhi-label":{"default":"./fhi-label.js","types":"./fhi-label.d.ts"},"./fhi-title":{"default":"./fhi-title.js","types":"./fhi-title.d.ts"},".":{"default":"./index.js"},"./theme/default.css":{"default":"./theme/default.css","style":"./theme/default.css"},"./custom-elements.json":{"default":"./custom-elements.json"}}}