@uplynk/lynk-design 1.11.3 → 1.12.1

package/dist/chunks/chunk.WYQII2UM.js

@@ -0,0 +1,645 @@
+import {
+  splitter_styles_default
+} from "./chunk.FD4AJHG6.js";
+import {
+  drag
+} from "./chunk.A4SOQOK5.js";
+import {
+  clamp
+} from "./chunk.HF7GESMZ.js";
+import {
+  LocalizeController
+} from "./chunk.NJBJM2FD.js";
+import {
+  watch
+} from "./chunk.GQZ7EGMM.js";
+import {
+  LynkElement
+} from "./chunk.5RZMBXSH.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/splitter/splitter.component.ts
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { property } from "lit/decorators.js";
+var LynkSplitter = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.localize = new LocalizeController(this);
+    this.hasEmittedReady = false;
+    this.isInitialized = false;
+    this.hasRunFirstUpdated = false;
+    this.sizes = [];
+    // Internal positions array (derived from sizes)
+    this.positions = [];
+    this.vertical = false;
+    this.disabled = false;
+    this.push = false;
+    this.dividerWidth = 8;
+    this.snap = "";
+    this.snapThreshold = 12;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.loadPositions();
+    this.resizeObserver = new ResizeObserver((entries) => this.handleResize(entries));
+    this.mutationObserver = new MutationObserver(() => this.handleSlotChange());
+  }
+  async firstUpdated() {
+    if (this.hasRunFirstUpdated) return;
+    this.hasRunFirstUpdated = true;
+    this.resizeObserver.observe(this);
+    this.detectSize();
+    this.setupAutoObservation();
+    await customElements.whenDefined("lynk-splitter-pane");
+    await this.updateComplete;
+    const panes = this.getPanes();
+    this.detectSize();
+    if (this.sizes.length > 0) {
+      this.positions = this.calculatePositions(panes);
+      this.requestUpdate();
+    } else if (panes.length > 0 && panes.some((pane) => pane.size)) {
+      this.positions = this.calculatePositions(panes);
+      this.requestUpdate();
+    } else if (panes.length > 0 && this.positions.length === 0) {
+      this.positions = this.getEqualPositions(panes.length);
+    }
+    this.isInitialized = true;
+    this.handleSlotChange();
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    super.disconnectedCallback();
+    (_a = this.resizeObserver) == null ? void 0 : _a.unobserve(this);
+    (_b = this.mutationObserver) == null ? void 0 : _b.disconnect();
+  }
+  detectSize() {
+    const { width, height } = this.getBoundingClientRect();
+    this.size = this.vertical ? height : width;
+  }
+  pixelsToPercentage(value) {
+    return value / this.size * 100;
+  }
+  loadPositions() {
+    if (this.autoSaveId && typeof localStorage !== "undefined") {
+      try {
+        const stored = localStorage.getItem(`lynk-splitter-${this.autoSaveId}`);
+        if (stored) {
+          this.positions = JSON.parse(stored);
+        }
+      } catch (e) {
+      }
+    }
+  }
+  savePositions() {
+    if (this.autoSaveId && typeof localStorage !== "undefined") {
+      try {
+        localStorage.setItem(`lynk-splitter-${this.autoSaveId}`, JSON.stringify(this.positions));
+      } catch (e) {
+      }
+    }
+  }
+  setupAutoObservation() {
+    var _a;
+    this.mutationObserver.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["hidden"]
+    });
+    const slot = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot:not([name])");
+    if (slot) {
+      slot.addEventListener("slotchange", () => this.handleSlotChange());
+    }
+  }
+  handleSlotChange() {
+    if (!this.isInitialized) return;
+    const panes = this.getPanes();
+    const currentPaneCount = panes.length;
+    const previousPaneCount = this.positions.length + 1;
+    if (currentPaneCount !== previousPaneCount) {
+      this.detectSize();
+      this.recalculatePositionsForPanes(panes);
+    }
+    this.requestUpdate();
+    if (!this.hasEmittedReady && panes.length > 0) {
+      this.hasEmittedReady = true;
+      this.updateComplete.then(() => {
+        setTimeout(() => this.emitReadyEvent(), 0);
+      });
+    }
+  }
+  // =============================================================================
+  // Pane Management
+  // =============================================================================
+  /** Recalculates positions for current panes */
+  recalculatePositionsForPanes(panes) {
+    if (panes.length <= 1) {
+      this.positions = [];
+      return;
+    }
+    const hasExplicitConstraints = this.sizes.length > 0 || panes.some((pane) => pane.size || pane.minSize || pane.maxSize);
+    if (hasExplicitConstraints) {
+      this.positions = this.calculatePositions(panes);
+    } else {
+      this.positions = this.getEqualPositions(panes.length);
+    }
+  }
+  /** Gets equal distribution positions for given pane count */
+  getEqualPositions(paneCount) {
+    if (paneCount <= 1) return [];
+    const positions = [];
+    const increment = 100 / paneCount;
+    for (let i = 1; i < paneCount; i++) {
+      positions.push(increment * i);
+    }
+    return positions;
+  }
+  /** Calculates positions for current panes */
+  calculatePositions(panes) {
+    if (panes.length <= 1) return [];
+    const availableSpace = this.getAvailableSpace(panes.length);
+    const paneSizes = this.calculatePaneSizes(panes, availableSpace);
+    return this.convertSizesToPositions(paneSizes, availableSpace);
+  }
+  /** Gets available space excluding dividers */
+  getAvailableSpace(paneCount) {
+    return 100 - this.getTotalDividerWidth(paneCount);
+  }
+  /** Calculates pane sizes respecting constraints */
+  calculatePaneSizes(panes, availableSpace) {
+    const paneSizes = new Array(panes.length).fill(0);
+    let totalConstrainedSize = 0;
+    let constrainedCount = 0;
+    for (let i = 0; i < panes.length; i++) {
+      const pane = panes[i];
+      let size = 0;
+      if (this.sizes[i] && this.sizes[i] !== "auto") {
+        size = this.parseSize(this.sizes[i], availableSpace);
+      } else if (pane.size) {
+        size = this.parseSize(pane.size, availableSpace);
+      } else if (pane.minSize) {
+        size = this.parseSize(pane.minSize, availableSpace);
+      }
+      if (size > 0) {
+        paneSizes[i] = size;
+        totalConstrainedSize += size;
+        constrainedCount++;
+      }
+    }
+    const remainingSpace = Math.max(0, availableSpace - totalConstrainedSize);
+    const unconstrainedCount = panes.length - constrainedCount;
+    if (unconstrainedCount > 0) {
+      const autoSize = remainingSpace / unconstrainedCount;
+      for (let i = 0; i < panes.length; i++) {
+        if (paneSizes[i] === 0) {
+          paneSizes[i] = autoSize;
+        }
+      }
+    }
+    this.enforceMaxSizeConstraints(panes, paneSizes, availableSpace);
+    return paneSizes;
+  }
+  /** Enforces max-size constraints and redistributes excess space */
+  enforceMaxSizeConstraints(panes, paneSizes, availableSpace) {
+    let hasExcess = true;
+    while (hasExcess) {
+      hasExcess = false;
+      let totalExcess = 0;
+      const flexibleIndices = [];
+      for (let i = 0; i < panes.length; i++) {
+        const pane = panes[i];
+        if (pane.maxSize) {
+          const maxSize = this.parseSize(pane.maxSize, availableSpace);
+          if (paneSizes[i] > maxSize) {
+            totalExcess += paneSizes[i] - maxSize;
+            paneSizes[i] = maxSize;
+            hasExcess = true;
+          } else {
+            flexibleIndices.push(i);
+          }
+        } else {
+          flexibleIndices.push(i);
+        }
+      }
+      if (totalExcess > 0 && flexibleIndices.length > 0) {
+        const redistributeAmount = totalExcess / flexibleIndices.length;
+        flexibleIndices.forEach((index) => {
+          paneSizes[index] += redistributeAmount;
+        });
+      }
+    }
+  }
+  /** Converts pane sizes to divider positions */
+  convertSizesToPositions(paneSizes, availableSpace) {
+    const positions = [];
+    let cumulative = 0;
+    for (let i = 0; i < paneSizes.length - 1; i++) {
+      cumulative += paneSizes[i];
+      positions.push(cumulative / availableSpace * 100);
+    }
+    return positions;
+  }
+  // =============================================================================
+  // Size Parsing and Utilities
+  // =============================================================================
+  /** Parses size string to percentage of available space */
+  parseSize(size, availableSpace) {
+    if (size.endsWith("%")) {
+      return parseFloat(size) / 100 * availableSpace;
+    }
+    if (size.endsWith("px")) {
+      const pixelValue = parseFloat(size);
+      const pixelPercent = pixelValue / this.size * 100;
+      return pixelPercent / 100 * availableSpace;
+    }
+    return parseFloat(size) / 100 * availableSpace;
+  }
+  getPanes() {
+    return [...this.children].filter(
+      (el) => el.tagName === "LYNK-SPLITTER-PANE" && !el.hasAttribute("hidden")
+    );
+  }
+  handleDrag(event, dividerIndex) {
+    if (this.disabled) return;
+    if (event.cancelable) {
+      event.preventDefault();
+    }
+    drag(this, {
+      onMove: (x, y) => {
+        const newPositionInPixels = this.vertical ? y : x;
+        let newPosition = this.pixelsToPercentage(newPositionInPixels);
+        if (this.snap) {
+          newPosition = this.applySnapping(newPosition);
+        }
+        if (this.push) {
+          this.positions = this.handlePushResize(dividerIndex, newPosition);
+        } else {
+          const constraints = this.calculateConstraints(dividerIndex);
+          this.positions = [...this.positions];
+          this.positions[dividerIndex] = clamp(newPosition, constraints.min, constraints.max);
+        }
+        this.requestUpdate();
+        this.emitSplitterResizeEvent(event, dividerIndex);
+      },
+      onStop: () => {
+        this.savePositions();
+        this.emitAfterSplitterResizeEvent(event, dividerIndex);
+      },
+      initialEvent: event
+    });
+  }
+  handleKeyDown(event, dividerIndex) {
+    if (this.disabled) return;
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
+      event.preventDefault();
+      const incr = event.shiftKey ? 5 : 1;
+      const constraints = this.calculateConstraints(dividerIndex);
+      let newPosition = this.positions[dividerIndex];
+      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;
+      }
+      newPosition = clamp(newPosition, constraints.min, constraints.max);
+      if (this.push) {
+        this.positions = this.handlePushResize(dividerIndex, newPosition);
+      }
+      this.positions = [...this.positions];
+      this.positions[dividerIndex] = newPosition;
+      this.requestUpdate();
+      this.savePositions();
+      this.emitAfterSplitterResizeEvent(event, dividerIndex);
+    }
+  }
+  handleResize(entries) {
+    const { width, height } = entries[0].contentRect;
+    const oldSize = this.size;
+    this.size = this.vertical ? height : width;
+    if (oldSize && Math.abs(this.size - oldSize) > 1) {
+      this.recalculatePositionsForResize();
+      this.requestUpdate();
+    }
+  }
+  handleSizesChange() {
+    if (this.sizes.length === 0) return;
+    const panes = this.getPanes();
+    if (panes.length > 0) {
+      this.positions = this.calculatePositions(panes);
+      this.requestUpdate();
+    }
+  }
+  handleVerticalChange() {
+    this.detectSize();
+  }
+  updatePaneStyles() {
+    var _a;
+    const panes = this.getPanes();
+    const totalDividerWidth = this.getTotalDividerWidth(panes.length);
+    const availableSpace = 100 - totalDividerWidth;
+    const sizes = this.getPaneSizeStrings();
+    panes.forEach((pane, i) => {
+      const panePercentage = parseFloat(sizes[i]) / 100 * availableSpace;
+      pane.style.flex = `0 0 ${panePercentage}%`;
+      pane.style.order = (i * 2).toString();
+    });
+    const dividers = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll(".divider");
+    dividers == null ? void 0 : dividers.forEach((divider, i) => {
+      divider.style.order = (i * 2 + 1).toString();
+      divider.style.flex = `0 0 ${this.dividerWidth}px`;
+    });
+  }
+  /** Calculates movement constraints for a divider */
+  calculateConstraints(dividerIndex) {
+    const panes = this.getPanes();
+    const leftPane = panes[dividerIndex];
+    const rightPane = panes[dividerIndex + 1];
+    const availableSpace = this.getAvailableSpace(panes.length);
+    let min = dividerIndex > 0 ? this.positions[dividerIndex - 1] : 0;
+    let max = dividerIndex < this.positions.length - 1 ? this.positions[dividerIndex + 1] : 100;
+    if (leftPane) {
+      const { minSize, maxSize } = this.getPaneConstraints(leftPane, availableSpace);
+      const minSizePercent = minSize / availableSpace * 100;
+      const maxSizePercent = maxSize !== Infinity ? maxSize / availableSpace * 100 : Infinity;
+      if (minSizePercent > 0) {
+        min = Math.max(min, min + minSizePercent);
+      }
+      if (maxSizePercent !== Infinity) {
+        const leftPaneStart = dividerIndex > 0 ? this.positions[dividerIndex - 1] : 0;
+        max = Math.min(max, leftPaneStart + maxSizePercent);
+      }
+    }
+    if (rightPane) {
+      const { minSize, maxSize } = this.getPaneConstraints(rightPane, availableSpace);
+      const minSizePercent = minSize / availableSpace * 100;
+      const maxSizePercent = maxSize !== Infinity ? maxSize / availableSpace * 100 : Infinity;
+      if (minSizePercent > 0) {
+        const rightPaneEnd = dividerIndex < this.positions.length - 1 ? this.positions[dividerIndex + 1] : 100;
+        max = Math.min(max, rightPaneEnd - minSizePercent);
+      }
+      if (maxSizePercent !== Infinity) {
+        const rightPaneEnd = dividerIndex < this.positions.length - 1 ? this.positions[dividerIndex + 1] : 100;
+        min = Math.max(min, rightPaneEnd - maxSizePercent);
+      }
+    }
+    return { min, max };
+  }
+  /** Gets constraint values for a pane */
+  getPaneConstraints(pane, availableSpace) {
+    const minSize = pane.minSize ? this.parseSize(pane.minSize, availableSpace) : 0;
+    const maxSize = pane.maxSize ? this.parseSize(pane.maxSize, availableSpace) : Infinity;
+    return { minSize, maxSize };
+  }
+  /** Calculates total width taken by dividers as percentage */
+  getTotalDividerWidth(paneCount) {
+    const dividerCount = paneCount - 1;
+    return this.dividerWidth * dividerCount / this.size * 100;
+  }
+  /**
+   * Handles push resize logic - when one pane grows, others shrink to accommodate.
+   * Maintains total width of 100% while respecting min/max size constraints.
+   */
+  handlePushResize(dividerIndex, targetPosition) {
+    const panes = this.getPanes();
+    const delta = targetPosition - this.positions[dividerIndex];
+    if (Math.abs(delta) < 0.1) return this.positions;
+    const paneSizes = this.getCurrentPaneSizes(this.positions, panes.length);
+    if (delta > 0) {
+      this.resizePanes(paneSizes, panes, dividerIndex, dividerIndex + 1, delta);
+    } else {
+      this.resizePanes(paneSizes, panes, dividerIndex + 1, dividerIndex, Math.abs(delta));
+    }
+    return this.convertSizesToPositions(paneSizes, 100);
+  }
+  /** Converts divider positions to pane sizes */
+  getCurrentPaneSizes(positions, paneCount) {
+    const sizes = [];
+    let lastPos = 0;
+    for (let i = 0; i < paneCount; i++) {
+      const currentPos = i < positions.length ? positions[i] : 100;
+      sizes.push(currentPos - lastPos);
+      lastPos = currentPos;
+    }
+    return sizes;
+  }
+  // =============================================================================
+  // Push Mode and Resizing
+  // =============================================================================
+  /** Applies snapping to a position based on snap points */
+  applySnapping(position) {
+    if (!this.snap) return position;
+    const snapPoints = this.snap.split(" ");
+    let snappedPosition = position;
+    let minDistance = this.snapThreshold + 1;
+    snapPoints.forEach((snapPoint) => {
+      let snapValue;
+      if (snapPoint.endsWith("%")) {
+        snapValue = parseFloat(snapPoint);
+      } else if (snapPoint.endsWith("px")) {
+        snapValue = this.pixelsToPercentage(parseFloat(snapPoint));
+      } else {
+        snapValue = parseFloat(snapPoint);
+      }
+      const distance = Math.abs(position - snapValue);
+      if (distance <= this.snapThreshold && distance < minDistance) {
+        snappedPosition = snapValue;
+        minDistance = distance;
+      }
+    });
+    return snappedPosition;
+  }
+  /** Recalculates positions when container is resized to maintain pixel constraints */
+  recalculatePositionsForResize() {
+    const panes = this.getPanes();
+    if (panes.length === 0) return;
+    const hasPixelConstraints = panes.some(
+      (pane) => {
+        var _a, _b, _c;
+        return ((_a = pane.size) == null ? void 0 : _a.endsWith("px")) || ((_b = pane.minSize) == null ? void 0 : _b.endsWith("px")) || ((_c = pane.maxSize) == null ? void 0 : _c.endsWith("px"));
+      }
+    );
+    if (hasPixelConstraints) {
+      this.positions = this.calculatePositions(panes);
+      this.requestUpdate();
+    }
+  }
+  /** Resizes panes by growing one and shrinking others */
+  resizePanes(sizes, panes, growingIndex, shrinkingIndex, amount) {
+    const availableSpace = this.getAvailableSpace(panes.length);
+    const { maxSize } = this.getPaneConstraints(panes[growingIndex], availableSpace);
+    const maxGrowth = Math.min(amount, maxSize - sizes[growingIndex]);
+    if (maxGrowth <= 0) return;
+    const { minSize } = this.getPaneConstraints(panes[shrinkingIndex], availableSpace);
+    const directShrinkage = Math.min(maxGrowth, sizes[shrinkingIndex] - minSize);
+    sizes[shrinkingIndex] -= directShrinkage;
+    sizes[growingIndex] += directShrinkage;
+    const remaining = maxGrowth - directShrinkage;
+    if (remaining <= 0) return;
+    const [start, end] = growingIndex < shrinkingIndex ? [shrinkingIndex + 1, panes.length] : [0, shrinkingIndex];
+    this.cascadeShrink(sizes, panes, start, end, remaining, growingIndex, availableSpace);
+  }
+  /** Cascades shrinking across multiple panes */
+  cascadeShrink(sizes, panes, startIndex, endIndex, spaceNeeded, growingIndex, availableSpace) {
+    let remaining = spaceNeeded;
+    for (let i = startIndex; i < endIndex && remaining > 0; i++) {
+      const { minSize } = this.getPaneConstraints(panes[i], availableSpace);
+      const shrink = Math.min(remaining, sizes[i] - minSize);
+      if (shrink > 0) {
+        sizes[i] -= shrink;
+        sizes[growingIndex] += shrink;
+        remaining -= shrink;
+      }
+    }
+  }
+  /** Gets pane sizes as percentage strings for styling */
+  getPaneSizeStrings() {
+    const sizes = [];
+    let lastPos = 0;
+    for (const [i] of this.positions.entries()) {
+      sizes.push(`${this.positions[i] - lastPos}%`);
+      lastPos = this.positions[i];
+    }
+    sizes.push(`${100 - lastPos}%`);
+    return sizes;
+  }
+  /** Creates pane details for events */
+  createPaneDetails() {
+    const panes = this.getPanes();
+    const sizeStrings = this.getPaneSizeStrings();
+    return panes.map((pane, index) => {
+      const percentage = parseFloat(sizeStrings[index]);
+      const pixels = percentage / 100 * this.size;
+      return {
+        index,
+        size: percentage,
+        sizePixels: Math.round(pixels),
+        element: pane
+      };
+    });
+  }
+  /** Emits resize event during active resizing */
+  emitSplitterResizeEvent(event, dividerIndex) {
+    const paneDetails = this.createPaneDetails();
+    const prevPane = dividerIndex >= 0 ? paneDetails[dividerIndex] : null;
+    const nextPane = dividerIndex + 1 < paneDetails.length ? paneDetails[dividerIndex + 1] : null;
+    this.emit("ev-splitter-resize", {
+      detail: {
+        event,
+        index: dividerIndex,
+        prevPane,
+        nextPane,
+        panes: paneDetails
+      }
+    });
+  }
+  /** Emits after-resize event when resizing is complete */
+  emitAfterSplitterResizeEvent(event, dividerIndex) {
+    const paneDetails = this.createPaneDetails();
+    const prevPane = dividerIndex >= 0 ? paneDetails[dividerIndex] : null;
+    const nextPane = dividerIndex + 1 < paneDetails.length ? paneDetails[dividerIndex + 1] : null;
+    this.emit("ev-after-splitter-resize", {
+      detail: {
+        event,
+        index: dividerIndex,
+        prevPane,
+        nextPane,
+        panes: paneDetails
+      }
+    });
+  }
+  /** Emits ready event with initial pane information */
+  emitReadyEvent() {
+    const panes = this.getPanes();
+    if (panes.length === 0) return;
+    const paneDetails = this.createPaneDetails();
+    this.emit("ev-ready", {
+      detail: { panes: paneDetails }
+    });
+  }
+  updated() {
+    this.updatePaneStyles();
+  }
+  render() {
+    return html`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      ${this.positions.map(
+      (_, i) => html`
+          <div
+            part="divider divider-${i}"
+            style="--divider-width: ${this.dividerWidth}px;"
+            class="divider"
+            data-index="${i}"
+            tabindex=${ifDefined(this.disabled ? void 0 : "0")}
+            role="separator"
+            aria-valuenow=${this.positions[i] || 50}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-label=${this.localize.term("resize")}
+            @keydown=${(e) => this.handleKeyDown(e, i)}
+            @mousedown=${(e) => this.handleDrag(e, i)}
+            @touchstart=${(e) => this.handleDrag(e, i)}
+          >
+            <slot name="divider-${i}">
+              <slot part="handle" class="handle" name="divider"></slot>
+            </slot>
+          </div>
+        `
+    )}
+    `;
+  }
+};
+LynkSplitter.styles = [component_styles_default, splitter_styles_default];
+__decorateClass([
+  property({
+    type: Array,
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return [];
+        try {
+          const jsonValue = value.replace(/'/g, '"');
+          return JSON.parse(jsonValue);
+        } catch (e) {
+          return [];
+        }
+      },
+      toAttribute: (value) => JSON.stringify(value)
+    }
+  })
+], LynkSplitter.prototype, "sizes", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkSplitter.prototype, "vertical", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], LynkSplitter.prototype, "disabled", 2);
+__decorateClass([
+  property({ attribute: "auto-save-id" })
+], LynkSplitter.prototype, "autoSaveId", 2);
+__decorateClass([
+  property({ type: Boolean })
+], LynkSplitter.prototype, "push", 2);
+__decorateClass([
+  property({ type: Number, attribute: "divider-width" })
+], LynkSplitter.prototype, "dividerWidth", 2);
+__decorateClass([
+  property()
+], LynkSplitter.prototype, "snap", 2);
+__decorateClass([
+  property({ type: Number, attribute: "snap-threshold" })
+], LynkSplitter.prototype, "snapThreshold", 2);
+__decorateClass([
+  watch("sizes")
+], LynkSplitter.prototype, "handleSizesChange", 1);
+__decorateClass([
+  watch("vertical")
+], LynkSplitter.prototype, "handleVerticalChange", 1);
+
+export {
+  LynkSplitter
+};

