@trimble-oss/moduswebcomponents/modus-wc/p-b93a9999.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,d as s,h as e,e as o,g as i}from"./p-C1-Dpkp7.js";import{h}from"./p-tWS3Egrk.js";import{i as d}from"./p-DJ2rBB6r.js";const a=class{constructor(e){t(this,e),this.sheetVisibilityChange=s(this,"sheetVisibilityChange",7),this.displayModeChange=s(this,"displayModeChange",7),this.headerBackClick=s(this,"headerBackClick",7),this.headerCloseClick=s(this,"headerCloseClick",7),this.inheritedAttributes={},this.startY=0,this.startHeight=0,this.currentDelta=0,this.pendingFocus=!1,this.propDisplayMode="default",this.isInteractionChange=!1,this.customClass="",this.visible=!1,this.displayMode="default",this.dragStepThreshold=.4,this.isDragging=!1,this.dragOffset=0,this.dragHeight=null,this.hasHeader=!1,this.hasFooter=!1,this.onPointerDown=t=>{this.visible&&(t.preventDefault(),this.isDragging=!0,this.startY=t.clientY,this.currentDelta=0,this.startHeight=this.el.querySelector(".modus-wc-panel").offsetHeight,document.addEventListener("pointermove",this.onPointerMove),document.addEventListener("pointerup",this.onPointerUp))},this.onPointerMove=t=>{t.preventDefault(),document.body.style.cursor="grabbing",this.currentDelta=t.clientY-this.startY,this.currentDelta>=0?(this.dragOffset=this.currentDelta,this.dragHeight=null):(this.dragOffset=0,this.dragHeight=`${Math.min(this.startHeight-this.currentDelta,window.innerHeight)}px`)},this.onPointerUp=()=>{var t;document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp),document.body.style.cursor="";const s=this.currentDelta;this.isDragging=!1,this.dragOffset=0,this.dragHeight=null;const e=(null!==(t=this.dragStepThreshold)&&void 0!==t?t:.4)*this.startHeight;s>e?this.stepDown():-s>e&&this.stepUp()},this.onHandleKeyDown=t=>{"ArrowUp"===t.key?(t.preventDefault(),this.stepUp()):"ArrowDown"===t.key?(t.preventDefault(),this.stepDown()):"Escape"===t.key&&(t.preventDefault(),this.setVisible(!1))},this.onHeaderBackClick=()=>{this.headerBackClick.emit()},this.onHeaderCloseClick=()=>{this.setVisible(!1),this.headerCloseClick.emit()}}handleVisibleChange(t){var s;this.setInert(!t),t&&((null!==(s=this.displayMode)&&void 0!==s?s:"default")!==this.propDisplayMode&&(this.displayMode=this.propDisplayMode),this.pendingFocus=!0),this.sheetVisibilityChange.emit({visible:t})}handleDisplayModeChange(t){this.isInteractionChange||(this.propDisplayMode=null!=t?t:"default"),this.visible&&this.displayModeChange.emit({displayMode:t})}componentWillLoad(){var t;h(this.el),this.inheritedAttributes=d(this.el),this.setInert(!this.visible),this.propDisplayMode=null!==(t=this.displayMode)&&void 0!==t?t:"default";const s=Array.from(this.el.children);this.hasHeader=s.some((t=>"header"===t.getAttribute("slot"))),this.hasFooter=s.some((t=>"footer"===t.getAttribute("slot")))}componentDidRender(){this.pendingFocus&&(this.pendingFocus=!1,this.el.focus())}setInert(t){t?this.el.setAttribute("inert",""):this.el.removeAttribute("inert")}disconnectedCallback(){document.removeEventListener("pointermove",this.onPointerMove),document.removeEventListener("pointerup",this.onPointerUp),this.isDragging&&(document.body.style.cursor="")}stepUp(){var t;const s=a.DISPLAY_MODE_LADDER,e=s.indexOf(null!==(t=this.displayMode)&&void 0!==t?t:"default");this.setDisplayMode(s[Math.min(e+1,s.length-1)])}stepDown(){var t;const s=a.DISPLAY_MODE_LADDER,e=s.indexOf(null!==(t=this.displayMode)&&void 0!==t?t:"default");this.setDisplayMode(s[Math.max(e-1,0)])}setVisible(t){this.visible!==t&&(this.visible=t)}setDisplayMode(t){this.displayMode!==t&&(this.isInteractionChange=!0,this.displayMode=t,this.isInteractionChange=!1)}getClasses(){const t=["modus-wc-bottom-sheet"];return"expanded"===this.displayMode&&t.push("modus-wc-bottom-sheet-expanded"),"minimized"===this.displayMode&&t.push("modus-wc-bottom-sheet-minimized"),this.isDragging&&t.push("modus-wc-bottom-sheet-dragging"),this.customClass&&t.push(this.customClass),t.join(" ")}getTransform(){return this.visible?this.dragOffset>0?`translate(-50%, ${this.dragOffset}px)`:"translate(-50%, 0)":"translate(-50%, 100%)"}getPanelHeight(){return this.isDragging&&this.dragHeight?this.dragHeight:"expanded"===this.displayMode?"95dvh":"auto"}hasDefaultHeader(){if(!this.header)return!1;const{title:t,subtitle:s,showBackButton:e,showCloseButton:o}=this.header;return!!(t||s||e||o)}shouldRenderHeader(){return this.hasHeader||this.hasDefaultHeader()}renderDefaultHeader(t){return e("div",{class:"modus-wc-bottom-sheet-header-top"},e("div",{class:"modus-wc-bottom-sheet-header-start"},t.showBackButton&&e("modus-wc-button",{"aria-label":"Back",color:"tertiary",onButtonClick:this.onHeaderBackClick,shape:"square",size:"sm",variant:"borderless"},e("modus-wc-icon",{name:"chevron_left",decorative:!0,size:"xs"})),(t.title||t.subtitle)&&e("div",null,t.title&&e("modus-wc-typography",{customClass:"modus-wc-bottom-sheet-header-title",hierarchy:"h2",size:"md",weight:"semibold",label:t.title}),t.subtitle&&e("modus-wc-typography",{hierarchy:"p",size:"sm",label:t.subtitle}))),t.showCloseButton&&e("modus-wc-button",{"aria-label":"Close",color:"tertiary",onButtonClick:this.onHeaderCloseClick,shape:"square",size:"sm",variant:"borderless"},e("modus-wc-icon",{name:"close",decorative:!0,size:"xs"})))}render(){return e(o,Object.assign({key:"c6d1960ddd3906dc2790dac5810f54a6d2689734"},this.inheritedAttributes,{class:this.getClasses(),role:"dialog",tabIndex:-1,"aria-hidden":(!this.visible).toString(),"aria-modal":this.visible?"true":void 0,style:{transform:this.getTransform(),transition:this.isDragging?"none":void 0}}),e("modus-wc-panel",{key:"2acc0e88b4e1d4c1ff049c267609719a00e3d83b",width:"100%",height:this.getPanelHeight()},e("modus-wc-handle",{key:"0b6a88ea883b9d3ad73b1cd5c6237248fc29789f",slot:"header",customClass:"modus-wc-bottom-sheet-handle",density:"comfortable",orientation:"vertical",size:"default",type:"bar",onPointerDown:this.onPointerDown,onKeyDown:this.onHandleKeyDown}),this.shouldRenderHeader()&&e("div",{key:"6a4da636e245f4576e6d6bb581eafda959d4d08e",class:"modus-wc-bottom-sheet-header",slot:"header"},this.hasHeader?e("slot",{name:"header"}):this.renderDefaultHeader(this.header)),e("div",{key:"fa4ea16fd7f45a86aa26133c283b4ab5eeec114f",class:"modus-wc-bottom-sheet-content",slot:"body"},e("slot",{key:"36ba21d1bc911e3cb68ae6959918496a3efe0a8d",name:"content"})),this.hasFooter&&e("div",{key:"14dafb983a96f6ef88af3e5e52e38ed3dc5dab08",class:"modus-wc-bottom-sheet-footer",slot:"footer"},e("slot",{key:"0b2d03011d2e07257c985dcc4cc5366f90a8d683",name:"footer"}))))}get el(){return i(this)}static get watchers(){return{visible:["handleVisibleChange"],displayMode:["handleDisplayModeChange"]}}};a.DISPLAY_MODE_LADDER=["minimized","default","expanded"],a.style="modus-wc-bottom-sheet.modus-wc-bottom-sheet{border-radius:var(--rounded-box) var(--rounded-box) 0 0;bottom:0;box-shadow:0 -20px 50px -8px color-mix(in sRGB, var(--modus-wc-color-base-content) 22%, transparent), 0 -6px 16px color-mix(in sRGB, var(--modus-wc-color-base-content) 12%, transparent);left:50%;max-width:100vw;min-width:25vw;position:fixed;transform:translateX(-50%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0s linear 0.3s;z-index:999}modus-wc-bottom-sheet.modus-wc-bottom-sheet[aria-hidden=true]{box-shadow:none}modus-wc-bottom-sheet.modus-wc-bottom-sheet[aria-hidden=false]{transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0s linear 0s}modus-wc-bottom-sheet.modus-wc-bottom-sheet:focus,modus-wc-bottom-sheet.modus-wc-bottom-sheet:focus-visible{outline:none}modus-wc-bottom-sheet.modus-wc-bottom-sheet.modus-wc-bottom-sheet-minimized .modus-wc-panel .modus-wc-bottom-sheet-header,modus-wc-bottom-sheet.modus-wc-bottom-sheet.modus-wc-bottom-sheet-minimized .modus-wc-panel .modus-wc-bottom-sheet-content,modus-wc-bottom-sheet.modus-wc-bottom-sheet.modus-wc-bottom-sheet-minimized .modus-wc-panel .modus-wc-bottom-sheet-footer{display:none}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel{border-radius:var(--rounded-box) var(--rounded-box) 0 0}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-handle{cursor:grab;min-height:var(--modus-wc-font-size-2xl);touch-action:none}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-handle:active{cursor:grabbing}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-header{padding:var(--modus-wc-spacing-md);width:100%}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-header-top{align-items:center;display:flex;gap:var(--modus-wc-spacing-lg);justify-content:space-between;width:100%}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-header-start{align-items:center;display:flex;flex:1 1 0;gap:var(--modus-wc-spacing-xs);min-width:0}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-header-title{line-height:var(--modus-wc-font-size-2xl)}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-content{padding:0 var(--modus-wc-spacing-md) var(--modus-wc-spacing-md) var(--modus-wc-spacing-md)}modus-wc-bottom-sheet.modus-wc-bottom-sheet .modus-wc-panel .modus-wc-bottom-sheet-footer{padding:var(--modus-wc-spacing-md)}";export{a as modus_wc_bottom_sheet}