@folkehelseinstituttet/designsystem 0.40.0 → 0.40.2

package/fhi-icon-x.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-icon-x.js","sources":["../../src/components/icons/fhi-icon-x.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconXSelector = \"fhi-icon-x\";\n\n/**\n * ## FhiIconX\n * \n * {@link https://designsystem.fhi.no/?path=/docs/ikoner--docs}\n * \n * @tag fhi-icon-x\n * @element fhi-icon-x\n */\n@customElement(FhiIconXSelector)\nexport class FhiIconX extends LitElement {\n\n  /**\n   * Sets the color for the icon.\n   * Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)\n   * @type {string}\n   */ \n  @property({ type: String }) color: string = \"currentcolor\";\n\n  /**\n   * Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\n   * Number values are treated as px.\n   * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}\n   */\n  @property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';\n\n  private get _size(): string {\n    switch (this.size) {\n      case 'xsmall': \n        return '1rem'; \n      case 'small':\n        return '1.25rem';\n      case 'medium':\n        return '1.5rem'; \n      case 'large':\n        return '2rem'; \n      default:\n        if (String(this.size).endsWith('px') || String(this.size).endsWith('rem')) {\n          return String(this.size);\n        }\n        if (isNaN(Number(this.size))) {\n          console.warn(`Invalid size value: ${this.size}. Falling back to default size '1.5rem'.`)\n          return '1.5rem';\n        }\n        return `${this.size}px`;\n    }\n  }\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this._size}\" height=\"${this._size}\" fill=\"${this.color}\"><path d=\"M17.47 5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47.052.056a.75.75 0 0 1-1.056 1.056l-.056-.052L12 13.06l-5.47 5.47a.75.75 0 1 1-1.06-1.06L10.94 12 5.47 6.53l-.052-.056a.75.75 0 0 1 1.056-1.056l.056.052L12 10.94z\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"names":["FhiIconXSelector","FhiIconX","LitElement","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAOO,MAAMA,IAAmB;AAWzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAOuB,KAAA,QAAgB,gBAOhB,KAAA,OAA0F;AAAA,EAAA;AAAA,EAEtH,IAAY,QAAgB;AAC1B,YAAQ,KAAK,MAAA;AAAA,MACX,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAI,OAAO,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,OAAO,KAAK,IAAI,EAAE,SAAS,KAAK,IAC/D,OAAO,KAAK,IAAI,IAErB,MAAM,OAAO,KAAK,IAAI,CAAC,KACzB,QAAQ,KAAK,uBAAuB,KAAK,IAAI,0CAA0C,GAChF,YAEF,GAAG,KAAK,IAAI;AAAA,IAAA;AAAA,EAEzB;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA,2EACgE,KAAK,KAAK,aAAa,KAAK,KAAK,WAAW,KAAK,KAAK;AAAA;AAAA,EAE/H;AASA;AAnDWF,EA4CJ,SAASG;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AArCYC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAPfL,EAOiB,WAAA,SAAA,CAAA;AAOAI,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAdfL,EAciB,WAAA,QAAA,CAAA;AAdjBA,IAANI,EAAA;AAAA,EADNE,EAAcP,CAAgB;AAAA,GAClBC,CAAA;"}
+{"version":3,"file":"fhi-icon-x.js","names":[],"sources":["../../src/components/icons/fhi-icon-x.component.ts"],"sourcesContent":["\n/*\n  This file is auto-generated by generate-icon-components.js. Do not edit it manually.\n*/\nimport { html, css, LitElement } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\n\nexport const FhiIconXSelector = \"fhi-icon-x\";\n\n/**\n * ## FhiIconX\n * \n * {@link https://designsystem.fhi.no/?path=/docs/ikoner--docs}\n * \n * @tag fhi-icon-x\n * @element fhi-icon-x\n */\n@customElement(FhiIconXSelector)\nexport class FhiIconX extends LitElement {\n\n  /**\n   * Sets the color for the icon.\n   * Should preferably be a color token. See [Color Tokens](https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs)\n   * @type {string}\n   */ \n  @property({ type: String }) color: string = \"currentcolor\";\n\n  /**\n   * Sets the size of the icon. Can be one of the predefined sizes, a number value, rem or px.\n   * Number values are treated as px.\n   * @type { 'xsmall' | 'small' | 'medium' | 'large' | number | string}\n   */\n  @property({ type: String }) size: 'xsmall' | 'small' | 'medium' | 'large' | number | `${number}px` | `${number}rem` = 'medium';\n\n  private get _size(): string {\n    switch (this.size) {\n      case 'xsmall': \n        return '1rem'; \n      case 'small':\n        return '1.25rem';\n      case 'medium':\n        return '1.5rem'; \n      case 'large':\n        return '2rem'; \n      default:\n        if (String(this.size).endsWith('px') || String(this.size).endsWith('rem')) {\n          return String(this.size);\n        }\n        if (isNaN(Number(this.size))) {\n          console.warn(`Invalid size value: ${this.size}. Falling back to default size '1.5rem'.`)\n          return '1.5rem';\n        }\n        return `${this.size}px`;\n    }\n  }\n\n  render() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"${this._size}\" height=\"${this._size}\" fill=\"${this.color}\"><path d=\"M17.47 5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47.052.056a.75.75 0 0 1-1.056 1.056l-.056-.052L12 13.06l-5.47 5.47a.75.75 0 1 1-1.06-1.06L10.94 12 5.47 6.53l-.052-.056a.75.75 0 0 1 1.056-1.056l.056.052L12 10.94z\"/></svg>\n    `;\n  }\n      \n  static styles = css`\n    :host {\n      display: flex;\n      max-height: min-content;\n      max-width: min-content;\n    }\n  `;\n  }\n"],"mappings":";;AAOA,IAAa,IAAmB,cAWzB,IAAA,cAAuB,EAAW;;4BAOK,4BAO0E;;CAEtH,IAAY,QAAgB;EAC1B,QAAQ,KAAK,MAAb;GACE,KAAK,UACH,OAAO;GACT,KAAK,SACH,OAAO;GACT,KAAK,UACH,OAAO;GACT,KAAK,SACH,OAAO;GACT,SAQE,OAPI,OAAO,KAAK,IAAI,EAAE,SAAS,IAAI,KAAK,OAAO,KAAK,IAAI,EAAE,SAAS,KAAK,IAC/D,OAAO,KAAK,IAAI,IAErB,MAAM,OAAO,KAAK,IAAI,CAAC,KACzB,QAAQ,KAAK,uBAAuB,KAAK,KAAK,yCAAyC,GAChF,YAEF,GAAG,KAAK,KAAK;EACxB;CACF;CAEA,SAAS;EACP,OAAO,CAAI;2EAC4D,KAAK,MAAM,YAAY,KAAK,MAAM,UAAU,KAAK,MAAM;;CAEhI;;gBAEgB,CAAG;;;;;;;;AAOnB;GA5CC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAf3B,EAAc,CAAgB,CAAA,GAAA,CAAA"}

