@luzmo/lucero 2.0.1 → 2.1.0

package/components/split-view-FxpiSCem.js

@@ -0,0 +1,359 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { t as e } from "./decorate-CkCg3wfh.js";
+import { t } from "./focusable-DuP0-Kuy.js";
+import { html as n, nothing as r, unsafeCSS as i } from "lit";
+import { property as a, query as o } from "lit/decorators.js";
+//#region src/components/split-view/split-view-model.ts
+function s(e, t) {
+	let n = Math.max(0, t.primaryMin, e - t.secondaryMax), r = Math.min(e, t.primaryMax, e - t.secondaryMin);
+	if (n <= r) return {
+		min: n,
+		max: r
+	};
+	let i = Math.min(e, Math.max(0, e / 2));
+	return {
+		min: i,
+		max: i
+	};
+}
+function c(e, t) {
+	return Math.min(t.max, Math.max(t.min, e));
+}
+//#endregion
+//#region src/components/split-view/split-view.module.scss?inline
+var l = ":host{min-block-size:0;min-inline-size:0;display:flex;position:relative}:host([vertical]){flex-direction:column}slot{display:contents}::slotted(*){min-block-size:0;min-inline-size:0}::slotted(:nth-child(n+3)){display:none!important}.separator{cursor:col-resize;block-size:100%;inline-size:var(--split-view-target-size);touch-action:none;z-index:1;outline:none;justify-content:center;align-items:center;display:flex;position:absolute;inset-block-start:0;inset-inline-start:calc(var(--splitter-position,0) * 1px - var(--split-view-target-size) / 2)}:host([vertical]) .separator{block-size:var(--split-view-target-size);cursor:row-resize;inline-size:100%;inset-block-start:calc(var(--splitter-position,0) * 1px - var(--split-view-target-size) / 2);inset-inline-start:0}.separator .divider{background-color:var(--luzmo-split-view-divider-color,var(--split-view-divider-color));block-size:100%;inline-size:var(--luzmo-split-view-divider-thickness,var(--split-view-divider-thickness));pointer-events:none}.separator .handle{background-color:var(--luzmo-split-view-divider-color,var(--split-view-handle-color));block-size:var(--split-view-handle-length);border-radius:var(--split-view-handle-radius);inline-size:var(--split-view-handle-thickness);pointer-events:none;display:none;position:absolute}:host([resizable]) .separator .handle{display:block}:host([vertical]) .separator .divider{block-size:var(--luzmo-split-view-divider-thickness,var(--split-view-divider-thickness));inline-size:100%}:host([vertical]) .separator .handle{block-size:var(--split-view-handle-thickness);inline-size:var(--split-view-handle-length)}:host(:not([vertical])) .separator.start-edge{inset-inline-start:0}:host(:not([vertical])) .separator.end-edge{inset-inline-start:calc(100% - var(--split-view-target-size))}:host(:not([vertical])) .separator.start-edge .divider,:host(:not([vertical])) .separator.end-edge .divider,:host([vertical]) .separator.start-edge .divider,:host([vertical]) .separator.end-edge .divider{position:absolute}:host(:not([vertical])) .separator.start-edge .divider{inset-inline-start:0}:host(:not([vertical])) .separator.start-edge .handle{inset-inline-start:calc(var(--split-view-focus-width) + var(--split-view-focus-offset))}:host(:not([vertical])) .separator.end-edge .divider{inset-inline-end:0}:host(:not([vertical])) .separator.end-edge .handle{inset-inline-end:calc(var(--split-view-focus-width) + var(--split-view-focus-offset))}:host([vertical]) .separator.start-edge{inset-block-start:0}:host([vertical]) .separator.end-edge{inset-block-start:calc(100% - var(--split-view-target-size))}:host([vertical]) .separator.start-edge .divider{inset-block-start:0}:host([vertical]) .separator.start-edge .handle{inset-block-start:calc(var(--split-view-focus-width) + var(--split-view-focus-offset))}:host([vertical]) .separator.end-edge .divider{inset-block-end:0}:host([vertical]) .separator.end-edge .handle{inset-block-end:calc(var(--split-view-focus-width) + var(--split-view-focus-offset))}:host([resizable]:not([disabled])) .separator:hover .divider,:host([resizable]:not([disabled])) .separator:hover .handle{background-color:var(--luzmo-split-view-divider-color-hover,var(--split-view-divider-color-hover))}:host([dragging]) .separator .divider,:host([dragging]) .separator .handle{background-color:var(--luzmo-split-view-divider-color-active,var(--split-view-divider-color-active))}.separator:focus-visible .divider{background-color:var(--luzmo-split-view-focus-color,var(--split-view-focus-color))}.separator:focus-visible .handle{outline:var(--split-view-focus-width) solid var(--luzmo-split-view-focus-color,var(--split-view-focus-color));outline-offset:var(--split-view-focus-offset)}:host(:not([resizable])) .separator,:host([disabled]) .separator{cursor:default}@media (forced-colors:active){:host{--highcontrast-split-view-divider-color:CanvasText;--highcontrast-split-view-focus-color:Highlight}.separator .divider,.separator .handle{background-color:var(--highcontrast-split-view-divider-color,var(--luzmo-split-view-divider-color,var(--split-view-divider-color)))}:host([resizable]:not([disabled])) .separator:hover .divider,:host([resizable]:not([disabled])) .separator:hover .handle,:host([dragging]) .separator .divider,:host([dragging]) .separator .handle{background-color:highlight}.separator:focus-visible .divider{background-color:var(--highcontrast-split-view-focus-color,var(--luzmo-split-view-focus-color,var(--split-view-focus-color)))}.separator:focus-visible .handle{outline-color:var(--highcontrast-split-view-focus-color,var(--luzmo-split-view-focus-color,var(--split-view-focus-color)))}}:host{--split-view-divider-color:var(--luzmo-border-color-full);--split-view-divider-color-hover:var(--luzmo-primary-hover);--split-view-divider-color-active:var(--luzmo-primary-down);--split-view-divider-thickness:var(--luzmo-border-width);--split-view-focus-color:var(--luzmo-primary-focus);--split-view-target-size:var(--luzmo-component-height-xs);--split-view-focus-offset:var(--luzmo-border-width);--split-view-focus-width:var(--luzmo-indicator-width,1px);--split-view-handle-color:var(--luzmo-font-color-extra-dimmed);--split-view-handle-length:var(--luzmo-component-height);--split-view-handle-thickness:var(--luzmo-spacing-2);--split-view-handle-radius:var(--luzmo-border-radius-full)}", u = 3840, d = 10, f = 50, p = 50, m = 0, h = class extends t {
+	constructor(...e) {
+		super(...e), this.vertical = !1, this.collapsible = !1, this.label = "Resize panels", this.primarySize = "50%", this._primaryMin = 0, this._primaryMax = u, this._secondaryMin = 0, this._secondaryMax = u, this._resizable = !1, this._splitterPos = 0, this._viewSize = 0, this._minPos = 0, this._maxPos = 0, this._enoughChildren = !1, this._positionInitialized = !1, this._initialSplitterPosSupplied = !1, this._activePanes = [], this._restorePositionOnReconnect = !1, this._paneInlineStyles = /* @__PURE__ */ new Map(), this._dragChanged = !1;
+	}
+	static get styles() {
+		let e = super.styles;
+		return [...Array.isArray(e) ? e : e ? [e] : [], i(l)];
+	}
+	set resizable(e) {
+		let t = !!e;
+		if (t === this._resizable) return;
+		let n = this._resizable;
+		this._resizable = t, t || this._cancelDrag(), this.requestUpdate("resizable", n);
+	}
+	get resizable() {
+		return this._resizable;
+	}
+	set primaryMin(e) {
+		let t = this._normalizeBound(e, 0);
+		if (t === this._primaryMin) return;
+		let n = this._primaryMin;
+		this._primaryMin = t, this.requestUpdate("primaryMin", n);
+	}
+	get primaryMin() {
+		return this._primaryMin;
+	}
+	set primaryMax(e) {
+		let t = this._normalizeBound(e, u);
+		if (t === this._primaryMax) return;
+		let n = this._primaryMax;
+		this._primaryMax = t, this.requestUpdate("primaryMax", n);
+	}
+	get primaryMax() {
+		return this._primaryMax;
+	}
+	set secondaryMin(e) {
+		let t = this._normalizeBound(e, 0);
+		if (t === this._secondaryMin) return;
+		let n = this._secondaryMin;
+		this._secondaryMin = t, this.requestUpdate("secondaryMin", n);
+	}
+	get secondaryMin() {
+		return this._secondaryMin;
+	}
+	set secondaryMax(e) {
+		let t = this._normalizeBound(e, u);
+		if (t === this._secondaryMax) return;
+		let n = this._secondaryMax;
+		this._secondaryMax = t, this.requestUpdate("secondaryMax", n);
+	}
+	get secondaryMax() {
+		return this._secondaryMax;
+	}
+	set splitterPos(e) {
+		this._positionInitialized || (this._initialSplitterPosSupplied = !0);
+		let t = Number.isFinite(e) ? e : 0, n = this.collapsible && (t === 0 || t === this._viewSize), r = this._positionInitialized && !n ? this._clampPosition(t) : t;
+		if (r === this._splitterPos) return;
+		let i = this._splitterPos;
+		this._splitterPos = r, this.requestUpdate("splitterPos", i);
+	}
+	get splitterPos() {
+		return this._splitterPos;
+	}
+	get focusElement() {
+		return this._separator ?? this;
+	}
+	connectedCallback() {
+		this._positionInitialized || (this._initialSplitterPosSupplied = this._initialSplitterPosSupplied || this.hasAttribute("splitter-pos")), super.connectedCallback(), typeof ResizeObserver < "u" && (this._resizeObserver ??= new ResizeObserver(() => {
+			this._recalculate(!1);
+		}), this._resizeObserver.observe(this)), this.updateComplete.then(() => {
+			this.isConnected && this.handleSlotChange();
+		});
+	}
+	disconnectedCallback() {
+		this._cancelDrag(!1), this._resizeObserver?.disconnect(), this._restorePaneStyles(), this._activePanes = [], this._restorePositionOnReconnect = !0, this._clearControlledElementId(), this._controlledElement = void 0, super.disconnectedCallback();
+	}
+	_normalizeBound(e, t) {
+		return Number.isFinite(e) && e >= 0 ? e : t;
+	}
+	_measureView() {
+		let e = this.getBoundingClientRect();
+		return this.vertical ? e.height : e.width;
+	}
+	_calculateBounds() {
+		this._viewSize = this._measureView();
+		let e = s(this._viewSize, {
+			primaryMin: this.primaryMin,
+			primaryMax: this.primaryMax,
+			secondaryMin: this.secondaryMin,
+			secondaryMax: this.secondaryMax
+		});
+		this._minPos = e.min, this._maxPos = e.max;
+	}
+	_clampPosition(e) {
+		return c(e, {
+			min: this._minPos,
+			max: this._maxPos
+		});
+	}
+	_resolveInitialPosition() {
+		let e = this.primarySize.trim();
+		if (/^\d+(?:\.\d+)?(?:px)?$/.test(e)) return Number.parseFloat(e);
+		if (/^\d+(?:\.\d+)?%$/.test(e)) return Number.parseFloat(e) / 100 * this._viewSize;
+		if (e === "auto" && this._controlledElement) {
+			let e = Number.parseFloat(this._controlledElement.style.getPropertyValue(this.vertical ? "block-size" : "inline-size"));
+			if (Number.isFinite(e) && e > 0) return e;
+			let t = Number.parseFloat(getComputedStyle(this._controlledElement).getPropertyValue(this.vertical ? "height" : "width"));
+			if (Number.isFinite(t) && t > 0) return t;
+			let n = this._controlledElement.getBoundingClientRect(), r = this.vertical ? n.height : n.width;
+			if (Number.isFinite(r) && r > 0) return r;
+		}
+		return this._viewSize / 2;
+	}
+	_applyPaneSizes() {
+		let [e, t] = this._activePanes, n = Math.round(this.splitterPos), r = Math.round(this._viewSize);
+		e && (e.style.flex = `0 0 ${n}px`, e.style.display = r > 0 && n <= 0 ? "none" : this._paneInlineStyles.get(e)?.display ?? ""), t && (t.style.flex = "1 1 0", t.style.display = r > 0 && n >= r ? "none" : this._paneInlineStyles.get(t)?.display ?? "");
+	}
+	_restorePaneStyles() {
+		for (let [e, t] of this._paneInlineStyles) e.style.display = t.display, e.style.flex = t.flex;
+		this._paneInlineStyles.clear();
+	}
+	_setActivePanes(e) {
+		let t = e.slice(0, 2), n = t.length !== this._activePanes.length || t.some((e, t) => e !== this._activePanes[t]);
+		if (n && (this._restorePaneStyles(), this._activePanes = t), n || this._paneInlineStyles.size === 0) for (let e of t) this._paneInlineStyles.set(e, {
+			display: e.style.display,
+			flex: e.style.flex
+		});
+		return n;
+	}
+	_recalculate(e) {
+		if (!this.isConnected || !this._enoughChildren) return;
+		let t = this._viewSize, n = this._positionInitialized && this.collapsible && this.splitterPos === 0, r = this._positionInitialized && this.collapsible && t > 0 && this.splitterPos === t;
+		this._calculateBounds();
+		let i;
+		this._positionInitialized ? i = e ? this._resolveInitialPosition() : n ? 0 : r ? this._viewSize : this._clampPosition(this.splitterPos) : (i = this._initialSplitterPosSupplied ? this.splitterPos : this._resolveInitialPosition(), this._positionInitialized = !0), this.splitterPos = i, this._applyPaneSizes();
+	}
+	_syncAriaControls() {
+		!this._separator || !this._controlledElement || (this._separator.ariaControlsElements = [this._controlledElement]);
+	}
+	_clearControlledElementId() {
+		this._controlledElement && this._controlledElement.id === this._controlledElementGeneratedId && this._controlledElement.removeAttribute("id"), this._controlledElementGeneratedId = void 0;
+	}
+	handleSlotChange() {
+		let e = this._paneSlot?.assignedElements() ?? [], t = this._setActivePanes(e), n = e[0];
+		n !== this._controlledElement && (this._clearControlledElementId(), this._controlledElement = n), this._controlledElement && !this._controlledElement.id && (m += 1, this._controlledElementGeneratedId = `luzmo-split-view-pane-${m}`, this._controlledElement.id = this._controlledElementGeneratedId);
+		let r = this._enoughChildren, i = e.length >= 2;
+		if (i !== this._enoughChildren && (this._enoughChildren = i, this.requestUpdate()), i) {
+			let e = !r || t && !this._restorePositionOnReconnect;
+			this._restorePositionOnReconnect = !1, this.updateComplete.then(() => {
+				this._recalculate(e), this._syncAriaControls();
+			});
+		}
+	}
+	_dispatchValueEvent(e) {
+		this.dispatchEvent(new Event(e, {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_setPosition(e, t = {}) {
+		let n = this._clampPosition(e);
+		return this.collapsible && t.collapse && (e <= 0 && (n = 0), e >= this._viewSize && (n = this._viewSize)), n === this.splitterPos ? !1 : (this.splitterPos > 0 && this.splitterPos < this._viewSize && (this._lastExpandedPosition = this.splitterPos), this.splitterPos = n, this._applyPaneSizes(), (t.emit ?? !0) && this._dispatchValueEvent("input"), !0);
+	}
+	handleKeydown(e) {
+		if (!this.resizable || this.disabled) return;
+		let t;
+		switch (e.key) {
+			case "ArrowLeft":
+				this.vertical || (t = this.splitterPos + (this.isLTR ? -10 : d));
+				break;
+			case "ArrowRight":
+				this.vertical || (t = this.splitterPos + (this.isLTR ? d : -10));
+				break;
+			case "ArrowUp":
+				this.vertical && (t = this.splitterPos - d);
+				break;
+			case "ArrowDown":
+				this.vertical && (t = this.splitterPos + d);
+				break;
+			case "PageUp":
+				t = this.splitterPos + (this.vertical ? -50 : f);
+				break;
+			case "PageDown":
+				t = this.splitterPos + (this.vertical ? f : -50);
+				break;
+			case "Home":
+				t = this.collapsible ? 0 : this._minPos;
+				break;
+			case "End":
+				t = this.collapsible ? this._viewSize : this._maxPos;
+				break;
+			case "Enter":
+				if (!this.collapsible) return;
+				t = this.splitterPos === 0 ? this._lastExpandedPosition ?? this._viewSize / 2 : 0;
+				break;
+			default: return;
+		}
+		t !== void 0 && (e.preventDefault(), this._setPosition(t, { collapse: !0 }) && this._dispatchValueEvent("change"));
+	}
+	_capturePointer(e, t) {
+		try {
+			e.setPointerCapture(t), this._capturedPointer = {
+				target: e,
+				pointerId: t
+			};
+		} catch {
+			this._capturedPointer = void 0;
+		}
+	}
+	_releasePointer() {
+		let e = this._capturedPointer;
+		this._capturedPointer = void 0, e?.target.hasPointerCapture(e.pointerId) && e.target.releasePointerCapture(e.pointerId);
+	}
+	handlePointerDown(e) {
+		!this.resizable || this.disabled || e.button !== 0 || this._dragStartPosition !== void 0 || (this._dragPointerId = e.pointerId, this._dragStartPosition = this.splitterPos, this._dragChanged = !1, this.toggleAttribute("dragging", !0), this._capturePointer(e.currentTarget, e.pointerId));
+	}
+	_pointerPosition(e) {
+		let t = this.getBoundingClientRect();
+		return this.vertical ? e.clientY - t.top : this.isLTR ? e.clientX - t.left : t.right - e.clientX;
+	}
+	handlePointerMove(e) {
+		if (this._dragPointerId !== e.pointerId || this._dragStartPosition === void 0 || !this.resizable || this.disabled) return;
+		let t = this._pointerPosition(e);
+		this.collapsible && t < this._minPos - p && (t = 0), this.collapsible && t > this._maxPos + p && (t = this._viewSize), this._setPosition(t, { collapse: !0 }) && (this._dragChanged = !0);
+	}
+	_finishDrag() {
+		this._dragPointerId = void 0, this._releasePointer(), this._dragStartPosition = void 0, this._dragChanged = !1, this.toggleAttribute("dragging", !1);
+	}
+	handlePointerUp(e) {
+		if (this._dragPointerId !== e.pointerId || this._dragStartPosition === void 0) return;
+		let t = this._dragChanged;
+		this._finishDrag(), t && this._dispatchValueEvent("change");
+	}
+	_cancelDrag(e = !0) {
+		if (this._dragStartPosition === void 0) return;
+		let t = this._dragStartPosition, n = this._dragChanged;
+		this._finishDrag(), e && n && this._setPosition(t, { collapse: !0 });
+	}
+	handlePointerCancel(e) {
+		this._dragPointerId === e.pointerId && this._cancelDrag();
+	}
+	render() {
+		return n`
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      ${this._enoughChildren ? n`
+              <div
+                class="separator ${this.splitterPos <= 0 ? "start-edge" : this._viewSize > 0 && this.splitterPos >= this._viewSize ? "end-edge" : ""}"
+                role="separator"
+                aria-label=${this.label}
+                aria-disabled=${this.resizable ? this.disabled ? "true" : "false" : r}
+                aria-orientation=${this.vertical ? "horizontal" : "vertical"}
+                aria-valuemin=${this.resizable ? this._positionAsPercentage(this.collapsible ? 0 : this._minPos) : r}
+                aria-valuemax=${this.resizable ? this._positionAsPercentage(this.collapsible ? this._viewSize : this._maxPos) : r}
+                aria-valuenow=${this.resizable ? this._positionAsPercentage(this.splitterPos) : r}
+                tabindex=${this.resizable ? this.disabled ? "-1" : "0" : r}
+                style=${`--splitter-position: ${this.splitterPos}`}
+                @keydown=${this.handleKeydown}
+                @pointerdown=${this.handlePointerDown}
+                @pointermove=${this.handlePointerMove}
+                @pointerup=${this.handlePointerUp}
+                @pointercancel=${this.handlePointerCancel}
+                @lostpointercapture=${this.handlePointerCancel}
+              >
+                <span class="divider" aria-hidden="true"></span>
+                <span class="handle" aria-hidden="true"></span>
+              </div>
+            ` : r}
+    `;
+	}
+	_positionAsPercentage(e) {
+		return String(this._viewSize > 0 ? Math.round(e / this._viewSize * 100) : 0);
+	}
+	willUpdate(e) {
+		super.willUpdate(e), (e.has("vertical") || e.has("primaryMin") || e.has("primaryMax") || e.has("secondaryMin") || e.has("secondaryMax") || e.has("collapsible")) && this._recalculate(!1), e.has("primarySize") && this._recalculate(!0);
+	}
+	updated(e) {
+		super.updated(e), e.has("splitterPos") && this._applyPaneSizes(), this._syncAriaControls(), e.has("disabled") && this.disabled && this._cancelDrag();
+	}
+};
+//#endregion
+//#region src/components/split-view/index.ts
+e([a({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "vertical", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "resizable", null), e([a({
+	type: Boolean,
+	reflect: !0
+})], h.prototype, "collapsible", void 0), e([a({
+	type: String,
+	reflect: !0
+})], h.prototype, "label", void 0), e([a({
+	type: Number,
+	reflect: !0,
+	attribute: "primary-min"
+})], h.prototype, "primaryMin", null), e([a({
+	type: Number,
+	reflect: !0,
+	attribute: "primary-max"
+})], h.prototype, "primaryMax", null), e([a({
+	type: Number,
+	reflect: !0,
+	attribute: "secondary-min"
+})], h.prototype, "secondaryMin", null), e([a({
+	type: Number,
+	reflect: !0,
+	attribute: "secondary-max"
+})], h.prototype, "secondaryMax", null), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "primary-size"
+})], h.prototype, "primarySize", void 0), e([a({
+	type: Number,
+	reflect: !0,
+	attribute: "splitter-pos"
+})], h.prototype, "splitterPos", null), e([o("slot")], h.prototype, "_paneSlot", void 0), e([o("[role=\"separator\"]")], h.prototype, "_separator", void 0), typeof customElements < "u" && !customElements.get("luzmo-split-view") && customElements.define("luzmo-split-view", h);
+//#endregion
+export { h as t };