@trimble-oss/moduswebcomponents/modus-wc/p-001408fd.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{h as o,r as a,H as d,g as s}from"./p-D5XAQERj.js";import{C as c}from"./p-CXrnmYJx.js";import{i as e}from"./p-DlW2F98o.js";const m=({className:a})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-collapse ${a||""}`,viewBox:"0 0 24 24"},o("path",{d:"m19.56 8.74-1.45-1.45 2.21-2.2a.96.96 0 0 0 0-1.35l-.07-.07a.96.96 0 0 0-1.35 0l-2.2 2.21-1.45-1.45a.5.5 0 0 0-.85.35v4.29c0 .28.22.5.5.5h4.29c.45 0 .67-.54.35-.85ZM8.74 4.45 7.29 5.9l-2.2-2.21a.96.96 0 0 0-1.35 0l-.07.07a.96.96 0 0 0 0 1.35l2.21 2.2-1.45 1.45a.5.5 0 0 0 .35.85h4.29c.28 0 .5-.22.5-.5V4.82c0-.45-.54-.67-.85-.35ZM4.45 15.27l1.45 1.45-2.21 2.2a.96.96 0 0 0 0 1.35l.07.07c.37.37.98.37 1.35 0l2.2-2.21 1.45 1.45a.5.5 0 0 0 .85-.35v-4.29c0-.28-.22-.5-.5-.5H4.82c-.45 0-.67.54-.35.85Zm10.82 4.29 1.45-1.45 2.2 2.21c.37.37.98.37 1.35 0l.07-.07a.96.96 0 0 0 0-1.35l-2.21-2.2 1.45-1.45a.5.5 0 0 0-.35-.85h-4.29c-.28 0-.5.22-.5.5v4.29c0 .45.54.67.85.35Z"})),l=({className:a})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-expand ${a||""}`,viewBox:"0 0 24 24"},o("path",{d:"M15.85 3.85 17.3 5.3l-2.18 2.16c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0L18.7 6.7l1.45 1.45a.5.5 0 0 0 .85-.36V3.5c0-.28-.22-.5-.5-.5h-4.29a.5.5 0 0 0-.36.85m-12 4.3L5.3 6.7l2.16 2.18c.39.39 1.03.39 1.42 0s.39-1.03 0-1.42L6.7 5.3l1.45-1.45A.5.5 0 0 0 7.79 3H3.5c-.28 0-.5.22-.5.5v4.29c0 .45.54.67.85.36m4.3 12L6.7 18.7l2.18-2.16c.39-.39.39-1.03 0-1.42s-1.03-.39-1.42 0L5.3 17.3l-1.45-1.45a.5.5 0 0 0-.85.36v4.29c0 .28.22.5.5.5h4.29a.5.5 0 0 0 .36-.85m12-4.3L18.7 17.3l-2.16-2.18c-.39-.39-1.03-.39-1.42 0s-.39 1.03 0 1.42l2.18 2.16-1.45 1.45a.5.5 0 0 0 .36.85h4.29c.28 0 .5-.22.5-.5v-4.29a.5.5 0 0 0-.85-.36"})),t=class{constructor(o){a(this,o),this.inheritedAttributes={},this.backdrop="default",this.customClass="",this.fullscreen=!1,this.position="center",this.showClose=!0,this.showFullscreenToggle=!1}componentWillLoad(){this.modalId||console.error("The modal component requires a unique 'modalId' to be passed in as a prop."),this.inheritedAttributes=e(this.el)}closeDialog(){const o=this.el.querySelector("dialog");o&&o.close()}getClasses(){const o=["modus-wc-modal"],a=(({position:o})=>{let a="";if(o)switch(o){case"top":a=`${a} modus-wc-modal-top`;break;case"bottom":a=`${a} modus-wc-modal-bottom`}return a.trim()})({position:this.position});return a&&o.push(a),this.customClass&&o.push(this.customClass),o.join(" ")}render(){return o(d,{key:"256db1a05d8f23b8d6020620f8f8346275fa2b44"},o("dialog",Object.assign({key:"bcfde799f539a81a7b664a6e39a5547b19e1451d",class:this.getClasses(),id:this.modalId},this.inheritedAttributes),o("div",{key:"7990b097525af88c1a277db37ac28566ab9edaa5",class:"modus-wc-modal-box "+(this.fullscreen?"modus-wc-modal-fullscreen":"")},o("div",{key:"1037a0a9ff878bd7e849088ba9dc68aa71181ec4",class:"modus-wc-modal-top-icon-buttons"},this.showFullscreenToggle&&o("modus-wc-button",{key:"25b6e0edbc9579e8e4eb48ade13dfaa225994077","aria-label":"Fullscreen toggle",onButtonClick:()=>this.fullscreen=!this.fullscreen,shape:"square",size:"sm",variant:"borderless"},o(this.fullscreen?m:l,null)),this.showClose&&o("modus-wc-button",{key:"75e638ab5fa74e08e157b91539d89cbeda76a861","aria-label":"Close modal",onButtonClick:()=>this.closeDialog(),shape:"square",size:"sm",variant:"borderless"},o(c,{key:"bffa1c0688b788adfa68597ebb9d77d24cd9a945"}))),o("div",{key:"3a3c384a8345560ed8d22b306f9661fc70d79045",class:"modus-wc-modal-header modus-wc-text-lg modus-wc-font-bold"},o("slot",{key:"26fc80024210ebf527eba482e976e705d2750672",name:"header"})),o("div",{key:"b8443af945966b51c3deb84aed5224a3aa7b2755",class:"modus-wc-modal-content modus-wc-py-4"},o("slot",{key:"1e4f4872d7f2ccc9b95772ec851fa2083ff8703b",name:"content"})),o("div",{key:"4ab9d1c3dc9237294339fc7a34035349addad698",class:"modus-wc-modal-action"},o("slot",{key:"3c6709fbdfd0b140478690a6403f7a178ffa6a0b",name:"footer"}))),"default"===this.backdrop&&o("form",{key:"72a0e14ab697f34c1fe6a17fa072802bfbab76ab",method:"dialog",class:"modus-wc-modal-backdrop"},o("button",{key:"db110fee752c2b7e8e5c84e5887714f82a0b0413"},"close"))))}get el(){return s(this)}};t.style="modus-wc-modal .modus-wc-modal{box-sizing:border-box;color:var(--modus-wc-color-base-content);--rounded-box:var(--modus-wc-border-radius-box)}modus-wc-modal .modus-wc-modal .modus-wc-modal-box{display:flex;flex-direction:column}modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-top-icon-buttons{display:flex;position:absolute;right:var(--modus-wc-spacing-sm);top:var(--modus-wc-spacing-sm)}modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-top-icon-buttons svg{height:24px;width:24px}modus-wc-modal .modus-wc-modal .modus-wc-modal-box.modus-wc-modal-fullscreen{border-radius:0;height:100dvh;max-height:none;max-width:none;width:100dvw}modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-action{margin-top:auto}.modus-wc-modal-header>span{border-radius:var(--modus-wc-border-radius-btn);display:block;padding:var(--modus-wc-spacing-lg)}.modus-wc-modal-content{height:100%}.modus-wc-modal-content span{background:var(--modus-wc-color-base-200);border-radius:var(--modus-wc-border-radius-btn);display:block;height:100%;padding:var(--modus-wc-spacing-lg)}[data-theme=modus-classic-dark] .modus-wc-modal-box,[data-theme=modus-classic-light] .modus-wc-modal-box{--rounded-box:var(--modus-wc-border-radius-md)}[data-theme=modus-classic-light] .modus-wc-modal-box{background-color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] .modus-wc-modal-box .modus-wc-modal-top-icon-buttons svg{fill:var(--modus-wc-color-trimble-gray)}[data-theme=modus-classic-dark] modus-wc-modal .modus-wc-modal-box{background-color:var(--modus-wc-color-gray-9)}[data-theme=modus-classic-dark] modus-wc-modal .modus-wc-modal-box .modus-wc-modal-top-icon-buttons svg{fill:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] .modus-wc-modal-header span,[data-theme=modus-classic-light] .modus-wc-modal-header span{background:transparent;border-radius:0;display:block;padding:0}[data-theme=modus-classic-dark] .modus-wc-modal-content,[data-theme=modus-classic-light] .modus-wc-modal-content{height:100%}[data-theme=modus-classic-dark] .modus-wc-modal-content span,[data-theme=modus-classic-light] .modus-wc-modal-content span{background:transparent;border-radius:0;display:block;height:100%;padding:0}";export{t as modus_wc_modal}