@kth/style 1.14.2 → 1.15.0-alpha.1

package/dist/icons/legacy/svg/upload-blue.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20">
+    <path d="M10,0l6,6v12c0,1.1-.9,2-2,2H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H10m4,18V7h-5V2H2V18H14m-6-8l4,4h-2.5v3h-3v-3h-2.5l4-4Z" style="fill:#006cb7;"/>
+</svg>

package/dist/icons/legacy/svg/upload-white.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20">
+    <path d="M10,0l6,6v12c0,1.1-.9,2-2,2H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H10m4,18V7h-5V2H2V18H14m-6-8l4,4h-2.5v3h-3v-3h-2.5l4-4Z" style="fill:#ffffff;"/>
+</svg>

package/dist/icons/legacy/svg/user-management-blue.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14">
+    <path d="M13,6c1.66,0,3-1.34,3-3s-1.34-3-3-3-3,1.34-3,3,1.34,3,3,3m0-4c.55,0,1,.45,1,1s-.45,1-1,1-1-.45-1-1,.45-1,1-1m4.11,3.86c1.2-1.72,1.2-4,0-5.72,.29-.09,.59-.14,.89-.14,1.66,0,3,1.34,3,3s-1.34,3-3,3c-.3,0-.6-.05-.89-.14m-4.11,2.14c-6,0-6,4-6,4v2h12v-2s0-4-6-4m-4,4c0-.29,.32-2,4-2s3.94,1.56,4,2m7,0v2h-3v-2c-.05-1.5-.7-2.92-1.8-3.94,4.8,.49,4.8,3.94,4.8,3.94M8,7h-3v3H3v-3H0v-2H3V2h2v3h3v2Z" style="fill:#006cb7;"/>
+</svg>

package/dist/icons/legacy/svg/video-blue.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20">
+    <path d="M10,0l6,6v12c0,1.1-.9,2-2,2H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H10m4,18V7h-5V2H2V18H14m-2-2l-2.5-1.7v1.7H4v-5h5.5v1.7l2.5-1.7v5Z" style="fill:#006cb7;"/>
+</svg>

package/dist/icons/legacy/svg/video-white.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20">
+    <path d="M10,0l6,6v12c0,1.1-.9,2-2,2H2c-1.1,0-2-.9-2-2V2C0,.9,.9,0,2,0H10m4,18V7h-5V2H2V18H14m-2-2l-2.5-1.7v1.7H4v-5h5.5v1.7l2.5-1.7v5Z" style="fill:#ffffff;"/>
+</svg>

package/dist/icons/legacy/svg/xls-blue.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20">
+    <path d="M10,0H2C.89,0,0,.9,0,2V18c0,1.11,.89,2,2,2H14c1.11,0,2-.89,2-2V6L10,0m4,18H2V2h7V7h5v11m-5.1-5.5l2.9,4.5h-1.8l-2-3.4-2,3.4h-1.8l2.9-4.5-2.9-4.5h1.8l2,3.4,2-3.4h1.8l-2.9,4.5Z" style="fill:#006cb7;"/>
+</svg>

package/dist/icons/legacy/svg/xls-white.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="a"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20">
+    <path d="M10,0H2C.89,0,0,.9,0,2V18c0,1.11,.89,2,2,2H14c1.11,0,2-.89,2-2V6L10,0m4,18H2V2h7V7h5v11m-5.1-5.5l2.9,4.5h-1.8l-2-3.4-2,3.4h-1.8l2.9-4.5-2.9-4.5h1.8l2,3.4,2-3.4h1.8l-2.9,4.5Z" style="fill:#ffffff;"/>
+</svg>

package/dist/menus.js

