@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
226 lines (225 loc) • 8.46 kB
JavaScript
import { Fragment, h, } from "@stencil/core";
import { handleShadowDOMStyles } from "../base-component";
export class ModusWcUtilityPanel {
constructor() {
/** 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" })))))));
}
static get is() { return "modus-wc-utility-panel"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-utility-panel.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-utility-panel.css"]
};
}
static get properties() {
return {
"customClass": {
"type": "string",
"attribute": "custom-class",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom CSS class to apply to the outer div."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"expanded": {
"type": "boolean",
"attribute": "expanded",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The panel is expanded or closed"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"pushContent": {
"type": "boolean",
"attribute": "push-content",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Determines if the panel pushes content or displays an overlay."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"targetElement": {
"type": "unknown",
"attribute": "target-element",
"mutable": false,
"complexType": {
"original": "HTMLElement",
"resolved": "HTMLElement | undefined",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Target element reference to push content when panel opens"
},
"getter": false,
"setter": false
}
};
}
static get events() {
return [{
"method": "panelOpened",
"name": "panelOpened",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "An event that fires when the panel is opened."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "panelClosed",
"name": "panelClosed",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "An event that fires when the panel is closed."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "expanded",
"methodName": "handleExpandedChange"
}, {
"propName": "targetElement",
"methodName": "handleTargetChange"
}];
}
}