blue-web 1.3.1 → 1.3.3

package/dist/js/actions.bundle.js

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

package/dist/js/actions.d.ts

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

package/dist/js/actions.js

@@ -0,0 +1,70 @@
+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 callback = () => {
+    requestAnimationFrame(updateActions);
+  };
+  const resizeObserver = new ResizeObserver(callback);
+  resizeObserver.observe(actionsElement);
+  const mutationObserver = new MutationObserver(callback);
+  mutationObserver.observe(actionsElement, {
+    attributes: false,
+    childList: true,
+    subtree: true
+  });
+  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,
+    mutationObserver,
+    destroy() {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      document.removeEventListener("click", outsideClickHandler);
+    }
+  };
+}
+window.blueWeb = window.blueWeb || {};
+window.blueWeb.actions = {
+  init
+};

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

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

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

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

package/dist/js/color-mode.js

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

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

@@ -0,0 +1 @@
+(()=>{"use strict";class e extends HTMLElement{connectedCallback(){this.render()}disconnectedCallback(){this.confirmTimeout&&clearTimeout(this.confirmTimeout)}render(){const e=document.createElement("form");e.style.position="relative";const t=Array.from(this.childNodes);this.appendChild(e),t.forEach((t=>e.appendChild(t))),e.addEventListener("submit",this.onSubmit.bind(this)),e.addEventListener("keydown",this.onKeydown.bind(this)),e.addEventListener("focusout",this.onFocusout.bind(this))}onSubmit(e){e.preventDefault(),this.confirm()}onKeydown(e){"Esc"!==e.key&&"Escape"!==e.key||this.dismiss()}onFocusout(e){this.contains(e.relatedTarget)||(this.confirmTimeout&&clearTimeout(this.confirmTimeout),this.confirmTimeout=setTimeout((()=>{this.confirm(),this.confirmTimeout=null}),500))}confirm(){this.dispatchEvent(new CustomEvent("Confirm",{bubbles:!0,composed:!0}))}dismiss(){this.dispatchEvent(new CustomEvent("Dismiss",{bubbles:!0,composed:!0}))}}customElements.define("edit-view",e)})();

package/dist/js/edit-view.d.ts

@@ -0,0 +1,14 @@
+/**
+ * EditView is a Custom Element that displays a edit view of its content and allows the user to confirm or dismiss the changes.
+ */
+export declare class EditView extends HTMLElement {
+    private confirmTimeout;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private render;
+    private onSubmit;
+    private onKeydown;
+    private onFocusout;
+    private confirm;
+    private dismiss;
+}

package/dist/js/edit-view.js

