@solid-design-system/components 1.7.0 → 1.9.0

package/dist/package/components/popup/popup.d.ts

@@ -0,0 +1,42 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdPopup extends SolidElement {
+    private anchorEl;
+    private cleanup;
+    popup: HTMLElement;
+    private arrowEl;
+    anchor: Element | string;
+    active: boolean;
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    strategy: 'absolute' | 'fixed';
+    distance: number;
+    skidding: number;
+    arrow: boolean;
+    arrowPlacement: 'start' | 'end' | 'center' | 'anchor';
+    arrowPadding: number;
+    flip: boolean;
+    flipFallbackPlacements: string;
+    flipFallbackStrategy: 'best-fit' | 'initial';
+    flipBoundary: Element | Element[];
+    flipPadding: number;
+    shift: boolean;
+    shiftBoundary: Element | Element[];
+    shiftPadding: number;
+    autoSize: 'horizontal' | 'vertical' | 'both';
+    sync: 'width' | 'height' | 'both';
+    autoSizeBoundary: Element | Element[];
+    autoSizePadding: number;
+    connectedCallback(): Promise<void>;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): Promise<void>;
+    private handleAnchorChange;
+    private start;
+    private stop;
+    reposition(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-popup': SdPopup;
+    }
+}

package/dist/package/components/popup/popup.js

