blue-web 1.12.0 → 1.14.0

package/README.md

@@ -24,14 +24,25 @@ import "blue-web/dist/js/progress.js"
 // ...
 ```
 
+**Important:** Since 1.14.0 JavaScript files are compiled as ES modules. When you embed them in HTML using the `<script>` don't forget the `type="module"` attribute.
+
 You can also use a CDN like unpkg.com. Only recommended for testing, not for production.
 
 ```html
-<script src="https://unpkg.com/blue-web@latest/dist/js/dialog.js"></script>
-<script src="https://unpkg.com/blue-web@latest/dist/js/progress.js"></script>
+<script type="module" src="https://unpkg.com/blue-web@latest/dist/js/dialog.js"></script>
+<script type="module" src="https://unpkg.com/blue-web@latest/dist/js/progress.js"></script>
 <!-- ... -->
 ```
 
+JavaScript files are compiled as ES modules. This allows you to use import functions like this:
+
+```html
+<script type="module">
+    import { tell } from "https://unpkg.com/blue-web@latest/dist/js/dialog.js"
+    tell("You are awesome!")
+</script>
+```
+
 ## Customization and theming
 
 Since Blue Web is based on Bootstrap, you can customize many things by overriding Sass or CSS variables. For more information, see the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/overview/). Blue Web also provides some additional variables that you can use and override. Take a look at [dist/styles/\_variables.scss](https://github.com/bruegmann/blue-web/blob/main/dist/styles/_variables.scss) to see all of them.
@@ -42,8 +53,9 @@ Here is an example of how to override variables using Sass:
 // Override Bootstrap Sass variable
 $primary: tomato;
 
-// Override Blue Web Sass variable
+// Override Blue Web Sass variables
 $theme: orange;
+$theme-dark: darken(orange, 10%);
 
 // Stylesheet for Blue Web. Already contains Bootstrap.
 @import "~blue-web/dist/style";

package/dist/js/actions.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.actions={init:function(e){let i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;function n(){for(const e of i.children)e.style.display="none";for(const e of t.children)e.style.display="",e.classList.add("BLUE-actions-collapse-visible");let n=0;for(const s of i.children){if(s.style.display="",t.children[n].style.display="none",t.children[n].classList.remove("BLUE-actions-collapse-visible"),e.scrollWidth>e.clientWidth){s.style.display="none",t.children[n].style.display="",t.children[n].classList.add("BLUE-actions-collapse-visible");break}n++}}i||(i=e.querySelector(".BLUE-actions-menu")),t||(t=e.querySelector(".BLUE-actions-collapse-menu")),n();const s=new ResizeObserver((()=>{requestAnimationFrame(n)}));s.observe(e);const l=i=>{if(!e)return;const t=e.querySelectorAll("details[open]");!t||t.length<=0||t.forEach((e=>{e.contains(i.target)||e.removeAttribute("open")}))};return document.addEventListener("click",l),{updateActions:n,resizeObserver:s,destroy(){s.disconnect(),document.removeEventListener("click",l)}}}}})();

package/dist/js/actions.d.ts

@@ -0,0 +1,5 @@
+export declare function init(actionsElement: HTMLElement, menu?: HTMLElement | undefined, collapseMenu?: HTMLElement | undefined): {
+    updateActions: () => void;
+    resizeObserver: ResizeObserver;
+    destroy(): void;
+};

package/dist/js/actions.js

@@ -0,0 +1,61 @@
+export function init(actionsElement) {
+  let menu = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
+  let collapseMenu = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
+  if (!menu) menu = actionsElement.querySelector(".BLUE-actions-menu");
+  if (!collapseMenu) collapseMenu = actionsElement.querySelector(".BLUE-actions-collapse-menu");
+  function updateActions() {
+    // reset
+    for (const item of menu.children) {
+      ;
+      item.style.display = "none";
+    }
+    for (const item of collapseMenu.children) {
+      ;
+      item.style.display = "";
+      item.classList.add("BLUE-actions-collapse-visible");
+    }
+    let i = 0;
+    for (const item of menu.children) {
+      ;
+      item.style.display = "";
+      collapseMenu.children[i].style.display = "none";
+      collapseMenu.children[i].classList.remove("BLUE-actions-collapse-visible");
+      if (actionsElement.scrollWidth > actionsElement.clientWidth) {
+        ;
+        item.style.display = "none";
+        collapseMenu.children[i].style.display = "";
+        collapseMenu.children[i].classList.add("BLUE-actions-collapse-visible");
+        break;
+      }
+      i++;
+    }
+  }
+  updateActions();
+  const resizeObserver = new ResizeObserver(() => {
+    requestAnimationFrame(updateActions);
+  });
+  resizeObserver.observe(actionsElement);
+  const outsideClickHandler = event => {
+    if (!actionsElement) return;
+    const openDetails = actionsElement.querySelectorAll("details[open]");
+    if (!openDetails || openDetails.length <= 0) return;
+    openDetails.forEach(details => {
+      if (!details.contains(event.target)) {
+        details.removeAttribute("open");
+      }
+    });
+  };
+  document.addEventListener("click", outsideClickHandler);
+  return {
+    updateActions,
+    resizeObserver,
+    destroy() {
+      resizeObserver.disconnect();
+      document.removeEventListener("click", outsideClickHandler);
+    }
+  };
+}
+window.blueWeb = window.blueWeb || {};
+window.blueWeb.actions = {
+  init
+};

package/dist/js/color-mode.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";const e=()=>localStorage.getItem("blue-web-color-mode"),t=()=>e()||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),o=()=>{const e=t();"auto"===e&&window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.setAttribute("data-bs-theme","dark"):document.documentElement.setAttribute("data-bs-theme",e)};window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",(()=>{localStorage.removeItem("blue-web-color-mode"),o()})),o(),window.blueWeb=window.blueWeb||{},window.blueWeb.colorMode={getStored:e,getPreferred:t,set:e=>{"auto"===e?localStorage.removeItem("blue-web-color-mode"):localStorage.setItem("blue-web-color-mode",e),o()},init:o}})();

package/dist/js/color-mode.d.ts

@@ -0,0 +1,4 @@
+export declare const getStored: () => string | null;
+export declare const getPreferred: () => string;
+export declare const set: (colorMode: string) => void;
+export declare const init: () => void;

package/dist/js/color-mode.js

@@ -0,0 +1,37 @@
+export const getStored = () => localStorage.getItem("blue-web-color-mode");
+export const getPreferred = () => {
+  const stored = getStored();
+  if (stored) {
+    return stored;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+export const set = colorMode => {
+  if (colorMode === "auto") {
+    localStorage.removeItem("blue-web-color-mode");
+  } else {
+    localStorage.setItem("blue-web-color-mode", colorMode);
+  }
+  init();
+};
+export const init = () => {
+  const colorMode = getPreferred();
+  if (colorMode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    document.documentElement.setAttribute("data-bs-theme", "dark");
+  } else {
+    document.documentElement.setAttribute("data-bs-theme", colorMode);
+  }
+};
+const onMatchMediaChange = () => {
+  localStorage.removeItem("blue-web-color-mode");
+  init();
+};
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", onMatchMediaChange);
+init();
+window.blueWeb = window.blueWeb || {};
+window.blueWeb.colorMode = {
+  getStored,
+  getPreferred,
+  set,
+  init
+};

package/dist/js/dialog.js

@@ -1,36 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ask = ask;
-exports.tell = tell;
-exports.verify = verify;
-var _utils = require("./utils");
-var _shared = require("./shared");
-async function ask(text) {
+import { guid } from "./utils";
+import { getPhrase } from "./shared";
+export async function ask(text) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return await dialog("ask", text, options);
 }
-async function tell(text) {
+export async function tell(text) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   await dialog("tell", text, options);
 }
-async function verify(text) {
+export async function verify(text) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   return (await dialog("verify", text, options)) === true;
 }
 async function dialog(dialogType, text) {
   let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   let {
-    title = (0, _shared.getPhrase)("Message"),
+    title = getPhrase("Message"),
     icon = undefined,
     switchPrimaryBtn = false,
-    acceptBtnText = dialogType === "verify" ? (0, _shared.getPhrase)("Yes") : "OK",
-    cancelBtnText = dialogType === "verify" ? (0, _shared.getPhrase)("No") : (0, _shared.getPhrase)("Cancel"),
+    acceptBtnText = dialogType === "verify" ? getPhrase("Yes") : "OK",
+    cancelBtnText = dialogType === "verify" ? getPhrase("No") : getPhrase("Cancel"),
     inputType = "text"
   } = options;
-  const id = (0, _utils.guid)();
+  const id = guid();
   const addToDom = () => {
     document.body.insertAdjacentHTML("beforeend", /* HTML */`<dialog class="blue-modal modal" id="${id}" aria-labelledby="${id}-label">
                 <div class="modal-dialog">

