@synergy-design-system/mcp 2.15.0 → 3.0.0

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

@@ -1,165 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: block;
-    /* stylelint-disable-next-line property-no-vendor-prefix */
-    -webkit-user-select: none;
-    user-select: none;
-  }
-
-  :host(:focus) {
-    outline: none;
-  }
-
-  /**
-   * syn-option is now able to adjust its height from a parent item
-   * This is done by exposing multiple css variables to the outside:
-   *
-   * --option-min-height (defaults to 48px) The minimal height of an element
-   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use
-   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use
-   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark
-   * 
-   * See below for usage of these variables
-   */
-  .option {
-    align-items: center;
-
-    /*
-     * #988: Brand2025 defines a small gap between options
-     * and rounded corners. We achieve that using an border
-     * that simulates the gap using the menu background color.
-     */
-    border: solid var(--syn-panel-background-color);
-
-    /**
-     * Border Radius needs to be increased to cover the outline
-     * Note this also needs to take the following into account:
-     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to "0"
-     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring
-     */
-    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 2px) / calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 4px);
-    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);
-    color: var(--syn-color-neutral-700);
-    cursor: pointer;
-    display: flex;
-    font-family: var(--syn-font-sans);
-    font-size: var(--option-font-size, var(--syn-font-size-medium));
-    font-weight: var(--syn-font-weight-normal);
-    letter-spacing: var(--syn-letter-spacing-normal);
-    line-height: var(--syn-line-height-normal);
-
-    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */
-    min-height: var(--option-min-height, var(--syn-input-height-medium));
-    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));
-    position: relative;
-    transition: var(--syn-transition-fast) fill;
-  }
-
-  .option:not(.option--current) {
-    color: var(--syn-option-color);
-  }
-
-  .option--current,
-  .option--current.option--hover:not(.option--disabled) {
-    background-color: var(--syn-option-background-color-active);
-    color: var(--syn-option-color-active);
-  }
-
-  .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--syn-option-background-color-hover);
-    color: var(--syn-option-color-hover);
-  }
-
-  .option--disabled {
-    cursor: not-allowed;
-    opacity: var(--syn-input-disabled-opacity); /* #429: Use token for opacity */
-    outline: none;
-  }
-
-  .option--current.option--disabled {
-    background-color: var(--syn-option-background-color-hover);
-    color: var(--syn-option-color-hover);
-  }
-
-  .option__label {
-    display: inline-block;
-    flex: 1 1 auto;
-    line-height: var(--syn-line-height-normal);
-  }
-
-  .option__check {
-    color: var(--syn-option-check-color);
-    font-size: var(--option-icon-size, var(--syn-spacing-large));
-  }
-
-  .option .option__check {
-    align-items: center;
-    display: flex;
-    flex: 0 0 auto;
-    justify-content: center;
-    padding-inline-end: var(--syn-spacing-small);
-    visibility: hidden;
-  }
-
-  /* Invert the check mark when keyboard navigation is used */
-  .option--current .option__check {
-    color: var(--syn-option-check-color-active);
-  }
-
-  .option--selected .option__check {
-    visibility: visible;
-  }
-
-  .option--hover:not(.option--current) .option__check {
-    color: var(--syn-option-check-color-hover);
-  }
-
-  .option__prefix,
-  .option__suffix {
-    align-items: center;
-    display: flex;
-    flex: 0 0 auto;
-  }
-
-  /* Use larger spacing between icons and content */
-  .option__prefix::slotted(*) {
-    margin-inline-end: var(--syn-spacing-small);
-  }
-
-  .option__suffix::slotted(*) {
-    margin-inline-start: var(--syn-spacing-small);
-  }
-
-  /* Set correct icon size when someone uses syn-icon in the slots */
-  .option__prefix::slotted(syn-icon),
-  .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color);
-    font-size: var(--option-icon-size, var(--syn-spacing-large));
-  }
-
-  .option--hover .option__prefix::slotted(syn-icon),
-  .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover);
-  }
-
-  .option--current .option__prefix::slotted(syn-icon),
-  .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active);
-  }
-
-  /* This is needed for the highlight styling of the options in syn-combobox */
-  .option__label::slotted(.syn-highlight-style) {
-    background-color: transparent;
-    color: unset;
-    font: var(--syn-body-medium-bold);
-  }
-
-  @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) .option {
-      outline: dashed 1px SelectedItem;
-      outline-offset: -1px;
-    }
-  }
-`;

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

@@ -1,191 +0,0 @@
-/* eslint-disable */
-import { classMap } from 'lit/directives/class-map.js';
-import { html } from 'lit';
-import { LocalizeController } from '../../utilities/localize.js';
-import { property, query, state } from 'lit/decorators.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 styles from './option.styles.js';
-import { delimiterToWhiteSpace } from './utility.js';
-import type { CSSResultGroup } from 'lit';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary Options define the selectable items within various form controls such as [select](/components/select).
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- *
- * @slot - The option'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.
- *
- * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
- * @csspart base - The component's base wrapper.
- * @csspart label - The option's label.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
- */
-@enableDefaultSettings('SynOption')
-export default class SynOption extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles];
-  static dependencies = { 'syn-icon': SynIcon };
-
-  // @ts-expect-error - Controller is currently unused
-  private readonly localize = new LocalizeController(this);
-
-  // #1036: Needed to store the original value before any delimiter processing
-  private originalValue: string | number = '';
-  private isInitialized = false;
-
-  @query('.option__label') defaultSlot: HTMLSlotElement;
-
-  // the delimiter used to separate multiple values in a select
-  // This is provided by the wrapping syn-select
-  @state() delimiter = ' ';
-
-  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
-  @state() selected = false; // the option is selected and has aria-selected="true"
-  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
-
-  /**
-   * The option's value. When selected, the containing form control will receive this value. The value must be unique
-   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing
-   * multiple values.
-   */
-  @property({ reflect: true }) value: string | number = '';
-
-  /** Draws the option in a disabled state, preventing selection. */
-  @property({ type: Boolean, reflect: true }) disabled = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute('role', 'option');
-    this.setAttribute('aria-selected', 'false');
-  }
-
-  private handleDefaultSlotChange() {
-    if (this.isInitialized) {
-      // When the label changes, tell the controller to update
-      this.triggerParentDefaultSlotChange();
-    } else {
-      this.isInitialized = true;
-    }
-  }
-
-  private handleMouseEnter() {
-    this.hasHover = true;
-  }
-
-  private handleMouseLeave() {
-    this.hasHover = false;
-  }
-
-  @watch('disabled')
-  handleDisabledChange() {
-    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-  }
-
-  @watch('selected')
-  handleSelectedChange() {
-    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
-  }
-
-  @watch('delimiter')
-  handleDelimiterChange() {
-    this.sanitizeValueForDelimiter();
-  }
-
-  @watch('value')
-  handleValueChange() {
-    this.originalValue = this.value;
-    this.sanitizeValueForDelimiter();
-  }
-
-  /**
-   * Replaces any occurrences of the delimiter in the option's original value with underscores.
-   */
-  sanitizeValueForDelimiter() {
-    let value = this.originalValue;
-    if (typeof value === 'number') {
-      return;
-    }
-
-    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers
-    // instead of requiring them to cast the value to a string.
-    if (typeof value !== 'string') {
-      value = String(value);
-    }
-
-    const { delimiter } = this;
-
-    if (value.includes(delimiter)) {
-      console.error(`Option values cannot include "${delimiter}". All occurrences of "${delimiter}" have been replaced with "_".`, this);
-      value = delimiterToWhiteSpace(value, this.delimiter);
-    }
-    this.value = value;
-    // #1056 We need to trigger the parent component's default slot change, so it can update its value selection
-    this.triggerParentDefaultSlotChange();
-  }
-
-  /** Returns a plain text label based on the option's content. */
-  getTextLabel() {
-    const nodes = this.childNodes;
-    let label = '';
-
-    [...nodes].forEach(node => {
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        if (!(node as HTMLElement).hasAttribute('slot')) {
-          label += (node as HTMLElement).textContent;
-        }
-      }
-
-      if (node.nodeType === Node.TEXT_NODE) {
-        label += node.textContent;
-      }
-    });
-
-    return label.trim();
-  }
-
-  private triggerParentDefaultSlotChange() {
-    customElements.whenDefined('syn-combobox').then(() => {
-      const controller = this.closest('syn-combobox');
-      if (controller) {
-        controller.handleDefaultSlotChange();
-      }
-    });
-    customElements.whenDefined('syn-select').then(() => {
-      const controller = this.closest('syn-select');
-      if (controller) {
-        controller.handleDefaultSlotChange();
-      }
-    });
-  }
-
-  render() {
-    return html`
-      <div
-        part="base"
-        class=${classMap({
-          option: true,
-          'option--current': this.current,
-          'option--disabled': this.disabled,
-          'option--selected': this.selected,
-          'option--hover': this.hasHover
-        })}
-        @mouseenter=${this.handleMouseEnter}
-        @mouseleave=${this.handleMouseLeave}
-      >
-        <syn-icon part="checked-icon" class="option__check" name="check" library="system" aria-hidden="true"></syn-icon>
-        <slot part="prefix" name="prefix" class="option__prefix"></slot>
-        <slot part="label" class="option__label" @slotchange=${this.handleDefaultSlotChange}></slot>
-        <slot part="suffix" name="suffix" class="option__suffix"></slot>
-      </div>
-    `;
-  }
-}

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

@@ -1,71 +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 Options define the selectable items within various form controls such as [select](/components/select).
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- *
- * @slot - The option'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.
- *
- * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
- * @csspart base - The component's base wrapper.
- * @csspart label - The option's label.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart suffix - The container that wraps the suffix.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/option/option.js';
-
-import type { SynOption } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynOption>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* The option's value.
-* When selected, the containing form control will receive this value.
-* The value must be unique
-from other options in the same group.
-* Values may not contain spaces, as spaces are used as delimiters when listing
-multiple values.
- */
-  value?: SynOption['value'];
-
-  /**
-   * Draws the option in a disabled state, preventing selection.
-   */
-  disabled?: SynOption['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-option v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-option>
-</template>

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

@@ -1,201 +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 { SynPagination } from '@synergy-design-system/components';
-import type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
-import type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/pagination/pagination.js';
-
-/**
- * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs
- * @status stable
- * @since 3.12.0
- *
- * @event syn-pagination-page-changed - Emitted when the current page changes
- * @event syn-pagination-page-size-changed - Emitted when the page size changes
- *
- * @csspart base - The component's base wrapper.
- * @csspart divider - The divider element displayed at the top of the pagination component.
- * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.
- * @csspart page-size-select - The page size select element.
- * @csspart page-item-summary - The text element displaying the current page item range and total items.
- * @csspart page-input-section - The section containing the page number input and total pages display.
- * @csspart page-input - The page number input element.
- * @csspart navigation - The pagination navigation element.
- * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).
- *
- * @accessibility
- * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.
- * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.
- * Example: `<syn-pagination aria-label="Search results pagination"></syn-pagination>`
- */
-@Component({
-  selector: 'syn-pagination',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynPaginationComponent {
-  public nativeElement: SynPagination;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener(
-      'syn-pagination-page-changed',
-      (e: SynPaginationPageChangedEvent) => {
-        this.synPaginationPageChangedEvent.emit(e);
-      },
-    );
-    this.nativeElement.addEventListener(
-      'syn-pagination-page-size-changed',
-      (e: SynPaginationPageSizeChangedEvent) => {
-        this.synPaginationPageSizeChangedEvent.emit(e);
-      },
-    );
-  }
-
-  /**
-   * When true, a divider is displayed at the top of the pagination component.
-   */
-  @Input()
-  set divider(v: '' | SynPagination['divider']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.divider = v === '' || v),
-    );
-  }
-  get divider(): SynPagination['divider'] {
-    return this.nativeElement.divider;
-  }
-
-  /**
-   * When true, the pagination controls are disabled and non-interactive.
-   */
-  @Input()
-  set disabled(v: '' | SynPagination['disabled']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.disabled = v === '' || v),
-    );
-  }
-  get disabled(): SynPagination['disabled'] {
-    return this.nativeElement.disabled;
-  }
-
-  /**
-   * The size of the pagination controls.
-   */
-  @Input()
-  set size(v: SynPagination['size']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
-  }
-  get size(): SynPagination['size'] {
-    return this.nativeElement.size;
-  }
-
-  /**
-* The current page number.
-* The default value is 1.
-The component will emit a `syn-pagination-page-changed` event whenever the page changes, allowing you to respond to page changes in your application.
- */
-  @Input()
-  set currentPage(v: SynPagination['currentPage']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.currentPage = v));
-  }
-  get currentPage(): SynPagination['currentPage'] {
-    return this.nativeElement.currentPage;
-  }
-
-  /**
-* The number of items to display per page.
-* The default value is 25.
-The component will emit a `syn-pagination-page-size-changed` event whenever the page size changes, allowing you to respond to page size changes in your application.
- */
-  @Input()
-  set pageSize(v: SynPagination['pageSize']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.pageSize = v));
-  }
-  get pageSize(): SynPagination['pageSize'] {
-    return this.nativeElement.pageSize;
-  }
-
-  /**
-* An array of numbers representing the available options for the number of items to display per page.
-* The default value is [10, 25, 50, 100].
-The component will use this array to populate the rows-per-page selector, allowing users to choose from the specified options.
- */
-  @Input()
-  set pageSizeOptions(v: SynPagination['pageSizeOptions']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.pageSizeOptions = v),
-    );
-  }
-  get pageSizeOptions(): SynPagination['pageSizeOptions'] {
-    return this.nativeElement.pageSizeOptions;
-  }
-
-  /**
-   * Total amount of items.
-   * The component will use this value to calculate the total number of pages based on the selected rows per page.
-   */
-  @Input()
-  set totalItems(v: SynPagination['totalItems']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.totalItems = v));
-  }
-  get totalItems(): SynPagination['totalItems'] {
-    return this.nativeElement.totalItems;
-  }
-
-  /**
-* The pagination variant to use.
-* The "full" variant includes comprehensive controls for navigating between pages and adjusting the number of displayed rows,
-while the "compact" variant offers a streamlined interface with essential navigation controls.
-The default value is "full".
- */
-  @Input()
-  set variant(v: SynPagination['variant']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
-  }
-  get variant(): SynPagination['variant'] {
-    return this.nativeElement.variant;
-  }
-
-  /**
-   * An accessible label for the navigation landmark.
-   * Customize for multiple paginations on a page.
-   */
-  @Input()
-  set ariaLabel(v: SynPagination['ariaLabel']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.ariaLabel = v));
-  }
-  get ariaLabel(): SynPagination['ariaLabel'] {
-    return this.nativeElement.ariaLabel;
-  }
-
-  /**
-   * Emitted when the current page changes
-   */
-  @Output() synPaginationPageChangedEvent =
-    new EventEmitter<SynPaginationPageChangedEvent>();
-
-  /**
-   * Emitted when the page size changes
-   */
-  @Output() synPaginationPageSizeChangedEvent =
-    new EventEmitter<SynPaginationPageSizeChangedEvent>();
-}
-
-export type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
-export type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';

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

@@ -1,56 +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/pagination/pagination.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
-import type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-pagination';
-Component.define('syn-pagination');
-
-/**
- * @summary <syn-pagination /> provides page navigation, direct page input, and page-size selection for large data sets.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-pagination--docs
- * @status stable
- * @since 3.12.0
- *
- * @event syn-pagination-page-changed - Emitted when the current page changes
- * @event syn-pagination-page-size-changed - Emitted when the page size changes
- *
- * @csspart base - The component's base wrapper.
- * @csspart divider - The divider element displayed at the top of the pagination component.
- * @csspart page-size-select-wrapper - The wrapper element containing the page size select and page item summary.
- * @csspart page-size-select - The page size select element.
- * @csspart page-item-summary - The text element displaying the current page item range and total items.
- * @csspart page-input-section - The section containing the page number input and total pages display.
- * @csspart page-input - The page number input element.
- * @csspart navigation - The pagination navigation element.
- * @csspart navigation-action - The individual navigation action buttons (first, previous, next, last).
- *
- * @accessibility
- * The entire component is wrapped in a semantic `<nav>` landmark with an `aria-label` for screen reader accessibility.
- * Use the `aria-label` attribute to provide a unique, descriptive label when multiple pagination controls exist on the page.
- * Example: `<syn-pagination aria-label="Search results pagination"></syn-pagination>`
- */
-export const SynPagination = createComponent({
-  displayName: 'SynPagination',
-  elementClass: Component,
-  events: {
-    onSynPaginationPageChanged:
-      'syn-pagination-page-changed' as EventName<SynPaginationPageChangedEvent>,
-    onSynPaginationPageSizeChanged:
-      'syn-pagination-page-size-changed' as EventName<SynPaginationPageSizeChangedEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynPaginationPageChangedEvent } from '@synergy-design-system/components';
-export type { SynPaginationPageSizeChangedEvent } from '@synergy-design-system/components';