@@ -0,0 +1,318 @@
+import { autoUpdate, offset, size, flip, shift, arrow, computePosition } from "@floating-ui/dom";
+import { css, html } from "lit";
+import { query, property, customElement } from "lit/decorators.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdPopup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.active = false;
+    this.placement = "top";
+    this.strategy = "absolute";
+    this.distance = 0;
+    this.skidding = 0;
+    this.arrow = false;
+    this.arrowPlacement = "anchor";
+    this.arrowPadding = 10;
+    this.flip = false;
+    this.flipFallbackPlacements = "";
+    this.flipFallbackStrategy = "best-fit";
+    this.flipPadding = 0;
+    this.shift = false;
+    this.shiftPadding = 0;
+    this.autoSizePadding = 0;
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.start();
+  }
+  disconnectedCallback() {
+    this.stop();
+  }
+  async updated(changedProps) {
+    super.updated(changedProps);
+    if (changedProps.has("active")) {
+      if (this.active) {
+        this.start();
+      } else {
+        this.stop();
+      }
+    }
+    if (changedProps.has("anchor")) {
+      this.handleAnchorChange();
+    }
+    if (this.active) {
+      await this.updateComplete;
+      this.reposition();
+    }
+  }
+  async handleAnchorChange() {
+    await this.stop();
+    if (this.anchor && typeof this.anchor === "string") {
+      const root = this.getRootNode();
+      this.anchorEl = root.getElementById(this.anchor);
+    } else if (this.anchor instanceof HTMLElement) {
+      this.anchorEl = this.anchor;
+    } else {
+      this.anchorEl = this.querySelector('[slot="anchor"]');
+    }
+    if (this.anchorEl instanceof HTMLSlotElement) {
+      this.anchorEl = this.anchorEl.assignedElements({ flatten: true })[0];
+    }
+    if (!this.anchorEl) {
+      throw new Error(
+        "Invalid anchor element: no anchor could be found using the anchor slot or the anchor attribute."
+      );
+    }
+    this.start();
+  }
+  start() {
+    if (!this.anchorEl) {
+      return;
+    }
+    this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
+      this.reposition();
+    });
+  }
+  async stop() {
+    return new Promise((resolve) => {
+      if (this.cleanup) {
+        this.cleanup();
+        this.cleanup = void 0;
+        this.removeAttribute("data-current-placement");
+        this.style.removeProperty("--auto-size-available-width");
+        this.style.removeProperty("--auto-size-available-height");
+        requestAnimationFrame(() => resolve());
+      } else {
+        resolve();
+      }
+    });
+  }
+  /** Forces the popup to recalculate and reposition itself. */
+  reposition() {
+    if (!this.active || !this.anchorEl) {
+      return;
+    }
+    const middleware = [
+      // The offset middleware goes first
+      offset({ mainAxis: this.distance, crossAxis: this.skidding })
+    ];
+    if (this.sync) {
+      middleware.push(
+        size({
+          apply: ({ rects }) => {
+            const syncWidth = this.sync === "width" || this.sync === "both";
+            const syncHeight = this.sync === "height" || this.sync === "both";
+            this.popup.style.width = syncWidth ? `${rects.reference.width}px` : "";
+            this.popup.style.height = syncHeight ? `${rects.reference.height}px` : "";
+          }
+        })
+      );
+    } else {
+      this.popup.style.width = "";
+      this.popup.style.height = "";
+    }
+    if (this.flip) {
+      middleware.push(
+        flip({
+          boundary: this.flipBoundary,
+          // @ts-expect-error - We're converting a string attribute to an array here
+          fallbackPlacements: this.flipFallbackPlacements,
+          fallbackStrategy: this.flipFallbackStrategy === "best-fit" ? "bestFit" : "initialPlacement",
+          padding: this.flipPadding
+        })
+      );
+    }
+    if (this.shift) {
+      middleware.push(
+        shift({
+          boundary: this.shiftBoundary,
+          padding: this.shiftPadding
+        })
+      );
+    }
+    if (this.autoSize) {
+      middleware.push(
+        size({
+          boundary: this.autoSizeBoundary,
+          padding: this.autoSizePadding,
+          apply: ({ availableWidth, availableHeight }) => {
+            if (this.autoSize === "vertical" || this.autoSize === "both") {
+              this.style.setProperty("--auto-size-available-height", `${availableHeight}px`);
+            } else {
+              this.style.removeProperty("--auto-size-available-height");
+            }
+            if (this.autoSize === "horizontal" || this.autoSize === "both") {
+              this.style.setProperty("--auto-size-available-width", `${availableWidth}px`);
+            } else {
+              this.style.removeProperty("--auto-size-available-width");
+            }
+          }
+        })
+      );
+    } else {
+      this.style.removeProperty("--auto-size-available-width");
+      this.style.removeProperty("--auto-size-available-height");
+    }
+    if (this.arrow) {
+      middleware.push(
+        arrow({
+          element: this.arrowEl,
+          padding: this.arrowPadding
+        })
+      );
+    }
+    computePosition(this.anchorEl, this.popup, {
+      placement: this.placement,
+      middleware,
+      strategy: this.strategy
+    }).then(({ x, y, middlewareData, placement }) => {
+      const isRtl = getComputedStyle(this).direction === "rtl";
+      const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[placement.split("-")[0]];
+      this.setAttribute("data-current-placement", placement);
+      Object.assign(this.popup.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      });
+      if (this.arrow) {
+        const arrowX = middlewareData.arrow.x;
+        const arrowY = middlewareData.arrow.y;
+        let top = "";
+        let right = "";
+        let bottom = "";
+        let left = "";
+        if (this.arrowPlacement === "start") {
+          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          top = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          right = isRtl ? value : "";
+          left = isRtl ? "" : value;
+        } else if (this.arrowPlacement === "end") {
+          const value = typeof arrowX === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+          right = isRtl ? "" : value;
+          left = isRtl ? value : "";
+          bottom = typeof arrowY === "number" ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : "";
+        } else if (this.arrowPlacement === "center") {
+          left = typeof arrowX === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
+          top = typeof arrowY === "number" ? `calc(50% - var(--arrow-size-diagonal))` : "";
+        } else {
+          left = typeof arrowX === "number" ? `${arrowX}px` : "";
+          top = typeof arrowY === "number" ? `${arrowY}px` : "";
+        }
+        Object.assign(this.arrowEl.style, {
+          top,
+          right,
+          bottom,
+          left,
+          [staticSide]: "calc(var(--arrow-size-diagonal) * -1)"
+        });
+      }
+    });
+    this.emit("sd-reposition");
+  }
+  render() {
+    return html`<slot name="anchor" @slotchange="${this.handleAnchorChange}"></slot><div part="popup" class="${cx("isolate", this.strategy !== "fixed" ? "absolute" : "fixed", !this.active && "hidden")}"><slot></slot>${this.arrow ? html`<div part="arrow" class="absolute rotate-45 -z-10" role="presentation"></div>` : ""}</div>`;
+  }
+};
+SdPopup.styles = [
+  SolidElement.styles,
+  componentStyles,
+  css`:host{--arrow-color:var(--sd-color-neutral-1000);--arrow-size:6px;--arrow-size-diagonal:calc(var(--arrow-size) * 0.7071);--arrow-padding-offset:calc(var(--arrow-size-diagonal) - var(--arrow-size));display:contents}[part=popup]{max-width:var(--auto-size-available-width,none);max-height:var(--auto-size-available-height,none)}[part=arrow]{width:calc(var(--arrow-size-diagonal) * 2);height:calc(var(--arrow-size-diagonal) * 2);background:var(--arrow-color)}`
+];
+__decorateClass([
+  query('[part="popup"]')
+], SdPopup.prototype, "popup", 2);
+__decorateClass([
+  query('[part="arrow"]')
+], SdPopup.prototype, "arrowEl", 2);
+__decorateClass([
+  property()
+], SdPopup.prototype, "anchor", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdPopup.prototype, "active", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdPopup.prototype, "placement", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdPopup.prototype, "strategy", 2);
+__decorateClass([
+  property({ type: Number })
+], SdPopup.prototype, "distance", 2);
+__decorateClass([
+  property({ type: Number })
+], SdPopup.prototype, "skidding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SdPopup.prototype, "arrow", 2);
+__decorateClass([
+  property({ attribute: "arrow-placement" })
+], SdPopup.prototype, "arrowPlacement", 2);
+__decorateClass([
+  property({ attribute: "arrow-padding", type: Number })
+], SdPopup.prototype, "arrowPadding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SdPopup.prototype, "flip", 2);
+__decorateClass([
+  property({
+    attribute: "flip-fallback-placements",
+    converter: {
+      fromAttribute: (value) => {
+        return value.split(" ").map((p) => p.trim()).filter((p) => p !== "");
+      },
+      toAttribute: (value) => {
+        return value.join(" ");
+      }
+    }
+  })
+], SdPopup.prototype, "flipFallbackPlacements", 2);
+__decorateClass([
+  property({ attribute: "flip-fallback-strategy" })
+], SdPopup.prototype, "flipFallbackStrategy", 2);
+__decorateClass([
+  property({ type: Object })
+], SdPopup.prototype, "flipBoundary", 2);
+__decorateClass([
+  property({ attribute: "flip-padding", type: Number })
+], SdPopup.prototype, "flipPadding", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SdPopup.prototype, "shift", 2);
+__decorateClass([
+  property({ type: Object })
+], SdPopup.prototype, "shiftBoundary", 2);
+__decorateClass([
+  property({ attribute: "shift-padding", type: Number })
+], SdPopup.prototype, "shiftPadding", 2);
+__decorateClass([
+  property({ attribute: "auto-size" })
+], SdPopup.prototype, "autoSize", 2);
+__decorateClass([
+  property()
+], SdPopup.prototype, "sync", 2);
+__decorateClass([
+  property({ type: Object })
+], SdPopup.prototype, "autoSizeBoundary", 2);
+__decorateClass([
+  property({ attribute: "auto-size-padding", type: Number })
+], SdPopup.prototype, "autoSizePadding", 2);
+SdPopup = __decorateClass([
+  customElement("sd-popup")
+], SdPopup);
+export {
+  SdPopup as default
+};

package/dist/package/internal/modal.d.ts

@@ -0,0 +1,12 @@
+export default class Modal {
+    element: HTMLElement;
+    tabDirection: 'forward' | 'backward';
+    constructor(element: HTMLElement);
+    activate(): void;
+    deactivate(): void;
+    isActive(): boolean;
+    checkFocus(): void;
+    handleFocusIn(): void;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyUp(): void;
+}

package/dist/package/internal/modal.js

@@ -0,0 +1,52 @@
+import { getTabbableBoundary } from "./tabbable.js";
+let activeModals = [];
+class Modal {
+  constructor(element) {
+    this.tabDirection = "forward";
+    this.element = element;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+  }
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener("focusin", this.handleFocusIn);
+    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keyup", this.handleKeyUp);
+  }
+  deactivate() {
+    activeModals = activeModals.filter((modal) => modal !== this.element);
+    document.removeEventListener("focusin", this.handleFocusIn);
+    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keyup", this.handleKeyUp);
+  }
+  isActive() {
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+  checkFocus() {
+    if (this.isActive()) {
+      if (!this.element.matches(":focus-within")) {
+        const { start, end } = getTabbableBoundary(this.element);
+        const target = this.tabDirection === "forward" ? start : end;
+        if (typeof (target == null ? void 0 : target.focus) === "function") {
+          target.focus({ preventScroll: true });
+        }
+      }
+    }
+  }
+  handleFocusIn() {
+    this.checkFocus();
+  }
+  handleKeyDown(event) {
+    if (event.key === "Tab" && event.shiftKey) {
+      this.tabDirection = "backward";
+      requestAnimationFrame(() => this.checkFocus());
+    }
+  }
+  handleKeyUp() {
+    this.tabDirection = "forward";
+  }
+}
+export {
+  Modal as default
+};

package/dist/package/internal/offset.d.ts

@@ -0,0 +1,4 @@
+export declare function getOffset(element: HTMLElement, parent: HTMLElement): {
+    top: number;
+    left: number;
+};

package/dist/package/internal/offset.js

@@ -0,0 +1,9 @@
+function getOffset(element, parent) {
+  return {
+    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
+  };
+}
+export {
+  getOffset
+};

package/dist/package/internal/scroll.d.ts

@@ -0,0 +1,3 @@
+export declare function lockBodyScrolling(lockingEl: HTMLElement): void;
+export declare function unlockBodyScrolling(lockingEl: HTMLElement): void;
+export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical' | 'both', behavior?: 'smooth' | 'auto'): void;

package/dist/package/internal/scroll.js

@@ -0,0 +1,49 @@
+import { getOffset } from "./offset.js";
+const locks = /* @__PURE__ */ new Set();
+function getScrollbarWidth() {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+}
+function lockBodyScrolling(lockingEl) {
+  locks.add(lockingEl);
+  if (!document.body.classList.contains("sd-scroll-lock")) {
+    const scrollbarWidth = getScrollbarWidth();
+    document.body.classList.add("sd-scroll-lock");
+    document.body.style.setProperty("--sd-scroll-lock-size", `${scrollbarWidth}px`);
+  }
+}
+function unlockBodyScrolling(lockingEl) {
+  locks.delete(lockingEl);
+  if (locks.size === 0) {
+    document.body.classList.remove("sd-scroll-lock");
+    document.body.style.removeProperty("--sd-scrollbar-width");
+  }
+}
+function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+  if (direction === "horizontal" || direction === "both") {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+    }
+  }
+  if (direction === "vertical" || direction === "both") {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+    }
+  }
+}
+export {
+  lockBodyScrolling,
+  scrollIntoView,
+  unlockBodyScrolling
+};

