@folkehelseinstituttet/designsystem 0.36.0 → 0.37.0

package/fhi-data-table-cell.d.ts

@@ -0,0 +1 @@
+export {};

package/fhi-data-table-cell.js

@@ -0,0 +1,82 @@
+import { i as d, n as s, a as f, b as c, t as p } from "./property-DGdAXcEz.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, h = (e, a, r, l) => {
+  for (var t = l > 1 ? void 0 : l ? b(a, r) : a, o = e.length - 1, n; o >= 0; o--)
+    (n = e[o]) && (t = (l ? n(a, r, t) : n(t)) || t);
+  return l && t && y(a, r, t), t;
+};
+const u = "fhi-data-table-cell";
+let i = class extends f {
+  constructor() {
+    super(...arguments), this.variant = "body";
+  }
+  update(e) {
+    e.has("variant") && (this.role = this.variant === "header" ? "columnheader" : "cell"), super.update(e);
+  }
+  render() {
+    return c`
+      <div class="cell-content">
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+i.styles = d`
+    :host {
+      --fhi-data-table-cell-justify-content: unset;
+      --fhi-data-table-cell-align-items: unset;
+
+      --fhi-data-table-cell-border-style: unset;
+      --fhi-data-table-cell-border-width: unset;
+      --fhi-data-table-cell-border-color: unset;
+    }
+
+    :host {
+      --fhi-data-table-cell-justify-content: start;
+      --fhi-data-table-cell-align-items: center;
+
+      display: table-cell;
+      vertical-align: middle;
+
+      padding: var(--fhi-spacing-150);
+      color: var(--fhi-color-neutral-text-default);
+
+      border-style: var(--fhi-data-table-cell-border-style);
+      border-width: var(--fhi-data-table-cell-border-width);
+      border-color: var(--fhi-data-table-cell-border-color);
+
+      .cell-content {
+        display: flex;
+        align-items: var(--fhi-data-table-cell-align-items);
+        justify-content: var(--fhi-data-table-cell-justify-content);
+      }
+    }
+
+    :host([variant='body']) {
+      letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
+
+      font: var(--fhi-typography-body-medium-font-weight)
+        var(--fhi-typography-body-medium-font-size) /
+        var(--fhi-typography-body-medium-line-height)
+        var(--fhi-font-family-default);
+    }
+
+    :host([variant='header']) {
+      letter-spacing: var(--fhi-typography-title-medium-letter-spacing);
+
+      font: var(--fhi-typography-title-medium-font-weight)
+        var(--fhi-typography-title-medium-font-size) /
+        var(--fhi-typography-title-medium-line-height)
+        var(--fhi-font-family-default);
+    }
+  `;
+h([
+  s({ type: String, reflect: !0 })
+], i.prototype, "variant", 2);
+i = h([
+  p(u)
+], i);
+export {
+  i as FhiDataTableCell,
+  u as FhiDataTableCellSelector
+};
+//# sourceMappingURL=fhi-data-table-cell.js.map

package/fhi-data-table-cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-data-table-cell.js","sources":["../../src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiDataTableCellSelector = 'fhi-data-table-cell';\n\n/**\n * ## FHI Table Cell\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}\n *\n * The `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\n * It allows users to properly display data within a `<fhi-data-table-row>`.\n *\n * The `<fhi-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-cell\n * @element fhi-data-table-cell\n */\n@customElement(FhiDataTableCellSelector)\nexport class FhiDataTableCell extends LitElement {\n  /**\n   * Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.\n   * @type {'header' | 'body'}\n   */\n  @property({ type: String, reflect: true })\n  variant: 'header' | 'body' = 'body';\n\n  protected update(changedProperties: PropertyValues): void {\n    if (changedProperties.has('variant')) {\n      this.role = this.variant === 'header' ? 'columnheader' : 'cell';\n    }\n\n    super.update(changedProperties);\n  }\n\n  render() {\n    return html`\n      <div class=\"cell-content\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-data-table-cell-justify-content: unset;\n      --fhi-data-table-cell-align-items: unset;\n\n      --fhi-data-table-cell-border-style: unset;\n      --fhi-data-table-cell-border-width: unset;\n      --fhi-data-table-cell-border-color: unset;\n    }\n\n    :host {\n      --fhi-data-table-cell-justify-content: start;\n      --fhi-data-table-cell-align-items: center;\n\n      display: table-cell;\n      vertical-align: middle;\n\n      padding: var(--fhi-spacing-150);\n      color: var(--fhi-color-neutral-text-default);\n\n      border-style: var(--fhi-data-table-cell-border-style);\n      border-width: var(--fhi-data-table-cell-border-width);\n      border-color: var(--fhi-data-table-cell-border-color);\n\n      .cell-content {\n        display: flex;\n        align-items: var(--fhi-data-table-cell-align-items);\n        justify-content: var(--fhi-data-table-cell-justify-content);\n      }\n    }\n\n    :host([variant='body']) {\n      letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n\n      font: var(--fhi-typography-body-medium-font-weight)\n        var(--fhi-typography-body-medium-font-size) /\n        var(--fhi-typography-body-medium-line-height)\n        var(--fhi-font-family-default);\n    }\n\n    :host([variant='header']) {\n      letter-spacing: var(--fhi-typography-title-medium-letter-spacing);\n\n      font: var(--fhi-typography-title-medium-font-weight)\n        var(--fhi-typography-title-medium-font-size) /\n        var(--fhi-typography-title-medium-line-height)\n        var(--fhi-font-family-default);\n    }\n  `;\n}\n"],"names":["FhiDataTableCellSelector","FhiDataTableCell","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAA2B;AAgBjC,IAAMC,IAAN,cAA+BC,EAAW;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA,GAML,KAAA,UAA6B;AAAA,EAAA;AAAA,EAEnB,OAAOC,GAAyC;AACxD,IAAIA,EAAkB,IAAI,SAAS,MACjC,KAAK,OAAO,KAAK,YAAY,WAAW,iBAAiB,SAG3D,MAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAmDF;AAzEaH,EAwBJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAlBhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAL9BN,EAMX,WAAA,WAAA,CAAA;AANWA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAwB;AAAA,GAC1BC,CAAA;"}

package/fhi-data-table-cell.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/data-table/fhi-data-table-cell/fhi-data-table-cell.component.ts","declarations":[{"kind":"class","description":"## FHI Table Cell\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table-cell>` component is an implementation of a table cell according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table-row>`.\n\nThe `<fhi-table-cell>` component does not use the native HTML `<td>` or `<th>` elements. Instead, it relies on CSS Grid to achieve the desired layout and styling.","name":"FhiDataTableCell","members":[{"kind":"field","name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.","attribute":"variant","reflects":true}],"attributes":[{"name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table cell, which can be either 'header' or 'body'. This determines the styling and role of the cell within the table.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table-cell","customElement":true},{"kind":"variable","name":"FhiDataTableCellSelector","type":{"text":"string"},"default":"'fhi-data-table-cell'"}]}

package/fhi-data-table-row.d.ts

@@ -0,0 +1 @@
+export {};

package/fhi-data-table-row.js

@@ -0,0 +1,98 @@
+import { i as c, n as f, a as u, b as v, t as w } from "./property-DGdAXcEz.js";
+import { e as p } from "./base-D76d76ww.js";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function y(t) {
+  return (e, l) => {
+    const { slot: r, selector: a } = {}, i = "slot" + (r ? `[name=${r}]` : ":not([name])");
+    return p(e, l, { get() {
+      var h;
+      const o = (h = this.renderRoot) == null ? void 0 : h.querySelector(i), d = (o == null ? void 0 : o.assignedElements(t)) ?? [];
+      return a === void 0 ? d : d.filter((b) => b.matches(a));
+    } });
+  };
+}
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, l, r) => {
+  for (var a = r > 1 ? void 0 : r ? g(e, l) : e, i = t.length - 1, o; i >= 0; i--)
+    (o = t[i]) && (a = (r ? o(e, l, a) : o(a)) || a);
+  return r && a && m(e, l, a), a;
+};
+const C = "fhi-data-table-row";
+let s = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "body";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.role = "row";
+  }
+  update(t) {
+    t.has("variant") && this.variant !== "body" && this.variant !== "header" && (this.variant = "body"), super.update(t);
+  }
+  updated(t) {
+    t.has("variant") && this.setCellVariants(), super.updated(t);
+  }
+  handleSlotChange() {
+    this.setCellVariants();
+  }
+  setCellVariants() {
+    this.slotElements.forEach((t) => {
+      if (t.tagName.toLowerCase() === "fhi-data-table-cell") {
+        const e = t;
+        e.variant !== this.variant && (e.variant = this.variant);
+      }
+    });
+  }
+  render() {
+    return v`<slot @slotchange=${this.handleSlotChange}></slot>`;
+  }
+};
+s.styles = c`
+    :host {
+      --fhi-data-table-row-border-style: unset;
+      --fhi-data-table-row-border-width: unset;
+      --fhi-data-table-row-border-color: unset;
+
+      --fhi-data-table-row-background: unset;
+    }
+
+    :host {
+      display: table-row;
+      background: var(--fhi-data-table-row-background);
+
+      --fhi-data-table-row-border-style: none none solid none;
+      --fhi-data-table-row-border-width: var(--fhi-dimension-border-width);
+      --fhi-data-table-row-border-color: var(
+        --fhi-color-neutral-surface-active
+      );
+
+      ::slotted(fhi-data-table-cell) {
+        --fhi-data-table-cell-background: var(--fhi-data-table-row-background);
+        --fhi-data-table-cell-border-style: var(
+          --fhi-data-table-row-border-style
+        );
+        --fhi-data-table-cell-border-width: var(
+          --fhi-data-table-row-border-width
+        );
+        --fhi-data-table-cell-border-color: var(
+          --fhi-data-table-row-border-color
+        );
+      }
+    }
+  `;
+n([
+  f({ type: String, reflect: !0 })
+], s.prototype, "variant", 2);
+n([
+  y()
+], s.prototype, "slotElements", 2);
+s = n([
+  w(C)
+], s);
+export {
+  s as FhiDataTableRow,
+  C as FhiDataTableRowSelector
+};
+//# sourceMappingURL=fhi-data-table-row.js.map

