@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/packages/components/components/syn-menu/component.ts

@@ -0,0 +1,199 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import type { SynAttributesChangedEvent } from '../../events/syn-attributes-changed.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import styles from './menu.styles.js';
+import customStyles from './menu.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+import type SynMenuItem from '../menu-item/menu-item.component.js';
+
+export interface MenuSelectEventDetail {
+  item: SynMenuItem;
+}
+
+/**
+ * @summary Menus provide a list of options for the user to choose from.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The menu's content, including menu items, menu labels, and dividers.
+ *
+ * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
+ */
+export default class SynMenu extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+
+  @query('slot') defaultSlot: HTMLSlotElement;
+  @state() hasMenuItemsWithCheckmarks = false;
+
+  private handleUpdateCheckmarks(items: SynMenuItem[]) {
+    // #368: Treat a menu as having checkmarks if it has any checkboxes or items with loading states
+    // The loading indicator has to be checked as well, as it's specially placed over the check mark
+    this.hasMenuItemsWithCheckmarks = items.some(item => item.type === 'checkbox' || item.loading);  
+  }
+
+  private updateCheckMarksByChildPropChange = (e: SynAttributesChangedEvent) => {
+    e.stopImmediatePropagation();
+    this.handleUpdateCheckmarks(this.getAllItems());
+  };
+  
+  disconnectedCallback() {
+    this.removeEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'menu');
+    this.addEventListener('syn-attributes-changed', this.updateCheckMarksByChildPropChange);
+  }
+
+  private handleClick(event: MouseEvent) {
+    const menuItemTypes = ['menuitem', 'menuitemcheckbox'];
+
+    const composedPath = event.composedPath();
+    const target = composedPath.find((el: Element) => menuItemTypes.includes(el?.getAttribute?.('role') || ''));
+
+    if (!target) return;
+
+    const closestMenu = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu');
+    const clickHasSubmenu = closestMenu !== this;
+
+    // Make sure we're the menu thats supposed to be handling the click event.
+    if (clickHasSubmenu) return;
+
+    // This isn't true. But we use it for TypeScript checks below.
+    const item = target as SynMenuItem;
+
+    if (item.type === 'checkbox') {
+      item.checked = !item.checked;
+    }
+
+    this.emit('syn-select', { detail: { item } });
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    // Make a selection when pressing enter or space
+    if (event.key === 'Enter' || event.key === ' ') {
+      const item = this.getCurrentItem();
+      event.preventDefault();
+      event.stopPropagation();
+
+      // Simulate a click to support @click handlers on menu items that also work with the keyboard
+      item?.click();
+    }
+
+    // Move the selection when pressing down or up
+    else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+      const items = this.getAllItems();
+      const activeItem = this.getCurrentItem();
+      let index = activeItem ? items.indexOf(activeItem) : 0;
+
+      if (items.length > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (event.key === 'ArrowDown') {
+          index++;
+        } else if (event.key === 'ArrowUp') {
+          index--;
+        } else if (event.key === 'Home') {
+          index = 0;
+        } else if (event.key === 'End') {
+          index = items.length - 1;
+        }
+
+        if (index < 0) {
+          index = items.length - 1;
+        }
+        if (index > items.length - 1) {
+          index = 0;
+        }
+
+        this.setCurrentItem(items[index]);
+        items[index].focus();
+      }
+    }
+  }
+
+  private handleMouseDown(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+
+    if (this.isMenuItem(target)) {
+      this.setCurrentItem(target as SynMenuItem);
+    }
+  }
+
+  private handleSlotChange() {
+    const items = this.getAllItems();
+    this.handleUpdateCheckmarks(items);
+
+    // Reset the roving tab index when the slotted items change
+    if (items.length > 0) {
+      this.setCurrentItem(items[0]);
+    }
+  }
+
+  private isMenuItem(item: HTMLElement) {
+    return (
+      item.tagName.toLowerCase() === 'syn-menu-item' ||
+      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? '')
+    );
+  }
+
+  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+  getAllItems() {
+    return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el: HTMLElement) => {
+      if (el.inert || !this.isMenuItem(el)) {
+        return false;
+      }
+      return true;
+    }) as SynMenuItem[];
+  }
+
+  /**
+   * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+   */
+  getCurrentItem() {
+    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
+  }
+
+  /**
+   * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+   * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+   */
+  setCurrentItem(item: SynMenuItem) {
+    const items = this.getAllItems();
+
+    // Update tab indexes
+    items.forEach(i => {
+      i.setAttribute('tabindex', i === item ? '0' : '-1');
+    });
+  }
+
+  render() {
+    return html`
+      <slot
+        class=${classMap({
+          'menu--no-checkmarks': !this.hasMenuItemsWithCheckmarks,
+        })}
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+  }
+}

package/metadata/packages/components/components/syn-menu/component.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary Menus provide a list of options for the user to choose from.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The menu's content, including menu items, menu labels, and dividers.
+ *
+ * @event {{ item: SynMenuItem }} syn-select - Emitted when a menu item is selected.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/menu/menu.js';
+
+import type { SynSelectEvent } from '@synergy-design-system/components';
+import type { SynMenu } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynMenu>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map events
+defineEmits<{
+  /**
+   * Emitted when a menu item is selected.
+   */
+  'syn-select': [e: SynSelectEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynSelectEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-menu @syn-select="$emit('syn-select', $event)" ref="nativeElement">
+    <slot></slot>
+  </syn-menu>
+</template>

package/metadata/packages/components/components/syn-menu-item/component.angular.ts

@@ -0,0 +1,121 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/angular wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import {
+  Component,
+  ElementRef,
+  NgZone,
+  Input,
+  Output,
+  EventEmitter,
+  AfterContentInit,
+} from '@angular/core';
+import type { SynMenuItem } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/menu-item/menu-item.js';
+
+/**
+ * @summary Menu items provide options for the user to pick from in a menu.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-spinner
+ *
+ * @slot - The menu item's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ * @slot submenu - Used to denote a nested menu.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+ * @csspart prefix - The prefix container.
+ * @csspart label - The menu item label.
+ * @csspart suffix - The suffix container.
+ * @csspart spinner - The spinner that shows when the menu item is in the loading state.
+ * @csspart spinner__base - The spinner's base part.
+ * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
+ *
+ * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
+ */
+@Component({
+  selector: 'syn-menu-item',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynMenuItemComponent {
+  public nativeElement: SynMenuItem;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+
+  /**
+   * The type of menu item to render.
+   * To use `checked`, this value must be set to `checkbox`.
+   */
+  @Input()
+  set type(v: SynMenuItem['type']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.type = v));
+  }
+  get type(): SynMenuItem['type'] {
+    return this.nativeElement.type;
+  }
+
+  /**
+   * Draws the item in a checked state.
+   */
+  @Input()
+  set checked(v: '' | SynMenuItem['checked']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.checked = v === '' || v),
+    );
+  }
+  get checked(): SynMenuItem['checked'] {
+    return this.nativeElement.checked;
+  }
+
+  /**
+   * A unique value to store in the menu item.
+   * This can be used as a way to identify menu items when selected.
+   */
+  @Input()
+  set value(v: SynMenuItem['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynMenuItem['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * Draws the menu item in a loading state.
+   */
+  @Input()
+  set loading(v: '' | SynMenuItem['loading']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.loading = v === '' || v),
+    );
+  }
+  get loading(): SynMenuItem['loading'] {
+    return this.nativeElement.loading;
+  }
+
+  /**
+   * Draws the menu item in a disabled state, preventing selection.
+   */
+  @Input()
+  set disabled(v: '' | SynMenuItem['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynMenuItem['disabled'] {
+    return this.nativeElement.disabled;
+  }
+}

package/metadata/packages/components/components/syn-menu-item/component.custom.styles.ts

@@ -0,0 +1,128 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    /* Custom override for hiding the checkmark in menus it is not needed */
+    --display-checkmark: flex;
+  }
+
+  .menu-item {
+    color: var(--syn-typography-color-text);
+    font-size: var(--syn-font-size-medium);
+    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+  }
+
+  /** #429: Use token for opacity */
+  .menu-item.menu-item--disabled {
+    opacity: var(--syn-opacity-50);
+  }
+
+  /**
+   * Handling for slotted prefix and suffix
+   */
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--syn-spacing-small);
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  /**
+   * Set the default font size to make icons appear correct
+   */
+  .menu-item .menu-item__prefix::slotted(syn-icon),
+  .menu-item .menu-item__suffix::slotted(syn-icon) {
+    color: var(--syn-color-neutral-800);
+    font-size: var(--syn-font-size-x-large);
+  }
+
+  :host(:focus-visible)  .menu-item .menu-item__prefix::slotted(syn-icon),
+  :host(:focus-visible)  .menu-item .menu-item__suffix::slotted(syn-icon) {
+    color: var(--syn-color-neutral-0);
+  }
+
+  /**
+   * Adjust the size of icons
+   */
+  .menu-item .menu-item__chevron,
+  .menu-item .menu-item__check {
+    display: var(--display-checkmark);
+    font-size: var(--syn-font-size-x-large);
+    width: var(--syn-font-size-x-large);
+  }
+
+  /**
+   * This makes sure the chevron does not take any space if we do not have children
+   */
+  .menu-item .menu-item__chevron {
+    display: none;
+    margin-inline-start: var(--syn-spacing-small);
+  }
+
+  .menu-item .menu-item__check {
+    color: var(--syn-color-primary-600);
+    margin-inline-end: var(--syn-spacing-small);
+  }
+
+  /**
+   * When in loading state, do not show the checkmark as it would bleed through
+   */
+  .menu-item--loading .menu-item__check {
+    visibility: hidden;
+  }
+
+  /**
+   * Make sure the checkbox is also visible when the item is active
+   */
+  :host(:focus-visible) .menu-item--checked .menu-item__check {
+    color: var(--syn-color-neutral-0);
+  }
+
+  /**
+   * Special handling for the submenu chevron:
+   * We are using the "chevron-down" icon per default as
+   * we do not want all chevrons to be part of the bundle
+   * Therefore, we have to transform it into the right direction
+   */
+  .menu-item .menu-item__chevron syn-icon {
+    transform: rotate(-90deg);
+  }
+
+  .menu-item--rtl .menu-item__chevron syn-icon {
+    transform: rotate(90deg);
+  }
+
+  .menu-item.menu-item--loading *:not(syn-spinner) {
+    opacity: var(--syn-opacity-50);
+  }
+
+  /**
+   * Make sure to show the chevron if there are children
+   */
+  .menu-item--has-submenu .menu-item__chevron {
+    display: flex;
+  }
+
+  /**
+   * Adjustments for the spinner in loading state
+   */
+  .menu-item--loading syn-spinner {
+    --track-width: 2px;
+
+    font-size: var(--syn-font-size-medium);
+    left: var(--syn-spacing-medium);
+  }
+
+  /**
+   * Highlight checked items
+   */
+  .menu-item--checked .menu-item__label {
+    font-weight: var(--syn-font-weight-semibold);
+  }
+
+  /* Needed if we do not show the checkmark */
+  :host(:not([type="checkmark"]):not([loading])) .menu-item__label {
+    min-height: var(--syn-font-size-x-large);
+  }
+`;

package/metadata/packages/components/components/syn-menu-item/component.react.ts

@@ -0,0 +1,45 @@
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/react wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '@synergy-design-system/components/components/menu-item/menu-item.component.js';
+
+const tagName = 'syn-menu-item';
+Component.define('syn-menu-item');
+
+/**
+ * @summary Menu items provide options for the user to pick from in a menu.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-popup
+ * @dependency syn-spinner
+ *
+ * @slot - The menu item's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ * @slot submenu - Used to denote a nested menu.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+ * @csspart prefix - The prefix container.
+ * @csspart label - The menu item label.
+ * @csspart suffix - The suffix container.
+ * @csspart spinner - The spinner that shows when the menu item is in the loading state.
+ * @csspart spinner__base - The spinner's base part.
+ * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
+ *
+ * @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
+ */
+export const SynMenuItem = createComponent({
+  displayName: 'SynMenuItem',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/metadata/packages/components/components/syn-menu-item/component.styles.ts

@@ -0,0 +1,164 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    --submenu-offset: -2px;
+
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-medium);
+    font-weight: var(--syn-font-weight-normal);
+    line-height: var(--syn-line-height-normal);
+    letter-spacing: var(--syn-letter-spacing-normal);
+    color: var(--syn-color-neutral-700);
+    padding: var(--syn-spacing-2x-small) var(--syn-spacing-2x-small);
+    transition: var(--syn-transition-fast) fill;
+    user-select: none;
+    -webkit-user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item.menu-item--loading {
+    outline: none;
+    cursor: wait;
+  }
+
+  .menu-item.menu-item--loading *:not(syn-spinner) {
+    opacity: 0.5;
+  }
+
+  .menu-item--loading syn-spinner {
+    --indicator-color: currentColor;
+    --track-width: 1px;
+    position: absolute;
+    font-size: 0.75em;
+    top: calc(50% - 0.5em);
+    left: 0.65rem;
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  /* Safe triangle */
+  .menu-item--submenu-expanded::after {
+    content: '';
+    position: fixed;
+    z-index: calc(var(--syn-z-index-dropdown) - 1);
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    clip-path: polygon(
+      var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0),
+      var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0),
+      var(--safe-triangle-submenu-end-x, 0) var(--safe-triangle-submenu-end-y, 0)
+    );
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
+  .menu-item--submenu-expanded {
+    background-color: var(--syn-color-neutral-100);
+    color: var(--syn-color-neutral-1000);
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: var(--syn-color-primary-600);
+    color: var(--syn-color-neutral-0);
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  /* Add elevation and z-index to submenus */
+  syn-popup::part(popup) {
+    box-shadow: var(--syn-shadow-large);
+    z-index: var(--syn-z-index-dropdown);
+    margin-left: var(--submenu-offset);
+  }
+
+  .menu-item--rtl syn-popup::part(popup) {
+    margin-left: calc(-1 * var(--submenu-offset));
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+
+  ::slotted(syn-menu) {
+    max-width: var(--auto-size-available-width) !important;
+    max-height: var(--auto-size-available-height) !important;
+  }
+`;