@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,204 +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 Buttons represent actions that are available to the user.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon
- * @dependency syn-spinner
- *
- * @event syn-blur - Emitted when the button loses focus.
- * @event syn-focus - Emitted when the button gains focus.
- * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- *
- * @slot - The button's label.
- * @slot prefix - A presentational prefix icon or similar element.
- * @slot suffix - A presentational suffix icon or similar element.
- *
- * @csspart base - The component's base wrapper.
- * @csspart prefix - The container that wraps the prefix.
- * @csspart label - The button's label.
- * @csspart suffix - The container that wraps the suffix.
- * @csspart caret - The button's caret icon, an `<syn-icon>` element.
- * @csspart spinner - The spinner that shows when the button is in the loading state.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/button/button.js';
-
-import type { SynBlurEvent } from '@synergy-design-system/components';
-import type { SynFocusEvent } from '@synergy-design-system/components';
-import type { SynInvalidEvent } from '@synergy-design-system/components';
-import type { SynButton } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynButton>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  title?: SynButton['title'];
-
-  /**
-   * The button's theme variant.
-   */
-  variant?: SynButton['variant'];
-
-  /**
-   * The button's size.
-   */
-  size?: SynButton['size'];
-
-  /**
-   * Draws the button with a caret.
-   * Used to indicate that the button triggers a dropdown menu or similar behavior.
-   */
-  caret?: SynButton['caret'];
-
-  /**
-   * Disables the button.
-   */
-  disabled?: SynButton['disabled'];
-
-  /**
-   * Draws the button in a loading state.
-   */
-  loading?: SynButton['loading'];
-
-  /**
-* The type of button.
-* Note that the default value is `button` instead of `submit`, which is opposite of how native
-`<button>` elements behave.
-* When the type is `submit`, the button will submit the surrounding form.
- */
-  type?: SynButton['type'];
-
-  /**
-* The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
-This attribute is ignored when `href` is present.
- */
-  name?: SynButton['name'];
-
-  /**
-* The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
-button is the submitter.
-* This attribute is ignored when `href` is present.
- */
-  value?: SynButton['value'];
-
-  /**
-   * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
-   */
-  href?: SynButton['href'];
-
-  /**
-   * Tells the browser where to open the link.
-   * Only used when `href` is present.
-   */
-  target?: SynButton['target'];
-
-  /**
-* When using `href`, this attribute will map to the underlying link's `rel` attribute.
-* Unlike regular links, the
-default is `noreferrer noopener` to prevent security exploits.
-* However, if you're using `target` to point to a
-specific tab/window, this will prevent that from working correctly.
-* You can remove or change the default value by
-setting the attribute to an empty string or a value of your choice, respectively.
- */
-  rel?: SynButton['rel'];
-
-  /**
-   * Tells the browser to download the linked file as this filename.
-   * Only used when `href` is present.
-   */
-  download?: SynButton['download'];
-
-  /**
-* The "form owner" to associate the button with.
-* If omitted, the closest containing form will be used instead.
-* The
-value of this attribute must be an id of a form in the same document or shadow root as the button.
- */
-  form?: SynButton['form'];
-
-  /**
-   * Used to override the form owner's `action` attribute.
-   */
-  formAction?: SynButton['formAction'];
-
-  /**
-   * Used to override the form owner's `enctype` attribute.
-   */
-  formEnctype?: SynButton['formEnctype'];
-
-  /**
-   * Used to override the form owner's `method` attribute.
-   */
-  formMethod?: SynButton['formMethod'];
-
-  /**
-   * Used to override the form owner's `novalidate` attribute.
-   */
-  formNoValidate?: SynButton['formNoValidate'];
-
-  /**
-   * Used to override the form owner's `target` attribute.
-   */
-  formTarget?: SynButton['formTarget'];
-}>();
-
-// 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 button loses focus.
-   */
-  'syn-blur': [e: SynBlurEvent];
-
-  /**
-   * Emitted when the button gains focus.
-   */
-  'syn-focus': [e: SynFocusEvent];
-
-  /**
-   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
-   */
-  'syn-invalid': [e: SynInvalidEvent];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynBlurEvent } from '@synergy-design-system/components';
-export type { SynFocusEvent } from '@synergy-design-system/components';
-export type { SynInvalidEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-button
-    @syn-blur="$emit('syn-blur', $event)"
-    @syn-focus="$emit('syn-focus', $event)"
-    @syn-invalid="$emit('syn-invalid', $event)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-button>
-</template>

package/metadata/packages/components/components/syn-button-group/component.angular.ts

@@ -1,79 +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 { SynButtonGroup } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/button-group/button-group.js';
-
-/**
- * @summary Button groups can be used to group related buttons into sections.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
- * @status stable
- * @since 2.0
- *
- * @slot - One or more `<syn-button>` elements to display in the button group.
- *
- * @csspart base - The component's base wrapper.
- */
-@Component({
-  selector: 'syn-button-group',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynButtonGroupComponent {
-  public nativeElement: SynButtonGroup;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-* A label to use for the button group.
-* This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended.
- */
-  @Input()
-  set label(v: SynButtonGroup['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynButtonGroup['label'] {
-    return this.nativeElement.label;
-  }
-
-  /**
-   * The button-groups size.
-   * This affects all buttons within the group.
-   */
-  @Input()
-  set size(v: SynButtonGroup['size']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
-  }
-  get size(): SynButtonGroup['size'] {
-    return this.nativeElement.size;
-  }
-
-  /**
-   * The button-group's theme variant.
-   * This affects all buttons within the group.
-   */
-  @Input()
-  set variant(v: SynButtonGroup['variant']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
-  }
-  get variant(): SynButtonGroup['variant'] {
-    return this.nativeElement.variant;
-  }
-}

package/metadata/packages/components/components/syn-button-group/component.custom.styles.ts

@@ -1,5 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* Write custom CSS here */
-`;

package/metadata/packages/components/components/syn-button-group/component.react.ts

@@ -1,29 +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/button-group/button-group.component.js';
-
-const tagName = 'syn-button-group';
-Component.define('syn-button-group');
-
-/**
- * @summary Button groups can be used to group related buttons into sections.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
- * @status stable
- * @since 2.0
- *
- * @slot - One or more `<syn-button>` elements to display in the button group.
- *
- * @csspart base - The component's base wrapper.
- */
-export const SynButtonGroup = createComponent({
-  displayName: 'SynButtonGroup',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

package/metadata/packages/components/components/syn-button-group/component.styles.ts

@@ -1,14 +0,0 @@
-/* eslint-disable */
-import { css } from 'lit';
-
-export default css`
-	/* stylelint-disable */
-  :host {
-    display: inline-block;
-  }
-
-  .button-group {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-`;

package/metadata/packages/components/components/syn-button-group/component.ts

@@ -1,171 +0,0 @@
-/* eslint-disable */
-import { html } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import componentStyles from '../../styles/component.styles.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import styles from './button-group.styles.js';
-import customStyles from './button-group.custom.styles.js';
-import type { CSSResultGroup } from 'lit';
-import type SynButton from '../button/button.component.js';
-import type SynRadioButton from '../radio-button/radio-button.component.js';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary Button groups can be used to group related buttons into sections.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
- * @status stable
- * @since 2.0
- *
- * @slot - One or more `<syn-button>` elements to display in the button group.
- *
- * @csspart base - The component's base wrapper.
- */
-@enableDefaultSettings('SynButtonGroup')
-export default class SynButtonGroup extends SynergyElement {
-  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
-
-  @query('slot') defaultSlot: HTMLSlotElement;
-
-  @state() disableRole = false;
-
-  /**
-   * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive
-   * devices when interacting with the control and is strongly recommended.
-   */
-  @property() label = '';
-
-  /** The button-groups size. This affects all buttons within the group. */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  /** The button-group's theme variant. This affects all buttons within the group. */
-  @property({ reflect: true }) variant: 'filled' | 'outline' = 'outline';
-
-  private mutationObserver: MutationObserver;
-
-  private handleFocus(event: Event) {
-    const button = findButton(event.target as HTMLElement);
-    button?.toggleAttribute('data-syn-button-group__button--focus', true);
-  }
-
-  private handleBlur(event: Event) {
-    const button = findButton(event.target as HTMLElement);
-    button?.toggleAttribute('data-syn-button-group__button--focus', false);
-  }
-
-  private handleMouseOver(event: Event) {
-    const button = findButton(event.target as HTMLElement);
-    button?.toggleAttribute('data-syn-button-group__button--hover', true);
-  }
-
-  private handleMouseOut(event: Event) {
-    const button = findButton(event.target as HTMLElement);
-    button?.toggleAttribute('data-syn-button-group__button--hover', false);
-  }
-
-  private handleSlotChange() {
-    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })] as HTMLElement[];
-
-    slottedElements.forEach(el => {
-      const index = slottedElements.indexOf(el);
-      const button = findButton(el) as SynButton | SynRadioButton;
-
-      if (button) {
-        button.size = this.size;
-
-        if (button.tagName.toLowerCase() === 'syn-button') {
-          (button as SynButton).variant = this.variant;
-        }
-
-        button.toggleAttribute('data-syn-button-group__button', true);
-        button.toggleAttribute('data-syn-button-group__button--first', index === 0);
-        button.toggleAttribute('data-syn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
-        button.toggleAttribute('data-syn-button-group__button--last', index === slottedElements.length - 1);
-        button.toggleAttribute(
-          'data-syn-button-group__button--radio',
-          button.tagName.toLowerCase() === 'syn-radio-button'
-        );
-      }
-    });
-  }
-
-  firstUpdated() {
-    const startObserving = () => {
-      this.mutationObserver.observe(this, {
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['size', 'variant'],
-      });
-    };
-
-    this.mutationObserver = new MutationObserver((entries) => {
-      // Temporarily disconnect to prevent infinite loop
-      this.mutationObserver.disconnect();
-
-      // Check if the button-group itself changed or its children
-      const buttonGroupChanged = entries.some(entry => entry.target === this);
-      const childrenChanged = entries.some(entry => entry.target !== this);
-
-      if (childrenChanged) {
-        // Handle child button changes (existing logic)
-        entries
-          .filter(entry => entry.target !== this)
-          .forEach(entry => {
-            const target = entry.target as HTMLElement;
-            const button = findButton(target) as SynButton | SynRadioButton;
-
-            if (button) {
-              // Unset the size property to allow button-group to control it
-              button.size = undefined as any;
-
-              // Also unset variant for syn-buttons
-              if (button.tagName.toLowerCase() === 'syn-button') {
-                (button as SynButton).variant = undefined as any;
-              }
-            }
-          });
-      }
-
-      // Handle both cases: button-group changes and child changes
-      if (buttonGroupChanged || childrenChanged) {
-        this.handleSlotChange();
-      }
-      
-      // Reconnect observer after changes are done
-      this.updateComplete.then(() => {
-        startObserving();
-      });
-    });
-
-    startObserving();
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.mutationObserver?.disconnect();
-  }
-
-  render() {
-    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events
-    return html`
-      <div
-        part="base"
-        class="button-group"
-        role="${this.disableRole ? 'presentation' : 'group'}"
-        aria-label=${this.label}
-        @focusout=${this.handleBlur}
-        @focusin=${this.handleFocus}
-        @mouseover=${this.handleMouseOver}
-        @mouseout=${this.handleMouseOut}
-      >
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-  }
-}
-
-function findButton(el: HTMLElement) {
-  const selector = 'syn-button, syn-radio-button';
-
-  // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)
-  return el.closest(selector) ?? el.querySelector(selector);
-}

package/metadata/packages/components/components/syn-button-group/component.vue

@@ -1,67 +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 Button groups can be used to group related buttons into sections.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
- * @status stable
- * @since 2.0
- *
- * @slot - One or more `<syn-button>` elements to display in the button group.
- *
- * @csspart base - The component's base wrapper.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/button-group/button-group.js';
-
-import type { SynButtonGroup } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynButtonGroup>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-* A label to use for the button group.
-* This won't be displayed on the screen, but it will be announced by assistive
-devices when interacting with the control and is strongly recommended.
- */
-  label?: SynButtonGroup['label'];
-
-  /**
-   * The button-groups size.
-   * This affects all buttons within the group.
-   */
-  size?: SynButtonGroup['size'];
-
-  /**
-   * The button-group's theme variant.
-   * This affects all buttons within the group.
-   */
-  variant?: SynButtonGroup['variant'];
-}>();
-
-// 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-button-group v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-button-group>
-</template>

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

@@ -1,83 +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 { SynCard } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/card/card.js';
-
-/**
- * @summary Cards can be used to group related subjects in a container.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
- * @status stable
- * @since 2.0
- *
- * @slot - The card's main content.
- * @slot header - An optional header for the card.
- * @slot footer - An optional footer for the card.
- * @slot image - An optional image to render at the start of the card.
- *
- * @csspart base - The component's base wrapper.
- * @csspart image - The container that wraps the card's image.
- * @csspart header - The container that wraps the card's header.
- * @csspart body - The container that wraps the card's main content.
- * @csspart footer - The container that wraps the card's footer.
- *
- * @cssproperty --border-color - The card's border color, including borders that occur inside the card.
- * @cssproperty --border-radius - The border radius for the card's edges.
- * @cssproperty --border-width - The width of the card's borders.
- * @cssproperty --padding - The padding to use for the card's sections.
- */
-@Component({
-  selector: 'syn-card',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynCardComponent {
-  public nativeElement: SynCard;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-   * Draws the card with a shadow.
-   * Can be used when the card has to stand out visually, for example in dashboards.
-   */
-  @Input()
-  set shadow(v: '' | SynCard['shadow']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.shadow = v === '' || v),
-    );
-  }
-  get shadow(): SynCard['shadow'] {
-    return this.nativeElement.shadow;
-  }
-
-  /**
-   * Draws the card with sharp edges.
-   * Can be used e.g.
-   * when nesting multiple syn-cards to create hierarchy.
-   */
-  @Input()
-  set sharp(v: '' | SynCard['sharp']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.sharp = v === '' || v),
-    );
-  }
-  get sharp(): SynCard['sharp'] {
-    return this.nativeElement.sharp;
-  }
-}