blue-web 1.17.5 → 1.17.7

package/dist/js/input-splitted.js

@@ -1,34 +1,48 @@
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+var _observer = /*#__PURE__*/new WeakMap();
+var _valueArray = /*#__PURE__*/new WeakMap();
+var _refArray = /*#__PURE__*/new WeakMap();
+var _lightDom2 = /*#__PURE__*/new WeakMap();
+var _value2 = /*#__PURE__*/new WeakMap();
+var _length2 = /*#__PURE__*/new WeakMap();
+var _controlClass = /*#__PURE__*/new WeakMap();
+var _control1Id = /*#__PURE__*/new WeakMap();
+var _styling = /*#__PURE__*/new WeakMap();
+var _InputSplitted_brand = /*#__PURE__*/new WeakSet();
 export class InputSplitted extends HTMLElement {
-  #observer;
-  #valueArray = [];
-  #refArray = [];
-  #lightDom = false;
   get lightDom() {
-    return this.#lightDom;
+    return _classPrivateFieldGet(_lightDom2, this);
   }
   set lightDom(_lightDom) {
-    this.#lightDom = _lightDom;
+    _classPrivateFieldSet(_lightDom2, this, _lightDom);
     if (this.lightDom === true) {
-      this.innerHTML = this.#styling;
+      this.innerHTML = _classPrivateFieldGet(_styling, this);
     } else {
       if (!this.shadowRoot) this.attachShadow({
         mode: "open",
         delegatesFocus: true
       });
-      this.shadowRoot.innerHTML = this.#styling;
+      this.shadowRoot.innerHTML = _classPrivateFieldGet(_styling, this);
     }
-    this.#initDom();
+    _assertClassBrand(_InputSplitted_brand, this, _initDom).call(this);
   }
-  #value = "";
   get value() {
-    return this.#value;
+    return _classPrivateFieldGet(_value2, this);
   }
   set value(_value) {
-    const oldValue = this.#value;
-    this.#value = _value;
-    this.#valueArray = this.value.split("");
+    const oldValue = _classPrivateFieldGet(_value2, this);
+    _classPrivateFieldSet(_value2, this, _value);
+    _classPrivateFieldSet(_valueArray, this, this.value.split(""));
     for (let i = 0; i < this.length; i++) {
-      if (this.#refArray[i]) this.#refArray[i].value = this.#valueArray[i] || "";
+      if (_classPrivateFieldGet(_refArray, this)[i]) _classPrivateFieldGet(_refArray, this)[i].value = _classPrivateFieldGet(_valueArray, this)[i] || "";
     }
     if (oldValue !== _value) {
       this.dispatchEvent(new CustomEvent("changeValue", {
@@ -37,189 +51,182 @@ export class InputSplitted extends HTMLElement {
       }));
     }
   }
-  #length = 0;
   get length() {
-    return this.#length;
+    return _classPrivateFieldGet(_length2, this);
   }
   set length(_length) {
-    this.#length = _length;
-    if (this.length > this.#refArray.length) {
+    _classPrivateFieldSet(_length2, this, _length);
+    if (this.length > _classPrivateFieldGet(_refArray, this).length) {
       // Added length
 
       for (let j = 0; j < this.length; j++) {
-        if (!this.#refArray[j] && this.didInit) {
-          this.#addInput(this.#refArray.length);
+        if (!_classPrivateFieldGet(_refArray, this)[j] && this.didInit) {
+          _assertClassBrand(_InputSplitted_brand, this, _addInput).call(this, _classPrivateFieldGet(_refArray, this).length);
         }
       }
-    } else if (this.length < this.#refArray.length) {
+    } else if (this.length < _classPrivateFieldGet(_refArray, this).length) {
       // Removed length
 
-      const difference = Math.abs(this.#refArray.length - this.length);
+      const difference = Math.abs(_classPrivateFieldGet(_refArray, this).length - this.length);
       for (let j = 0; j < difference; j++) {
-        const el = this.#refArray.pop();
-        el?.remove();
+        const el = _classPrivateFieldGet(_refArray, this).pop();
+        el === null || el === void 0 || el.remove();
       }
     }
-    this.#refArray = [...this.#refArray];
+    _classPrivateFieldSet(_refArray, this, [..._classPrivateFieldGet(_refArray, this)]);
   }
-  #controlClass = "";
   get controlClass() {
-    return this.#controlClass;
+    return _classPrivateFieldGet(_controlClass, this);
   }
   set controlClass(value) {
-    this.#controlClass = value;
-    for (const el of this.#refArray) {
+    _classPrivateFieldSet(_controlClass, this, value);
+    for (const el of _classPrivateFieldGet(_refArray, this)) {
       el.className = this.controlClass;
     }
   }
-  #control1Id = "";
   get control1Id() {
-    return this.#control1Id;
+    return _classPrivateFieldGet(_control1Id, this);
   }
   set control1Id(value) {
-    this.#control1Id = value;
-    if (this.#refArray[0]) {
-      this.#refArray[0].id = this.control1Id;
+    _classPrivateFieldSet(_control1Id, this, value);
+    if (_classPrivateFieldGet(_refArray, this)[0]) {
+      _classPrivateFieldGet(_refArray, this)[0].id = this.control1Id;
     }
   }
-  #styling = /* html */`<style>
-    input {
-        display: var(--blue-input-splitted-display, revert);
-        background-color: var(--blue-input-splitted-background-color, revert);
-        border: var(--blue-input-splitted-border, revert);
-        border-radius: var(--blue-input-splitted-border-radius, revert);
-        box-shadow: var(--blue-input-splitted-box-shadow, revert);
-        color: var(--blue-input-splitted-color, revert);
-        margin: var(--blue-input-splitted-margin, revert);
-        padding: var(--blue-input-splitted-padding, revert);
-        text-align: var(--blue-input-splitted-text-align, revert);
-        width: var(--blue-input-splitted-width, revert);
-    }
-</style>`;
-  didInit = false;
   constructor() {
     super();
+    _classPrivateMethodInitSpec(this, _InputSplitted_brand);
+    _classPrivateFieldInitSpec(this, _observer, void 0);
+    _classPrivateFieldInitSpec(this, _valueArray, []);
+    _classPrivateFieldInitSpec(this, _refArray, []);
+    _classPrivateFieldInitSpec(this, _lightDom2, false);
+    _classPrivateFieldInitSpec(this, _value2, "");
+    _classPrivateFieldInitSpec(this, _length2, 0);
+    _classPrivateFieldInitSpec(this, _controlClass, "");
+    _classPrivateFieldInitSpec(this, _control1Id, "");
+    _classPrivateFieldInitSpec(this, _styling, /* html */"<style>\n    input {\n        display: var(--blue-input-splitted-display, revert);\n        background-color: var(--blue-input-splitted-background-color, revert);\n        border: var(--blue-input-splitted-border, revert);\n        border-radius: var(--blue-input-splitted-border-radius, revert);\n        box-shadow: var(--blue-input-splitted-box-shadow, revert);\n        color: var(--blue-input-splitted-color, revert);\n        margin: var(--blue-input-splitted-margin, revert);\n        padding: var(--blue-input-splitted-padding, revert);\n        text-align: var(--blue-input-splitted-text-align, revert);\n        width: var(--blue-input-splitted-width, revert);\n    }\n</style>");
+    _defineProperty(this, "didInit", false);
     this.onFocus = this.onFocus.bind(this);
   }
   connectedCallback() {
     this.didInit = true;
     this.lightDom = this.getAttribute("light-dom") !== null;
-    this.#initDom();
+    _assertClassBrand(_InputSplitted_brand, this, _initDom).call(this);
     this.value = this.getAttribute("value") || this.value;
     this.length = getLength(this);
     this.controlClass = this.getAttribute("control-class") || this.controlClass;
     this.control1Id = this.getAttribute("control-1-id") || this.control1Id;
-    this.#observe();
-  }
-  #addInput(i) {
-    const input = document.createElement("input");
-    this.#refArray.push(input);
-    input.type = "text";
-    input.className = this.controlClass;
-    if (i === 0) {
-      input.id = this.control1Id;
-    }
-    input.maxLength = 1;
-    input.value = this.#valueArray[i] || "";
-    input.addEventListener("input", _ref => {
-      let {
-        target
-      } = _ref;
-      const inputTarget = target;
-      if (inputTarget.value !== "" && this.#refArray[i + 1]) {
-        this.#refArray[i + 1].focus();
-      }
-      this.#valueArray[i] = inputTarget.value;
-      this.value = this.#valueArray.join("");
-    });
-    input.addEventListener("keydown", _ref2 => {
-      let {
-        key,
-        target
-      } = _ref2;
-      const inputTarget = target;
-      if (key === "Backspace" && inputTarget.value === "" && this.#refArray[i - 1] !== undefined) {
-        this.#refArray[i - 1].focus();
-      }
-    });
-    input.addEventListener("paste", _ref3 => {
-      let {
-        clipboardData
-      } = _ref3;
-      const pastedData = clipboardData.getData("Text");
-      let k = 0;
-      for (let j = i; j < this.length; j++) {
-        this.#valueArray[j] = pastedData.split("")[k];
-        this.#refArray[j].focus();
-        k = k + 1;
-      }
-      this.value = this.#valueArray.join("");
-    });
-    if (this.lightDom) {
-      this.appendChild(input);
-    } else {
-      this.shadowRoot.appendChild(input);
-    }
+    _assertClassBrand(_InputSplitted_brand, this, _observe).call(this);
   }
   onFocus() {
-    if (this.#refArray[0]) this.#refArray[0].focus();
+    if (_classPrivateFieldGet(_refArray, this)[0]) _classPrivateFieldGet(_refArray, this)[0].focus();
   }
-  #initDom() {
-    this.value = this.getAttribute("value") || "";
-    this.length = getLength(this);
-    if (this.lightDom) {
-      this.innerHTML = this.#styling;
-      this.addEventListener("focus", this.onFocus);
-    } else {
-      this.shadowRoot.innerHTML = this.#styling;
-      this.shadowRoot.addEventListener("focus", this.onFocus);
-    }
-    this.#valueArray = this.value.split("");
-    this.#refArray = [];
-    for (let i = 0; i < this.length; i++) {
-      this.#addInput(i);
-    }
+  disconnectedCallback() {
+    _assertClassBrand(_InputSplitted_brand, this, _unobserve).call(this);
   }
-  #observe() {
-    // Observer prüft, ob sich HTML-Attribute geändert haben.
-    // Props-Änderungen werden ohne bemerkt.
-    this.#observer = this.#observer || new MutationObserver(mutations => {
-      mutations.forEach(m => {
-        if (m.attributeName === "value") {
-          this.value = this.getAttribute("value") || this.value;
-        }
-        if (m.attributeName === "length") {
-          this.length = getLength(this);
-        }
-        if (m.attributeName === "control-class") {
-          this.controlClass = this.getAttribute("control-class") || this.controlClass;
-        }
-        if (m.attributeName === "control-1-id") {
-          this.control1Id = this.getAttribute("control-1-id") || this.control1Id;
-        }
-        if (m.attributeName === "light-dom") {
-          this.lightDom = this.getAttribute("light-dom") !== null;
-        }
-      });
-    });
-    this.#observer.observe(this, {
-      attributeFilter: ["value", "length", "control-class", "control-1-id", "light-dom"],
-      attributeOldValue: true,
-      childList: true,
-      subtree: true
-    });
+  static get formAssociated() {
+    return true;
   }
-  #unobserve() {
-    if (this.#observer) {
-      this.#observer.takeRecords();
-      this.#observer.disconnect();
+}
+function _addInput(i) {
+  const input = document.createElement("input");
+  _classPrivateFieldGet(_refArray, this).push(input);
+  input.type = "text";
+  input.className = this.controlClass;
+  if (i === 0) {
+    input.id = this.control1Id;
+  }
+  input.maxLength = 1;
+  input.value = _classPrivateFieldGet(_valueArray, this)[i] || "";
+  input.addEventListener("input", _ref => {
+    let {
+      target
+    } = _ref;
+    const inputTarget = target;
+    if (inputTarget.value !== "" && _classPrivateFieldGet(_refArray, this)[i + 1]) {
+      _classPrivateFieldGet(_refArray, this)[i + 1].focus();
+    }
+    _classPrivateFieldGet(_valueArray, this)[i] = inputTarget.value;
+    this.value = _classPrivateFieldGet(_valueArray, this).join("");
+  });
+  input.addEventListener("keydown", _ref2 => {
+    let {
+      key,
+      target
+    } = _ref2;
+    const inputTarget = target;
+    if (key === "Backspace" && inputTarget.value === "" && _classPrivateFieldGet(_refArray, this)[i - 1] !== undefined) {
+      _classPrivateFieldGet(_refArray, this)[i - 1].focus();
+    }
+  });
+  input.addEventListener("paste", _ref3 => {
+    let {
+      clipboardData
+    } = _ref3;
+    const pastedData = clipboardData.getData("Text");
+    let k = 0;
+    for (let j = i; j < this.length; j++) {
+      _classPrivateFieldGet(_valueArray, this)[j] = pastedData.split("")[k];
+      _classPrivateFieldGet(_refArray, this)[j].focus();
+      k = k + 1;
     }
+    this.value = _classPrivateFieldGet(_valueArray, this).join("");
+  });
+  if (this.lightDom) {
+    this.appendChild(input);
+  } else {
+    this.shadowRoot.appendChild(input);
   }
-  disconnectedCallback() {
-    this.#unobserve();
+}
+function _initDom() {
+  this.value = this.getAttribute("value") || "";
+  this.length = getLength(this);
+  if (this.lightDom) {
+    this.innerHTML = _classPrivateFieldGet(_styling, this);
+    this.addEventListener("focus", this.onFocus);
+  } else {
+    this.shadowRoot.innerHTML = _classPrivateFieldGet(_styling, this);
+    this.shadowRoot.addEventListener("focus", this.onFocus);
+  }
+  _classPrivateFieldSet(_valueArray, this, this.value.split(""));
+  _classPrivateFieldSet(_refArray, this, []);
+  for (let i = 0; i < this.length; i++) {
+    _assertClassBrand(_InputSplitted_brand, this, _addInput).call(this, i);
   }
-  static get formAssociated() {
-    return true;
+}
+function _observe() {
+  // Observer prüft, ob sich HTML-Attribute geändert haben.
+  // Props-Änderungen werden ohne bemerkt.
+  _classPrivateFieldSet(_observer, this, _classPrivateFieldGet(_observer, this) || new MutationObserver(mutations => {
+    mutations.forEach(m => {
+      if (m.attributeName === "value") {
+        this.value = this.getAttribute("value") || this.value;
+      }
+      if (m.attributeName === "length") {
+        this.length = getLength(this);
+      }
+      if (m.attributeName === "control-class") {
+        this.controlClass = this.getAttribute("control-class") || this.controlClass;
+      }
+      if (m.attributeName === "control-1-id") {
+        this.control1Id = this.getAttribute("control-1-id") || this.control1Id;
+      }
+      if (m.attributeName === "light-dom") {
+        this.lightDom = this.getAttribute("light-dom") !== null;
+      }
+    });
+  }));
+  _classPrivateFieldGet(_observer, this).observe(this, {
+    attributeFilter: ["value", "length", "control-class", "control-1-id", "light-dom"],
+    attributeOldValue: true,
+    childList: true,
+    subtree: true
+  });
+}
+function _unobserve() {
+  if (_classPrivateFieldGet(_observer, this)) {
+    _classPrivateFieldGet(_observer, this).takeRecords();
+    _classPrivateFieldGet(_observer, this).disconnect();
   }
 }
 function getLength(element) {

package/dist/js/progress.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";window.blueWeb=window.blueWeb||{},window.blueWeb.progress={progress:0},window.blueWeb.progress={...window.blueWeb.progress,start:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Loading data",t=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"fixed-top";const o="string"==typeof r||r instanceof String?document.querySelector(r.toString()):r;let i=document.getElementById(e);i||(i=document.createElement("div"),i.id=e,i.className=`progress ${t} rounded-0`,i.setAttribute("style","--bs-progress-height: 0.25rem"),i.setAttribute("role","progressbar"),i.setAttribute("aria-label",s),i.setAttribute("aria-valuemin","0"),i.setAttribute("aria-valuemax","100"),i.innerHTML='<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>',o.appendChild(i));const n=i.querySelector(".progress-bar");if(n){window.blueWeb.progress.progress=0;var b=setInterval((function(){var e=5*Math.random();window.blueWeb.progress.progress+=e,window.blueWeb.progress.progress=Math.min(window.blueWeb.progress.progress,100),n.style.width=window.blueWeb.progress.progress+"%",i?.setAttribute("aria-valuenow",Math.round(window.blueWeb.progress.progress).toString()),window.blueWeb.progress.progress>=100&&clearInterval(b)}),200)}},stop:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress";const r=document.getElementById(e);r&&(window.blueWeb.progress.progress=100,setTimeout((()=>{r.remove()}),500))}},window.blueWeb.progress})();
+(()=>{"use strict";function e(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function r(r){for(var o=1;o<arguments.length;o++){var n=null!=arguments[o]?arguments[o]:{};o%2?e(Object(n),!0).forEach(function(e){t(r,e,n[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):e(Object(n)).forEach(function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))})}return r}function t(e,r,t){return(r=function(e){var r=function(e){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var t=r.call(e,"string");if("object"!=typeof t)return t;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof r?r:r+""}(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}window.blueWeb=window.blueWeb||{},window.blueWeb.progress={progress:0},window.blueWeb.progress=r(r({},window.blueWeb.progress),{},{start:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress",r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document.body,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"Loading data",o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"fixed-top";const n="string"==typeof r||r instanceof String?document.querySelector(r.toString()):r;let s=document.getElementById(e);s||(s=document.createElement("div"),s.id=e,s.className="progress ".concat(o," rounded-0"),s.setAttribute("style","--bs-progress-height: 0.25rem"),s.setAttribute("role","progressbar"),s.setAttribute("aria-label",t),s.setAttribute("aria-valuemin","0"),s.setAttribute("aria-valuemax","100"),s.innerHTML='<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>',n.appendChild(s));const i=s.querySelector(".progress-bar");if(i){window.blueWeb.progress.progress=0;var b=setInterval(function(){var e,r=5*Math.random();window.blueWeb.progress.progress+=r,window.blueWeb.progress.progress=Math.min(window.blueWeb.progress.progress,100),i.style.width=window.blueWeb.progress.progress+"%",null===(e=s)||void 0===e||e.setAttribute("aria-valuenow",Math.round(window.blueWeb.progress.progress).toString()),window.blueWeb.progress.progress>=100&&clearInterval(b)},200)}},stop:function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"blueWebProgress";const r=document.getElementById(e);r&&(window.blueWeb.progress.progress=100,setTimeout(()=>{r.remove()},500))}}),window.blueWeb.progress})();

package/dist/js/progress.js

@@ -1,9 +1,13 @@
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 window.blueWeb = window.blueWeb || {};
 window.blueWeb.progress = {
   progress: 0
 };
-window.blueWeb.progress = {
-  ...window.blueWeb.progress,
+window.blueWeb.progress = _objectSpread(_objectSpread({}, window.blueWeb.progress), {}, {
   start: function () {
     let id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "blueWebProgress";
     let parent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document.body;
@@ -14,19 +18,20 @@ window.blueWeb.progress = {
     if (!progressEl) {
       progressEl = document.createElement("div");
       progressEl.id = id;
-      progressEl.className = `progress ${positionClass} rounded-0`;
+      progressEl.className = "progress ".concat(positionClass, " rounded-0");
       progressEl.setAttribute("style", "--bs-progress-height: 0.25rem");
       progressEl.setAttribute("role", "progressbar");
       progressEl.setAttribute("aria-label", ariaLabel);
       progressEl.setAttribute("aria-valuemin", "0");
       progressEl.setAttribute("aria-valuemax", "100");
-      progressEl.innerHTML = /*html*/`<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 0%"></div>`;
+      progressEl.innerHTML = /*html*/"<div class=\"progress-bar progress-bar-striped progress-bar-animated\" style=\"width: 0%\"></div>";
       parentEl.appendChild(progressEl);
     }
     const progressBar = progressEl.querySelector(".progress-bar");
     if (!progressBar) return;
     window.blueWeb.progress.progress = 0;
     var interval = setInterval(function () {
+      var _progressEl;
       // Simuliere einen natürlichen Anstieg
       var increment = Math.random() * 5; // Zufälliger Anstieg zwischen 0 und 5
       window.blueWeb.progress.progress += increment;
@@ -34,7 +39,7 @@ window.blueWeb.progress = {
 
       // Aktualisiere die Progressbar
       progressBar.style.width = window.blueWeb.progress.progress + "%";
-      progressEl?.setAttribute("aria-valuenow", Math.round(window.blueWeb.progress.progress).toString());
+      (_progressEl = progressEl) === null || _progressEl === void 0 || _progressEl.setAttribute("aria-valuenow", Math.round(window.blueWeb.progress.progress).toString());
 
       // Stoppe das Intervall, wenn 100% erreicht sind
       if (window.blueWeb.progress.progress >= 100) {
@@ -51,5 +56,5 @@ window.blueWeb.progress = {
       progressEl.remove();
     }, 500);
   }
-};
+});
 export default window.blueWeb.progress;

package/dist/js/read-view.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";class t extends HTMLElement{startX=0;startY=0;constructor(){super(),this.attachShadow({mode:"open"})}static get observedAttributes(){return["disabled"]}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){"disabled"===t&&this.updateDisabledState()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML='\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n\n                :host([disabled]) div {\n                    background-color: transparent;\n                }\n            </style>\n            <button aria-label="Edit"></button>\n            <div role="presentation">\n                <slot></slot>\n            </div>\n        ',this.button=this.shadowRoot.querySelector("button"),this.container=this.shadowRoot.querySelector("div"),this.button.addEventListener("click",this.onEditRequested.bind(this)),this.container.addEventListener("click",this.onReadViewClick.bind(this)),this.container.addEventListener("mousedown",this.onMouseDown.bind(this)),this.updateDisabledState())}updateDisabledState(){const t=this.hasAttribute("disabled");this.button?.setAttribute("aria-disabled",String(t)),this.container?.setAttribute("aria-disabled",String(t))}onEditRequested(){this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.hasAttribute("disabled")||(this.startX=t.clientX,this.startY=t.clientY)}mouseHasMovedAfterMouseDown(t){return Math.abs(this.startX-t.clientX)>=5||Math.abs(this.startY-t.clientY)>=5}onReadViewClick(t){this.hasAttribute("disabled")||"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("bl-read-view",t)})();
+(()=>{"use strict";var t={};function e(t,e,n){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}t.d=(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class n extends HTMLElement{constructor(){super(),e(this,"startX",0),e(this,"startY",0),this.attachShadow({mode:"open"})}static get observedAttributes(){return["disabled"]}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){"disabled"===t&&this.updateDisabledState()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML='\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n\n                :host([disabled]) div {\n                    background-color: transparent;\n                }\n            </style>\n            <button aria-label="Edit"></button>\n            <div role="presentation">\n                <slot></slot>\n            </div>\n        ',this.button=this.shadowRoot.querySelector("button"),this.container=this.shadowRoot.querySelector("div"),this.button.addEventListener("click",this.onEditRequested.bind(this)),this.container.addEventListener("click",this.onReadViewClick.bind(this)),this.container.addEventListener("mousedown",this.onMouseDown.bind(this)),this.updateDisabledState())}updateDisabledState(){var t,e;const n=this.hasAttribute("disabled");null===(t=this.button)||void 0===t||t.setAttribute("aria-disabled",String(n)),null===(e=this.container)||void 0===e||e.setAttribute("aria-disabled",String(n))}onEditRequested(){this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.hasAttribute("disabled")||(this.startX=t.clientX,this.startY=t.clientY)}mouseHasMovedAfterMouseDown(t){return Math.abs(this.startX-t.clientX)>=5||Math.abs(this.startY-t.clientY)>=5}onReadViewClick(t){this.hasAttribute("disabled")||"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("bl-read-view",n)})();

package/dist/js/read-view.js

@@ -1,3 +1,6 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 const DRAG_THRESHOLD = 5;
 
 /**
@@ -20,10 +23,10 @@ const DRAG_THRESHOLD = 5;
  * })
  */
 export class ReadView extends HTMLElement {
-  startX = 0;
-  startY = 0;
   constructor() {
     super();
+    _defineProperty(this, "startX", 0);
+    _defineProperty(this, "startY", 0);
     this.attachShadow({
       mode: "open"
     });
@@ -41,49 +44,7 @@ export class ReadView extends HTMLElement {
   }
   render() {
     if (!this.shadowRoot) return;
-    this.shadowRoot.innerHTML = /* HTML */`
-            <style>
-                button {
-                    display: block;
-                    margin: 0;
-                    padding: 0;
-                    appearance: none;
-                    background-color: transparent;
-                    border: none;
-                    line-height: 1;
-                    outline: 0;
-                }
-
-                button:focus-visible + div {
-                    outline: 0;
-                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);
-                    border-color: rgba(var(--bs-primary-rgb), 50%);
-                }
-
-                div {
-                    display: inline-block;
-                    box-sizing: border-box;
-                    width: auto;
-                    max-width: 100%;
-                    border-color: transparent;
-                    border-radius: var(--bs-border-radius-sm, 3px);
-                    border: 1px solid transparent;
-                    transition: background 0.2s;
-                }
-
-                div:hover {
-                    background-color: var(--bs-secondary-bg-subtle);
-                }
-
-                :host([disabled]) div {
-                    background-color: transparent;
-                }
-            </style>
-            <button aria-label="Edit"></button>
-            <div role="presentation">
-                <slot></slot>
-            </div>
-        `;
+    this.shadowRoot.innerHTML = /* HTML */"\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n\n                :host([disabled]) div {\n                    background-color: transparent;\n                }\n            </style>\n            <button aria-label=\"Edit\"></button>\n            <div role=\"presentation\">\n                <slot></slot>\n            </div>\n        ";
     this.button = this.shadowRoot.querySelector("button");
     this.container = this.shadowRoot.querySelector("div");
     this.button.addEventListener("click", this.onEditRequested.bind(this));
@@ -92,9 +53,10 @@ export class ReadView extends HTMLElement {
     this.updateDisabledState();
   }
   updateDisabledState() {
+    var _this$button, _this$container;
     const isDisabled = this.hasAttribute("disabled");
-    this.button?.setAttribute("aria-disabled", String(isDisabled));
-    this.container?.setAttribute("aria-disabled", String(isDisabled));
+    (_this$button = this.button) === null || _this$button === void 0 || _this$button.setAttribute("aria-disabled", String(isDisabled));
+    (_this$container = this.container) === null || _this$container === void 0 || _this$container.setAttribute("aria-disabled", String(isDisabled));
   }
   onEditRequested() {
     if (this.hasAttribute("disabled")) return;

package/dist/js/select-list.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML='<slot style="border-radius: inherit"></slot>',this.activeIndex=-1,this.items=[],this.inputElement=null}connectedCallback(){this.setAttribute("role","listbox"),this.tabIndex=-1,this.updateItems();const t=this.getAttribute("for");this.inputElement=t?document.getElementById(t):null,this.inputElement&&(this.inputElement.setAttribute("role","combobox"),this.inputElement.setAttribute("aria-controls",this.id),this.inputElement.setAttribute("aria-expanded","true"),this.inputElement.addEventListener("keydown",this.onKeyDown.bind(this))),this.addEventListener("keydown",this.onKeyDown.bind(this)),this.addEventListener("click",(t=>{const e=t.target instanceof Element?t.target.closest("[data-blue-select-list-index]"):null;if(e&&e.hasAttribute("data-blue-select-list-index")){const t=Number(e.getAttribute("data-blue-select-list-index"));this.select(t)}}))}updateItems(){this.items=Array.from(this.children),this.items.forEach(((t,e)=>{t.hasAttribute("id")||t.setAttribute("id",`${this.id}-option-${e}`),t.setAttribute("data-blue-select-list-index",e.toString()),t.setAttribute("aria-selected","false"),t.setAttribute("role","option"),t.tabIndex=-1}))}onKeyDown(t){if(console.log("select-list onKeyDown"),this.items.length)if("ArrowDown"===t.key)t.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.items.length,this.updateActiveItem();else if("ArrowUp"===t.key)t.preventDefault(),this.activeIndex=(this.activeIndex-1+this.items.length)%this.items.length,this.updateActiveItem();else if("Enter"===t.key&&this.activeIndex>=0){const t=this.items[this.activeIndex];t?.click()}}updateActiveItem(){this.items.forEach(((t,e)=>{const i=e===this.activeIndex;t.classList.toggle("active",i),t.setAttribute("aria-selected",i.toString())}));const t=this.items[this.activeIndex];t&&this.inputElement&&(this.inputElement.setAttribute("aria-activedescendant",t.id),t.scrollIntoView({block:"nearest"}))}select(t){this.activeIndex=t,this.updateActiveItem();const e=this.items[t];e&&(this.dispatchEvent(new CustomEvent("bl-select",{detail:{index:t,item:e},bubbles:!0,composed:!0})),e.click())}}customElements.define("bl-select-list",t)})();
+(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML='<slot style="border-radius: inherit"></slot>',this.activeIndex=-1,this.items=[],this.inputElement=null}connectedCallback(){this.setAttribute("role","listbox"),this.tabIndex=-1,this.updateItems();const t=this.getAttribute("for");this.inputElement=t?document.getElementById(t):null,this.inputElement&&(this.inputElement.setAttribute("role","combobox"),this.inputElement.setAttribute("aria-controls",this.id),this.inputElement.setAttribute("aria-expanded","true"),this.inputElement.addEventListener("keydown",this.onKeyDown.bind(this))),this.addEventListener("keydown",this.onKeyDown.bind(this)),this.addEventListener("click",t=>{const e=t.target instanceof Element?t.target.closest("[data-blue-select-list-index]"):null;if(e&&e.hasAttribute("data-blue-select-list-index")){const t=Number(e.getAttribute("data-blue-select-list-index"));this.select(t)}})}updateItems(){this.items=Array.from(this.children),this.items.forEach((t,e)=>{t.hasAttribute("id")||t.setAttribute("id","".concat(this.id,"-option-").concat(e)),t.setAttribute("data-blue-select-list-index",e.toString()),t.setAttribute("aria-selected","false"),t.setAttribute("role","option"),t.tabIndex=-1})}onKeyDown(t){if(console.log("select-list onKeyDown"),this.items.length)if("ArrowDown"===t.key)t.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.items.length,this.updateActiveItem();else if("ArrowUp"===t.key)t.preventDefault(),this.activeIndex=(this.activeIndex-1+this.items.length)%this.items.length,this.updateActiveItem();else if("Enter"===t.key&&this.activeIndex>=0){const t=this.items[this.activeIndex];null==t||t.click()}}updateActiveItem(){this.items.forEach((t,e)=>{const i=e===this.activeIndex;t.classList.toggle("active",i),t.setAttribute("aria-selected",i.toString())});const t=this.items[this.activeIndex];t&&this.inputElement&&(this.inputElement.setAttribute("aria-activedescendant",t.id),t.scrollIntoView({block:"nearest"}))}select(t){this.activeIndex=t,this.updateActiveItem();const e=this.items[t];e&&(this.dispatchEvent(new CustomEvent("bl-select",{detail:{index:t,item:e},bubbles:!0,composed:!0})),e.click())}}customElements.define("bl-select-list",t)})();

package/dist/js/select-list.js

@@ -21,7 +21,7 @@ export class SelectList extends HTMLElement {
     this.attachShadow({
       mode: "open"
     });
-    this.shadowRoot.innerHTML = `<slot style="border-radius: inherit"></slot>`;
+    this.shadowRoot.innerHTML = "<slot style=\"border-radius: inherit\"></slot>";
     this.activeIndex = -1;
     this.items = [];
     this.inputElement = null;
@@ -53,7 +53,7 @@ export class SelectList extends HTMLElement {
     this.items = Array.from(this.children);
     this.items.forEach((el, i) => {
       if (!el.hasAttribute("id")) {
-        el.setAttribute("id", `${this.id}-option-${i}`);
+        el.setAttribute("id", "".concat(this.id, "-option-").concat(i));
       }
       el.setAttribute("data-blue-select-list-index", i.toString());
       el.setAttribute("aria-selected", "false");
@@ -74,7 +74,7 @@ export class SelectList extends HTMLElement {
       this.updateActiveItem();
     } else if (e.key === "Enter" && this.activeIndex >= 0) {
       const item = this.items[this.activeIndex];
-      item?.click();
+      item === null || item === void 0 || item.click();
     }
   }
   updateActiveItem() {

package/dist/js/side-layout.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.addEventListeners()}render(){if(!this.shadowRoot)return;const n=(document.documentElement.lang||navigator.language).startsWith("de")?"Seitenleiste umschalten":"Toggle sidebar";this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    --spacing: 0.25rem;\n                    --drawer-side-shadow:\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n                    --toggler-size: calc(\n                        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n                            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n                            var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n                    );\n                    --side-width: 18rem;\n                    --base-z-index: 0;\n                }\n\n                .root {\n                    position: relative;\n                    display: grid;\n                    height: 100%;\n                    grid-template-columns:\n                        0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n                        auto;\n                    grid-template-rows: var(--toggler-size) auto;\n                }\n\n                .hidden-input {\n                    position: fixed;\n                    --size: 0;\n                    height: var(--size);\n                    width: var(--size);\n                    appearance: none;\n                    opacity: 0;\n                }\n\n                .toggler {\n                    grid-column-start: 2;\n                }\n\n                .hidden-input:focus-visible + .toggler ::slotted(*) {\n                    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n                }\n\n                @media (width < 64rem) {\n                    .toggler[for="layout-expand"] {\n                        display: none;\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    .toggler[for="layout-drawer"] {\n                        display: none;\n                    }\n                }\n\n                .header {\n                    grid-column-start: 3;\n                    grid-column-end: 5;\n                }\n\n                .side {\n                    overflow: auto;\n                }\n\n                @media (width < 64rem) {\n                    .side {\n                        translate: -100% 0;\n                        height: 100%;\n                        transition: translate 0.2s ease;\n                    }\n\n                    #layout-drawer:checked ~ .side {\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        z-index: calc(var(--base-z-index) + 1);\n                        translate: 0;\n                        width: calc(var(--spacing) * 80);\n                        box-shadow: var(--drawer-side-shadow);\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .side {\n                        grid-column-start: 2;\n                        grid-column-end: 4;\n                    }\n                }\n\n                .main {\n                    overflow: auto;\n                    grid-column-start: 2;\n                    grid-column-end: 5;\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .main {\n                        grid-column-start: 4;\n                    }\n                }\n\n                .overlay {\n                    position: fixed;\n                    z-index: var(--base-z-index);\n                    inset: 0;\n                    display: none;\n                }\n\n                @media (width < 64rem) {\n                    #layout-drawer:checked ~ .overlay {\n                        display: block;\n                    }\n                }\n            </style>\n\n            <div class="root">\n                <input\n                    id="layout-expand"\n                    type="checkbox"\n                    class="hidden-input"\n                    ${localStorage.getItem("side-layout-shrink")?"":"checked"}\n                />\n                <label class="toggler" for="layout-expand" title="${n}" role="button">\n                    <slot name="expand-toggler">🍔</slot>\n                </label>\n\n                <input id="layout-drawer" type="checkbox" class="hidden-input" />\n                <label class="toggler" for="layout-drawer" title="${n}" role="button">\n                    <slot name="drawer-toggler">🍔</slot>\n                </label>\n\n                <header class="header"><slot name="header"></slot></header>\n                <div class="side"><slot name="side"></slot></div>\n                <main class="main"><slot></slot></main>\n                <label aria-label="Close sidebar" for="layout-drawer" class="overlay"\n                    ><slot name="overlay"></slot\n                ></label>\n            </div>\n        `}addEventListeners(){this.shadowRoot&&this.shadowRoot.querySelector("#layout-expand").addEventListener("change",this.handleLayoutExpandChange.bind(this))}handleLayoutExpandChange(n){n.target.checked?localStorage.removeItem("side-layout-shrink"):localStorage.setItem("side-layout-shrink","true")}}customElements.define("bl-side-layout",n)})();
+(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.addEventListeners()}render(){if(!this.shadowRoot)return;const n=(document.documentElement.lang||navigator.language).startsWith("de")?"Seitenleiste umschalten":"Toggle sidebar";this.shadowRoot.innerHTML='\n            <style>\n                :host {\n                    --spacing: 0.25rem;\n                    --drawer-side-shadow:\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n                    --toggler-size: calc(\n                        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n                            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n                            var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n                    );\n                    --side-width: 18rem;\n                    --base-z-index: 0;\n                }\n\n                .root {\n                    position: relative;\n                    display: grid;\n                    height: 100%;\n                    grid-template-columns:\n                        0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n                        auto;\n                    grid-template-rows: var(--toggler-size) auto;\n                }\n\n                .hidden-input {\n                    position: fixed;\n                    --size: 0;\n                    height: var(--size);\n                    width: var(--size);\n                    appearance: none;\n                    opacity: 0;\n                }\n\n                .toggler {\n                    grid-column-start: 2;\n                }\n\n                .hidden-input:focus-visible + .toggler ::slotted(*) {\n                    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n                }\n\n                @media (width < 64rem) {\n                    .toggler[for="layout-expand"] {\n                        display: none;\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    .toggler[for="layout-drawer"] {\n                        display: none;\n                    }\n                }\n\n                .header {\n                    grid-column-start: 3;\n                    grid-column-end: 5;\n                }\n\n                .side {\n                    overflow: auto;\n                }\n\n                @media (width < 64rem) {\n                    .side {\n                        translate: -100% 0;\n                        height: 100%;\n                        transition: translate 0.2s ease;\n                    }\n\n                    #layout-drawer:checked ~ .side {\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        z-index: calc(var(--base-z-index) + 1);\n                        translate: 0;\n                        width: calc(var(--spacing) * 80);\n                        box-shadow: var(--drawer-side-shadow);\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .side {\n                        grid-column-start: 2;\n                        grid-column-end: 4;\n                    }\n                }\n\n                .main {\n                    overflow: auto;\n                    grid-column-start: 2;\n                    grid-column-end: 5;\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .main {\n                        grid-column-start: 4;\n                    }\n                }\n\n                .overlay {\n                    position: fixed;\n                    z-index: var(--base-z-index);\n                    inset: 0;\n                    display: none;\n                }\n\n                @media (width < 64rem) {\n                    #layout-drawer:checked ~ .overlay {\n                        display: block;\n                    }\n                }\n            </style>\n\n            <div class="root">\n                <input\n                    id="layout-expand"\n                    type="checkbox"\n                    class="hidden-input"\n                    '.concat(localStorage.getItem("side-layout-shrink")?"":"checked",'\n                />\n                <label class="toggler" for="layout-expand" title="').concat(n,'" role="button">\n                    <slot name="expand-toggler">🍔</slot>\n                </label>\n\n                <input id="layout-drawer" type="checkbox" class="hidden-input" />\n                <label class="toggler" for="layout-drawer" title="').concat(n,'" role="button">\n                    <slot name="drawer-toggler">🍔</slot>\n                </label>\n\n                <header class="header"><slot name="header"></slot></header>\n                <div class="side"><slot name="side"></slot></div>\n                <main class="main"><slot></slot></main>\n                <label aria-label="Close sidebar" for="layout-drawer" class="overlay"\n                    ><slot name="overlay"></slot\n                ></label>\n            </div>\n        ')}addEventListeners(){this.shadowRoot&&this.shadowRoot.querySelector("#layout-expand").addEventListener("change",this.handleLayoutExpandChange.bind(this))}handleLayoutExpandChange(n){n.target.checked?localStorage.removeItem("side-layout-shrink"):localStorage.setItem("side-layout-shrink","true")}}customElements.define("bl-side-layout",n)})();