@dataforsyningen/designsystem - npm Package Compare versions

Comparing version 7.5.6 to 7.7.0

assets/designsystem.js

@@ -22,3 +22,3 @@ // src/js/toast.js
 // assets/icons/copy.svg
-var copy_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M20.5 6V4.5C20.5 3.39543 19.6046 2.5 18.5 2.5H4.5C3.39543 2.5 2.5 3.39543 2.5 4.5V18.5C2.5 19.6046 3.39543 20.5 4.5 20.5H6M26.5 24.5V10.5C26.5 9.39543 25.6046 8.5 24.5 8.5H10.5C9.39543 8.5 8.5 9.39543 8.5 10.5V24.5C8.5 25.6046 9.39543 26.5 10.5 26.5H24.5C25.6046 26.5 26.5 25.6046 26.5 24.5Z"/>\n  </g>\n</svg>';
+var copy_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M20.5 6V4.5C20.5 3.4 19.6 2.5 18.5 2.5H4.5C3.4 2.5 2.5 3.4 2.5 4.5V18.5C2.5 19.6 3.4 20.5 4.5 20.5H6M26.5 24.5V10.5C26.5 9.4 25.6 8.5 24.5 8.5H10.5C9.4 8.5 8.5 9.4 8.5 10.5V24.5C8.5 25.6 9.4 26.5 10.5 26.5H24.5C25.6 26.5 26.5 25.6 26.5 24.5Z"/>\n  </g>\n</svg>';
 
@@ -101,3 +101,3 @@ // src/js/codeview.js
 // assets/icons/sun.svg
-var sun_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M0.5 14.5016H3.49844M25.4984 14.5L28.5 14.5016M14.4922 0.5V3.5M14.5 25.5V28.5M4.60163 24.4006L6.72185 22.2804M22.2771 6.72293L24.4006 4.60163M4.59498 4.60603L6.7163 6.72735M22.2782 22.2782L24.3995 24.3995M22.4984 14.5C22.4984 18.9183 18.9167 22.5 14.4984 22.5C10.0802 22.5 6.49844 18.9183 6.49844 14.5C6.49844 10.0817 10.0802 6.5 14.4984 6.5C18.9167 6.5 22.4984 10.0817 22.4984 14.5Z"/>\n  </g>\n</svg>';
+var sun_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M0.5 14.5H3.5M25.5 14.5L28.5 14.5M14.49 0.5V3.5M14.5 25.5V28.5M4.6 24.4L6.72 22.28M22.28 6.72L24.4 4.6M4.59 4.61L6.72 6.73M22.28 22.28L24.4 24.4M22.5 14.5C22.5 18.92 18.92 22.5 14.5 22.5C10.08 22.5 6.5 18.92 6.5 14.5C6.5 10.08 10.08 6.5 14.5 6.5C18.92 6.5 22.5 10.08 22.5 14.5Z"/>\n  </g>\n</svg>';
 
@@ -187,3 +187,3 @@ // src/js/themeToggle.js
 // assets/icons/choose.svg
-var choose_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M16.5 14.5C16.5 15.6046 15.6046 16.5 14.5 16.5C13.3954 16.5 12.5 15.6046 12.5 14.5C12.5 13.3954 13.3954 12.5 14.5 12.5C15.6046 12.5 16.5 13.3954 16.5 14.5Z"/>\n    <path d="M27.5 14.5C27.5 15.6046 26.6046 16.5 25.5 16.5C24.3954 16.5 23.5 15.6046 23.5 14.5C23.5 13.3954 24.3954 12.5 25.5 12.5C26.6046 12.5 27.5 13.3954 27.5 14.5Z"/>\n    <path d="M5.5 14.5C5.5 15.6046 4.60457 16.5 3.5 16.5C2.39543 16.5 1.5 15.6046 1.5 14.5C1.5 13.3954 2.39543 12.5 3.5 12.5C4.60457 12.5 5.5 13.3954 5.5 14.5Z"/>\n  </g>\n</svg>';
+var choose_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M16.5 14.5C16.5 15.6 15.6 16.5 14.5 16.5C13.4 16.5 12.5 15.6 12.5 14.5C12.5 13.4 13.4 12.5 14.5 12.5C15.6 12.5 16.5 13.4 16.5 14.5Z"/>\n    <path d="M27.5 14.5C27.5 15.6 26.6 16.5 25.5 16.5C24.4 16.5 23.5 15.6 23.5 14.5C23.5 13.4 24.4 12.5 25.5 12.5C26.6 12.5 27.5 13.4 27.5 14.5Z"/>\n    <path d="M5.5 14.5C5.5 15.6 4.6 16.5 3.5 16.5C2.4 16.5 1.5 15.6 1.5 14.5C1.5 13.4 2.4 12.5 3.5 12.5C4.6 12.5 5.5 13.4 5.5 14.5Z"/>\n  </g>\n</svg>';
 
