nve-designsystem 0.2.14 → 0.3.1

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

@@ -1,4 +1,10 @@
 import { default as SlMenu } from '@shoelace-style/shoelace/dist/components/menu/menu.js';
+/**
+ * En meny som tilbyr en liste av valg. Valgene lager du med en eller flere nve-menu-item's.
+ * Du kan også bruke nve-label inni nve-menu, for eksempel til å kategorisere menyvalg.
+ * Nve-label får en spesiell styling når den brukes inni nve-menu
+ * For å skille skille valg fra hverandre, kan du bruke nve-divider.
+ */
 export default class NveMenu extends SlMenu {
     constructor();
     static styles: import('lit').CSSResultGroup[];

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

@@ -1,5 +1,5 @@
-import { i as a } from "../../chunks/lit-element.js";
-const l = a`
+import { i as r } from "../../chunks/lit-element.js";
+const a = r`
   :host {
     padding: 0px;
     margin-top: var(--spacing-xx-small);
@@ -11,7 +11,13 @@ const l = a`
     color: var(--neutrals-foreground-subtle, #006b99);
     font: var(--label-x-small);
   }
+  ::slotted(nve-divider) {
+    border-top: var(--borderWidth-strong, 2px) solid var(--Neutrals-Border-Subtle, #c8eaf9);
+    opacity: var(--borderWidth-default, 1);
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
 `;
 export {
-  l as default
+  a as default
 };

package/components/nve-menu-item/nve-menu-item.component.d.ts

@@ -1,24 +1,16 @@
 import { default as SlMenuItem } from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+import { PropertyValues } from 'lit';
 /**
- * En sl-menu-item i NVE-forkledning.
- * Mer info: https://shoelace.style/components/menu-item
- *
+ * Bruk denne til å lage valg i en nve-menu.
+ * Property "loading" støttes foreløpig ikke.
  */
 export default class NveMenuItem extends SlMenuItem {
     /**
-     * Tekst som vises som subtext(undertekst).
+     * Gi menyvalget en egen undertekst.
      */
     subtext: string;
     /**
-     * Setter en divider på toppen av item.
-     */
-    dividerTop: boolean;
-    /**
-     * Setter en divider på bunnen av item.
-     */
-    dividerBottom: boolean;
-    /**
-     * Gjør at teksten blir indent og mindre dominant farge
+     * Gjør at teksten får innrykk og en svakere farge
      */
     indent: boolean;
     constructor();
@@ -26,7 +18,7 @@ export default class NveMenuItem extends SlMenuItem {
     /**
      * Sørger for at subtext blir satt på, hvis den er tilstede i properties
      */
-    updated(changedProperties: any): void;
+    updated(changedProperties: PropertyValues<this>): void;
     private handleMouseOver;
     static styles: import('lit').CSSResultGroup[];
 }

package/components/nve-menu-item/nve-menu-item.component.js

@@ -5,16 +5,16 @@ import "../../chunks/chunk.7HOIOSC7.js";
 import "../../chunks/chunk.WLV3FVBR.js";
 import "../../chunks/chunk.ALSPWWWG.js";
 import "../../chunks/chunk.5THGRZAA.js";
-import { n as i, t as a } from "../../chunks/property.js";
+import { n as l, t as a } from "../../chunks/property.js";
 import f from "./nve-menu-item.styles.js";
-var d = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (e, s, l, p) => {
-  for (var t = p > 1 ? void 0 : p ? v(s, l) : s, n = e.length - 1, u; n >= 0; n--)
-    (u = e[n]) && (t = (p ? u(s, l, t) : u(t)) || t);
-  return p && t && d(s, l, t), t;
+var v = Object.defineProperty, c = Object.getOwnPropertyDescriptor, u = (e, r, p, o) => {
+  for (var t = o > 1 ? void 0 : o ? c(r, p) : r, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (t = (o ? n(r, p, t) : n(t)) || t);
+  return o && t && v(r, p, t), t;
 };
-let r = class extends m {
+let s = class extends m {
   constructor() {
-    super(), this.subtext = "", this.dividerTop = !1, this.dividerBottom = !1, this.indent = !1, this.handleMouseOver = (e) => {
+    super(), this.subtext = "", this.indent = !1, this.handleMouseOver = (e) => {
       this.focus(), e.stopPropagation();
     };
   }
@@ -28,22 +28,16 @@ let r = class extends m {
     super.updated(e), e.has("subtext") && this.style.setProperty("--nve-menu-item-subtext", `"${this.subtext}"`);
   }
 };
-r.styles = [m.styles, f];
-o([
-  i({ type: String, reflect: !0 })
-], r.prototype, "subtext", 2);
-o([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "dividerTop", 2);
-o([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "dividerBottom", 2);
-o([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "indent", 2);
-r = o([
+s.styles = [m.styles, f];
+u([
+  l({ type: String, reflect: !0 })
+], s.prototype, "subtext", 2);
+u([
+  l({ type: Boolean, reflect: !0 })
+], s.prototype, "indent", 2);
+s = u([
   a("nve-menu-item")
-], r);
+], s);
 export {
-  r as default
+  s as default
 };

package/components/nve-menu-item/nve-menu-item.styles.js

@@ -1,5 +1,5 @@
-import { i as r } from "../../chunks/lit-element.js";
-const o = r`
+import { i as e } from "../../chunks/lit-element.js";
+const a = e`
   :host {
     position: relative; 
   }
@@ -18,12 +18,13 @@ const o = r`
     border-radius: 4px;
     width: 1.125rem;
     visibility: visible;
-    margin-right: var(--spacing-small, 0.75rem);
-   
+    margin-right: var(--spacing-small, 0.75rem);   
   }
+  
   :host([type="checkbox"]) sl-icon {
     opacity: 0;
   }
+
   .menu-item .menu-item__check {
     display: none; 
   }
@@ -43,11 +44,8 @@ const o = r`
  
 
   .menu-item__label {
-
     color: var(--neutrals-foreground-primary, #00131C);
     font: var(--label-small-light);
-    
-
   }
   
   /* Design av subtext  */
@@ -58,21 +56,9 @@ const o = r`
     font: var(--body-compact-xsmall-compact)
   }
 
-  /* Border i topp  */
-  :host([dividerTop]) {
-    border-top: var(--borderWidth-strong, 2px) solid var(--Neutrals-Border-Subtle, #C8EAF9);
-    opacity: var(--borderWidth-default, 1);
-  }
-  
-  /* Border i bunn  */
-  :host([dividerBottom]) {
-    border-bottom: var(--borderWidth-strong, 2px) solid var(--Neutrals-Border-Subtle, #C8EAF9);
-    opacity: var(--borderWidth-default, 1);
-  }
-  /* Gjør item unclickable når category property er på*/
+  /* Gjør item unclickable når category property er på */
   :host([category]) {
     pointer-events: none;
-
   }
 
   :host([category]) .menu-item__label{
@@ -107,5 +93,5 @@ const o = r`
   }
 `;
 export {
-  o as default
+  a as default
 };

package/custom-elements.json

@@ -343,77 +343,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/nve-badge/nve-badge.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.",
-          "name": "NveBadge",
-          "members": [
-            {
-              "kind": "field",
-              "name": "styles",
-              "type": {
-                "text": "array"
-              },
-              "static": true,
-              "default": "[styles]"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "string"
-              },
-              "default": "'primary'",
-              "description": "= primary, success, neutral, warning, danger, brand"
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "string"
-              },
-              "default": "'medium'",
-              "description": "= small, medium eller large"
-            },
-            {
-              "kind": "field",
-              "name": "saturation",
-              "type": {
-                "text": "string"
-              },
-              "default": "null",
-              "description": "= Setter metningsgrad. subtle er eneste støttede, evt ikke satt."
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagNameWithoutPrefix": "badge",
-          "tagName": "nve-badge",
-          "customElement": true,
-          "jsDoc": "/**\n * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {string} saturation = Setter metningsgrad. subtle er eneste støttede, evt ikke satt.\n */"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NveBadge",
-            "module": "components/nve-badge/nve-badge.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/nve-button/nve-button.js",
@@ -1256,6 +1185,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/nve-badge/nve-badge.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.",
+          "name": "NveBadge",
+          "members": [
+            {
+              "kind": "field",
+              "name": "styles",
+              "type": {
+                "text": "array"
+              },
+              "static": true,
+              "default": "[styles]"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "default": "'primary'",
+              "description": "= primary, success, neutral, warning, danger, brand"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string"
+              },
+              "default": "'medium'",
+              "description": "= small, medium eller large"
+            },
+            {
+              "kind": "field",
+              "name": "saturation",
+              "type": {
+                "text": "string"
+              },
+              "default": "null",
+              "description": "= Setter metningsgrad. subtle er eneste støttede, evt ikke satt."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagNameWithoutPrefix": "badge",
+          "tagName": "nve-badge",
+          "customElement": true,
+          "jsDoc": "/**\n * En liten etikett som vanligvis vises inne i eller i nærheten av en annen større grensesnittkomponent, som representerer en status, egenskap eller andre metadata.\n * @property {string} size = small, medium eller large\n * @property {string} variant = primary, success, neutral, warning, danger, brand\n * @property {string} saturation = Setter metningsgrad. subtle er eneste støttede, evt ikke satt.\n */"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NveBadge",
+            "module": "components/nve-badge/nve-badge.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/nve-checkbox/nve-checkbox.js",
@@ -4872,7 +4872,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "",
+          "description": "En meny som tilbyr en liste av valg. Valgene lager du med en eller flere nve-menu-item's.\nDu kan også bruke nve-label inni nve-menu, for eksempel til å kategorisere menyvalg.\nNve-label får en spesiell styling når den brukes inni nve-menu\nFor å skille skille valg fra hverandre, kan du bruke nve-divider.",
           "name": "NveMenu",
           "members": [
             {
@@ -4902,6 +4902,7 @@
           "tagNameWithoutPrefix": "menu",
           "tagName": "nve-menu",
           "customElement": true,
+          "jsDoc": "/**\n * En meny som tilbyr en liste av valg. Valgene lager du med en eller flere nve-menu-item's.\n * Du kan også bruke nve-label inni nve-menu, for eksempel til å kategorisere menyvalg.\n * Nve-label får en spesiell styling når den brukes inni nve-menu\n * For å skille skille valg fra hverandre, kan du bruke nve-divider.\n */",
           "events": [
             {
               "type": {
@@ -4944,7 +4945,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "En sl-menu-item i NVE-forkledning.\nMer info: https://shoelace.style/components/menu-item",
+          "description": "Bruk denne til å lage valg i en nve-menu.\nProperty \"loading\" støttes foreløpig ikke.",
           "name": "NveMenuItem",
           "members": [
             {
@@ -4954,25 +4955,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Tekst som vises som subtext(undertekst)."
-            },
-            {
-              "kind": "field",
-              "name": "dividerTop",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Setter en divider på toppen av item."
-            },
-            {
-              "kind": "field",
-              "name": "dividerBottom",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Setter en divider på bunnen av item."
+              "description": "Gi menyvalget en egen undertekst."
             },
             {
               "kind": "field",
@@ -4981,7 +4964,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Gjør at teksten blir indent og mindre dominant farge"
+              "description": "Gjør at teksten får innrykk og en svakere farge"
             },
             {
               "kind": "method",
@@ -4990,7 +4973,7 @@
                 {
                   "name": "changedProperties",
                   "type": {
-                    "text": "any"
+                    "text": "PropertyValues<this>"
                   }
                 }
               ],
@@ -5154,7 +5137,7 @@
           "tagNameWithoutPrefix": "menu-item",
           "tagName": "nve-menu-item",
           "customElement": true,
-          "jsDoc": "/**\n * En sl-menu-item i NVE-forkledning.\n * Mer info: https://shoelace.style/components/menu-item\n *\n */",
+          "jsDoc": "/**\n * Bruk denne til å lage valg i en nve-menu.\n * Property \"loading\" støttes foreløpig ikke.\n */",
           "cssProperties": [
             {
               "description": "The distance submenus shift to overlap the parent menu.",
@@ -10918,7 +10901,7 @@
   "package": {
     "name": "nve-designsystem",
     "description": "Designsystem for NVE",
-    "version": "0.2.13",
+    "version": "0.3.0",
     "author": {
       "name": "NVE",
       "email": "nve@nve.no"

package/package.json

@@ -7,7 +7,7 @@
   },
   "license": "MIT",
   "homepage": "https://github.com/NVE/Designsystem/",
-  "version": "0.2.14",
+  "version": "0.3.1",
   "customElements": "custom-elements.json",
   "exports": {
     ".": {