@@ -0,0 +1,227 @@
+(function () {
+  'use strict';
+
+  /* eslint-disable  no-var */ /* eslint-disable  vars-on-top */ /* eslint-disable  no-use-before-define */ function klaroOnload() {
+    var klaro = document.querySelector("#klaro div.klaro");
+    function noVisibleKlaro() {
+      return (
+        !klaro ||
+        window.getComputedStyle(klaro).display === "none" ||
+        klaro.querySelector("a") === null
+      );
+    }
+    if (noVisibleKlaro()) {
+      return;
+    }
+    if (klaro !== document.body.firstElementChild) {
+      document.body.insertBefore(klaro, document.body.firstElementChild);
+    }
+    const getNextFocusableElement = function _getNextFocusableElement(
+      element,
+      step,
+    ) {
+      var elements = Array.prototype.slice.call(
+        klaro.querySelectorAll(
+          "a:not([disabled]), button:not([disabled]), input:not([disabled])",
+        ),
+      );
+      if (!elements) return null;
+      elements = elements.filter(
+        (e) => window.getComputedStyle(e).display !== "none",
+      );
+      for (var i = 0; i < elements.length; i++) {
+        if (elements[i] === element) {
+          if (i < elements.length - step) {
+            return elements[i + step];
+          }
+          return elements[0];
+        }
+      }
+      return elements[0];
+    };
+    const resetActiveLI = function _resetActiveLI() {
+      var elements = Array.prototype.slice.call(
+        klaro.querySelectorAll("li.active"),
+      );
+      if (!elements) return;
+      elements.forEach((e) => e.classList.remove("active"));
+    }; // eslint-disable-next-line no-shadow
+    const handleKeydown = (event) => {
+      if (noVisibleKlaro()) {
+        window.removeEventListener("keydown", handleKeydown);
+        return;
+      }
+      if (event.key === "Tab") {
+        const nextElement = getNextFocusableElement(
+          event.target,
+          event.shiftKey ? -1 : 1,
+        );
+        if (nextElement) {
+          event.preventDefault();
+          nextElement.focus();
+          resetActiveLI();
+          if (nextElement.tagName === "INPUT") {
+            nextElement.parentElement.closest("li").classList.add("active");
+          }
+        }
+      } else if (event.key === "Escape") {
+        const closeButton = klaro.querySelector(
+          "div.klaro .cookie-modal button.hide",
+        );
+        if (closeButton) {
+          closeButton.click();
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeydown);
+    const config = { childList: true, subtree: true, attributes: true };
+    const callback = function _callback(mutationsList) {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "childList") {
+          if (mutation.addedNodes.length > 0) {
+            for (const node of mutation.addedNodes) {
+              if (node.nodeType === 1) {
+                if (node.classList.contains("cookie-modal")) {
+                  var inputs = Array.prototype.slice.call(
+                    node.querySelectorAll("input"),
+                  );
+                  for (const input of inputs) {
+                    input.setAttribute("tabindex", "0");
+                  }
+                }
+              }
+            }
+          } else if (mutation.removedNodes.length > 0) {
+            for (const node of mutation.removedNodes) {
+              if (node.nodeType === 1) {
+                if (
+                  node.classList.contains("cn-body") ||
+                  node.classList.contains("cookie-modal")
+                ) {
+                  window.removeEventListener("keydown", handleKeydown);
+                }
+              }
+            }
+          }
+        } else if (mutation.attributeName === "style") {
+          if (
+            window.getComputedStyle(klaro).getPropertyValue("display") === "none"
+          ) {
+            window.removeEventListener("keydown", handleKeydown);
+          }
+        }
+      }
+    };
+    const observer = new MutationObserver(callback);
+    observer.observe(klaro, config);
+  }
+  window.addEventListener("load", () => {
+    klaroOnload();
+  });
+  window.addEventListener("load", () => {
+    // If no mobile menu containers are present, skip it all togehter
+    if (
+      !document.getElementById("mobileMenuWrapper") ||
+      !document.getElementById("mobileMenuList") ||
+      !document.getElementById("mobileMenuContent") ||
+      !document.getElementById("nav-icon")
+    ) {
+      return;
+    }
+    var mainMenu = document.getElementById("mainMenu"); // Get main menu
+    var megaMenu = document.getElementById("megaMenu"); // Get mega menu
+    var secondaryMenu = document.querySelector(".secondaryMenu"); // Get secondary menu
+    if (!mainMenu && !megaMenu && !secondaryMenu) {
+      document.getElementById("mobileMenuWrapper").style.display = "none"; // Hide mobile menu wrapper/container if there is no menus
+    }
+    if (mainMenu) {
+      // For main menu items, copy a link if it exists, otherwise copy the link content
+      createMobileMenuItems(mainMenu.querySelectorAll("li"), true);
+    } else if (megaMenu) {
+      // For mega menu items, copy only the the first alinks
+      createMobileMenuItems(megaMenu.querySelectorAll("li"), false);
+    }
+    if (secondaryMenu) {
+      createMobileMenuItemsForSecondaryMenu(
+        secondaryMenu.querySelectorAll("li a"),
+      );
+    }
+    function createMobileMenuItems(menuItems, includeInline) {
+      for (var i = 0; i < menuItems.length; i++) {
+        var linkToCopy = menuItems[i].querySelector("a");
+        if (linkToCopy || includeInline) {
+          var listItem = document.createElement("li");
+          listItem.className =
+            menuItems[i].className !== "" ? menuItems[i].className : "nav-item";
+          if (linkToCopy) {
+            var link = document.createElement("a");
+            link.href = linkToCopy.href;
+            link.text = linkToCopy.text;
+            link.className = linkToCopy.className;
+            listItem.appendChild(link);
+          } else if (includeInline) {
+            listItem.innerHTML = menuItems[i].innerHTML;
+          }
+          document.getElementById("mobileMenuList").appendChild(listItem);
+        }
+      }
+    }
+    function createMobileMenuItemsForSecondaryMenu(menuItems) {
+      var secondaryMenuWrapper = document.createElement("li");
+      secondaryMenuWrapper.className = "secondaryMenuWrap";
+      var secondaryMenuContainer = document.createElement("ul");
+      secondaryMenuContainer.className = "secondaryMenuContainer";
+      for (var i = 0; i < menuItems.length; i++) {
+        var link = document.createElement("a");
+        link.className = "secondaryMenu";
+        link.href = menuItems[i].href;
+        link.text = menuItems[i].text;
+        if (menuItems[i].hreflang) {
+          link.hreflang = menuItems[i].hreflang;
+        }
+        var secondaryMenuListItem = document.createElement("li");
+        secondaryMenuListItem.className = "item nav-item secondaryItem";
+        secondaryMenuListItem.appendChild(link);
+        secondaryMenuContainer.appendChild(secondaryMenuListItem);
+      }
+      secondaryMenuWrapper.appendChild(secondaryMenuContainer);
+      document.getElementById("mobileMenuList").appendChild(secondaryMenuWrapper);
+    } // Mega menu icon toggler.
+    document.getElementById("nav-icon").onclick = function _onclick() {
+      if (document.body.style.overflow !== "hidden") {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "initial";
+      }
+      document.getElementById("mobileMenuContent").classList.toggle("show");
+      this.classList.toggle("open");
+    };
+  });
+  function stickyMainMenu() {
+    if (!document.querySelector("#mainMenu ul.nav.nav-list")) return;
+    function isInViewport(element) {
+      if (!element) return false;
+      const rect = element.getBoundingClientRect();
+      return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <=
+          (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+      );
+    }
+    if (
+      isInViewport(
+        document.querySelector("#mainMenu ul.nav.nav-list:last-of-type")
+          ?.lastElementChild,
+      )
+    ) {
+      document.querySelector("#mainMenu").classList.add("sticky-menu");
+    } else {
+      document.querySelector("#mainMenu").classList.remove("sticky-menu");
+    }
+  }
+  window.addEventListener("load", stickyMainMenu);
+  window.addEventListener("resize", stickyMainMenu);
+
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kth/style",
-  "version": "1.14.2",
+  "version": "1.15.0-alpha.1",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "./dist/cjs/types/index.d.ts",
@@ -10,6 +10,8 @@
       "require": "./dist/cjs/index.js"
     },
     "./scss/*": "./scss/*",
+    "./consent/*": "./dist/consent/*",
+    "./icons/*": "./dist/icons/*",
     "./assets/*": "./assets/*",
     "./package.json": "./package.json"
   },