package/dist/package/internal/string.d.ts

@@ -0,0 +1 @@
+export declare function uppercaseFirstLetter(string: string): string;

package/dist/package/internal/string.js

@@ -0,0 +1,6 @@
+function uppercaseFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+export {
+  uppercaseFirstLetter
+};

package/dist/package/internal/tabbable.d.ts

@@ -0,0 +1,4 @@
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement | null;
+    end: HTMLElement | null;
+};

package/dist/package/internal/tabbable.js

@@ -0,0 +1,50 @@
+function isTabbable(el) {
+  const tag = el.tagName.toLowerCase();
+  if (el.getAttribute("tabindex") === "-1") {
+    return false;
+  }
+  if (el.hasAttribute("disabled")) {
+    return false;
+  }
+  if (el.hasAttribute("aria-disabled") && el.getAttribute("aria-disabled") !== "false") {
+    return false;
+  }
+  if (tag === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) {
+    return false;
+  }
+  if (el.offsetParent === null) {
+    return false;
+  }
+  if (window.getComputedStyle(el).visibility === "hidden") {
+    return false;
+  }
+  if ((tag === "audio" || tag === "video") && el.hasAttribute("controls")) {
+    return true;
+  }
+  if (el.hasAttribute("tabindex")) {
+    return true;
+  }
+  if (el.hasAttribute("contenteditable") && el.getAttribute("contenteditable") !== "false") {
+    return true;
+  }
+  return ["button", "input", "select", "textarea", "a", "audio", "video", "summary"].includes(tag);
+}
+function getTabbableBoundary(root) {
+  const allElements = [];
+  function walk(el) {
+    if (el instanceof HTMLElement) {
+      allElements.push(el);
+      if (el.shadowRoot !== null && el.shadowRoot.mode === "open") {
+        walk(el.shadowRoot);
+      }
+    }
+    [...el.children].forEach((e) => walk(e));
+  }
+  walk(root);
+  const start = allElements.find((el) => isTabbable(el)) ?? null;
+  const end = allElements.reverse().find((el) => isTabbable(el)) ?? null;
+  return { start, end };
+}
+export {
+  getTabbableBoundary
+};

