@forsakringskassan/devindex-menu 1.0.0

package/README.md

@@ -0,0 +1,162 @@
+# @forsakringskassan/devindex-menu
+
+> npm install --save-dev @forsakringskassan/devindex-menu
+
+Menu for development mode that can be used with advantage together with [fapimock-express](https://www.npmjs.com/package/@forsakringskassan/apimock-express).
+
+## Usage
+
+The menu can be used in several types of applications. If you're using vue-cli, it can be used as follows:
+
+```js
+require("@forsakringskassan/devindex-menu")([
+    {
+        key: "slow-load",
+        title: "Delay",
+        reloadOnChange: true,
+        execOnChange: "aGlobalMethod",
+        options: [
+            { title: "Normal loading", value: false },
+            { title: "Slow loading", value: true },
+        ],
+    },
+]);
+```
+
+When execOnChange is set to a value, the global function with this name will be called on onChange of the dropdown list.
+
+## API
+
+```js
+[
+    {
+        key: String,
+        title: String,
+        type: String (optional, default, "select")
+        description: String (optional),
+        reloadOnChange: Boolean (optional, default: true),
+        sessionStorage: Boolean (optional, default: false),
+        execOnChange: String (optional),
+        options: [], Array (see types below)
+    },
+]
+```
+
+## Use mocks directly
+
+It's also possible to use mocks for `@forsakringskassan/apimock-express` directly.
+In the types `MockMatcher` and `Mock` from `apimock-express` there is support for metadata that is read by the devindex-menu.
+
+When defining the mock, add `meta.title` and `responses[i].response.label`.
+These correspond to the dropdown label and the name of each option respectively.
+
+```diff
+ export default defineMock({
++    meta: {
++        title: "GET /dog",
++    },
+     responses: [
+         createResponseByCookie(
+             cookie,
+             "border-collie-200",
+             {
++                label: "Border collie (200)",
+                 body: dogBorderCollie,
+             },
+         ),
+     ],
+     defaultResponse: {
++        label: "Default – dachshund (200)",
+         status: 200,
+         body: dogDachshund,
+     },
+ );
+```
+
+Inside the application, the mock is then sent directly to `devindexMenu`.
+
+```diff
+ import devindexMenu from "@forsakringskassan/devindex-menu";
++import getDogMock from "dog-api/dist/api/private/v1/dog_get.js";
+
+ devindexMenu([
+     {
+         key: "api-post-leash",
+         title: "POST /leash",
+         options: [{
+             title: "Tracking leash (200)",
+             value: "tracking-leash-200"
+         }],
+     },
++    getDogMock,
+ ]);
+```
+
+### Type Definitions
+
+#### select (default)
+
+```json
+{ title: String, value: String },
+```
+
+#### Links
+
+```json
+{ title: String, href: String },
+
+```
+
+#### SessionStorage - Pre-filling
+
+If you specify `sessionStorage` as `true`, the value will be saved under `key` in `sessionStorage`.
+
+In the example below, you'll get a `select` with the title `Pre-filling`. If you make a selection, `sessionStorage` will get a value `fk-dog-model`.
+
+```js
+import coco from "./tests/mock/prefilled/coco.json";
+import fido from "./tests/mock/prefilled/fido.json";
+
+require("@forsakringskassan/devindex-menu")([
+    {
+        key: "fk-dog-model",
+        title: "Pre-filling",
+        sessionStorage: true,
+        options: [
+            { title: "None", value: "" },
+            { title: "Coco", value: coco },
+            { title: "Fido", value: fido },
+        ],
+    },
+]);
+```
+
+## Examples
+
+```js
+require("@forsakringskassan/devindex-menu")([
+    {
+        key: "disable-translate",
+        title: "Text",
+        options: [
+            { title: "Translated text", value: "default" },
+            { title: "Show text keys", value: "true" },
+        ],
+    },
+    {
+        type: "links",
+        title: "Links",
+        options: [
+            {
+                title: "Applicant reviews application for additional cost",
+                href: "/#/review/8",
+            },
+        ],
+    },
+]);
+```
+
+## Development
+
+To compile styling:
+`npm run build`

package/dist/Devindex.pageobject.d.ts

@@ -0,0 +1,7 @@
+export declare class DevindexPageObject {
+    selector: string;
+    el: () => Cypress.Chainable<JQuery>;
+    constructor();
+    toggleMenu(): void;
+    valj(id: string, value: string): void;
+}

package/dist/cjs/menu.js

@@ -0,0 +1,214 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/menu.js
+var menu_exports = {};
+__export(menu_exports, {
+  default: () => menu_default
+});
+module.exports = __toCommonJS(menu_exports);
+
+// raw-loader:./client.js?raw
+var client_default = '/**\n * @param {string} cookieName\n * @param {string} cookieValue\n * @param {number} exdays\n * @returns {void}\n */\nfunction setCookie(cookieName, cookieValue, exdays) {\n  var d = new Date();\n  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);\n  var expires = "expires=".concat(d.toUTCString());\n  document.cookie = "".concat(cookieName, "=").concat(cookieValue, ";").concat(expires, ";path=/");\n}\n\n/**\n * @param {string} cookieName\n * @returns {string | undefined}\n */\nfunction getCookie(cookieName) {\n  var name = "".concat(cookieName, "=");\n  var decodedCookie = decodeURIComponent(document.cookie);\n  var ca = decodedCookie.split(";");\n  for (var i = 0; i < ca.length; i++) {\n    var c = ca[i];\n    while (c.charAt(0) === " ") {\n      c = c.substring(1);\n    }\n    if (c.indexOf(name) === 0) {\n      return c.substring(name.length, c.length);\n    }\n  }\n  return undefined;\n}\n(function () {\n  /** @type {NodeListOf<HTMLSelectElement>} */\n  var selections = document.querySelectorAll(".secret-menu select");\n  for (var i = 0; i < selections.length; i++) {\n    var select = selections[i];\n    select.value = getCookie(select.name) ? getCookie(select.name) : "default";\n    if (select.getAttribute("data-sessionStorage") === "true") {\n      var cookieValue = getCookie(select.name);\n      if (cookieValue) {\n        sessionStorage.setItem(select.name, atob(cookieValue));\n      }\n    }\n    select.onchange = function (event) {\n      var element = event.target;\n      setCookie(element.name, element.value, 30);\n      if (element.getAttribute("data-exec-on-change")) {\n        window[element.getAttribute("data-exec-on-change")]();\n      }\n      if (element.getAttribute("data-reload") === "true") {\n        location.reload(true);\n      }\n      if (element.getAttribute("data-sessionStorage") === "true") {\n        var sessionKey = element.id;\n        if (element.value) {\n          var value = atob(element.value);\n          console.log("Laddar sessionstorage ".concat(sessionKey, " med \\n ").concat(value));\n          sessionStorage.setItem(sessionKey, value);\n        } else {\n          console.log("T\\xF6mmer sessionstorage");\n          sessionStorage.removeItem(sessionKey);\n        }\n        location.reload(true);\n      }\n    };\n  }\n  var inputFields = document.querySelectorAll(".secret-menu input");\n  for (var _i = 0; _i < inputFields.length; _i++) {\n    var input = inputFields[_i];\n    input.value = getCookie(input.name) ? getCookie(input.name) : "";\n    input.oninput = function (event) {\n      var element = event.target;\n      setCookie(element.name, element.value, 30);\n    };\n  }\n\n  /* Forcerar att sidan laddas om, \xE4ven n\xE4r l\xE4nken \xE4r av typen: /#/granska/8 */\n  /** @type {NodeListOf<HTMLAnchorElement>} */\n  var links = document.querySelectorAll(".secret-menu ul li a");\n  for (var _i2 = 0; _i2 < links.length; _i2++) {\n    var link = links[_i2];\n    if (link.getAttribute("href").startsWith("/#")) {\n      /**\n       * @param {MouseEvent} event\n       */\n      link.onclick = function (event) {\n        event.preventDefault();\n        window.location.href = event.target.getAttribute("href");\n        setTimeout(function () {\n          console.log("Reload after click on hash-link.");\n          location.reload();\n        }, "500");\n      };\n    }\n  }\n})();\nfunction toggleMenu() {\n  var menu = document.querySelector(".secret-menu");\n  menu.classList.toggle("open");\n}\nwindow.toggleMenu = toggleMenu;';
+
+// src/style.scss
+var style_default = `.secret-menu {
+  min-height: 100%;
+  background-color: #333;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  z-index: 9999;
+  color: #efefef;
+  position: fixed;
+}
+.secret-menu .toggle {
+  border: 0;
+  position: fixed;
+  top: 20px;
+  left: 0px;
+  color: #fff;
+  background-color: #333;
+  border-radius: 0;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  font-weight: bold;
+  z-index: 9999;
+  margin: 0;
+  padding: 10px;
+  box-shadow: none;
+  min-width: 40px;
+}
+.secret-menu .toggle span {
+  width: 20px;
+  height: 3px;
+  background-color: white;
+  margin: 3px 0;
+  display: block;
+}
+.secret-menu .menu {
+  width: 100%;
+  overflow: hidden;
+}
+.secret-menu.open {
+  width: 300px;
+  overflow: auto;
+}
+.secret-menu.open .toggle {
+  left: 300px;
+}
+.secret-menu.open .menu {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.secret-menu label {
+  margin-bottom: 0.25rem;
+}
+.secret-menu label,
+.secret-menu a {
+  color: #efefef;
+  display: block;
+}
+.secret-menu a:hover {
+  text-decoration: underline;
+}
+.secret-menu .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.secret-menu select {
+  color: #000;
+  margin-bottom: 1rem;
+  width: 100%;
+  height: 2.25rem;
+  font-size: 0.875rem;
+}
+.secret-menu input {
+  color: #000;
+  margin-bottom: 1rem;
+  width: 100%;
+}`;
+
+// src/menu.js
+function generateOptionMarkupForSelect(setting) {
+  const reload = setting.reloadOnChange !== void 0 ? setting.reloadOnChange : true;
+  const description = setting.description ? `<p>${setting.description}</p>` : "";
+  const execOnChange = setting.execOnChange ? ` data-exec-on-change="${setting.execOnChange}"` : "";
+  let markup = `<label for="${setting.key}" class="label">${setting.title}</label>${description}<select id="${setting.key}" data-sessionStorage="${setting.sessionStorage}" data-reload="${reload}" ${execOnChange} name="${setting.key}" tabindex="-1">`;
+  setting.options.forEach((option) => {
+    const stateJson = typeof option.value === "string" ? option.value : JSON.stringify(option.value, null, 2);
+    const optionValue = setting.sessionStorage ? btoa(stateJson) : option.value;
+    markup += `<option value="${optionValue}">${option.title}</option>`;
+  });
+  markup = `${markup}</select>`;
+  return markup;
+}
+function generateOptionMarkupForLink(setting) {
+  const description = setting.description ? `<p>${setting.description}</p>` : "";
+  let markup = `${setting.title} ${description}<ul>`;
+  setting.options.forEach((option) => {
+    markup += `<li><a href="${option.href}">${option.title}</a></li>`;
+  });
+  markup = `${markup}</ul>`;
+  return markup;
+}
+function generateOptionMarkupForTextInput(setting) {
+  const description = setting.description ? `<p>${setting.description}</p>` : "";
+  return `${setting.title} ${description} <br /> <input name="${setting.key}"  type="text"></input>`;
+}
+function generateOptionMarkup(setting) {
+  switch (setting.type) {
+    case "select":
+      return generateOptionMarkupForSelect(setting);
+    case "links":
+      return generateOptionMarkupForLink(setting);
+    case "text":
+      return generateOptionMarkupForTextInput(setting);
+  }
+  return "";
+}
+function isMock(userSettingsOrMock) {
+  return "responses" in userSettingsOrMock || "defaultResponse" in userSettingsOrMock;
+}
+function getFirstCookie(matcher) {
+  const entries = Object.entries(matcher.request.cookies);
+  const [key, value] = entries[0];
+  return { key, value };
+}
+function entryFromMock(mock) {
+  const { key } = getFirstCookie(mock.responses[0]);
+  const title = mock.meta.title ?? key;
+  const defaultEntry = {
+    title: mock.defaultResponse?.label ?? "Default",
+    value: "default"
+  };
+  return {
+    type: "select",
+    key,
+    title,
+    options: [
+      defaultEntry,
+      ...mock.responses.map((entry) => {
+        const { value } = getFirstCookie(entry);
+        return {
+          title: entry.response.label ?? value,
+          value
+        };
+      })
+    ]
+  };
+}
+var defaultSetting = {
+  type: "select"
+};
+var menu_default = (userSettingsAndMocks) => {
+  let settingsMarkup = "";
+  userSettingsAndMocks.map(
+    (userSettingOrMock) => isMock(userSettingOrMock) ? entryFromMock(userSettingOrMock) : userSettingOrMock
+  ).forEach((userSetting) => {
+    const setting = { ...defaultSetting, ...userSetting };
+    settingsMarkup = settingsMarkup + generateOptionMarkup(setting);
+  });
+  document.head.insertAdjacentHTML("beforeend", `<style>${style_default}</style>`);
+  document.body.insertAdjacentHTML(
+    "beforeend",
+    `
+    <div class="secret-menu" aria-hidden="true">
+        <button type="button" class="toggle" onclick="toggleMenu()">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span class="sr-only">Hemlig meny</span>
+        </button>
+        <div class="menu">
+            ${settingsMarkup}
+        </div>
+    </div>`
+  );
+  const script = document.createElement("script");
+  script.innerText = client_default;
+  document.body.appendChild(script);
+};

package/dist/cjs/pageobjects/pageobjects.js

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pageobjects/pageobjects.ts
+var pageobjects_exports = {};
+__export(pageobjects_exports, {
+  DevindexPageObject: () => DevindexPageObject
+});
+module.exports = __toCommonJS(pageobjects_exports);
+
+// src/pageobjects/Devindex.pageobject.ts
+var DevindexPageObject = class {
+  constructor() {
+    this.selector = ".secret-menu";
+    this.el = () => cy.get(this.selector);
+  }
+  toggleMenu() {
+    cy.get(".secret-menu > button").click();
+  }
+  valj(id, value) {
+    cy.get(`#${id}`).select(value);
+  }
+};

package/dist/esm/menu.js

@@ -0,0 +1,191 @@
+// raw-loader:./client.js?raw
+var client_default = '/**\n * @param {string} cookieName\n * @param {string} cookieValue\n * @param {number} exdays\n * @returns {void}\n */\nfunction setCookie(cookieName, cookieValue, exdays) {\n  var d = new Date();\n  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);\n  var expires = "expires=".concat(d.toUTCString());\n  document.cookie = "".concat(cookieName, "=").concat(cookieValue, ";").concat(expires, ";path=/");\n}\n\n/**\n * @param {string} cookieName\n * @returns {string | undefined}\n */\nfunction getCookie(cookieName) {\n  var name = "".concat(cookieName, "=");\n  var decodedCookie = decodeURIComponent(document.cookie);\n  var ca = decodedCookie.split(";");\n  for (var i = 0; i < ca.length; i++) {\n    var c = ca[i];\n    while (c.charAt(0) === " ") {\n      c = c.substring(1);\n    }\n    if (c.indexOf(name) === 0) {\n      return c.substring(name.length, c.length);\n    }\n  }\n  return undefined;\n}\n(function () {\n  /** @type {NodeListOf<HTMLSelectElement>} */\n  var selections = document.querySelectorAll(".secret-menu select");\n  for (var i = 0; i < selections.length; i++) {\n    var select = selections[i];\n    select.value = getCookie(select.name) ? getCookie(select.name) : "default";\n    if (select.getAttribute("data-sessionStorage") === "true") {\n      var cookieValue = getCookie(select.name);\n      if (cookieValue) {\n        sessionStorage.setItem(select.name, atob(cookieValue));\n      }\n    }\n    select.onchange = function (event) {\n      var element = event.target;\n      setCookie(element.name, element.value, 30);\n      if (element.getAttribute("data-exec-on-change")) {\n        window[element.getAttribute("data-exec-on-change")]();\n      }\n      if (element.getAttribute("data-reload") === "true") {\n        location.reload(true);\n      }\n      if (element.getAttribute("data-sessionStorage") === "true") {\n        var sessionKey = element.id;\n        if (element.value) {\n          var value = atob(element.value);\n          console.log("Laddar sessionstorage ".concat(sessionKey, " med \\n ").concat(value));\n          sessionStorage.setItem(sessionKey, value);\n        } else {\n          console.log("T\\xF6mmer sessionstorage");\n          sessionStorage.removeItem(sessionKey);\n        }\n        location.reload(true);\n      }\n    };\n  }\n  var inputFields = document.querySelectorAll(".secret-menu input");\n  for (var _i = 0; _i < inputFields.length; _i++) {\n    var input = inputFields[_i];\n    input.value = getCookie(input.name) ? getCookie(input.name) : "";\n    input.oninput = function (event) {\n      var element = event.target;\n      setCookie(element.name, element.value, 30);\n    };\n  }\n\n  /* Forcerar att sidan laddas om, \xE4ven n\xE4r l\xE4nken \xE4r av typen: /#/granska/8 */\n  /** @type {NodeListOf<HTMLAnchorElement>} */\n  var links = document.querySelectorAll(".secret-menu ul li a");\n  for (var _i2 = 0; _i2 < links.length; _i2++) {\n    var link = links[_i2];\n    if (link.getAttribute("href").startsWith("/#")) {\n      /**\n       * @param {MouseEvent} event\n       */\n      link.onclick = function (event) {\n        event.preventDefault();\n        window.location.href = event.target.getAttribute("href");\n        setTimeout(function () {\n          console.log("Reload after click on hash-link.");\n          location.reload();\n        }, "500");\n      };\n    }\n  }\n})();\nfunction toggleMenu() {\n  var menu = document.querySelector(".secret-menu");\n  menu.classList.toggle("open");\n}\nwindow.toggleMenu = toggleMenu;';
+
+// src/style.scss
+var style_default = `.secret-menu {
+  min-height: 100%;
+  background-color: #333;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  z-index: 9999;
+  color: #efefef;
+  position: fixed;
+}
+.secret-menu .toggle {
+  border: 0;
+  position: fixed;
+  top: 20px;
+  left: 0px;
+  color: #fff;
+  background-color: #333;
+  border-radius: 0;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+  font-weight: bold;
+  z-index: 9999;
+  margin: 0;
+  padding: 10px;
+  box-shadow: none;
+  min-width: 40px;
+}
+.secret-menu .toggle span {
+  width: 20px;
+  height: 3px;
+  background-color: white;
+  margin: 3px 0;
+  display: block;
+}
+.secret-menu .menu {
+  width: 100%;
+  overflow: hidden;
+}
+.secret-menu.open {
+  width: 300px;
+  overflow: auto;
+}
+.secret-menu.open .toggle {
+  left: 300px;
+}
+.secret-menu.open .menu {
+  padding: 20px;
+  box-sizing: border-box;
+}
+.secret-menu label {
+  margin-bottom: 0.25rem;
+}
+.secret-menu label,
+.secret-menu a {
+  color: #efefef;
+  display: block;
+}
+.secret-menu a:hover {
+  text-decoration: underline;
+}
+.secret-menu .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.secret-menu select {
+  color: #000;
+  margin-bottom: 1rem;
+  width: 100%;
+  height: 2.25rem;
+  font-size: 0.875rem;
+}
+.secret-menu input {
+  color: #000;
+  margin-bottom: 1rem;
+  width: 100%;
+}`;
+
+// src/menu.js
+function generateOptionMarkupForSelect(setting) {
+  const reload = setting.reloadOnChange !== void 0 ? setting.reloadOnChange : true;
+  const description = setting.description ? `<p>${setting.description}</p>` : "";
+  const execOnChange = setting.execOnChange ? ` data-exec-on-change="${setting.execOnChange}"` : "";
+  let markup = `<label for="${setting.key}" class="label">${setting.title}</label>${description}<select id="${setting.key}" data-sessionStorage="${setting.sessionStorage}" data-reload="${reload}" ${execOnChange} name="${setting.key}" tabindex="-1">`;
+  setting.options.forEach((option) => {
+    const stateJson = typeof option.value === "string" ? option.value : JSON.stringify(option.value, null, 2);
+    const optionValue = setting.sessionStorage ? btoa(stateJson) : option.value;
+    markup += `<option value="${optionValue}">${option.title}</option>`;
+  });
+  markup = `${markup}</select>`;
+  return markup;
+}
+function generateOptionMarkupForLink(setting) {
+  const description = setting.description ? `<p>${setting.description}</p>` : "";
+  let markup = `${setting.title} ${description}<ul>`;
+  setting.options.forEach((option) => {
+    markup += `<li><a href="${option.href}">${option.title}</a></li>`;
+  });
+  markup = `${markup}</ul>`;
+  return markup;
+}
+function generateOptionMarkupForTextInput(setting) {
+  const description = setting.description ? `<p>${setting.description}</p>` : "";
+  return `${setting.title} ${description} <br /> <input name="${setting.key}"  type="text"></input>`;
+}
+function generateOptionMarkup(setting) {
+  switch (setting.type) {
+    case "select":
+      return generateOptionMarkupForSelect(setting);
+    case "links":
+      return generateOptionMarkupForLink(setting);
+    case "text":
+      return generateOptionMarkupForTextInput(setting);
+  }
+  return "";
+}
+function isMock(userSettingsOrMock) {
+  return "responses" in userSettingsOrMock || "defaultResponse" in userSettingsOrMock;
+}
+function getFirstCookie(matcher) {
+  const entries = Object.entries(matcher.request.cookies);
+  const [key, value] = entries[0];
+  return { key, value };
+}
+function entryFromMock(mock) {
+  const { key } = getFirstCookie(mock.responses[0]);
+  const title = mock.meta.title ?? key;
+  const defaultEntry = {
+    title: mock.defaultResponse?.label ?? "Default",
+    value: "default"
+  };
+  return {
+    type: "select",
+    key,
+    title,
+    options: [
+      defaultEntry,
+      ...mock.responses.map((entry) => {
+        const { value } = getFirstCookie(entry);
+        return {
+          title: entry.response.label ?? value,
+          value
+        };
+      })
+    ]
+  };
+}
+var defaultSetting = {
+  type: "select"
+};
+var menu_default = (userSettingsAndMocks) => {
+  let settingsMarkup = "";
+  userSettingsAndMocks.map(
+    (userSettingOrMock) => isMock(userSettingOrMock) ? entryFromMock(userSettingOrMock) : userSettingOrMock
+  ).forEach((userSetting) => {
+    const setting = { ...defaultSetting, ...userSetting };
+    settingsMarkup = settingsMarkup + generateOptionMarkup(setting);
+  });
+  document.head.insertAdjacentHTML("beforeend", `<style>${style_default}</style>`);
+  document.body.insertAdjacentHTML(
+    "beforeend",
+    `
+    <div class="secret-menu" aria-hidden="true">
+        <button type="button" class="toggle" onclick="toggleMenu()">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span class="sr-only">Hemlig meny</span>
+        </button>
+        <div class="menu">
+            ${settingsMarkup}
+        </div>
+    </div>`
+  );
+  const script = document.createElement("script");
+  script.innerText = client_default;
+  document.body.appendChild(script);
+};
+export {
+  menu_default as default
+};

package/dist/esm/pageobjects/pageobjects.js

@@ -0,0 +1,16 @@
+// src/pageobjects/Devindex.pageobject.ts
+var DevindexPageObject = class {
+  constructor() {
+    this.selector = ".secret-menu";
+    this.el = () => cy.get(this.selector);
+  }
+  toggleMenu() {
+    cy.get(".secret-menu > button").click();
+  }
+  valj(id, value) {
+    cy.get(`#${id}`).select(value);
+  }
+};
+export {
+  DevindexPageObject
+};

package/dist/pageobjects.d.ts

@@ -0,0 +1 @@
+export * from "./Devindex.pageobject";

package/menu.d.ts

@@ -0,0 +1,35 @@
+import { type Mock } from "@forsakringskassan/apimock-express";
+
+export interface SelectOption {
+    title: string;
+    value: unknown;
+}
+
+export interface SelectSettings {
+    type?: "select";
+    key: string;
+    title: string;
+    reloadOnChange?: boolean;
+    execOnChange?: string;
+    description?: string;
+    sessionStorage?: boolean;
+    options: SelectOption[];
+}
+
+export interface LinkOption {
+    title: string;
+    href: string;
+}
+
+export interface LinkSettings {
+    type: "links";
+    title: string;
+    description?: string;
+    options: LinkOption[];
+}
+
+export type Settings = SelectSettings | LinkSettings;
+
+export default function devindexMenu(
+    userSettingsAndMocks: Array<Settings | Mock>,
+): void;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@forsakringskassan/devindex-menu",
+  "version": "1.0.0",
+  "description": "",
+  "license": "ISC",
+  "author": "FK",
+  "exports": {
+    ".": {
+      "types": "./menu.d.ts",
+      "require": "./dist/cjs/menu.js",
+      "import": "./dist/esm/menu.js"
+    },
+    "./pageobjects": {
+      "types": "./pageobjects.d.ts",
+      "require": "./dist/cjs/pageobjects/pageobjects.js",
+      "import": "./dist/esm/pageobjects/pageobjects.js"
+    }
+  },
+  "main": "dist/cjs/menu.js",
+  "module": "dist/esm/menu.js",
+  "types": "./menu.d.ts",
+  "files": [
+    "dist",
+    "pageobjects",
+    "./pageobjects.d.ts",
+    "./pageobjects.js",
+    "./menu.d.ts"
+  ],
+  "scripts": {
+    "prebuild": "rimraf dist && tsc",
+    "build": "node generate.mjs",
+    "eslint": "eslint --cache .",
+    "prettier:check": "prettier --check .",
+    "prettier:write": "prettier --write .",
+    "test": "npm run prettier:check && npm run eslint"
+  },
+  "commitlint": {
+    "extends": "@forsakringskassan/commitlint-config/no-jira"
+  },
+  "prettier": "@forsakringskassan/prettier-config",
+  "release": {
+    "extends": "@forsakringskassan/semantic-release-config"
+  },
+  "devDependencies": {
+    "@babel/core": "7.28.4",
+    "@babel/preset-env": "7.28.3",
+    "@forsakringskassan/apimock-express": "2.9.0",
+    "@forsakringskassan/commitlint-config": "3.1.2",
+    "@forsakringskassan/eslint-config": "13.1.0",
+    "@forsakringskassan/eslint-config-cli": "13.1.0",
+    "@forsakringskassan/eslint-config-cypress": "13.1.0",
+    "@forsakringskassan/eslint-config-jest": "13.1.0",
+    "@forsakringskassan/eslint-config-typescript": "13.1.0",
+    "@forsakringskassan/eslint-config-typescript-typeinfo": "13.1.0",
+    "@forsakringskassan/prettier-config": "3.1.7",
+    "@tsconfig/node16": "16.1.5",
+    "@types/node": "16.18.126",
+    "cypress": "15.4.0",
+    "esbuild": "0.25.10",
+    "esbuild-sass-plugin": "3.3.1",
+    "rimraf": "6.0.1",
+    "sass": "1.93.2",
+    "typescript": "5.9.3"
+  },
+  "engines": {
+    "node": ">= 16"
+  }
+}

package/pageobjects.d.ts

@@ -0,0 +1 @@
+export * from "./dist/pageobjects";