blue-web 1.15.1 → 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.1 (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).
 */
 
@@ -10924,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;
 }
@@ -12189,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;
@@ -12263,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-"] {