@trimble-oss/moduswebcomponents
Version:
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
1 lines • 29.5 kB
JavaScript
import{r as t,c as o,h as e,H as s,g as i}from"./p-D_4hbGjA.js";import{i as u,c as m,b as d}from"./p-BLBSdonk.js";import{C as c}from"./p-KjNN2AF4.js";import{S as n}from"./p-DLFqJk_p.js";import{c as a}from"./p-BfP9ezJQ.js";const r=class{constructor(e){t(this,e),this.menuFocusout=o(this,"menuFocusout"),this.inheritedAttributes={},this.customClass="",this.orientation="vertical",this.size="md",this.handleFocusout=t=>{this.el.contains(t.relatedTarget)||(this.menuFocusout.emit(t),this.isSubMenu&&t.stopPropagation())},this.getMenuRole=()=>"horizontal"===this.orientation?"menubar":"menu"}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel="Menu"),this.inheritedAttributes=u(this.el)}getClasses(){if(this.isSubMenu){const t=["modus-wc-menu-dropdown"];return this.customClass&&t.push(this.customClass),t.join(" ")}const t=["modus-wc-menu modus-wc-w-full"],o=(({bordered:t,orientation:o,size:e})=>{let s="";return t&&(s=`${s} modus-wc-menu--bordered`),"horizontal"===o&&(s=`${s} modus-wc-menu-horizontal`),e&&(s=`${s} modus-wc-menu-${e}`),s.trim()})({bordered:this.bordered,orientation:this.orientation,size:this.size});return o&&t.push(o),this.customClass&&t.push(this.customClass),t.join(" ")}render(){return e(s,{key:"6c84e9bf11325a2f679a9e9c84bbee201f483ec7",class:this.isSubMenu?"modus-wc-menu-submenu":void 0},e("ul",Object.assign({key:"095e756b51978dae6468097431cd6f78006a2058","aria-orientation":this.orientation,class:this.getClasses(),onFocusout:this.handleFocusout,role:this.getMenuRole()},this.inheritedAttributes),e("slot",{key:"d8c279b7bdf157f06fde0f1f6a98aba402fb33f5"})))}get el(){return i(this)}};r.style="modus-wc-menu.modus-wc-menu-submenu{display:contents}modus-wc-menu .modus-wc-menu{background-color:var(--modus-wc-color-base-page);border-radius:var(--modus-wc-border-radius-md);list-style:none;margin:0;padding:0;padding-inline-start:0}modus-wc-menu .modus-wc-menu.modus-wc-menu--bordered{border:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-200)}modus-wc-menu .modus-wc-menu-dropdown{display:none;list-style:none}modus-wc-menu .modus-wc-menu-dropdown-show{display:block}[data-theme=modus-classic-light] modus-wc-menu .modus-wc-menu{background-color:var(--modus-wc-color-white);border-color:var(--modus-wc-color-gray-0)}[data-theme=modus-classic-dark] modus-wc-menu .modus-wc-menu{background-color:var(--modus-wc-color-black);border-color:var(--modus-wc-color-gray-8)}";const w=class{constructor(e){t(this,e),this.itemSelect=o(this,"itemSelect"),this.inheritedAttributes={},this.customClass="",this.label="",this.size="md",this.tooltipPosition="auto",this.value="",this.isExpanded=!1,this.handleKeyDown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.handleItemSelect())},this.handleItemSelect=()=>{if(this.hasSubmenu){const t=this.el.closest("modus-wc-side-navigation");if(t&&!t.expanded)return void this.itemSelect.emit({value:this.value});const o=this.el.querySelector(".modus-wc-menu-dropdown"),e=this.el.querySelector("li");if(o&&e){o.classList.toggle("modus-wc-menu-dropdown-show");const t=e.querySelector("button");this.isExpanded=o.classList.contains("modus-wc-menu-dropdown-show"),this.isExpanded?(e.classList.add("modus-wc-menu-item-expanded"),t&&t.classList.add("modus-wc-menu-dropdown-show")):(e.classList.remove("modus-wc-menu-item-expanded"),t&&t.classList.remove("modus-wc-menu-dropdown-show"))}}else if(this.checkbox){const t=this.el.querySelector("li"),o=this.el.querySelector("modus-wc-checkbox");if(t){const e=t.classList.contains("modus-wc-menu-item-selected");e?t.classList.remove("modus-wc-menu-item-selected"):t.classList.add("modus-wc-menu-item-selected"),o&&o.setAttribute("value",(!e).toString()),this.selected=!0}}else this.selected=!0;this.itemSelect.emit({value:this.value,selected:this.selected})}}componentWillLoad(){this.inheritedAttributes=u(this.el)}async collapseSubmenu(){if(this.hasSubmenu&&this.isExpanded){const t=this.el.querySelector(".modus-wc-menu-dropdown"),o=this.el.querySelector("li");t&&o&&(t.classList.remove("modus-wc-menu-dropdown-show"),o.classList.remove("modus-wc-menu-item-expanded"),this.isExpanded=!1)}return Promise.resolve()}getClasses(){const t=["modus-wc-menu-item"],o=(({bordered:t,disabled:o,selected:e,focused:s,size:i})=>{let u="";return t&&(u=`${u} modus-wc-menu-item-bordered`),o&&(u=`${u} modus-wc-menu-item-disabled`),e&&(u=`${u} modus-wc-menu-item-selected`),s&&(u=`${u} modus-wc-menu-item-focused`),i&&(u=`${u} modus-wc-menu-item-${i}`),u.trim()})({bordered:this.bordered,disabled:this.disabled,selected:!this.hasSubmenu&&this.selected,focused:this.focused,size:this.size});return o&&t.push(o),this.customClass&&t.push(this.customClass),t.join(" ")}getButtonClasses(){return this.hasSubmenu?"modus-wc-menu-dropdown-toggle":""}render(){return e(s,{key:"7d8f11c2661bb48fea599296919753a9afcc6b8b"},e("li",Object.assign({key:"ff0f32cce009f017d91450639ad518bbbd75eec2","aria-current":this.selected,"aria-disabled":this.disabled,class:this.getClasses(),onKeyDown:this.handleKeyDown,role:"menuitem",tabIndex:this.disabled?-1:0},this.inheritedAttributes),e("button",{key:"549d1b8758345179772632fa671dafe0208e8f20",class:this.getButtonClasses(),disabled:this.disabled,onClick:this.handleItemSelect,tabIndex:-1,type:"button"},e("div",{key:"7aa8b7bd9677b5061e3c5b5878a4dc78579dc131",class:"modus-wc-menu-item-content"},this.checkbox&&e("modus-wc-checkbox",{key:"ef1f3f365b85665839fd2a7e46b09457a6ae077c","aria-label":"Checkbox",disabled:this.disabled,size:this.size,value:!!this.selected}),e("slot",{key:"077efb3c770fc31ab16e29bdcbeac5c15db86b3b",name:"start-icon"}),e("div",{key:"22ae0acc390dddcfa9927a69ee695aadce4ffde9",class:"modus-wc-menu-item-labels"},this.tooltipContent?e("modus-wc-tooltip",{content:this.tooltipContent,position:this.tooltipPosition,customClass:"modus-wc-menu-item-tooltip"},e("div",null,this.label)):e("div",null,this.label),this.subLabel&&e("div",{key:"683e67e731296b116d92944ef0d109748bf3fcf5",class:"modus-wc-menu-item-sublabel"},this.subLabel)))),e("slot",{key:"10dfea85bd31f8da1f43ad8e72bf83b4f6293514"})))}get el(){return i(this)}};w.style="modus-wc-menu-item .modus-wc-menu-item button{align-items:center;border-radius:0;display:flex;width:100%}modus-wc-menu-item .modus-wc-menu-item button:hover{background-color:transparent}modus-wc-menu-item .modus-wc-menu-item button:focus{background-color:transparent}modus-wc-menu-item .modus-wc-menu-item button.modus-wc-menu-dropdown-toggle::after{color:var(--modus-wc-color-gray-6)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content{align-items:center;display:flex;width:100%}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content [slot=start-icon]{padding-inline-end:var(--modus-wc-spacing-lg)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content modus-wc-checkbox{padding-inline-end:var(--modus-wc-spacing-lg)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-labels{padding-inline-end:var(--modus-wc-spacing-xs);padding-inline-start:var(--modus-wc-spacing-xs)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-menu-item .modus-wc-menu-item button .modus-wc-menu-item-content .modus-wc-menu-item-selected-icon{margin-left:auto}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-sm button{font-size:var(--modus-wc-font-size-sm)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-sm button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-xs)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-md button{font-size:var(--modus-wc-font-size-md)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-md button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-sm)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-lg button{font-size:var(--modus-wc-font-size-lg)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-lg button .modus-wc-menu-item-sublabel{font-size:var(--modus-wc-font-size-md)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-bordered{border-bottom:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-100);border-radius:0;border-top:var(--modus-wc-border-width-xs) solid var(--modus-wc-color-base-100)}modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected){color:var(--modus-wc-color-gray-10)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected{background-color:var(--modus-wc-color-blue-pale);border-radius:inherit;color:var(--modus-wc-color-primary)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected:focus{background-color:var(--modus-wc-color-blue-pale)}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected button:hover,modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected button:focus{background-color:transparent;box-shadow:none;color:inherit}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-disabled{opacity:0.4}modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-disabled button{pointer-events:none}modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):hover{background-color:var(--modus-wc-color-gray-0);color:inherit;outline:none}modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):focus:not(:focus-visible),modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)).modus-wc-arrow-focused{background-color:var(--modus-wc-color-gray-0);color:inherit;outline:none}modus-wc-menu-item .modus-wc-menu-item:focus-visible{background-color:transparent;outline:2px solid var(--modus-wc-color-trimble-blue);outline-offset:-2px}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected),[data-theme=modus-modern-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected),[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected){color:var(--modus-wc-color-gray-light)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item button.modus-wc-menu-dropdown-toggle::after,[data-theme=modus-modern-dark] modus-wc-menu-item .modus-wc-menu-item button.modus-wc-menu-dropdown-toggle::after,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item button.modus-wc-menu-dropdown-toggle::after{color:var(--modus-wc-color-gray-3)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):hover,[data-theme=modus-modern-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):hover,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):hover{background-color:var(--modus-wc-color-gray-9);color:inherit;outline:none}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected,[data-theme=modus-modern-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item.modus-wc-menu-item-selected{background-color:color-mix(in sRGB, var(--modus-wc-color-primary) 30%, transparent)}[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):focus:not(:focus-visible),[data-theme=modus-classic-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)).modus-wc-arrow-focused,[data-theme=modus-modern-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):focus:not(:focus-visible),[data-theme=modus-modern-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)).modus-wc-arrow-focused,[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)):focus:not(:focus-visible),[data-theme=connect-dark] modus-wc-menu-item .modus-wc-menu-item:not(.modus-wc-menu-item-selected):not(.modus-wc-menu-item-disabled):not(:has(.modus-wc-menu-dropdown)).modus-wc-arrow-focused{background-color:var(--modus-wc-color-gray-9)}.modus-wc-menu-item-tooltip{display:inline-block;width:auto}";const h=class{constructor(e){t(this,e),this.clearClick=o(this,"clearClick"),this.inputBlur=o(this,"inputBlur"),this.inputChange=o(this,"inputChange"),this.inputFocus=o(this,"inputFocus"),this.inheritedAttributes={},this.generatedId=m(),this.bordered=!0,this.clearAriaLabel="Clear text",this.customClass="",this.disabled=!1,this.includeClear=!1,this.includeSearch=!1,this.placeholder="",this.readOnly=!1,this.required=!1,this.size="md",this.type="text",this.value="",this.handleBlur=t=>{this.inputBlur.emit(t)},this.handleClearText=t=>{this.value="",this.inputChange.emit(t),this.clearClick.emit()},this.handleFocus=t=>{this.inputFocus.emit(t)},this.handleInput=t=>{this.value=t.target.value,this.inputChange.emit(t)}}componentWillLoad(){this.el.ariaLabel||(this.el.ariaLabel=this.placeholder||"Text input"),this.inheritedAttributes=Object.assign(Object.assign({},u(this.el)),d(this.el,["spellcheck","inputmode"])),this.el.hasAttribute("inputmode")||this.inheritedAttributes.inputmode||this.el.setAttribute("inputmode","text")}getClasses(){const t=["modus-wc-text-input","modus-wc-input","modus-wc-w-full","modus-wc-flex","modus-wc-items-center","modus-wc-gap-1"],o=(({bordered:t,disabled:o,feedback:e,readOnly:s,size:i})=>{let u="";return t&&(u=`${u} modus-wc-input-bordered`),o&&(u=`${u} modus-wc-input-disabled`),e&&(u=`${u} modus-wc-input--${e.level}`),s&&(u=`${u} modus-wc-text-input--readonly`),i&&(u=`${u} modus-wc-input-${i}`),u.trim()})({bordered:this.bordered,disabled:this.disabled,feedback:this.feedback,readOnly:this.readOnly,size:this.size});return o&&t.push(o),this.customClass&&t.push(this.customClass),t.join(" ")}shouldIncludeClear(){return!(!this.includeClear||this.disabled||this.readOnly||!this.value)}render(){const t=this.shouldIncludeClear(),o=this.inputId||this.generatedId,i=!!this.el.querySelector('[slot="custom-icon"]');return e(s,{key:"0e7bdce5e281ea9630c19cb0b8e7c791b9b84a9b"},this.label&&e("modus-wc-input-label",{key:"eddf5e49410f94cc182bc51b97e4ef91c3918322",forId:o,labelText:this.label,required:this.required,size:this.size}),e("label",{key:"e9f5f5e880bb6610316c9cec6875608a13f59fc3",class:this.getClasses()},i?e("div",{class:"modus-wc-text-input-icon modus-wc-text-input-icon-custom"},e("slot",{name:"custom-icon"})):this.includeSearch&&e(n,{className:"modus-wc-text-input-icon modus-wc-text-input-icon-search"}),e("input",Object.assign({key:"dc972a389b04a6d73afb93799431a52e5e163c96","aria-required":this.required,autocapitalize:this.autoCapitalize,autocomplete:this.autoComplete,autocorrect:this.autoCorrect,class:"modus-wc-grow",disabled:this.disabled,enterkeyhint:this.enterkeyhint,id:o,maxlength:this.maxLength,minlength:this.minLength,name:this.name,onBlur:this.handleBlur,onFocus:this.handleFocus,onInput:this.handleInput,pattern:this.pattern,placeholder:this.placeholder,readonly:this.readOnly,required:this.required,tabIndex:this.inputTabIndex,type:this.type,value:this.value},this.inheritedAttributes)),this.includeClear&&e("div",{key:"9ba4799eb5b808a7f5d01cf66738e10c3c6d8957",class:"modus-wc-clear-icon-container "+(t?"modus-wc-clear-icon-visible":"modus-wc-clear-icon-hidden")},e(c,{key:"3edd47bd185a5de2b2023f3472b8900cedb4b683",ariaLabel:this.clearAriaLabel,className:"modus-wc-text-input-icon modus-wc-text-input-icon-clear",decorative:!1,onClear:this.handleClearText}))),this.feedback&&e("modus-wc-input-feedback",{key:"f1fc2d8df7fe7973e9b669dead0abf9d74a41dd6",level:this.feedback.level,message:this.feedback.message,size:this.size}))}get el(){return i(this)}};h.style="modus-wc-text-input .modus-wc-input{border-bottom-width:var(--input-bottom-border-width)}modus-wc-text-input .modus-wc-input--error{border-color:var(--modus-wc-color-error) !important}modus-wc-text-input .modus-wc-input--info{border-color:var(--modus-wc-color-info) !important}modus-wc-text-input .modus-wc-input--success{border-color:var(--modus-wc-color-success) !important}modus-wc-text-input .modus-wc-input--warning{border-color:var(--modus-wc-color-warning) !important}modus-wc-text-input .modus-wc-input-xs{height:var(--modus-wc-size-xs);min-height:var(--modus-wc-size-xs)}modus-wc-text-input .modus-wc-input-sm{height:var(--modus-wc-size-sm);min-height:var(--modus-wc-size-sm)}modus-wc-text-input .modus-wc-input-md{height:var(--modus-wc-size-md);min-height:var(--modus-wc-size-md)}modus-wc-text-input .modus-wc-input-lg{height:var(--modus-wc-size-lg);min-height:var(--modus-wc-size-lg)}modus-wc-text-input .modus-wc-input-xl{height:var(--modus-wc-size-xl);min-height:var(--modus-wc-size-xl)}modus-wc-text-input .modus-wc-input-label{padding-bottom:var(--modus-wc-spacing-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input{padding:0 var(--modus-wc-spacing-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-sm);width:var(--modus-wc-line-height-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-md);width:var(--modus-wc-line-height-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg .modus-wc-text-input-icon:not(.modus-wc-text-input-icon-custom){height:var(--modus-wc-line-height-lg);width:var(--modus-wc-line-height-lg)}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear{cursor:pointer}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-custom{align-items:center;display:flex;flex-shrink:0;justify-content:center}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container{align-items:center;display:flex;justify-content:center;min-width:var(--modus-wc-line-height-md)}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container.modus-wc-clear-icon-hidden{pointer-events:none;visibility:hidden}modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-clear-icon-container.modus-wc-clear-icon-visible{visibility:visible}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm .modus-wc-clear-icon-container{min-width:var(--modus-wc-line-height-sm)}modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg .modus-wc-clear-icon-container{min-width:var(--modus-wc-line-height-lg)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input{border-radius:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm{font-size:var(--modus-wc-font-size-sm);height:var(--modus-wc-input-height-sm);line-height:var(--modus-wc-line-height-sm);padding:var(--modus-wc-spacing-sm) var(--modus-wc-spacing-xs)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-md{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-line-height-md);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-lg{font-size:var(--modus-wc-font-size-lg);height:var(--modus-wc-input-height-lg);line-height:var(--modus-wc-line-height-xl);padding:var(--modus-wc-spacing-md) var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within{border-width:var(--modus-wc-border-width-sm);box-shadow:none;outline:none}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear:focus:not(:focus-visible),[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon.modus-wc-text-input-icon-clear:focus:not(:focus-visible){outline:none}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-text-input--readonly,[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-text-input--readonly{background-color:var(--modus-wc-color-base-100)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-bordered:not(:disabled){border-color:var(--modus-wc-color-accent)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-bordered:not(:disabled):focus-within{border-color:var(--modus-wc-color-blue-light)}[data-theme=modus-classic-light] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon{color:var(--modus-wc-color-gray-8)}[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input .modus-wc-text-input-icon{color:var(--modus-wc-color-gray-2)}[data-theme=modus-classic-dark] modus-wc-text-input .modus-wc-text-input.modus-wc-input:focus-within{border-color:var(--modus-wc-color-highlight-blue)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input{border-bottom-width:var(--input-bottom-border-width);outline-width:0 !important}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:not(.modus-wc-select,.modus-wc-number-input),[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:not(.modus-wc-select,.modus-wc-number-input){padding:0 var(--modus-wc-spacing-sm)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:hover,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:hover{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:active,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:active{border-bottom-color:var(--modus-wc-color-primary)}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:focus,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:focus{border-bottom-color:var(--modus-wc-color-primary);outline:none}[data-theme=connect-light] modus-wc-text-input .modus-wc-text-input:focus-within,[data-theme=connect-dark] modus-wc-text-input .modus-wc-text-input:focus-within{border-bottom-color:var(--modus-wc-color-primary);outline:none}";const l=class{constructor(e){t(this,e),this.dismissEscape=o(this,"dismissEscape"),this.inheritedAttributes={},this.popperInstance=null,this.tooltipElement=null,this.triggerElement=null,this.content="",this.customClass="",this.disabled=!1,this.position="auto",this.escapeDismissed=!1,this.isVisible=!1,this.handleWindowResize=()=>{this.popperInstance&&this.isVisible&&this.popperInstance.update()},this.handleWindowScroll=()=>{this.popperInstance&&this.isVisible&&this.popperInstance.update()}}componentWillLoad(){this.inheritedAttributes=u(this.el)}elementKeyupHandler(t){"Escape"===t.code&&this.isVisible&&!this.forceOpen&&(this.escapeDismissed=!0,this.dismissEscape.emit(),this.hideTooltip())}componentDidLoad(){this.triggerElement=this.el.querySelector("div > :first-child"),this.tooltipElement=document.createElement("div"),this.tooltipElement.className=`modus-wc-tooltip-content ${this.customClass||""}`,this.tooltipElement.textContent=this.content,this.tooltipElement.setAttribute("role","tooltip"),this.tooltipId&&(this.tooltipElement.id=this.tooltipId);const t=document.createElement("div");t.className="modus-wc-tooltip-arrow",this.tooltipElement.appendChild(t),document.body.appendChild(this.tooltipElement),this.tooltipElement.style.display="none",this.triggerElement&&this.tooltipElement&&this.initializePopper(),!this.forceOpen||this.disabled||this.escapeDismissed||this.showTooltip()}disconnectedCallback(){this.popperInstance&&(this.popperInstance.destroy(),this.popperInstance=null),this.tooltipElement&&document.body.contains(this.tooltipElement)&&document.body.removeChild(this.tooltipElement),window.removeEventListener("resize",this.handleWindowResize),window.removeEventListener("scroll",this.handleWindowScroll,!0)}initializePopper(){if(!this.triggerElement||!this.tooltipElement)return;const t="auto"===this.position?"top":this.position,o=this.tooltipElement.querySelector(".modus-wc-tooltip-arrow");this.popperInstance=a(this.triggerElement,this.tooltipElement,{placement:t,strategy:"absolute",modifiers:[{name:"offset",options:{offset:[0,8]}},{name:"preventOverflow",options:{padding:8,boundary:"viewport"}},{name:"flip",options:{fallbackPlacements:["top","right","bottom","left"],padding:8,boundary:"viewport"}},{name:"arrow",options:{element:o,padding:5}},{name:"computeStyles",options:{adaptive:!0,gpuAcceleration:!0}},{name:"eventListeners",options:{scroll:!0,resize:!0}}]}),window.addEventListener("resize",this.handleWindowResize),window.addEventListener("scroll",this.handleWindowScroll,!0)}showTooltip(){this.disabled||this.escapeDismissed||!this.tooltipElement||(this.tooltipElement.style.display="block",this.isVisible=!0,this.popperInstance&&(this.popperInstance.update(),setTimeout((()=>{this.popperInstance&&this.popperInstance.update()}),10)))}hideTooltip(){this.tooltipElement&&(this.forceOpen&&!this.escapeDismissed||(this.tooltipElement.style.display="none",this.isVisible=!1))}handlePositionChange(){this.popperInstance&&(this.popperInstance.setOptions({placement:"auto"===this.position?"top":this.position}),this.popperInstance.update())}handleContentChange(t){if(this.tooltipElement){const o=this.tooltipElement.querySelector(".modus-wc-tooltip-arrow");this.tooltipElement.textContent=t,o&&this.tooltipElement.appendChild(o)}}handleForceOpenChange(t){t&&!this.disabled?this.showTooltip():this.hideTooltip()}handleMouseEnter(){this.escapeDismissed=!1,this.showTooltip()}handleMouseLeave(){this.forceOpen||this.hideTooltip()}render(){return e(s,{key:"028f22dad1fdd4537bd012847d785b8d518d55b2"},e("div",Object.assign({key:"9638d7b4536e70c3a38ee3c7b81d27a69effd148","aria-describedby":this.tooltipId,id:this.tooltipId},this.inheritedAttributes),e("slot",{key:"326d59ea026f46496671e1eb4238ae59d6ec320d"})))}get el(){return i(this)}static get watchers(){return{position:["handlePositionChange"],content:["handleContentChange"],forceOpen:["handleForceOpenChange"]}}};l.style='.modus-wc-tooltip-content{background-color:var(--modus-wc-color-neutral-content);border-radius:0.25rem;color:var(--modus-wc-color-neutral);font-size:0.875rem;font-weight:var(--modus-wc-font-weight-regular);max-width:20rem;overflow-wrap:break-word;padding:0.25rem 0.5rem;pointer-events:none;position:relative;text-align:center;white-space:normal;width:max-content;word-break:break-word;z-index:1000}.modus-wc-tooltip-arrow,.modus-wc-tooltip-arrow::before{background:inherit;height:8px;position:absolute;width:8px}.modus-wc-tooltip-arrow{text-align:initial;visibility:hidden}.modus-wc-tooltip-arrow::before{background-color:var(--modus-wc-color-neutral-content);content:"";transform:rotate(45deg);visibility:visible}.modus-wc-tooltip-content[data-popper-placement^=top] .modus-wc-tooltip-arrow{bottom:-4px}.modus-wc-tooltip-content[data-popper-placement^=bottom] .modus-wc-tooltip-arrow{top:-4px}.modus-wc-tooltip-content[data-popper-placement^=left] .modus-wc-tooltip-arrow{right:-4px}.modus-wc-tooltip-content[data-popper-placement^=right] .modus-wc-tooltip-arrow{left:-4px}[data-theme=modus-classic-light] .modus-wc-tooltip-content{background-color:var(--modus-wc-color-gray-7);color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] .modus-wc-tooltip-arrow::before{background-color:var(--modus-wc-color-gray-7)}[data-theme=modus-classic-dark] .modus-wc-tooltip-content{background-color:var(--modus-wc-color-gray-0);color:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] .modus-wc-tooltip-arrow::before{background-color:var(--modus-wc-color-gray-0)}[data-theme=connect-light] .modus-wc-tooltip-content,[data-theme=connect-dark] .modus-wc-tooltip-content{background-color:var(--modus-wc-color-base-content);color:var(--modus-wc-color-base-page)}[data-theme=connect-light] .modus-wc-tooltip-arrow::before,[data-theme=connect-dark] .modus-wc-tooltip-arrow::before{background-color:var(--modus-wc-color-base-content)}';export{r as modus_wc_menu,w as modus_wc_menu_item,h as modus_wc_text_input,l as modus_wc_tooltip}