@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
427 lines (413 loc) • 40.3 kB
JavaScript
import { h, p as proxyCustomElement, H, e as createEvent, F as Fragment, c as Host } from './p-BMvVSi6Y.js';
import { S as SearchSolidIcon, d as defineCustomElement$3 } from './p-D9BxvM_A.js';
import { i as inheritAriaAttributes, b as isLightMode } from './p-COxr4v9W.js';
import { d as defineCustomElement$b } from './p-DA8W2Ron.js';
import { d as defineCustomElement$a } from './p-1YuUWYzU.js';
import { d as defineCustomElement$9 } from './p-BpCkB0R-.js';
import { d as defineCustomElement$8 } from './p-C8YB6DYg.js';
import { d as defineCustomElement$7 } from './p-DWQdP1KV.js';
import { d as defineCustomElement$6 } from './p-CXnOhVIy.js';
import { d as defineCustomElement$5 } from './p-DRXt-rJG.js';
import { d as defineCustomElement$4 } from './p-THRlGHxO.js';
import { d as defineCustomElement$2 } from './p-C5OT6PVp.js';
const AiDarkIcon = ({ className }) => {
return (h("svg", { fill: "none", viewBox: "0 0 887 982", class: className || '', xmlns: "http://www.w3.org/2000/svg" },
h("defs", null,
h("radialGradient", { id: "gradient", cx: "18%", cy: "18%", r: "70%" },
h("stop", { offset: "0%", "stop-color": "#FF00FF" }),
h("stop", { offset: "50%", "stop-color": "#9933FF" }),
h("stop", { offset: "100%", "stop-color": "#0066CC" }))),
h("path", { d: "m36.76 749.83v231.56l201.3-116.22c-77.25-16.64-147.52-56.92-201.3-115.34zm199.83-634.65-199.83-115.18v230.14c56.05-60.9 128.22-99.28 199.83-114.97m403.73 374.35c0-176.82-143.34-320.16-320.16-320.16s-320.17 143.33-320.17 320.16 143.34 320.16 320.16 320.16 320.16-143.34 320.16-320.16m45.08-114.58c23.68 75.15 23.76 156.75-.59 232.74l201.86-116.54c-9.54-5.51-189.55-109.44-201.26-116.2", fill: "#fff" }),
h("path", { d: "m320.13 489.53c0 142.28 115.34 257.62 257.62 257.62s257.62-115.34 257.62-257.62-115.34-257.62-257.62-257.62-257.62 115.34-257.62 257.62", fill: "url(#gradient)", transform: "translate(-256, 0)" })));
};
const AiLightIcon = ({ className }) => {
return (h("svg", { fill: "none", viewBox: "0 0 887 982", class: className || '', xmlns: "http://www.w3.org/2000/svg" },
h("defs", null,
h("linearGradient", { id: "gradient", x1: "0%", y1: "0%", x2: "100%", y2: "100%" },
h("stop", { offset: "20%", "stop-color": "#FF00FF" }),
h("stop", { offset: "60%", "stop-color": "#0066CC" }),
h("stop", { offset: "100%", "stop-color": "#0066CC" }))),
h("path", { d: "m36.76 749.83v231.56l201.3-116.22c-77.25-16.64-147.52-56.92-201.3-115.34z", fill: "#0066CC" }),
h("path", { d: "m236.59 115.18-199.83-115.18v230.14c56.05-60.9 128.22-99.28 199.83-114.97z", fill: "#FF00FF" }),
h("path", { d: "m685.40 374.91c23.68 75.15 23.76 156.75-.59 232.74l201.86-116.54c-9.54-5.51-189.55-109.44-201.26-116.2z", fill: "#0066CC" }),
h("path", { d: "m577.75 489.53c0 142.28-115.34 257.62-257.62 257.62s-257.62-115.34-257.62-257.62 115.34-257.62 257.63-257.62 257.62 115.34 257.62 257.62m62.57-.44c0-176.82-143.34-320.16-320.16-320.16s-320.17 143.33-320.17 320.16 143.34 320.16 320.16 320.16 320.16-143.34 320.16-320.16", fill: "url(#gradient)" })));
};
const AppsSolidIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-apps ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M5 8h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1H5c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m6 12h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m-6 0h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1H5c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m0-6h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1H5c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m6 0h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m5-9v2c0 .6.4 1 1 1h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1m-5 3h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m6 6h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1m0 6h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1" })));
};
const HelpSolidIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-help ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 16.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5m2.82-6.72-.77.79c-.42.43-.69.78-.83 1.34-.07.28-.1.58-.1.92v.25H10.9v-.68c0-.41.07-.81.2-1.21.18-.52.48-1.01.87-1.4l1.07-1.09c.35-.33.49-.81.4-1.32-.09-.52-.5-.97-1.01-1.12a1.467 1.467 0 0 0-1.81.93c-.14.44-.51.73-.94.73h-.26c-.31 0-.59-.14-.78-.39s-.25-.58-.16-.89a3.72 3.72 0 0 1 2.97-2.61c.17-.03.34-.04.51-.04 1.15 0 2.3.63 3.06 1.68 1.13 1.57.72 3.19-.19 4.1Z" })));
};
const MenuSolidIcon = ({ className }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-menu ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1m0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1" })));
};
const MoreVerticalSolidIcon = ({ className, }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-more-vertical ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M10.59 10.59c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0m0-7c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0m0 14c-.78.78-.78 2.05 0 2.83s2.05.78 2.83 0 .78-2.05 0-2.83-2.05-.78-2.83 0" })));
};
const NotificationsSolidIcon = ({ className, }) => {
return (h("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", class: `mi-solid mi-notifications ${className || ''}`, viewBox: "0 0 24 24" },
h("path", { d: "M10 20h4c0 1.1-.9 2-2 2s-2-.9-2-2m9.67-2.69C18.36 15.96 17 13.66 17 10a5 5 0 0 0-4-4.9V4c0-.55-.45-1-1-1s-1 .45-1 1v1.1A5 5 0 0 0 7 10c0 3.66-1.37 5.96-2.67 7.31-.61.64-.16 1.69.72 1.69h13.91c.88 0 1.33-1.05.72-1.69Z" })));
};
const TrimbleLogoFullIcon = ({ className, }) => {
return (h("svg", { class: className, id: "Art_Black", "data-name": "Art Black", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 444.68 100" },
h("path", { d: "M115.85,87.13v-62H93V11.21h62.57v14h-23v62Z", fill: "#0063a3" }),
h("path", { d: "M141.9,87.13V32.74h16.52v8.84h.1c3-4.62,8.21-10.26,18.47-10.26h.51V46c-.61-.11-3.49-.31-4.51-.31a18.27,18.27,0,0,0-14.57,7.49v34Z", fill: "#0063a3" }),
h("path", { d: "M182.72,25V11.72h16.62V25Zm.11,62.17V32.44h16.41V87.13Z", fill: "#0063a3" }),
h("path", { d: "M205.7,87.13V32.44h16.51v8.62c3.29-4.31,9.34-9.74,18-9.74,9.13,0,13.44,3.79,15,9.74,3.28-4.2,9.44-9.74,18-9.74,11.08,0,16,7,16,16.72V87.13H272.69V52.45c0-4.92-1.13-7.49-5.95-7.49-4.1,0-7.39,2.26-11,5.44V87.13H239.25V52.45c0-4.92-1.13-7.49-6-7.49-4.1,0-7.38,2.26-11.08,5.44V87.13Z", fill: "#0063a3" }),
h("path", { d: "M312,80.66v6.47H295.45V11.21H312V40.86c3.59-5,8.72-9.54,16.82-9.54,12.42,0,21,9.54,21,28.41S341.11,88,328.59,88C321.2,88,316.07,85.28,312,80.66Zm21.34-20.82c0-9.13-3.18-14.88-10.57-14.88-4.21,0-8,2.57-10.77,5.34V70.51c3.59,3.38,6.56,5,11,5C329.82,75.53,333.31,69.79,333.31,59.84Z", fill: "#0063a3" }),
h("path", { d: "M354.94,87.13V11.21h16.41V87.13Z", fill: "#0063a3" }),
h("path", { d: "M376.47,59.84c0-21.24,16.21-28.52,27.49-28.52S429.1,37,429.1,61.79v2.46H392.88c.83,9,5.85,12.51,12.73,12.51a25.16,25.16,0,0,0,16.21-6.56l6.36,9.85c-6.36,5.44-14.26,8.21-23.8,8.21C390.11,88.26,376.47,81,376.47,59.84Zm37.86-5.34c-.82-7.69-4.31-11.39-10.47-11.39-5.13,0-9.54,3.39-10.77,11.39Z", fill: "#0063a3" }),
h("path", { d: "M432.22,81a6.19,6.19,0,0,1,6.26-6.26A6.26,6.26,0,1,1,432.22,81Zm11.38,0a5.14,5.14,0,1,0-5.12,5.23A5.12,5.12,0,0,0,443.6,81Zm-7.55-3.56h2.56c1.62,0,2.56.7,2.56,2.1a1.84,1.84,0,0,1-1.34,1.94l1.48,2.81h-1.43l-1.38-2.62h-1.08v2.62h-1.37Zm2.48,3.18c.84,0,1.3-.27,1.3-1s-.46-1-1.33-1h-1.08v2Z", fill: "#0063a3" }),
h("path", { d: "M6.19,76.41V100L26.71,88.16A39.1,39.1,0,0,1,6.19,76.41Z", fill: "#0063a3" }),
h("path", { d: "M26.56,11.74,6.19,0V23.45A39.33,39.33,0,0,1,26.56,11.74Z", fill: "#0063a3" }),
h("path", { d: "M92.8,50,72.29,38.16a39.27,39.27,0,0,1-.06,23.72Z", fill: "#0063a3" }),
h("path", { d: "M19.7,17.92c2.94-.65,9.05,0,12.28.89a18.68,18.68,0,0,1,10.37-3.45A41.12,41.12,0,0,0,19.7,17.92Z", fill: "#0063a3" }),
h("path", { d: "M58.79,60.84a53.07,53.07,0,0,0-3.21-13.13c-7,3.18-15.72,1.13-21.53-3.9A95.93,95.93,0,0,0,22.62,58.32C32.47,66.35,48.67,68.46,58.79,60.84Z", fill: "#0063a3" }),
h("path", { d: "M17.23,59.09C8.55,50.19,5.52,37.22,8.3,27.25a35,35,0,0,0,2,47.47A63.4,63.4,0,0,1,17.23,59.09Z", fill: "#0063a3" }),
h("path", { d: "M54,43.94a47.18,47.18,0,0,0-7-10.78A80.73,80.73,0,0,0,37,40.93C42.26,45.3,49.14,46.16,54,43.94Z", fill: "#0063a3" }),
h("path", { d: "M47.47,27.72a36.33,36.33,0,0,1,7.62-4.23c-5.56-5.62-14.5-5.47-18.39-3A37.17,37.17,0,0,1,47.47,27.72Z", fill: "#0063a3" }),
h("path", { d: "M20.4,62c-4.32,7.47-5.9,13-6.48,15.87A35,35,0,0,0,57.1,77a30,30,0,0,0,2-11.33C47.14,72.79,30.66,70.07,20.4,62Z", fill: "#0063a3" }),
h("path", { d: "M57.4,41.45c3.83-4,3.06-10.84.15-14.78a29.6,29.6,0,0,0-7.13,4.18A52.73,52.73,0,0,1,57.4,41.45Z", fill: "#0063a3" }),
h("path", { d: "M64,32.85a14.1,14.1,0,0,1-4.84,12.59A57.37,57.37,0,0,1,62.49,57.2C67.74,50.38,67.58,40.64,64,32.85Z", fill: "#0063a3" }),
h("path", { d: "M34.16,37.9A83.13,83.13,0,0,1,44,30.11a33.17,33.17,0,0,0-10.82-6.59C29.92,27.89,30.92,33.53,34.16,37.9Z", fill: "#0063a3" }),
h("path", { d: "M63.12,62.69a49.42,49.42,0,0,1-.43,8.88A35.37,35.37,0,0,0,70,47.07,26.82,26.82,0,0,1,63.12,62.69Z", fill: "#0063a3" }),
h("path", { d: "M29.1,22.28a28.42,28.42,0,0,0-13.9.09c-6.89,9.77-3.69,24.08,4.33,33A100.8,100.8,0,0,1,31.18,40.79C27.1,35.72,25.48,27.89,29.1,22.28Z", fill: "#0063a3" })));
};
const TrimbleLogoGlobeIcon = ({ className, }) => {
return (h("svg", { class: className, id: "Layer_1", "data-name": "Layer 1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 732.03 788.85" },
h("path", { d: "M543.59,674.86a54.34,54.34,0,0,1,54.9-54.9c30.76,0,54.43,23.9,54.43,54.67C652.92,747.8,543.59,747.78,543.59,674.86Zm99.86,0c0-60.79-90.16-61.1-90.16-.23S643.45,736.16,643.45,674.86Zm-66.26-31.23c22,0,45-3.33,45,18.46,0,9.7-4.73,14.67-11.83,17l13,24.62H610.79l-12.07-23h-9.46v23H577.19Zm33.13,19.17c0-10-10.71-8.52-21.06-8.52v17.27C599.77,671.55,610.32,673.23,610.32,662.8Z", fill: "#0063a3" }),
h("path", { d: "M48.86,602.72V788.85l161.81-93.42A308.1,308.1,0,0,1,48.86,602.72Z", fill: "#0063a3" }),
h("path", { d: "M209.49,92.58,48.86,0V185A310.2,310.2,0,0,1,209.49,92.58Z", fill: "#0063a3" }),
h("path", { d: "M732,394.43,570.25,301a309.33,309.33,0,0,1-.48,187.08Z", fill: "#0063a3" }),
h("path", { d: "M155.4,141.39c23.23-5.16,71.39-.27,96.87,7,20.38-16.21,51.17-25.6,81.82-27.15C263.63,108.52,198.45,123.29,155.4,141.39Z", fill: "#0063a3" }),
h("path", { d: "M463.74,479.92a416.8,416.8,0,0,0-25.28-103.53c-55.43,25-124,8.88-169.86-30.79-33.41,34.15-65.75,76.68-90.16,114.49C256.15,523.44,384,540.08,463.74,479.92Z", fill: "#0063a3" }),
h("path", { d: "M135.94,466.1C67.43,396,43.55,293.61,65.49,215A276,276,0,0,0,81.65,589.43C92.86,547,113.62,503.71,135.94,466.1Z", fill: "#0063a3" }),
h("path", { d: "M425.64,346.65a372.77,372.77,0,0,0-55.49-85.1,635.36,635.36,0,0,0-78.09,61.34C333.35,357.34,387.67,364.1,425.64,346.65Z", fill: "#0063a3" }),
h("path", { d: "M374.48,218.63c17.78-12.93,42.42-26.76,60.09-33.32-43.84-44.38-114.38-43.2-145-23.94A293.6,293.6,0,0,1,374.48,218.63Z", fill: "#0063a3" }),
h("path", { d: "M160.91,488.67c-34.09,58.94-46.53,102.19-51.06,125.2a276,276,0,0,0,340.58-6.21c10.24-24.74,15.47-55.53,15.45-89.38C371.89,574.22,241.89,552.71,160.91,488.67Z", fill: "#0063a3" }),
h("path", { d: "M452.81,327c30.17-31.7,24.12-85.56,1.17-116.62-14.14,4.78-43.57,21.94-56.26,33A413.64,413.64,0,0,1,452.81,327Z", fill: "#0063a3" }),
h("path", { d: "M505,259.11c4.65,40.7-10.79,75.93-38.17,99.35A448.73,448.73,0,0,1,493,451.19C534.36,397.38,533.1,320.63,505,259.11Z", fill: "#0063a3" }),
h("path", { d: "M269.45,299a672.54,672.54,0,0,1,77.22-61.49,262,262,0,0,0-85.35-52C236.05,220,243.94,264.52,269.45,299Z", fill: "#0063a3" }),
h("path", { d: "M497.94,494.52c1.4,23.09-.72,49.29-3.42,70,47.34-60.32,63.34-135,57.75-193.22C546.6,420.33,528.65,461.35,497.94,494.52Z", fill: "#0063a3" }),
h("path", { d: "M229.55,175.76c-34.94-8.54-75.63-8.91-109.67.72-54.33,77-29.1,189.94,34.2,260.64C178.13,400.5,213,354.9,246,321.75,213.77,281.81,201,220,229.55,175.76Z", fill: "#0063a3" })));
};
const modusWcNavbarCss = "modus-wc-navbar .modus-wc-navbar{background-color:var(--modus-wc-color-base-page);height:56px;min-height:0;padding:0 var(--modus-wc-spacing-md)}modus-wc-navbar .modus-wc-navbar modus-wc-button{display:inline-flex}modus-wc-navbar .modus-wc-navbar modus-wc-button svg{height:24px}modus-wc-navbar .modus-wc-navbar:not(.trimble-logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{background:var(--modus-wc-color-base-100);border:0;box-shadow:none;color:var(--modus-wc-color-base-content)}modus-wc-navbar .modus-wc-navbar .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary.trimble-logo{background:transparent}modus-wc-navbar .modus-wc-navbar .trimble-logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary path{fill:var(--modus-wc-color-primary)}modus-wc-navbar .modus-wc-navbar [slot=end] .user,modus-wc-navbar .modus-wc-navbar [slot=end] .apps,modus-wc-navbar .modus-wc-navbar [slot=end] .notifications,modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu,modus-wc-navbar .modus-wc-navbar [slot=start] .main-menu{position:absolute;top:45px;z-index:99}modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.user,modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.apps,modus-wc-navbar .modus-wc-navbar [slot=end] .hidden.notifications,modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu.hidden,modus-wc-navbar .modus-wc-navbar [slot=start] .hidden.main-menu{display:none}modus-wc-navbar .modus-wc-navbar [slot=end] .visible.user,modus-wc-navbar .modus-wc-navbar [slot=end] .visible.apps,modus-wc-navbar .modus-wc-navbar [slot=end] .visible.notifications,modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu.visible,modus-wc-navbar .modus-wc-navbar [slot=start] .visible.main-menu{display:block}modus-wc-navbar .modus-wc-navbar [slot=end],modus-wc-navbar .modus-wc-navbar [slot=center],modus-wc-navbar .modus-wc-navbar [slot=start]{align-items:center;display:flex;position:relative}modus-wc-navbar .modus-wc-navbar [slot=start] modus-wc-button{padding-inline-end:var(--modus-wc-spacing-sm)}modus-wc-navbar .modus-wc-navbar [slot=start] .main-menu{height:calc(100dvh - 56px);left:calc(-1 * var(--modus-wc-spacing-md));min-width:256px}modus-wc-navbar .modus-wc-navbar [slot=start] .trimble-logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{padding:0 var(--modus-wc-spacing-lg)}modus-wc-navbar .modus-wc-navbar [slot=start] .trimble-logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary svg{height:24px}modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-button,modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-text-input{padding-inline-start:var(--modus-wc-spacing-sm)}modus-wc-navbar .modus-wc-navbar [slot=end] button.ai svg{padding:3px 0 3px 3px}modus-wc-navbar .modus-wc-navbar [slot=end] modus-wc-menu{right:var(--modus-wc-spacing-2xl);z-index:99}modus-wc-navbar .modus-wc-navbar [slot=end] .notifications{right:100px}modus-wc-navbar .modus-wc-navbar [slot=end] .apps{right:var(--modus-wc-spacing-2xl)}modus-wc-navbar .modus-wc-navbar [slot=end] .user{right:0}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card{align-items:center;padding:var(--modus-wc-spacing-xl);width:max-content}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .initials{background-color:var(--modus-wc-color-black);border-radius:50%;color:var(--modus-wc-color-white);font-weight:var(--modus-wc-font-weight-semibold);padding:var(--modus-wc-spacing-sm)}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .modus-wc-card-body{align-items:center}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card modus-wc-button{padding:0}modus-wc-navbar .modus-wc-navbar [slot=end] .user modus-wc-card article.modus-wc-card .sign-out.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-trimble-blue)}modus-wc-navbar .modus-wc-navbar [slot=end] .user-button.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{background-color:var(--modus-wc-color-black);color:var(--modus-wc-color-white)}modus-wc-navbar .modus-wc-navbar [slot=end] .user-button.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary .modus-wc-avatar{height:32px;width:32px}[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar svg,[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar svg{height:32px}[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm,[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar modus-wc-text-input .modus-wc-text-input.modus-wc-input.modus-wc-input-sm{font-size:var(--modus-wc-font-size-md);height:var(--modus-wc-input-height-md);line-height:var(--modus-wc-line-height-md);padding:var(--modus-wc-spacing-sm)}[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar{background-color:var(--modus-wc-color-white)}[data-theme=modus-classic-light] modus-wc-navbar .modus-wc-navbar:not(.trimble-logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{background:transparent}[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar{background-color:var(--modus-wc-color-gray-10)}[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar:not(.trimble-logo) .modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{background:transparent;color:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar .trimble-logo.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary path{fill:var(--modus-wc-color-white)}[data-theme=modus-classic-dark] modus-wc-navbar .modus-wc-navbar .user modus-wc-card article.modus-wc-card .sign-out.modus-wc-btn.modus-wc-btn-borderless.modus-wc-btn-primary{color:var(--modus-wc-color-white)}";
const ModusWcNavbar$1 = /*@__PURE__*/ proxyCustomElement(class ModusWcNavbar extends H {
constructor() {
super();
this.__registerHost();
this.aiClick = createEvent(this, "aiClick");
this.appsClick = createEvent(this, "appsClick");
this.appsMenuOpenChange = createEvent(this, "appsMenuOpenChange");
this.condensedMenuOpenChange = createEvent(this, "condensedMenuOpenChange");
this.helpClick = createEvent(this, "helpClick");
this.mainMenuOpenChange = createEvent(this, "mainMenuOpenChange");
this.myTrimbleClick = createEvent(this, "myTrimbleClick");
this.notificationsClick = createEvent(this, "notificationsClick");
this.notificationsMenuOpenChange = createEvent(this, "notificationsMenuOpenChange");
this.searchChange = createEvent(this, "searchChange");
this.searchClick = createEvent(this, "searchClick");
this.searchInputOpenChange = createEvent(this, "searchInputOpenChange");
this.signOutClick = createEvent(this, "signOutClick");
this.trimbleLogoClick = createEvent(this, "trimbleLogoClick");
this.userMenuOpenChange = createEvent(this, "userMenuOpenChange");
this.inheritedAttributes = {};
this.searchDebounceTimer = null;
/** The open state of the apps menu. */
this.appsMenuOpen = false;
/** Applies condensed layout and styling. */
this.condensed = false;
/** The open state of the condensed menu. */
this.condensedMenuOpen = false;
/** Custom CSS class to apply to the host element. */
this.customClass = '';
/** The open state of the main menu. */
this.mainMenuOpen = false;
/** The open state of the notifications menu. */
this.notificationsMenuOpen = false;
/** Debounce time in milliseconds for search input changes. Default is 300ms. */
this.searchDebounceMs = 300;
/** The open state of the search input. */
this.searchInputOpen = false;
/** The open state of the user menu. */
this.userMenuOpen = false;
/** The visibility of individual navbar buttons. Default is user profile visible, others hidden. */
this.visibility = {
ai: false,
apps: false,
help: false,
mainMenu: false,
notifications: false,
search: false,
searchInput: false,
user: true,
};
this.isLight = true;
this.searchValue = '';
this.themeObserver = null;
this.handleAiClick = (event) => {
this.aiClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleAppsClick = (event) => {
this.toggleApps();
this.appsClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleHelpClick = (event) => {
if (this.condensed) {
this.toggleCondensedMenu();
}
this.helpClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleMyTrimbleClick = (event) => {
this.myTrimbleClick.emit(event.detail);
};
this.handleNotificationsClick = (event) => {
this.toggleNotifications();
this.notificationsClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleSearchChange = (event) => {
// Update the search value immediately for UI responsiveness
this.searchValue = event.target.value;
// Clear any existing timer
if (this.searchDebounceTimer !== null) {
window.clearTimeout(this.searchDebounceTimer);
}
// Set a new timer
this.searchDebounceTimer = window.setTimeout(() => {
this.searchChange.emit({ value: this.searchValue });
this.searchDebounceTimer = null;
}, this.searchDebounceMs);
};
this.handleSearchClick = (event) => {
this.toggleSearch();
this.searchClick.emit(event === null || event === void 0 ? void 0 : event.detail);
};
this.handleSignOutClick = (event) => {
this.signOutClick.emit(event.detail);
};
this.handleTrimbleLogoClick = (event) => {
this.trimbleLogoClick.emit(event.detail);
};
this.toggleApps = () => {
if (this.condensed) {
this.toggleCondensedMenu();
}
else {
this.appsMenuOpen = !this.appsMenuOpen;
this.appsMenuOpenChange.emit(this.appsMenuOpen);
}
};
this.toggleCondensedMenu = () => {
this.condensedMenuOpen = !this.condensedMenuOpen;
this.condensedMenuOpenChange.emit(this.condensedMenuOpen);
};
this.toggleMainMenu = () => {
this.mainMenuOpen = !this.mainMenuOpen;
this.mainMenuOpenChange.emit(this.mainMenuOpen);
};
this.toggleNotifications = () => {
if (this.condensed) {
this.toggleCondensedMenu();
}
else {
this.notificationsMenuOpen = !this.notificationsMenuOpen;
this.notificationsMenuOpenChange.emit(this.notificationsMenuOpen);
}
};
this.toggleSearch = () => {
if (this.condensed) {
this.toggleCondensedMenu();
}
else {
this.searchInputOpen = !this.searchInputOpen;
this.searchInputOpenChange.emit(this.searchInputOpen);
}
};
this.toggleUser = () => {
this.userMenuOpen = !this.userMenuOpen;
this.userMenuOpenChange.emit(this.userMenuOpen);
};
}
componentWillLoad() {
this.inheritedAttributes = inheritAriaAttributes(this.el);
this.isLight = isLightMode();
// Watch for theme attribute changes
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();
}
}
handleClickOutside(event) {
const target = event.target;
if (this.appsMenuOpen) {
const appsButton = this.el.querySelector('modus-wc-button:has(svg[class*="apps"])');
if (this.appsRef &&
!this.appsRef.contains(target) &&
appsButton !== target &&
!(appsButton === null || appsButton === void 0 ? void 0 : appsButton.contains(target))) {
this.appsMenuOpen = false;
this.appsMenuOpenChange.emit(false);
}
}
if (this.condensedMenuOpen) {
const condenseMenuButton = this.el.querySelector('modus-wc-button:has(svg[class*="more-vertical"])');
if (this.condensedMenuRef &&
!this.condensedMenuRef.contains(target) &&
condenseMenuButton !== target &&
!(condenseMenuButton === null || condenseMenuButton === void 0 ? void 0 : condenseMenuButton.contains(target))) {
this.condensedMenuOpen = false;
this.condensedMenuOpenChange.emit(false);
}
}
if (this.mainMenuOpen) {
const menuButton = this.el.querySelector('modus-wc-button:has(svg[class*="menu"])');
if (this.menuRef &&
!this.menuRef.contains(target) &&
menuButton !== target &&
!(menuButton === null || menuButton === void 0 ? void 0 : menuButton.contains(target))) {
this.mainMenuOpen = false;
}
}
if (this.notificationsMenuOpen) {
const notificationsButton = this.el.querySelector('modus-wc-button:has(svg[class*="notifications"])');
if (this.notificationsRef &&
!this.notificationsRef.contains(target) &&
notificationsButton !== target &&
!(notificationsButton === null || notificationsButton === void 0 ? void 0 : notificationsButton.contains(target))) {
this.notificationsMenuOpen = false;
this.notificationsMenuOpenChange.emit(false);
}
}
if (this.userMenuOpen) {
const userButton = this.el.querySelector('modus-wc-button:has([class*="user-button"])');
if (this.userRef &&
!this.userRef.contains(target) &&
userButton !== target &&
!(userButton === null || userButton === void 0 ? void 0 : userButton.contains(target))) {
this.userMenuOpen = false;
this.userMenuOpenChange.emit(false);
}
}
}
getClasses() {
const classList = [''];
// The order CSS classes are added matters to CSS specificity
if (this.customClass)
classList.push(this.customClass);
return classList.join(' ');
}
getUserInitials() {
var _a;
if (!((_a = this.userCard) === null || _a === void 0 ? void 0 : _a.name))
return '';
return this.userCard.name
.split(' ')
.map((part) => part.charAt(0))
.join('')
.toUpperCase();
}
render() {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
const condensedHasItems = ((_a = this.visibility) === null || _a === void 0 ? void 0 : _a.apps) ||
((_b = this.visibility) === null || _b === void 0 ? void 0 : _b.help) ||
((_c = this.visibility) === null || _c === void 0 ? void 0 : _c.notifications) ||
((_d = this.visibility) === null || _d === void 0 ? void 0 : _d.search);
return (h(Host, Object.assign({ key: '4c95c1573352887f5fe80272333cd79146e8024a', class: this.getClasses() }, this.inheritedAttributes), h("modus-wc-toolbar", { key: '5f6aeed4920b728da64d03274a084136475e03d8' }, h("div", { key: 'c67e5e870bb4e35b8ae80ed1b3656384b66e6b55', slot: "start" }, ((_e = this.visibility) === null || _e === void 0 ? void 0 : _e.mainMenu) && (h(Fragment, { key: '0487c55b50b22471c557e4e0415b3dc6c4be9de1' }, h("modus-wc-button", { key: '8e1f78f43fc57488e018ab6bae25690276df707a', onButtonClick: this.toggleMainMenu, shape: "square", size: "sm", variant: "borderless" }, h(MenuSolidIcon, { key: '062af1618706bde68ca88bbfcd890a82ad1a42b0' })), h("div", { key: '37dafe8777b6aeb600625eb208dffda3e49a5f9e', class: `main-menu ${this.mainMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.menuRef = el) }, h("slot", { key: 'ed23c68af752d47de27c1226e7e96794c4148902', name: "main-menu" })))), h("modus-wc-button", { key: '31921ca5a2adde91a0ae705a89bad4b971328c9b', customClass: "trimble-logo", onButtonClick: this.handleTrimbleLogoClick, size: "sm", variant: "borderless" }, this.condensed ? (h(TrimbleLogoGlobeIcon, null)) : (h(TrimbleLogoFullIcon, null))), h("slot", { key: '9ed474d1a6e227712ec149c5b857b3139bdb81db', name: "start" })), h("div", { key: 'd20e84db2fa8b0f7a819caf0a5cf4c9bd6dfeffd', slot: "center" }, h("slot", { key: '40bb6ae0b92b75c5f7d6f4d1f01797075a897a83', name: "center" })), h("div", { key: '6e7ec6d8c2a689ff973f5f654fdfeb3c56622c9b', slot: "end" }, h("slot", { key: 'e1ccf364c7e440b21a35a4ff59553b8a5bdd9fb4', name: "end" }), ((_f = this.visibility) === null || _f === void 0 ? void 0 : _f.ai) && (h(Fragment, { key: '5c4fc067bd7b100b8c9cd83375e78db9064197d0' }, h("modus-wc-button", { key: 'd7bff3029bed18356164886ce784c17645b9f2df', customClass: "ai", onButtonClick: this.handleAiClick, shape: "square", size: "sm", variant: "borderless" }, this.isLight ? h(AiLightIcon, null) : h(AiDarkIcon, null)))), this.condensed && condensedHasItems && (h(Fragment, { key: '3db9206761368e0cafff8533140d7c51877cbb8e' }, h("modus-wc-button", { key: '92e15cb30abd8f1719688287cec75a7f878b55b2', onButtonClick: this.toggleCondensedMenu, shape: "square", size: "sm", variant: "borderless" }, h(MoreVerticalSolidIcon, { key: '45d8838f52873ed7aca42a84d4c45b702a66c68a' })), this.condensedMenuOpen && (h("modus-wc-menu", { key: '441e6df37f32f4c136f1def5ece344042bab2be0', bordered: true, customClass: "condense-menu", ref: (el) => (this.condensedMenuRef = el) }, ((_g = this.visibility) === null || _g === void 0 ? void 0 : _g.search) && (h("modus-wc-menu-item", { key: 'fd152738875f10b98820caa6f4560b8c7208aeea', label: ((_h = this.textOverrides) === null || _h === void 0 ? void 0 : _h.search) || 'Search', onItemSelect: () => this.handleSearchClick(), value: "search" })), ((_j = this.visibility) === null || _j === void 0 ? void 0 : _j.notifications) && (h("modus-wc-menu-item", { key: 'ad2bd53838c8fd4b0e5122b45cc90b8a4c3fe147', label: ((_k = this.textOverrides) === null || _k === void 0 ? void 0 : _k.notifications) || 'Notifications', onItemSelect: () => this.handleNotificationsClick(), value: "notifications" })), ((_l = this.visibility) === null || _l === void 0 ? void 0 : _l.help) && (h("modus-wc-menu-item", { key: '1a8c06518655f0a273a480ed27c30a750e154727', label: ((_m = this.textOverrides) === null || _m === void 0 ? void 0 : _m.help) || 'Help', onItemSelect: () => this.handleHelpClick(), value: "help" })), ((_o = this.visibility) === null || _o === void 0 ? void 0 : _o.apps) && (h("modus-wc-menu-item", { key: '8e5181d906cb1499b7c8f283d0e544dadfdcec3c', label: ((_p = this.textOverrides) === null || _p === void 0 ? void 0 : _p.apps) || 'Apps', onItemSelect: () => this.handleAppsClick(), value: "apps" })))))), ((_q = this.visibility) === null || _q === void 0 ? void 0 : _q.search) && !this.condensed && (h(Fragment, { key: '17b517020c2beac24f5ee4e3549d1d107ab73d56' }, ((_r = this.visibility) === null || _r === void 0 ? void 0 : _r.searchInput) && this.searchInputOpen && (h("modus-wc-text-input", { key: '742247543ad4eaf9d6ca1a86e84ddce04ffc5f66', includeClear: true, includeSearch: true, onInputChange: this.handleSearchChange, placeholder: ((_s = this.textOverrides) === null || _s === void 0 ? void 0 : _s.search) || 'Search', size: "sm", value: this.searchValue })), h("modus-wc-button", { key: '2ad1e3960f71ceafa3523c413fae524e0c08acd8', onButtonClick: this.handleSearchClick, shape: "square", size: "sm", variant: "borderless" }, h(SearchSolidIcon, { key: '7f38524ca69b0b9a80ddca4e6672e573739ffb04' })))), ((_t = this.visibility) === null || _t === void 0 ? void 0 : _t.notifications) && !this.condensed && (h(Fragment, { key: 'eb0701f439b94f059ae7ae01b5f4d5e50f65a984' }, h("modus-wc-button", { key: 'dd5fbbef98096178634aec0004ec3ed3e4ef3e16', onButtonClick: this.handleNotificationsClick, shape: "square", size: "sm", variant: "borderless" }, h(NotificationsSolidIcon, { key: '60d11ba81c59056355f6b4b63066017b4c6276e4' })), h("div", { key: 'b629f7cf8beabbe8c8ce5938534eafe26d5baf86', class: `notifications ${this.notificationsMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.notificationsRef = el) }, h("slot", { key: '469b191f8e4c181a9eae02fd44380ad73e935f0f', name: "notifications" })))), ((_u = this.visibility) === null || _u === void 0 ? void 0 : _u.help) && !this.condensed && (h("modus-wc-button", { key: '82178d76130fedaf825be77961a0cc1a8600e769', onButtonClick: this.handleHelpClick, shape: "square", size: "sm", variant: "borderless" }, h(HelpSolidIcon, { key: '70901b817efefde64b6ec0041db2bc222e59f712' }))), ((_v = this.visibility) === null || _v === void 0 ? void 0 : _v.apps) && !this.condensed && (h(Fragment, { key: 'a90df08e5e4de976fa2e71ea864a19ca44fcf33a' }, h("modus-wc-button", { key: '4a210b136076575c204d8d23d07483b023dfe711', onButtonClick: this.handleAppsClick, shape: "square", size: "sm", variant: "borderless" }, h(AppsSolidIcon, { key: '51a7d22080f80d06327fda40ba5b9f4aafb8deca' })), h("div", { key: 'c1fb489ce35c2ee095aadf35ae88942274afd11e', class: `apps ${this.appsMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.appsRef = el) }, h("slot", { key: 'fa2d1751b08b0531989a9fe2dacabb2a292147d0', name: "apps" })))), ((_w = this.visibility) === null || _w === void 0 ? void 0 : _w.user) && (h(Fragment, { key: 'e90a612fa9bb98a7d0754b7492bf2cc8d8681cad' }, h("modus-wc-button", { key: '38d3fcb86c91c63cf51724b81c2040318d547750', customClass: "user-button", onButtonClick: this.toggleUser, shape: "circle", size: "sm", variant: "borderless" }, ((_x = this.userCard) === null || _x === void 0 ? void 0 : _x.avatarSrc) ? (h("modus-wc-avatar", { alt: this.userCard.avatarAlt || 'User avatar', imgSrc: this.userCard.avatarSrc, size: "xs" })) : (this.getUserInitials())), h("div", { key: '29be5aab6790d365a34849382d9900f026d8e655', class: `user ${this.userMenuOpen ? 'visible' : 'hidden'}`, ref: (el) => (this.userRef = el) }, h("modus-wc-card", { key: 'e229c711d8063482cafd87e2a6dd45839923ddf8' }, h("div", { key: '5196ce88a8ae37867829ac57a30b8b01c81ef93f', slot: "header" }, ((_y = this.userCard) === null || _y === void 0 ? void 0 : _y.avatarSrc) ? (h("modus-wc-avatar", { alt: this.userCard.avatarAlt || 'User avatar', imgSrc: this.userCard.avatarSrc })) : (h("div", { class: "initials" }, this.getUserInitials()))), h("div", { key: '6197498569a0c1e5ff12a4a8f6e2f9a3f6670f90', slot: "title" }, (_z = this.userCard) === null || _z === void 0 ? void 0 : _z.name), h("div", { key: 'af6f0e4285c7a483b585bea929524a507dac76a5' }, (_0 = this.userCard) === null || _0 === void 0 ? void 0 : _0.email), h("div", { key: '09432be3d0fe7201b0d2346b68cb3c1b17b9797d', slot: "actions" }, h("modus-wc-button", { key: '67d4752707510bc414efcdc55989fd543bb3bc07', customClass: "my-trimble", onButtonClick: this.handleMyTrimbleClick }, ((_1 = this.userCard) === null || _1 === void 0 ? void 0 : _1.myTrimbleButton) || 'Access MyTrimble')), h("div", { key: 'eaaffc61c1a8eea117f43662339776411e6e5498', slot: "footer" }, h("modus-wc-button", { key: '9a5fc012d65bfbce8ef686d243683c5e4e84e9ff', customClass: "sign-out", onButtonClick: this.handleSignOutClick, variant: "borderless" }, ((_2 = this.userCard) === null || _2 === void 0 ? void 0 : _2.signOutButton) || 'Sign out'))))))))));
}
get el() { return this; }
static get style() { return modusWcNavbarCss; }
}, [4, "modus-wc-navbar", {
"appsMenuOpen": [1028, "apps-menu-open"],
"condensed": [4],
"condensedMenuOpen": [1028, "condensed-menu-open"],
"customClass": [1, "custom-class"],
"mainMenuOpen": [1028, "main-menu-open"],
"notificationsMenuOpen": [1028, "notifications-menu-open"],
"searchDebounceMs": [2, "search-debounce-ms"],
"searchInputOpen": [1028, "search-input-open"],
"textOverrides": [16, "text-overrides"],
"userCard": [16, "user-card"],
"userMenuOpen": [1028, "user-menu-open"],
"visibility": [16],
"isLight": [32],
"searchValue": [32]
}, [[4, "click", "handleClickOutside"]]]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["modus-wc-navbar", "modus-wc-avatar", "modus-wc-button", "modus-wc-card", "modus-wc-icon", "modus-wc-input-feedback", "modus-wc-input-label", "modus-wc-menu", "modus-wc-menu-item", "modus-wc-text-input", "modus-wc-toolbar"];
components.forEach(tagName => { switch (tagName) {
case "modus-wc-navbar":
if (!customElements.get(tagName)) {
customElements.define(tagName, ModusWcNavbar$1);
}
break;
case "modus-wc-avatar":
if (!customElements.get(tagName)) {
defineCustomElement$b();
}
break;
case "modus-wc-button":
if (!customElements.get(tagName)) {
defineCustomElement$a();
}
break;
case "modus-wc-card":
if (!customElements.get(tagName)) {
defineCustomElement$9();
}
break;
case "modus-wc-icon":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "modus-wc-input-feedback":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "modus-wc-input-label":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "modus-wc-menu":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "modus-wc-menu-item":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "modus-wc-text-input":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "modus-wc-toolbar":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
} });
}
const ModusWcNavbar = ModusWcNavbar$1;
const defineCustomElement = defineCustomElement$1;
export { ModusWcNavbar, defineCustomElement };