@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.42 kB
JavaScript
import{h as o,r as d,H as a,g as s}from"./p-dzXW86AR.js";import{C as c}from"./p-DRdpe2Q2.js";import{i as e}from"./p-B5lx0dpl.js";const m=({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"})),t=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(){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"],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:"a1a155e3d7137032914af6525067eddde7271b46"},o("dialog",Object.assign({key:"9f94fd7c9d1dc9525f82664e245890a7b30ee655",class:this.getClasses(),id:this.modalId},this.inheritedAttributes),o("div",{key:"fecfeb0142b8fe4a84c3cd693e373a62a4922264",class:"modus-wc-modal-box "+(this.fullscreen?"modus-wc-modal-fullscreen":"")},o("div",{key:"6f250eed253c40e9b41dd462b8736ad5ec2b8395",class:"modus-wc-modal-top-icon-buttons"},this.showFullscreenToggle&&o("modus-wc-button",{key:"42c96913fe9640508ace825ddb62e704799c2322","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:"4771f6ae762507e49fef9dc842d61d022f7aa6c2","aria-label":"Close modal",onButtonClick:()=>this.closeDialog(),shape:"square",size:"sm",variant:"borderless"},o(c,{key:"e15498b507d3aa11230426cf33b7861ef8ef31ca"}))),o("div",{key:"42d530625efa4fac365055a0018bf2f8cc9377a7",class:"modus-wc-modal-header modus-wc-text-lg modus-wc-font-bold"},o("slot",{key:"c0812385447a00be7204758165cec8e9c4812289",name:"header"})),o("div",{key:"4a6c48d87a7a73cf62c0d172073837f3dd54a6ae",class:"modus-wc-modal-content modus-wc-py-4"},o("slot",{key:"790e376558fdddcd61724534d6cd74af96156a33",name:"content"})),o("div",{key:"f88d0af909ca17936bc43f3fbd46fbde483768a2",class:"modus-wc-modal-action"},o("slot",{key:"1a3dcbac7c97d057637624e136c0b48af427988d",name:"footer"}))),"default"===this.backdrop&&o("form",{key:"67ece35b1205776c9d0170f4434da7b4a926ccda",method:"dialog",class:"modus-wc-modal-backdrop"},o("button",{key:"0d556af2b55fbd68dbb0e0b5f1487bb080fbb609"},"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}