@folkehelseinstituttet/designsystem 0.35.0 → 0.37.0

package/fhi-body.manifest.json

@@ -0,0 +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'"}]}

package/fhi-button.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-button/fhi-button.component.ts","declarations":[{"kind":"class","description":"## FHI Button\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-button--docs\n\nThe `<fhi-button>` component is used to create interactive buttons in accordance with the FHI Design System guidelines.\nUse this component instead of the standard HTML `<button>` element to ensure consistent styling and behavior across your application.","name":"FhiButton","slots":[{"description":"The content of the button. This should be pure text, an icon or both.","name":""}],"members":[{"kind":"method","name":"_dispatchClickEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_getIconSize","privacy":"private","return":{"type":{"text":"string"}}},{"kind":"method","name":"_handleClick","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","optional":true,"type":{"text":"MouseEvent | KeyboardEvent"}}]},{"kind":"method","name":"_handleKeydown","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"method","name":"_handleKeyup","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"method","name":"_handleSelectStart","privacy":"private","return":{"type":{"text":"boolean"}}},{"kind":"method","name":"_handleSlotChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"method","name":"click","privacy":"public","return":{"type":{"text":"void"}},"description":"Programmatically clicks the button."},{"kind":"field","name":"color","type":{"text":"'accent' | 'neutral' | 'danger'"},"default":"'accent'","description":"Sets the color of the button.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge","reflects":true,"attribute":"color"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the button. This changes its appearance and makes it non-interactive.","reflects":true,"attribute":"disabled"},{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"readonly":true,"default":"true"},{"kind":"field","name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the button to one of the predefined options.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse","reflects":true,"attribute":"size"},{"kind":"field","name":"type","type":{"text":"'button' | 'submit' | 'reset'"},"default":"'submit'","description":"Sets the button's type. This determines the button's behavior when used within a form.\nThe predefined types conform to standard HTML button types.\n\nFor more information about button types, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type","attribute":"type"},{"kind":"field","name":"variant","type":{"text":"'strong' | 'subtle' | 'outlined' | 'text'"},"default":"'strong'","description":"Sets the button variant. The variant determines the button's visual style and emphasis.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant","reflects":true,"attribute":"variant"},{"kind":"field","name":"iconOnly","type":{"text":"boolean"},"default":"false","description":"Styles the button for icon-only content.\n\nIf you only have an icon as the child of the button, then you should set this property to `true`.","deprecated":"This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.","attribute":"icon-only"}],"events":[{"name":"click","type":{"text":"Event"},"description":"Standard DOM event with the type `click`.\nThis event is dispatched when the button is clicked, either via mouse or keyboard interaction."}],"attributes":[{"name":"color","type":{"text":"'accent' | 'neutral' | 'danger'"},"default":"'accent'","description":"Sets the color of the button.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#color-farge","fieldName":"color"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the button. This changes its appearance and makes it non-interactive.","fieldName":"disabled"},{"name":"size","type":{"text":"'large' | 'medium' | 'small'"},"default":"'medium'","description":"Sets the size of the button to one of the predefined options.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#size-st%C3%B8rrelse","fieldName":"size"},{"name":"type","type":{"text":"'button' | 'submit' | 'reset'"},"default":"'submit'","description":"Sets the button's type. This determines the button's behavior when used within a form.\nThe predefined types conform to standard HTML button types.\n\nFor more information about button types, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type","fieldName":"type"},{"name":"variant","type":{"text":"'strong' | 'subtle' | 'outlined' | 'text'"},"default":"'strong'","description":"Sets the button variant. The variant determines the button's visual style and emphasis.\n\nSee: https://designsystem.fhi.no/?path=/docs/komponenter-button--docs#variant","fieldName":"variant"},{"name":"icon-only","type":{"text":"boolean"},"default":"false","description":"Styles the button for icon-only content.\n\nIf you only have an icon as the child of the button, then you should set this property to `true`.","deprecated":"This property is deprecated and will be removed in a future release. The button will automatically detect if it only contains an icon and apply the appropriate styling.","fieldName":"iconOnly"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-button","customElement":true},{"kind":"variable","name":"FhiButtonSelector","type":{"text":"string"},"default":"'fhi-button'"}]}

