@dataforsyningen/designsystem - npm Package Compare versions

Comparing version 7.11.0 to 7.12.0

assets/designsystem.js

@@ -491,3 +491,2 @@ // src/js/toast.js
     const tabs = Array.from(this.children);
-    console.log(tabs);
     tabs.forEach((tab, index) => {
@@ -730,9 +729,6 @@ const title = tab.getAttribute("title");
 var DSNavResponsive = class extends HTMLElement {
+  mode;
+  // 'fill' or 'switch'
+  intersectionObserver;
   #style = `
-    :host {
-      display: block;
-      overflow: auto;
-      min-width: calc(var(--button-base-height) + 0.25rem);
-      min-height: var(--button-base-height);
-    }
     .menu-container {
@@ -745,11 +741,33 @@ width: 100%;
     }
-    .menu-container.compact .menu-toggle {
+
+    /* Styles for 'switch' mode */
+    .menu-container.switch.compact .menu-toggle {
       display: inline-block;
     }
-    .menu-container.compact .menu-items {
+    .menu-container.switch.compact .menu-items {
       display: none;
     }
-    .menu-container.compact .menu-items.expanded {
+    .menu-container.switch.compact.expanded .menu-items {
       display: block;
     }
+
+    /* Styles for 'fill' mode */
+    .menu-container.fill:not(.expanded) {
+      overflow: hidden;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+    }
+    .menu-container.fill.expanded {
+      overflow: visible;
+    }
+    .menu-container.fill .menu-toggle {
+      display: inline-block;
+      order: 2;
+    }
+    .menu-container.fill .menu-items {
+      display: flex;
+      order: 1;
+      flex: 0 1 auto;
+    } 
   `;
@@ -761,4 +779,7 @@ constructor() {
   connectedCallback() {
+    this.mode = this.classList.contains("fill") ? "fill" : "switch";
+    this.classList.add(this.mode);
     this.render();
-    this.updateMenu();
+    this.setClassBySize();
+    this.setContainerSize();
     window.addEventListener("resize", this.updateMenu.bind(this));
@@ -776,3 +797,3 @@ window.addEventListener("click", this.closeMenu.bind(this));
       </style>
-      <div class="menu-container">
+      <div class="menu-container ${this.mode}">
         <slot name="toggle" class="menu-toggle"></slot>
@@ -788,10 +809,10 @@ <div class="menu-items">
     event.stopPropagation();
-    const menu = this.shadowRoot.querySelector(".menu-items");
+    const container = this.shadowRoot.querySelector(".menu-container");
     this.classList.add("expanded");
-    menu.classList.add("expanded");
+    container.classList.add("expanded");
   }
-  closeMenu(event) {
-    const menu = this.shadowRoot.querySelector(".menu-items");
+  closeMenu() {
+    const container = this.shadowRoot.querySelector(".menu-container");
     this.classList.remove("expanded");
-    menu.classList.remove("expanded");
+    container.classList.remove("expanded");
   }
@@ -802,3 +823,5 @@ updateMenu() {
     }
-    this.debounceTimer = setTimeout(this.setClassBySize.bind(this), 100);
+    this.debounceTimer = setTimeout(() => {
+      this.setClassBySize.bind(this);
+    }, 100);
   }
@@ -815,2 +838,23 @@ setClassBySize() {
   }
+  setContainerSize() {
+    if (this.mode !== "fill") {
+      return;
+    }
+    const container = this.querySelector(':not(button[slot="toggle"])');
+    const toggle = this.querySelector('button[slot="toggle"]');
+    const maxWidth = this.clientWidth - toggle.clientWidth - 8;
+    let visibleContentWidth = 0;
+    for (const element of Array.from(container.children)) {
+      console.log(element, element.clientWidth);
+      if (visibleContentWidth < maxWidth) {
+        visibleContentWidth = visibleContentWidth + element.clientWidth + 8;
+        continue;
+      } else {
+        visibleContentWidth = visibleContentWidth - element.clientWidth - 16;
+        break;
+      }
+    }
+    console.log("minmax", visibleContentWidth, maxWidth);
+    this.shadowRoot.querySelector(".menu-items").style.width = `${visibleContentWidth}px`;
+  }
 };
@@ -914,3 +958,2 @@ var DSNavScrollable = class extends HTMLElement {
   updateButtons() {
-    console.log("update btns");
     const scrollableElement = this.shadowRoot.querySelector("slot");
@@ -917,0 +960,0 @@ const leftBtn = this.shadowRoot.querySelector(".btn-scroll-left");

package.json

 {
   "name": "@dataforsyningen/designsystem",
-  "version": "7.11.0",
+  "version": "7.12.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

@@ -77,9 +77,5 @@ import { DSTogglePanel } from './togglePanel.js'
 
+  mode // 'fill' or 'switch'
+  intersectionObserver
   #style = `
-    :host {
-      display: block;
-      overflow: auto;
-      min-width: calc(var(--button-base-height) + 0.25rem);
-      min-height: var(--button-base-height);
-    }
     .menu-container {
@@ -92,11 +88,33 @@ width: 100%;
     }
-    .menu-container.compact .menu-toggle {
+
+    /* Styles for 'switch' mode */
+    .menu-container.switch.compact .menu-toggle {
       display: inline-block;
     }
-    .menu-container.compact .menu-items {
+    .menu-container.switch.compact .menu-items {
       display: none;
     }
-    .menu-container.compact .menu-items.expanded {
+    .menu-container.switch.compact.expanded .menu-items {
       display: block;
     }
+
+    /* Styles for 'fill' mode */
+    .menu-container.fill:not(.expanded) {
+      overflow: hidden;
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: flex-start;
+    }
+    .menu-container.fill.expanded {
+      overflow: visible;
+    }
+    .menu-container.fill .menu-toggle {
+      display: inline-block;
+      order: 2;
+    }
+    .menu-container.fill .menu-items {
+      display: flex;
+      order: 1;
+      flex: 0 1 auto;
+    } 
   `
@@ -110,4 +128,7 @@
   connectedCallback() {
+    this.mode = this.classList.contains('fill') ? 'fill' : 'switch'
+    this.classList.add(this.mode)
     this.render()
-    this.updateMenu()
+    this.setClassBySize()
+    this.setContainerSize()
     window.addEventListener('resize', this.updateMenu.bind(this))
@@ -127,3 +148,3 @@ window.addEventListener('click', this.closeMenu.bind(this))
       </style>
-      <div class="menu-container">
+      <div class="menu-container ${ this.mode}">
         <slot name="toggle" class="menu-toggle"></slot>
@@ -140,11 +161,11 @@ <div class="menu-items">
     event.stopPropagation()
-    const menu = this.shadowRoot.querySelector('.menu-items')
+    const container = this.shadowRoot.querySelector('.menu-container')
     this.classList.add('expanded')
-    menu.classList.add('expanded')
+    container.classList.add('expanded')
   }
 
-  closeMenu(event) {
-    const menu = this.shadowRoot.querySelector('.menu-items')
+  closeMenu() {
+    const container = this.shadowRoot.querySelector('.menu-container')
     this.classList.remove('expanded')
-    menu.classList.remove('expanded')
+    container.classList.remove('expanded')
   }
@@ -156,3 +177,5 @@
     }
-    this.debounceTimer = setTimeout(this.setClassBySize.bind(this), 100)
+    this.debounceTimer = setTimeout(() => {
+      this.setClassBySize.bind(this)
+    }, 100)
   }
@@ -171,3 +194,26 @@
     }
+  }
 
+  setContainerSize() {
+    if (this.mode !== 'fill') {
+      return
+    }
+    
+    const container = this.querySelector(':not(button[slot="toggle"])')
+    const toggle = this.querySelector('button[slot="toggle"]')
+    const maxWidth = this.clientWidth - toggle.clientWidth - 8
+    let visibleContentWidth = 0
+    for (const element of Array.from(container.children)) {
+      console.log(element, element.clientWidth)
+      
+      if (visibleContentWidth < maxWidth) {
+        visibleContentWidth = visibleContentWidth + element.clientWidth + 8
+        continue
+      } else {
+        visibleContentWidth = visibleContentWidth - element.clientWidth - 16
+        break
+      }
+    }
+    console.log('minmax', visibleContentWidth, maxWidth)
+    this.shadowRoot.querySelector('.menu-items').style.width = `${ visibleContentWidth }px`
   }
@@ -281,3 +327,2 @@ }
   updateButtons() {
-    console.log('update btns')
     const scrollableElement = this.shadowRoot.querySelector('slot')
@@ -284,0 +329,0 @@ const leftBtn = this.shadowRoot.querySelector('.btn-scroll-left')

src/js/tabs.js

@@ -66,3 +66,2 @@ /**
     const tabs = Array.from(this.children)
-    console.log(tabs)
 
@@ -69,0 +68,0 @@ tabs.forEach((tab, index) => {

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

Total package byte prevSize

4650725

increased by0.13%

Lines of code

3932

increased by2.18%

No dependency changes