@trimble-oss/moduswebcomponents/modus-wc/p-afe9c67c.entry.js

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

import{r as t,h as s,e as i,g as o}from"./p-C1-Dpkp7.js";import{h as e}from"./p-tWS3Egrk.js";import{i as h}from"./p-DJ2rBB6r.js";const a=class{constructor(s){t(this,s),this.inheritedAttributes={},this.startPos=0,this.startLeftSize=0,this.startRightSize=0,this.previousBodyCursor=null,this.previousBodyUserSelect=null,this.nonPassiveListenerOptions={passive:!1},this.customClass="",this.orientation="horizontal",this.size="default",this.density="comfortable",this.defaultSplit=50,this.buttonSize="md",this.buttonColor="tertiary",this.buttonVariant="filled",this.type="bar",this.isDragging=!1,this.handleMouseDown=t=>{"bar"===this.type&&t.preventDefault(),this.startDrag(t.clientX,t.clientY)},this.handleTouchStart=t=>{"bar"===this.type&&t.preventDefault();const s=t.touches[0];this.startDrag(s.clientX,s.clientY)},this.handleMouseMove=t=>{this.isDragging&&(t.preventDefault(),this.drag(t.clientX,t.clientY))},this.handleTouchMove=t=>{if(!this.isDragging)return;t.preventDefault();const s=t.touches[0];this.drag(s.clientX,s.clientY)},this.handleMouseUp=()=>{this.endDrag()},this.handleTouchEnd=()=>{this.endDrag()},this.handleKeyDown=t=>{const s=t.shiftKey?15:5;let i=0;if("vertical"===this.orientation)if("ArrowUp"===t.key)i=-s,t.preventDefault();else{if("ArrowDown"!==t.key)return;i=s,t.preventDefault()}else if("horizontal"===this.orientation)if("ArrowLeft"===t.key)i=-s,t.preventDefault();else{if("ArrowRight"!==t.key)return;i=s,t.preventDefault()}const o=this.getTargetElement(this.leftTarget),e=this.getTargetElement(this.rightTarget),h=o?"horizontal"===this.orientation?o.offsetWidth:o.offsetHeight:0,a=e?"horizontal"===this.orientation?e.offsetWidth:e.offsetHeight:0,r=this.clampDelta(i,o,e,h,a);o&&"vertical"===this.orientation?o.style.height=`${h+r}px`:o&&"horizontal"===this.orientation&&(o.style.width=`${h+r}px`),e&&"vertical"===this.orientation?e.style.height=a-r+"px":e&&"horizontal"===this.orientation&&(e.style.width=a-r+"px")}}componentWillLoad(){e(this.el),this.inheritedAttributes=h(this.el)}componentDidLoad(){this.setupDragHandlers(),this.applyInitialSplit()}applyInitialSplit(){if(!this.defaultSplit||!this.leftTarget||!this.rightTarget)return;const t=this.getTargetElement(this.leftTarget),s=this.getTargetElement(this.rightTarget);if(!t||!s)return;const i=Math.max(1,Math.min(100,this.defaultSplit)),o=i,e=100-i;"horizontal"===this.orientation?(t.style.width=`${o}%`,s.style.width=`${e}%`,t.style.flexShrink="0",s.style.flexShrink="0"):(t.style.height=`${o}%`,s.style.height=`${e}%`,t.style.flexShrink="0",s.style.flexShrink="0")}setupDragHandlers(){this.el.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp),this.el.addEventListener("touchstart",this.handleTouchStart,this.nonPassiveListenerOptions),document.addEventListener("touchmove",this.handleTouchMove,this.nonPassiveListenerOptions),document.addEventListener("touchend",this.handleTouchEnd),this.el.addEventListener("keydown",this.handleKeyDown)}getTargetElement(t){return t?"string"==typeof t?document.querySelector(t):t:null}startDrag(t,s){this.isDragging=!0,this.startPos="horizontal"===this.orientation?t:s;const i=this.getTargetElement(this.leftTarget),o=this.getTargetElement(this.rightTarget);this.startLeftSize=i?"horizontal"===this.orientation?i.offsetWidth:i.offsetHeight:0,this.startRightSize=o?"horizontal"===this.orientation?o.offsetWidth:o.offsetHeight:0,this.previousBodyCursor=document.body.style.cursor,this.previousBodyUserSelect=document.body.style.userSelect,document.body.style.cursor="horizontal"===this.orientation?"col-resize":"row-resize",document.body.style.userSelect="none"}drag(t,s){const i=("horizontal"===this.orientation?t:s)-this.startPos,o=this.getTargetElement(this.leftTarget),e=this.getTargetElement(this.rightTarget),h=this.clampDelta(i,o,e,this.startLeftSize,this.startRightSize);o&&"horizontal"===this.orientation?o.style.width=`${this.startLeftSize+h}px`:o&&"vertical"===this.orientation&&(o.style.height=`${this.startLeftSize+h}px`),e&&"horizontal"===this.orientation?e.style.width=this.startRightSize-h+"px":e&&"vertical"===this.orientation&&(e.style.height=this.startRightSize-h+"px")}endDrag(){var t,s;this.isDragging=!1,document.body.style.cursor=null!==(t=this.previousBodyCursor)&&void 0!==t?t:"",document.body.style.userSelect=null!==(s=this.previousBodyUserSelect)&&void 0!==s?s:"",this.previousBodyCursor=null,this.previousBodyUserSelect=null}getMinSize(t,s){const i=getComputedStyle(t),o=parseFloat("horizontal"===s?i.minWidth:i.minHeight);return Number.isNaN(o)?0:o}clampDelta(t,s,i,o,e){let h=Number.NEGATIVE_INFINITY,a=Number.POSITIVE_INFINITY;const r="vertical"===this.orientation?"vertical":"horizontal";if(s){const t=this.getMinSize(s,r);h=Math.max(h,t-o)}if(i){const t=this.getMinSize(i,r);a=Math.min(a,e-t)}return Math.min(Math.max(t,h),a)}disconnectedCallback(){this.el.removeEventListener("mousedown",this.handleMouseDown),this.el.removeEventListener("touchstart",this.handleTouchStart,this.nonPassiveListenerOptions),this.el.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp),document.removeEventListener("touchmove",this.handleTouchMove,this.nonPassiveListenerOptions),document.removeEventListener("touchend",this.handleTouchEnd)}getClasses(){const t=["modus-wc-handle-container"],s=(({orientation:t,size:s,type:i,density:o})=>{let e="";if(t)switch(t){case"horizontal":e=`${e} modus-wc-handle-vertical`;break;case"vertical":e=`${e} modus-wc-handle-horizontal`}if(s)switch(s){case"default":e=`${e} modus-wc-handle-default`;break;case"lg":e=`${e} modus-wc-handle-lg`;break;case"xl":e=`${e} modus-wc-handle-xl`;break;case"2xl":e=`${e} modus-wc-handle-2xl`}if(i)switch(i){case"bar":e=`${e} modus-wc-handle-type-bar`;break;case"button":e=`${e} modus-wc-handle-type-button`}if(o)switch(o){case"compact":e=`${e} modus-wc-handle-compact`;break;case"comfortable":e=`${e} modus-wc-handle-comfortable`;break;case"relaxed":e=`${e} modus-wc-handle-relaxed`}return e.trim()})({orientation:this.orientation,size:this.size,type:this.type,density:this.density});return s&&t.push(s),this.customClass&&t.push(this.customClass),t.join(" ")}renderBarHandle(){return s("div",{class:"modus-wc-handle-bar"})}renderButtonHandle(){return s("div",{class:"modus-wc-handle-button-wrapper"},s("modus-wc-button",{size:this.buttonSize,color:this.buttonColor,variant:this.buttonVariant,shape:"circle","aria-orientation":this.orientation,role:"separator"},s("modus-wc-icon",{name:"vertical"===this.orientation?"drag_vertical":"drag_horizontal",size:"xs"})))}render(){return s(i,Object.assign({key:"944adbf88619577d1d10058e336a995b6ff52a18",class:this.getClasses(),role:"bar"===this.type?"separator":void 0,tabIndex:0,"aria-orientation":"bar"===this.type?this.orientation:void 0},this.inheritedAttributes),"bar"===this.type?this.renderBarHandle():this.renderButtonHandle())}get el(){return o(this)}};a.style=".modus-wc-handle-container{align-items:center;background-color:transparent;display:flex;justify-content:center;outline:none;padding:0;position:relative}.modus-wc-handle-container:focus{outline:var(--modus-wc-border-width-sm) solid var(--modus-wc-color-primary);outline-offset:var(--modus-wc-border-width-sm)}.modus-wc-handle-container:hover{cursor:row-resize}.modus-wc-handle-container:hover.modus-wc-handle-vertical{cursor:col-resize}.modus-wc-handle-horizontal{flex-direction:column}.modus-wc-handle-horizontal.modus-wc-handle-compact{height:var(--modus-wc-spacing-sm)}.modus-wc-handle-horizontal.modus-wc-handle-comfortable{height:var(--modus-wc-spacing-md)}.modus-wc-handle-horizontal.modus-wc-handle-relaxed{height:var(--modus-wc-spacing-lg)}.modus-wc-handle-horizontal.modus-wc-handle-type-button{height:var(--modus-wc-spacing-xs)}.modus-wc-handle-vertical{flex-direction:row;height:100%}.modus-wc-handle-vertical.modus-wc-handle-compact{width:var(--modus-wc-spacing-sm)}.modus-wc-handle-vertical.modus-wc-handle-comfortable{width:var(--modus-wc-spacing-md)}.modus-wc-handle-vertical.modus-wc-handle-relaxed{width:var(--modus-wc-spacing-lg)}.modus-wc-handle-vertical.modus-wc-handle-type-button{width:var(--modus-wc-spacing-xs)}.modus-wc-handle-bar{background-color:var(--modus-wc-color-base-200);border-radius:var(--modus-wc-border-radius-md);left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}.modus-wc-handle-horizontal .modus-wc-handle-bar{height:var(--modus-wc-spacing-xs)}.modus-wc-handle-vertical .modus-wc-handle-bar{width:var(--modus-wc-spacing-xs)}.modus-wc-handle-horizontal.modus-wc-handle-default .modus-wc-handle-bar{width:44px}.modus-wc-handle-horizontal.modus-wc-handle-lg .modus-wc-handle-bar{width:80px}.modus-wc-handle-horizontal.modus-wc-handle-xl .modus-wc-handle-bar{width:144px}.modus-wc-handle-horizontal.modus-wc-handle-2xl .modus-wc-handle-bar{width:224px}.modus-wc-handle-vertical.modus-wc-handle-default .modus-wc-handle-bar{height:44px}.modus-wc-handle-vertical.modus-wc-handle-lg .modus-wc-handle-bar{height:80px}.modus-wc-handle-vertical.modus-wc-handle-xl .modus-wc-handle-bar{height:144px}.modus-wc-handle-vertical.modus-wc-handle-2xl .modus-wc-handle-bar{height:224px}.modus-wc-handle-type-button .modus-wc-handle-button-wrapper{left:50%;position:absolute;top:50%;transform:translate(-50%, -50%)}";export{a as modus_wc_handle}