package/dist/package/solid-components.d.ts

@@ -4,9 +4,12 @@ export { default as SdBadge } from './components/badge/badge';
 export { default as SdBrandshape } from './components/brandshape/brandshape';
 export { default as SdButton } from './components/button/button';
 export { default as SdDivider } from './components/divider/divider';
+export { default as SdDrawer } from './components/drawer/drawer';
+export { default as SdDropdown } from './components/dropdown/dropdown';
 export { default as SdIcon } from './components/icon/icon';
 export { default as SdInclude } from './components/include/include';
 export { default as SdLink } from './components/link/link';
+export { default as SdPopup } from './components/popup/popup';
 export { default as SdSpinner } from './components/spinner/spinner';
 export { default as SdTeaser } from './components/teaser/teaser';
 export * from './utilities/icon-library';

package/dist/package/solid-components.js

@@ -4,11 +4,14 @@ import { default as default4 } from "./components/badge/badge.js";
 import { default as default5 } from "./components/brandshape/brandshape.js";
 import { default as default6 } from "./components/button/button.js";
 import { default as default7 } from "./components/divider/divider.js";
-import { default as default8 } from "./components/icon/icon.js";
-import { default as default9 } from "./components/include/include.js";
-import { default as default10 } from "./components/link/link.js";
-import { default as default11 } from "./components/spinner/spinner.js";
-import { default as default12 } from "./components/teaser/teaser.js";
+import { default as default8 } from "./components/drawer/drawer.js";
+import { default as default9 } from "./components/dropdown/dropdown.js";
+import { default as default10 } from "./components/icon/icon.js";
+import { default as default11 } from "./components/include/include.js";
+import { default as default12 } from "./components/link/link.js";
+import { default as default13 } from "./components/popup/popup.js";
+import { default as default14 } from "./components/spinner/spinner.js";
+import { default as default15 } from "./components/teaser/teaser.js";
 import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
 import { LocalizeController } from "./utilities/localize.js";
 export {
@@ -19,11 +22,14 @@ export {
   default5 as SdBrandshape,
   default6 as SdButton,
   default7 as SdDivider,
-  default8 as SdIcon,
-  default9 as SdInclude,
-  default10 as SdLink,
-  default11 as SdSpinner,
-  default12 as SdTeaser,
+  default8 as SdDrawer,
+  default9 as SdDropdown,
+  default10 as SdIcon,
+  default11 as SdInclude,
+  default12 as SdLink,
+  default13 as SdPopup,
+  default14 as SdSpinner,
+  default15 as SdTeaser,
   registerIconLibrary,
   unregisterIconLibrary
 };