nve-designsystem 3.1.0 → 3.3.0

package/components/nve-stepper/nve-step/nve-step.component.js

@@ -1,135 +1,112 @@
-import { a as h, x as c } from "../../../chunks/lit-element.js";
-import { n as r, t as p } from "../../../chunks/property.js";
-import { e as v } from "../../../chunks/query.js";
-import u from "./nve-step.styles.js";
-var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (t, i, n, a) => {
-  for (var o = a > 1 ? void 0 : a ? y(i, n) : i, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (o = (a ? d(i, n, o) : d(o)) || o);
-  return a && o && f(i, n, o), o;
-}, g = /* @__PURE__ */ ((t) => (t[t.NotStarted = 0] = "NotStarted", t[t.Started = 1] = "Started", t[t.Active = 2] = "Active", t[t.Done = 3] = "Done", t[t.Error = 4] = "Error", t))(g || {});
-let e = class extends h {
-  constructor() {
-    super(...arguments), this.label = "", this.index = 0, this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
-  }
-  /** Metode som kjøres første gang komponenten er lagt til i DOM */
-  firstUpdated() {
-    this.style.setProperty("--flex-grow", this.isLast ? "0" : "1");
-  }
-  /** Metode som kjøres hver gang komponentens oppdateres */
-  updated() {
-    this.isOrientationVertical() && this.updateVerticalDividerHeight(), this.style.setProperty("line-color", this.isLast ? "0" : "1");
-  }
-  isOrientationVertical() {
-    return this.orientation === "vertical";
-  }
-  iconForState(t) {
-    let i = "";
-    switch (t) {
-      case 0:
-        i = "circle";
-        break;
-      case 2:
-        i = "radio_button_checked";
-        break;
-      case 1:
-        i = "trip_origin";
-        break;
-      case 3:
-        i = "check_circle";
-        break;
-      case 4:
-        i = "error";
-        break;
-      default:
-        i = "check_circle";
-        break;
-    }
-    return i;
-  }
-  getStateText(t) {
-    switch (t) {
-      case 0:
-        return "Ikke påbegynt";
-      case 2:
-        return "Aktiv";
-      case 1:
-        return "Påbegynt";
-      case 3:
-        return "Fullført";
-      case 4:
-        return "Feil";
-      default:
-        return "Ikke påbegynt";
-    }
-  }
-  getStateColorClass(t) {
-    switch (t) {
-      case 0:
-        return "state-not-started-color";
-      case 2:
-        return "state-started-color";
-      case 3:
-        return "state-done-color";
-      case 4:
-        return "state-error-color";
-      default:
-        return "state-not-started-color";
-    }
-  }
-  getLabelClass(t) {
-    switch (t) {
-      case 0:
-        return "state-not-started-color";
-      case 4:
-        return "state-error-color";
-      default:
-        return "";
-    }
-  }
-  getIconClass(t) {
-    switch (t) {
-      case 1:
-        return "";
-      case 0:
-        return "state-not-started-icon-color filled-icon";
-      case 4:
-        return "state-error-color filled-icon";
-      default:
-        return "filled-icon";
-    }
-  }
-  getDividerColorClass() {
-    return this.index < this.selectedStepIndex ? "divider-reached-color" : "divider-not-reached-color";
-  }
-  renderDivider() {
-    const t = this.isOrientationVertical() ? "divider-vertical" : "divider-horizontal";
-    return this.isLast ? "" : c` <div class="vertical-divider-container">
+import { a as e, t } from "../../../chunks/lit.js";
+import { o as n, r, s as i, t as a } from "../../../chunks/decorate.js";
+import o from "./nve-step.styles.js";
+//#region src/components/nve-stepper/nve-step/nve-step.component.ts
+var s = /* @__PURE__ */ function(e) {
+	return e[e.NotStarted = 0] = "NotStarted", e[e.Started = 1] = "Started", e[e.Active = 2] = "Active", e[e.Done = 3] = "Done", e[e.Error = 4] = "Error", e;
+}({}), c = class extends t {
+	constructor(...e) {
+		super(...e), this.label = "", this.index = 0, this.state = 0, this.selectedStepIndex = 0, this.isSelected = !1, this.isLast = !1, this.entranceAllowed = !1, this.orientation = "horizontal", this.hideStateText = !1, this.hideDescriptions = !1;
+	}
+	firstUpdated() {
+		this.style.setProperty("--flex-grow", this.isLast ? "0" : "1");
+	}
+	updated() {
+		this.isOrientationVertical() && this.updateVerticalDividerHeight(), this.style.setProperty("line-color", this.isLast ? "0" : "1");
+	}
+	static {
+		this.styles = [o];
+	}
+	isOrientationVertical() {
+		return this.orientation === "vertical";
+	}
+	iconForState(e) {
+		let t = "";
+		switch (e) {
+			case 0:
+				t = "circle";
+				break;
+			case 2:
+				t = "radio_button_checked";
+				break;
+			case 1:
+				t = "trip_origin";
+				break;
+			case 3:
+				t = "check_circle";
+				break;
+			case 4:
+				t = "error";
+				break;
+			default:
+				t = "check_circle";
+				break;
+		}
+		return t;
+	}
+	getStateText(e) {
+		switch (e) {
+			case 0: return "Ikke påbegynt";
+			case 2: return "Aktiv";
+			case 1: return "Påbegynt";
+			case 3: return "Fullført";
+			case 4: return "Feil";
+			default: return "Ikke påbegynt";
+		}
+	}
+	getStateColorClass(e) {
+		switch (e) {
+			case 0: return "state-not-started-color";
+			case 2: return "state-started-color";
+			case 3: return "state-done-color";
+			case 4: return "state-error-color";
+			default: return "state-not-started-color";
+		}
+	}
+	getLabelClass(e) {
+		switch (e) {
+			case 0: return "state-not-started-color";
+			case 4: return "state-error-color";
+			default: return "";
+		}
+	}
+	getIconClass(e) {
+		switch (e) {
+			case 1: return "";
+			case 0: return "state-not-started-icon-color filled-icon";
+			case 4: return "state-error-color filled-icon";
+			default: return "filled-icon";
+		}
+	}
+	getDividerColorClass() {
+		return this.index < this.selectedStepIndex ? "divider-reached-color" : "divider-not-reached-color";
+	}
+	renderDivider() {
+		let t = this.isOrientationVertical() ? "divider-vertical" : "divider-horizontal";
+		return this.isLast ? "" : e` <div class="vertical-divider-container">
           <div class="${t} ${this.getDividerColorClass()}"></div>
         </div>`;
-  }
-  renderDescription() {
-    return this.isDescriptionValid(this.description) ? c`<div
+	}
+	renderDescription() {
+		return this.isDescriptionValid(this.description) ? e`<div
       class="step-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}"
     >
       ${this.description}
-    </div>` : c`<div
+    </div>` : e`<div
         class="step-description empty-description ${this.orientation === "vertical" ? "step-description-max-width-vertical" : "step-description-max-width-horizontal"}"
       ></div>`;
-  }
-  isDescriptionValid(t) {
-    return !!t && t?.trim().length > 0;
-  }
-  /** Brukes for beregning av riktig høyde før divider. Description elementet har padding, så høyden før divider var for kort, så bruk denne funksjonen for regner ut riktig høyde. */
-  updateVerticalDividerHeight() {
-    let n = 34;
-    this.descriptionElement && (n = this.descriptionElement.offsetHeight + 24);
-    const a = this.shadowRoot.querySelector(
-      ".vertical-divider-container .divider-vertical"
-    );
-    a && (a.style.height = `${n}px`);
-  }
-  renderVerticalStep() {
-    return c`
+	}
+	isDescriptionValid(e) {
+		return !!e && e?.trim().length > 0;
+	}
+	updateVerticalDividerHeight() {
+		let e = 34;
+		this.descriptionElement && (e = this.descriptionElement.offsetHeight + 24);
+		let t = this.shadowRoot.querySelector(".vertical-divider-container .divider-vertical");
+		t && (t.style.height = `${e}px`);
+	}
+	renderVerticalStep() {
+		return e`
       <div class="vertical-container">
         <div class="step-figure-vertical">
           <div class=" ${this.getIconClass(this.state)}">
@@ -146,9 +123,9 @@ let e = class extends h {
         </div>
       </div>
     `;
-  }
-  render() {
-    return this.isOrientationVertical() ? this.renderVerticalStep() : c`
+	}
+	render() {
+		return this.isOrientationVertical() ? this.renderVerticalStep() : e`
           <div class="step-figure">
             <span class=" ${this.getIconClass(this.state)}">
               <nve-icon slot="suffix" name="${this.iconForState(this.state)}"></nve-icon>
@@ -163,49 +140,12 @@ let e = class extends h {
             ${this.hideDescriptions ? "" : this.renderDescription()}
           </div>
         `;
-  }
-};
-e.styles = [u];
-s([
-  r({ reflect: !0 })
-], e.prototype, "label", 2);
-s([
-  r({ type: Number })
-], e.prototype, "index", 2);
-s([
-  r({ type: String })
-], e.prototype, "description", 2);
-s([
-  r({ type: Number })
-], e.prototype, "state", 2);
-s([
-  r({ type: Number })
-], e.prototype, "selectedStepIndex", 2);
-s([
-  r({ type: Boolean, reflect: !0 })
-], e.prototype, "isSelected", 2);
-s([
-  r({ type: Boolean })
-], e.prototype, "isLast", 2);
-s([
-  r({ type: Boolean })
-], e.prototype, "entranceAllowed", 2);
-s([
-  r()
-], e.prototype, "orientation", 2);
-s([
-  r({ type: Boolean })
-], e.prototype, "hideStateText", 2);
-s([
-  r({ type: Boolean })
-], e.prototype, "hideDescriptions", 2);
-s([
-  v(".step-description")
-], e.prototype, "descriptionElement", 2);
-e = s([
-  p("nve-step")
-], e);
-export {
-  g as StepState,
-  e as default
+	}
 };
+a([n({ reflect: !0 })], c.prototype, "label", void 0), a([n({ type: Number })], c.prototype, "index", void 0), a([n({ type: String })], c.prototype, "description", void 0), a([n({ type: Number })], c.prototype, "state", void 0), a([n({ type: Number })], c.prototype, "selectedStepIndex", void 0), a([n({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "isSelected", void 0), a([n({ type: Boolean })], c.prototype, "isLast", void 0), a([n({ type: Boolean })], c.prototype, "entranceAllowed", void 0), a([n()], c.prototype, "orientation", void 0), a([n({ type: Boolean })], c.prototype, "hideStateText", void 0), a([n({ type: Boolean })], c.prototype, "hideDescriptions", void 0), a([r(".step-description")], c.prototype, "descriptionElement", void 0), c = a([i("nve-step")], c);
+var l = c;
+//#endregion
+export { s as StepState, l as default };

package/components/nve-stepper/nve-step/nve-step.styles.js

@@ -1,5 +1,6 @@
-import { i as e } from "../../../chunks/lit-element.js";
-const r = e`
+import { u as e } from "../../../chunks/lit.js";
+//#region src/components/nve-stepper/nve-step/nve-step.styles.ts
+var t = e`
   :host {
     flex-grow: var(--flex-grow, 1);
   }
@@ -47,7 +48,7 @@ const r = e`
     color: var(--color-neutrals-foreground-primary, #0d0d0e);
 
     /* Label/medium */
-    font-family: 'Source Sans Pro';
+    font-family: 'Source Sans 3';
     font-size: 1.125rem; /*18px; */
     font-style: normal;
     font-weight: 600;
@@ -57,7 +58,7 @@ const r = e`
 
   .step-state {
     /* Label/x-small-light */
-    font-family: 'Source Sans Pro';
+    font-family: 'Source Sans 3';
     font-size: 0.875rem; /*14px;*/
     font-style: normal;
     font-weight: 400;
@@ -69,7 +70,7 @@ const r = e`
     color: var(--color-neutrals-foreground-primary, #0d0d0e);
 
     /* Label/small-light */
-    font-family: 'Source Sans Pro';
+    font-family: 'Source Sans 3';
     font-size: 1rem; /*16px; */
     font-style: normal;
     font-weight: 400;
@@ -104,19 +105,19 @@ const r = e`
   }
 
   .state-not-started-color {
-    color: var(--color-neutrals-foreground-subtle, #60656c);
+    color: var(--color-neutrals-foreground-subtle);
   }
 
   .state-started-color {
-    color: var(--color-feedback-background-emphasized-info, #1e6fdc);
+    color: var(--color-feedback-foreground-info);
   }
 
   .state-done-color {
-    color: var(--color-feeedback-foreground-emphasized-success, #00814b);
+    color: var(--color-feedback-foreground-success);
   }
 
   .state-error-color {
-    color: var(--color-feedback-background-emphasized-error, #cc0000);
+    color: var(--color-feedback-foreground-error);
   }
 
   .vertical-container {
@@ -171,6 +172,5 @@ const r = e`
     align-self: flex-start;
   }
 `;
-export {
-  r as default
-};
+//#endregion
+export { t as default };

package/components/nve-stepper/nve-stepper-mobile.component.js

@@ -1,60 +1,48 @@
-import { a, x as n } from "../../chunks/lit-element.js";
-import { n as v, t as o } from "../../chunks/property.js";
-import h from "./nve-stepper-mobile.styles.js";
-var u = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (e, s, l, p) => {
-  for (var t = p > 1 ? void 0 : p ? x(s, l) : s, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (t = (p ? c(s, l, t) : c(t)) || t);
-  return p && t && u(s, l, t), t;
-};
-let i = class extends a {
-  constructor() {
-    super(...arguments), this.steps = [], this.hideStepButtons = !1, this.selectedStepIndex = { value: 0 };
-  }
-  handleStepClick(e) {
-    this.dispatchEvent(
-      new CustomEvent("step-click", {
-        detail: {
-          action: e,
-          currentIndex: this.selectedStepIndex.value,
-          step: this.steps[this.selectedStepIndex.value],
-          nextIndex: e === "next" ? this.selectedStepIndex.value + 1 : this.selectedStepIndex.value - 1,
-          nextStep: this.steps[e === "next" ? this.selectedStepIndex.value + 1 : this.selectedStepIndex.value - 1]
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  render() {
-    const e = this.steps[this.selectedStepIndex.value], s = this.steps[this.selectedStepIndex.value + 1], l = this.selectedStepIndex.value === this.steps.length - 1;
-    return n`
+import { a as e, t } from "../../chunks/lit.js";
+import { o as n, s as r, t as i } from "../../chunks/decorate.js";
+import a from "./nve-stepper-mobile.styles.js";
+//#region src/components/nve-stepper/nve-stepper-mobile.component.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.steps = [], this.hideStepButtons = !1, this.selectedStepIndex = { value: 0 };
+	}
+	static {
+		this.styles = [a];
+	}
+	handleStepClick(e) {
+		this.dispatchEvent(new CustomEvent("step-click", {
+			detail: {
+				action: e,
+				currentIndex: this.selectedStepIndex.value,
+				step: this.steps[this.selectedStepIndex.value],
+				nextIndex: e === "next" ? this.selectedStepIndex.value + 1 : this.selectedStepIndex.value - 1,
+				nextStep: this.steps[e === "next" ? this.selectedStepIndex.value + 1 : this.selectedStepIndex.value - 1]
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	render() {
+		let t = this.steps[this.selectedStepIndex.value], n = this.steps[this.selectedStepIndex.value + 1], r = this.selectedStepIndex.value === this.steps.length - 1;
+		return e`
       <div class="mobile-stepper">
         <div class="progress-circle">${this.selectedStepIndex.value + 1} of ${this.steps.length}</div>
         <div class="step-info">
-          <div class="step-label">${e.label}</div>
-          ${this.hideStepButtons ? "" : n` <div>
-                ${l ? n` <div class="step-buttons next-button" @click=${() => this.handleStepClick("next")}>
+          <div class="step-label">${t.label}</div>
+          ${this.hideStepButtons ? "" : e` <div>
+                ${r ? e` <div class="step-buttons next-button" @click=${() => this.handleStepClick("next")}>
                       Finish
-                    </div>` : n` <div class="step-buttons next-button" @click=${() => this.handleStepClick("next")}>
-                      Neste: ${s.label}
+                    </div>` : e` <div class="step-buttons next-button" @click=${() => this.handleStepClick("next")}>
+                      Neste: ${n.label}
                     </div>`}
                 <div class="step-buttons back-button" @click=${() => this.handleStepClick("prev")}>Forrige</div>
               </div>`}
         </div>
       </div>
     `;
-  }
-};
-i.styles = [h];
-r([
-  v({ type: Array })
-], i.prototype, "steps", 2);
-r([
-  v({ type: Boolean })
-], i.prototype, "hideStepButtons", 2);
-i = r([
-  o("nve-stepper-mobile")
-], i);
-export {
-  i as default
+	}
 };
+i([n({ type: Array })], o.prototype, "steps", void 0), i([n({ type: Boolean })], o.prototype, "hideStepButtons", void 0), o = i([r("nve-stepper-mobile")], o);
+var s = o;
+//#endregion
+export { s as default };

package/components/nve-stepper/nve-stepper-mobile.styles.js

@@ -1,5 +1,6 @@
-import { i as e } from "../../chunks/lit-element.js";
-const r = e`
+import { u as e } from "../../chunks/lit.js";
+//#region src/components/nve-stepper/nve-stepper-mobile.styles.ts
+var t = e`
   .mobile-stepper {
     display: flex;
     align-items: center;
@@ -33,7 +34,7 @@ const r = e`
     color: var(--color-neutrals-foreground-primary, #0d0d0e);
 
     /* Label/medium */
-    font-family: 'Source Sans Pro';
+    font-family: 'Source Sans 3';
     font-size: 1.125rem; /*18px; */
     font-style: normal;
     font-weight: 600;
@@ -51,7 +52,7 @@ const r = e`
 
   .step-buttons {
     /* Label/small-light */
-    font-family: 'Source Sans Pro';
+    font-family: 'Source Sans 3';
     font-size: 1rem; /*16px; */
     font-style: normal;
     font-weight: 400;
@@ -60,6 +61,5 @@ const r = e`
     cursor: pointer;
   }
 `;
-export {
-  r as default
-};
+//#endregion
+export { t as default };