@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,209 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { classMap } from 'lit/directives/class-map.js';
+import { getTextContent, HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property, query } from 'lit/decorators.js';
+import { SubmenuController } from './submenu-controller.js';
+import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import SynIcon from '../icon/icon.component.js';
+import SynPopup from '../popup/popup.component.js';
+import SynSpinner from '../spinner/spinner.component.js';
+import styles from './menu-item.styles.js';
+import customStyles from './menu-item.custom.styles.js';
+import { emitEventForPropertyUpdates } from '../../internal/watchEvent.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @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.
+ */
+@emitEventForPropertyUpdates(['type', 'loading'], {
+  waitUntilFirstUpdated: true,
+})
+export default class SynMenuItem extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static dependencies = {
+    'syn-icon': SynIcon,
+    'syn-popup': SynPopup,
+    'syn-spinner': SynSpinner
+  };
+
+  private cachedTextLabel: string;
+  private readonly localize = new LocalizeController(this);
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+  @query('.menu-item') menuItem: HTMLElement;
+
+  /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+  @property() type: 'normal' | 'checkbox' = 'normal';
+
+  /** Draws the item in a checked state. */
+  @property({ type: Boolean, reflect: true }) checked = false;
+
+  /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+  @property() value = '';
+
+  /** Draws the menu item in a loading state. */
+  @property({ type: Boolean, reflect: true }) loading = false;
+
+  /** Draws the menu item in a disabled state, preventing selection. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  private readonly hasSlotController = new HasSlotController(this, 'submenu');
+  private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController);
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleHostClick);
+    this.addEventListener('mouseover', this.handleMouseOver);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleHostClick);
+    this.removeEventListener('mouseover', this.handleMouseOver);
+  }
+
+  private handleDefaultSlotChange() {
+    const textLabel = this.getTextLabel();
+
+    // Ignore the first time the label is set
+    if (typeof this.cachedTextLabel === 'undefined') {
+      this.cachedTextLabel = textLabel;
+      return;
+    }
+
+    // When the label changes, emit a slotchange event so parent controls see it
+    if (textLabel !== this.cachedTextLabel) {
+      this.cachedTextLabel = textLabel;
+      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
+    }
+  }
+
+  private handleHostClick = (event: MouseEvent) => {
+    // Prevent the click event from being emitted when the button is disabled or loading
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  };
+
+  private handleMouseOver = (event: MouseEvent) => {
+    this.focus();
+    event.stopPropagation();
+  };
+
+  @watch('checked')
+  handleCheckedChange() {
+    // For proper accessibility, users have to use type="checkbox" to use the checked attribute
+    if (this.checked && this.type !== 'checkbox') {
+      this.checked = false;
+      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+      return;
+    }
+
+    // Only checkbox types can receive the aria-checked attribute
+    if (this.type === 'checkbox') {
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    } else {
+      this.removeAttribute('aria-checked');
+    }
+  }
+
+  @watch('disabled')
+  handleDisabledChange() {
+    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+  }
+
+  @watch('type')
+  handleTypeChange() {
+    if (this.type === 'checkbox') {
+      this.setAttribute('role', 'menuitemcheckbox');
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+    } else {
+      this.setAttribute('role', 'menuitem');
+      this.removeAttribute('aria-checked');
+    }
+  }
+
+  /** Returns a text label based on the contents of the menu item's default slot. */
+  getTextLabel() {
+    return getTextContent(this.defaultSlot);
+  }
+
+  isSubmenu() {
+    return this.hasSlotController.test('submenu');
+  }
+
+  render() {
+    const isRtl = this.localize.dir() === 'rtl';
+    const isSubmenuExpanded = this.submenuController.isExpanded();
+
+    return html`
+      <div
+        id="anchor"
+        part="base"
+        class=${classMap({
+          'menu-item': true,
+          'menu-item--rtl': isRtl,
+          'menu-item--checked': this.checked,
+          'menu-item--disabled': this.disabled,
+          'menu-item--loading': this.loading,
+          'menu-item--has-submenu': this.isSubmenu(),
+          'menu-item--submenu-expanded': isSubmenuExpanded
+        })}
+        ?aria-haspopup="${this.isSubmenu()}"
+        ?aria-expanded="${isSubmenuExpanded ? true : false}"
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <syn-icon name="check" library="system" aria-hidden="true"></syn-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span part="submenu-icon" class="menu-item__chevron">
+          <syn-icon name="chevron-down" library="system" aria-hidden="true"></syn-icon>
+        </span>
+
+        ${this.submenuController.renderSubmenu()}
+        ${this.loading ? html` <syn-spinner part="spinner" exportparts="base:spinner__base"></syn-spinner> ` : ''}
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,91 @@
+<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 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.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/menu-item/menu-item.js';
+
+import type { SynMenuItem } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynMenuItem>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+   * The type of menu item to render.
+   * To use `checked`, this value must be set to `checkbox`.
+   */
+  type?: SynMenuItem['type'];
+
+  /**
+   * Draws the item in a checked state.
+   */
+  checked?: SynMenuItem['checked'];
+
+  /**
+   * A unique value to store in the menu item.
+   * This can be used as a way to identify menu items when selected.
+   */
+  value?: SynMenuItem['value'];
+
+  /**
+   * Draws the menu item in a loading state.
+   */
+  loading?: SynMenuItem['loading'];
+
+  /**
+   * Draws the menu item in a disabled state, preventing selection.
+   */
+  disabled?: SynMenuItem['disabled'];
+}>();
+
+// Make sure prop binding only forwards the props that are actually there.
+// This is needed because :param="param" also adds an empty attribute
+// when using web-components, which breaks optional arguments like size in SynInput
+// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
+</script>
+
+<template>
+  <syn-menu-item v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-menu-item>
+</template>

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

@@ -0,0 +1,48 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynMenuLabel } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/menu-label/menu-label.js';
+
+/**
+ * @summary Menu labels are used to describe a group of menu items.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The menu label's content.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart label - The label that is displayed below the divider
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+@Component({
+  selector: 'syn-menu-label',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynMenuLabelComponent {
+  public nativeElement: SynMenuLabel;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+}

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

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --display-divider: block;
+  }
+
+  .menu-label__divider {
+    --spacing: 0;
+
+    display: var(--display-divider);
+    margin-bottom: var(--syn-spacing-x-small);
+  }
+
+  .menu-label {
+    color: var(--syn-typography-color-text);
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-medium);
+    font-weight: var(--syn-font-weight-semibold);
+    letter-spacing: var(--syn-letter-spacing-normal);
+    line-height: var(--syn-line-height-normal);
+    padding: var(--syn-spacing-small) var(--syn-spacing-medium);
+  }
+`;

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

@@ -0,0 +1,35 @@
+// ---------------------------------------------------------------------
+// 🔒 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-label/menu-label.component.js';
+
+const tagName = 'syn-menu-label';
+Component.define('syn-menu-label');
+
+/**
+ * @summary Menu labels are used to describe a group of menu items.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The menu label's content.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart label - The label that is displayed below the divider
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+export const SynMenuLabel = createComponent({
+  displayName: 'SynMenuLabel',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

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

@@ -0,0 +1,28 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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 {
+    display: block;
+  }
+
+  .menu-label {
+    display: inline-block;
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-small);
+    font-weight: var(--syn-font-weight-semibold);
+    line-height: var(--syn-line-height-normal);
+    letter-spacing: var(--syn-letter-spacing-normal);
+    color: var(--syn-color-neutral-500);
+    padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-large);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;

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

@@ -0,0 +1,54 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { html } from 'lit';
+import SynDivider from '../divider/divider.component.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import styles from './menu-label.styles.js';
+import customStyles from './menu-label.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Menu labels are used to describe a group of menu items.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The menu label's content.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart label - The label that is displayed below the divider
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+export default class SynMenuLabel extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+
+  static dependencies = {
+    'syn-divider': SynDivider,
+  };
+    
+  render() {
+    return html`
+      <div part="base" class="menu-label-wrapper">
+        <syn-divider class="menu-label__divider" part="divider"></syn-divider>
+        <slot part="label" class="menu-label"></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'syn-menu-label': SynMenuLabel;
+  }
+}

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

@@ -0,0 +1,41 @@
+<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 Menu labels are used to describe a group of menu items.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-divider
+ *
+ * @slot - The menu label's content.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart divider - The divider that is displayed above the content
+ * @csspart label - The label that is displayed below the divider
+ *
+ * @cssproperty --display-divider - Display property of the divider. Defaults to "block"
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/menu-label/menu-label.js';
+
+import type { SynMenuLabel } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynMenuLabel>();
+
+defineExpose({
+  nativeElement,
+});
+</script>
+
+<template>
+  <syn-menu-label ref="nativeElement">
+    <slot></slot>
+  </syn-menu-label>
+</template>