blue-web 1.13.0 → 1.14.1

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.

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.js

@@ -1,20 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.set = exports.init = exports.getStored = exports.getPreferred = void 0;
-const getStored = () => localStorage.getItem("blue-web-color-mode");
-exports.getStored = getStored;
-const getPreferred = () => {
+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";
 };
-exports.getPreferred = getPreferred;
-const set = colorMode => {
+export const set = colorMode => {
   if (colorMode === "auto") {
     localStorage.removeItem("blue-web-color-mode");
   } else {
@@ -22,8 +14,7 @@ const set = colorMode => {
   }
   init();
 };
-exports.set = set;
-const init = () => {
+export const init = () => {
   const colorMode = getPreferred();
   if (colorMode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) {
     document.documentElement.setAttribute("data-bs-theme", "dark");
@@ -31,7 +22,6 @@ const init = () => {
     document.documentElement.setAttribute("data-bs-theme", colorMode);
   }
 };
-exports.init = init;
 const onMatchMediaChange = () => {
   localStorage.removeItem("blue-web-color-mode");
   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 => {

package/dist/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.13.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.14.1 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -11150,6 +11150,17 @@ body {
         border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
         background-color: var(--blue-menu-item-dropdown-bg);
     }
+
+    &[popover] {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        z-index: 1000;
+        border: none;
+        background: transparent;
+        border-radius: calc(#{$border-radius} + 0.1rem);
+        box-shadow: $box-shadow;
+    }
 }
 
 .blue-menu-item-dropdown-caret.blue-caret {
@@ -11200,7 +11211,8 @@ body {
 
     &:hover,
     &:active,
-    &.highlighted {
+    &.highlighted,
+    &:has(+ :popover-open) {
         color: inherit;
         border-color: transparent;
 
@@ -11210,7 +11222,8 @@ body {
         }
     }
 
-    &.highlighted {
+    &.highlighted,
+    &:has(+ :popover-open) {
         &::before {
             opacity: 0.16;
         }
@@ -11378,11 +11391,6 @@ body {
             var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-border-width, 1px)
     );
 
-    display: inline;
-    left: 0;
-    right: 0;
-    top: 0;
-    padding: 0;
     max-height: $normal-size;
     overflow: hidden;
 
@@ -11395,6 +11403,9 @@ body {
     }
 
     &.open {
+        left: 0;
+        right: 0;
+        top: 0;
         background-color: var(--blue-menu-item-dropdown-bg);
     }
 
@@ -11433,16 +11444,6 @@ body {
     }
 }
 
-.blue-actions-menu-toggle > span:first-child {
-    transform: rotate(90deg);
-}
-
-.blue-actions-menu-item {
-    display: flex;
-    align-items: center;
-    color: inherit;
-}
-
 .blue-caret {
     /* treat like a font icon */
     font-family: "blueicon" !important;
@@ -12186,8 +12187,6 @@ dialog.blue-modal:has(.offcanvas-start) {
 }
 
 // Collapse with details and animated
-// Right now not part of Blue Web, but could become one
-
 .blue-collapse {
     interpolate-size: allow-keywords;
 
@@ -12221,14 +12220,20 @@ dialog.blue-modal:has(.offcanvas-start) {
 
     &::details-content {
         block-size: 0;
+        opacity: 0;
+        translate: 0 -100%;
         transition:
             block-size 0.2s,
-            content-visibility 0.2s;
+            content-visibility 0.2s,
+            opacity 0.2s,
+            translate 0.2s;
         transition-behavior: allow-discrete;
     }
 
     &[open]::details-content {
         block-size: auto;
+        opacity: 1;
+        translate: 0;
     }
 }
 
@@ -12239,6 +12244,118 @@ dialog.blue-modal:has(.offcanvas-start) {
     }
 }
 
+// Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
+.blue-collapse-group {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr;
+
+    & > details {
+        display: contents;
+
+        & > summary {
+            grid-column: 2;
+
+            & + * {
+                width: calc(100% + 1rem - 2px);
+            }
+        }
+    }
+}
+
+.BLUE-actions {
+    display: flex;
+    white-space: nowrap;
+}
+
+.BLUE-actions-menu {
+    display: flex;
+    max-width: 100%;
+}
+
+.BLUE-actions-collapse {
+    position: relative;
+}
+
+.BLUE-actions-collapse:not(:has(.BLUE-actions-collapse-visible)) {
+    display: none;
+}
+
+.BLUE-actions-collapse-menu {
+    position: absolute;
+}
+
+.blue-anchor {
+    anchor-name: var(--blue-anchor-name, --anchor-1);
+}
+
+.blue-anchored {
+    top: anchor(var(--blue-anchor-name, --anchor-1) bottom);
+}
+
+.blue-anchored-start {
+    left: anchor(var(--blue-anchor-name, --anchor-1) left);
+}
+
+.blue-anchored-end {
+    left: anchor(var(--blue-anchor-name, --anchor-1) right);
+    translate: -100%;
+}
+
+@supports not (anchor-name: --anchor-1) {
+    .blue-anchored-end {
+        translate: none;
+    }
+
+    .blue-anchored-fallback {
+        left: 50%;
+        top: 50%;
+        translate: -50% -50%;
+
+        &::backdrop {
+            --bs-backdrop-bg: #000;
+            --bs-backdrop-opacity: 0.5;
+            background-color: var(--bs-backdrop-bg);
+            transition: opacity 0.2s;
+            opacity: var(--bs-backdrop-opacity);
+        }
+    }
+}
+
+
+/* Make DevExpress components look more like Bootstrap/Blue */
+[class^="dxbl-"] {
+    --dxbl-text-edit-border-radius: var(--bs-border-radius) !important;
+    --dxbl-text-edit-padding-x: 0.75rem !important;
+    --dxbl-text-edit-padding-y: 0.375rem !important;
+    --dxbl-text-edit-line-height: 1.5 !important;
+    --dxbl-text-edit-focus-shadow-spread: 0.25rem !important;
+    --dxbl-listbox-border-radius: var(--bs-border-radius) !important;
+    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
+    --dxbl-toolbar-btn-border-radius: var(--bs-border-radius) !important;
+    --dxbl-dropdown-border-radius: var(--bs-border-radius) !important;
+    --dxbl-btn-border-radius: var(--bs-border-radius) !important;
+    --dxbl-btn-padding-x: 0.75rem !important;
+    --dxbl-btn-padding-y: 0.375rem !important;
+}
+
+.dxbl-grid {
+    --dxbl-grid-font-size: 1rem;
+    border: none;
+}
+
+.dxbl-text-edit {
+    font-size: 1rem;
+}
+
+.dxbl-toolbar {
+    --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
+    font-size: var(--dxbl-toolbar-font-size);
+}
+
+body.modal-open .dxbl-popup-cell[style="z-index: 1050;"] {
+    z-index: 1056 !important;
+}
 
 :root {
     --bs-font-sans-serif: Inter, #{$font-family-sans-serif};