package/fhi-data-table-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-data-table-row.js","sources":["../../../../node_modules/.pnpm/@lit+reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/query-assigned-elements.js","../../src/components/data-table/fhi-data-table-row/fhi-data-table-row.component.ts"],"sourcesContent":["import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */function o(o){return(e,n)=>{const{slot:r,selector:s}=o??{},c=\"slot\"+(r?`[name=${r}]`:\":not([name])\");return t(e,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}export{o as queryAssignedElements};\n//# sourceMappingURL=query-assigned-elements.js.map\n","import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { queryAssignedElements } from 'lit/decorators.js';\nimport { FhiDataTableCell } from '../fhi-data-table-cell/fhi-data-table-cell.component';\n\nexport const FhiDataTableRowSelector = 'fhi-data-table-row';\n\n/**\n * ## FHI Table Row\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs}\n *\n * The `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\n * It allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n *\n * For various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-row\n * @element fhi-data-table-row\n */\n@customElement(FhiDataTableRowSelector)\nexport class FhiDataTableRow extends LitElement {\n  /**\n   * Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\n   * If the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.\n   * @type {'header' | 'body'}\n   */\n  @property({ type: String, reflect: true })\n  variant: 'header' | 'body' = 'body';\n\n  @queryAssignedElements()\n  slotElements!: Array<HTMLElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.role = 'row';\n  }\n\n  protected update(changedProperties: PropertyValues): void {\n    if (changedProperties.has('variant')) {\n      if (this.variant !== 'body' && this.variant !== 'header') {\n        this.variant = 'body';\n      }\n    }\n\n    super.update(changedProperties);\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    if (changedProperties.has('variant')) {\n      this.setCellVariants();\n    }\n\n    super.updated(changedProperties);\n  }\n\n  private handleSlotChange() {\n    this.setCellVariants();\n  }\n\n  private setCellVariants() {\n    this.slotElements.forEach(element => {\n      if (element.tagName.toLowerCase() === 'fhi-data-table-cell') {\n        const tableCell = element as FhiDataTableCell;\n\n        if (tableCell.variant !== this.variant) {\n          tableCell.variant = this.variant;\n        }\n      }\n    });\n  }\n\n  render() {\n    return html`<slot @slotchange=${this.handleSlotChange}></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-data-table-row-border-style: unset;\n      --fhi-data-table-row-border-width: unset;\n      --fhi-data-table-row-border-color: unset;\n\n      --fhi-data-table-row-background: unset;\n    }\n\n    :host {\n      display: table-row;\n      background: var(--fhi-data-table-row-background);\n\n      --fhi-data-table-row-border-style: none none solid none;\n      --fhi-data-table-row-border-width: var(--fhi-dimension-border-width);\n      --fhi-data-table-row-border-color: var(\n        --fhi-color-neutral-surface-active\n      );\n\n      ::slotted(fhi-data-table-cell) {\n        --fhi-data-table-cell-background: var(--fhi-data-table-row-background);\n        --fhi-data-table-cell-border-style: var(\n          --fhi-data-table-row-border-style\n        );\n        --fhi-data-table-cell-border-width: var(\n          --fhi-data-table-row-border-width\n        );\n        --fhi-data-table-cell-border-color: var(\n          --fhi-data-table-row-border-color\n        );\n      }\n    }\n  `;\n}\n"],"names":["o","e","n","s","c","t","_a","FhiDataTableRowSelector","FhiDataTableRow","LitElement","changedProperties","element","tableCell","html","css","__decorateClass","property","queryAssignedElements","customElement"],"mappings":";;AACA;AAAA;AAAA;AAAA;AAAA;AAIG,SAASA,EAAEA,GAAE;AAAC,SAAM,CAACC,GAAEC,MAAI;AAAC,UAAK,EAAC,MAAK,GAAE,UAASC,EAAC,IAAK,IAAGC,IAAE,UAAQ,IAAE,SAAS,CAAC,MAAI;AAAgB,WAAOC,EAAEJ,GAAEC,GAAE,EAAC,MAAK;;AAAC,YAAMG,KAAEC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAcF,IAAGH,KAAEI,KAAA,gBAAAA,EAAG,iBAAiBL,OAAI,CAAA;AAAG,aAAgBG,MAAT,SAAWF,IAAEA,EAAE,OAAO,CAAAI,MAAGA,EAAE,QAAQF,CAAC,CAAC;AAAA,IAAC,EAAC,CAAC;AAAA,EAAC;AAAC;;;;;;ACA7O,MAAMI,IAA0B;AAgBhC,IAAMC,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAOL,KAAA,UAA6B;AAAA,EAAA;AAAA,EAK7B,oBAA0B;AACxB,UAAM,kBAAA,GACN,KAAK,OAAO;AAAA,EACd;AAAA,EAEU,OAAOC,GAAyC;AACxD,IAAIA,EAAkB,IAAI,SAAS,KAC7B,KAAK,YAAY,UAAU,KAAK,YAAY,aAC9C,KAAK,UAAU,SAInB,MAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEU,QAAQA,GAAyC;AACzD,IAAIA,EAAkB,IAAI,SAAS,KACjC,KAAK,gBAAA,GAGP,MAAM,QAAQA,CAAiB;AAAA,EACjC;AAAA,EAEQ,mBAAmB;AACzB,SAAK,gBAAA;AAAA,EACP;AAAA,EAEQ,kBAAkB;AACxB,SAAK,aAAa,QAAQ,CAAAC,MAAW;AACnC,UAAIA,EAAQ,QAAQ,YAAA,MAAkB,uBAAuB;AAC3D,cAAMC,IAAYD;AAElB,QAAIC,EAAU,YAAY,KAAK,YAC7BA,EAAU,UAAU,KAAK;AAAA,MAE7B;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAOC,sBAAyB,KAAK,gBAAgB;AAAA,EACvD;AAmCF;AAxFaL,EAuDJ,SAASM;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAhDhBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BR,EAOX,WAAA,WAAA,CAAA;AAGAO,EAAA;AAAA,EADCE,EAAA;AAAsB,GATZT,EAUX,WAAA,gBAAA,CAAA;AAVWA,IAANO,EAAA;AAAA,EADNG,EAAcX,CAAuB;AAAA,GACzBC,CAAA;","x_google_ignoreList":[0]}