package/fhi-label.js

@@ -1,26 +1,21 @@
-import { i as n, n as p, a as f, b as g, t as y } from "./property-B2Ico5CW.js";
-var c = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, a, r, i) => {
-  for (var e = i > 1 ? void 0 : i ? b(a, r) : a, o = t.length - 1, h; o >= 0; o--)
-    (h = t[o]) && (e = (i ? h(a, r, e) : h(e)) || e);
-  return i && e && c(a, r, e), e;
-};
-const m = "fhi-label";
-let l = class extends f {
-  constructor() {
-    super(...arguments), this.size = "medium", this.color = "currentcolor";
-  }
-  updated(t) {
-    super.updated(t), t.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
-  }
-  render() {
-    return g`
+import { a as e, d as t, o as n, s as r, t as i, u as a } from "./decorate-DFXIek-k.js";
+//#region src/components/typography/fhi-label/fhi-label.component.ts
+var o = "fhi-label", s = class extends r {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.color = "currentcolor";
+	}
+	updated(e) {
+		super.updated(e), e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
+	}
+	render() {
+		return a`
       <span class="label">
         <slot></slot>
       </span>
     `;
-  }
-};
-l.styles = n`
+	}
+	static {
+		this.styles = t`
     :host {
       display: block;
       contain: layout;
@@ -58,17 +53,13 @@ l.styles = n`
       }
     }
   `;
-s([
-  p({ type: String, reflect: !0 })
-], l.prototype, "size", 2);
-s([
-  p({ type: String })
-], l.prototype, "color", 2);
-l = s([
-  y(m)
-], l);
-export {
-  l as FhiLabel,
-  m as FhiLabelSelector
+	}
 };
-//# sourceMappingURL=fhi-label.js.map
+i([e({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), i([e({ type: String })], s.prototype, "color", void 0), s = i([n(o)], s);
+//#endregion
+export { s as FhiLabel, o as FhiLabelSelector };
+
+//# sourceMappingURL=fhi-label.js.map

package/fhi-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-label.js","sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel 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-label color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-label>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string = 'currentcolor';\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string' ? this.color : 'currentcolor';\n    }\n  }\n\n  render() {\n    return html`\n      <span class=\"label\">\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      contain: layout;\n      .label {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .label {\n        font-size: var(--fhi-typography-label-large-font-size);\n        font-weight: var(--fhi-typography-label-large-font-weight);\n        line-height: var(--fhi-typography-label-large-line-height);\n        letter-spacing: var(--fhi-typography-label-large-letter-spacing);\n      }\n    }\n\n    :host([size='medium']) {\n      .label {\n        font-size: var(--fhi-typography-label-medium-font-size);\n        font-weight: var(--fhi-typography-label-medium-font-weight);\n        line-height: var(--fhi-typography-label-medium-line-height);\n        letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n      }\n    }\n\n    :host([size='small']) {\n      .label {\n        font-size: var(--fhi-typography-label-small-font-size);\n        font-weight: var(--fhi-typography-label-small-font-weight);\n        line-height: var(--fhi-typography-label-small-line-height);\n        letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n      }\n    }\n  `;\n}\n"],"names":["FhiLabelSelector","FhiLabel","LitElement","changedProperties","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAmB;AAgBzB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B,UAiBc,KAAA,QAAiB;AAAA,EAAA;AAAA,EAE7C,QAAQC,GAAyC;AAC/C,UAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;AAAA,EAEpD;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,EAKT;AAwCF;AAnFaH,EA6CJ,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;AAvC2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BN,EAMgC,WAAA,QAAA,CAAA;AAoBfK,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfN,EA0BiB,WAAA,SAAA,CAAA;AA1BjBA,IAANK,EAAA;AAAA,EADNE,EAAcR,CAAgB;AAAA,GAClBC,CAAA;"}
+{"version":3,"file":"fhi-label.js","names":[],"sources":["../../src/components/typography/fhi-label/fhi-label.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiLabelSelector = 'fhi-label';\n\n/**\n * ## FHI Label\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-label--preview}\n *\n * The `<fhi-label>` component is used to display label text in accordance with the FHI Design System guidelines.\n * Use this component instead of the standard HTML `<label>` element to ensure consistent styling across your application.\n *\n * @tag fhi-label\n * @element fhi-label\n *\n * @slot - The content of the fhi-label component. This should be pure text.\n */\n@customElement(FhiLabelSelector)\nexport class FhiLabel 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-label color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-label>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string = 'currentcolor';\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string' ? this.color : 'currentcolor';\n    }\n  }\n\n  render() {\n    return html`\n      <span class=\"label\">\n        <slot></slot>\n      </span>\n    `;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      contain: layout;\n      .label {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .label {\n        font-size: var(--fhi-typography-label-large-font-size);\n        font-weight: var(--fhi-typography-label-large-font-weight);\n        line-height: var(--fhi-typography-label-large-line-height);\n        letter-spacing: var(--fhi-typography-label-large-letter-spacing);\n      }\n    }\n\n    :host([size='medium']) {\n      .label {\n        font-size: var(--fhi-typography-label-medium-font-size);\n        font-weight: var(--fhi-typography-label-medium-font-weight);\n        line-height: var(--fhi-typography-label-medium-line-height);\n        letter-spacing: var(--fhi-typography-label-medium-letter-spacing);\n      }\n    }\n\n    :host([size='small']) {\n      .label {\n        font-size: var(--fhi-typography-label-small-font-size);\n        font-weight: var(--fhi-typography-label-small-font-weight);\n        line-height: var(--fhi-typography-label-small-line-height);\n        letter-spacing: var(--fhi-typography-label-small-letter-spacing);\n      }\n    }\n  `;\n}\n"],"mappings":";;AAGA,IAAa,IAAmB,aAgBzB,IAAA,cAAuB,EAAW;;2BASzB,uBAiB+B;;CAE7C,QAAQ,GAAyC;EAG/C,AAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;CAEpD;CAEA,SAAS;EACP,OAAO,CAAI;;;;;CAKb;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrB;GA7EG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAoBxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UA3B3B,EAAc,CAAgB,CAAA,GAAA,CAAA"}

