blue-web 1.15.0 → 1.16.0

package/dist/js/dialog.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var e={786:(e,n,t)=>{t.d(n,{k:()=>l});const o={Cancel:["Cancel","Abbrechen"],Yes:["Yes","Ja"],No:["No","Nein"],Message:["Message","Nachricht"],"Toggle menu":["Toggle menu","Menü umschalten"],"Close all":["Close all","Alle schließen"],Error:["Error","Fehler"],Information:["Information","Information"]};function l(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;return n=n||navigator.language.toLowerCase().indexOf("de")>-1?"de-DE":"en-US",t=t||o,t[e]?n.indexOf("de-")>-1?t[e][1]:t[e][0]:e}},762:(e,n,t)=>{function o(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}t.d(n,{Os:()=>l});const l=()=>o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()}},n={};function t(o){var l=n[o];if(void 0!==l)return l.exports;var a=n[o]={exports:{}};return e[o](a,a.exports,t),a.exports}t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var o=t(762),l=t(786);async function a(e,n){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{title:a=(0,l.k)("Message"),icon:i,switchPrimaryBtn:r=!1,acceptBtnText:s=("verify"===e?(0,l.k)("Yes"):"OK"),cancelBtnText:d=("verify"===e?(0,l.k)("No"):(0,l.k)("Cancel")),inputType:c="text"}=t;const u=(0,o.Os)();return document.getElementById(u)||document.body.insertAdjacentHTML("beforeend",`<dialog class="blue-modal modal" id="${u}" aria-labelledby="${u}-label">\n                <div class="modal-dialog">\n                    <div class="modal-content">\n                        <form>\n                            <div class="modal-header">\n                                ${i?`<div class="me-2">${i}</div>`:""}\n                                <h1 class="modal-title fs-5" id="${u}-label">${a}</h1>\n                                <button\n                                    type="button"\n                                    class="btn-close"\n                                    aria-label="${d}"\n                                    onclick="document.getElementById('${u}').close()"\n                                ></button>\n                            </div>\n                            <div class="modal-body">\n                                ${"ask"===e?`<label for="${u}-input">${n}</label>\n                                          <input type="${c}" id="${u}-input" class="form-control mt-3" />`:n}\n                            </div>\n                            <div class="modal-footer">\n                                ${"verify"===e||"ask"===e?`<button\n                                          type="button"\n                                          class="btn ${r?"btn-primary":"blue-btn-plain-primary"}"\n                                          onclick="document.getElementById('${u}').close()"\n                                      >\n                                          ${d}\n                                      </button>`:""}\n                                <button\n                                    type="submit"\n                                    class="btn ${r?"blue-btn-plain-primary":"btn-primary"}"\n                                >\n                                    ${s}\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method="dialog" class="blue-modal-backdrop">\n                    <button>${d}</button>\n                </form>\n            </dialog>`),new Promise((n=>{const t=document.getElementById(u),o=()=>{const e=document.getElementById(u);e&&e.remove()};t?.showModal(),t?.addEventListener("close",(()=>{o(),n(!1)})),t?.querySelector(".modal-content > form")?.addEventListener("submit",(l=>{l.preventDefault(),"ask"===e&&(t.close(),o(),n((t?.querySelector("input")).value||"")),t.close(),o(),n(!0)}))}))}window.blueWeb=window.blueWeb||{},window.blueWeb.dialog={ask:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return await a("ask",e,n)},tell:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};await a("tell",e,n)},verify:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return!0===await a("verify",e,n)}}})();
+(()=>{"use strict";var e={786:(e,n,t)=>{t.d(n,{k:()=>l});const o={Cancel:["Cancel","Abbrechen"],Yes:["Yes","Ja"],No:["No","Nein"],Message:["Message","Nachricht"],"Toggle menu":["Toggle menu","Menü umschalten"],"Close all":["Close all","Alle schließen"],Error:["Error","Fehler"],Information:["Information","Information"]};function l(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;return n=n||navigator.language.toLowerCase().indexOf("de")>-1?"de-DE":"en-US",t=t||o,t[e]?n.indexOf("de-")>-1?t[e][1]:t[e][0]:e}},762:(e,n,t)=>{function o(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}t.d(n,{Os:()=>l});const l=()=>o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()}},n={};function t(o){var l=n[o];if(void 0!==l)return l.exports;var a=n[o]={exports:{}};return e[o](a,a.exports,t),a.exports}t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var o=t(762),l=t(786);async function a(e,n){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{title:a=(0,l.k)("Message"),icon:i,switchPrimaryBtn:r=!1,acceptBtnText:s=("verify"===e?(0,l.k)("Yes"):"OK"),cancelBtnText:d=("verify"===e?(0,l.k)("No"):(0,l.k)("Cancel")),inputType:c="text",defaultValue:u}="string"==typeof t?JSON.parse(t):t;const m=(0,o.Os)();return document.getElementById(m)||document.body.insertAdjacentHTML("beforeend",`<dialog class="blue-modal modal" id="${m}" aria-labelledby="${m}-label">\n                <div class="modal-dialog">\n                    <div class="modal-content">\n                        <form>\n                            <div class="modal-header">\n                                ${i?`<div class="me-2">${i}</div>`:""}\n                                <h1 class="modal-title fs-5" id="${m}-label">${a}</h1>\n                                <button\n                                    type="button"\n                                    class="btn-close"\n                                    aria-label="${d}"\n                                    onclick="document.getElementById('${m}').close()"\n                                ></button>\n                            </div>\n                            <div class="modal-body">\n                                ${"ask"===e?`<label for="${m}-input">${n}</label>\n                                          <input\n                                              type="${c}"\n                                              ${void 0!==u?` value="${u}"`:""}\n                                              id="${m}-input"\n                                              class="form-control mt-3"\n                                          />`:n}\n                            </div>\n                            <div class="modal-footer">\n                                ${"verify"===e||"ask"===e?`<button\n                                          type="button"\n                                          class="btn ${r?"btn-primary":"blue-btn-plain-primary"}"\n                                          onclick="document.getElementById('${m}').close()"\n                                      >\n                                          ${d}\n                                      </button>`:""}\n                                <button\n                                    type="submit"\n                                    class="btn ${r?"blue-btn-plain-primary":"btn-primary"}"\n                                >\n                                    ${s}\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method="dialog" class="blue-modal-backdrop">\n                    <button>${d}</button>\n                </form>\n            </dialog>`),new Promise((n=>{const t=document.getElementById(m),o=()=>{const e=document.getElementById(m);e&&e.remove()};t?.showModal(),t?.addEventListener("close",(()=>{o(),n(!1)})),t?.querySelector(".modal-content > form")?.addEventListener("submit",(l=>{l.preventDefault(),"ask"===e&&(t.close(),o(),n((t?.querySelector("input")).value||"")),t.close(),o(),n(!0)}))}))}window.blueWeb=window.blueWeb||{},window.blueWeb.dialog={ask:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return await a("ask",e,n)},tell:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};await a("tell",e,n)},verify:async function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return!0===await a("verify",e,n)}}})();

