@folkehelseinstituttet/designsystem 0.40.0 → 0.40.2

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

@@ -1 +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 `display: table-row` to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-row\n * @element fhi-data-table-row\n *\n * @slot - The content of the table row, consisting of `<fhi-data-table-cell>` elements which represent individual cells within the 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;AAkBhC,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]}
+{"version":3,"file":"fhi-data-table-row.js","names":[],"sources":["../../src/components/data-table/fhi-data-table-row/fhi-data-table-row.component.ts"],"sourcesContent":["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 `display: table-row` to achieve the desired layout and styling.\n *\n * @tag fhi-data-table-row\n * @element fhi-data-table-row\n *\n * @slot - The content of the table row, consisting of `<fhi-data-table-cell>` elements which represent individual cells within the 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"],"mappings":";;AAKA,IAAa,IAA0B,sBAkBhC,IAAA,cAA8B,EAAW;;8BAOjB;;CAK7B,oBAA0B;EAExB,AADA,MAAM,kBAAkB,GACxB,KAAK,OAAO;CACd;CAEA,OAAiB,GAAyC;EAOxD,AANI,EAAkB,IAAI,SAAS,KAC7B,KAAK,YAAY,UAAU,KAAK,YAAY,aAC9C,KAAK,UAAU,SAInB,MAAM,OAAO,CAAiB;CAChC;CAEA,QAAkB,GAAyC;EAKzD,AAJI,EAAkB,IAAI,SAAS,KACjC,KAAK,gBAAgB,GAGvB,MAAM,QAAQ,CAAiB;CACjC;CAEA,mBAA2B;EACzB,KAAK,gBAAgB;CACvB;CAEA,kBAA0B;EACxB,KAAK,aAAa,SAAQ,MAAW;GACnC,IAAI,EAAQ,QAAQ,YAAY,MAAM,uBAAuB;IAC3D,IAAM,IAAY;IAElB,AAAI,EAAU,YAAY,KAAK,YAC7B,EAAU,UAAU,KAAK;GAE7B;EACF,CAAC;CACH;CAEA,SAAS;EACP,OAAO,CAAI,qBAAqB,KAAK,iBAAiB;CACxD;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCrB;GAlFG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAGxC,EAAsB,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,UAVxB,EAAc,CAAuB,CAAA,GAAA,CAAA"}

package/fhi-data-table.js

@@ -1,34 +1,29 @@
-import { i as h, n as b, a as c, b as n, t as f } from "./property-B2Ico5CW.js";
+import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
 import "./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`
+//#region src/components/data-table/fhi-data-table/fhi-data-table.component.ts
+var o = "fhi-data-table", s = class extends r {
+	connectedCallback() {
+		super.connectedCallback(), this.role = "table";
+	}
+	update(e) {
+		super.update(e);
+	}
+	updated(e) {
+		super.updated(e), e.has("caption") && (this.caption ? this.setAttribute("aria-label", this.caption) : this.removeAttribute("aria-label"));
+	}
+	render() {
+		return a`
       <div class="table-content">
         <slot></slot>
       </div>
-      ${this.caption ? n`<fhi-body class="caption" size="small"
+      ${this.caption ? a`<fhi-body class="caption" size="small"
             >${this.caption}</fhi-body
           >` : null}
     `;
-  }
-};
-e.styles = h`
+	}
+	static {
+		this.styles = t`
     :host {
       --fhi-data-table-border-color: unset;
       --fhi-data-table-border-radius: unset;
@@ -78,17 +73,16 @@ e.styles = h`
       }
     }
   `;
-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
+i([e({
+	type: String,
+	reflect: !0
+})], s.prototype, "caption", void 0), i([e({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "striped", void 0), s = i([n(o)], s);
+//#endregion
+export { s as FhiDataTable, o as FhiDataTableSelector };
+
+//# sourceMappingURL=fhi-data-table.js.map

package/fhi-data-table.js.map

@@ -1 +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 `display: table` to achieve the desired layout and styling.\n *\n * Example usage:\n * ```html\n * <fhi-data-table caption=\"Example Table\">\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 * @slot - The content of the table, consisting of `<fhi-data-table-row>` elements which in turn contain `<fhi-data-table-cell>` elements.\n *\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;AAmC7B,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;"}
+{"version":3,"file":"fhi-data-table.js","names":[],"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 `display: table` to achieve the desired layout and styling.\n *\n * Example usage:\n * ```html\n * <fhi-data-table caption=\"Example Table\">\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 * @slot - The content of the table, consisting of `<fhi-data-table-row>` elements which in turn contain `<fhi-data-table-cell>` elements.\n *\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"],"mappings":";;;;AAMA,IAAa,IAAuB,kBAmC7B,IAAA,cAA2B,EAAW;CAe3C,oBAA0B;EAGxB,AAFA,MAAM,kBAAkB,GAExB,KAAK,OAAO;CACd;CAEA,OAAiB,GAAyC;EACxD,MAAM,OAAO,CAAiB;CAChC;CAEA,QAAkB,GAAyC;EAGzD,AAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,SAAS,MAC7B,KAAK,UACP,KAAK,aAAa,cAAc,KAAK,OAAO,IAE5C,KAAK,gBAAgB,YAAY;CAGvC;CAEA,SAAS;EACP,OAAO,CAAI;;;;QAIP,KAAK,UACH,CAAI;eACC,KAAK,QAAQ;eAElB,KAAK;;CAEb;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDrB;GA/FG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAOxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,UAb3C,EAAc,CAAoB,CAAA,GAAA,CAAA"}