package/fhi-modal-dialog.js

@@ -1,86 +1,63 @@
-import { i as g, n, a as p, b as f, t as c } from "./property-B2Ico5CW.js";
-import { e as h } from "./query-Ddbd72Um.js";
+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 "./fhi-button.js";
 import "./fhi-icon-x.js";
 import "./fhi-headline.js";
-var m = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (e, s, l, a) => {
-  for (var t = a > 1 ? void 0 : a ? u(s, l) : s, d = e.length - 1, r; d >= 0; d--)
-    (r = e[d]) && (t = (a ? r(s, l, t) : r(t)) || t);
-  return a && t && m(s, l, t), t;
-};
-const b = "fhi-modal-dialog";
-let o = class extends p {
-  constructor() {
-    super(...arguments), this.open = !1, this.size = "medium", this.closeButtonLabel = "", this.heading = "", this._triggerElement = null, this._bodyOverflowStyle = "", this._mouseDownInsideDialog = !1;
-  }
-  updated(e) {
-    if (super.updated(e), e.has("open") && (this.open ? this.show() : this.close()), e.has("size") && this.size !== "small" && this.size !== "medium" && (this.size = "medium"), e.has("closeButtonLabel") && (typeof this.closeButtonLabel != "string" || this.closeButtonLabel.length === 0))
-      throw new TypeError(
-        "The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons."
-      );
-    if (e.has("closeButtonLabel") && (typeof this.heading != "string" || this.heading.length === 0))
-      throw new TypeError(
-        "The heading property must be set to a non-empty string. This heading describes the purpose of the dialog."
-      );
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this._toggleFooter();
-  }
-  /**
-   * Programmatically opens the dialog.
-   * You can also open the dialog by instead setting the `open` property to `true`.
-   */
-  show() {
-    this._triggerElement = document.activeElement, this._bodyOverflowStyle = document.body.style.overflow, this.open || (this.open = !0), document.body.style.overflow = "hidden", this._dialog.showModal(), setTimeout(() => {
-      this._focusDialog();
-    }, 10), this._dispatchToggleEvent(), this.addEventListener("keydown", this.handleKeyPress.bind(this));
-  }
-  /**
-   * Programmatically closes the dialog.
-   * You can also close the dialog by instead setting the `open` property to `false`.
-   */
-  close() {
-    var e;
-    this.open && (this.open = !1), document.body.style.overflow = this._bodyOverflowStyle, this._dialog.close(), this._dispatchToggleEvent(), this._dispatchCloseEvent(), (e = this._triggerElement) == null || e.focus(), this.removeEventListener("keydown", this.handleKeyPress.bind(this));
-  }
-  _focusDialog() {
-    this._dialog.focus();
-  }
-  _dispatchToggleEvent() {
-    this.dispatchEvent(
-      new ToggleEvent("toggle", {
-        newState: this.open ? "open" : "closed",
-        oldState: this.open ? "closed" : "open"
-      })
-    );
-  }
-  _dispatchCloseEvent() {
-    this.dispatchEvent(new CloseEvent("close"));
-  }
-  _handleDialogMouseUp(e) {
-    if (this._mouseDownInsideDialog) {
-      this._mouseDownInsideDialog = !1;
-      return;
-    }
-    e.target === this._dialog && this.close(), e.stopPropagation();
-  }
-  _handleCloseButtonClick() {
-    this.close();
-  }
-  _handleDialogContentMouseDown() {
-    this._mouseDownInsideDialog = !0;
-  }
-  _handleFooterSlotChange() {
-    this._toggleFooter();
-  }
-  handleKeyPress(e) {
-    e.key === "Escape" && (e.preventDefault(), this.close());
-  }
-  _toggleFooter() {
-    this._footerSlot.assignedNodes({ flatten: !0 }).length === 0 ? this._footer.style.display = "none" : this._footer.style.display = "flex";
-  }
-  render() {
-    return f` <dialog
+//#region src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts
+var s = "fhi-modal-dialog", c = class extends i {
+	constructor(...e) {
+		super(...e), this.open = !1, this.size = "medium", this.closeButtonLabel = "", this.heading = "", this._triggerElement = null, this._bodyOverflowStyle = "", this._mouseDownInsideDialog = !1;
+	}
+	updated(e) {
+		if (super.updated(e), e.has("open") && (this.open ? this.show() : this.close()), e.has("size") && this.size !== "small" && this.size !== "medium" && (this.size = "medium"), e.has("closeButtonLabel") && (typeof this.closeButtonLabel != "string" || this.closeButtonLabel.length === 0)) throw TypeError("The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons.");
+		if (e.has("closeButtonLabel") && (typeof this.heading != "string" || this.heading.length === 0)) throw TypeError("The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.");
+	}
+	firstUpdated(e) {
+		super.firstUpdated(e), this._toggleFooter();
+	}
+	show() {
+		this._triggerElement = document.activeElement, this._bodyOverflowStyle = document.body.style.overflow, this.open ||= !0, document.body.style.overflow = "hidden", this._dialog.showModal(), setTimeout(() => {
+			this._focusDialog();
+		}, 10), this._dispatchToggleEvent(), this.addEventListener("keydown", this.handleKeyPress.bind(this));
+	}
+	close() {
+		this.open &&= !1, document.body.style.overflow = this._bodyOverflowStyle, this._dialog.close(), this._dispatchToggleEvent(), this._dispatchCloseEvent(), this._triggerElement?.focus(), this.removeEventListener("keydown", this.handleKeyPress.bind(this));
+	}
+	_focusDialog() {
+		this._dialog.focus();
+	}
+	_dispatchToggleEvent() {
+		this.dispatchEvent(new ToggleEvent("toggle", {
+			newState: this.open ? "open" : "closed",
+			oldState: this.open ? "closed" : "open"
+		}));
+	}
+	_dispatchCloseEvent() {
+		this.dispatchEvent(new CloseEvent("close"));
+	}
+	_handleDialogMouseUp(e) {
+		if (this._mouseDownInsideDialog) {
+			this._mouseDownInsideDialog = !1;
+			return;
+		}
+		e.target === this._dialog && this.close(), e.stopPropagation();
+	}
+	_handleCloseButtonClick() {
+		this.close();
+	}
+	_handleDialogContentMouseDown() {
+		this._mouseDownInsideDialog = !0;
+	}
+	_handleFooterSlotChange() {
+		this._toggleFooter();
+	}
+	handleKeyPress(e) {
+		e.key === "Escape" && (e.preventDefault(), this.close());
+	}
+	_toggleFooter() {
+		this._footerSlot.assignedNodes({ flatten: !0 }).length === 0 ? this._footer.style.display = "none" : this._footer.style.display = "flex";
+	}
+	render() {
+		return o` <dialog
       @mouseup=${this._handleDialogMouseUp}
       aria-modal="true"
       aria-labelledby="dialog-label"
@@ -114,9 +91,9 @@ let o = class extends p {
         </footer>
       </section>
     </dialog>`;
-  }
-};
-o.styles = g`
+	}
+	static {
+		this.styles = t`
     @keyframes fhi-dialog-fade-in {
       from {
         opacity: 0;
@@ -203,32 +180,20 @@ o.styles = g`
       }
     }
   `;
-i([
-  n({ type: Boolean, reflect: !0 })
-], o.prototype, "open", 2);
-i([
-  n({ type: String, attribute: "size", reflect: !0 })
-], o.prototype, "size", 2);
-i([
-  n({ type: String, attribute: "close-button-label" })
-], o.prototype, "closeButtonLabel", 2);
-i([
-  n({ type: String })
-], o.prototype, "heading", 2);
-i([
-  h("dialog")
-], o.prototype, "_dialog", 2);
-i([
-  h("footer")
-], o.prototype, "_footer", 2);
-i([
-  h('slot[name="footer"]')
-], o.prototype, "_footerSlot", 2);
-o = i([
-  c(b)
-], o);
-export {
-  o as FhiModalDialog,
-  b as FhiModalDialogSelector
+	}
 };
-//# sourceMappingURL=fhi-modal-dialog.js.map
+a([e({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "open", void 0), a([e({
+	type: String,
+	attribute: "size",
+	reflect: !0
+})], c.prototype, "size", void 0), a([e({
+	type: String,
+	attribute: "close-button-label"
+})], c.prototype, "closeButtonLabel", void 0), a([e({ type: String })], c.prototype, "heading", void 0), a([r("dialog")], c.prototype, "_dialog", void 0), a([r("footer")], c.prototype, "_footer", void 0), a([r("slot[name=\"footer\"]")], c.prototype, "_footerSlot", void 0), c = a([n(s)], c);
+//#endregion
+export { c as FhiModalDialog, s as FhiModalDialogSelector };
+
+//# sourceMappingURL=fhi-modal-dialog.js.map

package/fhi-modal-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-modal-dialog.js","sources":["../../src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '../fhi-button/fhi-button.component';\nimport '../icons/fhi-icon-x.component';\nimport '../typography/fhi-headline/fhi-headline.component';\n\nexport const FhiModalDialogSelector = 'fhi-modal-dialog';\n\n/**\n * ## FHI Modal Dialog\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-modal-dialog--docs}\n *\n * The `fhi-modal-dialog` component is used to display important information or prompt the user for input in a modal window.\n * It overlays the main content and usually requires user interaction before returning to the underlying page.\n *\n * @tag fhi-modal-dialog\n * @element fhi-modal-dialog\n *\n * @slot body - The main content of the dialog. Typically contains text or form elements.\n * @slot footer - The footer content of the dialog, typically containing action buttons.\n */\n@customElement(FhiModalDialogSelector)\nexport class FhiModalDialog extends LitElement {\n  /**\n   * Decides whether the dialog is open or closed.\n   * By setting this property to true, the dialog will be shown. Setting it to false will close the dialog.\n   *\n   * This property is reflected as an attribute and will therefor also change if the user toggles the dialog or\n   * if you use the `show()` and `close()` methods.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * Sets the maximum width of the dialog.\n   * @type {'small' | 'medium'`}\n   */\n  @property({ type: String, attribute: 'size', reflect: true })\n  size: 'small' | 'medium' = 'medium';\n\n  /**\n   * Label for the close button.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'close-button-label' })\n  closeButtonLabel: string = '';\n\n  /**\n   * The heading text of the dialog. This is displayed at the top of the dialog.\n   * @type {string}\n   */\n  @property({ type: String })\n  heading: string = '';\n\n  @query('dialog')\n  private _dialog!: HTMLDialogElement;\n\n  @query('footer')\n  private _footer!: HTMLElement;\n\n  @query('slot[name=\"footer\"]')\n  private _footerSlot!: HTMLSlotElement;\n\n  private _triggerElement: HTMLElement | null = null;\n  private _bodyOverflowStyle: string = '';\n  private _mouseDownInsideDialog: boolean = false;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.show();\n      } else {\n        this.close();\n      }\n    }\n\n    // if invalid size is provided, default to 'medium'\n    if (changedProperties.has('size')) {\n      if (this.size !== 'small' && this.size !== 'medium') {\n        this.size = 'medium';\n      }\n    }\n\n    if (changedProperties.has('closeButtonLabel')) {\n      if (\n        typeof this.closeButtonLabel !== 'string' ||\n        this.closeButtonLabel.length === 0\n      ) {\n        throw new TypeError(\n          'The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons.',\n        );\n      }\n    }\n\n    if (changedProperties.has('closeButtonLabel')) {\n      if (typeof this.heading !== 'string' || this.heading.length === 0) {\n        throw new TypeError(\n          'The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.',\n        );\n      }\n    }\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    this._toggleFooter();\n  }\n\n  /**\n   * Programmatically opens the dialog.\n   * You can also open the dialog by instead setting the `open` property to `true`.\n   */\n  public show() {\n    this._triggerElement = document.activeElement as HTMLElement | null;\n    this._bodyOverflowStyle = document.body.style.overflow;\n\n    if (!this.open) {\n      this.open = true;\n    }\n\n    document.body.style.overflow = 'hidden';\n\n    this._dialog.showModal();\n\n    // Delay focus to make sure the windows screen reader properly detects the dialog\n    setTimeout(() => {\n      this._focusDialog();\n    }, 10);\n\n    this._dispatchToggleEvent();\n\n    this.addEventListener('keydown', this.handleKeyPress.bind(this));\n  }\n\n  /**\n   * Programmatically closes the dialog.\n   * You can also close the dialog by instead setting the `open` property to `false`.\n   */\n  public close() {\n    if (this.open) {\n      this.open = false;\n    }\n\n    document.body.style.overflow = this._bodyOverflowStyle;\n\n    this._dialog.close();\n\n    this._dispatchToggleEvent();\n    this._dispatchCloseEvent();\n\n    this._triggerElement?.focus();\n\n    this.removeEventListener('keydown', this.handleKeyPress.bind(this));\n  }\n\n  private _focusDialog() {\n    this._dialog.focus();\n  }\n\n  private _dispatchToggleEvent() {\n    /**\n     * @type {Event} - Standard DOM event with the type `toggle`\n     * This event is fired whenever the dialog is opened or closed.\n     * */\n    this.dispatchEvent(\n      new ToggleEvent('toggle', {\n        newState: this.open ? 'open' : 'closed',\n        oldState: this.open ? 'closed' : 'open',\n      }),\n    );\n  }\n\n  private _dispatchCloseEvent() {\n    /**\n     * @type {Event} - Standard DOM event with the type `close`\n     * This event is fired whenever the dialog is closed.\n     * */\n    this.dispatchEvent(new CloseEvent('close'));\n  }\n\n  private _handleDialogMouseUp(event: MouseEvent) {\n    if (this._mouseDownInsideDialog) {\n      this._mouseDownInsideDialog = false;\n      return;\n    }\n\n    if (event.target === this._dialog) {\n      this.close();\n    }\n\n    event.stopPropagation();\n  }\n\n  private _handleCloseButtonClick() {\n    this.close();\n  }\n\n  private _handleDialogContentMouseDown() {\n    this._mouseDownInsideDialog = true;\n  }\n\n  private _handleFooterSlotChange() {\n    this._toggleFooter();\n  }\n\n  private handleKeyPress(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n    }\n  }\n\n  private _toggleFooter() {\n    const nodes = this._footerSlot.assignedNodes({ flatten: true });\n\n    if (nodes.length === 0) {\n      this._footer.style.display = 'none';\n    } else {\n      this._footer.style.display = 'flex';\n    }\n  }\n\n  render() {\n    return html` <dialog\n      @mouseup=${this._handleDialogMouseUp}\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog-label\"\n      closedby=\"none\"\n      role=\"dialog\"\n    >\n      <section\n        class=\"dialog-content\"\n        @mousedown=${this._handleDialogContentMouseDown}\n      >\n        <header>\n          <fhi-headline ?hidden=${!this.heading} id=\"dialog-label\" level=\"1\"\n            >${this.heading}\n          </fhi-headline>\n          <fhi-button\n            variant=\"text\"\n            color=\"neutral\"\n            size=\"small\"\n            @click=${this._handleCloseButtonClick}\n          >\n            ${this.closeButtonLabel}\n            <fhi-icon-x></fhi-icon-x>\n          </fhi-button>\n        </header>\n        <slot name=\"body\"></slot>\n        <footer>\n          <slot\n            name=\"footer\"\n            @slotchange=${this._handleFooterSlotChange}\n          ></slot>\n        </footer>\n      </section>\n    </dialog>`;\n  }\n\n  static styles = css`\n    @keyframes fhi-dialog-fade-in {\n      from {\n        opacity: 0;\n      }\n    }\n\n    :host {\n      --dimension-dialog-border-width: var(--fhi-dimension-border-width);\n      --dimension-dialog-border-radius: var(--fhi-border-radius-200);\n      --dimension-dialog-header-padding: var(--fhi-spacing-500)\n        var(--fhi-spacing-500) 0 var(--fhi-spacing-500);\n      --dimension-dialog-header-gap: var(--fhi-spacing-050);\n      --dimension-dialog-body-padding: var(--fhi-spacing-500);\n      --dimension-dialog-footer-padding: 0 var(--fhi-spacing-500)\n        var(--fhi-spacing-500) var(--fhi-spacing-500);\n      --dimension-dialog-footer-gap: var(--fhi-spacing-050);\n\n      --dimension-dialog-width-small: 28rem;\n      --dimension-dialog-width-medium: 40rem;\n\n      --color-backdrop: var(--fhi-color-neutral-surface-active);\n      --color-dialog-border: var(--fhi-color-neutral-border-subtle);\n\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n    }\n\n    :host {\n      display: none;\n      position: absolute;\n\n      dialog {\n        display: flex;\n        overflow: hidden;\n        border: var(--dimension-dialog-border-width) solid\n          var(--color-dialog-border);\n        border-radius: var(--dimension-dialog-border-radius);\n        animation: var(--motion-transition) fhi-dialog-fade-in;\n        padding: 0;\n        .dialog-content {\n          overflow: auto;\n          flex: 1;\n        }\n        header {\n          display: flex;\n          justify-content: space-between;\n          align-items: start;\n          gap: var(--dimension-dialog-header-gap);\n          padding: var(--dimension-dialog-header-padding);\n        }\n        slot[name='body'] {\n          display: block;\n          padding: var(--dimension-dialog-body-padding);\n        }\n        footer {\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          gap: var(--dimension-dialog-footer-gap);\n          flex-wrap: wrap;\n          padding: var(--dimension-dialog-footer-padding);\n        }\n        &::backdrop {\n          background-color: var(--color-backdrop);\n          opacity: var(--fhi-opacity-disabled);\n          animation: var(--motion-transition) fhi-dialog-fade-in;\n        }\n      }\n    }\n\n    :host([open]) {\n      display: block;\n    }\n\n    :host([size='small']) {\n      dialog {\n        width: var(--dimension-dialog-width-small);\n      }\n    }\n\n    :host([size='medium']) {\n      dialog {\n        width: var(--dimension-dialog-width-medium);\n      }\n    }\n  `;\n}\n"],"names":["FhiModalDialogSelector","FhiModalDialog","LitElement","changedProperties","_changedProperties","_a","event","html","css","__decorateClass","property","query","customElement"],"mappings":"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"}
+{"version":3,"file":"fhi-modal-dialog.js","names":[],"sources":["../../src/components/fhi-modal-dialog/fhi-modal-dialog.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\n\nimport '../fhi-button/fhi-button.component';\nimport '../icons/fhi-icon-x.component';\nimport '../typography/fhi-headline/fhi-headline.component';\n\nexport const FhiModalDialogSelector = 'fhi-modal-dialog';\n\n/**\n * ## FHI Modal Dialog\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-modal-dialog--docs}\n *\n * The `fhi-modal-dialog` component is used to display important information or prompt the user for input in a modal window.\n * It overlays the main content and usually requires user interaction before returning to the underlying page.\n *\n * @tag fhi-modal-dialog\n * @element fhi-modal-dialog\n *\n * @slot body - The main content of the dialog. Typically contains text or form elements.\n * @slot footer - The footer content of the dialog, typically containing action buttons.\n */\n@customElement(FhiModalDialogSelector)\nexport class FhiModalDialog extends LitElement {\n  /**\n   * Decides whether the dialog is open or closed.\n   * By setting this property to true, the dialog will be shown. Setting it to false will close the dialog.\n   *\n   * This property is reflected as an attribute and will therefor also change if the user toggles the dialog or\n   * if you use the `show()` and `close()` methods.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * Sets the maximum width of the dialog.\n   * @type {'small' | 'medium'`}\n   */\n  @property({ type: String, attribute: 'size', reflect: true })\n  size: 'small' | 'medium' = 'medium';\n\n  /**\n   * Label for the close button.\n   * @type {string}\n   */\n  @property({ type: String, attribute: 'close-button-label' })\n  closeButtonLabel: string = '';\n\n  /**\n   * The heading text of the dialog. This is displayed at the top of the dialog.\n   * @type {string}\n   */\n  @property({ type: String })\n  heading: string = '';\n\n  @query('dialog')\n  private _dialog!: HTMLDialogElement;\n\n  @query('footer')\n  private _footer!: HTMLElement;\n\n  @query('slot[name=\"footer\"]')\n  private _footerSlot!: HTMLSlotElement;\n\n  private _triggerElement: HTMLElement | null = null;\n  private _bodyOverflowStyle: string = '';\n  private _mouseDownInsideDialog: boolean = false;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('open')) {\n      if (this.open) {\n        this.show();\n      } else {\n        this.close();\n      }\n    }\n\n    // if invalid size is provided, default to 'medium'\n    if (changedProperties.has('size')) {\n      if (this.size !== 'small' && this.size !== 'medium') {\n        this.size = 'medium';\n      }\n    }\n\n    if (changedProperties.has('closeButtonLabel')) {\n      if (\n        typeof this.closeButtonLabel !== 'string' ||\n        this.closeButtonLabel.length === 0\n      ) {\n        throw new TypeError(\n          'The close-button-label property must be set to a non-empty string. This label must describe the purpose of the close button for accessibility reasons.',\n        );\n      }\n    }\n\n    if (changedProperties.has('closeButtonLabel')) {\n      if (typeof this.heading !== 'string' || this.heading.length === 0) {\n        throw new TypeError(\n          'The heading property must be set to a non-empty string. This heading describes the purpose of the dialog.',\n        );\n      }\n    }\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties);\n    this._toggleFooter();\n  }\n\n  /**\n   * Programmatically opens the dialog.\n   * You can also open the dialog by instead setting the `open` property to `true`.\n   */\n  public show() {\n    this._triggerElement = document.activeElement as HTMLElement | null;\n    this._bodyOverflowStyle = document.body.style.overflow;\n\n    if (!this.open) {\n      this.open = true;\n    }\n\n    document.body.style.overflow = 'hidden';\n\n    this._dialog.showModal();\n\n    // Delay focus to make sure the windows screen reader properly detects the dialog\n    setTimeout(() => {\n      this._focusDialog();\n    }, 10);\n\n    this._dispatchToggleEvent();\n\n    this.addEventListener('keydown', this.handleKeyPress.bind(this));\n  }\n\n  /**\n   * Programmatically closes the dialog.\n   * You can also close the dialog by instead setting the `open` property to `false`.\n   */\n  public close() {\n    if (this.open) {\n      this.open = false;\n    }\n\n    document.body.style.overflow = this._bodyOverflowStyle;\n\n    this._dialog.close();\n\n    this._dispatchToggleEvent();\n    this._dispatchCloseEvent();\n\n    this._triggerElement?.focus();\n\n    this.removeEventListener('keydown', this.handleKeyPress.bind(this));\n  }\n\n  private _focusDialog() {\n    this._dialog.focus();\n  }\n\n  private _dispatchToggleEvent() {\n    /**\n     * @type {Event} - Standard DOM event with the type `toggle`\n     * This event is fired whenever the dialog is opened or closed.\n     * */\n    this.dispatchEvent(\n      new ToggleEvent('toggle', {\n        newState: this.open ? 'open' : 'closed',\n        oldState: this.open ? 'closed' : 'open',\n      }),\n    );\n  }\n\n  private _dispatchCloseEvent() {\n    /**\n     * @type {Event} - Standard DOM event with the type `close`\n     * This event is fired whenever the dialog is closed.\n     * */\n    this.dispatchEvent(new CloseEvent('close'));\n  }\n\n  private _handleDialogMouseUp(event: MouseEvent) {\n    if (this._mouseDownInsideDialog) {\n      this._mouseDownInsideDialog = false;\n      return;\n    }\n\n    if (event.target === this._dialog) {\n      this.close();\n    }\n\n    event.stopPropagation();\n  }\n\n  private _handleCloseButtonClick() {\n    this.close();\n  }\n\n  private _handleDialogContentMouseDown() {\n    this._mouseDownInsideDialog = true;\n  }\n\n  private _handleFooterSlotChange() {\n    this._toggleFooter();\n  }\n\n  private handleKeyPress(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.close();\n    }\n  }\n\n  private _toggleFooter() {\n    const nodes = this._footerSlot.assignedNodes({ flatten: true });\n\n    if (nodes.length === 0) {\n      this._footer.style.display = 'none';\n    } else {\n      this._footer.style.display = 'flex';\n    }\n  }\n\n  render() {\n    return html` <dialog\n      @mouseup=${this._handleDialogMouseUp}\n      aria-modal=\"true\"\n      aria-labelledby=\"dialog-label\"\n      closedby=\"none\"\n      role=\"dialog\"\n    >\n      <section\n        class=\"dialog-content\"\n        @mousedown=${this._handleDialogContentMouseDown}\n      >\n        <header>\n          <fhi-headline ?hidden=${!this.heading} id=\"dialog-label\" level=\"1\"\n            >${this.heading}\n          </fhi-headline>\n          <fhi-button\n            variant=\"text\"\n            color=\"neutral\"\n            size=\"small\"\n            @click=${this._handleCloseButtonClick}\n          >\n            ${this.closeButtonLabel}\n            <fhi-icon-x></fhi-icon-x>\n          </fhi-button>\n        </header>\n        <slot name=\"body\"></slot>\n        <footer>\n          <slot\n            name=\"footer\"\n            @slotchange=${this._handleFooterSlotChange}\n          ></slot>\n        </footer>\n      </section>\n    </dialog>`;\n  }\n\n  static styles = css`\n    @keyframes fhi-dialog-fade-in {\n      from {\n        opacity: 0;\n      }\n    }\n\n    :host {\n      --dimension-dialog-border-width: var(--fhi-dimension-border-width);\n      --dimension-dialog-border-radius: var(--fhi-border-radius-200);\n      --dimension-dialog-header-padding: var(--fhi-spacing-500)\n        var(--fhi-spacing-500) 0 var(--fhi-spacing-500);\n      --dimension-dialog-header-gap: var(--fhi-spacing-050);\n      --dimension-dialog-body-padding: var(--fhi-spacing-500);\n      --dimension-dialog-footer-padding: 0 var(--fhi-spacing-500)\n        var(--fhi-spacing-500) var(--fhi-spacing-500);\n      --dimension-dialog-footer-gap: var(--fhi-spacing-050);\n\n      --dimension-dialog-width-small: 28rem;\n      --dimension-dialog-width-medium: 40rem;\n\n      --color-backdrop: var(--fhi-color-neutral-surface-active);\n      --color-dialog-border: var(--fhi-color-neutral-border-subtle);\n\n      --motion-transition: var(--fhi-motion-duration-quick)\n        var(--fhi-motion-ease-default);\n    }\n\n    :host {\n      display: none;\n      position: absolute;\n\n      dialog {\n        display: flex;\n        overflow: hidden;\n        border: var(--dimension-dialog-border-width) solid\n          var(--color-dialog-border);\n        border-radius: var(--dimension-dialog-border-radius);\n        animation: var(--motion-transition) fhi-dialog-fade-in;\n        padding: 0;\n        .dialog-content {\n          overflow: auto;\n          flex: 1;\n        }\n        header {\n          display: flex;\n          justify-content: space-between;\n          align-items: start;\n          gap: var(--dimension-dialog-header-gap);\n          padding: var(--dimension-dialog-header-padding);\n        }\n        slot[name='body'] {\n          display: block;\n          padding: var(--dimension-dialog-body-padding);\n        }\n        footer {\n          display: flex;\n          justify-content: flex-end;\n          align-items: center;\n          gap: var(--dimension-dialog-footer-gap);\n          flex-wrap: wrap;\n          padding: var(--dimension-dialog-footer-padding);\n        }\n        &::backdrop {\n          background-color: var(--color-backdrop);\n          opacity: var(--fhi-opacity-disabled);\n          animation: var(--motion-transition) fhi-dialog-fade-in;\n        }\n      }\n    }\n\n    :host([open]) {\n      display: block;\n    }\n\n    :host([size='small']) {\n      dialog {\n        width: var(--dimension-dialog-width-small);\n      }\n    }\n\n    :host([size='medium']) {\n      dialog {\n        width: var(--dimension-dialog-width-medium);\n      }\n    }\n  `;\n}\n"],"mappings":"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"}

