blue-web 1.3.1 → 1.3.3

package/dist/js/select-list.js

@@ -0,0 +1,112 @@
+/**
+ * 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 class SelectList 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();
+
+    // Input zuweisen über Attribut oder fallback
+    const inputId = this.getAttribute("for");
+    this.inputElement = inputId ? document.getElementById(inputId) : null;
+    if (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", e => {
+      const target = e.target instanceof Element ? e.target.closest("[data-blue-select-list-index]") : null;
+      if (target && target.hasAttribute("data-blue-select-list-index")) {
+        const index = Number(target.getAttribute("data-blue-select-list-index"));
+        this.select(index);
+      }
+    });
+  }
+  updateItems() {
+    this.items = Array.from(this.children);
+    this.items.forEach((el, i) => {
+      if (!el.hasAttribute("id")) {
+        el.setAttribute("id", `${this.id}-option-${i}`);
+      }
+      el.setAttribute("data-blue-select-list-index", i.toString());
+      el.setAttribute("aria-selected", "false");
+      el.setAttribute("role", "option");
+      el.tabIndex = -1;
+    });
+  }
+  onKeyDown(e) {
+    console.log("select-list onKeyDown");
+    if (!this.items.length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.activeIndex = (this.activeIndex + 1) % this.items.length;
+      this.updateActiveItem();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;
+      this.updateActiveItem();
+    } else if (e.key === "Enter" && this.activeIndex >= 0) {
+      const item = this.items[this.activeIndex];
+      item?.click();
+    }
+  }
+  updateActiveItem() {
+    this.items.forEach((el, i) => {
+      const active = i === this.activeIndex;
+      el.classList.toggle("active", active);
+      el.setAttribute("aria-selected", active.toString());
+    });
+    const activeItem = this.items[this.activeIndex];
+    if (activeItem && this.inputElement) {
+      this.inputElement.setAttribute("aria-activedescendant", activeItem.id);
+      activeItem.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }
+  select(index) {
+    this.activeIndex = index;
+    this.updateActiveItem();
+    const selectedItem = this.items[index];
+    if (selectedItem) {
+      // Fire a custom event with the selected item and index
+      this.dispatchEvent(new CustomEvent("bl-select", {
+        detail: {
+          index,
+          item: selectedItem
+        },
+        bubbles: true,
+        composed: true
+      }));
+      selectedItem.click();
+    }
+  }
+}
+customElements.define("bl-select-list", SelectList);

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

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

package/dist/js/side-layout.d.ts

@@ -0,0 +1,7 @@
+export declare class SideLayout extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+    render(): void;
+    addEventListeners(): void;
+    handleLayoutExpandChange(event: Event): void;
+}

package/dist/js/side-layout.js

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