package/fhi-date-input.component-Bus7CeKM.js

@@ -0,0 +1,278 @@
+import { a as e, d as t, o as n, r, s as i, t as a, u as o } from "./decorate-DFXIek-k.js";
+import { t as s } from "./if-defined-Dl-W5B5_.js";
+import "./fhi-icon-calendar.js";
+//#region src/utils/browser.ts
+var c = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent), l = "fhi-date-input", u = class extends i {
+	static {
+		this.formAssociated = !0;
+	}
+	get name() {
+		return this._name;
+	}
+	set name(e) {
+		let t = this._name;
+		this._name = e, this.requestUpdate("name", t), this._internals.setFormValue(this.value ?? null);
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		let t = this._value;
+		this._value = e, this.requestUpdate("value", t), this._internals.setFormValue(this._value ?? null);
+	}
+	constructor() {
+		super(), this.label = void 0, this.message = void 0, this.helpText = void 0, this.min = void 0, this.max = void 0, this.status = void 0, this.readonly = !1, this.disabled = !1, this._name = void 0, this._value = "", this._internals = this.attachInternals();
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._internals.setFormValue(this.value ?? null);
+	}
+	_handleChange() {
+		this._dispatchChangeEvent();
+	}
+	_dispatchChangeEvent() {
+		this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleInput(e) {
+		this.value = this._input.value, this._internals.setFormValue(this.value ?? null), e.stopPropagation(), this._dispatchInputEvent();
+	}
+	_dispatchInputEvent() {
+		this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleKeyDown(e) {
+		e.key === "Enter" && this._internals.form && this._internals.form.requestSubmit();
+	}
+	formResetCallback() {
+		this.value = this.getAttribute("value"), this._internals.setFormValue(this.value ?? null);
+	}
+	_showDate(e) {
+		e && e.type == "keydown" && e.key !== "Enter" && e.code !== "Space" || this._input.showPicker();
+	}
+	render() {
+		return o`
+      ${this.label && o`<label for="input-element">${this.label}</label>`}
+      ${this.helpText && o`<p class="help-text">${this.helpText}</p>`}
+      <div class="input-container">
+        <input
+          type="date"
+          id="input-element"
+          name=${s(this.name)}
+          min=${s(this.min)}
+          max=${s(this.max)}
+          .value=${this.value ?? ""}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+          @input=${this._handleInput}
+          @keydown=${this._handleKeyDown}
+        />
+        <span
+          class="date-icon"
+          @click=${this._showDate}
+          @keydown=${this._showDate}
+          tabindex=${c() ? "-1" : "0"}
+          role="button"
+          aria-label="Vis datovelger"
+          aria-haspopup="true"
+          ><fhi-icon-calendar></fhi-icon-calendar
+        ></span>
+      </div>
+      ${this.message && o`<p class="message">${this.message}</p>`}
+    `;
+	}
+	static {
+		this.styles = t`
+    :host {
+      display: flex;
+      flex-direction: column;
+      font-family: var(--fhi-font-family-default);
+      -webkit-font-smoothing: antialiased;
+      width: calc(var(--fhi-spacing-1000) * 2);
+
+      label {
+        font-weight: var(--fhi-typography-label-small-font-weight);
+        font-size: var(--fhi-typography-label-small-font-size);
+        line-height: var(--fhi-typography-label-small-line-height);
+        letter-spacing: var(--fhi-typography-label-small-letter-spacing);
+        color: var(--fhi-color-neutral-text-default);
+        margin: 0 0 var(--fhi-spacing-050) 0;
+      }
+      label:has(+ p) {
+        margin: 0 0 0 0;
+      }
+
+      input[type='date'] {
+        font-family: var(--fhi-font-family-default);
+        font-weight: var(--fhi-typography-body-medium-font-weight);
+        font-size: var(--fhi-typography-body-medium-font-size);
+        line-height: var(--fhi-typography-body-medium-line-height);
+        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);
+        box-sizing: border-box;
+        height: var(--fhi-spacing-500);
+        border: var(--fhi-dimension-border-width) solid
+          var(--fhi-color-neutral-border-default);
+        border-radius: var(--fhi-border-radius-050);
+        padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);
+
+        color: var(--fhi-color-neutral-text-default);
+        background-color: var(--fhi-color-neutral-background-default);
+        transition: all var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
+        appearance: none;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        width: 100%;
+        &:hover {
+          border-color: var(--fhi-color-accent-border-default);
+          background-color: var(--fhi-color-accent-background-subtle);
+        }
+        &:focus {
+          border-color: var(--fhi-color-accent-border-strong);
+          background-color: var(--fhi-color-accent-background-default);
+        }
+      }
+      .message {
+        margin: var(--fhi-spacing-050) 0 0 0;
+        color: var(--fhi-color-neutral-text-default);
+        font-weight: var(--fhi-typography-body-small-font-weight);
+        font-size: var(--fhi-typography-body-small-font-size);
+        line-height: var(--fhi-typography-body-small-line-height);
+        letter-spacing: var(--fhi-typography-body-small-letter-spacing);
+      }
+
+      .help-text {
+        color: var(--fhi-color-neutral-text-subtle);
+        font-weight: var(--fhi-typography-body-small-font-weight);
+        font-size: var(--fhi-typography-body-small-font-size);
+        line-height: var(--fhi-typography-body-small-line-height);
+        letter-spacing: var(--fhi-typography-body-small-letter-spacing);
+        margin: 0 0 var(--fhi-spacing-050) 0;
+      }
+      [type='date']::-webkit-inner-spin-button {
+        opacity: 0;
+      }
+      [type='date']::-webkit-calendar-picker-indicator {
+        opacity: 0;
+        -webkit-appearance: none;
+        display: none;
+        visibility: hidden;
+
+        &:target {
+          outline: solid;
+          font-size: 5rem;
+        }
+      }
+      .input-container {
+        height: var(--fhi-spacing-500);
+        position: relative;
+      }
+      .date-icon {
+        position: absolute;
+        right: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-right: var(--fhi-spacing-100);
+        height: fit-content;
+        transition: all var(--fhi-motion-ease-default)
+          var(--fhi-motion-duration-quick);
+        border-radius: var(--fhi-border-radius-050);
+        &:focus {
+          outline: solid var(--fhi-color-accent-border-default);
+        }
+      }
+    }
+
+    :host([disabled]) {
+      opacity: var(--fhi-opacity-disabled);
+      cursor: not-allowed;
+      * {
+        cursor: not-allowed;
+      }
+      input[type='date'] {
+        &:hover {
+          border-color: var(--fhi-color-neutral-border-default);
+          background-color: var(--fhi-color-neutral-background-default);
+        }
+      }
+      .date-icon {
+        background-color: unset;
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+
+    :host([readonly]:not([disabled])) {
+      input[type='date'] {
+        border: unset;
+        border-radius: unset;
+        background-color: unset;
+        border-left: var(--fhi-dimension-border-width) solid
+          var(--fhi-color-neutral-border-default);
+        &:hover + .date-icon {
+          background-color: unset;
+        }
+      }
+      .date-icon {
+        background-color: unset;
+        display: none;
+      }
+    }
+
+    :host([status='error']:not([disabled]):not([readonly])) {
+      label {
+        color: var(--fhi-color-danger-text-default);
+      }
+      input[type='date'] {
+        border-color: var(--fhi-color-danger-border-strong);
+        background-color: var(--fhi-color-danger-background-default);
+        color: var(--fhi-color-danger-text-default);
+      }
+      .message {
+        color: var(--fhi-color-danger-text-subtle);
+      }
+      .help-text {
+        color: var(--fhi-color-danger-text-default);
+      }
+      .date-icon {
+        background-color: var(--fhi-color-danger-background-default);
+        color: var(--fhi-color-danger-text-default);
+      }
+    }
+
+    @-moz-document url-prefix() {
+      :host {
+        .date-icon {
+          display: none;
+          visibility: hidden;
+        }
+      }
+    }
+  `;
+	}
+};
+a([e({ type: String })], u.prototype, "label", void 0), a([e({ type: String })], u.prototype, "message", void 0), a([e({
+	type: String,
+	attribute: "help-text"
+})], u.prototype, "helpText", void 0), a([e({ type: String })], u.prototype, "min", void 0), a([e({ type: String })], u.prototype, "max", void 0), a([e({
+	type: String,
+	reflect: !0
+})], u.prototype, "status", void 0), a([e({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "readonly", void 0), a([e({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), a([r("#input-element")], u.prototype, "_input", void 0), a([e({
+	type: String,
+	reflect: !0
+})], u.prototype, "name", null), a([e({ type: String })], u.prototype, "value", null), u = a([n(l)], u);
+//#endregion
+export { l as n, u as t };
+
+//# sourceMappingURL=fhi-date-input.component-Bus7CeKM.js.map

package/fhi-date-input.component-Bus7CeKM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fhi-date-input.component-Bus7CeKM.js","names":[],"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      display: flex;\n      flex-direction: column;\n      font-family: var(--fhi-font-family-default);\n      -webkit-font-smoothing: antialiased;\n      width: calc(var(--fhi-spacing-1000) * 2);\n\n      label {\n        font-weight: var(--fhi-typography-label-small-font-weight);\n        font-size: var(--fhi-typography-label-small-font-size);\n        line-height: var(--fhi-typography-label-small-line-height);\n        letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n        color: var(--fhi-color-neutral-text-default);\n        margin: 0 0 var(--fhi-spacing-050) 0;\n      }\n      label:has(+ p) {\n        margin: 0 0 0 0;\n      }\n\n      input[type='date'] {\n        font-family: var(--fhi-font-family-default);\n        font-weight: var(--fhi-typography-body-medium-font-weight);\n        font-size: var(--fhi-typography-body-medium-font-size);\n        line-height: var(--fhi-typography-body-medium-line-height);\n        letter-spacing: var(--fhi-typography-body-medium-letter-spacing);\n        box-sizing: border-box;\n        height: var(--fhi-spacing-500);\n        border: var(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\n        border-radius: var(--fhi-border-radius-050);\n        padding: 0 var(--fhi-spacing-150) 0 var(--fhi-spacing-150);\n\n        color: var(--fhi-color-neutral-text-default);\n        background-color: var(--fhi-color-neutral-background-default);\n        transition: all var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n        appearance: none;\n        -moz-appearance: none;\n        -webkit-appearance: none;\n        width: 100%;\n        &:hover {\n          border-color: var(--fhi-color-accent-border-default);\n          background-color: var(--fhi-color-accent-background-subtle);\n        }\n        &:focus {\n          border-color: var(--fhi-color-accent-border-strong);\n          background-color: var(--fhi-color-accent-background-default);\n        }\n      }\n      .message {\n        margin: var(--fhi-spacing-050) 0 0 0;\n        color: var(--fhi-color-neutral-text-default);\n        font-weight: var(--fhi-typography-body-small-font-weight);\n        font-size: var(--fhi-typography-body-small-font-size);\n        line-height: var(--fhi-typography-body-small-line-height);\n        letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n      }\n\n      .help-text {\n        color: var(--fhi-color-neutral-text-subtle);\n        font-weight: var(--fhi-typography-body-small-font-weight);\n        font-size: var(--fhi-typography-body-small-font-size);\n        line-height: var(--fhi-typography-body-small-line-height);\n        letter-spacing: var(--fhi-typography-body-small-letter-spacing);\n        margin: 0 0 var(--fhi-spacing-050) 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(--fhi-spacing-500);\n        position: relative;\n      }\n      .date-icon {\n        position: absolute;\n        right: 0;\n        top: 50%;\n        transform: translateY(-50%);\n        margin-right: var(--fhi-spacing-100);\n        height: fit-content;\n        transition: all var(--fhi-motion-ease-default)\n          var(--fhi-motion-duration-quick);\n        border-radius: var(--fhi-border-radius-050);\n        &:focus {\n          outline: solid var(--fhi-color-accent-border-default);\n        }\n      }\n    }\n\n    :host([disabled]) {\n      opacity: var(--fhi-opacity-disabled);\n      cursor: not-allowed;\n      * {\n        cursor: not-allowed;\n      }\n      input[type='date'] {\n        &:hover {\n          border-color: var(--fhi-color-neutral-border-default);\n          background-color: var(--fhi-color-neutral-background-default);\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(--fhi-dimension-border-width) solid\n          var(--fhi-color-neutral-border-default);\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(--fhi-color-danger-text-default);\n      }\n      input[type='date'] {\n        border-color: var(--fhi-color-danger-border-strong);\n        background-color: var(--fhi-color-danger-background-default);\n        color: var(--fhi-color-danger-text-default);\n      }\n      .message {\n        color: var(--fhi-color-danger-text-subtle);\n      }\n      .help-text {\n        color: var(--fhi-color-danger-text-default);\n      }\n      .date-icon {\n        background-color: var(--fhi-color-danger-background-default);\n        color: var(--fhi-color-danger-text-default);\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"],"mappings":"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"}