package/dist/chunks/chunk.X2TV3EK2.js

@@ -0,0 +1,61 @@
+import {
+  page_header_styles_default
+} from "./chunk.XDFCUAHU.js";
+import {
+  LynkPageContent
+} from "./chunk.L4LQINEP.js";
+import {
+  LynkPage
+} from "./chunk.374REYMV.js";
+import {
+  LynkElement
+} from "./chunk.5RZMBXSH.js";
+import {
+  component_styles_default
+} from "./chunk.Y7724W4D.js";
+import {
+  __decorateClass
+} from "./chunk.Q44EX5TP.js";
+
+// src/components/page-header/page-header.component.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+var LynkPageHeader = class extends LynkElement {
+  constructor() {
+    super(...arguments);
+    this.width = "fluid";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.slot && this.hasParentLayout()) {
+      this.slot = "header";
+    }
+  }
+  // Checks whether the heading is nested into a lynk-page
+  hasParentLayout() {
+    const parent = this.parentElement;
+    return parent instanceof LynkPage;
+  }
+  render() {
+    return html`
+      <lynk-page-content width="${this.width}" style="--padding-top: 0; --padding-bottom: 0;">
+        <header part="base" class="page-header">
+          <slot name="breadcrumb" part="breadcrumb" class="page-header__breadcrumb"></slot>
+          <slot name="aux" part="aux" class="page-header__aux"></slot>
+          <slot class="page-header__main"></slot>
+          <slot name="controls" part="controls" class="page-header__controls"></slot>
+          <slot name="tabs" part="tabs" class="page-header__tabs"></slot>
+        </header>
+      </lynk-page-content>
+    `;
+  }
+};
+LynkPageHeader.styles = [component_styles_default, page_header_styles_default];
+LynkPageHeader.dependencies = { "lynk-page-content": LynkPageContent, "lynk-page": LynkPage };
+__decorateClass([
+  property({ reflect: true })
+], LynkPageHeader.prototype, "width", 2);
+
+export {
+  LynkPageHeader
+};