@nova-design-system/nova-webcomponents 3.24.0 → 3.25.0

package/dist/components/nv-split.js

@@ -1,370 +1 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-
-const nvSplitCss = "nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:\"\";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:\"\";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{box-sizing:border-box;flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0 !important}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}";
-
-const NvSplit$1 = /*@__PURE__*/ proxyCustomElement(class NvSplit extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        this.sizesChanged = createEvent(this, "sizesChanged", 3);
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Direction of the split layout.
-         * - `horizontal`: panes side by side
-         * - `vertical`: panes stacked
-         */
-        this.direction = 'horizontal';
-        /**
-         * Initial sizes of the panes in percentages.
-         * Example: `[50, 50]` means two equal panes.
-         * Explicitly `reflect: false` (array) for framework compatibility.
-         */
-        this.sizes = [];
-        /**
-         * Width or height of the gutter (in px) depending on the split direction.
-         * Default is 24px to meet WCAG 2.2 target size requirements for touch accessibility.
-         */
-        this.gutterSize = 24;
-        //#endregion
-        /****************************************************************************/
-        //#region STATE
-        this.isDragging = false;
-        this.dragIndex = -1;
-        this.startPos = 0;
-        this.startSizes = [];
-        // Handlers stored to be able to detach them
-        this.onDocMove = (e) => this.handleMouseMove(e);
-        this.onDocUp = () => this.stopDragging();
-    }
-    //#endregion
-    /****************************************************************************/
-    //#region WATCHERS
-    onSizesChanged() {
-        // Re-apply sizes if modified from the outside
-        this.applySizes();
-    }
-    onDirectionChanged() {
-        // Update the orientation and the cursors of the gutters
-        this.ensureGutters();
-        this.applySizes();
-    }
-    //#endregion
-    /****************************************************************************/
-    //#region LIFECYCLE
-    componentDidLoad() {
-        // Initialization (once)
-        this.ensureGutters();
-        // Defer applySizes to ensure CSS (margins, padding) is computed
-        requestAnimationFrame(() => {
-            this.applySizes();
-            this.positionGutters();
-        });
-        // Observer: reposition gutters when resized
-        this.ro = new ResizeObserver(() => this.positionGutters());
-        this.ro.observe(this.el);
-        window.addEventListener('resize', () => this.positionGutters());
-    }
-    disconnectedCallback() {
-        // Security cleanup (in case a drag was in progress)
-        this.detachDocumentListeners();
-        this.ro?.disconnect();
-        this.ro = undefined;
-    }
-    //#endregion
-    /****************************************************************************/
-    //#region PUBLIC METHODS
-    /**
-     * Programmatically set pane sizes.
-     * @param {Array<number>} sizes Array of pane sizes in percentages.
-     * @returns {Promise<void>}
-     */
-    async setSizes(sizes) {
-        this.sizes = [...sizes];
-        this.applySizes();
-        this.sizesChanged.emit([...this.sizes]);
-        this.positionGutters();
-    }
-    /**
-     * Returns the current pane sizes.
-     * @returns {Promise<number[]>} Array of pane sizes in percentages.
-     */
-    async getSizes() {
-        return [...this.sizes];
-    }
-    /**
-     * Collapse a specific pane to 0 size.
-     * @param {number} index Index of the pane to collapse.
-     * @returns {Promise<void>}
-     */
-    async collapse(index) {
-        const panes = this.getPanes();
-        if (index < 0 || index >= panes.length)
-            return;
-        // Simple strategy: 0% for the index, the rest (100%) for its nearest neighbor
-        const next = new Array(panes.length).fill(0);
-        const target = index < panes.length - 1 ? index + 1 : index - 1;
-        if (target >= 0)
-            next[target] = 100;
-        this.sizes = next;
-        this.applySizes();
-        this.sizesChanged.emit([...this.sizes]);
-        this.positionGutters();
-    }
-    /**
-     * Destroy the split instance: removes gutters and resets layout state.
-     * @returns {Promise<void>}
-     */
-    async destroy() {
-        this.sizes = [];
-        this.isDragging = false;
-        this.dragIndex = -1;
-        this.removeOwnGutters();
-        this.detachDocumentListeners();
-        this.ro?.disconnect();
-    }
-    //#endregion
-    /****************************************************************************/
-    //#region INTERNAL HELPERS
-    /**
-     * Returns the panes of the split.
-     * @returns {HTMLElement[]} The panes of the split.
-     */
-    getPanes() {
-        // Only the direct children slot="pane"
-        return Array.from(this.el.querySelectorAll(':scope > [slot="pane"]'));
-    }
-    /**
-     * Returns the own gutters of the split.
-     * @returns {HTMLElement[]} The own gutters of the split.
-     */
-    getOwnGutters() {
-        // Only the direct gutters of THIS instance
-        return Array.from(this.el.querySelectorAll(':scope > .nv-split-gutter[data-auto="true"]'));
-    }
-    /**
-     * Removes the own gutters of the split.
-     */
-    removeOwnGutters() {
-        this.getOwnGutters().forEach(g => g.remove());
-    }
-    /**
-     * Ensures the gutters of the split.
-     */
-    ensureGutters() {
-        const panes = this.getPanes();
-        // 1) Clean ONLY the old direct gutters of THIS instance
-        this.removeOwnGutters();
-        if (panes.length <= 1)
-            return;
-        // 2) Add the gutters (directs) between the panes
-        panes.forEach((pane, i) => {
-            if (i >= panes.length - 1)
-                return;
-            const g = document.createElement('div');
-            g.className = 'nv-split-gutter';
-            g.setAttribute('data-auto', 'true');
-            if (this.direction === 'horizontal') {
-                g.style.width = `${this.gutterSize}px`;
-                g.style.cursor = 'col-resize';
-            }
-            else {
-                g.style.height = `${this.gutterSize}px`;
-                g.style.cursor = 'row-resize';
-            }
-            // Customizable internal slot
-            const slotEl = document.createElement('slot');
-            slotEl.name = 'gutter';
-            g.appendChild(slotEl);
-            // Listener drag (index = gutter between pane i and i+1)
-            g.addEventListener('mousedown', (ev) => this.startDragging(ev, i));
-            // Insert just after the pane
-            pane.insertAdjacentElement('afterend', g);
-        });
-        this.positionGutters();
-    }
-    /**
-     * Applies the sizes to the panes.
-     */
-    applySizes() {
-        const panes = this.getPanes();
-        const n = panes.length;
-        if (n === 0)
-            return;
-        // Default values if inconsistent
-        if (!this.sizes || this.sizes.length !== n) {
-            this.sizes = Array(n).fill(100 / n);
-        }
-        panes.forEach((pane, i) => {
-            const size = Math.max(0, this.sizes[i] ?? 100 / n);
-            pane.style.flex = `0 0 ${size}%`;
-            pane.style.minWidth = '0';
-            pane.style.minHeight = '0';
-            pane.style.overflow = 'hidden';
-            pane.style.display = 'flex';
-            pane.style.flexDirection = 'column';
-            pane.style.boxSizing = 'border-box';
-        });
-        this.positionGutters();
-    }
-    /**
-     * Attaches the document listeners.
-     */
-    attachDocumentListeners() {
-        document.addEventListener('mousemove', this.onDocMove);
-        document.addEventListener('mouseup', this.onDocUp);
-    }
-    /**
-     * Detaches the document listeners.
-     */
-    detachDocumentListeners() {
-        document.removeEventListener('mousemove', this.onDocMove);
-        document.removeEventListener('mouseup', this.onDocUp);
-    }
-    /**
-     * Positions the gutters based on the current sizes of the panes.
-     */
-    positionGutters() {
-        const panes = this.getPanes();
-        const gutters = this.getOwnGutters();
-        if (panes.length <= 1 || gutters.length === 0)
-            return;
-        const horizontal = this.direction === 'horizontal';
-        let cumPct = 0;
-        for (let i = 0; i < gutters.length; i++) {
-            const sizePct = this.sizes?.[i] ?? 100 / panes.length;
-            cumPct += sizePct;
-            const g = gutters[i];
-            g.style.position = 'absolute';
-            if (horizontal) {
-                g.style.left = `${cumPct}%`;
-                g.style.top = '0';
-                g.style.bottom = '0';
-                g.style.height = '100%';
-                g.style.transform = 'translateX(-50%)';
-            }
-            else {
-                g.style.top = `${cumPct}%`;
-                g.style.left = '0';
-                g.style.right = '0';
-                g.style.width = '100%';
-                g.style.transform = 'translateY(-50%)';
-            }
-        }
-    }
-    /**
-     * Starts the dragging process.
-     * @param {MouseEvent} e - The mouse event.
-     * @param {number} index - The index of the gutter.
-     */
-    startDragging(e, index) {
-        e.preventDefault();
-        this.isDragging = true;
-        this.dragIndex = index;
-        this.startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
-        this.startSizes = [...this.sizes];
-        this.attachDocumentListeners();
-        this.sizesChanged.emit([...this.sizes]);
-    }
-    /**
-     * Handles the mouse movement during dragging.
-     * @param {MouseEvent} e - The mouse event.
-     */
-    handleMouseMove(e) {
-        if (!this.isDragging || this.dragIndex < 0)
-            return;
-        const panes = this.getPanes();
-        if (panes.length < 2)
-            return;
-        const rect = this.el.getBoundingClientRect();
-        const horizontal = this.direction === 'horizontal';
-        const totalPx = Math.max(horizontal ? rect.width : rect.height, 1);
-        const deltaPx = (horizontal ? e.clientX : e.clientY) - this.startPos;
-        const deltaPct = (deltaPx / totalPx) * 100;
-        const i = this.dragIndex;
-        const j = i + 1;
-        const startLeft = this.startSizes[i];
-        const startRight = this.startSizes[j];
-        // minSizes (px) -> %
-        let minLeftPct = ((this.minSizes?.[i] ?? 0) / totalPx) * 100;
-        let minRightPct = ((this.minSizes?.[j] ?? 0) / totalPx) * 100;
-        const minSum = minLeftPct + minRightPct;
-        const availableSum = startLeft + startRight;
-        if (minSum > availableSum) {
-            const scale = availableSum / minSum;
-            minLeftPct *= scale;
-            minRightPct *= scale;
-        }
-        const minDelta = minLeftPct - startLeft;
-        const maxDelta = startRight - minRightPct;
-        const clampedDelta = Math.min(Math.max(deltaPct, minDelta), maxDelta);
-        const left = startLeft + clampedDelta;
-        const right = startRight - clampedDelta;
-        const next = [...this.startSizes];
-        next[i] = left;
-        next[j] = right;
-        this.sizes = next;
-        this.applySizes();
-        this.positionGutters();
-    }
-    /**
-     * Stops the dragging process.
-     */
-    stopDragging() {
-        if (!this.isDragging)
-            return;
-        this.isDragging = false;
-        this.dragIndex = -1;
-        this.detachDocumentListeners();
-        this.sizesChanged.emit([...this.sizes]);
-    }
-    //#endregion
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (h(Host, { key: '850cf8fb9d492e1da39da0037c1fd8d414960d28', "data-dragging": this.isDragging.toString() }, h("slot", { key: '4d2f540ca147abe4778bcc0d02be2e87ee2cf3b4', name: "pane" }), h("slot", { key: '1ceb2dc6375c50fe7786ba03fb2a753f852980ba', name: "gutter" })));
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "sizes": ["onSizesChanged"],
-        "direction": ["onDirectionChanged"]
-    }; }
-    static get style() { return nvSplitCss; }
-}, [260, "nv-split", {
-        "direction": [513],
-        "sizes": [1040],
-        "minSizes": [16],
-        "gutterSize": [514, "gutter-size"],
-        "isDragging": [32],
-        "setSizes": [64],
-        "getSizes": [64],
-        "collapse": [64],
-        "destroy": [64]
-    }, undefined, {
-        "sizes": ["onSizesChanged"],
-        "direction": ["onDirectionChanged"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-split"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-split":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvSplit$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvSplit = NvSplit$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvSplit, defineCustomElement };
-//# sourceMappingURL=nv-split.js.map
-
-//# sourceMappingURL=nv-split.js.map
+import{t,p as e,H as i,c as s,h as n,d as r}from"./p-iXsbKJzR.js";const o=e(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.sizesChanged=s(this,"sizesChanged",3),this.direction="horizontal",this.sizes=[],this.gutterSize=24,this.isDragging=!1,this.dragIndex=-1,this.startPos=0,this.startSizes=[],this.onDocMove=t=>this.handleMouseMove(t),this.onDocUp=()=>this.stopDragging()}onSizesChanged(){this.applySizes()}onDirectionChanged(){this.ensureGutters(),this.applySizes()}componentDidLoad(){this.ensureGutters(),requestAnimationFrame((()=>{this.applySizes(),this.positionGutters()})),this.ro=new ResizeObserver((()=>this.positionGutters())),this.ro.observe(this.el),window.addEventListener("resize",(()=>this.positionGutters()))}disconnectedCallback(){this.detachDocumentListeners(),this.ro?.disconnect(),this.ro=void 0}async setSizes(t){this.sizes=[...t],this.applySizes(),this.sizesChanged.emit([...this.sizes]),this.positionGutters()}async getSizes(){return[...this.sizes]}async collapse(t){const e=this.getPanes();if(t<0||t>=e.length)return;const i=Array(e.length).fill(0),s=t<e.length-1?t+1:t-1;s>=0&&(i[s]=100),this.sizes=i,this.applySizes(),this.sizesChanged.emit([...this.sizes]),this.positionGutters()}async destroy(){this.sizes=[],this.isDragging=!1,this.dragIndex=-1,this.removeOwnGutters(),this.detachDocumentListeners(),this.ro?.disconnect()}getPanes(){return Array.from(this.el.querySelectorAll(':scope > [slot="pane"]'))}getOwnGutters(){return Array.from(this.el.querySelectorAll(':scope > .nv-split-gutter[data-auto="true"]'))}removeOwnGutters(){this.getOwnGutters().forEach((t=>t.remove()))}ensureGutters(){const t=this.getPanes();this.removeOwnGutters(),t.length<=1||(t.forEach(((e,i)=>{if(i>=t.length-1)return;const s=document.createElement("div");s.className="nv-split-gutter",s.setAttribute("data-auto","true"),"horizontal"===this.direction?(s.style.width=this.gutterSize+"px",s.style.cursor="col-resize"):(s.style.height=this.gutterSize+"px",s.style.cursor="row-resize");const n=document.createElement("slot");n.name="gutter",s.appendChild(n),s.addEventListener("mousedown",(t=>this.startDragging(t,i))),e.insertAdjacentElement("afterend",s)})),this.positionGutters())}applySizes(){const t=this.getPanes(),e=t.length;0!==e&&(this.sizes&&this.sizes.length===e||(this.sizes=Array(e).fill(100/e)),t.forEach(((t,i)=>{t.style.flex=`0 0 ${Math.max(0,this.sizes[i]??100/e)}%`,t.style.minWidth="0",t.style.minHeight="0",t.style.overflow="hidden",t.style.display="flex",t.style.flexDirection="column",t.style.boxSizing="border-box"})),this.positionGutters())}attachDocumentListeners(){document.addEventListener("mousemove",this.onDocMove),document.addEventListener("mouseup",this.onDocUp)}detachDocumentListeners(){document.removeEventListener("mousemove",this.onDocMove),document.removeEventListener("mouseup",this.onDocUp)}positionGutters(){const t=this.getPanes(),e=this.getOwnGutters();if(t.length<=1||0===e.length)return;const i="horizontal"===this.direction;let s=0;for(let n=0;n<e.length;n++){s+=this.sizes?.[n]??100/t.length;const r=e[n];r.style.position="absolute",i?(r.style.left=s+"%",r.style.top="0",r.style.bottom="0",r.style.height="100%",r.style.transform="translateX(-50%)"):(r.style.top=s+"%",r.style.left="0",r.style.right="0",r.style.width="100%",r.style.transform="translateY(-50%)")}}startDragging(t,e){t.preventDefault(),this.isDragging=!0,this.dragIndex=e,this.startPos="horizontal"===this.direction?t.clientX:t.clientY,this.startSizes=[...this.sizes],this.attachDocumentListeners(),this.sizesChanged.emit([...this.sizes])}handleMouseMove(t){if(!this.isDragging||this.dragIndex<0)return;if(this.getPanes().length<2)return;const e=this.el.getBoundingClientRect(),i="horizontal"===this.direction,s=Math.max(i?e.width:e.height,1),n=((i?t.clientX:t.clientY)-this.startPos)/s*100,r=this.dragIndex,o=r+1,a=this.startSizes[r],l=this.startSizes[o];let h=(this.minSizes?.[r]??0)/s*100,c=(this.minSizes?.[o]??0)/s*100;const d=h+c,p=a+l;if(d>p){const t=p/d;h*=t,c*=t}const u=l-c,v=Math.min(Math.max(n,h-a),u),g=l-v,b=[...this.startSizes];b[r]=a+v,b[o]=g,this.sizes=b,this.applySizes(),this.positionGutters()}stopDragging(){this.isDragging&&(this.isDragging=!1,this.dragIndex=-1,this.detachDocumentListeners(),this.sizesChanged.emit([...this.sizes]))}render(){return n(r,{key:"5419c070ac8e17c640987c5016c6cbd18cb12266","data-dragging":""+this.isDragging},n("slot",{key:"4e9c7080adbd6e9efbf5807a517ff7002d540567",name:"pane"}),n("slot",{key:"910e3ffca9f3f12849f6d18ba8407c45153b7769",name:"gutter"}))}get el(){return this}static get watchers(){return{sizes:[{onSizesChanged:0}],direction:[{onDirectionChanged:0}]}}static get style(){return'nv-split{display:flex;width:100%;height:100%;position:relative}nv-split[direction=horizontal]{flex-direction:row}nv-split[direction=vertical]{flex-direction:column}nv-split .nv-split-gutter{position:absolute;z-index:10;background:transparent;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:background-color 0.2s ease}nv-split .nv-split-gutter::after{content:"";position:absolute;background:var(--components-splitter-line-background);transition:background-color 0.2s ease}nv-split .nv-split-gutter:hover::after{background:var(--components-splitter-line-background-hover)}nv-split .nv-split-gutter::before{content:"";background:var(--components-splitter-handle-background);position:absolute;background-repeat:no-repeat;background-position:center;transition:all 0.2s ease;pointer-events:none}nv-split[direction=horizontal]>.nv-split-gutter{width:var(--splitter-gutter);top:0;bottom:0;transform:translateX(-50%);cursor:col-resize}nv-split[direction=horizontal]>.nv-split-gutter::after{width:var(--splitter-line-width);background-color:var(--components-splitter-line-background);height:100%;left:50%;top:0%;transform:translateX(-50%)}nv-split[direction=horizontal]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=horizontal]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-wide);height:var(--splitter-handle-long);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=horizontal]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=horizontal]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[direction=vertical]>.nv-split-gutter{height:var(--splitter-gutter);left:0;right:0;transform:translateY(-50%);cursor:row-resize}nv-split[direction=vertical]>.nv-split-gutter::after{height:var(--splitter-line-width);background-color:var(--components-splitter-line-background);width:100%;top:50%;left:0%;transform:translateY(-50%)}nv-split[direction=vertical]>.nv-split-gutter:hover::after{background-color:var(--components-splitter-line-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::after{background-color:var(--components-splitter-line-background-active)}nv-split[direction=vertical]>.nv-split-gutter::before{background-color:var(--components-splitter-handle-background);width:var(--splitter-handle-long);height:var(--splitter-handle-wide);border-radius:var(--splitter-handle-radius);z-index:11;transition:all 0.2s ease}nv-split[direction=vertical]>.nv-split-gutter:hover::before{background-color:var(--components-splitter-handle-background-hover)}nv-split[direction=vertical]>.nv-split-gutter:active::before{background-color:var(--components-splitter-handle-background-active)}nv-split[data-dragging=true]>.nv-split-gutter::after{background:var(--components-splitter-line-background-active)}nv-split>[slot=pane]{box-sizing:border-box;flex:1 1 auto;overflow:hidden;min-width:0;min-height:0;display:flex;flex-direction:column;margin:0 !important}nv-split>[slot=pane]>nv-split{flex:1 1 auto;width:100%;height:100%}'}},[260,"nv-split",{direction:[513],sizes:[1040],minSizes:[16],gutterSize:[514,"gutter-size"],isDragging:[32],setSizes:[64],getSizes:[64],collapse:[64],destroy:[64]},void 0,{sizes:[{onSizesChanged:0}],direction:[{onDirectionChanged:0}]}]);function a(){"undefined"!=typeof customElements&&["nv-split"].forEach((e=>{"nv-split"===e&&(customElements.get(t(e))||customElements.define(t(e),o))}))}a();const l=o,h=a;export{l as NvSplit,h as defineCustomElement}

