@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 • 6.98 kB
JavaScript
import{h as o,r as d,e as a,g as s}from"./p-C1-Dpkp7.js";import{C as c}from"./p-3NVr0erJ.js";import{h as e}from"./p-tWS3Egrk.js";import{i as m}from"./p-DJ2rBB6r.js";const t=({className:d})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-collapse ${d||""}`,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:d})=>o("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",class:`mi-solid mi-expand ${d||""}`,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"})),i=class{constructor(o){d(this,o),this.inheritedAttributes={},this.backdrop="default",this.customClass="",this.fullscreen=!1,this.position="center",this.showClose=!0,this.showFullscreenToggle=!1}componentWillLoad(){e(this.el,!0),this.modalId||console.error("The modal component requires a unique 'modalId' to be passed in as a prop."),this.inheritedAttributes=m(this.el)}closeDialog(){const o=this.el.querySelector("dialog");o&&o.close()}getClasses(){const o=["modus-wc-modal"],d=(({position:o})=>{let d="";if(o)switch(o){case"top":d=`${d} modus-wc-modal-top`;break;case"bottom":d=`${d} modus-wc-modal-bottom`}return d.trim()})({position:this.position});return d&&o.push(d),this.customClass&&o.push(this.customClass),o.join(" ")}render(){return o(a,{key:"95cb3fc2af75cb7cd4ee59f298e81ecded8933bc"},o("dialog",Object.assign({key:"de6298c31e0d5e3d7cfb4bd40729e1e101bb60d6",class:this.getClasses(),id:this.modalId},this.inheritedAttributes),o("div",{key:"ed39f3692bf3b20ca7cdad66410dda1a0953e2cf",class:"modus-wc-modal-box "+(this.fullscreen?"modus-wc-modal-fullscreen":"")},o("div",{key:"31f77a3028e7af4f382e314e73474e0423c5fef7",class:"modus-wc-modal-header modus-wc-text-lg modus-wc-font-bold"},o("slot",{key:"821715a16f80a6cfe2d45e2da45e19bdf03b0ccf",name:"header"}),o("div",{key:"28cd566e89ca0aaea14b667e6f2611310c54bb88",class:"modus-wc-modal-top-icon-buttons"},this.showFullscreenToggle&&o("modus-wc-button",{key:"0bba0ca50c7c8144ef9840a4ee52416b6524f02a","aria-label":"Fullscreen toggle",onButtonClick:()=>this.fullscreen=!this.fullscreen,shape:"square",size:"sm",variant:"borderless"},o(this.fullscreen?t:l,null)),this.showClose&&o("modus-wc-button",{key:"e0d9063cadd7c7e8bdf08d131fbddfc69159132d","aria-label":"Close modal",onButtonClick:()=>this.closeDialog(),shape:"square",size:"sm",variant:"borderless"},o(c,{key:"9b890e40ce49ab59cb5bc43bd6540ff90af61287"})))),o("div",{key:"a54981307d0db15dab221884f7ac655692e69d1f",class:"modus-wc-modal-content modus-wc-py-4"},o("slot",{key:"418deccc2188b3f519cfbcccbaf42cb669b82bea",name:"content"})),o("div",{key:"80b0f06d508e1de11590ebf8150f2810ead24958",class:"modus-wc-modal-action"},o("slot",{key:"c499d3a45accb06ba6e037df3a1930405b36b76e",name:"footer"}))),"default"===this.backdrop&&o("form",{key:"50a6a66f89e20240c210714ec9c40feedd5a322b",method:"dialog",class:"modus-wc-modal-backdrop"},o("button",{key:"8bb006a6ab7669e641f670aeb497730f515040b7"},"close"))))}get el(){return s(this)}};i.style="modus-wc-modal .modus-wc-modal{box-sizing:border-box;color:var(--modus-wc-color-base-content)}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-header{align-items:center;display:flex}modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-header>span{border-radius:var(--rounded-box);display:block}modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-header .modus-wc-modal-top-icon-buttons{display:flex;margin-inline-start:auto}modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-header .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-content{height:100%}.modus-wc-modal-content>span{border-radius:var(--rounded-box);display:block;height:100%}[data-theme^=modus-modern] .modus-wc-modal-content>span,[data-theme^=connect] .modus-wc-modal-content>span{display:flex;flex-direction:column;gap:var(--modus-wc-spacing-sm)}[data-theme^=modus-modern] .modus-wc-modal-action,[data-theme^=connect] .modus-wc-modal-action{display:flex;gap:var(--modus-wc-spacing-sm);justify-content:flex-end;padding-inline:0;padding-top:var(--modus-wc-spacing-lg)}[data-theme^=modus-modern] .modus-wc-modal-action>:not([hidden])~:not([hidden]),[data-theme^=connect] .modus-wc-modal-action>:not([hidden])~:not([hidden]){margin:0}[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-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}[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)}";export{i as modus_wc_modal}