@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
171 lines (170 loc) • 8.55 kB
JavaScript
import { h, Host, } from "@stencil/core";
import { handleShadowDOMStyles } from "../base-component";
import { inheritAriaAttributes } from "../utils";
import { LOGO_VARIANTS } from "./logo-constants";
import { LOGO_SVGS } from "./logo-svg-data";
const LogoSvg = ({ svgText }) => (h("span", { innerHTML: svgText }));
/**
* 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.
* Logo colors automatically adapt to the active Modus theme via CSS variables.
*/
export class ModusWcLogo {
constructor() {
this.inheritedAttributes = {};
/** Show emblem version (icon only) instead of full logo */
this.emblem = false;
/** Custom CSS class to apply to the logo container. */
this.customClass = '';
}
componentWillLoad() {
handleShadowDOMStyles(this.el);
this.inheritedAttributes = inheritAriaAttributes(this.el);
}
getSvgContent() {
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 '';
}
const filePath = this.emblem ? logoInfo.emblemPath : logoInfo.path;
if (!filePath) {
console.warn(`No ${this.emblem ? 'emblem' : 'logo'} path found for "${this.name}"`);
return '';
}
const svgContent = LOGO_SVGS[filePath];
if (!svgContent) {
console.warn(`SVG content not found for logo "${this.name}" at path "${filePath}".` +
' This usually indicates a mismatch between LOGO_VARIANTS and LOGO_SVGS.');
return '';
}
return svgContent;
}
getEmblemSvgContent() {
const logoKey = this.name.toLowerCase().replace(/\s+/g, '_');
const logoInfo = LOGO_VARIANTS[logoKey];
if (!this.emblem &&
logoInfo &&
logoInfo.emblemPath &&
logoInfo.category !== 'trimble_brand' &&
logoInfo.category !== 'viewpoint') {
return LOGO_SVGS[logoInfo.emblemPath] || '';
}
return '';
}
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 svgContent = this.getSvgContent();
const emblemSvgContent = this.getEmblemSvgContent();
const isCombined = !this.emblem && !!emblemSvgContent;
return (h(Host, { key: '18bb8a67bef51071b9a1ea954b438f8b885ca570' }, h("span", Object.assign({ key: 'f149a08574dc3e8d41962660696915a9d89dea81', class: `modus-wc-logo ${classes} ${this.emblem ? 'logo-emblem' : 'logo-full'} ${isCombined ? 'logo-combined' : ''}` }, this.inheritedAttributes, { role: "img", "aria-label": altText }), isCombined && (h("span", { key: '0b84f02e369117e3ab8206c5cc836aadcde6ce8e', class: "logo-combined-emblem" }, h(LogoSvg, { key: 'c4db582d9f91ed5173ea8a1e2f5f385ca3c838af', svgText: emblemSvgContent }))), h("span", { key: '15a0ca8720172e89dfa38d88554a5e8033eed284', class: isCombined ? 'logo-combined-wordmark' : '' }, h(LogoSvg, { key: 'aebb778aa7b7b430e4b0e5e4b742728ecf494871', svgText: svgContent })))));
}
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 properties() {
return {
"name": {
"type": "string",
"attribute": "name",
"mutable": false,
"complexType": {
"original": "LogoName",
"resolved": "\"accubid_anywhere\" | \"accubid_classic\" | \"advanced_image_manager\" | \"analytics\" | \"app_xchange\" | \"appian\" | \"atlas\" | \"autobid\" | \"b2w\" | \"buildable_content\" | \"business_center\" | \"connect\" | \"connect2fab\" | \"copilot\" | \"demand_planning\" | \"earthworks\" | \"estimation_construct\" | \"estimation_desktop\" | \"fabrication\" | \"fabshop\" | \"field_points\" | \"fieldlink\" | \"financials\" | \"geosuite\" | \"infrastructure\" | \"innovative\" | \"livecount\" | \"materials\" | \"modus\" | \"modus_blueprint\" | \"nova\" | \"novapoint\" | \"pay\" | \"pc_miler\" | \"prodesign\" | \"projectsight\" | \"quadri\" | \"reality_capture\" | \"sitevision\" | \"siteworks\" | \"sketchup\" | \"sketchup_for_schools\" | \"sketchup_go\" | \"smart_workflow\" | \"stabicad\" | \"supplier_xchange\" | \"sysque\" | \"tekla\" | \"tekla_structures\" | \"terraflex\" | \"tms\" | \"tmt\" | \"tmw_suite\" | \"trade_service\" | \"trade_service_live\" | \"traqspera\" | \"trimble\" | \"truckmate\" | \"unity\" | \"unity_adms\" | \"unity_construct\" | \"unity_field\" | \"unity_maintain\" | \"unity_permit\" | \"winest\" | \"worksmanager\" | \"viewpoint\" | \"viewpoint_analytics\" | \"viewpoint_epayments\" | \"viewpoint_estimating\" | \"viewpoint_field_management\" | \"viewpoint_field_time\" | \"viewpoint_field_view\" | \"viewpoint_financial_controls\" | \"viewpoint_for_projects\" | \"viewpoint_hr_management\" | \"viewpoint_jobpac_connect\" | \"viewpoint_procontractor\" | \"viewpoint_spectrum\" | \"viewpoint_spectrum_service_tech\" | \"viewpoint_team\" | \"viewpoint_vista\" | \"viewpoint_vista_field_service\"",
"references": {
"LogoName": {
"location": "import",
"path": "../types",
"id": "src/components/types.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 elementRef() { return "el"; }
}