@@ -0,0 +1,56 @@
+/**
+ * EditView is a Custom Element that displays a edit view of its content and allows the user to confirm or dismiss the changes.
+ */
+export class EditView extends HTMLElement {
+  connectedCallback() {
+    this.render();
+  }
+  disconnectedCallback() {
+    if (this.confirmTimeout) {
+      clearTimeout(this.confirmTimeout);
+    }
+  }
+  render() {
+    const root = document.createElement("form");
+    root.style.position = "relative";
+    const children = Array.from(this.childNodes);
+    this.appendChild(root);
+    children.forEach(child => root.appendChild(child));
+    root.addEventListener("submit", this.onSubmit.bind(this));
+    root.addEventListener("keydown", this.onKeydown.bind(this));
+    root.addEventListener("focusout", this.onFocusout.bind(this));
+  }
+  onSubmit(e) {
+    e.preventDefault();
+    this.confirm();
+  }
+  onKeydown(e) {
+    if (e.key === "Esc" || e.key === "Escape") {
+      this.dismiss();
+    }
+  }
+  onFocusout(e) {
+    if (!this.contains(e.relatedTarget)) {
+      if (this.confirmTimeout) {
+        clearTimeout(this.confirmTimeout);
+      }
+      this.confirmTimeout = setTimeout(() => {
+        this.confirm();
+        this.confirmTimeout = null;
+      }, 500);
+    }
+  }
+  confirm() {
+    this.dispatchEvent(new CustomEvent("Confirm", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  dismiss() {
+    this.dispatchEvent(new CustomEvent("Dismiss", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+}
+customElements.define("edit-view", EditView);

package/dist/js/input-splitted.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";class t extends HTMLElement{#t;#e=[];#s=[];#i=!1;get lightDom(){return this.#i}set lightDom(t){this.#i=t,!0===this.lightDom?this.innerHTML=this.#r:(this.shadowRoot||this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=this.#r),this.#l()}#h="";get value(){return this.#h}set value(t){const e=this.#h;this.#h=t,this.#e=this.value.split("");for(let t=0;t<this.length;t++)this.#s[t]&&(this.#s[t].value=this.#e[t]||"");e!==t&&this.dispatchEvent(new CustomEvent("changeValue",{bubbles:!0,detail:t}))}#o=0;get length(){return this.#o}set length(t){if(this.#o=t,this.length>this.#s.length)for(let t=0;t<this.length;t++)!this.#s[t]&&this.didInit&&this.#n(this.#s.length);else if(this.length<this.#s.length){const t=Math.abs(this.#s.length-this.length);for(let e=0;e<t;e++){const t=this.#s.pop();t?.remove()}}this.#s=[...this.#s]}#a="";get controlClass(){return this.#a}set controlClass(t){this.#a=t;for(const t of this.#s)t.className=this.controlClass}#u="";get control1Id(){return this.#u}set control1Id(t){this.#u=t,this.#s[0]&&(this.#s[0].id=this.control1Id)}#r="<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>";didInit=!1;constructor(){super(),this.onFocus=this.onFocus.bind(this)}connectedCallback(){this.didInit=!0,this.lightDom=null!==this.getAttribute("light-dom"),this.#l(),this.value=this.getAttribute("value")||this.value,this.length=e(this),this.controlClass=this.getAttribute("control-class")||this.controlClass,this.control1Id=this.getAttribute("control-1-id")||this.control1Id,this.#d()}#n(t){const e=document.createElement("input");this.#s.push(e),e.type="text",e.className=this.controlClass,0===t&&(e.id=this.control1Id),e.maxLength=1,e.value=this.#e[t]||"",e.addEventListener("input",(e=>{let{target:s}=e;const i=s;""!==i.value&&this.#s[t+1]&&this.#s[t+1].focus(),this.#e[t]=i.value,this.value=this.#e.join("")})),e.addEventListener("keydown",(e=>{let{key:s,target:i}=e;"Backspace"===s&&""===i.value&&void 0!==this.#s[t-1]&&this.#s[t-1].focus()})),e.addEventListener("paste",(e=>{let{clipboardData:s}=e;const i=s.getData("Text");let r=0;for(let e=t;e<this.length;e++)this.#e[e]=i.split("")[r],this.#s[e].focus(),r+=1;this.value=this.#e.join("")})),this.lightDom?this.appendChild(e):this.shadowRoot.appendChild(e)}onFocus(){this.#s[0]&&this.#s[0].focus()}#l(){this.value=this.getAttribute("value")||"",this.length=e(this),this.lightDom?(this.innerHTML=this.#r,this.addEventListener("focus",this.onFocus)):(this.shadowRoot.innerHTML=this.#r,this.shadowRoot.addEventListener("focus",this.onFocus)),this.#e=this.value.split(""),this.#s=[];for(let t=0;t<this.length;t++)this.#n(t)}#d(){this.#t=this.#t||new MutationObserver((t=>{t.forEach((t=>{"value"===t.attributeName&&(this.value=this.getAttribute("value")||this.value),"length"===t.attributeName&&(this.length=e(this)),"control-class"===t.attributeName&&(this.controlClass=this.getAttribute("control-class")||this.controlClass),"control-1-id"===t.attributeName&&(this.control1Id=this.getAttribute("control-1-id")||this.control1Id),"light-dom"===t.attributeName&&(this.lightDom=null!==this.getAttribute("light-dom"))}))})),this.#t.observe(this,{attributeFilter:["value","length","control-class","control-1-id","light-dom"],attributeOldValue:!0,childList:!0,subtree:!0})}#c(){this.#t&&(this.#t.takeRecords(),this.#t.disconnect())}disconnectedCallback(){this.#c()}static get formAssociated(){return!0}}function e(t){const e=t.getAttribute("length");if(e)return parseInt(e)}customElements.define("bl-input-splitted",t)})();

package/dist/js/input-splitted.d.ts

@@ -0,0 +1,19 @@
+export declare class InputSplitted extends HTMLElement {
+    #private;
+    get lightDom(): boolean;
+    set lightDom(_lightDom: boolean);
+    get value(): string;
+    set value(_value: string);
+    get length(): number;
+    set length(_length: number);
+    get controlClass(): string;
+    set controlClass(value: string);
+    get control1Id(): string;
+    set control1Id(value: string);
+    didInit: boolean;
+    constructor();
+    connectedCallback(): void;
+    onFocus(): void;
+    disconnectedCallback(): void;
+    static get formAssociated(): boolean;
+}

package/dist/js/input-splitted.js

@@ -0,0 +1,229 @@
+export class InputSplitted extends HTMLElement {
+  #observer;
+  #valueArray = [];
+  #refArray = [];
+  #lightDom = false;
+  get lightDom() {
+    return this.#lightDom;
+  }
+  set lightDom(_lightDom) {
+    this.#lightDom = _lightDom;
+    if (this.lightDom === true) {
+      this.innerHTML = this.#styling;
+    } else {
+      if (!this.shadowRoot) this.attachShadow({
+        mode: "open",
+        delegatesFocus: true
+      });
+      this.shadowRoot.innerHTML = this.#styling;
+    }
+    this.#initDom();
+  }
+  #value = "";
+  get value() {
+    return this.#value;
+  }
+  set value(_value) {
+    const oldValue = this.#value;
+    this.#value = _value;
+    this.#valueArray = this.value.split("");
+    for (let i = 0; i < this.length; i++) {
+      if (this.#refArray[i]) this.#refArray[i].value = this.#valueArray[i] || "";
+    }
+    if (oldValue !== _value) {
+      this.dispatchEvent(new CustomEvent("changeValue", {
+        bubbles: true,
+        detail: _value
+      }));
+    }
+  }
+  #length = 0;
+  get length() {
+    return this.#length;
+  }
+  set length(_length) {
+    this.#length = _length;
+    if (this.length > this.#refArray.length) {
+      // Added length
+
+      for (let j = 0; j < this.length; j++) {
+        if (!this.#refArray[j] && this.didInit) {
+          this.#addInput(this.#refArray.length);
+        }
+      }
+    } else if (this.length < this.#refArray.length) {
+      // Removed length
+
+      const difference = Math.abs(this.#refArray.length - this.length);
+      for (let j = 0; j < difference; j++) {
+        const el = this.#refArray.pop();
+        el?.remove();
+      }
+    }
+    this.#refArray = [...this.#refArray];
+  }
+  #controlClass = "";
+  get controlClass() {
+    return this.#controlClass;
+  }
+  set controlClass(value) {
+    this.#controlClass = value;
+    for (const el of this.#refArray) {
+      el.className = this.controlClass;
+    }
+  }
+  #control1Id = "";
+  get control1Id() {
+    return this.#control1Id;
+  }
+  set control1Id(value) {
+    this.#control1Id = value;
+    if (this.#refArray[0]) {
+      this.#refArray[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();
+    this.onFocus = this.onFocus.bind(this);
+  }
+  connectedCallback() {
+    this.didInit = true;
+    this.lightDom = this.getAttribute("light-dom") !== null;
+    this.#initDom();
+    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);
+    }
+  }
+  onFocus() {
+    if (this.#refArray[0]) this.#refArray[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);
+    }
+  }
+  #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
+    });
+  }
+  #unobserve() {
+    if (this.#observer) {
+      this.#observer.takeRecords();
+      this.#observer.disconnect();
+    }
+  }
+  disconnectedCallback() {
+    this.#unobserve();
+  }
+  static get formAssociated() {
+    return true;
+  }
+}
+function getLength(element) {
+  const attr = element.getAttribute("length");
+  if (attr) return parseInt(attr);
+}
+customElements.define("bl-input-splitted", InputSplitted);

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

@@ -0,0 +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)})();

