nve-designsystem 0.3.1 → 0.3.3

package/chunks/chunk.FBL77HIN.js

@@ -0,0 +1,229 @@
+import { i as m, k as u } from "./lit-element.js";
+import { s as p, a as r, g as d, b as n, c as h, w as c } from "./chunk.LHI6QEL2.js";
+import { L as y } from "./chunk.WLV3FVBR.js";
+import { S as f } from "./chunk.ALSPWWWG.js";
+import { w as b } from "./chunk.2FB5TK5H.js";
+import { c as _, b as s, S as w } from "./chunk.5THGRZAA.js";
+import { R as g } from "./class-map.js";
+import { n as l } from "./property.js";
+import { e as a } from "./query.js";
+var v = m`
+  :host {
+    display: block;
+  }
+
+  .details {
+    border: solid 1px var(--sl-color-neutral-200);
+    border-radius: var(--sl-border-radius-medium);
+    background-color: var(--sl-color-neutral-0);
+    overflow-anchor: none;
+  }
+
+  .details--disabled {
+    opacity: 0.5;
+  }
+
+  .details__header {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    padding: var(--sl-spacing-medium);
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+  }
+
+  .details__header::-webkit-details-marker {
+    display: none;
+  }
+
+  .details__header:focus {
+    outline: none;
+  }
+
+  .details__header:focus-visible {
+    outline: var(--sl-focus-ring);
+    outline-offset: calc(1px + var(--sl-focus-ring-offset));
+  }
+
+  .details--disabled .details__header {
+    cursor: not-allowed;
+  }
+
+  .details--disabled .details__header:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .details__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .details__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: var(--sl-transition-medium) rotate ease;
+  }
+
+  .details--open .details__summary-icon {
+    rotate: 90deg;
+  }
+
+  .details--open.details--rtl .details__summary-icon {
+    rotate: -90deg;
+  }
+
+  .details--open slot[name='expand-icon'],
+  .details:not(.details--open) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .details__body {
+    overflow: hidden;
+  }
+
+  .details__content {
+    display: block;
+    padding: var(--sl-spacing-medium);
+  }
+`, t = class extends w {
+  constructor() {
+    super(...arguments), this.localize = new y(this), this.open = !1, this.disabled = !1;
+  }
+  firstUpdated() {
+    this.body.style.height = this.open ? "auto" : "0", this.open && (this.details.open = !0), this.detailsObserver = new MutationObserver((e) => {
+      for (const i of e)
+        i.type === "attributes" && i.attributeName === "open" && (this.details.open ? this.show() : this.hide());
+    }), this.detailsObserver.observe(this.details, { attributes: !0 });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.detailsObserver.disconnect();
+  }
+  handleSummaryClick(e) {
+    e.preventDefault(), this.disabled || (this.open ? this.hide() : this.show(), this.header.focus());
+  }
+  handleSummaryKeyDown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.open ? this.hide() : this.show()), (e.key === "ArrowUp" || e.key === "ArrowLeft") && (e.preventDefault(), this.hide()), (e.key === "ArrowDown" || e.key === "ArrowRight") && (e.preventDefault(), this.show());
+  }
+  async handleOpenChange() {
+    if (this.open) {
+      if (this.details.open = !0, this.emit("sl-show", { cancelable: !0 }).defaultPrevented) {
+        this.open = !1, this.details.open = !1;
+        return;
+      }
+      await r(this.body);
+      const { keyframes: i, options: o } = d(this, "details.show", { dir: this.localize.dir() });
+      await n(this.body, h(i, this.body.scrollHeight), o), this.body.style.height = "auto", this.emit("sl-after-show");
+    } else {
+      if (this.emit("sl-hide", { cancelable: !0 }).defaultPrevented) {
+        this.details.open = !0, this.open = !0;
+        return;
+      }
+      await r(this.body);
+      const { keyframes: i, options: o } = d(this, "details.hide", { dir: this.localize.dir() });
+      await n(this.body, h(i, this.body.scrollHeight), o), this.body.style.height = "auto", this.details.open = !1, this.emit("sl-after-hide");
+    }
+  }
+  /** Shows the details. */
+  async show() {
+    if (!(this.open || this.disabled))
+      return this.open = !0, c(this, "sl-after-show");
+  }
+  /** Hides the details */
+  async hide() {
+    if (!(!this.open || this.disabled))
+      return this.open = !1, c(this, "sl-after-hide");
+  }
+  render() {
+    const e = this.matches(":dir(rtl)");
+    return u`
+      <details
+        part="base"
+        class=${g({
+      details: !0,
+      "details--open": this.open,
+      "details--disabled": this.disabled,
+      "details--rtl": e
+    })}
+      >
+        <summary
+          part="header"
+          id="header"
+          class="details__header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls="content"
+          aria-disabled=${this.disabled ? "true" : "false"}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleSummaryClick}
+          @keydown=${this.handleSummaryKeyDown}
+        >
+          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+
+          <span part="summary-icon" class="details__summary-icon">
+            <slot name="expand-icon">
+              <sl-icon library="system" name=${e ? "chevron-left" : "chevron-right"}></sl-icon>
+            </slot>
+            <slot name="collapse-icon">
+              <sl-icon library="system" name=${e ? "chevron-left" : "chevron-right"}></sl-icon>
+            </slot>
+          </span>
+        </summary>
+
+        <div class="details__body" role="region" aria-labelledby="header">
+          <slot part="content" id="content" class="details__content"></slot>
+        </div>
+      </details>
+    `;
+  }
+};
+t.styles = [_, v];
+t.dependencies = {
+  "sl-icon": f
+};
+s([
+  a(".details")
+], t.prototype, "details", 2);
+s([
+  a(".details__header")
+], t.prototype, "header", 2);
+s([
+  a(".details__body")
+], t.prototype, "body", 2);
+s([
+  a(".details__expand-icon-slot")
+], t.prototype, "expandIconSlot", 2);
+s([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+s([
+  l()
+], t.prototype, "summary", 2);
+s([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+s([
+  b("open", { waitUntilFirstUpdate: !0 })
+], t.prototype, "handleOpenChange", 1);
+p("details.show", {
+  keyframes: [
+    { height: "0", opacity: "0" },
+    { height: "auto", opacity: "1" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+p("details.hide", {
+  keyframes: [
+    { height: "auto", opacity: "1" },
+    { height: "0", opacity: "0" }
+  ],
+  options: { duration: 250, easing: "linear" }
+});
+var z = t;
+t.define("sl-details");
+export {
+  z as d
+};

package/components/nve-accordion/nve-accordion.component.d.ts

@@ -0,0 +1,15 @@
+import { INveComponent } from '../../interfaces/NveComponent.interface';
+import { default as SlDetails } from '@shoelace-style/shoelace/dist/components/details/details.js';
+/**
+* Viser et kort sammendrag og utvides for å vise ekstra innhold.
+*/
+export default class NveAccordion extends SlDetails implements INveComponent {
+    testId: string | undefined;
+    static styles: import('lit').CSSResultGroup[];
+    constructor();
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nve-accordion': NveAccordion;
+    }
+}

package/components/nve-accordion/nve-accordion.component.js

@@ -0,0 +1,29 @@
+import { n as m, t as n } from "../../chunks/property.js";
+import v from "./nve-accordion.styles.js";
+import { d as f } from "../../chunks/chunk.FBL77HIN.js";
+import "../../chunks/chunk.WLV3FVBR.js";
+import "../../chunks/chunk.ALSPWWWG.js";
+import "../../chunks/chunk.5THGRZAA.js";
+var a = Object.defineProperty, d = Object.getOwnPropertyDescriptor, c = (l, e, s, r) => {
+  for (var t = r > 1 ? void 0 : r ? d(e, s) : e, p = l.length - 1, i; p >= 0; p--)
+    (i = l[p]) && (t = (r ? i(e, s, t) : i(t)) || t);
+  return r && t && a(e, s, t), t;
+};
+let o = class extends f {
+  constructor() {
+    super(), this.testId = void 0;
+  }
+};
+o.styles = [
+  f.styles,
+  v
+];
+c([
+  m({ reflect: !0, type: String })
+], o.prototype, "testId", 2);
+o = c([
+  n("nve-accordion")
+], o);
+export {
+  o as default
+};

package/components/nve-accordion/nve-accordion.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/components/nve-accordion/nve-accordion.styles.js

@@ -0,0 +1,5 @@
+import { i as t } from "../../chunks/lit-element.js";
+const s = t``;
+export {
+  s as default
+};

package/components/nve-radio-group/nve-radio-group.styles.js

@@ -36,7 +36,7 @@ const o = r`
   :host::part(form-control-label) {
     display: flex;
     color: var(--neutrals-foreground-primary);
-    font: var(--label-small-light);
+    font: var(--label-small);
     margin-bottom: unset;
     text-align: left;
   }