package/dist/components/nv-stack.js

@@ -1,55 +1 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-C63Xpg9a.js';
-import { c as clsx } from './p-ChV9xqsO.js';
-
-const nvStackCss = "nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}";
-
-const NvStack$1 = /*@__PURE__*/ proxyCustomElement(class NvStack extends H {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /****************************************************************************/
-        //#region PROPERTIES
-        /**
-         * Gutter refers to the space that exists between children components inside
-         * the stack container.
-         */
-        this.gutter = 2;
-    }
-    //#endregion PROPERTIES
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        return (h(Host, { key: '7b44b30e42b8df1c456f70b1f3be986e2fce1617', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, h("slot", { key: 'd38b6f0c043959ed97b3e90d21309ab832713b4e' })));
-    }
-    static get style() { return nvStackCss; }
-}, [260, "nv-stack", {
-        "gutter": [514],
-        "fill": [516],
-        "flex": [516],
-        "full": [516],
-        "vertical": [516]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nv-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nv-stack":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, NvStack$1);
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
-
-const NvStack = NvStack$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { NvStack, defineCustomElement };
-//# sourceMappingURL=nv-stack.js.map
-
-//# sourceMappingURL=nv-stack.js.map
+import{t,p as a,H as s,h as n,d as e}from"./p-iXsbKJzR.js";import{c}from"./p-ChV9xqsO.js";const i=a(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.gutter=2}render(){return n(e,{key:"4aefa1b0d60c640edb266797c59e4311af87bd09",class:c(this.fill&&"nv-stack-fill",this.flex&&"nv-stack-flex",this.full&&"w-full",this.gutter&&!this.vertical&&"gap-x-"+this.gutter,this.gutter&&this.vertical&&"gap-y-"+this.gutter,this.vertical&&"nv-stack-vertical")},n("slot",{key:"0521c6172ffb133a6e9f5ca216e13970b83e7de5"}))}static get style(){return"nv-stack{display:flex;align-items:center;justify-content:flex-start;flex-direction:row}nv-stack nv-col{display:flex}nv-stack:not(nv-row){flex-wrap:nowrap}nv-stack>.nv-stack-item-flex{flex-shrink:1;flex-grow:1}nv-stack>.nv-stack-item-lead{margin-right:auto}nv-stack>.nv-stack-item-lead+*{margin-left:0}nv-stack>.nv-stack-item-center{margin-right:auto;margin-left:auto}nv-stack>.nv-stack-item-tail{margin-left:auto}nv-stack>.nv-stack-nowrap{white-space:nowrap}nv-stack.nv-stack-vertical{align-items:stretch;flex-direction:column}nv-stack.nv-stack-vertical>.nv-stack-item-lead{margin-right:0;margin-bottom:auto}nv-stack.nv-stack-vertical>.nv-stack-item-lead+*{margin-top:0}nv-stack.nv-stack-vertical>.nv-stack-item-tail{margin-left:0;margin-top:auto}nv-stack.nv-stack-vertical>.nv-stack-item-center{margin:auto 0}nv-stack.nv-stack-flex>*{flex-shrink:1;flex-grow:1}nv-stack.nv-stack-fill>*{height:100%}nv-stack.nv-stack-fill.nv-stack-vertical>*{height:auto;width:100%}"}},[260,"nv-stack",{gutter:[514],fill:[516],flex:[516],full:[516],vertical:[516]}]);function l(){"undefined"!=typeof customElements&&["nv-stack"].forEach((a=>{"nv-stack"===a&&(customElements.get(t(a))||customElements.define(t(a),i))}))}l();const r=i,v=l;export{r as NvStack,v as defineCustomElement}