package/dist/js/edit-view.js

@@ -1,13 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.EditView = void 0;
 /**
  * EditView is a Custom Element that displays a edit view of its content and allows the user to confirm or dismiss the changes.
  */
-class EditView extends HTMLElement {
+export class EditView extends HTMLElement {
   connectedCallback() {
     this.render();
   }
@@ -59,5 +53,4 @@ class EditView extends HTMLElement {
     }));
   }
 }
-exports.EditView = EditView;
 customElements.define("edit-view", EditView);

package/dist/js/progress.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 window.blueWeb = window.blueWeb || {};
 window.blueWeb.progress = {
   progress: 0
@@ -58,4 +52,4 @@ window.blueWeb.progress = {
     }, 500);
   }
 };
-var _default = exports.default = window.blueWeb.progress;
+export default window.blueWeb.progress;

package/dist/js/read-view.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ReadView = void 0;
 const DRAG_THRESHOLD = 5;
 
 /**
@@ -25,7 +19,7 @@ const DRAG_THRESHOLD = 5;
  *    setEditing(true)
  * })
  */
-class ReadView extends HTMLElement {
+export class ReadView extends HTMLElement {
   startX = 0;
   startY = 0;
   constructor() {
@@ -126,5 +120,4 @@ class ReadView extends HTMLElement {
     }
   }
 }
-exports.ReadView = ReadView;
 customElements.define("read-view", ReadView);

package/dist/js/shared.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPhrase = getPhrase;
 const phrases = {
   Cancel: ["Cancel", "Abbrechen"],
   Yes: ["Yes", "Ja"],
@@ -14,7 +8,7 @@ const phrases = {
   Error: ["Error", "Fehler"],
   Information: ["Information", "Information"]
 };
-function getPhrase(keyword) {
+export function getPhrase(keyword) {
   let countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
   let _phrases = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
   countryCode = countryCode || navigator.language.toLowerCase().indexOf("de") > -1 ? "de-DE" : "en-US";

package/dist/js/side-layout.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SideLayout = void 0;
-class SideLayout extends HTMLElement {
+export class SideLayout extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({
@@ -173,5 +167,4 @@ class SideLayout extends HTMLElement {
     }
   }
 }
-exports.SideLayout = SideLayout;
 customElements.define("side-layout", SideLayout);

package/dist/js/utils.js

@@ -1,30 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fetchData = fetchData;
-exports.finishLoading = finishLoading;
-exports.guid = void 0;
-exports.hideSuccess = hideSuccess;
-exports.resetAlertMessage = resetAlertMessage;
-exports.scrollToTop = scrollToTop;
-exports.setAlertMessage = setAlertMessage;
-exports.showSuccess = showSuccess;
-exports.startLoading = startLoading;
-function startLoading() {
+export function startLoading() {
   ;
   document.querySelector(".blue-loading").style.display = "block";
 }
-function finishLoading() {
+export function finishLoading() {
   ;
   document.querySelector(".blue-loading").style.display = "";
 }
-function showSuccess() {
+export function showSuccess() {
   ;
   document.querySelector(".blue-status-success").style.display = "flex";
 }
-function hideSuccess() {
+export function hideSuccess() {
   ;
   document.querySelector(".blue-status-success").style.display = "";
 }
@@ -34,7 +20,7 @@ function hideSuccess() {
  * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
  * @param alertClassName Leave empty to reset messages of any status type
  */
-function resetAlertMessage(alertClassName) {
+export function resetAlertMessage(alertClassName) {
   if (!alertClassName) {
     ;
     ["loading", "success", "info", "warning", "danger"].forEach(status => {
@@ -54,7 +40,7 @@ function resetAlertMessage(alertClassName) {
 /**
  * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v9/component/StatusProvider
  */
-function setAlertMessage(message) {
+export function setAlertMessage(message) {
   let alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
   let close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let detailText = arguments.length > 3 ? arguments[3] : undefined;
@@ -82,9 +68,8 @@ function setAlertMessage(message) {
 function s4() {
   return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
 }
-const guid = () => s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
-exports.guid = guid;
-function scrollToTop() {
+export const guid = () => s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
+export function scrollToTop() {
   const routerPage = document.querySelector(".router-page.active");
   routerPage.scroll({
     behavior: "smooth",
@@ -103,7 +88,7 @@ const httpStatusCodes = {
   500: "Internal Server Error",
   502: "Bad Gateway"
 };
-function fetchData(input, init) {
+export function fetchData(input, init) {
   let showErrorDetail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
   let onError = arguments.length > 3 ? arguments[3] : undefined;
   return fetch(input, init).then(response => {