nve-designsystem 0.1.50 → 0.1.51

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

@@ -6,6 +6,7 @@ import { LitElement } from 'lit';
  */
 export default class NveIcon extends LitElement {
     static styles: import("lit").CSSResult[];
+    library: 'Outlined' | 'Sharp';
     /** Navnet på ikonet i Material Symbols-biblioteket */
     name: string;
     protected firstUpdated(): void;

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

@@ -1,28 +1,31 @@
-import { s as m, x as f } from "../../chunks/lit-element.js";
-import { n as c, t as i } from "../../chunks/property.js";
+import { s as f, x as m } from "../../chunks/lit-element.js";
+import { n as i, t as y } from "../../chunks/property.js";
 import u from "./nve-icon.styles.js";
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, l = (a, r, n, t) => {
-  for (var e = t > 1 ? void 0 : t ? _(r, n) : r, o = a.length - 1, p; o >= 0; o--)
-    (p = a[o]) && (e = (t ? p(r, n, e) : p(e)) || e);
-  return t && e && v(r, n, e), e;
+var c = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (l, t, n, s) => {
+  for (var r = s > 1 ? void 0 : s ? v(t, n) : t, o = l.length - 1, p; o >= 0; o--)
+    (p = l[o]) && (r = (s ? p(t, n, r) : p(r)) || r);
+  return s && r && c(t, n, r), r;
 };
-let s = class extends m {
+let e = class extends f {
   constructor() {
-    super(...arguments), this.name = "";
+    super(...arguments), this.library = "Outlined", this.name = "";
   }
   firstUpdated() {
   }
   render() {
-    return f`<span part="icon" class="material-symbols-outlined">${this.name}</span>`;
+    return m`<span style="font-family:Material Symbols ${this.library}">${this.name}</span>`;
   }
 };
-s.styles = [u];
-l([
-  c({ reflect: !0 })
-], s.prototype, "name", 2);
-s = l([
-  i("nve-icon")
-], s);
+e.styles = [u];
+a([
+  i({ type: String })
+], e.prototype, "library", 2);
+a([
+  i({ reflect: !0 })
+], e.prototype, "name", 2);
+e = a([
+  y("nve-icon")
+], e);
 export {
-  s as default
+  e as default
 };

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

@@ -1,15 +1,26 @@
 import { i as e } from "../../chunks/lit-element.js";
 const o = e`
-  :host {
-    /* Apply Material Icons font-family to the Shadow DOM */
-    font-family: 'Material Symbols Outlined';
-  }
+
   /* Brukes i dropdown. Eneste måten å override shadow dom for å rotere expand_more ikonet når menyen åpner */
   :host([name='expand_more']) {
     transform: var(--icon-rotation, none);
     transition: transform 0.3s ease;
   }
 
+  /* prevent icon beeing highlighted */ 
+  :host {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+:host {
+    display: flex;
+}
+
   /* we need it to center the icon */
   :is(span) {
     display: inline-flex;

package/components/nve-stepper/nve-step/nve-step.component.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from "lit";
+export declare enum StepState {
+    NotStarted = 0,
+    Started = 1,
+    Done = 2,
+    Error = 3
+}
+export interface StepProps {
+    icons: string[];
+    title: string;
+    description: string;
+    state: StepState;
+    isSelected: boolean;
+    readyForEntrance: boolean;
+}
+export default class NveStep extends LitElement {
+    icons: string[];
+    title: string;
+    spaceBetweenSteps: number;
+    iconLibrary: 'Outlined' | 'Sharp';
+    index: number;
+    description: string;
+    state: StepState;
+    stepperIndex: number;
+    isSelected: boolean;
+    isLast: boolean;
+    entraceAllowed: boolean;
+    static styles: import("lit").CSSResult[];
+    iconForState(state: StepState): string;
+    onClick(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "nve-step": NveStep;
+    }
+}

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

@@ -0,0 +1,101 @@
+import { s as d, x as l } from "../../../chunks/lit-element.js";
+import { n as i, t as h } from "../../../chunks/property.js";
+import y from "./nve-step.styles.js";
+var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (e, s, p, n) => {
+  for (var o = n > 1 ? void 0 : n ? u(s, p) : s, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (o = (n ? c(s, p, o) : c(o)) || o);
+  return n && o && v(s, p, o), o;
+}, f = /* @__PURE__ */ ((e) => (e[e.NotStarted = 0] = "NotStarted", e[e.Started = 1] = "Started", e[e.Done = 2] = "Done", e[e.Error = 3] = "Error", e))(f || {});
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.icons = [], this.title = "", this.spaceBetweenSteps = 200, this.iconLibrary = "Outlined", this.index = 0, this.description = "", this.state = 0, this.stepperIndex = 0, this.isSelected = !1, this.isLast = !1, this.entraceAllowed = !1;
+  }
+  iconForState(e) {
+    let s = "";
+    switch (e) {
+      case 0:
+        s = `counter_${this.index + 1}`;
+        break;
+      case 1:
+        this.isSelected ? s = `counter_${this.index + 1}` : s = "error";
+        break;
+      case 2:
+        s = "check_circle";
+        break;
+      case 3:
+        s = "error";
+        break;
+      default:
+        s = `help_${this.iconLibrary}`;
+        break;
+    }
+    return s;
+  }
+  onClick() {
+    this.dispatchEvent(
+      new CustomEvent("clicked", { detail: { index: this.index } })
+    );
+  }
+  render() {
+    return l`
+      <div class="step">
+        <div class="step-figure"> 
+        <span
+          @click="${this.onClick}"
+          class="${this.isSelected ? "selected" : ""} ${this.state == 3 ? "hasError" : ""} ${this.state > 0 ? "" : "notStarted"}"
+        >
+        <nve-icon library=${this.iconLibrary} slot="suffix"  name="${this.iconForState(this.state)}"></nve-icon>
+        </span>
+           
+        ${this.isLast ? "" : l`<div
+              style="width:${this.spaceBetweenSteps}px"
+              class="divider-horizontal ${this.index < this.stepperIndex ? "selectedInterval" : ""} ${this.state > 0 ? "" : "notStarted"}"
+        ></div>`}
+        </div>
+        <div class="step-title">${this.title}</div>
+        <div class="step-description">${this.description}</div>
+      </div>
+    `;
+  }
+};
+t.styles = [y];
+r([
+  i({ type: Array })
+], t.prototype, "icons", 2);
+r([
+  i({ reflect: !0 })
+], t.prototype, "title", 2);
+r([
+  i({ type: Number })
+], t.prototype, "spaceBetweenSteps", 2);
+r([
+  i({ type: String })
+], t.prototype, "iconLibrary", 2);
+r([
+  i({ type: Number })
+], t.prototype, "index", 2);
+r([
+  i({ type: String })
+], t.prototype, "description", 2);
+r([
+  i({ type: Number })
+], t.prototype, "state", 2);
+r([
+  i({ type: Number })
+], t.prototype, "stepperIndex", 2);
+r([
+  i({ type: Boolean, reflect: !0 })
+], t.prototype, "isSelected", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "isLast", 2);
+r([
+  i({ type: Boolean })
+], t.prototype, "entraceAllowed", 2);
+t = r([
+  h("nve-step")
+], t);
+export {
+  f as StepState,
+  t as default
+};

package/components/nve-stepper/nve-step/nve-step.styles.d.ts

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

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

@@ -0,0 +1,65 @@
+import { i as t } from "../../../chunks/lit-element.js";
+const o = t`
+.step-figure {
+  position: relative;
+  display: flex;
+  align-items: center;
+  
+}
+
+.divider-horizontal {
+  height: 2px;
+  background-color: black;
+  flex-grow: 1;
+}
+
+.step-title{
+  font-size: 16px; 
+  font-weight:bold;
+  padding-top:4px
+}
+.step-description{
+  font-size: 14px; 
+  font-weight:bold;
+  padding-top:4px
+}
+
+.selectedInterval {
+  height: 4px;
+}
+
+.selected {
+  font-variation-settings: "FILL" 1, "wght" 300, "GRAD" 1, "opsz" 48 !important;
+}
+
+.hasError {
+  color: red;
+}
+
+.notStarted {
+  color: rgb(184, 184, 184);
+}
+
+.evaluated {
+  background-color: rgb(184, 184, 184);
+}
+
+span {
+  cursor: pointer;
+  font-size:2rem;
+  display:flex;
+}
+
+.material-symbols-sharp {
+  font-size: 2rem;
+  font-variation-settings:
+  'FILL' 0,
+  'wght' 300,
+  'GRAD' 0,
+  'opsz' 24
+}
+
+`;
+export {
+  o as default
+};

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { StepProps } from './nve-step/nve-step.component';
+export default class NveStepper extends LitElement {
+    static styles: import("lit").CSSResult[];
+    orientation: 'horizontal' | 'vertical';
+    selectedStep: number;
+    spaceBetweenSteps: number;
+    iconLibrary: 'Outlined' | 'Sharp';
+    steps: StepProps[];
+    stepWidth: number;
+    firstUpdated(): void;
+    nextStep(): void;
+    prevStep(): void;
+    selectStep(event: any): void;
+    setStep(index: number): void;
+    getExtremes(): "start" | "end" | undefined;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'my-nve': NveStepper;
+    }
+}
+export interface StepperProps {
+    selectedStep: number;
+    steps: StepProps[];
+    spaceBetweenSteps: number;
+}

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

@@ -0,0 +1,96 @@
+import { s as d, x as l } from "../../chunks/lit-element.js";
+import { n as p, t as S } from "../../chunks/property.js";
+import { StepState as h } from "./nve-step/nve-step.component.js";
+import f from "./nve-stepper.styles.js";
+import "./nve-step/nve-step.styles.js";
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, t, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? y(t, o) : t, a = e.length - 1, c; a >= 0; a--)
+    (c = e[a]) && (i = (n ? c(t, o, i) : c(i)) || i);
+  return n && i && v(t, o, i), i;
+};
+let s = class extends d {
+  constructor() {
+    super(...arguments), this.orientation = "horizontal", this.spaceBetweenSteps = 200, this.iconLibrary = "Outlined", this.steps = new Array(), this.stepWidth = 100;
+  }
+  firstUpdated() {
+    this.setStep(this.selectedStep);
+  }
+  nextStep() {
+    this.selectedStep < this.steps.length - 1 && this.setStep(this.selectedStep + 1);
+  }
+  prevStep() {
+    this.selectedStep > 0 && this.setStep(this.selectedStep - 1);
+  }
+  selectStep(e) {
+    e.detail.index > 0 && this.steps[e.detail.index - 1].state == h.NotStarted || this.setStep(e.detail.index);
+  }
+  setStep(e) {
+    if (this.steps[e].readyForEntrance) {
+      this.selectedStep = e;
+      for (let t = 0; t < this.steps.length; t++)
+        this.steps[t].isSelected = t === e, t <= e && this.steps[t].state < h.Done && (this.steps[t].state = h.Started), this.steps = [...this.steps];
+    }
+  }
+  getExtremes() {
+    if (this.selectedStep === 0)
+      return "start";
+    if (this.selectedStep === this.steps.length - 1)
+      return "end";
+  }
+  render() {
+    return l`
+      <div class="stepper ${this.orientation}">
+        <nve-button .disabled=${this.getExtremes() === "start"} size="medium" variant="primary" @click=${this.prevStep}
+          ><nve-icon slot="prefix" name="navigate_before" library="${this.iconLibrary}"></nve-icon>Forrige</nve-button
+        >
+        <div class="flex-container">
+          ${this.steps.map(
+      (e, t) => l`
+              <nve-step
+                @clicked=${this.selectStep}
+                .iconLibrary=${this.iconLibrary}
+                .icons=${e.icons}
+                .title=${e.title}
+                .description=${e.description}
+                .state=${e.state}
+                .stepperIndex=${this.selectedStep}
+                .isSelected=${e.isSelected}
+                .isLast=${t === this.steps.length - 1}
+                .index=${t}
+                .spaceBetweenSteps=${this.spaceBetweenSteps}
+                .readyForEntrance=${e.readyForEntrance}
+                .direction=${this.orientation}
+              >
+              </nve-step>
+            `
+    )}
+        </div>
+        <nve-button .disabled=${this.getExtremes() === "end"} size="medium" variant="primary" @click=${this.nextStep}>
+          <nve-icon slot="suffix" name="navigate_next" library="${this.iconLibrary}"></nve-icon>Neste</nve-button
+        >
+      </div>
+    `;
+  }
+};
+s.styles = [f];
+r([
+  p()
+], s.prototype, "orientation", 2);
+r([
+  p({ type: Number })
+], s.prototype, "selectedStep", 2);
+r([
+  p({ type: Number })
+], s.prototype, "spaceBetweenSteps", 2);
+r([
+  p({ type: String })
+], s.prototype, "iconLibrary", 2);
+r([
+  p({ type: Array })
+], s.prototype, "steps", 2);
+s = r([
+  S("nve-stepper")
+], s);
+export {
+  s as default
+};

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

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

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

@@ -0,0 +1,76 @@
+import { i as e } from "../../chunks/lit-element.js";
+const t = e`
+.stepper {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+a {
+  cursor: pointer;
+  user-select: none;
+}
+.step {
+  height: 200px;
+}
+button {
+  z-index: 2;
+  user-select: none;
+}
+
+.scroll-menu {
+  display: flex;
+  align-items: center;
+  overflow-x: hidden;
+}
+
+.flex-container {
+  display: flex;
+  padding: 20px 60px 20px 60px;
+  position: relative;
+}
+.hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+:host {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
+.scroll-button.prev {
+  background: linear-gradient(
+    to right,
+    #ffffff,
+    #ffffff 60%,
+    transparent 100%
+  );
+  padding: 20px 80px 20px 20px;
+  margin: 0 60px;
+  position: absolute;
+  z-index: 1;
+  left: 0;
+}
+.scroll-button.next {
+  background: linear-gradient(
+    to left,
+    #ffffff,
+    #ffffff 60%,
+    transparent 100%
+  );
+  padding: 20px 80px 20px 80px;
+  position: absolute;
+  z-index: 1;
+  right: 0;
+}
+`;
+export {
+  t as default
+};

package/nve-designsystem.d.ts

@@ -20,3 +20,5 @@ export { default as NveSpinner } from './components/nve-spinner/nve-spinner.comp
 export { default as NveTooltip } from './components/nve-tooltip/nve-tooltip.component';
 export { default as NveSelect } from './components/nve-select/nve-select.component';
 export { default as NveOption } from './components/nve-option/nve-option.component';
+export { default as NveStepper } from './components/nve-stepper/nve-stepper.component';
+export { default as NveStep } from './components/nve-stepper/nve-step/nve-step.component';

package/nve-designsystem.js

@@ -1,24 +1,26 @@
-import { default as J } from "./components/nve-alert/nve-alert.component.js";
-import { default as Q } from "./components/nve-badge/nve-badge.component.js";
-import { default as V } from "./components/nve-button/nve-button.component.js";
-import { default as X } from "./components/nve-checkbox/nve-checkbox.component.js";
-import { default as Z } from "./components/nve-checkbox-group/nve-checkbox-group.component.js";
-import { default as $ } from "./components/nve-dialog/nve-dialog.component.js";
-import { default as to } from "./components/nve-divider/nve-divider.component.js";
-import { default as eo } from "./components/nve-dropdown/nve-dropdown.component.js";
-import { default as mo } from "./components/nve-icon/nve-icon.component.js";
-import { default as ao } from "./components/nve-input/nve-input.component.js";
-import { default as uo } from "./components/nve-label/nve-label.component.js";
-import { default as xo } from "./components/nve-menu/nve-menu.component.js";
-import { default as so } from "./components/nve-menu-item/nve-menu-item.component.js";
-import { default as no } from "./components/nve-popup/nve-popup.component.js";
-import { default as bo } from "./components/nve-radio/nve-radio.component.js";
-import { default as Do } from "./components/nve-radio-button/nve-radio-button.component.js";
-import { default as Ro } from "./components/nve-radio-group/nve-radio-group.component.js";
-import { default as ho } from "./components/nve-spinner/nve-spinner.component.js";
-import { default as Co } from "./components/nve-tooltip/nve-tooltip.component.js";
-import { default as Mo } from "./components/nve-select/nve-select.component.js";
-import { default as wo } from "./components/nve-option/nve-option.component.js";
+import { default as Q } from "./components/nve-alert/nve-alert.component.js";
+import { default as V } from "./components/nve-badge/nve-badge.component.js";
+import { default as X } from "./components/nve-button/nve-button.component.js";
+import { default as Z } from "./components/nve-checkbox/nve-checkbox.component.js";
+import { default as $ } from "./components/nve-checkbox-group/nve-checkbox-group.component.js";
+import { default as to } from "./components/nve-dialog/nve-dialog.component.js";
+import { default as eo } from "./components/nve-divider/nve-divider.component.js";
+import { default as mo } from "./components/nve-dropdown/nve-dropdown.component.js";
+import { default as io } from "./components/nve-icon/nve-icon.component.js";
+import { default as uo } from "./components/nve-input/nve-input.component.js";
+import { default as xo } from "./components/nve-label/nve-label.component.js";
+import { default as so } from "./components/nve-menu/nve-menu.component.js";
+import { default as no } from "./components/nve-menu-item/nve-menu-item.component.js";
+import { default as So } from "./components/nve-popup/nve-popup.component.js";
+import { default as Bo } from "./components/nve-radio/nve-radio.component.js";
+import { default as Io } from "./components/nve-radio-button/nve-radio-button.component.js";
+import { default as go } from "./components/nve-radio-group/nve-radio-group.component.js";
+import { default as ko } from "./components/nve-spinner/nve-spinner.component.js";
+import { default as Go } from "./components/nve-tooltip/nve-tooltip.component.js";
+import { default as wo } from "./components/nve-select/nve-select.component.js";
+import { default as Lo } from "./components/nve-option/nve-option.component.js";
+import { default as Po } from "./components/nve-stepper/nve-stepper.component.js";
+import { default as jo } from "./components/nve-stepper/nve-step/nve-step.component.js";
 import "./chunks/chunk.7O2CYFQX.js";
 import "./chunks/chunk.JS655M6J.js";
 import "./chunks/lit-element.js";
@@ -60,26 +62,30 @@ import "./components/nve-radio/nve-radio.styles.js";
 import "./components/nve-radio-group/nve-radio-group.styles.js";
 import "./components/nve-select/nve-select.styles.js";
 import "./components/nve-option/nve-option.styles.js";
+import "./components/nve-stepper/nve-stepper.styles.js";
+import "./components/nve-stepper/nve-step/nve-step.styles.js";
 export {
-  J as NveAlert,
-  Q as NveBadge,
-  V as NveButton,
-  X as NveCheckbox,
-  Z as NveCheckboxGroup,
-  $ as NveDialog,
-  to as NveDivider,
-  eo as NveDropdown,
-  mo as NveIcon,
-  ao as NveInput,
-  uo as NveLabel,
-  xo as NveMenu,
-  so as NveMenuItem,
-  wo as NveOption,
-  no as NvePopup,
-  bo as NveRadio,
-  Do as NveRadioButton,
-  Ro as NveRadioGroup,
-  Mo as NveSelect,
-  ho as NveSpinner,
-  Co as NveTooltip
+  Q as NveAlert,
+  V as NveBadge,
+  X as NveButton,
+  Z as NveCheckbox,
+  $ as NveCheckboxGroup,
+  to as NveDialog,
+  eo as NveDivider,
+  mo as NveDropdown,
+  io as NveIcon,
+  uo as NveInput,
+  xo as NveLabel,
+  so as NveMenu,
+  no as NveMenuItem,
+  Lo as NveOption,
+  So as NvePopup,
+  Bo as NveRadio,
+  Io as NveRadioButton,
+  go as NveRadioGroup,
+  wo as NveSelect,
+  ko as NveSpinner,
+  jo as NveStep,
+  Po as NveStepper,
+  Go as NveTooltip
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nve-designsystem",
-  "version": "0.1.50",
+  "version": "0.1.51",
   "exports": {
     ".": {
       "import": "./nve-designsystem.js",