@ds-autonomie/web-components 1.16.2 → 1.18.0

package/dist/chunks/chunk.BFVPPAWG.js

@@ -0,0 +1,277 @@
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  split_panel_styles_default
+} from "./chunk.CFUNT7FK.js";
+import {
+  LocalizeController
+} from "./chunk.G3MRVMJ4.js";
+import {
+  watch
+} from "./chunk.6IH66JBY.js";
+import {
+  ShoelaceElement
+} from "./chunk.YCXTCVAZ.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  __decorateClass
+} from "./chunk.6M63UXML.js";
+
+// src/components/split-panel/split-panel.ts
+import { html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// src/internal/drag.ts
+function drag(container, options) {
+  function move(pointerEvent) {
+    const dims = container.getBoundingClientRect();
+    const defaultView = container.ownerDocument.defaultView;
+    const offsetX = dims.left + defaultView.pageXOffset;
+    const offsetY = dims.top + defaultView.pageYOffset;
+    const x = pointerEvent.pageX - offsetX;
+    const y = pointerEvent.pageY - offsetY;
+    if (options == null ? void 0 : options.onMove) {
+      options.onMove(x, y);
+    }
+  }
+  function stop() {
+    document.removeEventListener("pointermove", move);
+    document.removeEventListener("pointerup", stop);
+    if (options == null ? void 0 : options.onStop) {
+      options.onStop();
+    }
+  }
+  document.addEventListener("pointermove", move, { passive: true });
+  document.addEventListener("pointerup", stop);
+  if ((options == null ? void 0 : options.initialEvent) instanceof PointerEvent) {
+    move(options.initialEvent);
+  }
+}
+
+// src/components/split-panel/split-panel.ts
+var DSASplitPanel = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.position = 50;
+    this.vertical = false;
+    this.disabled = false;
+    this.snapThreshold = 12;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.resizeObserver = new ResizeObserver(
+      (entries) => this.handleResize(entries)
+    );
+    this.updateComplete.then(() => this.resizeObserver.observe(this));
+    this.detectSize();
+    this.cachedPositionInPixels = this.percentageToPixels(this.position);
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this);
+  }
+  detectSize() {
+    const { width, height } = this.getBoundingClientRect();
+    this.size = this.vertical ? height : width;
+  }
+  percentageToPixels(value) {
+    return this.size * (value / 100);
+  }
+  pixelsToPercentage(value) {
+    return value / this.size * 100;
+  }
+  handleDrag(event) {
+    const isRtl = this.localize.dir() === "rtl";
+    if (this.disabled) {
+      return;
+    }
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    drag(this, {
+      onMove: (x, y) => {
+        let newPositionInPixels = this.vertical ? y : x;
+        if (this.primary === "end") {
+          newPositionInPixels = this.size - newPositionInPixels;
+        }
+        if (this.snap) {
+          const snaps = this.snap.split(" ");
+          snaps.forEach((value) => {
+            let snapPoint;
+            if (value.endsWith("%")) {
+              snapPoint = this.size * (parseFloat(value) / 100);
+            } else {
+              snapPoint = parseFloat(value);
+            }
+            if (isRtl && !this.vertical) {
+              snapPoint = this.size - snapPoint;
+            }
+            if (newPositionInPixels >= snapPoint - this.snapThreshold && newPositionInPixels <= snapPoint + this.snapThreshold) {
+              newPositionInPixels = snapPoint;
+            }
+          });
+        }
+        this.position = clamp(
+          this.pixelsToPercentage(newPositionInPixels),
+          0,
+          100
+        );
+      },
+      initialEvent: event
+    });
+  }
+  handleKeyDown(event) {
+    if (this.disabled) {
+      return;
+    }
+    if ([
+      "ArrowLeft",
+      "ArrowRight",
+      "ArrowUp",
+      "ArrowDown",
+      "Home",
+      "End"
+    ].includes(event.key)) {
+      let newPosition = this.position;
+      const incr = (event.shiftKey ? 10 : 1) * (this.primary === "end" ? -1 : 1);
+      event.preventDefault();
+      if (event.key === "ArrowLeft" && !this.vertical || event.key === "ArrowUp" && this.vertical) {
+        newPosition -= incr;
+      }
+      if (event.key === "ArrowRight" && !this.vertical || event.key === "ArrowDown" && this.vertical) {
+        newPosition += incr;
+      }
+      if (event.key === "Home") {
+        newPosition = this.primary === "end" ? 100 : 0;
+      }
+      if (event.key === "End") {
+        newPosition = this.primary === "end" ? 0 : 100;
+      }
+      this.position = clamp(newPosition, 0, 100);
+    }
+  }
+  handleResize(entries) {
+    const { width, height } = entries[0].contentRect;
+    this.size = this.vertical ? height : width;
+    if (isNaN(this.cachedPositionInPixels) || this.position === Infinity) {
+      this.cachedPositionInPixels = Number(
+        this.getAttribute("position-in-pixels")
+      );
+      this.positionInPixels = Number(this.getAttribute("position-in-pixels"));
+      this.position = this.pixelsToPercentage(this.positionInPixels);
+    }
+    if (this.primary) {
+      this.position = this.pixelsToPercentage(this.cachedPositionInPixels);
+    }
+  }
+  handlePositionChange() {
+    this.cachedPositionInPixels = this.percentageToPixels(this.position);
+    this.positionInPixels = this.percentageToPixels(this.position);
+    this.emit("dsa-reposition");
+  }
+  handlePositionInPixelsChange() {
+    this.position = this.pixelsToPercentage(this.positionInPixels);
+  }
+  handleVerticalChange() {
+    this.detectSize();
+  }
+  render() {
+    const gridTemplate = this.vertical ? "gridTemplateRows" : "gridTemplateColumns";
+    const gridTemplateAlt = this.vertical ? "gridTemplateColumns" : "gridTemplateRows";
+    const isRtl = this.localize.dir() === "rtl";
+    const primary = `
+      clamp(
+        0%,
+        clamp(
+          var(--min),
+          ${this.position}% - var(--divider-width) / 2,
+          var(--max)
+        ),
+        calc(100% - var(--divider-width))
+      )
+    `;
+    const secondary = "auto";
+    if (this.primary === "end") {
+      if (isRtl && !this.vertical) {
+        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+      } else {
+        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+      }
+    } else {
+      if (isRtl && !this.vertical) {
+        this.style[gridTemplate] = `${secondary} var(--divider-width) ${primary}`;
+      } else {
+        this.style[gridTemplate] = `${primary} var(--divider-width) ${secondary}`;
+      }
+    }
+    this.style[gridTemplateAlt] = "";
+    return html`
+      <slot name="start" part="panel start" class="start"></slot>
+
+      <div
+        part="divider"
+        class="divider"
+        tabindex=${ifDefined(this.disabled ? void 0 : "0")}
+        role="separator"
+        aria-valuenow=${this.position}
+        aria-valuemin="0"
+        aria-valuemax="100"
+        aria-label=${this.localize.term("resize")}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleDrag}
+        @touchstart=${this.handleDrag}
+      >
+        <dsa-icon name="drag_indicator" class="drag-icon"></dsa-icon>
+      </div>
+
+      <slot name="end" part="panel end" class="end"></slot>
+    `;
+  }
+};
+DSASplitPanel.styles = [component_styles_default, split_panel_styles_default];
+__decorateClass([
+  query(".divider")
+], DSASplitPanel.prototype, "divider", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], DSASplitPanel.prototype, "position", 2);
+__decorateClass([
+  property({ attribute: "position-in-pixels", type: Number })
+], DSASplitPanel.prototype, "positionInPixels", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSASplitPanel.prototype, "vertical", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DSASplitPanel.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], DSASplitPanel.prototype, "primary", 2);
+__decorateClass([
+  property()
+], DSASplitPanel.prototype, "snap", 2);
+__decorateClass([
+  property({ type: Number, attribute: "snap-threshold" })
+], DSASplitPanel.prototype, "snapThreshold", 2);
+__decorateClass([
+  watch("position")
+], DSASplitPanel.prototype, "handlePositionChange", 1);
+__decorateClass([
+  watch("positionInPixels")
+], DSASplitPanel.prototype, "handlePositionInPixelsChange", 1);
+__decorateClass([
+  watch("vertical")
+], DSASplitPanel.prototype, "handleVerticalChange", 1);
+DSASplitPanel = __decorateClass([
+  customElement("dsa-split-panel")
+], DSASplitPanel);
+
+export {
+  DSASplitPanel
+};