package/fhi-checkbox.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-checkbox/fhi-checkbox.component.ts","declarations":[{"kind":"class","description":"## FHI Checkbox\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-checkbox--docs\n\nThe `<fhi-checkbox>` component represents a checkbox input element styled and implemented according to the FHI Design System guidelines.\nIt allows users to make binary choices, such as selecting or deselecting an option.","name":"FhiCheckbox","members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleChange","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleInput","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"method","name":"_updateFormValue","privacy":"private"},{"kind":"field","name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the checkbox is checked or not.","attribute":"checked"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the checkbox. This changes its appearance and makes it non-interactive.","reflects":true,"attribute":"disabled"},{"kind":"method","name":"formResetCallback","privacy":"public"},{"kind":"field","name":"label","type":{"text":"string"},"default":"undefined","description":"The text label assigned to and displayed next to the checkbox.\nYou should always provide a label.","attribute":"label"},{"kind":"field","name":"name","type":{"text":"string"},"default":"undefined","description":"The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.","attribute":"name"},{"kind":"field","name":"status","type":{"text":"'error' | undefined"},"description":"Sets the visual status of the checkbox. There is currently only one status available: `error`.\nThe `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.","reflects":true,"attribute":"status"},{"kind":"field","name":"value","type":{"text":"string"},"default":"'on'","description":"The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.","attribute":"value"}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the checkbox is checked or unchecked."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the checkbox is checked or unchecked."}],"attributes":[{"name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the checkbox is checked or not.","fieldName":"checked"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the checkbox. This changes its appearance and makes it non-interactive.","fieldName":"disabled"},{"name":"label","type":{"text":"string"},"default":"undefined","description":"The text label assigned to and displayed next to the checkbox.\nYou should always provide a label.","fieldName":"label"},{"name":"name","type":{"text":"string"},"default":"undefined","description":"The name of the checkbox. This is submitted with the form data as a `key` when the checkbox is checked.","fieldName":"name"},{"name":"status","type":{"text":"'error' | undefined"},"description":"Sets the visual status of the checkbox. There is currently only one status available: `error`.\nThe `error` status is used to indicate that there is an issue with the checkbox, such as a required checkbox not being checked.","fieldName":"status"},{"name":"value","type":{"text":"string"},"default":"'on'","description":"The value of the checkbox. This is submitted with the form data as a `value` when the checkbox is checked.","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-checkbox","customElement":true},{"kind":"variable","name":"FhiCheckboxSelector","type":{"text":"string"},"default":"'fhi-checkbox'"}]}

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-date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-date-input.js","sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n  /** @internal */\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the input field.\n   * An input field should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the input field.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The help-text shown above the input field.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n   * @type {string}\n   */\n  @property({ type: String }) min?: FhiDateValue = undefined;\n\n  /**\n   * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n   * @type {string}\n   */\n  @property({ type: String }) max?: FhiDateValue = undefined;\n\n  /**\n   * Sets the visual status of the input. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the input.  This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) disabled? = false;\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _name?: string | undefined = undefined;\n\n  /**\n   * The name of the input. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n\n  set name(newName: string | undefined) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _value?: string = '';\n\n  /**\n   * The default value of the input field, formatted as `YYYY-MM-DD`.\n   *\n   * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): FhiDateValue {\n    return this._value as FhiDateValue;\n  }\n\n  set value(newValue: FhiDateValue) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value ?? null);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _handleChange(): void {\n    this._dispatchChangeEvent();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleInput(event: Event): void {\n    this.value = this._input.value as FhiDateValue;\n    this._internals.setFormValue(this.value ?? null);\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') as FhiDateValue;\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _showDate(event?: KeyboardEvent) {\n    if (\n      event &&\n      event.type == 'keydown' &&\n      event.key !== 'Enter' &&\n      event.code !== 'Space'\n    ) {\n      return;\n    }\n    this._input.showPicker();\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\n      <div class=\"input-container\">\n        <input\n          type=\"date\"\n          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${this.value ?? ''}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          @change=${this._handleChange}\n          @input=${this._handleInput}\n          @keydown=${this._handleKeyDown}\n        />\n        <span\n          class=\"date-icon\"\n          @click=${this._showDate}\n          @keydown=${this._showDate}\n          tabindex=${isSafari() ? '-1' : '0'}\n          role=\"button\"\n          aria-label=\"Vis datovelger\"\n          aria-haspopup=\"true\"\n          ><fhi-icon-calendar></fhi-icon-calendar\n        ></span>\n      </div>\n      ${this.message && html`<p class=\"message\">${this.message}</p>`}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --typography-font-family: var(--fhi-font-family-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      --dimension-width: calc(var(--fhi-spacing-1000) * 2);\n\n      /* label */\n      --color-label-text: var(--fhi-color-neutral-text-default);\n      --color-label-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-label-font-family: var(--fhi-typography-label-small-font);\n      --typography-label-font-weight: var(\n        --fhi-typography-label-small-font-weight\n      );\n      --typography-label-font-size: var(--fhi-typography-label-small-font-size);\n      --typography-label-line-height: var(\n        --fhi-typography-label-small-line-height\n      );\n      --typography-label-letter-spacing: var(\n        --fhi-typography-label-small-letter-spacing\n      );\n      --dimension-label-margin-bottom: var(--fhi-spacing-050);\n\n      /* input */\n      --color-input-text: var(--fhi-color-neutral-text-default);\n      --color-input-text-error: var(--fhi-color-danger-text-default);\n      --color-input-background: var(--fhi-color-neutral-background-default);\n      --color-input-background-active: var(\n        --fhi-color-accent-background-default\n      );\n      --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n      --color-input-background-error: var(\n        --fhi-color-danger-background-default\n      );\n      --color-input-border: var(--fhi-color-neutral-border-default);\n      --color-input-border-hover: var(--fhi-color-accent-border-default);\n      --color-input-border-active: var(--fhi-color-accent-border-strong);\n      --color-input-border-error: var(--fhi-color-danger-border-strong);\n      --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n      --color-input-selection-background: var(\n        --fhi-color-accent-surface-active\n      );\n\n      --typography-input-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n      --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n      --typography-input-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-input-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-input-height: var(--fhi-spacing-500);\n      --dimension-input-border-radius: var(--fhi-border-radius-050);\n      --dimension-input-padding-left: var(--fhi-spacing-150);\n      --dimension-input-padding-right: var(--fhi-spacing-150);\n\n      --motion-input-transition: all var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      /* icon */\n      --dimension-icon-margin-right: var(--fhi-spacing-100);\n      --dimension-icon-padding-left: var(--fhi-spacing-050);\n\n      --color-icon-focus-outline: var(--fhi-color-accent-border-default);\n\n      --dimension-icon-border-radius: var(--fhi-border-radius-050);\n\n      /* message */\n      --color-message-text: var(--fhi-color-neutral-text-default);\n      --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n      --typography-message-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-message-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-message-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-message-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n\n      --dimension-message-margin-top: var(--fhi-spacing-050);\n\n      /* help-text */\n      --color-help-text-text: var(--fhi-color-neutral-text-subtle);\n      --color-help-text-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-help-text-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-help-text-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-help-text-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-help-text-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n      --dimension-help-text-margin-bottom: var(--fhi-spacing-050);\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--typography-font-family);\n      -webkit-font-smoothing: antialiased;\n      width: var(--dimension-width);\n\n      label {\n        font-weight: var(--typography-label-font-weight);\n        font-size: var(--typography-label-font-size);\n        line-height: var(--typography-label-line-height);\n        letter-spacing: var(--typography-label-letter-spacing);\n        color: var(--color-label-text);\n        margin: 0 0 var(--dimension-label-margin-bottom) 0;\n      }\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input[type='date'] {\n        font-family: var(--typography-font-family);\n        font-weight: var(--typography-input-font-weight);\n        font-size: var(--typography-input-font-size);\n        line-height: var(--typography-input-line-height);\n        letter-spacing: var(--typography-input-letter-spacing);\n        box-sizing: border-box;\n        height: var(--dimension-input-height);\n        border: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        border-radius: var(--dimension-input-border-radius);\n        padding: 0 var(--dimension-input-padding-right) 0\n          var(--dimension-input-padding-left);\n        margin-top: var(--dimension-input-margin-top);\n        color: var(--color-input-text);\n        background-color: var(--color-input-background);\n        transition: var(--motion-input-transition);\n        appearance: none;\n        -moz-appearance: none;\n        -webkit-appearance: none;\n        width: 100%;\n        &:hover {\n          border-color: var(--color-input-border-hover);\n          background-color: var(--color-input-background-hover);\n        }\n        &:focus {\n          outline: none;\n          border-color: var(--color-input-border-active);\n          background-color: var(--color-input-background-active);\n        }\n      }\n      .message {\n        margin: var(--dimension-message-margin-top) 0 0 0;\n        color: var(--color-message-text);\n        font-weight: var(--typography-message-font-weight);\n        font-size: var(--typography-message-font-size);\n        line-height: var(--typography-message-line-height);\n        letter-spacing: var(--typography-message-letter-spacing);\n      }\n\n      .help-text {\n        margin: var(--dimension-help-text-margin-top) 0 0 0;\n        color: var(--color-help-text-text);\n        font-weight: var(--typography-help-text-font-weight);\n        font-size: var(--typography-help-text-font-size);\n        line-height: var(--typography-help-text-line-height);\n        letter-spacing: var(--typography-help-text-letter-spacing);\n        margin: 0 0 var(--dimension-help-text-margin-bottom) 0;\n      }\n      [type='date']::-webkit-inner-spin-button {\n        opacity: 0;\n      }\n      [type='date']::-webkit-calendar-picker-indicator {\n        opacity: 0;\n        -webkit-appearance: none;\n        display: none;\n        visibility: hidden;\n\n        &:target {\n          outline: solid;\n          font-size: 5rem;\n        }\n      }\n      .input-container {\n        height: var(--dimension-input-height);\n        position: relative;\n      }\n      .date-icon {\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: var(--dimension-icon-margin-right);\n        height: fit-content;\n        transition: var(--motion-input-transition);\n        border-radius: var(--dimension-icon-border-radius);\n        &:focus {\n          outline: solid var(--color-icon-focus-outline);\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      cursor: not-allowed;\n      * {\n        cursor: not-allowed;\n      }\n      input[type='date'] {\n        &:hover {\n          border-color: var(--color-input-border);\n          background-color: var(--color-input-background);\n        }\n      }\n      .date-icon {\n        background-color: unset;\n        &:focus {\n          outline: none;\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input[type='date'] {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        &:hover + .date-icon {\n          background-color: unset;\n        }\n      }\n      .date-icon {\n        background-color: unset;\n        display: none;\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--color-label-text-error);\n      }\n      input[type='date'] {\n        border-color: var(--color-input-border-error);\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n      .message {\n        color: var(--color-message-text-error);\n      }\n      .help-text {\n        color: var(--color-help-text-text-error);\n      }\n      .date-icon {\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n    }\n\n    @-moz-document url-prefix() {\n      :host {\n        .date-icon {\n          display: none;\n          visibility: hidden;\n        }\n      }\n    }\n  `;\n}\n"],"names":["isSafari","FhiDateInputSelector","FhiDateInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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A;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;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;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;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;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;AA/MYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfX,EASiB,WAAA,SAAA,CAAA;AAOAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfX,EAgBiB,WAAA,WAAA,CAAA;AAOwBU,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAvBvCX,EAuByC,WAAA,YAAA,CAAA;AAOxBU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9BfX,EA8BiB,WAAA,OAAA,CAAA;AAMAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfX,EAoCiB,WAAA,OAAA,CAAA;AASeU,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7C9BX,EA6CgC,WAAA,UAAA,CAAA;AAOCU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApD/BX,EAoDiC,WAAA,YAAA,CAAA;AAOAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3D/BX,EA2DiC,WAAA,YAAA,CAAA;AAGpCU,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GA7DZZ,EA8DH,WAAA,UAAA,CAAA;AAcJU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3E9BX,EA4EP,WAAA,QAAA,CAAA;AAwBAU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnGfX,EAoGP,WAAA,SAAA,CAAA;AApGOA,IAANU,EAAA;AAAA,EADNG,EAAcd,CAAoB;AAAA,GACtBC,CAAA;"}
+{"version":3,"file":"fhi-date-input.js","sources":["../../src/utils/browser.ts","../../src/components/fhi-date-input/fhi-date-input.component.ts"],"sourcesContent":["/**\n * Check if the browser is Safari\n * @returns `true` if the browser is Safari\n */\nconst isSafari = () => {\n  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n};\n\nexport { isSafari };\n","import { html, css, LitElement } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport '../icons/fhi-icon-calendar.component.js';\n\nimport { isSafari } from '../../utils/browser';\n\nexport const FhiDateInputSelector = 'fhi-date-input';\n\nexport type FhiDateValue = `${number}-${number}-${number}` | undefined; // YYYY-MM-DD\n\n/**\n * ## FHI Date input\n *\n * {@link https://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs}\n *\n * The `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\n * It allows users to select or input a date.\n *\n * @tag fhi-date-input\n * @element fhi-date-input\n *\n */\n@customElement(FhiDateInputSelector)\nexport class FhiDateInput extends LitElement {\n  /** @internal */\n  static readonly formAssociated = true;\n\n  /**\n   * The text that labels the input field.\n   * An input field should always have a label to ensure accessibility.\n   * @type {string}\n   */\n  @property({ type: String }) label?: string = undefined;\n\n  /**\n   * The message shown beneath the input field.\n   * This is often used to provide additional information or feedback to the user.\n   * @type {string}\n   */\n  @property({ type: String }) message?: string = undefined;\n\n  /**\n   * The help-text shown above the input field.\n   * This is often used to provide additional information to the user.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'help-text' }) helpText?: string =\n    undefined;\n\n  /**\n   * Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.\n   * @type {string}\n   */\n  @property({ type: String }) min?: FhiDateValue = undefined;\n\n  /**\n   * Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.\n   * @type {string}\n   */\n  @property({ type: String }) max?: FhiDateValue = undefined;\n\n  /**\n   * Sets the visual status of the input. There is currently only one status available: `error`.\n   *\n   * The `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.\n   * @reflect\n   * @type {'error'}\n   */\n  @property({ type: String, reflect: true }) status?: 'error' = undefined;\n\n  /**\n   * Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) readonly? = false;\n\n  /**\n   * Disables the input.  This changes its appearance and makes it non-interactive.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) disabled? = false;\n\n  @query('#input-element')\n  private _input!: HTMLInputElement;\n\n  private _name?: string | undefined = undefined;\n\n  /**\n   * The name of the input. This is submitted with the form data as a `key`.\n   *\n   * This attribute conforms with the standard HTML `name` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name}\n   *\n   * @reflect\n   * @type {string}\n   */\n  @property({ type: String, reflect: true })\n  get name(): string | undefined {\n    return this._name;\n  }\n\n  set name(newName: string | undefined) {\n    const oldName = this._name;\n    this._name = newName;\n    this.requestUpdate('name', oldName);\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _value?: string = '';\n\n  /**\n   * The default value of the input field, formatted as `YYYY-MM-DD`.\n   *\n   * You can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n   *\n   * This attribute conforms with the standard HTML `value` attribute for input fields.\n   * See: {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value}\n   *\n   * @type {string}\n   */\n  @property({ type: String })\n  get value(): FhiDateValue {\n    return this._value as FhiDateValue;\n  }\n\n  set value(newValue: FhiDateValue) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n    this._internals.setFormValue(this._value ?? null);\n  }\n\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    this._internals = this.attachInternals();\n  }\n\n  public connectedCallback(): void {\n    super.connectedCallback();\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _handleChange(): void {\n    this._dispatchChangeEvent();\n  }\n\n  private _dispatchChangeEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `change`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleInput(event: Event): void {\n    this.value = this._input.value as FhiDateValue;\n    this._internals.setFormValue(this.value ?? null);\n    event.stopPropagation();\n    this._dispatchInputEvent();\n  }\n\n  private _dispatchInputEvent(): void {\n    /**\n     * @type {Event} - Standard DOM event with the type `input`.\n     * This event is dispatched when the value of the input changes.\n     */\n    this.dispatchEvent(\n      new Event('input', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter' && this._internals.form) {\n      this._internals.form!.requestSubmit();\n    }\n  }\n\n  public formResetCallback(): void {\n    this.value = this.getAttribute('value') as FhiDateValue;\n    this._internals.setFormValue(this.value ?? null);\n  }\n\n  private _showDate(event?: KeyboardEvent) {\n    if (\n      event &&\n      event.type == 'keydown' &&\n      event.key !== 'Enter' &&\n      event.code !== 'Space'\n    ) {\n      return;\n    }\n    this._input.showPicker();\n  }\n\n  render() {\n    return html`\n      ${this.label && html`<label for=\"input-element\">${this.label}</label>`}\n      ${this.helpText && html`<p class=\"help-text\">${this.helpText}</p>`}\n      <div class=\"input-container\">\n        <input\n          type=\"date\"\n          id=\"input-element\"\n          name=${ifDefined(this.name)}\n          min=${ifDefined(this.min)}\n          max=${ifDefined(this.max)}\n          .value=${this.value ?? ''}\n          ?readonly=${this.readonly}\n          ?disabled=${this.disabled}\n          @change=${this._handleChange}\n          @input=${this._handleInput}\n          @keydown=${this._handleKeyDown}\n        />\n        <span\n          class=\"date-icon\"\n          @click=${this._showDate}\n          @keydown=${this._showDate}\n          tabindex=${isSafari() ? '-1' : '0'}\n          role=\"button\"\n          aria-label=\"Vis datovelger\"\n          aria-haspopup=\"true\"\n          ><fhi-icon-calendar></fhi-icon-calendar\n        ></span>\n      </div>\n      ${this.message && html`<p class=\"message\">${this.message}</p>`}\n    `;\n  }\n\n  static styles = css`\n    :host {\n      --typography-font-family: var(--fhi-font-family-default);\n\n      --opacity-disabled: var(--fhi-opacity-disabled);\n\n      --dimension-width: calc(var(--fhi-spacing-1000) * 2);\n\n      /* label */\n      --color-label-text: var(--fhi-color-neutral-text-default);\n      --color-label-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-label-font-family: var(--fhi-typography-label-small-font);\n      --typography-label-font-weight: var(\n        --fhi-typography-label-small-font-weight\n      );\n      --typography-label-font-size: var(--fhi-typography-label-small-font-size);\n      --typography-label-line-height: var(\n        --fhi-typography-label-small-line-height\n      );\n      --typography-label-letter-spacing: var(\n        --fhi-typography-label-small-letter-spacing\n      );\n      --dimension-label-margin-bottom: var(--fhi-spacing-050);\n\n      /* input */\n      --color-input-text: var(--fhi-color-neutral-text-default);\n      --color-input-text-error: var(--fhi-color-danger-text-default);\n      --color-input-background: var(--fhi-color-neutral-background-default);\n      --color-input-background-active: var(\n        --fhi-color-accent-background-default\n      );\n      --color-input-background-hover: var(--fhi-color-accent-background-subtle);\n      --color-input-background-error: var(\n        --fhi-color-danger-background-default\n      );\n      --color-input-border: var(--fhi-color-neutral-border-default);\n      --color-input-border-hover: var(--fhi-color-accent-border-default);\n      --color-input-border-active: var(--fhi-color-accent-border-strong);\n      --color-input-border-error: var(--fhi-color-danger-border-strong);\n      --color-input-border-disabled: var(--fhi-color-neutral-border-default);\n      --color-input-selection-background: var(\n        --fhi-color-accent-surface-active\n      );\n\n      --typography-input-font-weight: var(\n        --fhi-typography-body-medium-font-weight\n      );\n      --typography-input-font-size: var(--fhi-typography-body-medium-font-size);\n      --typography-input-line-height: var(\n        --fhi-typography-body-medium-line-height\n      );\n      --typography-input-letter-spacing: var(\n        --fhi-typography-body-medium-letter-spacing\n      );\n\n      --dimension-input-border-width: var(--fhi-dimension-border-width);\n\n      --dimension-input-height: var(--fhi-spacing-500);\n      --dimension-input-border-radius: var(--fhi-border-radius-050);\n      --dimension-input-padding-left: var(--fhi-spacing-150);\n      --dimension-input-padding-right: var(--fhi-spacing-150);\n\n      --motion-input-transition: all var(--fhi-motion-ease-default)\n        var(--fhi-motion-duration-quick);\n\n      /* icon */\n      --dimension-icon-margin-right: var(--fhi-spacing-100);\n      --dimension-icon-padding-left: var(--fhi-spacing-050);\n\n      --color-icon-focus-outline: var(--fhi-color-accent-border-default);\n\n      --dimension-icon-border-radius: var(--fhi-border-radius-050);\n\n      /* message */\n      --color-message-text: var(--fhi-color-neutral-text-default);\n      --color-message-text-error: var(--fhi-color-danger-text-subtle);\n\n      --typography-message-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-message-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-message-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-message-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n\n      --dimension-message-margin-top: var(--fhi-spacing-050);\n\n      /* help-text */\n      --color-help-text-text: var(--fhi-color-neutral-text-subtle);\n      --color-help-text-text-error: var(--fhi-color-danger-text-default);\n\n      --typography-help-text-font-weight: var(\n        --fhi-typography-body-small-font-weight\n      );\n      --typography-help-text-font-size: var(\n        --fhi-typography-body-small-font-size\n      );\n      --typography-help-text-line-height: var(\n        --fhi-typography-body-small-line-height\n      );\n      --typography-help-text-letter-spacing: var(\n        --fhi-typography-body-small-letter-spacing\n      );\n      --dimension-help-text-margin-bottom: var(--fhi-spacing-050);\n    }\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      font-family: var(--typography-font-family);\n      -webkit-font-smoothing: antialiased;\n      width: var(--dimension-width);\n\n      label {\n        font-weight: var(--typography-label-font-weight);\n        font-size: var(--typography-label-font-size);\n        line-height: var(--typography-label-line-height);\n        letter-spacing: var(--typography-label-letter-spacing);\n        color: var(--color-label-text);\n        margin: 0 0 var(--dimension-label-margin-bottom) 0;\n      }\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input[type='date'] {\n        font-family: var(--typography-font-family);\n        font-weight: var(--typography-input-font-weight);\n        font-size: var(--typography-input-font-size);\n        line-height: var(--typography-input-line-height);\n        letter-spacing: var(--typography-input-letter-spacing);\n        box-sizing: border-box;\n        height: var(--dimension-input-height);\n        border: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        border-radius: var(--dimension-input-border-radius);\n        padding: 0 var(--dimension-input-padding-right) 0\n          var(--dimension-input-padding-left);\n        margin-top: var(--dimension-input-margin-top);\n        color: var(--color-input-text);\n        background-color: var(--color-input-background);\n        transition: var(--motion-input-transition);\n        appearance: none;\n        -moz-appearance: none;\n        -webkit-appearance: none;\n        width: 100%;\n        &:hover {\n          border-color: var(--color-input-border-hover);\n          background-color: var(--color-input-background-hover);\n        }\n        &:focus {\n          outline: none;\n          border-color: var(--color-input-border-active);\n          background-color: var(--color-input-background-active);\n        }\n      }\n      .message {\n        margin: var(--dimension-message-margin-top) 0 0 0;\n        color: var(--color-message-text);\n        font-weight: var(--typography-message-font-weight);\n        font-size: var(--typography-message-font-size);\n        line-height: var(--typography-message-line-height);\n        letter-spacing: var(--typography-message-letter-spacing);\n      }\n\n      .help-text {\n        margin: var(--dimension-help-text-margin-top) 0 0 0;\n        color: var(--color-help-text-text);\n        font-weight: var(--typography-help-text-font-weight);\n        font-size: var(--typography-help-text-font-size);\n        line-height: var(--typography-help-text-line-height);\n        letter-spacing: var(--typography-help-text-letter-spacing);\n        margin: 0 0 var(--dimension-help-text-margin-bottom) 0;\n      }\n      [type='date']::-webkit-inner-spin-button {\n        opacity: 0;\n      }\n      [type='date']::-webkit-calendar-picker-indicator {\n        opacity: 0;\n        -webkit-appearance: none;\n        display: none;\n        visibility: hidden;\n\n        &:target {\n          outline: solid;\n          font-size: 5rem;\n        }\n      }\n      .input-container {\n        height: var(--dimension-input-height);\n        position: relative;\n      }\n      .date-icon {\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: var(--dimension-icon-margin-right);\n        height: fit-content;\n        transition: var(--motion-input-transition);\n        border-radius: var(--dimension-icon-border-radius);\n        &:focus {\n          outline: solid var(--color-icon-focus-outline);\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--opacity-disabled);\n      cursor: not-allowed;\n      * {\n        cursor: not-allowed;\n      }\n      input[type='date'] {\n        &:hover {\n          border-color: var(--color-input-border);\n          background-color: var(--color-input-background);\n        }\n      }\n      .date-icon {\n        background-color: unset;\n        &:focus {\n          outline: none;\n        }\n      }\n    }\n\n    :host([readonly]:not([disabled])) {\n      input[type='date'] {\n        border: unset;\n        border-radius: unset;\n        background-color: unset;\n        border-left: var(--dimension-input-border-width) solid\n          var(--color-input-border);\n        &:hover + .date-icon {\n          background-color: unset;\n        }\n      }\n      .date-icon {\n        background-color: unset;\n        display: none;\n      }\n    }\n\n    :host([status='error']:not([disabled]):not([readonly])) {\n      label {\n        color: var(--color-label-text-error);\n      }\n      input[type='date'] {\n        border-color: var(--color-input-border-error);\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n      .message {\n        color: var(--color-message-text-error);\n      }\n      .help-text {\n        color: var(--color-help-text-text-error);\n      }\n      .date-icon {\n        background-color: var(--color-input-background-error);\n        color: var(--color-input-text-error);\n      }\n    }\n\n    @-moz-document url-prefix() {\n      :host {\n        .date-icon {\n          display: none;\n          visibility: hidden;\n        }\n      }\n    }\n  `;\n}\n"],"names":["isSafari","FhiDateInputSelector","FhiDateInput","LitElement","newName","oldName","newValue","oldValue","event","html","ifDefined","css","__decorateClass","property","query","customElement"],"mappings":"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A;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;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;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;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;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;AA/MYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfX,EASiB,WAAA,SAAA,CAAA;AAOAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfX,EAgBiB,WAAA,WAAA,CAAA;AAOwBU,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAvBvCX,EAuByC,WAAA,YAAA,CAAA;AAOxBU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9BfX,EA8BiB,WAAA,OAAA,CAAA;AAMAU,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GApCfX,EAoCiB,WAAA,OAAA,CAAA;AASeU,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA7C9BX,EA6CgC,WAAA,UAAA,CAAA;AAOCU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApD/BX,EAoDiC,WAAA,YAAA,CAAA;AAOAU,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA3D/BX,EA2DiC,WAAA,YAAA,CAAA;AAGpCU,EAAA;AAAA,EADPE,EAAM,gBAAgB;AAAA,GA7DZZ,EA8DH,WAAA,UAAA,CAAA;AAcJU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA3E9BX,EA4EP,WAAA,QAAA,CAAA;AAwBAU,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnGfX,EAoGP,WAAA,SAAA,CAAA;AApGOA,IAANU,EAAA;AAAA,EADNG,EAAcd,CAAoB;AAAA,GACtBC,CAAA;"}

package/fhi-date-input.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-date-input/fhi-date-input.component.ts","declarations":[{"kind":"class","description":"## FHI Date input\n\nhttps://designsystemet.dhi.no/?path=/docs/komponenter-date-input--docs\n\nThe `<fhi-date-input>` component represents a date input field styled and implemented according to the FHI Design System guidelines.\nIt allows users to select or input a date.","name":"FhiDateInput","members":[{"kind":"method","name":"_dispatchChangeEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_dispatchInputEvent","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleChange","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"method","name":"_handleInput","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"_handleKeyDown","privacy":"private","return":{"type":{"text":"void"}},"parameters":[{"name":"event","type":{"text":"KeyboardEvent"}}]},{"kind":"field","name":"_input","type":{"text":"HTMLInputElement"},"privacy":"private"},{"kind":"field","name":"_internals","type":{"text":"ElementInternals"},"privacy":"private"},{"kind":"field","name":"_name","type":{"text":"string | undefined | undefined"},"privacy":"private","default":"undefined"},{"kind":"method","name":"_showDate","privacy":"private","parameters":[{"name":"event","optional":true,"type":{"text":"KeyboardEvent"}}]},{"kind":"field","name":"_value","type":{"text":"string | undefined"},"privacy":"private","default":"''"},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input.  This changes its appearance and makes it non-interactive.","reflects":true,"attribute":"disabled"},{"kind":"method","name":"formResetCallback","privacy":"public","return":{"type":{"text":"void"}}},{"kind":"field","name":"helpText","type":{"text":"string"},"default":"undefined","description":"The help-text shown above the input field.\nThis is often used to provide additional information to the user.","attribute":"help-text"},{"kind":"field","name":"label","type":{"text":"string"},"default":"undefined","description":"The text that labels the input field.\nAn input field should always have a label to ensure accessibility.","attribute":"label"},{"kind":"field","name":"max","type":{"text":"string"},"default":"undefined","description":"Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.","attribute":"max"},{"kind":"field","name":"message","type":{"text":"string"},"default":"undefined","description":"The message shown beneath the input field.\nThis is often used to provide additional information or feedback to the user.","attribute":"message"},{"kind":"field","name":"min","type":{"text":"string"},"default":"undefined","description":"Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.","attribute":"min"},{"kind":"field","name":"name","type":{"text":"string"},"description":"The name of the input. This is submitted with the form data as a `key`.\n\nThis attribute conforms with the standard HTML `name` attribute for input fields.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name","reflects":true,"attribute":"name"},{"kind":"field","name":"readonly","type":{"text":"boolean"},"default":"false","description":"Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.","reflects":true,"attribute":"readonly"},{"kind":"field","name":"status","type":{"text":"'error'"},"default":"undefined","description":"Sets the visual status of the input. There is currently only one status available: `error`.\n\nThe `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.","reflects":true,"attribute":"status"},{"kind":"field","name":"value","type":{"text":"string"},"description":"The default value of the input field, formatted as `YYYY-MM-DD`.\n\nYou can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n\nThis attribute conforms with the standard HTML `value` attribute for input fields.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value","attribute":"value"}],"events":[{"name":"change","type":{"text":"Event"},"description":"Standard DOM event with the type `change`.\nThis event is dispatched when the value of the input changes."},{"name":"input","type":{"text":"Event"},"description":"Standard DOM event with the type `input`.\nThis event is dispatched when the value of the input changes."}],"attributes":[{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the input.  This changes its appearance and makes it non-interactive.","fieldName":"disabled"},{"name":"help-text","type":{"text":"string"},"default":"undefined","description":"The help-text shown above the input field.\nThis is often used to provide additional information to the user.","fieldName":"helpText"},{"name":"label","type":{"text":"string"},"default":"undefined","description":"The text that labels the input field.\nAn input field should always have a label to ensure accessibility.","fieldName":"label"},{"name":"max","type":{"text":"string"},"default":"undefined","description":"Sets maximum date available for selection in the input field. Format `YYYY-MM-DD`.","fieldName":"max"},{"name":"message","type":{"text":"string"},"default":"undefined","description":"The message shown beneath the input field.\nThis is often used to provide additional information or feedback to the user.","fieldName":"message"},{"name":"min","type":{"text":"string"},"default":"undefined","description":"Sets minium date available for selection in the input field. Format `YYYY-MM-DD`.","fieldName":"min"},{"name":"name","type":{"text":"string"},"description":"The name of the input. This is submitted with the form data as a `key`.\n\nThis attribute conforms with the standard HTML `name` attribute for input fields.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name","fieldName":"name"},{"name":"readonly","type":{"text":"boolean"},"default":"false","description":"Sets the input to read-only. A read-only field cannot be modified by the user but may be submitted with the form.","fieldName":"readonly"},{"name":"status","type":{"text":"'error'"},"default":"undefined","description":"Sets the visual status of the input. There is currently only one status available: `error`.\n\nThe `error` status is used to indicate that there is an issue with the input, such as invalid or missing data.","fieldName":"status"},{"name":"value","type":{"text":"string"},"description":"The default value of the input field, formatted as `YYYY-MM-DD`.\n\nYou can fetch the current value of the date input by accessing this property directly on the component instance, or by listening for the `change` or `input` events which are dispatched whenever the value changes.\n\nThis attribute conforms with the standard HTML `value` attribute for input fields.\nSee: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value","fieldName":"value"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-date-input","customElement":true},{"kind":"variable","name":"FhiDateInputSelector","type":{"text":"string"},"default":"'fhi-date-input'"}]}

package/fhi-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large headline text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay 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-display color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-display>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string;\n\n  /**\n   * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n   * @type {1 | 2 | 3 | 4 | 5 | 6}\n   */\n  @property({ type: Number }) level!: DisplayLevel;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('level')) {\n      const levelAsNumber = Number(this.level);\n      if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n        console.error(\n          new TypeError(\n            `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n          ),\n        );\n      }\n    }\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string'\n          ? this.color\n          : 'var(--fhi-color-neutral-text-default)';\n    }\n  }\n\n  render() {\n    const template = `\n      <h${this.level} class=\"display\">\n        <slot></slot>\n      </h${this.level}>\n    `;\n    return html`${unsafeHTML(template)}`;\n  }\n\n  static styles = css`\n    :host {\n      --font-size-large: var(--fhi-typography-display-large-font-size);\n      --font-weight-large: var(--fhi-typography-display-large-font-weight);\n      --line-height-large: var(--fhi-typography-display-large-line-height);\n      --letter-spacing-large: var(\n        --fhi-typography-display-large-letter-spacing\n      );\n\n      --font-size-medium: var(--fhi-typography-display-medium-font-size);\n      --font-weight-medium: var(--fhi-typography-display-medium-font-weight);\n      --line-height-medium: var(--fhi-typography-display-medium-line-height);\n      --letter-spacing-medium: var(\n        --fhi-typography-display-medium-letter-spacing\n      );\n\n      --font-size-small: var(--fhi-typography-display-small-font-size);\n      --font-weight-small: var(--fhi-typography-display-small-font-weight);\n      --line-height-small: var(--fhi-typography-display-small-line-height);\n      --letter-spacing-small: var(\n        --fhi-typography-display-small-letter-spacing\n      );\n    }\n\n    :host {\n      display: block;\n      contain: layout;\n      color: var(--fhi-color-neutral-text-default);\n      .display {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .display {\n        font-size: var(--font-size-large);\n        font-weight: var(--font-weight-large);\n        line-height: var(--line-height-large);\n        letter-spacing: var(--letter-spacing-large);\n      }\n    }\n\n    :host([size='medium']) {\n      .display {\n        font-size: var(--font-size-medium);\n        font-weight: var(--font-weight-medium);\n        line-height: var(--line-height-medium);\n        letter-spacing: var(--letter-spacing-medium);\n      }\n    }\n\n    :host([size='small']) {\n      .display {\n        font-size: var(--font-size-small);\n        font-weight: var(--font-weight-small);\n        line-height: var(--line-height-small);\n        letter-spacing: var(--letter-spacing-small);\n      }\n    }\n  `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAkB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AA/HaJ,EAiEJ,SAASO;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;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAkB;AAAA,GACpBC,CAAA;"}
+{"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay 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-display color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-display>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string;\n\n  /**\n   * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n   * @type {1 | 2 | 3 | 4 | 5 | 6}\n   */\n  @property({ type: Number }) level!: DisplayLevel;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('level')) {\n      const levelAsNumber = Number(this.level);\n      if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n        console.error(\n          new TypeError(\n            `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n          ),\n        );\n      }\n    }\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string'\n          ? this.color\n          : 'var(--fhi-color-neutral-text-default)';\n    }\n  }\n\n  render() {\n    const template = `\n      <h${this.level} class=\"display\">\n        <slot></slot>\n      </h${this.level}>\n    `;\n    return html`${unsafeHTML(template)}`;\n  }\n\n  static styles = css`\n    :host {\n      --font-size-large: var(--fhi-typography-display-large-font-size);\n      --font-weight-large: var(--fhi-typography-display-large-font-weight);\n      --line-height-large: var(--fhi-typography-display-large-line-height);\n      --letter-spacing-large: var(\n        --fhi-typography-display-large-letter-spacing\n      );\n\n      --font-size-medium: var(--fhi-typography-display-medium-font-size);\n      --font-weight-medium: var(--fhi-typography-display-medium-font-weight);\n      --line-height-medium: var(--fhi-typography-display-medium-line-height);\n      --letter-spacing-medium: var(\n        --fhi-typography-display-medium-letter-spacing\n      );\n\n      --font-size-small: var(--fhi-typography-display-small-font-size);\n      --font-weight-small: var(--fhi-typography-display-small-font-weight);\n      --line-height-small: var(--fhi-typography-display-small-line-height);\n      --letter-spacing-small: var(\n        --fhi-typography-display-small-letter-spacing\n      );\n    }\n\n    :host {\n      display: block;\n      contain: layout;\n      color: var(--fhi-color-neutral-text-default);\n      .display {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .display {\n        font-size: var(--font-size-large);\n        font-weight: var(--font-weight-large);\n        line-height: var(--line-height-large);\n        letter-spacing: var(--letter-spacing-large);\n      }\n    }\n\n    :host([size='medium']) {\n      .display {\n        font-size: var(--font-size-medium);\n        font-weight: var(--font-weight-medium);\n        line-height: var(--line-height-medium);\n        letter-spacing: var(--letter-spacing-medium);\n      }\n    }\n\n    :host([size='small']) {\n      .display {\n        font-size: var(--font-size-small);\n        font-weight: var(--font-weight-small);\n        line-height: var(--line-height-small);\n        letter-spacing: var(--letter-spacing-small);\n      }\n    }\n  `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAuB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B;AAAA,EAAA;AAAA,EAyBd,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAClB,KAAK,QACL;AAAA,EAEV;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAgEF;AA/HaJ,EAiEJ,SAASO;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;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA3D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAkB;AAAA,GACpBC,CAAA;"}

package/fhi-display.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/typography/fhi-display/fhi-display.component.ts","declarations":[{"kind":"class","description":"## FHI Display\n\nhttps://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview\n\nThe `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n\nFor smaller, less prominent title text, use the `<fhi-title>` component instead.\n\nFor standard headline text, use the `<fhi-headline>` component instead.\n\nUse this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.","name":"FhiDisplay","slots":[{"description":"The content of the fhi-display 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-display color=\"var(--fhi-color-primary-text-default)\">\n   This text will be in the primary text color.\n </fhi-display>\n```","attribute":"color"},{"kind":"field","name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","attribute":"level"},{"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-display color=\"var(--fhi-color-primary-text-default)\">\n   This text will be in the primary text color.\n </fhi-display>\n```","fieldName":"color"},{"name":"level","type":{"text":"1 | 2 | 3 | 4 | 5 | 6"},"description":"Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.","fieldName":"level"},{"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-display","customElement":true},{"kind":"variable","name":"FhiDisplaySelector","type":{"text":"string"},"default":"'fhi-display'"}]}

package/fhi-flex.manifest.json

@@ -0,0 +1 @@
+{"kind":"javascript-module","path":"src/components/fhi-flex/fhi-flex.component.ts","declarations":[{"kind":"class","description":"## FHI Flex\n\nhttps://designsystem.fhi.no/?path=/docs/komponenter-flex--docs\n\nThe `<fhi-flex>` component is a flexible container that utilizes CSS Flexbox to arrange its child elements in a responsive layout.\nIt allows for easy alignment, spacing, and direction control of its items.","name":"FhiFlex","slots":[{"description":"The content of the flex container. This can include any elements or text.","name":""}],"members":[{"kind":"field","name":"align","type":{"text":"'stretch' | 'start' | 'center' | 'end' | 'baseline'"},"default":"'stretch'","description":"Aligns flex items along the cross axis.","attribute":"align"},{"kind":"field","name":"direction","type":{"text":"'row' | 'column'"},"default":"'row'","description":"Sets the flex direction to either row or column.\nThis determines the main axis along which the flex items are laid out.","reflects":true,"attribute":"direction"},{"kind":"field","name":"gap","type":{"text":"'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the gap between items within the flex container.\nIt can be one of the preset values, a rem or px value, or a number.\nIf you give a number, it will be treated as pixels.","reflects":true,"attribute":"gap"},{"kind":"field","name":"justify","type":{"text":"'start' | 'center' | 'end'"},"default":"'start'","description":"Justifies flex items along the main axis.","attribute":"justify"},{"kind":"field","name":"wrap","type":{"text":"boolean"},"default":"false","description":"Enables wrapping of flex items onto multiple lines if they exceed the container's width.","reflects":true,"attribute":"wrap"}],"attributes":[{"name":"align","type":{"text":"'stretch' | 'start' | 'center' | 'end' | 'baseline'"},"default":"'stretch'","description":"Aligns flex items along the cross axis.","fieldName":"align"},{"name":"direction","type":{"text":"'row' | 'column'"},"default":"'row'","description":"Sets the flex direction to either row or column.\nThis determines the main axis along which the flex items are laid out.","fieldName":"direction"},{"name":"gap","type":{"text":"'small' | 'medium' | 'large' | number | string"},"default":"'medium'","description":"Sets the gap between items within the flex container.\nIt can be one of the preset values, a rem or px value, or a number.\nIf you give a number, it will be treated as pixels.","fieldName":"gap"},{"name":"justify","type":{"text":"'start' | 'center' | 'end'"},"default":"'start'","description":"Justifies flex items along the main axis.","fieldName":"justify"},{"name":"wrap","type":{"text":"boolean"},"default":"false","description":"Enables wrapping of flex items onto multiple lines if they exceed the container's width.","fieldName":"wrap"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"fhi-flex","customElement":true},{"kind":"variable","name":"FhiFlexSelector","type":{"text":"string"},"default":"'fhi-flex'"}]}