package/scss/components/backtotop.scss

@@ -0,0 +1,24 @@
+#back-to-top {
+  width: 50px;
+  height: 50px;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+  z-index: 11;
+  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iYSIKICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQyIDQyIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI0MiIgaGVpZ2h0PSI0MiIgcng9IjIwLjk3IiByeT0iMjAuOTciIHN0eWxlPSJmaWxsOiNmY2ZjZmM7Ii8+CiAgICA8cGF0aCBkPSJNMjIuNSwzMC4wMWgtM3YtMTIuMDFsLTUuMjUsNS4yNS0yLjEzLTIuMTMsOC44OC04Ljg4LDguODgsOC44OC0yLjEzLDIuMTMtNS4yNS01LjI1djEyLjAxbS0xLjUtMjQuMDFjOC4yOSwwLDE1LDYuNzIsMTUsMTVzLTYuNzIsMTUtMTUsMTUtMTUtNi43Mi0xNS0xNVMxMi43Miw2LDIxLDZtMCwzYy02LjYzLDAtMTIuMDEsNS4zOC0xMi4wMSwxMi4wMXM1LjM4LDEyLjAxLDEyLjAxLDEyLjAxLDEyLjAxLTUuMzgsMTIuMDEtMTIuMDEtNS4zOC0xMi4wMS0xMi4wMS0xMi4wMVoiIHN0eWxlPSJmaWxsOiMwMDQ3OTE7Ii8+Cjwvc3ZnPg==")
+    100% 100% no-repeat transparent;
+  background-size: 50px 50px;
+  text-indent: -10000px;
+  cursor: pointer;
+  outline: none;
+  visibility: hidden;
+  opacity: 0.1;
+  transition:
+    visibility 0.4s,
+    opacity 0.4s linear;
+
+  &.show {
+    visibility: visible;
+    opacity: 1;
+  }
+}