package/dist/js/read-view.d.ts

@@ -0,0 +1,35 @@
+/**
+ * A Web Component that displays a read view of its content and allows the user to switch to an edit view.
+ * Fires event "EditRequested" when the user clicks the read view.
+ * @element read-view
+ * @fires EditRequested
+ * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
+ * @cssprop --bs-primary-rgb - The primary color as an RGB value.
+ * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
+ * @cssprop --bs-border-radius-sm - The border radius for the read view.
+ * @slot - The content to display in the read view.
+ * @example
+ * <bl-read-view id="my-read-view" onEditRequested="setEditing(true)">
+ *    <a href="#">bla</a> {value}
+ * </bl-read-view>
+ * @example
+ * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
+ *    setEditing(true)
+ * })
+ */
+export declare class ReadView extends HTMLElement {
+    private button;
+    private container;
+    private startX;
+    private startY;
+    constructor();
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private render;
+    private updateDisabledState;
+    private onEditRequested;
+    private onMouseDown;
+    private mouseHasMovedAfterMouseDown;
+    private onReadViewClick;
+}

package/dist/js/read-view.js

@@ -0,0 +1,123 @@
+const DRAG_THRESHOLD = 5;
+
+/**
+ * A Web Component that displays a read view of its content and allows the user to switch to an edit view.
+ * Fires event "EditRequested" when the user clicks the read view.
+ * @element read-view
+ * @fires EditRequested
+ * @attr {boolean} disabled - Disables the component, preventing interactions and removing hover effects.
+ * @cssprop --bs-primary-rgb - The primary color as an RGB value.
+ * @cssprop --bs-secondary-bg-subtle - The subtle background color for the read view.
+ * @cssprop --bs-border-radius-sm - The border radius for the read view.
+ * @slot - The content to display in the read view.
+ * @example
+ * <bl-read-view id="my-read-view" onEditRequested="setEditing(true)">
+ *    <a href="#">bla</a> {value}
+ * </bl-read-view>
+ * @example
+ * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
+ *    setEditing(true)
+ * })
+ */
+export class ReadView extends HTMLElement {
+  startX = 0;
+  startY = 0;
+  constructor() {
+    super();
+    this.attachShadow({
+      mode: "open"
+    });
+  }
+  static get observedAttributes() {
+    return ["disabled"];
+  }
+  connectedCallback() {
+    this.render();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "disabled") {
+      this.updateDisabledState();
+    }
+  }
+  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.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 isDisabled = this.hasAttribute("disabled");
+    this.button?.setAttribute("aria-disabled", String(isDisabled));
+    this.container?.setAttribute("aria-disabled", String(isDisabled));
+  }
+  onEditRequested() {
+    if (this.hasAttribute("disabled")) return;
+    this.dispatchEvent(new CustomEvent("EditRequested", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  onMouseDown(event) {
+    if (this.hasAttribute("disabled")) return;
+    this.startX = event.clientX;
+    this.startY = event.clientY;
+  }
+  mouseHasMovedAfterMouseDown(event) {
+    return Math.abs(this.startX - event.clientX) >= DRAG_THRESHOLD || Math.abs(this.startY - event.clientY) >= DRAG_THRESHOLD;
+  }
+  onReadViewClick(event) {
+    if (this.hasAttribute("disabled")) return;
+    const target = event.target;
+    if (target.tagName.toLowerCase() !== "a" && !this.mouseHasMovedAfterMouseDown(event)) {
+      event.preventDefault();
+      this.onEditRequested();
+    }
+  }
+}
+customElements.define("bl-read-view", ReadView);

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

@@ -0,0 +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)})();

package/dist/js/select-list.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A Web Component that provides a keyboard-accessible selectable list, typically used for dropdowns or autocomplete lists.
+ * Together with `popover` and CSS Anchoring, it's also useful to create a dropdown list.
+ * Supports keyboard navigation and selection, and integrates with an input element for combobox behavior.
+ *
+ * The Web Component will automatically set attributes for accessibility.
+ *
+ * @element blue-select-list
+ * @attr {string} for - The id of the input element to associate as the combobox controller.
+ * @slot - The list options.
+ * @example
+ * <input id="my-input" />
+ * <blue-select-list for="my-input">
+ *   <div>Option 1</div>
+ *   <div>Option 2</div>
+ * </blue-select-list>
+ */
+export declare class SelectList extends HTMLElement {
+    activeIndex: number;
+    items: HTMLElement[];
+    inputElement: HTMLElement | null;
+    constructor();
+    connectedCallback(): void;
+    updateItems(): void;
+    onKeyDown(e: {
+        key: string;
+        preventDefault: () => void;
+    }): void;
+    updateActiveItem(): void;
+    select(index: number): void;
+}