package/fhi-data-table-row.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/data-table/fhi-data-table-row/fhi-data-table-row.component.ts","declarations":[{"kind":"class","description":"## FHI Table Row\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table-row--docs\n\nThe `<fhi-data-table-row>` component is an implementation of a table row according to the FHI Design System guidelines.\nIt allows users to properly display data within a `<fhi-data-table>` using `<fhi-data-table-cell>` components.\n\nFor various reasons, the `<fhi-data-table-row>` component does not use the native HTML `<tr>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.","name":"FhiDataTableRow","members":[{"kind":"method","name":"handleSlotChange","privacy":"private"},{"kind":"method","name":"setCellVariants","privacy":"private"},{"kind":"field","name":"slotElements","type":{"text":"Array<HTMLElement>"}},{"kind":"field","name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\nIf the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.","attribute":"variant","reflects":true}],"attributes":[{"name":"variant","type":{"text":"'header' | 'body'"},"default":"'body'","description":"Defines the variant of the table row, which can be either 'header' or 'body'. This determines the styling and role of the row within the table.\nIf the variant is set to 'header', all child `<fhi-data-table-cell>` elements will also be set to the 'header' variant to ensure consistent styling.","fieldName":"variant"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table-row","customElement":true},{"kind":"variable","name":"FhiDataTableRowSelector","type":{"text":"string"},"default":"'fhi-data-table-row'"}]}