package/scss/components/commonStyle.scss

@@ -0,0 +1,91 @@
+// This file have been moved from soon to be deprecated kth-style
+
+// To override personal menu top margin in print.
+html {
+  body {
+    @media print {
+      margin-top: 0 !important;
+    }
+  }
+}
+
+body {
+  .container {
+    &.withMainMenu {
+      > .row {
+        width: 100%;
+        padding: 0;
+        margin: 0;
+
+        &:first-of-type {
+          flex-flow: row-reverse nowrap;
+        }
+      }
+    }
+
+    &.main {
+      margin: 0 auto;
+
+      @media (width >= 1258px) {
+        max-width: 1228px;
+        margin: 0 auto;
+      }
+    }
+  }
+}
+
+.lead {
+  margin: 0 0 22px;
+}
+
+/* stylelint-disable selector-class-pattern, no-descending-specificity */
+.paragraphs {
+  p:not(.calendar) {
+    // @include t12(false);
+    margin: 0 0 27px;
+    max-width: 730px;
+  }
+}
+
+p {
+  &.AlignLeft {
+    text-align: left;
+  }
+
+  &.AlignCenter {
+    text-align: center;
+  }
+
+  &.AlignRight {
+    text-align: right;
+  }
+
+  &.AlignJustify {
+    text-align: justify;
+  }
+}
+/* stylelint-enable selector-class-pattern, no-descending-specificity */
+
+a {
+  &.skipToMainContent {
+    left: -999px;
+    position: absolute;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    z-index: -999;
+
+    &:focus,
+    &:active {
+      left: 0;
+      top: 0;
+      width: auto;
+      height: auto;
+      overflow: auto;
+      padding: 5px;
+      font-size: 1rem;
+      z-index: 99999;
+    }
+  }
+}