package/dist/js/dialog.d.ts

@@ -6,10 +6,11 @@ export interface DialogOptions {
     acceptBtnText?: string;
     cancelBtnText?: string;
     inputType?: string;
+    defaultValue?: string;
 }
-export declare function ask(text: string, options?: DialogOptions): Promise<string | boolean>;
-export declare function tell(text: string, options?: DialogOptions): Promise<void>;
-export declare function verify(text: string, options?: DialogOptions): Promise<boolean>;
+export declare function ask(text: string, options?: DialogOptions | string): Promise<string | boolean>;
+export declare function tell(text: string, options?: DialogOptions | string): Promise<void>;
+export declare function verify(text: string, options?: DialogOptions | string): Promise<boolean>;
 declare global {
     interface Window {
         blueWeb: any;

package/dist/js/dialog.js

@@ -20,8 +20,9 @@ async function dialog(dialogType, text) {
     switchPrimaryBtn = false,
     acceptBtnText = dialogType === "verify" ? getPhrase("Yes") : "OK",
     cancelBtnText = dialogType === "verify" ? getPhrase("No") : getPhrase("Cancel"),
-    inputType = "text"
-  } = options;
+    inputType = "text",
+    defaultValue
+  } = typeof options === "string" ? JSON.parse(options) : options;
   const id = guid();
   const addToDom = () => {
     document.body.insertAdjacentHTML("beforeend", /* HTML */`<dialog class="blue-modal modal" id="${id}" aria-labelledby="${id}-label">
@@ -40,7 +41,12 @@ async function dialog(dialogType, text) {
                             </div>
                             <div class="modal-body">
                                 ${dialogType === "ask" ? /* HTML */`<label for="${id}-input">${text}</label>
-                                          <input type="${inputType}" id="${id}-input" class="form-control mt-3" />` : text}
+                                          <input
+                                              type="${inputType}"
+                                              ${defaultValue !== undefined ? ` value="${defaultValue}"` : ""}
+                                              id="${id}-input"
+                                              class="form-control mt-3"
+                                          />` : text}
                             </div>
                             <div class="modal-footer">
                                 ${dialogType === "verify" || dialogType === "ask" ? /* HTML */`<button

package/dist/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.15.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.16.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -47,6 +47,8 @@ $link-hover-decoration: underline !default;
 $focus-ring-color: #{rgba(var(--bs-primary-rgb), 25%)} !default;
 $input-focus-border-color: #{rgba(var(--bs-primary-rgb), 50%)} !default;
 
+$enable-button-pointers: false !default;
+
 
 // Bootstrap functions
 //
@@ -10771,13 +10773,21 @@ $utilities: map-merge(
 // scss-docs-end import-stack
 
 
-// Per CSS-Variablen überschreibbar machen, da es von Bootstrap aus noch nicht möglich ist.
-// Bei neuer Bootstrap-Version prüfen, ob es noch nötig ist.
+// Make it overridable via CSS variables, as it is not yet possible in Bootstrap.
+// Check with a newer Bootstrap version to see if it is still necessary.
 .form-check-input:checked {
     background-color: var(--bs-primary, #{$form-check-input-checked-bg-color});
     border-color: var(--bs-primary, #{$form-check-input-checked-border-color});
 }
 
+// Resets cursor from Bootstrap' _reboot.scss based on option.
+@if ($enable-button-pointers: false) {
+    summary,
+    [role="button"] {
+        cursor: unset;
+    }
+}
+
 // In previous versions of Bootstrap, `.page-header` was a class that could be used to add a border to the bottom of a page header.
 // Unfortunately his class was removed in Bootstrap 5, so it's now part of Blue Web CSS.
 .blue-page-header,
@@ -10914,6 +10924,13 @@ body {
     @include scroll-shadow(var(--bs-body-bg));
 }
 
+// Sets `margin: 0` to last child.
+// Useful for creating a gap between items together with `mb-3`.
+// Inspired by Tailwind CSS class `last:m-0`.
+.m-last-0:last-child {
+    margin: 0 !important;
+}
+
 .blue-loading {
     background-color: $primary;
 }
@@ -11294,73 +11311,36 @@ body {
     height: var(--blue-header-title-image-height, var(--blue-header-title-image-size, 2rem));
 }
 
-.blue-search {
-    display: flex;
-    align-items: center;
+.blue-input-group {
     border: $input-border-width solid $input-border-color;
     border-radius: $input-border-radius;
     background-color: $input-bg;
 
-    &.blue-search-body {
-        border: 1px solid $input-border-color;
+    &.focus,
+    &:has(input:focus) {
+        box-shadow: $input-btn-focus-box-shadow;
+        border-color: $input-focus-border-color;
 
-        .blue-search-input-group {
-            display: flex;
+        .input-group-text {
+            color: #{var(--bs-primary-text-emphasis)};
         }
-
-        &.focus {
-            box-shadow: $input-btn-focus-box-shadow;
-        }
-    }
-
-    &.focus {
-        box-shadow: inset $input-btn-focus-box-shadow;
     }
-}
-
-.blue-sidebar .blue-search:not(.blue-search-body) {
-    margin-left: map-get($spacers, 1);
-    margin-right: map-get($spacers, 1);
-}
-
-.blue-search-input-group {
-    display: none;
 
     .input-group-text {
         border-color: transparent;
         background-color: transparent;
     }
-}
-
-.blue-search-control {
-    border: none;
-    background-color: transparent !important;
-
-    &:focus {
-        box-shadow: none;
-    }
-}
-
-.blue-search-reset-btn {
-    color: rgba($input-color, 0.7);
 
-    &:hover {
-        color: $input-color;
-    }
-}
-
-.blue-search.blue-search-sidebar {
-    transition: opacity 0.2s ease-in-out;
+    .form-control {
+        border: none;
+        background-color: transparent !important;
 
-    @media (prefers-reduced-motion) {
-        transition: none;
+        &:focus {
+            box-shadow: none;
+        }
     }
 }
 
-.blue-search.blue-search-sidebar:not(:hover):not(.focus) {
-    opacity: 0.7;
-}
-
 .blue-actions {
     --max-width: calc(
         var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-font-size, 1rem) +
@@ -11867,10 +11847,13 @@ body {
 
     position: relative;
     order: 0;
-    cursor: pointer;
     user-select: none;
     -webkit-appearance: none;
     appearance: none;
+
+    @if ($enable-button-pointers) {
+        cursor: pointer;
+    }
 }
 
 .blue-tab::before {
@@ -12213,7 +12196,8 @@ dialog.blue-modal:has(.offcanvas-start) {
 .blue-collapse-group {
     display: grid;
     grid-template-rows: auto;
-    grid-template-columns: 1fr;
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 100%;
 
     & > details {
         display: contents;
@@ -12287,6 +12271,78 @@ dialog.blue-modal:has(.offcanvas-start) {
     }
 }
 
+.blue-scrollspy {
+    --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x * 0.5};
+    --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y * 0.5};
+    @include rfs(0.875rem, --#{$prefix}nav-link-font-size);
+    --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
+    --#{$prefix}nav-link-color: #{$nav-link-color};
+    --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
+    --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
+
+    --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
+    --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
+    --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
+    --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
+    --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
+    --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
+    --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
+
+    @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+    }
+
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    scroll-snap-type: y mandatory;
+
+    scroll-marker-group: before;
+
+    &::scroll-marker-group {
+        display: flex;
+        min-height: calc(
+            (var(--#{$prefix}nav-link-padding-y) + var(--#{$prefix}nav-tabs-border-width)) * 2 +
+                (var(--#{$prefix}nav-link-font-size) * var(--#{$prefix}body-line-height))
+        );
+        margin-bottom: 0.25rem;
+    }
+
+    & > section {
+        &::scroll-marker {
+            content: attr(aria-label);
+
+            font-size: var(--#{$prefix}nav-link-font-size);
+            box-sizing: border-box;
+            text-decoration: none;
+
+            padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
+            border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
+
+            border-radius: var(--#{$prefix}nav-tabs-border-radius);
+
+            &:is(:hover, :focus) {
+                border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
+            }
+
+            &:target-current,
+            &:is(:active) {
+                color: var(--#{$prefix}nav-tabs-link-active-color);
+                background-color: var(--#{$prefix}nav-tabs-link-active-bg);
+                border-color: var(--#{$prefix}border-color);
+            }
+        }
+    }
+}
+
+.blue-scrollspy-after {
+    scroll-marker-group: after;
+
+    &::scroll-marker-group {
+        margin-bottom: 0;
+        margin-top: 0.25rem;
+    }
+}
+
 
 /* Make DevExpress components look more like Bootstrap/Blue */
 [class^="dxbl-"] {
@@ -12313,6 +12369,10 @@ dialog.blue-modal:has(.offcanvas-start) {
     font-size: 1rem;
 }
 
+.dxbl-pager-page-edit {
+    min-width: 2.5em;
+}
+
 .dxbl-toolbar {
     --dxbl-toolbar-font-size: var(--bs-body-font-size) !important;
     font-size: var(--dxbl-toolbar-font-size);