package/fhi-data-table.d.ts

@@ -0,0 +1 @@
+export {};

package/fhi-data-table.js

@@ -0,0 +1,94 @@
+import { i as h, n as b, a as c, b as n, t as f } from "./property-DGdAXcEz.js";
+import "./fhi-grid.js";
+import "./fhi-body.js";
+var u = Object.defineProperty, p = Object.getOwnPropertyDescriptor, s = (t, r, l, o) => {
+  for (var a = o > 1 ? void 0 : o ? p(r, l) : r, i = t.length - 1, d; i >= 0; i--)
+    (d = t[i]) && (a = (o ? d(r, l, a) : d(a)) || a);
+  return o && a && u(r, l, a), a;
+};
+const v = "fhi-data-table";
+let e = class extends c {
+  connectedCallback() {
+    super.connectedCallback(), this.role = "table";
+  }
+  update(t) {
+    super.update(t);
+  }
+  updated(t) {
+    super.updated(t), t.has("caption") && (this.caption ? this.setAttribute("aria-label", this.caption) : this.removeAttribute("aria-label"));
+  }
+  render() {
+    return n`
+      <div class="table-content">
+        <slot></slot>
+      </div>
+      ${this.caption ? n`<fhi-body class="caption" size="small"
+            >${this.caption}</fhi-body
+          >` : null}
+    `;
+  }
+};
+e.styles = h`
+    :host {
+      --fhi-data-table-border-color: unset;
+      --fhi-data-table-border-radius: unset;
+
+      --fhi-data-table-background: unset;
+    }
+
+    :host {
+      --fhi-data-table-border-color: var(--fhi-color-neutral-surface-active);
+      --fhi-data-table-border-radius: var(--fhi-border-radius-100);
+
+      color: var(--fhi-color-neutral-text-default);
+
+      .caption {
+        display: block;
+        padding: var(--fhi-spacing-150);
+      }
+
+      .table-content {
+        display: table;
+        width: 100%;
+        overflow: hidden;
+        border: var(--fhi-dimension-border-width) solid
+          var(--fhi-data-table-border-color);
+        border-radius: var(--fhi-data-table-border-radius);
+        background: var(--fhi-data-table-background);
+      }
+
+      ::slotted(fhi-data-table-row:last-child) {
+        --fhi-data-table-row-border-style: none none none none;
+        --fhi-data-table-row-border-width: unset;
+        --fhi-data-table-row-border-color: unset;
+      }
+    }
+
+    :host([striped]) {
+      ::slotted(fhi-data-table-row:nth-child(even)) {
+        --fhi-data-table-row-background: var(
+          --fhi-color-neutral-background-subtle
+        );
+      }
+
+      ::slotted(fhi-data-table-row:nth-child(odd)) {
+        --fhi-data-table-row-background: var(
+          --fhi-color-neutral-background-default
+        );
+      }
+    }
+  `;
+s([
+  b({ type: String, reflect: !0 })
+], e.prototype, "caption", 2);
+s([
+  b({ type: Boolean, reflect: !0 })
+], e.prototype, "striped", 2);
+e = s([
+  f(v)
+], e);
+export {
+  e as FhiDataTable,
+  v as FhiDataTableSelector
+};
+//# sourceMappingURL=fhi-data-table.js.map

