@dataforsyningen/designsystem - npm Package Compare versions

Comparing version 7.13.3 to 7.14.0

assets/designsystem.js

		@@ -158,10 +158,13 @@ // src/js/toast.js
		}
		goDarkHandler(event) {
		document.documentElement.dataset.theme = "dark";
		localStorage.setItem(this.localstorageKey, "dark");
		goDarkHandler() {
		this.changeTheme("dark");
		}
		goLightHandler(event) {
		document.documentElement.dataset.theme = "light";
		localStorage.setItem(this.localstorageKey, "light");
		goLightHandler() {
		this.changeTheme("light");
		}
		changeTheme(theme) {
		document.documentElement.dataset.theme = theme;
		localStorage.setItem(this.localstorageKey, theme);
		this.dispatchEvent(new CustomEvent("themechange", { detail: theme, bubbles: true, composed: true }));
		}
		checkPreference() {
		@@ -168,0 +171,0 @@ const preference = localStorage.getItem(this.localstorageKey);

package.json

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

src/js/themeToggle.js

		@@ -0,1 +1,5 @@
		/**
		* Custom web component that enables user to switch between light and dark modes
		* @fires themechange - An event where event.detail contains a string "light" or "dark" for the respective mode chosen by the user.
		*/
		export class ThemeToggle extends HTMLElement {
		@@ -65,12 +69,16 @@

		goDarkHandler(event) {
		document.documentElement.dataset.theme = 'dark'
		localStorage.setItem(this.localstorageKey, 'dark')
		goDarkHandler() {
		this.changeTheme('dark')
		}

		goLightHandler(event) {
		document.documentElement.dataset.theme = 'light'
		localStorage.setItem(this.localstorageKey, 'light')
		goLightHandler() {
		this.changeTheme('light')
		}

		changeTheme(theme) {
		document.documentElement.dataset.theme = theme
		localStorage.setItem(this.localstorageKey, theme)
		this.dispatchEvent(new CustomEvent('themechange', {detail: theme, bubbles: true, composed: true}))
		}

		checkPreference() {
		@@ -77,0 +85,0 @@ const preference = localStorage.getItem(this.localstorageKey)

docs/components.html