@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
99 lines (95 loc) • 6.07 kB
JavaScript
import { r as registerInstance, d as createEvent, h, F as Fragment, g as getElement } from './index-C1-Dpkp7.js';
import { h as handleShadowDOMStyles } from './base-component-tWS3Egrk.js';
const modusWcUtilityPanelCss = "modus-wc-utility-panel{--modus-wc-utility-panel-padding:1rem;--modus-wc-utility-panel-width:312px;--modus-wc-utility-panel-header-height:50px;--modus-wc-utility-panel-border-color:var(--modus-wc-color-base-200);--modus-wc-utility-panel-box-shadow:-2px 0 4px rgb(0, 0, 0, 0.1);--modus-wc-utility-panel-transition-duration:0.3s}.modus-wc-utility-panel{background-color:var(--modus-wc-color-base-page);box-shadow:var(--modus-wc-utility-panel-box-shadow);color:var(--modus-wc-utility-panel-color);height:100%;position:absolute;right:calc(var(--modus-wc-utility-panel-width) * -1 - 12px);top:0;transition:right var(--modus-wc-utility-panel-transition-duration) ease-out;width:var(--modus-wc-utility-panel-width);z-index:1000}.modus-wc-utility-panel.open{background:var(--modus-wc-color-base-page);right:0;transition:right var(--modus-wc-utility-panel-transition-duration) ease-out}.modus-wc-utility-panel .modus-wc-utility-panel-content{background:var(--modus-wc-color-base-page);display:flex;flex-direction:column;height:100%}.modus-wc-utility-panel .modus-wc-utility-panel-content .modus-wc-utility-panel-header,.modus-wc-utility-panel .modus-wc-utility-panel-content .modus-wc-utility-panel-footer{align-items:center;background:var(--modus-wc-color-base-page);display:flex;height:var(--modus-wc-utility-panel-header-height);padding:0 var(--modus-wc-utility-panel-padding)}.modus-wc-utility-panel .modus-wc-utility-panel-content .modus-wc-utility-panel-body{background:var(--modus-wc-color-base-page);flex:1;overflow:auto;padding:var(--modus-wc-utility-panel-padding)}.modus-wc-utility-panel .modus-wc-utility-panel-content hr{border:none;border-top:1px solid var(--modus-wc-utility-panel-border-color);margin:0}";
const ModusWcUtilityPanel = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.panelOpened = createEvent(this, "panelOpened", 7);
this.panelClosed = createEvent(this, "panelClosed", 7);
/** Custom CSS class to apply to the outer div. */
this.customClass = '';
/** The panel is expanded or closed */
this.expanded = false;
/** Determines if the panel pushes content or displays an overlay. */
this.pushContent = false;
this.isInitialLoad = true;
this.handlePanelClose = () => {
void this.closePanel();
};
}
componentWillLoad() {
// Inject full CSS bundle (including per-component SCSS) for slotted children
handleShadowDOMStyles(this.el, true);
}
componentDidLoad() {
// Only adjust content if panel is already expanded on load and we have a target
if (this.pushContent && this.expanded && this.targetElement) {
this.adjustContent();
}
// Mark that initial load is complete after adjusting content
this.isInitialLoad = false;
}
handleExpandedChange(newValue) {
// Skip the watcher on initial load
if (this.isInitialLoad) {
return;
}
if (newValue) {
void this.openPanel();
}
else {
void this.closePanel();
}
}
handleTargetChange() {
// Re-adjust content when target changes
if (this.expanded && this.pushContent && this.targetElement) {
this.adjustContent();
}
}
openPanel() {
this.panelOpened.emit();
if (this.pushContent) {
this.adjustContent();
}
}
closePanel() {
this.panelClosed.emit();
if (this.pushContent) {
this.adjustContent();
}
}
adjustContent() {
if (!this.pushContent || !this.targetElement)
return;
// Add base class for transitions
this.targetElement.classList.add('modus-wc-utility-panel-push-target');
// Toggle pushed class based on expanded state
if (this.expanded) {
this.targetElement.classList.add('modus-wc-utility-panel-pushed');
}
else {
this.targetElement.classList.remove('modus-wc-utility-panel-pushed');
}
}
hasSlotContent(slotName) {
const slot = this.el.querySelector(`[slot="${slotName}"]`);
return !!slot;
}
render() {
const hasHeader = this.hasSlotContent('header');
const hasFooter = this.hasSlotContent('footer');
return (h("div", { key: '77463e7a669f37150359cac5847e46029bcdca1a', class: {
'modus-wc-utility-panel': true,
open: this.expanded,
[this.customClass]: !!this.customClass,
} }, h("div", { key: 'dd099aaa81f11f3c976f6673caad64fbc62fb4a1', class: "modus-wc-utility-panel-content" }, hasHeader && (h(Fragment, { key: '9b4cfca0336d99891538efe84053700fc8e84b65' }, h("div", { key: 'f180e9c5fb93f5cb7423bda2089822c9ed057fae', class: "modus-wc-utility-panel-header" }, h("slot", { key: 'f25a53917a0c58f7559f13e343eeff418f612760', name: "header" })), h("hr", { key: '373b5b57c1ea754374f5ad58f786c11deae0108c' }))), h("div", { key: '8a5360e1e9cdee97ca05d8ca1578123a22ccd195', class: "modus-wc-utility-panel-body" }, h("slot", { key: '3c59415e138d71eeb98ba3d19a045f69a6952043', name: "body" })), hasFooter && (h(Fragment, { key: '411f7457beb4fececb3698931dfbe2a8d42f9389' }, h("hr", { key: '2e87e52130e5e6a016f3ebd32eae535e93961064' }), h("div", { key: '2ce4306261cc637318f205b2df42eb1d4bcc6fcd', class: "modus-wc-utility-panel-footer" }, h("slot", { key: '4f6ce2b18019f85c1181e02562d43ae1c273beeb', name: "footer" })))))));
}
get el() { return getElement(this); }
static get watchers() { return {
"expanded": ["handleExpandedChange"],
"targetElement": ["handleTargetChange"]
}; }
};
ModusWcUtilityPanel.style = modusWcUtilityPanelCss;
export { ModusWcUtilityPanel as modus_wc_utility_panel };