package/fhi-data-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-data-table.js","sources":["../../src/components/data-table/fhi-data-table/fhi-data-table.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport '../../fhi-grid/fhi-grid.component';\nimport '../../typography/fhi-body/fhi-body.component';\n\nexport const FhiDataTableSelector = 'fhi-data-table';\n\n/**\n * ## FHI Table\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs}\n *\n * The `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\n * It allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n *\n * The `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n *\n * Example usage:\n * ```html\n * <fhi-data-table caption=\"Example Table\" columns=\"2fr 1fr 1fr\">\n *   <fhi-data-table-row variant=\"header\">\n *     <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n *     <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n *     <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n *   </fhi-data-table-row>\n *  <fhi-data-table-row>\n *    <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n *    <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n *    <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n *  </fhi-data-table-row>\n * </fhi-data-table>\n * ```\n *\n * @tag fhi-data-table\n * @element fhi-data-table\n */\n@customElement(FhiDataTableSelector)\nexport class FhiDataTable extends LitElement {\n  /**\n   * The caption of the table. This should provide a brief description of the table's content.\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  caption?: string;\n\n  /**\n   * If set to true, the table will have alternating row colors (striped effect) for better readability.\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  striped?: boolean;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.role = 'table';\n  }\n\n  protected update(changedProperties: PropertyValues): void {\n    super.update(changedProperties);\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('caption')) {\n      if (this.caption) {\n        this.setAttribute('aria-label', this.caption);\n      } else {\n        this.removeAttribute('aria-label');\n      }\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"table-content\">\n        <slot></slot>\n      </div>\n      ${this.caption\n        ? html`<fhi-body class=\"caption\" size=\"small\"\n            >${this.caption}</fhi-body\n          >`\n        : null}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --fhi-data-table-border-color: unset;\n      --fhi-data-table-border-radius: unset;\n\n      --fhi-data-table-background: unset;\n    }\n\n    :host {\n      --fhi-data-table-border-color: var(--fhi-color-neutral-surface-active);\n      --fhi-data-table-border-radius: var(--fhi-border-radius-100);\n\n      color: var(--fhi-color-neutral-text-default);\n\n      .caption {\n        display: block;\n        padding: var(--fhi-spacing-150);\n      }\n\n      .table-content {\n        display: table;\n        width: 100%;\n        overflow: hidden;\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-data-table-border-color);\n        border-radius: var(--fhi-data-table-border-radius);\n        background: var(--fhi-data-table-background);\n      }\n\n      ::slotted(fhi-data-table-row:last-child) {\n        --fhi-data-table-row-border-style: none none none none;\n        --fhi-data-table-row-border-width: unset;\n        --fhi-data-table-row-border-color: unset;\n      }\n    }\n\n    :host([striped]) {\n      ::slotted(fhi-data-table-row:nth-child(even)) {\n        --fhi-data-table-row-background: var(\n          --fhi-color-neutral-background-subtle\n        );\n      }\n\n      ::slotted(fhi-data-table-row:nth-child(odd)) {\n        --fhi-data-table-row-background: var(\n          --fhi-color-neutral-background-default\n        );\n      }\n    }\n  `;\n}\n"],"names":["FhiDataTableSelector","FhiDataTable","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAMO,MAAMA,IAAuB;AAgC7B,IAAMC,IAAN,cAA2BC,EAAW;AAAA,EAe3C,oBAA0B;AACxB,UAAM,kBAAA,GAEN,KAAK,OAAO;AAAA,EACd;AAAA,EAEU,OAAOC,GAAyC;AACxD,UAAM,OAAOA,CAAiB;AAAA,EAChC;AAAA,EAEU,QAAQA,GAAyC;AACzD,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,SAAS,MAC7B,KAAK,UACP,KAAK,aAAa,cAAc,KAAK,OAAO,IAE5C,KAAK,gBAAgB,YAAY;AAAA,EAGvC;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA,QAIH,KAAK,UACHA;AAAAA,eACK,KAAK,OAAO;AAAA,eAEjB,IAAI;AAAA;AAAA,EAEZ;AAoDF;AApGaH,EAkDJ,SAASI;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA5ChBC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAL9BN,EAMX,WAAA,WAAA,CAAA;AAOAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAZ/BN,EAaX,WAAA,WAAA,CAAA;AAbWA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAoB;AAAA,GACtBC,CAAA;"}

package/fhi-data-table.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/data-table/fhi-data-table/fhi-data-table.component.ts","declarations":[{"kind":"class","description":"## FHI Table\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-data-table--docs\n\nThe `<fhi-data-table>` component is an implementation of a table according to the FHI Design System guidelines.\nIt allows users to display tabular data in a structured format using `<fhi-data-table-row>` and `<fhi-data-table-cell>` components.\n\nThe `<fhi-data-table>` component does not use the native HTML `<table>` element. Instead, it relies on CSS Grid to achieve the desired layout and styling.\n\nExample usage:\n```html\n<fhi-data-table caption=\"Example Table\" columns=\"2fr 1fr 1fr\">\n  <fhi-data-table-row variant=\"header\">\n    <fhi-data-table-cell>Header 1</fhi-data-table-cell>\n    <fhi-data-table-cell>Header 2</fhi-data-table-cell>\n    <fhi-data-table-cell>Header 3</fhi-data-table-cell>\n  </fhi-data-table-row>\n <fhi-data-table-row>\n   <fhi-data-table-cell>Data 1</fhi-data-table-cell>\n   <fhi-data-table-cell>Data 2</fhi-data-table-cell>\n   <fhi-data-table-cell>Data 3</fhi-data-table-cell>\n </fhi-data-table-row>\n</fhi-data-table>\n```","name":"FhiDataTable","members":[{"kind":"field","name":"caption","type":{"text":"string"},"description":"The caption of the table. This should provide a brief description of the table's content.","attribute":"caption","reflects":true},{"kind":"field","name":"striped","type":{"text":"boolean"},"description":"If set to true, the table will have alternating row colors (striped effect) for better readability.","attribute":"striped","reflects":true}],"attributes":[{"name":"caption","type":{"text":"string"},"description":"The caption of the table. This should provide a brief description of the table's content.","fieldName":"caption"},{"name":"striped","type":{"text":"boolean"},"description":"If set to true, the table will have alternating row colors (striped effect) for better readability.","fieldName":"striped"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-data-table","customElement":true},{"kind":"variable","name":"FhiDataTableSelector","type":{"text":"string"},"default":"'fhi-data-table'"}]}

package/fhi-date-input.js

@@ -1,5 +1,5 @@
 import { i as c, n as o, a as u, b as l, t as g } from "./property-DGdAXcEz.js";
-import { e as y } from "./query-NJDNu0-P.js";
+import { e as y } from "./query-Ddbd72Um.js";
 import { o as d } from "./if-defined-BW6N1yuF.js";
 import "./fhi-icon-calendar.js";
 const v = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

package/fhi-modal-dialog.js

@@ -1,5 +1,5 @@
 import { i as g, n, a as p, b as f, t as c } from "./property-DGdAXcEz.js";
-import { e as h } from "./query-NJDNu0-P.js";
+import { e as h } from "./query-Ddbd72Um.js";
 import "./fhi-button.js";
 import "./fhi-icon-x.js";
 import "./fhi-headline.js";

package/fhi-radio.js

@@ -1,5 +1,5 @@
 import { i as h, n, a as u, b as p, t as b } from "./property-DGdAXcEz.js";
-import { e as v } from "./query-NJDNu0-P.js";
+import { e as v } from "./query-Ddbd72Um.js";
 import { o as f } from "./if-defined-BW6N1yuF.js";
 var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, d = (r, o, t, s) => {
   for (var e = s > 1 ? void 0 : s ? m(o, t) : o, a = r.length - 1, l; a >= 0; a--)

package/fhi-text-input.js

@@ -1,5 +1,5 @@
 import { i as c, n as a, a as g, b as s, t as u } from "./property-DGdAXcEz.js";
-import { e as y } from "./query-NJDNu0-P.js";
+import { e as y } from "./query-Ddbd72Um.js";
 import { o as d } from "./if-defined-BW6N1yuF.js";
 var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, e, i, l) => {
   for (var n = l > 1 ? void 0 : l ? f(e, i) : e, p = t.length - 1, h; p >= 0; p--)

package/fhi-tooltip.js

@@ -1,5 +1,5 @@
 import { n as j, i as Ht, a as It, b as Xt, t as jt } from "./property-DGdAXcEz.js";
-import { e as Lt } from "./query-NJDNu0-P.js";
+import { e as Lt } from "./query-Ddbd72Um.js";
 /**
  * @license
  * Copyright 2017 Google LLC