package/dist/chunks/{chunk.4DRKFRDB.js → chunk.BNPEW3RO.js}

@@ -214,13 +214,6 @@ var input_mask_styles_default = css`
     outline: none;
   }
 
-  .input-mask__suffix {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    cursor: default;
-  }
-
   /*
    * Size modifiers
    */
@@ -268,7 +261,8 @@ var input_mask_styles_default = css`
    *  Clearable
    */
 
-  .input-mask__clear {
+  .input-mask__clear,
+  .input-mask__suffix {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -292,8 +286,8 @@ var input_mask_styles_default = css`
     outline: none;
   }
 
-  .input-mask__prefix-icon,
-  .input-mask__prefix {
+  .input-mask__prefix,
+  .input-mask__suffix {
     color: var(--dsa-wc-input-icon-color);
     cursor: pointer;
   }

package/dist/chunks/{chunk.V5J2RAQ5.js → chunk.CFISAFUN.js}

@@ -1,6 +1,6 @@
 import {
   popup_styles_default
-} from "./chunk.XD5JM6WF.js";
+} from "./chunk.WYUQG5BJ.js";
 import {
   ShoelaceElement
 } from "./chunk.YCXTCVAZ.js";
@@ -43,6 +43,83 @@ var DSAPopup = class extends ShoelaceElement {
     this.shift = false;
     this.shiftPadding = 0;
     this.autoSizePadding = 0;
+    this.hoverBridge = false;
+    this.updateHoverBridge = () => {
+      if (this.hoverBridge && this.anchorEl) {
+        const anchorRect = this.anchorEl.getBoundingClientRect();
+        const popupRect = this.popup.getBoundingClientRect();
+        const isVertical = this.placement.includes("top") || this.placement.includes("bottom");
+        let topLeftX = 0;
+        let topLeftY = 0;
+        let topRightX = 0;
+        let topRightY = 0;
+        let bottomLeftX = 0;
+        let bottomLeftY = 0;
+        let bottomRightX = 0;
+        let bottomRightY = 0;
+        if (isVertical) {
+          if (anchorRect.top < popupRect.top) {
+            topLeftX = anchorRect.left;
+            topLeftY = anchorRect.bottom;
+            topRightX = anchorRect.right;
+            topRightY = anchorRect.bottom;
+            bottomLeftX = popupRect.left;
+            bottomLeftY = popupRect.top;
+            bottomRightX = popupRect.right;
+            bottomRightY = popupRect.top;
+          } else {
+            topLeftX = popupRect.left;
+            topLeftY = popupRect.bottom;
+            topRightX = popupRect.right;
+            topRightY = popupRect.bottom;
+            bottomLeftX = anchorRect.left;
+            bottomLeftY = anchorRect.top;
+            bottomRightX = anchorRect.right;
+            bottomRightY = anchorRect.top;
+          }
+        } else {
+          if (anchorRect.left < popupRect.left) {
+            topLeftX = anchorRect.right;
+            topLeftY = anchorRect.top;
+            topRightX = popupRect.left;
+            topRightY = popupRect.top;
+            bottomLeftX = anchorRect.right;
+            bottomLeftY = anchorRect.bottom;
+            bottomRightX = popupRect.left;
+            bottomRightY = popupRect.bottom;
+          } else {
+            topLeftX = popupRect.right;
+            topLeftY = popupRect.top;
+            topRightX = anchorRect.left;
+            topRightY = anchorRect.top;
+            bottomLeftX = popupRect.right;
+            bottomLeftY = popupRect.bottom;
+            bottomRightX = anchorRect.left;
+            bottomRightY = anchorRect.bottom;
+          }
+        }
+        this.style.setProperty("--hover-bridge-top-left-x", `${topLeftX}px`);
+        this.style.setProperty("--hover-bridge-top-left-y", `${topLeftY}px`);
+        this.style.setProperty("--hover-bridge-top-right-x", `${topRightX}px`);
+        this.style.setProperty("--hover-bridge-top-right-y", `${topRightY}px`);
+        this.style.setProperty(
+          "--hover-bridge-bottom-left-x",
+          `${bottomLeftX}px`
+        );
+        this.style.setProperty(
+          "--hover-bridge-bottom-left-y",
+          `${bottomLeftY}px`
+        );
+        this.style.setProperty(
+          "--hover-bridge-bottom-right-x",
+          `${bottomRightX}px`
+        );
+        this.style.setProperty(
+          "--hover-bridge-bottom-right-y",
+          `${bottomRightY}px`
+        );
+      }
+    };
   }
   async connectedCallback() {
     super.connectedCallback();
@@ -247,12 +324,21 @@ var DSAPopup = class extends ShoelaceElement {
         });
       }
     });
+    requestAnimationFrame(() => this.updateHoverBridge());
     this.emit("dsa-reposition");
   }
   render() {
     return html`
       <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
 
+      <span
+        part="hover-bridge"
+        class=${classMap({
+      "popup-hover-bridge": true,
+      "popup-hover-bridge--visible": this.hoverBridge && this.active
+    })}
+      ></span>
+
       <div
         part="popup"
         class=${classMap({
@@ -352,6 +438,9 @@ __decorateClass([
 __decorateClass([
   property({ attribute: "auto-size-padding", type: Number })
 ], DSAPopup.prototype, "autoSizePadding", 2);
+__decorateClass([
+  property({ attribute: "hover-bridge", type: Boolean })
+], DSAPopup.prototype, "hoverBridge", 2);
 DSAPopup = __decorateClass([
   customElement("dsa-popup")
 ], DSAPopup);

package/dist/chunks/chunk.CFUNT7FK.js

@@ -0,0 +1,96 @@
+// src/components/split-panel/split-panel.styles.ts
+import { css } from "lit";
+var split_panel_styles_default = css`
+  :host {
+    --divider-width: var(--dsa-wc-split-panel-width);
+    --divider-hit-area: var(--dsa-wc-split-panel-hit-area);
+    --min: 0%;
+    --max: 100%;
+
+    display: grid;
+  }
+
+  .start,
+  .end {
+    overflow: hidden;
+  }
+
+  .divider {
+    flex: 0 0 var(--divider-width);
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--dsa-wc-split-panel-color);
+    z-index: 1;
+  }
+
+  .drag-icon {
+    position: absolute;
+    border-radius: var(--dsa-radius-4);
+    background-color: var(--dsa-wc-split-panel-color);
+    color: var(--dsa-wc-split-panel-icon-color);
+    padding: var(--dsa-wc-split-panel-icon-padding);
+  }
+
+  .divider:focus {
+    outline: none;
+  }
+
+  :host(:not([disabled])) .divider:focus-visible {
+    outline: var(--dsa-wc-focus-ring);
+  }
+  :host(:not([disabled])) .divider:focus-visible .drag-icon {
+    outline: var(--dsa-wc-focus-ring);
+  }
+
+  :host([disabled]) .divider {
+    cursor: not-allowed;
+  }
+
+  /* Horizontal */
+  :host(:not([vertical], [disabled])) .divider {
+    cursor: col-resize;
+  }
+
+  :host(:not([vertical])) .divider::after {
+    display: flex;
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    width: var(--divider-hit-area);
+  }
+
+  /* Vertical */
+  :host([vertical]) {
+    flex-direction: column;
+  }
+
+  :host([vertical]) .drag-icon {
+    rotate: 90deg;
+  }
+
+  :host([vertical]:not([disabled])) .divider {
+    cursor: row-resize;
+  }
+
+  :host([vertical]) .divider::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
+    height: var(--divider-hit-area);
+  }
+
+  @media (forced-colors: active) {
+    .divider,
+    .drag-icon {
+      outline: solid 1px transparent;
+    }
+  }
+`;
+
+export {
+  split_panel_styles_default
+};

package/dist/chunks/{chunk.OXM5EF3F.js → chunk.CZIWWDCG.js}

@@ -2,9 +2,9 @@ import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";
 
-// src/components/filter/filter-counter/filter-counter.styles.ts
+// src/components/filter/filter-base/filter-base.styles.ts
 import { css } from "lit";
-var filter_counter_styles_default = css`
+var filter_base_styles_default = css`
   ${component_styles_default}
 
   :host {
@@ -25,7 +25,7 @@ var filter_counter_styles_default = css`
   }
 
   /* Panel */
-  .filter__panel {
+  .filter .filter__panel {
     display: flex;
     flex-direction: column;
     position: relative;
@@ -49,23 +49,12 @@ var filter_counter_styles_default = css`
     );
   }
 
-  .filter__content {
-    display: flex;
-    padding: var(--dsa-spacing-16);
-    gap: 10px;
-    justify-content: space-between;
-  }
-
-  .filter__footer {
-    display: flex;
-    justify-content: flex-end;
-    padding: var(--dsa-spacing-8) var(--dsa-spacing-16);
-    gap: var(--dsa-spacing-16);
-    border-top: solid var(--dsa-wc-select-listbox-border-width)
-      var(--dsa-wc-select-listbox-border-color);
+  .filter--drawer .filter__panel {
+    border-bottom: 1px solid var(--dsa-color-border-default);
+    background-color: var(--dsa-color-surface-layer);
   }
 `;
 
 export {
-  filter_counter_styles_default
+  filter_base_styles_default
 };

package/dist/chunks/{chunk.WHTNMZZS.js → chunk.DLMZ2MN2.js}

@@ -1,6 +1,6 @@
 import {
   checkbox_button_styles_default
-} from "./chunk.BQ7R6MC6.js";
+} from "./chunk.RSX6EFCX.js";
 import {
   HasSlotController
 } from "./chunk.YIY5RM53.js";
@@ -135,7 +135,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DSACheckboxButton.prototype, "checked", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], DSACheckboxButton.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -144,10 +144,10 @@ __decorateClass([
   property({ reflect: true })
 ], DSACheckboxButton.prototype, "size", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], DSACheckboxButton.prototype, "readonly", 2);
 __decorateClass([
-  property({ type: Boolean })
+  property({ type: Boolean, reflect: true })
 ], DSACheckboxButton.prototype, "error", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })

package/dist/chunks/{chunk.N2H4K44W.js → chunk.ENMMYFHE.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.YIY5RM53.js";
 import {
   LocalizeController
-} from "./chunk.6L6CZSQX.js";
+} from "./chunk.G3MRVMJ4.js";
 import {
   watch
 } from "./chunk.6IH66JBY.js";