package/fhi-radio.js

@@ -1,85 +1,81 @@
-import { i as h, n, a as u, b as p, t as b } from "./property-B2Ico5CW.js";
-import { e as v } from "./query-Ddbd72Um.js";
-import { o as f } from "./if-defined-B_sR6Mtk.js";
-var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, d = (r, o, t, s) => {
-  for (var e = s > 1 ? void 0 : s ? m(o, t) : o, a = r.length - 1, l; a >= 0; a--)
-    (l = r[a]) && (e = (s ? l(o, t, e) : l(e)) || e);
-  return s && e && g(o, t, e), e;
-};
-const c = "fhi-radio";
-let i = class extends u {
-  constructor() {
-    super(), this.label = void 0, this.name = void 0, this.status = void 0, this.disabled = !1, this.checked = !1, this.value = "on", this.isFormElement = !1, this._internals = this.attachInternals(), this._groupRoot = document;
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.addEventListener("focus", this._setFocusOnInput), this.isFormElement = !!this._internals.form, this.isFormElement && (this._updateFormValue(), this._groupRoot = this._internals.form), this.name && (this.addEventListener("keydown", this._handleKeyDown), this._SetTabbableRadios());
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeyDown), this.removeEventListener("focus", this._setFocusOnInput);
-  }
-  _setFocusOnInput() {
-    this._input.focus();
-  }
-  _getRadioGroup() {
-    return Array.from(
-      this._groupRoot.querySelectorAll(
-        `${c}[name="${this.name}"]`
-      )
-    );
-  }
-  _SetTabbableRadios() {
-    const r = this._getRadioGroup();
-    r.forEach((o) => {
-      o.tabIndex = o.checked ? 0 : -1;
-    }), !r.some((o) => o.checked) && r.length > 0 && (r[0].tabIndex = 0);
-  }
-  updated(r) {
-    super.updated(r), r.has("checked") && (this._input.checked = !!this.checked, this._updateFormValue(), this.checked && this.uncheckGroupMembers()), (r.has("value") || r.has("name")) && this._input.checked && this._updateFormValue();
-  }
-  formResetCallback() {
-    this._getRadioGroup().filter(
-      (o) => typeof o.getAttribute("checked") == "string"
-    ).pop() === this && (this.checked = !0), this._updateFormValue();
-  }
-  uncheckGroupMembers() {
-    this._getRadioGroup().forEach((o) => {
-      o !== this && (o.isFormElement && this._groupRoot === document || (o.checked = !1));
-    });
-  }
-  _updateFormValue() {
-    this.isFormElement && this._internals.setFormValue(this.checked ? this.value : null);
-  }
-  _handleChange(r) {
-    this.checked = r.target.checked, this.uncheckGroupMembers(), this._updateFormValue(), r.stopPropagation(), this._dispatchChangeEvent();
-  }
-  _handleInput(r) {
-    r.stopPropagation(), this._dispatchInputEvent();
-  }
-  _dispatchChangeEvent() {
-    this.dispatchEvent(new Event("change", { bubbles: !0 }));
-  }
-  _dispatchInputEvent() {
-    this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
-  }
-  _handleKeyDown(r) {
-    if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(r.key))
-      return;
-    r.preventDefault();
-    const t = this._getRadioGroup();
-    if (t.length < 2)
-      return;
-    const e = t.indexOf(this);
-    let a;
-    r.key === "ArrowUp" || r.key === "ArrowLeft" ? a = t[e === 0 ? t.length - 1 : e - 1] : a = t[e === t.length - 1 ? 0 : e + 1], a.focus(), this.checked = !1, a.checked = !0, this._SetTabbableRadios();
-  }
-  render() {
-    return p`
+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";
+//#region src/components/fhi-radio/fhi-radio.component.ts
+var c = "fhi-radio", l = class extends i {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this.label = void 0, this.name = void 0, this.status = void 0, this.disabled = !1, this.checked = !1, this.value = "on", this.isFormElement = !1, this._internals = this.attachInternals(), this._groupRoot = document;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.addEventListener("focus", this._setFocusOnInput), this.isFormElement = !!this._internals.form, this.isFormElement && (this._updateFormValue(), this._groupRoot = this._internals.form), this.name && (this.addEventListener("keydown", this._handleKeyDown), this._SetTabbableRadios());
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("keydown", this._handleKeyDown), this.removeEventListener("focus", this._setFocusOnInput);
+	}
+	_setFocusOnInput() {
+		this._input.focus();
+	}
+	_getRadioGroup() {
+		return Array.from(this._groupRoot.querySelectorAll(`${c}[name="${this.name}"]`));
+	}
+	_SetTabbableRadios() {
+		let e = this._getRadioGroup();
+		e.forEach((e) => {
+			e.tabIndex = e.checked ? 0 : -1;
+		}), !e.some((e) => e.checked) && e.length > 0 && (e[0].tabIndex = 0);
+	}
+	updated(e) {
+		super.updated(e), e.has("checked") && (this._input.checked = !!this.checked, this._updateFormValue(), this.checked && this.uncheckGroupMembers()), (e.has("value") || e.has("name")) && this._input.checked && this._updateFormValue();
+	}
+	formResetCallback() {
+		this._getRadioGroup().filter((e) => typeof e.getAttribute("checked") == "string").pop() === this && (this.checked = !0), this._updateFormValue();
+	}
+	uncheckGroupMembers() {
+		this._getRadioGroup().forEach((e) => {
+			e !== this && (e.isFormElement && this._groupRoot === document || (e.checked = !1));
+		});
+	}
+	_updateFormValue() {
+		this.isFormElement && this._internals.setFormValue(this.checked ? this.value : null);
+	}
+	_handleChange(e) {
+		this.checked = e.target.checked, this.uncheckGroupMembers(), this._updateFormValue(), e.stopPropagation(), this._dispatchChangeEvent();
+	}
+	_handleInput(e) {
+		e.stopPropagation(), this._dispatchInputEvent();
+	}
+	_dispatchChangeEvent() {
+		this.dispatchEvent(new Event("change", { bubbles: !0 }));
+	}
+	_dispatchInputEvent() {
+		this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleKeyDown(e) {
+		if (![
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight"
+		].includes(e.key)) return;
+		e.preventDefault();
+		let t = this._getRadioGroup();
+		if (t.length < 2) return;
+		let n = t.indexOf(this), r;
+		r = e.key === "ArrowUp" || e.key === "ArrowLeft" ? t[n === 0 ? t.length - 1 : n - 1] : t[n === t.length - 1 ? 0 : n + 1], r.focus(), this.checked = !1, r.checked = !0, this._SetTabbableRadios();
+	}
+	render() {
+		return o`
       <label>
         <div class="radio-container">
           <input
             type="radio"
             id="input-element"
-            name="${f(this.name)}"
+            name="${s(this.name)}"
             value="${this.value}"
             ?checked=${this.checked}
             ?disabled=${this.disabled}
@@ -97,10 +93,9 @@ let i = class extends u {
         ${this.label}
       </label>
     `;
-  }
-};
-i.formAssociated = !0;
-i.styles = h`
+	}
+	static {
+		this.styles = t`
     :host {
       --motion-radio-transition: var(--fhi-motion-ease-default)
         var(--fhi-motion-duration-quick);
@@ -275,32 +270,19 @@ i.styles = h`
       }
     }
   `;
-d([
-  n({ type: String })
-], i.prototype, "label", 2);
-d([
-  n({ type: String, reflect: !0 })
-], i.prototype, "name", 2);
-d([
-  n({ type: String, reflect: !0 })
-], i.prototype, "status", 2);
-d([
-  n({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
-d([
-  n({ type: Boolean })
-], i.prototype, "checked", 2);
-d([
-  n({ type: String })
-], i.prototype, "value", 2);
-d([
-  v("#input-element")
-], i.prototype, "_input", 2);
-i = d([
-  b(c)
-], i);
-export {
-  i as FhiRadio,
-  c as FhiRadioSelector
+	}
 };
-//# sourceMappingURL=fhi-radio.js.map
+a([e({ type: String })], l.prototype, "label", void 0), a([e({
+	type: String,
+	reflect: !0
+})], l.prototype, "name", void 0), a([e({
+	type: String,
+	reflect: !0
+})], l.prototype, "status", void 0), a([e({
+	type: Boolean,
+	reflect: !0
+})], l.prototype, "disabled", void 0), a([e({ type: Boolean })], l.prototype, "checked", void 0), a([e({ type: String })], l.prototype, "value", void 0), a([r("#input-element")], l.prototype, "_input", void 0), l = a([n(c)], l);
+//#endregion
+export { l as FhiRadio, c as FhiRadioSelector };
+
+//# sourceMappingURL=fhi-radio.js.map