@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
118 lines (113 loc) • 6.54 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment } from './p-X1tirp06.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:#cbcdd6;--modus-wc-utility-panel-box-shadow:-2px 0 4px rgba(0, 0, 0, 0.1);--modus-wc-utility-panel-transition-duration:0.3s}.modus-wc-utility-panel{background-color:var(--modus-wc-color-base-100);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-100);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-100);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-100);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{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$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcUtilityPanel extends H {
constructor() {
super();
this.__registerHost();
this.panelOpened = createEvent(this, "panelOpened");
this.panelClosed = createEvent(this, "panelClosed");
/** 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() {
// Set initial load flag will be cleared after first render
}
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: '1e4c8bbb47a878618cedccc729c125fc3c6857d8', class: {
'modus-wc-utility-panel': true,
open: this.expanded,
} }, h("div", { key: '6eeaf4322d5adef3da91a1b8e2bffeea67f8e5e7', class: "modus-wc-utility-panel-content" }, hasHeader && (h(Fragment, { key: '7345a4fb5eaae78bcc74a24ba050513d00fc14c6' }, h("div", { key: '129956cb50472d1d1a40f76fa14f203febb406b0', class: "modus-wc-utility-panel-header" }, h("slot", { key: 'a3dd72d74f565e7c265f62eb78c23bcf4f35ff65', name: "header" })), h("hr", { key: '29b097b7ebc34ce0331e46e0cb367889c96e6fae' }))), h("div", { key: '5b466b707dc2b3433d7fbc8206bd229763eabf21', class: "modus-wc-utility-panel-body" }, h("slot", { key: '54fa25885059952ee5d9e536db3dec5331e38631', name: "body" })), hasFooter && (h(Fragment, { key: 'ada271406c99a2140318b6681bc5c93f0a249ef2' }, h("hr", { key: '46569af475f6ea614e76b359852104f439ac09c3' }), h("div", { key: '956ac9cac387f68ad33f40ff47c4116a0d1ea376', class: "modus-wc-utility-panel-footer" }, h("slot", { key: '99951432e6b67eb2c14d2c73293a4cb872612ca9', name: "footer" })))))));
}
get el() { return this; }
static get watchers() { return {
"expanded": ["handleExpandedChange"],
"targetElement": ["handleTargetChange"]
}; }
static get style() { return modusWcUtilityPanelCss; }
}, [4, "modus-wc-utility-panel", {
"expanded": [4],
"pushContent": [4, "push-content"],
"targetElement": [16, "target-element"]
}, undefined, {
"expanded": ["handleExpandedChange"],
"targetElement": ["handleTargetChange"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-utility-panel"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-utility-panel":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcUtilityPanel$1);
}
break;
} });
}
const ModusWcUtilityPanel = ModusWcUtilityPanel$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcUtilityPanel, defineCustomElement };