@trimble-oss/moduswebcomponents/components/modus-wc-logo.js

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

import { p as proxyCustomElement, H, g as getAssetPath, h, c as Host } from './p-X1tirp06.js';
import { i as inheritAriaAttributes, b as isLightMode } from './p-VPqXjOQn.js';

/**
 * Logo variants mapping
 */
const LOGO_VARIANTS = {
    // Trimble Products
    trimble: {
        displayName: 'Trimble',
        path: 'logos/trimble/trimble.svg',
        pathDark: 'logos/trimble/trimble-dark.svg',
        emblemPath: 'logos/emblems/trimble-emblem.svg',
        emblemPathDark: 'logos/emblems/trimble-emblem-dark.svg',
        category: 'trimble',
    },
    siteworks: {
        displayName: 'Trimble Siteworks',
        path: 'logos/trimble/siteworks.svg',
        pathDark: 'logos/trimble/siteworks-dark.svg',
        emblemPath: 'logos/emblems/siteworks-emblem.svg',
        emblemPathDark: 'logos/emblems/siteworks-emblem-dark.svg',
        category: 'trimble',
    },
    earthworks: {
        displayName: 'Trimble Earthworks',
        path: 'logos/trimble/earthworks.svg',
        pathDark: 'logos/trimble/earthworks-dark.svg',
        emblemPath: 'logos/emblems/earthworks-emblem.svg',
        emblemPathDark: 'logos/emblems/earthworks-emblem-dark.svg',
        category: 'trimble',
    },
    financials: {
        displayName: 'Trimble Financials',
        path: 'logos/trimble/financials.svg',
        pathDark: 'logos/trimble/financials-dark.svg',
        emblemPath: 'logos/emblems/financials-emblem.svg',
        emblemPathDark: 'logos/emblems/financials-emblem-dark.svg',
        category: 'trimble',
    },
    worksmanager: {
        displayName: 'Trimble WorksManager',
        path: 'logos/trimble/worksmanager.svg',
        pathDark: 'logos/trimble/worksmanager-dark.svg',
        emblemPath: 'logos/emblems/worksmanager-emblem.svg',
        emblemPathDark: 'logos/emblems/worksmanager-emblem-dark.svg',
        category: 'trimble',
    },
    connect: {
        displayName: 'Trimble Connect',
        path: 'logos/trimble/connect.svg',
        pathDark: 'logos/trimble/connect-dark.svg',
        emblemPath: 'logos/emblems/connect-emblem.svg',
        emblemPathDark: 'logos/emblems/connect-emblem-dark.svg',
        category: 'trimble',
    },
    unity_construct: {
        displayName: 'Trimble Unity Construct',
        path: 'logos/trimble/unity-construct.svg',
        pathDark: 'logos/trimble/unity-construct-dark.svg',
        emblemPath: 'logos/emblems/unity-construct-emblem.svg',
        emblemPathDark: 'logos/emblems/unity-construct-emblem-dark.svg',
        category: 'trimble',
    },
    trade_servicelive: {
        displayName: 'Trade ServiceAlive',
        path: 'logos/trimble/trade-servicelive.svg',
        pathDark: 'logos/trimble/trade-servicelive-dark.svg',
        emblemPath: 'logos/emblems/trade-servicelive-emblem.svg',
        emblemPathDark: 'logos/emblems/trade-servicelive-emblem-dark.svg',
        category: 'trimble',
    },
    buildable: {
        displayName: 'Buildable',
        path: 'logos/trimble/buildable.svg',
        pathDark: 'logos/trimble/buildable-dark.svg',
        emblemPath: 'logos/emblems/buildable-emblem.svg',
        emblemPathDark: 'logos/emblems/buildable-emblem-dark.svg',
        category: 'trimble',
    },
    livecount: {
        displayName: 'LiveCount',
        path: 'logos/trimble/livecount.svg',
        pathDark: 'logos/trimble/livecount-dark.svg',
        emblemPath: 'logos/emblems/livecount-emblem.svg',
        emblemPathDark: 'logos/emblems/livecount-emblem-dark.svg',
        category: 'trimble',
    },
    supplier_xchange: {
        displayName: 'Supplier Xchange',
        path: 'logos/trimble/supplier-xchange.svg',
        pathDark: 'logos/trimble/supplier-xchange-dark.svg',
        emblemPath: 'logos/emblems/supplier-xchange-emblem.svg',
        emblemPathDark: 'logos/emblems/supplier-xchange-emblem-dark.svg',
        category: 'trimble',
    },
    app_xchange: {
        displayName: 'App Xchange',
        path: 'logos/trimble/app-xchange.svg',
        pathDark: 'logos/trimble/app-xchange-dark.svg',
        emblemPath: 'logos/emblems/app-xchange-emblem.svg',
        emblemPathDark: 'logos/emblems/app-xchange-emblem-dark.svg',
        category: 'trimble',
    },
    trimble_unity: {
        displayName: 'Trimble Unity',
        path: 'logos/trimble/trimble-unity.svg',
        pathDark: 'logos/trimble/trimble-unity-dark.svg',
        emblemPath: 'logos/emblems/trimble-unity-emblem.svg',
        emblemPathDark: 'logos/emblems/trimble-unity-emblem-dark.svg',
        category: 'trimble',
    },
    sketchup: {
        displayName: 'SketchUp',
        path: 'logos/trimble/sketchup.svg',
        pathDark: 'logos/trimble/sketchup-dark.svg',
        emblemPath: 'logos/emblems/sketchup-emblem.svg',
        emblemPathDark: 'logos/emblems/sketchup-emblem-dark.svg',
        category: 'trimble',
    },
    pc_miler: {
        displayName: 'PC Miler',
        path: 'logos/trimble/pc-miler.svg',
        pathDark: 'logos/trimble/pc-miler-dark.svg',
        emblemPath: 'logos/emblems/pc-miler-emblem.svg',
        emblemPathDark: 'logos/emblems/pc-miler-emblem-dark.svg',
        category: 'trimble',
    },
    copilot: {
        displayName: 'CoPilot',
        path: 'logos/trimble/copilot.svg',
        pathDark: 'logos/trimble/copilot-dark.svg',
        emblemPath: 'logos/emblems/copilot-emblem.svg',
        emblemPathDark: 'logos/emblems/copilot-emblem-dark.svg',
        category: 'trimble',
    },
    trimble_pay: {
        displayName: 'Trimble Pay',
        path: 'logos/trimble/trimble-pay.svg',
        pathDark: 'logos/trimble/trimble-pay-dark.svg',
        emblemPath: 'logos/emblems/trimble-pay-emblem.svg',
        emblemPathDark: 'logos/emblems/trimble-pay-emblem-dark.svg',
        category: 'trimble',
    },
    projectsight: {
        displayName: 'ProjectSight',
        path: 'logos/trimble/projectsight.svg',
        pathDark: 'logos/trimble/projectsight-dark.svg',
        emblemPath: 'logos/emblems/projectsight-emblem.svg',
        emblemPathDark: 'logos/emblems/projectsight-emblem-dark.svg',
        category: 'trimble',
    },
    demand_planning: {
        displayName: 'Demand Planning',
        path: 'logos/trimble/demand-planning.svg',
        pathDark: 'logos/trimble/demand-planning-dark.svg',
        emblemPath: 'logos/emblems/demand-planning-emblem.svg',
        emblemPathDark: 'logos/emblems/demand-planning-emblem-dark.svg',
        category: 'trimble',
    },
    // Viewpoint Products
    viewpoint: {
        displayName: 'Viewpoint',
        path: 'logos/viewpoint/viewpoint.svg',
        pathDark: 'logos/viewpoint/viewpoint-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_analytics: {
        displayName: 'Viewpoint Analytics',
        path: 'logos/viewpoint/viewpoint-analytics.svg',
        pathDark: 'logos/viewpoint/viewpoint-analytics-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_epayments: {
        displayName: 'Viewpoint ePayments',
        path: 'logos/viewpoint/viewpoint-epayments.svg',
        pathDark: 'logos/viewpoint/viewpoint-epayments-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_estimating: {
        displayName: 'Viewpoint Estimating',
        path: 'logos/viewpoint/viewpoint-estimating.svg',
        pathDark: 'logos/viewpoint/viewpoint-estimating-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_field_management: {
        displayName: 'Viewpoint Field Management',
        path: 'logos/viewpoint/viewpoint-field-management.svg',
        pathDark: 'logos/viewpoint/viewpoint-field-management-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_field_time: {
        displayName: 'Viewpoint Field Time',
        path: 'logos/viewpoint/viewpoint-field-time.svg',
        pathDark: 'logos/viewpoint/viewpoint-field-time-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_financial_controls: {
        displayName: 'Viewpoint Financial Controls',
        path: 'logos/viewpoint/viewpoint-financial-controls.svg',
        pathDark: 'logos/viewpoint/viewpoint-financial-controls-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_hr_management: {
        displayName: 'Viewpoint HR Management',
        path: 'logos/viewpoint/viewpoint-hr-management.svg',
        pathDark: 'logos/viewpoint/viewpoint-hr-management-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_jobpac_connect: {
        displayName: 'Viewpoint Jobpac Connect',
        path: 'logos/viewpoint/viewpoint-jobpac-connect.svg',
        pathDark: 'logos/viewpoint/viewpoint-jobpac-connect-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_procontractor: {
        displayName: 'Viewpoint ProContractor',
        path: 'logos/viewpoint/viewpoint-procontractor.svg',
        pathDark: 'logos/viewpoint/viewpoint-procontractor-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_spectrum: {
        displayName: 'Viewpoint Spectrum',
        path: 'logos/viewpoint/viewpoint-spectrum.svg',
        pathDark: 'logos/viewpoint/viewpoint-spectrum-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_team: {
        displayName: 'Viewpoint Team',
        path: 'logos/viewpoint/viewpoint-team.svg',
        pathDark: 'logos/viewpoint/viewpoint-team-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_vista: {
        displayName: 'Viewpoint Vista',
        path: 'logos/viewpoint/viewpoint-vista.svg',
        pathDark: 'logos/viewpoint/viewpoint-vista-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_spectrum_service_tech: {
        displayName: 'Viewpoint Spectrum Service Tech',
        path: 'logos/viewpoint/viewpoint-spectrum-service-tech.svg',
        pathDark: 'logos/viewpoint/viewpoint-spectrum-service-tech-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_for_projects: {
        displayName: 'Viewpoint For Projects',
        path: 'logos/viewpoint/viewpoint-for-projects.svg',
        pathDark: 'logos/viewpoint/viewpoint-for-projects-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_vista_field_service: {
        displayName: 'Viewpoint Vista Field Service',
        path: 'logos/viewpoint/viewpoint-vista-field-service.svg',
        pathDark: 'logos/viewpoint/viewpoint-vista-field-service-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
    viewpoint_field_view: {
        displayName: 'Viewpoint Field View',
        path: 'logos/viewpoint/viewpoint-field-view.svg',
        pathDark: 'logos/viewpoint/viewpoint-field-view-dark.svg',
        emblemPath: 'logos/emblems/viewpoint-emblem.svg',
        emblemPathDark: 'logos/emblems/viewpoint-emblem-dark.svg',
        category: 'viewpoint',
    },
};

const modusWcLogoCss = ".modus-wc-logo{display:inline-block}.modus-wc-logo img{display:block;height:100%;object-fit:contain;width:100%}";

const ModusWcLogo$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcLogo extends H {
    constructor() {
        super();
        this.__registerHost();
        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 assetsDirs() { return ["assets"]; }
    get el() { return this; }
    static get style() { return modusWcLogoCss; }
}, [0, "modus-wc-logo", {
        "name": [1],
        "emblem": [4],
        "customClass": [1, "custom-class"],
        "alt": [1],
        "isLight": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["modus-wc-logo"];
    components.forEach(tagName => { switch (tagName) {
        case "modus-wc-logo":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, ModusWcLogo$1);
            }
            break;
    } });
}

const ModusWcLogo = ModusWcLogo$1;
const defineCustomElement = defineCustomElement$1;

export { ModusWcLogo, defineCustomElement };