@dataforsyningen/designsystem - npm Package Compare versions

Comparing version 7.9.0 to 7.10.0

assets/designsystem.js

@@ -793,2 +793,114 @@ // src/js/toast.js
 };
+var DSNavScrollable = class extends HTMLElement {
+  debounceTimer;
+  style = `
+    :host {
+      display: block;
+      position: relative;
+    }
+    .btn-scroll-right,
+    .btn-scroll-left {
+      display: none;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: calc(var(--space) * 4);
+      height: 100%;
+      padding: 0;
+      border: none;
+    }
+    .btn-scroll-left {
+      text-align: left;
+      left: 0;
+      background: linear-gradient(to right, var(--background-color) 33%, transparent);
+    }
+    .btn-scroll-right {
+      text-align: right;
+      right: 0;
+      background: linear-gradient(to left, var(--background-color) 33%, transparent);
+    }
+    .btn-scroll-right svg,
+    .btn-scroll-left svg {
+      height: auto;
+      width: var(--space);
+    }
+    slot {
+      display: block;
+      width: 100%;
+      overflow-x: auto;
+      scrollbar-width: none;
+      scroll-snap-type: x mandatory;
+    }
+  `;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML += `
+      <style>
+        ${this.style}
+      </style>
+      <button class="btn-scroll-left" title="Scroll mod venstre">
+        <svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">
+            <path d="M22 27L5.41 15.16C4.85 14.72 4.86 14.02 5.43 13.59L22 2"/>
+          </g>
+        </svg>
+      </button>
+      <slot></slot>
+      <button class="btn-scroll-right" title="Scroll mod h\xF8jre">
+        <svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">
+            <path d="M6 2L22.59 13.84C23.15 14.28 23.14 14.98 22.57 15.41L6 27"/>
+          </g>
+        </svg>
+      </button>
+    `;
+    this.updateButtons();
+    this.shadowRoot.querySelector("slot").addEventListener("scroll", this.scrollHandler.bind(this));
+    this.shadowRoot.querySelector(".btn-scroll-left").addEventListener("click", this.scrollLeftHandler.bind(this));
+    this.shadowRoot.querySelector(".btn-scroll-right").addEventListener("click", this.scrollRightHandler.bind(this));
+  }
+  scrollHandler() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer);
+    }
+    this.debounceTimer = setTimeout(this.updateButtons.bind(this), 100);
+  }
+  scrollLeftHandler() {
+    const scrollableElement = this.shadowRoot.querySelector("slot");
+    this.scrollBtnHandler(scrollableElement.scrollLeft - 200);
+  }
+  scrollRightHandler() {
+    const scrollableElement = this.shadowRoot.querySelector("slot");
+    this.scrollBtnHandler(scrollableElement.scrollLeft + 200);
+  }
+  scrollBtnHandler(position) {
+    this.shadowRoot.querySelector("slot").scroll({
+      top: 0,
+      left: position,
+      behavior: "smooth"
+    });
+  }
+  updateButtons() {
+    console.log("update btns");
+    const scrollableElement = this.shadowRoot.querySelector("slot");
+    const leftBtn = this.shadowRoot.querySelector(".btn-scroll-left");
+    const rightBtn = this.shadowRoot.querySelector(".btn-scroll-right");
+    const scrolled = scrollableElement.scrollLeft;
+    const visibleWidth = scrollableElement.clientWidth;
+    const totalWidth = scrollableElement.scrollWidth;
+    if (scrolled > 0) {
+      leftBtn.style.display = "block";
+    } else {
+      leftBtn.style.display = "none";
+    }
+    if (visibleWidth > totalWidth || scrolled + visibleWidth >= totalWidth) {
+      rightBtn.style.display = "none";
+    } else {
+      rightBtn.style.display = "block";
+    }
+  }
+};
 
@@ -1637,2 +1749,3 @@ // src/js/icon.js
   DSNavResponsive,
+  DSNavScrollable,
   DSSlide,
@@ -1639,0 +1752,0 @@ DSSwitch,

index.js

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

package.json

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

@@ -167,2 +167,126 @@ import { DSTogglePanel } from './togglePanel.js'
   }
