@momentum-design/components 0.80.3 → 0.80.5

package/dist/components/sidenavigation/sidenavigation.context.js

@@ -0,0 +1,78 @@
+import { createContext } from '@lit/context';
+import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
+import { TAG_NAME as NAVITEM_TAGNAME } from '../navitem/navitem.constants';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { TAG_NAME } from './sidenavigation.constants';
+class SideNavigationContext {
+    constructor(defaultVariant, defaultExpanded, defaultParentNavTooltipText) {
+        this.variant = defaultVariant;
+        this.expanded = defaultExpanded;
+        this.parentNavTooltipText = defaultParentNavTooltipText;
+    }
+    hasSiblingWithTriggerId(navItem) {
+        var _a, _b;
+        const id = navItem === null || navItem === void 0 ? void 0 : navItem.getAttribute('id');
+        if (!id)
+            return false;
+        const siblings = Array.from((_b = (_a = navItem === null || navItem === void 0 ? void 0 : navItem.parentElement) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []);
+        return siblings.some((sibling) => sibling !== navItem
+            && sibling.tagName.toLowerCase() === MENUPOPOVER_TAGNAME
+            && sibling.getAttribute('triggerid') === id);
+    }
+    getParentNavItems(navItem) {
+        if (!navItem)
+            return [];
+        const parents = [];
+        let current = navItem;
+        while (current) {
+            // Walk up to find the menupopover
+            const popover = current === null || current === void 0 ? void 0 : current.closest(MENUPOPOVER_TAGNAME);
+            if (!popover)
+                break;
+            const triggerId = popover.getAttribute('triggerid');
+            if (!triggerId)
+                break;
+            // Find the NavItem that triggered this menupopover
+            const triggeringNavItem = document.getElementById(triggerId);
+            if (triggeringNavItem && triggeringNavItem.tagName.toLowerCase() === NAVITEM_TAGNAME) {
+                parents.push(triggeringNavItem);
+                current = triggeringNavItem;
+            }
+            else {
+                break;
+            }
+        }
+        return parents;
+    }
+    setCurrentActiveNavItem(navItem) {
+        var _a;
+        const isSameItem = ((_a = this.currentActiveNavItem) === null || _a === void 0 ? void 0 : _a.navId) === (navItem === null || navItem === void 0 ? void 0 : navItem.navId);
+        const shouldSkip = (navItem === null || navItem === void 0 ? void 0 : navItem.disableAriaCurrent) || this.hasSiblingWithTriggerId(navItem);
+        if (isSameItem || shouldSkip)
+            return;
+        // Clean up previous active item
+        if (this.currentActiveNavItem) {
+            this.currentActiveNavItem.removeAttribute('aria-current');
+            this.currentActiveNavItem.removeAttribute('active');
+            const previousParents = this.getParentNavItems(this.currentActiveNavItem);
+            previousParents.forEach((parent) => {
+                parent.removeAttribute('tooltip-text');
+                parent.removeAttribute('active');
+            });
+        }
+        // Apply attributes to new active item
+        if (!navItem)
+            return;
+        this.currentActiveNavItem = navItem;
+        navItem.setAttribute('aria-current', 'page');
+        navItem.setAttribute('active', '');
+        const newParents = this.getParentNavItems(navItem);
+        newParents.forEach((parent) => {
+            parent.setAttribute('tooltip-text', this.parentNavTooltipText || '');
+            parent.setAttribute('tooltip-placement', POPOVER_PLACEMENT.BOTTOM);
+            parent.setAttribute('active', '');
+        });
+    }
+}
+SideNavigationContext.context = createContext(TAG_NAME);
+export default SideNavigationContext;

package/dist/components/sidenavigation/sidenavigation.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/components/sidenavigation/sidenavigation.styles.js

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+const styles = css `
+:host {
+  --mdc-sidenavigation-expanded-width: 15rem;
+  --mdc-sidenavigation-collapsed-width: 4.5rem;
+
+  display: flex;
+  height: 100%;
+}
+
+:host([expanded]) {
+  width: var(--mdc-sidenavigation-expanded-width);
+}
+
+:host(:not([expanded])) {
+  width: var(--mdc-sidenavigation-collapsed-width);
+}
+
+:host::part(side-navigation-container) {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+:host::part(scrollable-section) {
+  flex-grow: 1;
+  overflow: auto;
+  padding: 1rem 0;
+  min-height: 0;
+}
+
+:host::part(fixed-section) {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-bottom: 1rem;
+  gap: 0.5rem;
+}
+
+:host::part(brand-logo-container) {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 0.5rem;  
+  border-radius: 1.25rem;
+}
+
+:host(:dir(ltr))::part(brand-logo-container) {
+  padding: 0.5rem 0rem 0.5rem 1.5rem;
+}
+
+:host(:dir(rtl))::part(brand-logo-container) {
+  padding: 0.5rem 1.5rem 0.5rem 0rem; 
+}
+
+::slotted([slot="brand-logo"]) {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  aspect-ratio: 1 / 1;
+}
+
+:host::part(separator) {
+  margin-bottom: 0.75rem;
+}
+`;
+export default [styles];

package/dist/components/sidenavigation/sidenavigation.types.d.ts

@@ -0,0 +1,7 @@
+import type { ValueOf } from '../../utils/types';
+import { VARIANTS } from './sidenavigation.constants';
+type SideNavigationVariant = ValueOf<typeof VARIANTS>;
+interface Events {
+    onActiveChangeEvent: Event;
+}
+export type { SideNavigationVariant, Events };

package/dist/components/sidenavigation/sidenavigation.types.js

@@ -0,0 +1 @@
+export {};