@trimble-oss/moduswebcomponents/modus-wc/p-687ea5f8.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,c as n,h as e,H as i,g as o}from"./p-dzXW86AR.js";import{i as r}from"./p-B5lx0dpl.js";const s=Math.min,a=Math.max,c=Math.round,l=t=>({x:t,y:t}),u={left:"right",right:"left",bottom:"top",top:"bottom"},f={start:"end",end:"start"};function d(t,n,e){return a(t,s(n,e))}function h(t,n){return"function"==typeof t?t(n):t}function m(t){return t.split("-")[0]}function y(t){return t.split("-")[1]}function p(t){return"x"===t?"y":"x"}function w(t){return"y"===t?"height":"width"}function b(t){return["top","bottom"].includes(m(t))?"y":"x"}function x(t){return p(b(t))}function g(t){return t.replace(/start|end/g,(t=>f[t]))}function v(t){return t.replace(/left|right|bottom|top/g,(t=>u[t]))}function k(t){const{x:n,y:e,width:i,height:o}=t;return{width:i,height:o,top:e,left:n,right:n+i,bottom:e+o,x:n,y:e}}function A(t,n,e){let{reference:i,floating:o}=t;const r=b(n),s=x(n),a=w(s),c=m(n),l="y"===r,u=i.x+i.width/2-o.width/2,f=i.y+i.height/2-o.height/2,d=i[a]/2-o[a]/2;let h;switch(c){case"top":h={x:u,y:i.y-o.height};break;case"bottom":h={x:u,y:i.y+i.height};break;case"right":h={x:i.x+i.width,y:f};break;case"left":h={x:i.x-o.width,y:f};break;default:h={x:i.x,y:i.y}}switch(y(n)){case"start":h[s]-=d*(e&&l?-1:1);break;case"end":h[s]+=d*(e&&l?-1:1)}return h}async function C(t,n){var e;void 0===n&&(n={});const{x:i,y:o,platform:r,rects:s,elements:a,strategy:c}=t,{boundary:l="clippingAncestors",rootBoundary:u="viewport",elementContext:f="floating",altBoundary:d=!1,padding:m=0}=h(n,t),y=function(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}(m),p=a[d?"floating"===f?"reference":"floating":f],w=k(await r.getClippingRect({element:null==(e=await(null==r.isElement?void 0:r.isElement(p)))||e?p:p.contextElement||await(null==r.getDocumentElement?void 0:r.getDocumentElement(a.floating)),boundary:l,rootBoundary:u,strategy:c})),b="floating"===f?{x:i,y:o,width:s.floating.width,height:s.floating.height}:s.reference,x=await(null==r.getOffsetParent?void 0:r.getOffsetParent(a.floating)),g=await(null==r.isElement?void 0:r.isElement(x))&&await(null==r.getScale?void 0:r.getScale(x))||{x:1,y:1},v=k(r.convertOffsetParentRelativeRectToViewportRelativeRect?await r.convertOffsetParentRelativeRectToViewportRelativeRect({elements:a,rect:b,offsetParent:x,strategy:c}):b);return{top:(w.top-v.top+y.top)/g.y,bottom:(v.bottom-w.bottom+y.bottom)/g.y,left:(w.left-v.left+y.left)/g.x,right:(v.right-w.right+y.right)/g.x}}function R(){return"undefined"!=typeof window}function S(t){return P(t)?(t.nodeName||"").toLowerCase():"#document"}function D(t){var n;return(null==t||null==(n=t.ownerDocument)?void 0:n.defaultView)||window}function L(t){var n;return null==(n=(P(t)?t.ownerDocument:t.document)||window.document)?void 0:n.documentElement}function P(t){return!!R()&&(t instanceof Node||t instanceof D(t).Node)}function V(t){return!!R()&&(t instanceof Element||t instanceof D(t).Element)}function B(t){return!!R()&&(t instanceof HTMLElement||t instanceof D(t).HTMLElement)}function E(t){return!(!R()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof D(t).ShadowRoot)}function M(t){const{overflow:n,overflowX:e,overflowY:i,display:o}=$(t);return/auto|scroll|overlay|hidden|clip/.test(n+i+e)&&!["inline","contents"].includes(o)}function T(t){return["table","td","th"].includes(S(t))}function F(t){return[":popover-open",":modal"].some((n=>{try{return t.matches(n)}catch(t){return!1}}))}function j(t){const n=z(),e=V(t)?$(t):t;return["transform","translate","scale","rotate","perspective"].some((t=>!!e[t]&&"none"!==e[t]))||!!e.containerType&&"normal"!==e.containerType||!n&&!!e.backdropFilter&&"none"!==e.backdropFilter||!n&&!!e.filter&&"none"!==e.filter||["transform","translate","scale","rotate","perspective","filter"].some((t=>(e.willChange||"").includes(t)))||["paint","layout","strict","content"].some((t=>(e.contain||"").includes(t)))}function z(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}function O(t){return["html","body","#document"].includes(S(t))}function $(t){return D(t).getComputedStyle(t)}function _(t){return V(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}}function N(t){if("html"===S(t))return t;const n=t.assignedSlot||t.parentNode||E(t)&&t.host||L(t);return E(n)?n.host:n}function H(t){const n=N(t);return O(n)?t.ownerDocument?t.ownerDocument.body:t.body:B(n)&&M(n)?n:H(n)}function W(t,n){var e;void 0===n&&(n=[]);const i=H(t),o=i===(null==(e=t.ownerDocument)?void 0:e.body),r=D(i);return o?n.concat(r,r.visualViewport||[],M(i)?i:[],[]):n.concat(i,W(i,[]))}function X(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}function I(t){const n=$(t);let e=parseFloat(n.width)||0,i=parseFloat(n.height)||0;const o=B(t),r=o?t.offsetWidth:e,s=o?t.offsetHeight:i,a=c(e)!==r||c(i)!==s;return a&&(e=r,i=s),{width:e,height:i,$:a}}function K(t){return V(t)?t:t.contextElement}function Y(t){const n=K(t);if(!B(n))return l(1);const e=n.getBoundingClientRect(),{width:i,height:o,$:r}=I(n);let s=(r?c(e.width):e.width)/i,a=(r?c(e.height):e.height)/o;return s&&Number.isFinite(s)||(s=1),a&&Number.isFinite(a)||(a=1),{x:s,y:a}}const q=l(0);function G(t){const n=D(t);return z()&&n.visualViewport?{x:n.visualViewport.offsetLeft,y:n.visualViewport.offsetTop}:q}function J(t,n,e,i){void 0===n&&(n=!1),void 0===e&&(e=!1);const o=t.getBoundingClientRect(),r=K(t);let s=l(1);n&&(i?V(i)&&(s=Y(i)):s=Y(t));const a=function(t,n,e){return void 0===n&&(n=!1),!(!e||n&&e!==D(t))&&n}(r,e,i)?G(r):l(0);let c=(o.left+a.x)/s.x,u=(o.top+a.y)/s.y,f=o.width/s.x,d=o.height/s.y;if(r){const t=D(r),n=i&&V(i)?D(i):i;let e=t,o=X(e);for(;o&&i&&n!==e;){const t=Y(o),n=o.getBoundingClientRect(),i=$(o),r=n.left+(o.clientLeft+parseFloat(i.paddingLeft))*t.x,s=n.top+(o.clientTop+parseFloat(i.paddingTop))*t.y;c*=t.x,u*=t.y,f*=t.x,d*=t.y,c+=r,u+=s,e=D(o),o=X(e)}}return k({width:f,height:d,x:c,y:u})}function Q(t,n){const e=_(t).scrollLeft;return n?n.left+e:J(L(t)).left+e}function U(t,n,e){void 0===e&&(e=!1);const i=t.getBoundingClientRect();return{x:i.left+n.scrollLeft-(e?0:Q(t,i)),y:i.top+n.scrollTop}}function Z(t,n,e){let i;if("viewport"===n)i=function(t,n){const e=D(t),i=L(t),o=e.visualViewport;let r=i.clientWidth,s=i.clientHeight,a=0,c=0;if(o){r=o.width,s=o.height;const t=z();(!t||t&&"fixed"===n)&&(a=o.offsetLeft,c=o.offsetTop)}return{width:r,height:s,x:a,y:c}}(t,e);else if("document"===n)i=function(t){const n=L(t),e=_(t),i=t.ownerDocument.body,o=a(n.scrollWidth,n.clientWidth,i.scrollWidth,i.clientWidth),r=a(n.scrollHeight,n.clientHeight,i.scrollHeight,i.clientHeight);let s=-e.scrollLeft+Q(t);const c=-e.scrollTop;return"rtl"===$(i).direction&&(s+=a(n.clientWidth,i.clientWidth)-o),{width:o,height:r,x:s,y:c}}(L(t));else if(V(n))i=function(t,n){const e=J(t,!0,"fixed"===n),i=e.top+t.clientTop,o=e.left+t.clientLeft,r=B(t)?Y(t):l(1);return{width:t.clientWidth*r.x,height:t.clientHeight*r.y,x:o*r.x,y:i*r.y}}(n,e);else{const e=G(t);i={x:n.x-e.x,y:n.y-e.y,width:n.width,height:n.height}}return k(i)}function tt(t,n){const e=N(t);return!(e===n||!V(e)||O(e))&&("fixed"===$(e).position||tt(e,n))}function nt(t,n,e){const i=B(n),o=L(n),r="fixed"===e,s=J(t,!0,r,n);let a={scrollLeft:0,scrollTop:0};const c=l(0);function u(){c.x=Q(o)}if(i||!i&&!r)if(("body"!==S(n)||M(o))&&(a=_(n)),i){const t=J(n,!0,r,n);c.x=t.x+n.clientLeft,c.y=t.y+n.clientTop}else o&&u();r&&!i&&o&&u();const f=!o||i||r?l(0):U(o,a);return{x:s.left+a.scrollLeft-c.x-f.x,y:s.top+a.scrollTop-c.y-f.y,width:s.width,height:s.height}}function et(t){return"static"===$(t).position}function it(t,n){if(!B(t)||"fixed"===$(t).position)return null;if(n)return n(t);let e=t.offsetParent;return L(t)===e&&(e=e.ownerDocument.body),e}function ot(t,n){const e=D(t);if(F(t))return e;if(!B(t)){let n=N(t);for(;n&&!O(n);){if(V(n)&&!et(n))return n;n=N(n)}return e}let i=it(t,n);for(;i&&T(i)&&et(i);)i=it(i,n);return i&&O(i)&&et(i)&&!j(i)?e:i||function(t){let n=N(t);for(;B(n)&&!O(n);){if(j(n))return n;if(F(n))return null;n=N(n)}return null}(t)||e}const rt={convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{elements:n,rect:e,offsetParent:i,strategy:o}=t;const r="fixed"===o,s=L(i),a=!!n&&F(n.floating);if(i===s||a&&r)return e;let c={scrollLeft:0,scrollTop:0},u=l(1);const f=l(0),d=B(i);if((d||!d&&!r)&&(("body"!==S(i)||M(s))&&(c=_(i)),B(i))){const t=J(i);u=Y(i),f.x=t.x+i.clientLeft,f.y=t.y+i.clientTop}const h=!s||d||r?l(0):U(s,c,!0);return{width:e.width*u.x,height:e.height*u.y,x:e.x*u.x-c.scrollLeft*u.x+f.x+h.x,y:e.y*u.y-c.scrollTop*u.y+f.y+h.y}},getDocumentElement:L,getClippingRect:function(t){let{element:n,boundary:e,rootBoundary:i,strategy:o}=t;const r=[..."clippingAncestors"===e?F(n)?[]:function(t,n){const e=n.get(t);if(e)return e;let i=W(t,[]).filter((t=>V(t)&&"body"!==S(t))),o=null;const r="fixed"===$(t).position;let s=r?N(t):t;for(;V(s)&&!O(s);){const n=$(s),e=j(s);e||"fixed"!==n.position||(o=null),(r?!e&&!o:!e&&"static"===n.position&&o&&["absolute","fixed"].includes(o.position)||M(s)&&!e&&tt(t,s))?i=i.filter((t=>t!==s)):o=n,s=N(s)}return n.set(t,i),i}(n,this._c):[].concat(e),i],c=r.reduce(((t,e)=>{const i=Z(n,e,o);return t.top=a(i.top,t.top),t.right=s(i.right,t.right),t.bottom=s(i.bottom,t.bottom),t.left=a(i.left,t.left),t}),Z(n,r[0],o));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},getOffsetParent:ot,getElementRects:async function(t){const n=this.getOffsetParent||ot,e=this.getDimensions,i=await e(t.floating);return{reference:nt(t.reference,await n(t.floating),t.strategy),floating:{x:0,y:0,width:i.width,height:i.height}}},getClientRects:function(t){return Array.from(t.getClientRects())},getDimensions:function(t){const{width:n,height:e}=I(t);return{width:n,height:e}},getScale:Y,isElement:V,isRTL:function(t){return"rtl"===$(t).direction}},st=function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(n){const{x:e,y:i,placement:o}=n,{mainAxis:r=!0,crossAxis:s=!1,limiter:a={fn:t=>{let{x:n,y:e}=t;return{x:n,y:e}}},...c}=h(t,n),l={x:e,y:i},u=await C(n,c),f=b(m(o)),y=p(f);let w=l[y],x=l[f];r&&(w=d(w+u["y"===y?"top":"left"],w,w-u["y"===y?"bottom":"right"])),s&&(x=d(x+u["y"===f?"top":"left"],x,x-u["y"===f?"bottom":"right"]));const g=a.fn({...n,[y]:w,[f]:x});return{...g,data:{x:g.x-e,y:g.y-i,enabled:{[y]:r,[f]:s}}}}}},at=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(n){var e,i;const{placement:o,middlewareData:r,rects:s,initialPlacement:a,platform:c,elements:l}=n,{mainAxis:u=!0,crossAxis:f=!0,fallbackPlacements:d,fallbackStrategy:p="bestFit",fallbackAxisSideDirection:k="none",flipAlignment:A=!0,...R}=h(t,n);if(null!=(e=r.arrow)&&e.alignmentOffset)return{};const S=m(o),D=b(a),L=m(a)===a,P=await(null==c.isRTL?void 0:c.isRTL(l.floating)),V=d||(L||!A?[v(a)]:function(t){const n=v(t);return[g(t),n,g(n)]}(a)),B="none"!==k;!d&&B&&V.push(...function(t,n,e,i){const o=y(t);let r=function(t,n,e){const i=["left","right"],o=["right","left"],r=["top","bottom"],s=["bottom","top"];switch(t){case"top":case"bottom":return e?n?o:i:n?i:o;case"left":case"right":return n?r:s;default:return[]}}(m(t),"start"===e,i);return o&&(r=r.map((t=>t+"-"+o)),n&&(r=r.concat(r.map(g)))),r}(a,A,k,P));const E=[a,...V],M=await C(n,R),T=[];let F=(null==(i=r.flip)?void 0:i.overflows)||[];if(u&&T.push(M[S]),f){const t=function(t,n,e){void 0===e&&(e=!1);const i=y(t),o=x(t),r=w(o);let s="x"===o?i===(e?"end":"start")?"right":"left":"start"===i?"bottom":"top";return n.reference[r]>n.floating[r]&&(s=v(s)),[s,v(s)]}(o,s,P);T.push(M[t[0]],M[t[1]])}if(F=[...F,{placement:o,overflows:T}],!T.every((t=>t<=0))){var j,z;const t=((null==(j=r.flip)?void 0:j.index)||0)+1,n=E[t];if(n&&("alignment"!==f||D===b(n)||F.every((t=>t.overflows[0]>0&&b(t.placement)===D))))return{data:{index:t,overflows:F},reset:{placement:n}};let e=null==(z=F.filter((t=>t.overflows[0]<=0)).sort(((t,n)=>t.overflows[1]-n.overflows[1]))[0])?void 0:z.placement;if(!e)switch(p){case"bestFit":{var O;const t=null==(O=F.filter((t=>{if(B){const n=b(t.placement);return n===D||"y"===n}return!0})).map((t=>[t.placement,t.overflows.filter((t=>t>0)).reduce(((t,n)=>t+n),0)])).sort(((t,n)=>t[1]-n[1]))[0])?void 0:O[0];t&&(e=t);break}case"initialPlacement":e=a}if(o!==e)return{reset:{placement:e}}}return{}}}},ct=class{constructor(e){t(this,e),this.menuVisibilityChange=n(this,"menuVisibilityChange"),this.inheritedAttributes={},this.buttonColor="primary",this.buttonSize="md",this.buttonVariant="filled",this.customClass="",this.disabled=!1,this.menuBordered=!0,this.menuOffset=10,this.menuPlacement="bottom-start",this.menuSize="md",this.menuVisible=!1,this.menuPosition={x:0,y:0},this.handleButtonClick=()=>{const t=!this.menuVisible;this.menuVisible=t,this.menuVisibilityChange.emit({isVisible:t})},this.updateMenuPosition=async()=>{if(!this.buttonRef||!this.menuRef)return;const{x:t,y:n}=await((t,n,e)=>{const i=new Map,o={platform:rt,...e},r={...o.platform,_c:i};return(async(t,n,e)=>{const{placement:i="bottom",strategy:o="absolute",middleware:r=[],platform:s}=e,a=r.filter(Boolean),c=await(null==s.isRTL?void 0:s.isRTL(n));let l=await s.getElementRects({reference:t,floating:n,strategy:o}),{x:u,y:f}=A(l,i,c),d=i,h={},m=0;for(let e=0;e<a.length;e++){const{name:r,fn:y}=a[e],{x:p,y:w,data:b,reset:x}=await y({x:u,y:f,initialPlacement:i,placement:d,strategy:o,middlewareData:h,rects:l,platform:s,elements:{reference:t,floating:n}});u=null!=p?p:u,f=null!=w?w:f,h={...h,[r]:{...h[r],...b}},x&&m<=50&&(m++,"object"==typeof x&&(x.placement&&(d=x.placement),x.rects&&(l=!0===x.rects?await s.getElementRects({reference:t,floating:n,strategy:o}):x.rects),({x:u,y:f}=A(l,d,c))),e=-1)}return{x:u,y:f,placement:d,strategy:o,middlewareData:h}})(t,n,{...o,platform:r})})(this.buttonRef,this.menuRef,{placement:this.menuPlacement,middleware:[(e=this.menuOffset,void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var n,i;const{x:o,y:r,placement:s,middlewareData:a}=t,c=await async function(t,n){const{placement:e,platform:i,elements:o}=t,r=await(null==i.isRTL?void 0:i.isRTL(o.floating)),s=m(e),a=y(e),c="y"===b(e),l=["left","top"].includes(s)?-1:1,u=r&&c?-1:1,f=h(n,t);let{mainAxis:d,crossAxis:p,alignmentAxis:w}="number"==typeof f?{mainAxis:f,crossAxis:0,alignmentAxis:null}:{mainAxis:f.mainAxis||0,crossAxis:f.crossAxis||0,alignmentAxis:f.alignmentAxis};return a&&"number"==typeof w&&(p="end"===a?-1*w:w),c?{x:p*u,y:d*l}:{x:d*l,y:p*u}}(t,e);return s===(null==(n=a.offset)?void 0:n.placement)&&null!=(i=a.arrow)&&i.alignmentOffset?{}:{x:o+c.x,y:r+c.y,data:{...c,placement:s}}}}),at(),st({padding:8})]});var e;this.menuPosition={x:t,y:n}}}handleDocumentClick(t){!this.el.contains(t.target)&&this.menuVisible&&(this.menuVisible=!1,this.menuVisibilityChange.emit({isVisible:!1}))}handleKeyDown(t){"Escape"===t.key&&this.menuVisible&&(this.menuVisible=!1,this.menuVisibilityChange.emit({isVisible:!1}))}async onMenuVisibilityChange(t){t&&await this.updateMenuPosition()}componentDidLoad(){this.buttonRef=this.el.querySelector("modus-wc-button")}componentWillLoad(){this.inheritedAttributes=r(this.el)}getClasses(){const t=["modus-wc-dropdown-menu"];return this.customClass&&t.push(this.customClass),t.join(" ")}render(){return e(i,Object.assign({key:"7b10354a16796f60a6dd4e0b0a00a04b0c2ae5b4",class:this.getClasses()},this.inheritedAttributes),e("modus-wc-button",{key:"311b46ebd8493d530833d934a13e2fc1ce595364","aria-expanded":this.menuVisible.toString(),"aria-haspopup":"true",color:this.buttonColor,disabled:this.disabled,onButtonClick:this.handleButtonClick,size:this.buttonSize,variant:this.buttonVariant},e("slot",{key:"78a8d51b753dcea59aafe69785ee381dfc1ab3e1",name:"button"})),e("div",{key:"c072ce15cf93866ac848a2eb2f4ba5bd9dcf64cd","aria-hidden":!this.menuVisible,class:"menu-wrapper",ref:t=>this.menuRef=t,style:{position:"absolute",top:`${this.menuPosition.y}px`,left:`${this.menuPosition.x}px`,zIndex:"1000",visibility:this.menuVisible?"visible":"hidden",opacity:this.menuVisible?"1":"0",pointerEvents:this.menuVisible?"auto":"none"}},e("modus-wc-menu",{key:"cc306914c944d00463cf220ab8d74285554b9a28",bordered:this.menuBordered,size:this.menuSize},e("slot",{key:"ef3df9a73a3fa4f5c540319a5c597663af56cf1b",name:"menu"}))))}get el(){return o(this)}static get watchers(){return{menuVisible:["onMenuVisibilityChange"]}}};ct.style="modus-wc-dropdown-menu.modus-wc-dropdown-menu .menu-wrapper{left:0;position:absolute;top:0;width:max-content}";export{ct as modus_wc_dropdown_menu}