@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
186 lines (185 loc) • 7.83 kB
JavaScript
import { getAssetPath, h, Host, } from "@stencil/core";
import { inheritAriaAttributes, isLightMode } from "../utils";
import { LOGO_VARIANTS } from "./logo-constants";
/**
* A component for displaying Trimble product logos with support for both fixed and scalable sizing.
* Provides consistent branding across applications with various product logo options.
*/
export class ModusWcLogo {
constructor() {
this.inheritedAttributes = {};
this.themeObserver = null;
/** Show emblem version (icon only) instead of full logo */
this.emblem = false;
/** Custom CSS class to apply to the logo container. */
this.customClass = '';
this.isLight = true;
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
this.isLight = isLightMode();
// Watch for theme attribute changes (only in browser environment)
if (typeof MutationObserver !== 'undefined') {
this.themeObserver = new MutationObserver(() => {
this.isLight = isLightMode();
});
// Observe the html element for data-theme attribute changes
this.themeObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['data-theme'],
});
}
}
disconnectedCallback() {
if (this.themeObserver) {
this.themeObserver.disconnect();
}
}
getLogoPath() {
const logoKey = this.name.toLowerCase().replace(/\s+/g, '_');
const logoInfo = LOGO_VARIANTS[logoKey];
if (!logoInfo) {
console.warn(`Logo "${this.name}" not found. Available logos:`, Object.keys(LOGO_VARIANTS).join(', '));
return '';
}
// Determine which path to use based on emblem and theme
let path;
if (this.emblem) {
// Emblem mode - check for dark emblem first if in dark theme
path =
!this.isLight && logoInfo.emblemPathDark
? logoInfo.emblemPathDark
: logoInfo.emblemPath;
}
else {
// Full logo mode - check for dark logo first if in dark theme
path =
!this.isLight && logoInfo.pathDark ? logoInfo.pathDark : logoInfo.path;
}
/* istanbul ignore if */
if (!path) {
console.warn(`No ${this.emblem ? 'emblem' : 'logo'} path found for "${this.name}" in ${this.isLight ? 'light' : 'dark'} theme`);
return '';
}
// Use getAssetPath to resolve the correct path for all deployment scenarios
return getAssetPath(`./assets/${path}`);
}
getClasses() {
const classList = [];
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
render() {
const altText = this.alt || this.name.replace(/_/g, ' ');
const classes = this.getClasses();
const logoPath = this.getLogoPath();
return (h(Host, { key: 'c3d38dd0e8ca1051405218b8c1b3e93e131198e4' }, h("span", Object.assign({ key: 'f48c6bbf4790710fc6c32ee946164344f68bf55e', class: `modus-wc-logo ${classes} ${this.emblem ? 'logo-emblem' : 'logo-full'}` }, this.inheritedAttributes, { role: "img", "aria-label": altText }), h("img", { key: '98901687b1fcb7cc95eb8414fac848648cfeb576', src: logoPath, alt: altText }))));
}
static get is() { return "modus-wc-logo"; }
static get originalStyleUrls() {
return {
"$": ["modus-wc-logo.scss"]
};
}
static get styleUrls() {
return {
"$": ["modus-wc-logo.css"]
};
}
static get assetsDirs() { return ["assets"]; }
static get properties() {
return {
"name": {
"type": "string",
"attribute": "name",
"mutable": false,
"complexType": {
"original": "LogoName",
"resolved": "\"trimble\" | \"siteworks\" | \"earthworks\" | \"financials\" | \"worksmanager\" | \"connect\" | \"unity_construct\" | \"trade_servicelive\" | \"buildable\" | \"livecount\" | \"supplier_xchange\" | \"app_xchange\" | \"trimble_unity\" | \"sketchup\" | \"pc_miler\" | \"copilot\" | \"trimble_pay\" | \"projectsight\" | \"demand_planning\" | \"viewpoint\" | \"viewpoint_analytics\" | \"viewpoint_epayments\" | \"viewpoint_estimating\" | \"viewpoint_field_management\" | \"viewpoint_field_time\" | \"viewpoint_financial_controls\" | \"viewpoint_hr_management\" | \"viewpoint_jobpac_connect\" | \"viewpoint_procontractor\" | \"viewpoint_spectrum\" | \"viewpoint_team\" | \"viewpoint_vista\" | \"viewpoint_spectrum_service_tech\" | \"viewpoint_for_projects\" | \"viewpoint_vista_field_service\" | \"viewpoint_field_view\"",
"references": {
"LogoName": {
"location": "import",
"path": "./logo-constants",
"id": "src/components/modus-wc-logo/logo-constants.ts::LogoName"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the logo to display. Accepts values like 'trimble', 'viewpoint_field_view', etc."
},
"getter": false,
"setter": false,
"reflect": false
},
"emblem": {
"type": "boolean",
"attribute": "emblem",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Show emblem version (icon only) instead of full logo"
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "false"
},
"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 logo container."
},
"getter": false,
"setter": false,
"reflect": false,
"defaultValue": "''"
},
"alt": {
"type": "string",
"attribute": "alt",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The alt text for accessibility. If not provided, defaults to the logo name."
},
"getter": false,
"setter": false,
"reflect": false
}
};
}
static get states() {
return {
"isLight": {}
};
}
static get elementRef() { return "el"; }
}