+}
+
+export class DSNavScrollable extends HTMLElement {
+
+  debounceTimer
+  style = `
+    :host {
+      display: block;
+      position: relative;
+    }
+    .btn-scroll-right,
+    .btn-scroll-left {
+      display: none;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      width: calc(var(--space) * 4);
+      height: 100%;
+      padding: 0;
+      border: none;
+    }
+    .btn-scroll-left {
+      text-align: left;
+      left: 0;
+      background: linear-gradient(to right, var(--background-color) 33%, transparent);
+    }
+    .btn-scroll-right {
+      text-align: right;
+      right: 0;
+      background: linear-gradient(to left, var(--background-color) 33%, transparent);
+    }
+    .btn-scroll-right svg,
+    .btn-scroll-left svg {
+      height: auto;
+      width: var(--space);
+    }
+    slot {
+      display: block;
+      width: 100%;
+      overflow-x: auto;
+      scrollbar-width: none;
+      scroll-snap-type: x mandatory;
+    }
+  `
+
+  constructor() {
+    super()
+    this.attachShadow({ mode: 'open' })
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML += `
+      <style>
+        ${ this.style }
+      </style>
+      <button class="btn-scroll-left" title="Scroll mod venstre">
+        <svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">
+            <path d="M22 27L5.41 15.16C4.85 14.72 4.86 14.02 5.43 13.59L22 2"/>
+          </g>
+        </svg>
+      </button>
+      <slot></slot>
+      <button class="btn-scroll-right" title="Scroll mod højre">
+        <svg class="ds-icon" width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g stroke="var(--ds-icon-color, black)" stroke-linejoin="round" stroke-linecap="round" stroke-width="var(--ds-icon-stroke, 1)">
+            <path d="M6 2L22.59 13.84C23.15 14.28 23.14 14.98 22.57 15.41L6 27"/>
+          </g>
+        </svg>
+      </button>
+    `
+    this.updateButtons()
+    this.shadowRoot.querySelector('slot').addEventListener('scroll', this.scrollHandler.bind(this))
+    this.shadowRoot.querySelector('.btn-scroll-left').addEventListener('click', this.scrollLeftHandler.bind(this))
+    this.shadowRoot.querySelector('.btn-scroll-right').addEventListener('click', this.scrollRightHandler.bind(this))
+  }
+
+  scrollHandler() {
+    if (this.debounceTimer) {
+      clearTimeout(this.debounceTimer)
+    }
+    this.debounceTimer = setTimeout(this.updateButtons.bind(this), 100)
+  }
+
+  scrollLeftHandler() {
+    const scrollableElement = this.shadowRoot.querySelector('slot')
+    this.scrollBtnHandler(scrollableElement.scrollLeft - 200)
+  }
+
+  scrollRightHandler() {
+    const scrollableElement = this.shadowRoot.querySelector('slot')
+    this.scrollBtnHandler(scrollableElement.scrollLeft + 200)
+  }
+
+  scrollBtnHandler(position) {
+    this.shadowRoot.querySelector('slot').scroll({
+      top: 0,
+      left: position,
+      behavior: "smooth",
+    })
+  }
+
+  updateButtons() {
+    console.log('update btns')
+    const scrollableElement = this.shadowRoot.querySelector('slot')
+    const leftBtn = this.shadowRoot.querySelector('.btn-scroll-left')
+    const rightBtn = this.shadowRoot.querySelector('.btn-scroll-right')
+
+    const scrolled = scrollableElement.scrollLeft
+    const visibleWidth = scrollableElement.clientWidth
+    const totalWidth = scrollableElement.scrollWidth
+
+    if (scrolled > 0) {
+      leftBtn.style.display = 'block'
+    } else {
+      leftBtn.style.display = 'none'
+    }
+
+    if (visibleWidth > totalWidth || (scrolled + visibleWidth ) >= totalWidth ) {
+      rightBtn.style.display = 'none'
+    } else {
+      rightBtn.style.display = 'block'
+    }
+  }
 }

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

4645084

increased by0.19%

Lines of code

3813

increased by6.3%

No dependency changes