@@ -714,2 +714,87 @@ // src/js/togglePanel.js
 };
+var DSNavResponsive = class extends HTMLElement {
+  #style = `
+    :host {
+      max-width: 100%;
+      display: block;
+      text-align: right; 
+    }
+    .menu-container {
+      position: relative;
+    }
+    .menu-toggle {
+      display: none;
+    }
+    .menu-items {
+      max-width: 100%;
+      overflow: scroll;
+      display: flex;
+      flex-flow: row nowrap;
+    }
+    .compact .menu-toggle {
+      display: inline-block;
+    }
+    .compact .menu-items {
+      position: absolute;
+      display: flex;
+      flex-flow: row wrap;
+      top: var(--space);
+      left: 0;
+      z-index: 100;
+      gap: var(--space-sm);
+      background-color: var(--background-color);
+      padding: var(--gap-lg);
+      box-shadow: var(--space-xs) var(--space-xs) var(--space-sm) var(--shadow-2);
+    }
+    .compact .menu-items.collapsed {
+      display: none;
+    }
+  `;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render();
+    window.addEventListener("resize", this.updateMenu.bind(this));
+    window.addEventListener("click", this.toggleMenu.bind(this));
+    this.updateMenu();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", this.updateMenu);
+    window.removeEventListener("click", this.toggleMenu);
+  }
+  render() {
+    this.shadowRoot.innerHTML += `
+      <style>
+        ${this.#style}
+      </style>
+      <div class="menu-container">
+        <slot name="toggle" class="menu-toggle"></slot>
+        <nav class="menu-items">
+          <slot></slot>
+        </nav>
+      </div>
+    `;
+    this.shadowRoot.querySelector(".menu-toggle").addEventListener("click", this.toggleMenu.bind(this));
+  }
+  toggleMenu(event) {
+    event.stopPropagation();
+    const menu = this.shadowRoot.querySelector(".menu-items");
+    menu.classList.toggle("collapsed");
+  }
+  updateMenu() {
+    const container = this.shadowRoot.querySelector(".menu-container");
+    const items = this.shadowRoot.querySelector(".menu-items");
+    const menuWidth = items.scrollWidth;
+    const containerWidth = this.clientWidth;
+    if (menuWidth > containerWidth) {
+      items.classList.add("collapsed");
+      container.classList.add("compact");
+    } else {
+      container.classList.remove("compact");
+      items.classList.remove("collapsed");
+    }
+  }
+};
 
@@ -728,6 +813,6 @@ // src/js/icon.js
 // assets/icons/arrow-single-up.svg
-var arrow_single_up_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M2 22L13.8415 5.41209C14.2795 4.85416 14.9821 4.86401 15.4108 5.43408L27 22"/>\n  </g>\n</svg>';
+var arrow_single_up_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M2 22L13.84 5.41C14.28 4.85 14.98 4.86 15.41 5.43L27 22"/>\n  </g>\n</svg>';
 
 // assets/icons/arrow-single-down.svg
-var arrow_single_down_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M27 7L15.1585 23.5879C14.7205 24.1458 14.0179 24.136 13.5892 23.5659L2 7"/>\n  </g>\n</svg>';
+var arrow_single_down_default = '<svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">\n    <path d="M27 7L15.16 23.59C14.72 24.15 14.02 24.14 13.59 23.57L2 7"/>\n  </g>\n</svg>';
 
@@ -1558,2 +1643,3 @@ // src/js/dataTable.js
   DSNav,
+  DSNavResponsive,
   DSSlide,
@@ -1560,0 +1646,0 @@ DSSwitch,

index.js

@@ -9,3 +9,3 @@ import { CodeView } from './src/js/codeview.js'
 import { DSLogoTitle } from './src/js/logoTitle.js'
-import { DSNav } from './src/js/responsiveNav.js'
+import { DSNav, DSNavResponsive } from './src/js/responsiveNav.js'
 import { DSIcon } from './src/js/icon.js'
@@ -27,2 +27,3 @@ import { DSDataTable } from './src/js/dataTable.js'
   DSNav,
+  DSNavResponsive,
   DSIcon,
@@ -29,0 +30,0 @@ DSDataTable,

package.json

 {
   "name": "@dataforsyningen/designsystem",
-  "version": "7.5.6",
+  "version": "7.7.0",
   "description": "Common design system for Klimadatastyrelsen with CSS, icons, UI components, and logo images.",
@@ -5,0 +5,0 @@ "type": "module",

src/js/responsiveNav.js

@@ -73,1 +73,97 @@ import { DSTogglePanel } from './togglePanel.js'
 }
+ 
+export class DSNavResponsive extends HTMLElement {
+
+  #style = `
+    :host {
+      max-width: 100%;
+      display: block;
+      text-align: right; 
+    }
+    .menu-container {
+      position: relative;
+    }
+    .menu-toggle {
+      display: none;
+    }
+    .menu-items {
+      max-width: 100%;
+      overflow: scroll;
+      display: flex;
+      flex-flow: row nowrap;
+    }
+    .compact .menu-toggle {
+      display: inline-block;
+    }
+    .compact .menu-items {
+      position: absolute;
+      display: flex;
+      flex-flow: row wrap;
+      top: var(--space);
+      left: 0;
+      z-index: 100;
+      gap: var(--space-sm);
+      background-color: var(--background-color);
+      padding: var(--gap-lg);
+      box-shadow: var(--space-xs) var(--space-xs) var(--space-sm) var(--shadow-2);
+    }
+    .compact .menu-items.collapsed {
+      display: none;
+    }
+  `
+
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.render()
+    window.addEventListener('resize', this.updateMenu.bind(this))
+    window.addEventListener('click', this.toggleMenu.bind(this))
+    this.updateMenu();
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.updateMenu)
+    window.removeEventListener('click', this.toggleMenu)
+  }
+
+  render() {
+    this.shadowRoot.innerHTML += `
+      <style>
+        ${ this.#style }
+      </style>
+      <div class="menu-container">
+        <slot name="toggle" class="menu-toggle"></slot>
+        <nav class="menu-items">
+          <slot></slot>
+        </nav>
+      </div>
+    `
+
+    this.shadowRoot.querySelector('.menu-toggle').addEventListener('click', this.toggleMenu.bind(this))
+  }
+
+  toggleMenu(event) {
+    event.stopPropagation()
+    const menu = this.shadowRoot.querySelector('.menu-items')
+    menu.classList.toggle('collapsed')
+  }
+
+  updateMenu() {
+    const container = this.shadowRoot.querySelector('.menu-container')
+    const items = this.shadowRoot.querySelector('.menu-items')
+
+    const menuWidth = items.scrollWidth
+    const containerWidth = this.clientWidth
+
+    if (menuWidth > containerWidth) {
+      items.classList.add('collapsed')
+      container.classList.add('compact')
+    } else {
+      container.classList.remove('compact')
+      items.classList.remove('collapsed')
+    }
+  }
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

3577

increased by4.96%

Worsened metrics

Total package byte prevSize

4628573

decreased by-0.64%

No dependency changes