@momentum-design/components 0.80.4 → 0.81.0

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 {};

package/dist/components/skeleton/index.d.ts

@@ -0,0 +1,7 @@
+import Skeleton from './skeleton.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-skeleton']: Skeleton;
+    }
+}
+export default Skeleton;

package/dist/components/skeleton/index.js

@@ -0,0 +1,4 @@
+import Skeleton from './skeleton.component';
+import { TAG_NAME } from './skeleton.constants';
+Skeleton.register(TAG_NAME);
+export default Skeleton;

package/dist/components/skeleton/skeleton.component.d.ts

@@ -0,0 +1,46 @@
+import type { PropertyValues } from 'lit';
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { SkeletonVariant } from './skeleton.types';
+/**
+ * `mdc-skeleton` is a component that shows a grey placeholder area.
+ * It provides visual feedback to users that content is being loaded.
+ *
+ * **Skeleton Variants:**
+ * - **rectangular**: Default variant with 0.25rem border radius
+ * - **rounded**: Has 0.5rem border radius
+ * - **circular**: Has 50% border radius for circular shapes
+ * - **button**: Optimized for button placeholders with 1.25rem border radius
+ *
+ * **Sizing Behavior:**
+ * 1. If wrapping content, takes dimensions of wrapped content
+ * 2. Otherwise grows to fill parent container
+ *
+ * @tagname mdc-skeleton
+ *
+ * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
+ *
+ * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
+ * @cssproperty --mdc-skeleton-height - height of the skeleton
+ * @cssproperty --mdc-skeleton-width - width of the skeleton
+ */
+declare class Skeleton extends Component {
+    /**
+     * The variant of skeleton to display
+     * - **rectangular**: Default rectangular shape with 0.25rem border radius
+     * - **rounded**: Rounded rectangle with 0.5rem border radius
+     * - **circular**: Circular shape with 50% border radius
+     * - **button**: Button placeholder with 1.25rem border radius
+     * @default rectangular
+     */
+    variant: SkeletonVariant;
+    /**
+     * Styles associated with this component.
+     */
+    static styles: Array<CSSResult>;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    private checkSlotContent;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+export default Skeleton;

package/dist/components/skeleton/skeleton.component.js

@@ -0,0 +1,86 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DEFAULTS } from './skeleton.constants';
+import styles from './skeleton.styles';
+/**
+ * `mdc-skeleton` is a component that shows a grey placeholder area.
+ * It provides visual feedback to users that content is being loaded.
+ *
+ * **Skeleton Variants:**
+ * - **rectangular**: Default variant with 0.25rem border radius
+ * - **rounded**: Has 0.5rem border radius
+ * - **circular**: Has 50% border radius for circular shapes
+ * - **button**: Optimized for button placeholders with 1.25rem border radius
+ *
+ * **Sizing Behavior:**
+ * 1. If wrapping content, takes dimensions of wrapped content
+ * 2. Otherwise grows to fill parent container
+ *
+ * @tagname mdc-skeleton
+ *
+ * @slot - Content to wrap (optional). When provided, skeleton takes dimensions of this content.
+ *
+ * @cssproperty --mdc-skeleton-background-color - background color of the skeleton
+ * @cssproperty --mdc-skeleton-height - height of the skeleton
+ * @cssproperty --mdc-skeleton-width - width of the skeleton
+ */
+class Skeleton extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * The variant of skeleton to display
+         * - **rectangular**: Default rectangular shape with 0.25rem border radius
+         * - **rounded**: Rounded rectangle with 0.5rem border radius
+         * - **circular**: Circular shape with 50% border radius
+         * - **button**: Button placeholder with 1.25rem border radius
+         * @default rectangular
+         */
+        this.variant = DEFAULTS.VARIANT;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-hidden', 'true');
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.checkSlotContent();
+    }
+    checkSlotContent() {
+        var _a;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot) {
+            const hasContent = slot.assignedNodes().length > 0;
+            if (hasContent) {
+                this.setAttribute('has-content', '');
+            }
+            else {
+                this.removeAttribute('has-content');
+            }
+        }
+    }
+    render() {
+        return html `<slot @slotchange=${this.checkSlotContent}></slot>`;
+    }
+}
+/**
+ * Styles associated with this component.
+ */
+Skeleton.styles = [
+    ...Component.styles,
+    styles,
+];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Skeleton.prototype, "variant", void 0);
+export default Skeleton;

package/dist/components/skeleton/skeleton.constants.d.ts

@@ -0,0 +1,11 @@
+declare const TAG_NAME: "mdc-skeleton";
+declare const SKELETON_VARIANTS: {
+    readonly BUTTON: "button";
+    readonly CIRCULAR: "circular";
+    readonly RECTANGULAR: "rectangular";
+    readonly ROUNDED: "rounded";
+};
+declare const DEFAULTS: {
+    VARIANT: "rectangular";
+};
+export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS, };

package/dist/components/skeleton/skeleton.constants.js

@@ -0,0 +1,12 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('skeleton');
+const SKELETON_VARIANTS = {
+    BUTTON: 'button',
+    CIRCULAR: 'circular',
+    RECTANGULAR: 'rectangular',
+    ROUNDED: 'rounded',
+};
+const DEFAULTS = {
+    VARIANT: SKELETON_VARIANTS.RECTANGULAR,
+};
+export { TAG_NAME, SKELETON_VARIANTS, DEFAULTS, };

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

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

package/dist/components/skeleton/skeleton.styles.js

@@ -0,0 +1,40 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    --mdc-skeleton-background-color: var(--mds-color-theme-background-skeleton-normal);
+    --mdc-skeleton-height: 100%;
+    --mdc-skeleton-width: 100%;
+    display: block;
+    overflow: hidden;
+    background-color: var(--mdc-skeleton-background-color);
+    height: var(--mdc-skeleton-height);
+    width: var(--mdc-skeleton-width);
+  }
+
+  :host([variant="rectangular"]) {
+    border-radius: 0.25rem;
+  }
+
+  :host([variant="rounded"]) {
+    border-radius: 0.5rem;
+  }
+
+  :host([variant="circular"]) {
+    border-radius: 50%;
+  }
+
+  :host([variant="button"]) {
+    border-radius: 1.25rem;
+  }
+
+  /* When there's slotted content, fit to content size */
+  :host([has-content]) {
+    width: fit-content;
+    height: fit-content;
+  }
+
+  ::slotted(*) {
+    visibility: hidden;
+  }
+`;
+export default styles;

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

@@ -0,0 +1,4 @@
+import type { ValueOf } from '../../utils/types';
+import { SKELETON_VARIANTS } from './skeleton.constants';
+type SkeletonVariant = ValueOf<typeof SKELETON_VARIANTS>;
+export type { SkeletonVariant };

package/dist/components/skeleton/skeleton.types.js

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