@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,370 +0,0 @@
-<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 Inputs collect data from the user.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- * @dependency syn-divider
- *
- * @slot label - The input's label. Alternatively, you can use the `label` attribute.
- * @slot prefix - Used to prepend a presentational icon or similar element to the input.
- * @slot suffix - Used to append a presentational icon or similar element to the input.
- * @slot clear-icon - An icon to use in lieu of the default clear icon.
- * @slot show-password-icon - An icon to use in lieu of the default show password icon.
- * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
- * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
- * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.
- * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.
- *
- * @event syn-blur - Emitted when the control loses focus.
- * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
- * @event syn-clear - Emitted when the clear button is activated.
- * @event syn-focus - Emitted when the control gains focus.
- * @event syn-input - Emitted when the control receives input.
- * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
- *
- * @csspart form-control - The form control that wraps the label, input, and help text.
- * @csspart form-control-label - The label's wrapper.
- * @csspart form-control-input - The input's wrapper.
- * @csspart form-control-help-text - The help text's wrapper.
- * @csspart base - The component's base wrapper.
- * @csspart input - The internal `<input>` control.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart clear-button - The clear button.
- * @csspart password-toggle-button - The password toggle button.
- * @csspart suffix - The container that wraps the suffix.
- * @csspart stepper - The container that wraps the number stepper.
- * @csspart decrement-number-stepper - The decrement number stepper button.
- * @csspart increment-number-stepper - The increment number stepper button.
- * @csspart divider - The divider between the increment and decrement number stepper buttons.
- *
- * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
- * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
- * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
- * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/input/input.js';
-
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynChangeEvent } from '@synergy-design-system/components';
-import type { SynClearEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import type { SynInputEvent } from '@synergy-design-system/components';
-import type { SynInvalidEvent } from '@synergy-design-system/components';
-import type { SynClampEvent } from '@synergy-design-system/components';
-import type { SynInput } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynInput>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  title?: SynInput['title'];
-
-  /**
-* The type of input.
-* Works the same as a native `<input>` element, but only a subset of types are supported.
-* Defaults
-to `text`.
- */
-  type?: SynInput['type'];
-
-  /**
-   * The name of the input, submitted as a name/value pair with form data.
-   */
-  name?: SynInput['name'];
-
-  /**
-   * The current value of the input, submitted as a name/value pair with form data.
-   */
-  value?: SynInput['value'];
-
-  /**
-   * The input's size.
-   */
-  size?: SynInput['size'];
-
-  /**
-   * The input's label.
-   * If you need to display HTML, use the `label` slot instead.
-   */
-  label?: SynInput['label'];
-
-  /**
-   * The input's help text.
-   * If you need to display HTML, use the `help-text` slot instead.
-   */
-  helpText?: SynInput['helpText'];
-
-  /**
-   * Adds a clear button when the input is not empty.
-   */
-  clearable?: SynInput['clearable'];
-
-  /**
-   * Disables the input.
-   */
-  disabled?: SynInput['disabled'];
-
-  /**
-   * Placeholder text to show as a hint when the input is empty.
-   */
-  placeholder?: SynInput['placeholder'];
-
-  /**
-   * Makes the input readonly.
-   */
-  readonly?: SynInput['readonly'];
-
-  /**
-   * Adds a button to toggle the password's visibility.
-   * Only applies to password types.
-   */
-  passwordToggle?: SynInput['passwordToggle'];
-
-  /**
-   * Determines whether or not the password is currently visible.
-   * Only applies to password input types.
-   */
-  passwordVisible?: SynInput['passwordVisible'];
-
-  /**
-   * Hides the increment/decrement spin buttons for number inputs.
-   */
-  noSpinButtons?: SynInput['noSpinButtons'];
-
-  /**
-* By default, form controls are associated with the nearest containing `<form>` element.
-* This attribute allows you
-to place the form control outside of a form and associate it with the form that has this `id`.
-* The form must be in
-the same document or shadow root for this to work.
- */
-  form?: SynInput['form'];
-
-  /**
-   * Makes the input a required field.
-   */
-  required?: SynInput['required'];
-
-  /**
-   * A regular expression pattern to validate input against.
-   */
-  pattern?: SynInput['pattern'];
-
-  /**
-   * The minimum length of input that will be considered valid.
-   */
-  minlength?: SynInput['minlength'];
-
-  /**
-   * The maximum length of input that will be considered valid.
-   */
-  maxlength?: SynInput['maxlength'];
-
-  /**
-   * The input's minimum value.
-   * Only applies to date and number input types.
-   */
-  min?: SynInput['min'];
-
-  /**
-   * The input's maximum value.
-   * Only applies to date and number input types.
-   */
-  max?: SynInput['max'];
-
-  /**
-* Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
-implied, allowing any numeric value.
-* Only applies to date and number input types.
- */
-  step?: SynInput['step'];
-
-  /**
-   * Controls whether and how text input is automatically capitalized as it is entered by the user.
-   */
-  autocapitalize?: SynInput['autocapitalize'];
-
-  /**
-   * Indicates whether the browser's autocorrect feature is on or off.
-   */
-  autocorrect?: SynInput['autocorrect'];
-
-  /**
-* Specifies what permission the browser has to provide assistance in filling out form field values.
-* Refer to
-[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
- */
-  autocomplete?: SynInput['autocomplete'];
-
-  /**
-   * Indicates that the input should receive focus on page load.
-   */
-  autofocus?: SynInput['autofocus'];
-
-  /**
-   * Used to customize the label or icon of the Enter key on virtual keyboards.
-   */
-  enterkeyhint?: SynInput['enterkeyhint'];
-
-  /**
-   * Enables spell checking on the input.
-   */
-  spellcheck?: SynInput['spellcheck'];
-
-  /**
-* Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
-keyboard on supportive devices.
- */
-  inputmode?: SynInput['inputmode'];
-
-  /**
-* The minimal amount of fraction digits to use for numeric values.
-Used to format the number when the input type is `number`.
- */
-  minFractionDigits?: SynInput['minFractionDigits'];
-
-  /**
-* The maximal amount of fraction digits to use for numeric values.
-Used to format the number when the input type is `number`.
- */
-  maxFractionDigits?: SynInput['maxFractionDigits'];
-
-  /**
-* Defines the strategy for handling numbers in the numeric input.
-This is used to determine how the input behaves when the user interacts with it.
-
-Includes the following configuration options:
-
-- **autoClamp**: If true, the input will clamp the value to the min and max attributes.
-- **noStepAlign**: If true, the input will not align the value to the step attribute.
-- **noStepValidation**: If true, the input will not validate the value against the step attribute.
-
-You may provide this as one of the following values:
-
-- 'native': Uses the native browser implementation.
-- 'modern': Uses a more intuitive implementation:
-  - Values are clamped to the nearest min or max value.
-  - Stepping is inclusive to the provided min and max values.
-  - Provided stepping is no longer used in validation.
-- An object that matches the `NumericStrategy` type.
-* Note this can only be set via `property`, not as an `attribute`!
- */
-  numericStrategy?: SynInput['numericStrategy'];
-
-  /**
-* Optional options that should be passed to the `NumberFormatter` when formatting the value.
-This is used to format the number when the input type is `number`.
-Note this can only be set via `property`, not as an `attribute`!
- */
-  numberFormatterOptions?: SynInput['numberFormatterOptions'];
-
-  /**
-   * Support for two way data binding
-   */
-  modelValue?: SynInput['value'];
-}>();
-
-// 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'),
-  ),
-);
-
-// Map events
-defineEmits<{
-  /**
-   * Emitted when the control loses focus.
-   */
-  'syn-blur': [e: SynBlurEvent];
-
-  /**
-   * Emitted when an alteration to the control's value is committed by the user.
-   */
-  'syn-change': [e: SynChangeEvent];
-
-  /**
-   * Emitted when the clear button is activated.
-   */
-  'syn-clear': [e: SynClearEvent];
-
-  /**
-   * Emitted when the control gains focus.
-   */
-  'syn-focus': [e: SynFocusEvent];
-
-  /**
-   * Emitted when the control receives input.
-   */
-  'syn-input': [e: SynInputEvent];
-
-  /**
-   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   */
-  'syn-invalid': [e: SynInvalidEvent];
-
-  /**
-   * Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
-   */
-  'syn-clamp': [e: SynClampEvent];
-
-  /**
-   * Support for two way data binding
-   */
-  'update:modelValue': [newValue: SynInput['value']];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynChangeEvent } from '@synergy-design-system/components';
-export type { SynClearEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';
-export type { SynInputEvent } from '@synergy-design-system/components';
-export type { SynInvalidEvent } from '@synergy-design-system/components';
-export type { SynClampEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-input
-    @syn-blur="$emit('syn-blur', $event)"
-    @syn-change="$emit('syn-change', $event)"
-    @syn-clear="$emit('syn-clear', $event)"
-    @syn-focus="$emit('syn-focus', $event)"
-    @syn-input="
-      $emit('update:modelValue', ($event.target as SynInput).value);
-      $emit('syn-input', $event);
-    "
-    @syn-invalid="$emit('syn-invalid', $event)"
-    @syn-clamp="$emit('syn-clamp', $event)"
-    :value="
-      typeof props.modelValue !== 'undefined'
-        ? props.modelValue
-        : typeof props.value !== 'undefined'
-          ? props.value
-          : undefined
-    "
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-input>
-</template>

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

@@ -1,52 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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 { SynMenu } from '@synergy-design-system/components';
-import type { SynSelectEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/menu/menu.js';
-
-/**
- * @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.
- */
-@Component({
-  selector: 'syn-menu',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynMenuComponent {
-  public nativeElement: SynMenu;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener('syn-select', (e: SynSelectEvent) => {
-      this.synSelectEvent.emit(e);
-    });
-  }
-
-  /**
-   * Emitted when a menu item is selected.
-   */
-  @Output() synSelectEvent = new EventEmitter<SynSelectEvent>();
-}
-
-export type { SynSelectEvent } from '@synergy-design-system/components';

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

@@ -1,36 +0,0 @@
-// ---------------------------------------------------------------------
-// 🔒 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/menu.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynSelectEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-menu';
-Component.define('syn-menu');
-
-/**
- * @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 const SynMenu = createComponent({
-  displayName: 'SynMenu',
-  elementClass: Component,
-  events: {
-    onSynSelect: 'syn-select' as EventName<SynSelectEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynSelectEvent } from '@synergy-design-system/components';

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

@@ -1,37 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    background: var(--syn-panel-background-color);
-    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);
-    border-radius: var(--syn-input-border-radius-medium);
-    display: block;
-    overflow: auto;
-    overscroll-behavior: none;
-    padding: var(--syn-spacing-x-small) 0;
-    position: relative;
-  }
-
-  ::slotted(syn-divider) {
-    /* #369: Slotted syn-dividers should use a lighter color so they do not crash with the border visually */
-    --color: var(--syn-panel-border-color);
-    --spacing: var(--syn-spacing-x-small);
-  }
-
-  /**
-   * Make sure to hide the syn-divider for the first syn-optgroup
-   * Note! ::slotted does currently not work with ::part, so we
-   * opted for using a css variable here.
-   */
-  ::slotted(syn-menu-label:first-of-type) {
-    --display-divider: none;
-  }
-
-  /*
-   * #368: Hide the checkmarks for menu items
-   * when no syn-menu-item[checkbox] or loading is present
-   */
-  .menu--no-checkmarks::slotted(syn-menu-item) {
-    --display-checkmark: none;
-  }
-`;

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

@@ -1,191 +0,0 @@
-/* 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 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];
-
-  @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>
-    `;
-  }
-}