@folkehelseinstituttet/designsystem 0.40.0 → 0.40.1

package/fhi-date-input.js

@@ -1,306 +1,3 @@
-import { i as c, n as r, a as u, b as l, t as f } from "./property-B2Ico5CW.js";
-import { e as g } from "./query-Ddbd72Um.js";
-import { o as p } from "./if-defined-B_sR6Mtk.js";
 import "./fhi-icon-calendar.js";
-const v = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (e, i, s, n) => {
-  for (var o = n > 1 ? void 0 : n ? y(i, s) : i, h = e.length - 1, d; h >= 0; h--)
-    (d = e[h]) && (o = (n ? d(i, s, o) : d(o)) || o);
-  return n && o && b(i, s, o), o;
-};
-const m = "fhi-date-input";
-let t = class extends u {
-  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();
-  }
-  get name() {
-    return this._name;
-  }
-  set name(e) {
-    const i = this._name;
-    this._name = e, this.requestUpdate("name", i), this._internals.setFormValue(this.value ?? null);
-  }
-  get value() {
-    return this._value;
-  }
-  set value(e) {
-    const i = this._value;
-    this._value = e, this.requestUpdate("value", i), this._internals.setFormValue(this._value ?? null);
-  }
-  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 l`
-      ${this.label && l`<label for="input-element">${this.label}</label>`}
-      ${this.helpText && l`<p class="help-text">${this.helpText}</p>`}
-      <div class="input-container">
-        <input
-          type="date"
-          id="input-element"
-          name=${p(this.name)}
-          min=${p(this.min)}
-          max=${p(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=${v() ? "-1" : "0"}
-          role="button"
-          aria-label="Vis datovelger"
-          aria-haspopup="true"
-          ><fhi-icon-calendar></fhi-icon-calendar
-        ></span>
-      </div>
-      ${this.message && l`<p class="message">${this.message}</p>`}
-    `;
-  }
-};
-t.formAssociated = !0;
-t.styles = c`
-    :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([
-  r({ type: String })
-], t.prototype, "label", 2);
-a([
-  r({ type: String })
-], t.prototype, "message", 2);
-a([
-  r({ type: String, attribute: "help-text" })
-], t.prototype, "helpText", 2);
-a([
-  r({ type: String })
-], t.prototype, "min", 2);
-a([
-  r({ type: String })
-], t.prototype, "max", 2);
-a([
-  r({ type: String, reflect: !0 })
-], t.prototype, "status", 2);
-a([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "readonly", 2);
-a([
-  r({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-a([
-  g("#input-element")
-], t.prototype, "_input", 2);
-a([
-  r({ type: String, reflect: !0 })
-], t.prototype, "name", 1);
-a([
-  r({ type: String })
-], t.prototype, "value", 1);
-t = a([
-  f(m)
-], t);
-export {
-  t as FhiDateInput,
-  m as FhiDateInputSelector
-};
-//# sourceMappingURL=fhi-date-input.js.map
+import { n as e, t } from "./fhi-date-input.component-Bus7CeKM.js";
+export { t as FhiDateInput, e as FhiDateInputSelector };

package/fhi-display.js

@@ -1,36 +1,26 @@
-import { i as y, n as h, a as n, b as f, t as g } from "./property-B2Ico5CW.js";
-import { o as m } from "./unsafe-html-DfuTUjUu.js";
-var d = Object.defineProperty, c = Object.getOwnPropertyDescriptor, s = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? c(t, a) : t, o = e.length - 1, p; o >= 0; o--)
-    (p = e[o]) && (i = (r ? p(t, a, i) : p(i)) || i);
-  return r && i && d(t, a, i), i;
-};
-const v = "fhi-display";
-let l = class extends n {
-  constructor() {
-    super(...arguments), this.size = "medium", this.color = "currentcolor";
-  }
-  updated(e) {
-    if (super.updated(e), e.has("level")) {
-      const t = Number(this.level);
-      (isNaN(t) || t < 1 || t > 6) && console.error(
-        new TypeError(
-          `The level property must be set to a number between 1 and 6. Current value: ${this.level}`
-        )
-      );
-    }
-    e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
-  }
-  render() {
-    const e = `
+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 { t as o } from "./unsafe-html-CBTN3162.js";
+//#region src/components/typography/fhi-display/fhi-display.component.ts
+var s = "fhi-display", c = class extends r {
+	constructor(...e) {
+		super(...e), this.size = "medium", this.color = "currentcolor";
+	}
+	updated(e) {
+		if (super.updated(e), e.has("level")) {
+			let e = Number(this.level);
+			(isNaN(e) || e < 1 || e > 6) && console.error(/* @__PURE__ */ TypeError(`The level property must be set to a number between 1 and 6. Current value: ${this.level}`));
+		}
+		e.has("color") && (this.style.color = typeof this.color == "string" ? this.color : "currentcolor");
+	}
+	render() {
+		return a`${o(`
       <h${this.level} class="display">
         <slot></slot>
       </h${this.level}>
-    `;
-    return f`${m(e)}`;
-  }
-};
-l.styles = y`
+    `)}`;
+	}
+	static {
+		this.styles = t`
     :host {
       display: block;
       contain: layout;
@@ -68,20 +58,13 @@ l.styles = y`
       }
     }
   `;
-s([
-  h({ type: String, reflect: !0 })
-], l.prototype, "size", 2);
-s([
-  h({ type: String })
-], l.prototype, "color", 2);
-s([
-  h({ type: Number })
-], l.prototype, "level", 2);
-l = s([
-  g(v)
-], l);
-export {
-  l as FhiDisplay,
-  v as FhiDisplaySelector
+	}
 };
-//# sourceMappingURL=fhi-display.js.map
+i([e({
+	type: String,
+	reflect: !0
+})], c.prototype, "size", void 0), i([e({ type: String })], c.prototype, "color", void 0), i([e({ type: Number })], c.prototype, "level", void 0), c = i([n(s)], c);
+//#endregion
+export { c as FhiDisplay, s as FhiDisplaySelector };
+
+//# sourceMappingURL=fhi-display.js.map

package/fhi-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-display.js","sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n  /**\n   * Sets the font size of the given text.\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n   *\n   * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n   * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n   *\n   * Example:\n   * ```html\n   *  <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-display>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string = 'currentcolor';\n\n  /**\n   * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n   * @type {1 | 2 | 3 | 4 | 5 | 6}\n   */\n  @property({ type: Number }) level!: DisplayLevel;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('level')) {\n      const levelAsNumber = Number(this.level);\n      if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n        console.error(\n          new TypeError(\n            `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n          ),\n        );\n      }\n    }\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string' ? this.color : 'currentcolor';\n    }\n  }\n\n  render() {\n    const template = `\n      <h${this.level} class=\"display\">\n        <slot></slot>\n      </h${this.level}>\n    `;\n    return html`${unsafeHTML(template)}`;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      contain: layout;\n      .display {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .display {\n        font-size: var(--fhi-typography-display-large-font-size);\n        font-weight: var(--fhi-typography-display-large-font-weight);\n        line-height: var(--fhi-typography-display-large-line-height);\n        letter-spacing: var(--fhi-typography-display-large-letter-spacing);\n      }\n    }\n\n    :host([size='medium']) {\n      .display {\n        font-size: var(--fhi-typography-display-medium-font-size);\n        font-weight: var(--fhi-typography-display-medium-font-weight);\n        line-height: var(--fhi-typography-display-medium-line-height);\n        letter-spacing: var(--fhi-typography-display-medium-letter-spacing);\n      }\n    }\n\n    :host([size='small']) {\n      .display {\n        font-size: var(--fhi-typography-display-small-font-size);\n        font-weight: var(--fhi-typography-display-small-font-weight);\n        line-height: var(--fhi-typography-display-small-line-height);\n        letter-spacing: var(--fhi-typography-display-small-letter-spacing);\n      }\n    }\n  `;\n}\n"],"names":["FhiDisplaySelector","FhiDisplay","LitElement","changedProperties","levelAsNumber","template","html","unsafeHTML","css","__decorateClass","property","customElement"],"mappings":";;;;;;;AAIO,MAAMA,IAAqB;AAuB3B,IAAMC,IAAN,cAAyBC,EAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA,GAMsC,KAAA,OAG7B,UAiBc,KAAA,QAAiB;AAAA,EAAA;AAAA,EAQ7C,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,OAAO,GAAG;AAClC,YAAMC,IAAgB,OAAO,KAAK,KAAK;AACvC,OAAI,MAAMA,CAAa,KAAKA,IAAgB,KAAKA,IAAgB,MAC/D,QAAQ;AAAA,QACN,IAAI;AAAA,UACF,8EAA8E,KAAK,KAAK;AAAA,QAAA;AAAA,MAC1F;AAAA,IAGN;AAEA,IAAID,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;AAAA,EAEpD;AAAA,EAEA,SAAS;AACP,UAAME,IAAW;AAAA,UACX,KAAK,KAAK;AAAA;AAAA,WAET,KAAK,KAAK;AAAA;AAEjB,WAAOC,IAAOC,EAAWF,CAAQ,CAAC;AAAA,EACpC;AAwCF;AArGaJ,EA+DJ,SAASO;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAzD2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAN9BT,EAMgC,WAAA,QAAA,CAAA;AAoBfQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1BfT,EA0BiB,WAAA,SAAA,CAAA;AAMAQ,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhCfT,EAgCiB,WAAA,SAAA,CAAA;AAhCjBA,IAANQ,EAAA;AAAA,EADNE,EAAcX,CAAkB;AAAA,GACpBC,CAAA;"}
+{"version":3,"file":"fhi-display.js","names":[],"sources":["../../src/components/typography/fhi-display/fhi-display.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\n\nexport const FhiDisplaySelector = 'fhi-display';\n\nexport type DisplayLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\n/**\n * ## FHI Display\n *\n * {@link https://designsystem.fhi.no/?path=/story/komponenter-typography-display--preview}\n *\n * The `<fhi-display>` component is used to display large, eye-catching headline text in accordance with the FHI Design System guidelines.\n *\n * For smaller, less prominent title text, use the `<fhi-title>` component instead.\n *\n * For standard headline text, use the `<fhi-headline>` component instead.\n *\n * Use this component instead of the standard HTML heading elements, `<h1>` - `<h6>`, to ensure consistent styling across your application.\n *\n * @tag fhi-display\n * @element fhi-display\n *\n * @slot - The content of the fhi-display component. This should be pure text.\n */\n@customElement(FhiDisplaySelector)\nexport class FhiDisplay extends LitElement {\n  /**\n   * Sets the font size of the given text.\n   * @reflect\n   * @type {'large' | 'medium' | 'small'}\n   */\n  @property({ type: String, reflect: true }) size:\n    | 'large'\n    | 'medium'\n    | 'small' = 'medium';\n\n  /**\n   * Sets color of the given text. It supports any valid CSS color value (e.g. hex, rgb, rgba, hsl, hsla, color names).\n   *\n   * It is recommended to use Design Tokens for colors defined in the FHI Design System.\n   * See: {@link https://designsystem.fhi.no/?path=/docs/design-tokens-farger--docs}\n   *\n   * Example:\n   * ```html\n   *  <fhi-display color=\"var(--fhi-color-primary-text-default)\">\n   *    This text will be in the primary text color.\n   *  </fhi-display>\n   * ```\n   *\n   * @type {string}\n   */\n  @property({ type: String }) color?: string = 'currentcolor';\n\n  /**\n   * Sets the heading level for the text, corresponding to HTML heading elements `<h1>` to `<h6>`.\n   * @type {1 | 2 | 3 | 4 | 5 | 6}\n   */\n  @property({ type: Number }) level!: DisplayLevel;\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('level')) {\n      const levelAsNumber = Number(this.level);\n      if (isNaN(levelAsNumber) || levelAsNumber < 1 || levelAsNumber > 6) {\n        console.error(\n          new TypeError(\n            `The level property must be set to a number between 1 and 6. Current value: ${this.level}`,\n          ),\n        );\n      }\n    }\n\n    if (changedProperties.has('color')) {\n      this.style.color =\n        typeof this.color === 'string' ? this.color : 'currentcolor';\n    }\n  }\n\n  render() {\n    const template = `\n      <h${this.level} class=\"display\">\n        <slot></slot>\n      </h${this.level}>\n    `;\n    return html`${unsafeHTML(template)}`;\n  }\n\n  static styles = css`\n    :host {\n      display: block;\n      contain: layout;\n      .display {\n        font-family: var(--fhi-font-family-default);\n        -webkit-font-smoothing: antialiased;\n        margin: 0;\n      }\n    }\n\n    :host([size='large']) {\n      .display {\n        font-size: var(--fhi-typography-display-large-font-size);\n        font-weight: var(--fhi-typography-display-large-font-weight);\n        line-height: var(--fhi-typography-display-large-line-height);\n        letter-spacing: var(--fhi-typography-display-large-letter-spacing);\n      }\n    }\n\n    :host([size='medium']) {\n      .display {\n        font-size: var(--fhi-typography-display-medium-font-size);\n        font-weight: var(--fhi-typography-display-medium-font-weight);\n        line-height: var(--fhi-typography-display-medium-line-height);\n        letter-spacing: var(--fhi-typography-display-medium-letter-spacing);\n      }\n    }\n\n    :host([size='small']) {\n      .display {\n        font-size: var(--fhi-typography-display-small-font-size);\n        font-weight: var(--fhi-typography-display-small-font-weight);\n        line-height: var(--fhi-typography-display-small-line-height);\n        letter-spacing: var(--fhi-typography-display-small-letter-spacing);\n      }\n    }\n  `;\n}\n"],"mappings":";;;AAIA,IAAa,IAAqB,eAuB3B,IAAA,cAAyB,EAAW;;2BAS3B,uBAiB+B;;CAQ7C,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,OAAO,GAAG;GAClC,IAAM,IAAgB,OAAO,KAAK,KAAK;GACvC,CAAI,MAAM,CAAa,KAAK,IAAgB,KAAK,IAAgB,MAC/D,QAAQ,MACN,gBAAI,UACF,8EAA8E,KAAK,OACrF,CACF;EAEJ;EAEA,AAAI,EAAkB,IAAI,OAAO,MAC/B,KAAK,MAAM,QACT,OAAO,KAAK,SAAU,WAAW,KAAK,QAAQ;CAEpD;CAEA,SAAS;EAMP,OAAO,CAAI,GAAG,EAAW;UAJnB,KAAK,MAAM;;WAEV,KAAK,MAAM;KAEe;CACnC;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCrB;GA/FG,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,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAjC3B,EAAc,CAAkB,CAAA,GAAA,CAAA"}

package/fhi-flex.js

@@ -1,31 +1,28 @@
-import { i as g, n, a as h, b as m, t as c } from "./property-B2Ico5CW.js";
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (s, a, r, o) => {
-  for (var e = o > 1 ? void 0 : o ? f(a, r) : a, p = s.length - 1, l; p >= 0; p--)
-    (l = s[p]) && (e = (o ? l(a, r, e) : l(e)) || e);
-  return o && e && u(a, r, e), e;
-};
-const d = "fhi-flex";
-let t = class extends h {
-  constructor() {
-    super(...arguments), this.direction = "row", this.gap = "medium", this.wrap = !1, this.justify = "start", this.align = "stretch";
-  }
-  updated(s) {
-    if (super.updated(s), s.has("gap")) {
-      if (["small", "medium", "large"].includes(
-        String(this.gap)
-      )) {
-        this.style.gap = "";
-        return;
-      }
-      const r = Number(this.gap) ? `${this.gap}px` : this.gap;
-      this.style.gap = r;
-    }
-  }
-  render() {
-    return m`<slot></slot>`;
-  }
-};
-t.styles = 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/fhi-flex/fhi-flex.component.ts
+var o = "fhi-flex", s = class extends r {
+	constructor(...e) {
+		super(...e), this.direction = "row", this.gap = "medium", this.wrap = !1, this.justify = "start", this.align = "stretch";
+	}
+	updated(e) {
+		if (super.updated(e), e.has("gap")) {
+			if ([
+				"small",
+				"medium",
+				"large"
+			].includes(String(this.gap))) {
+				this.style.gap = "";
+				return;
+			}
+			let e = Number(this.gap) ? `${this.gap}px` : this.gap;
+			this.style.gap = e;
+		}
+	}
+	render() {
+		return a`<slot></slot>`;
+	}
+	static {
+		this.styles = t`
     :host {
       --dimension-gap-small: var(--fhi-spacing-100);
       --dimension-gap-medium: var(--fhi-spacing-200);
@@ -93,26 +90,19 @@ t.styles = g`
       align-items: baseline;
     }
   `;
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "direction", 2);
-i([
-  n({ type: String, reflect: !0 })
-], t.prototype, "gap", 2);
-i([
-  n({ type: Boolean, reflect: !0 })
-], t.prototype, "wrap", 2);
-i([
-  n({ type: String })
-], t.prototype, "justify", 2);
-i([
-  n({ type: String })
-], t.prototype, "align", 2);
-t = i([
-  c(d)
-], t);
-export {
-  t as FhiFlex,
-  d as FhiFlexSelector
+	}
 };
-//# sourceMappingURL=fhi-flex.js.map
+i([e({
+	type: String,
+	reflect: !0
+})], s.prototype, "direction", void 0), i([e({
+	type: String,
+	reflect: !0
+})], s.prototype, "gap", void 0), i([e({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "wrap", void 0), i([e({ type: String })], s.prototype, "justify", void 0), i([e({ type: String })], s.prototype, "align", void 0), s = i([n(o)], s);
+//#endregion
+export { s as FhiFlex, o as FhiFlexSelector };
+
+//# sourceMappingURL=fhi-flex.js.map

package/fhi-flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"fhi-flex.js","sources":["../../src/components/fhi-flex/fhi-flex.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiFlexSelector = 'fhi-flex';\ntype FhiUnitType = 'px' | 'rem';\ntype FhiGapWidthUnit = `${number}${FhiUnitType}` | number;\n\n/**\n * ## FHI Flex\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-flex--docs}\n *\n * The `<fhi-flex>` component is a flexible container that utilizes CSS Flexbox to arrange its child elements in a responsive layout.\n * It allows for easy alignment, spacing, and direction control of its items.\n *\n * @tag fhi-flex\n * @element fhi-flex\n *\n * @slot - The content of the flex container. This can include any elements or text.\n *\n */\n@customElement(FhiFlexSelector)\nexport class FhiFlex extends LitElement {\n  /**\n   * Sets the flex direction to either row or column.\n   * This determines the main axis along which the flex items are laid out.\n   * @reflect\n   * @type {'row' | 'column'}\n   */\n  @property({ type: String, reflect: true }) direction: 'row' | 'column' =\n    'row';\n\n  /**\n   * Sets the gap between items within the flex container.\n   * It can be one of the preset values, a rem or px value, or a number.\n   * If you give a number, it will be treated as pixels.\n   * @reflect\n   * @type {'small' | 'medium' | 'large' | number | string}\n   */\n  @property({ type: String, reflect: true }) gap:\n    | 'small'\n    | 'medium'\n    | 'large'\n    | FhiGapWidthUnit = 'medium';\n\n  /**\n   * Enables wrapping of flex items onto multiple lines if they exceed the container's width.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) wrap = false;\n\n  /**\n   * Justifies flex items along the main axis.\n   * @type {'start' | 'center' | 'end'}\n   */\n  @property({ type: String }) justify: 'start' | 'center' | 'end' = 'start';\n\n  /**\n   * Aligns flex items along the cross axis.\n   * @type {'stretch' | 'start' | 'center' | 'end' | 'baseline'}\n   */\n  @property({ type: String }) align:\n    | 'stretch'\n    | 'start'\n    | 'center'\n    | 'end'\n    | 'baseline' = 'stretch';\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('gap')) {\n      const isPresetGap = ['small', 'medium', 'large'].includes(\n        String(this.gap),\n      );\n\n      if (isPresetGap) {\n        this.style.gap = '';\n        return;\n      }\n      const gapValue = Number(this.gap) ? `${this.gap}px` : this.gap;\n      this.style.gap = gapValue as string;\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-gap-small: var(--fhi-spacing-100);\n      --dimension-gap-medium: var(--fhi-spacing-200);\n      --dimension-gap-large: var(--fhi-spacing-300);\n    }\n\n    :host {\n      display: flex;\n      gap: var(--dimension-gap-medium);\n    }\n\n    :host([wrap]) {\n      flex-wrap: wrap;\n    }\n\n    :host([direction='row']) {\n      flex-direction: row;\n    }\n\n    :host([direction='column']) {\n      flex-direction: column;\n    }\n\n    :host([gap='small']) {\n      gap: var(--dimension-gap-small);\n    }\n\n    :host([gap='medium']) {\n      gap: var(--dimension-gap-medium);\n    }\n\n    :host([gap='large']) {\n      gap: var(--dimension-gap-large);\n    }\n\n    :host([justify='center']) {\n      justify-content: center;\n    }\n\n    :host([justify='start']) {\n      justify-content: start;\n    }\n\n    :host([justify='end']) {\n      justify-content: end;\n    }\n\n    :host([align='stretch']) {\n      align-items: stretch;\n    }\n\n    :host([align='center']) {\n      align-items: center;\n    }\n\n    :host([align='start']) {\n      align-items: start;\n    }\n\n    :host([align='end']) {\n      align-items: end;\n    }\n\n    :host([align='baseline']) {\n      align-items: baseline;\n    }\n  `;\n}\n"],"names":["FhiFlexSelector","FhiFlex","LitElement","changedProperties","gapValue","html","css","__decorateClass","property","customElement"],"mappings":";;;;;;AAGO,MAAMA,IAAkB;AAmBxB,IAAMC,IAAN,cAAsBC,EAAW;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAOsC,KAAA,YACzC,OASyC,KAAA,MAIrB,UAOsB,KAAA,OAAO,IAMvB,KAAA,UAAsC,SAMtC,KAAA,QAKX;AAAA,EAAA;AAAA,EAEjB,QAAQC,GAAyC;AAG/C,QAFA,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,KAAK,GAAG;AAKhC,UAJoB,CAAC,SAAS,UAAU,OAAO,EAAE;AAAA,QAC/C,OAAO,KAAK,GAAG;AAAA,MAAA,GAGA;AACf,aAAK,MAAM,MAAM;AACjB;AAAA,MACF;AACA,YAAMC,IAAW,OAAO,KAAK,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,KAAK;AAC3D,WAAK,MAAM,MAAMA;AAAA,IACnB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAOC;AAAAA,EACT;AAsEF;AAxIaJ,EAoEJ,SAASK;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AA7D2BC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BP,EAOgC,WAAA,aAAA,CAAA;AAUAM,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjB9BP,EAiBgC,WAAA,OAAA,CAAA;AAWCM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA5B/BP,EA4BiC,WAAA,QAAA,CAAA;AAMhBM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlCfP,EAkCiB,WAAA,WAAA,CAAA;AAMAM,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAxCfP,EAwCiB,WAAA,SAAA,CAAA;AAxCjBA,IAANM,EAAA;AAAA,EADNE,EAAcT,CAAe;AAAA,GACjBC,CAAA;"}
+{"version":3,"file":"fhi-flex.js","names":[],"sources":["../../src/components/fhi-flex/fhi-flex.component.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nexport const FhiFlexSelector = 'fhi-flex';\ntype FhiUnitType = 'px' | 'rem';\ntype FhiGapWidthUnit = `${number}${FhiUnitType}` | number;\n\n/**\n * ## FHI Flex\n *\n * {@link https://designsystem.fhi.no/?path=/docs/komponenter-flex--docs}\n *\n * The `<fhi-flex>` component is a flexible container that utilizes CSS Flexbox to arrange its child elements in a responsive layout.\n * It allows for easy alignment, spacing, and direction control of its items.\n *\n * @tag fhi-flex\n * @element fhi-flex\n *\n * @slot - The content of the flex container. This can include any elements or text.\n *\n */\n@customElement(FhiFlexSelector)\nexport class FhiFlex extends LitElement {\n  /**\n   * Sets the flex direction to either row or column.\n   * This determines the main axis along which the flex items are laid out.\n   * @reflect\n   * @type {'row' | 'column'}\n   */\n  @property({ type: String, reflect: true }) direction: 'row' | 'column' =\n    'row';\n\n  /**\n   * Sets the gap between items within the flex container.\n   * It can be one of the preset values, a rem or px value, or a number.\n   * If you give a number, it will be treated as pixels.\n   * @reflect\n   * @type {'small' | 'medium' | 'large' | number | string}\n   */\n  @property({ type: String, reflect: true }) gap:\n    | 'small'\n    | 'medium'\n    | 'large'\n    | FhiGapWidthUnit = 'medium';\n\n  /**\n   * Enables wrapping of flex items onto multiple lines if they exceed the container's width.\n   * @reflect\n   * @type {boolean}\n   */\n  @property({ type: Boolean, reflect: true }) wrap = false;\n\n  /**\n   * Justifies flex items along the main axis.\n   * @type {'start' | 'center' | 'end'}\n   */\n  @property({ type: String }) justify: 'start' | 'center' | 'end' = 'start';\n\n  /**\n   * Aligns flex items along the cross axis.\n   * @type {'stretch' | 'start' | 'center' | 'end' | 'baseline'}\n   */\n  @property({ type: String }) align:\n    | 'stretch'\n    | 'start'\n    | 'center'\n    | 'end'\n    | 'baseline' = 'stretch';\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('gap')) {\n      const isPresetGap = ['small', 'medium', 'large'].includes(\n        String(this.gap),\n      );\n\n      if (isPresetGap) {\n        this.style.gap = '';\n        return;\n      }\n      const gapValue = Number(this.gap) ? `${this.gap}px` : this.gap;\n      this.style.gap = gapValue as string;\n    }\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n\n  static styles = css`\n    :host {\n      --dimension-gap-small: var(--fhi-spacing-100);\n      --dimension-gap-medium: var(--fhi-spacing-200);\n      --dimension-gap-large: var(--fhi-spacing-300);\n    }\n\n    :host {\n      display: flex;\n      gap: var(--dimension-gap-medium);\n    }\n\n    :host([wrap]) {\n      flex-wrap: wrap;\n    }\n\n    :host([direction='row']) {\n      flex-direction: row;\n    }\n\n    :host([direction='column']) {\n      flex-direction: column;\n    }\n\n    :host([gap='small']) {\n      gap: var(--dimension-gap-small);\n    }\n\n    :host([gap='medium']) {\n      gap: var(--dimension-gap-medium);\n    }\n\n    :host([gap='large']) {\n      gap: var(--dimension-gap-large);\n    }\n\n    :host([justify='center']) {\n      justify-content: center;\n    }\n\n    :host([justify='start']) {\n      justify-content: start;\n    }\n\n    :host([justify='end']) {\n      justify-content: end;\n    }\n\n    :host([align='stretch']) {\n      align-items: stretch;\n    }\n\n    :host([align='center']) {\n      align-items: center;\n    }\n\n    :host([align='start']) {\n      align-items: start;\n    }\n\n    :host([align='end']) {\n      align-items: end;\n    }\n\n    :host([align='baseline']) {\n      align-items: baseline;\n    }\n  `;\n}\n"],"mappings":";;AAGA,IAAa,IAAkB,YAmBxB,IAAA,cAAsB,EAAW;;gCAQpC,kBAaoB,sBAO6B,mBAMe,sBAWjD;;CAEjB,QAAQ,GAAyC;EAG/C,IAFA,MAAM,QAAQ,CAAiB,GAE3B,EAAkB,IAAI,KAAK,GAAG;GAKhC,IAJoB;IAAC;IAAS;IAAU;GAAO,EAAE,SAC/C,OAAO,KAAK,GAAG,CAGb,GAAa;IACf,KAAK,MAAM,MAAM;IACjB;GACF;GACA,IAAM,IAAW,OAAO,KAAK,GAAG,IAAI,GAAG,KAAK,IAAI,MAAM,KAAK;GAC3D,KAAK,MAAM,MAAM;EACnB;CACF;CAEA,SAAS;EACP,OAAO,CAAI;CACb;;gBAEgB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoErB;GAjIG,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAUxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,MAWxC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MAMzC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAMzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,UAzC3B,EAAc,CAAe,CAAA,GAAA,CAAA"}

package/fhi-grid.js

@@ -1,33 +1,27 @@
-import { i as l, n as m, a as n, b as d, t as u } from "./property-B2Ico5CW.js";
-var h = Object.defineProperty, c = Object.getOwnPropertyDescriptor, t = (s, a, p, r) => {
-  for (var i = r > 1 ? void 0 : r ? c(a, p) : a, g = s.length - 1, o; g >= 0; g--)
-    (o = s[g]) && (i = (r ? o(a, p, i) : o(i)) || i);
-  return r && i && h(a, p, i), i;
-};
-const f = "fhi-grid";
-let e = class extends n {
-  constructor() {
-    super(...arguments), this.gap = "medium", this.columns = 12, this.rows = 1;
-  }
-  updated(s) {
-    if (super.updated(s), s.has("columns") && (this.style.gridTemplateColumns = `repeat( ${this.columns}, 1fr )`), s.has("rows") && (this.style.gridTemplateRows = `repeat( ${this.rows}, 1fr )`), s.has("gap"))
-      switch (this.gap) {
-        case "large":
-        case "medium":
-        case "small":
-          this.style.gap = "";
-          return;
-        default:
-          const a = Number(this.gap) ? `${this.gap}px` : this.gap;
-          this.style.gap = a;
-          return;
-      }
-  }
-  render() {
-    return d`<slot></slot>`;
-  }
-};
-e.styles = l`
+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/fhi-grid/fhi-grid.component.ts
+var o = "fhi-grid", s = class extends r {
+	constructor(...e) {
+		super(...e), this.gap = "medium", this.columns = 12, this.rows = 1;
+	}
+	updated(e) {
+		if (super.updated(e), e.has("columns") && (this.style.gridTemplateColumns = `repeat( ${this.columns}, 1fr )`), e.has("rows") && (this.style.gridTemplateRows = `repeat( ${this.rows}, 1fr )`), e.has("gap")) switch (this.gap) {
+			case "large":
+			case "medium":
+			case "small":
+				this.style.gap = "";
+				return;
+			default:
+				let e = Number(this.gap) ? `${this.gap}px` : this.gap;
+				this.style.gap = e;
+				return;
+		}
+	}
+	render() {
+		return a`<slot></slot>`;
+	}
+	static {
+		this.styles = t`
     :host {
       --dimension-grid-gap-small: var(--fhi-spacing-100);
       --dimension-grid-gap-medium: var(--fhi-spacing-200);
@@ -49,20 +43,10 @@ e.styles = l`
       gap: var(--dimension-grid-gap-large);
     }
   `;
-t([
-  m({ type: String })
-], e.prototype, "gap", 2);
-t([
-  m({ type: Number })
-], e.prototype, "columns", 2);
-t([
-  m({ type: Number })
-], e.prototype, "rows", 2);
-e = t([
-  u(f)
-], e);
-export {
-  e as FhiGrid,
-  f as FhiGridSelector
+	}
 };
-//# sourceMappingURL=fhi-grid.js.map
+i([e({ type: String })], s.prototype, "gap", void 0), i([e({ type: Number })], s.prototype, "columns", void 0), i([e({ type: Number })], s.prototype, "rows", void 0), s = i([n(o)], s);
+//#endregion
+export { s as FhiGrid, o as FhiGridSelector };
+
+//# sourceMappingURL=fhi-grid.js.map