@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,91 +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 Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - The tab's label.
- *
- * @event syn-close - Emitted when the tab is closable and the close button is activated.
- *
- * @csspart base - The component's base wrapper.
- * @csspart close-button - The close button, an `<syn-icon-button>`.
- * @csspart close-button__base - The close button's exported `base` part.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/tab/tab.js';
-
-import type { SynCloseEvent } from '@synergy-design-system/components';
-import type { SynTab } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynTab>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The name of the tab panel this tab is associated with.
-   * The panel must be located in the same tab group.
-   */
-  panel?: SynTab['panel'];
-
-  /**
-   * Draws the tab in an active state.
-   */
-  active?: SynTab['active'];
-
-  /**
-   * Makes the tab closable and shows a close button.
-   */
-  closable?: SynTab['closable'];
-
-  /**
-   * Disables the tab and prevents selection.
-   */
-  disabled?: SynTab['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'),
-  ),
-);
-
-// Map events
-defineEmits<{
-  /**
-   * Emitted when the tab is closable and the close button is activated.
-   */
-  'syn-close': [e: SynCloseEvent];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynCloseEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-tab
-    @syn-close="$emit('syn-close', $event)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-tab>
-</template>

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

@@ -1,166 +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 { SynTabGroup } from '@synergy-design-system/components';
-import type { SynTabShowEvent } from '@synergy-design-system/components';
-import type { SynTabHideEvent } from '@synergy-design-system/components';
-import '@synergy-design-system/components/components/tab-group/tab-group.js';
-
-/**
- * @summary Tab groups organize content into a container that shows one section at a time.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
- * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
- *
- * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
- * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
- *
- * @csspart base - The component's base wrapper.
- * @csspart nav - The tab group's navigation container where tabs are slotted in.
- * @csspart tabs - The container that wraps the tabs.
- * @csspart active-tab-indicator - The line that highlights the currently selected tab.
- * @csspart body - The tab group's body where tab panels are slotted in.
- * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
- * @csspart scroll-button--start - The starting scroll button.
- * @csspart scroll-button--end - The ending scroll button.
- * @csspart scroll-button__base - The scroll button's exported `base` part.
- *
- * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
- * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
- * @cssproperty --indicator-width - The width of the active tab indicator.
- */
-@Component({
-  selector: 'syn-tab-group',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynTabGroupComponent {
-  public nativeElement: SynTabGroup;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-    this.nativeElement.addEventListener(
-      'syn-tab-show',
-      (e: SynTabShowEvent) => {
-        this.synTabShowEvent.emit(e);
-      },
-    );
-    this.nativeElement.addEventListener(
-      'syn-tab-hide',
-      (e: SynTabHideEvent) => {
-        this.synTabHideEvent.emit(e);
-      },
-    );
-  }
-
-  /**
-   * The placement of the tabs.
-   */
-  @Input()
-  set placement(v: SynTabGroup['placement']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.placement = v));
-  }
-  get placement(): SynTabGroup['placement'] {
-    return this.nativeElement.placement;
-  }
-
-  /**
-* When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
-* When set to
-manual, the tab will receive focus but will not show until the user presses spacebar or enter.
- */
-  @Input()
-  set activation(v: SynTabGroup['activation']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.activation = v));
-  }
-  get activation(): SynTabGroup['activation'] {
-    return this.nativeElement.activation;
-  }
-
-  /**
-   * Disables the scroll arrows that appear when tabs overflow.
-   */
-  @Input()
-  set noScrollControls(v: '' | SynTabGroup['noScrollControls']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.noScrollControls = v === '' || v),
-    );
-  }
-  get noScrollControls(): SynTabGroup['noScrollControls'] {
-    return this.nativeElement.noScrollControls;
-  }
-
-  /**
-   * Draws the tab group as a contained element.
-   */
-  @Input()
-  set contained(v: '' | SynTabGroup['contained']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.contained = v === '' || v),
-    );
-  }
-  get contained(): SynTabGroup['contained'] {
-    return this.nativeElement.contained;
-  }
-
-  /**
-   * Draws the tab group with edges instead of roundings.
-   * Takes only effect if used with the 'contained' property
-   */
-  @Input()
-  set sharp(v: '' | SynTabGroup['sharp']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.sharp = v === '' || v),
-    );
-  }
-  get sharp(): SynTabGroup['sharp'] {
-    return this.nativeElement.sharp;
-  }
-
-  /**
-   * Prevent scroll buttons from being hidden when inactive.
-   */
-  @Input()
-  set fixedScrollControls(v: '' | SynTabGroup['fixedScrollControls']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.fixedScrollControls = v === '' || v),
-    );
-  }
-  get fixedScrollControls(): SynTabGroup['fixedScrollControls'] {
-    return this.nativeElement.fixedScrollControls;
-  }
-
-  /**
-   * Emitted when a tab is shown.
-   * The payload of the event returns the "panel" attribute of the shown tab.
-   */
-  @Output() synTabShowEvent = new EventEmitter<SynTabShowEvent>();
-
-  /**
-   * Emitted when a tab is hidden.
-   * The payload of the event returns the "panel" attribute of the hidden tab.
-   */
-  @Output() synTabHideEvent = new EventEmitter<SynTabHideEvent>();
-}
-
-export type { SynTabShowEvent } from '@synergy-design-system/components';
-export type { SynTabHideEvent } from '@synergy-design-system/components';

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

@@ -1,218 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  /* stylelint-disable no-descending-specificity */
-  /* Write custom CSS here */
-  :host {
-    --track-width: var(--syn-border-width-small);
-    --track-color: var(--syn-panel-border-color);
-    --indicator-width: var(--syn-border-width-x-large);
-    --indicator-color: var(--syn-interactive-emphasis-color);
-  }
-
-  /* we need to augment the size of the height of the tab-group__nav to make the focus outline and the hiding white border visible of the tab because of overflow-x value  */
-  .tab-group--top .tab-group__body {
-    position: relative;
-    top: calc(-1 * var(--syn-panel-border-width));
-  }
-
-  .tab-group--top .tab-group__nav {
-    padding: 0 0 var(--syn-panel-border-width) 0;
-  }
-
-  /**
-   * Indicator
-   */
-  .tab-group--top .tab-group__indicator {
-    border-bottom: solid var(--indicator-width) var(--indicator-color);
-  }
-
-  .tab-group--start .tab-group__indicator {
-    border-right: solid var(--indicator-width) var(--indicator-color);
-  }
-
-  .tab-group--end .tab-group__indicator {
-    border-inline-start: solid var(--indicator-width) var(--indicator-color);
-  }
-
-  /**
-   * Panel
-   */
-  .tab-group--top ::slotted(syn-tab-panel) {
-    --padding: var(--syn-spacing-large) 0;
-  }
-
-  .tab-group--start ::slotted(syn-tab-panel) {
-    --padding: 0 var(--syn-spacing-large);
-  }
-
-  .tab-group--end ::slotted(syn-tab-panel) {
-    --padding: 0 var(--syn-spacing-large);
-  }
-
-  /**
-   * Contained styling
-   */ 
-  .tab-group--contained .tab-group__tabs {
-    border: none;
-  }
-
-  .tab-group--contained ::slotted(syn-tab-panel) {
-    --padding: var(--syn-spacing-large);
-
-    background-color: var(--syn-panel-background-color);
-    border: var(--syn-panel-border-width) solid var(--syn-panel-border-color);
-    border-radius: var(--syn-border-radius-medium);
-  }
-
-  /* Stretch the tab panel container for non-top placements, otherwise the borders are not drawn correctly */
-  .tab-group--contained:not(.tab-group--top) ::slotted(syn-tab-panel) {
-    height: 100%;
-  }
-
-  /* Draw the correct border radii of the panel depending on the placement and direction */
-  .tab-group--top.tab-group--contained:not(.tab-group--sharp):not(.tab-group--has-scroll-controls) ::slotted(syn-tab-panel:first-of-type),
-  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {
-    border-start-start-radius: var(--syn-border-radius-none);
-  }
-
-  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {
-    border-end-start-radius: var(--syn-border-radius-none);
-  }
-
-  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:last-of-type) {
-    border-end-end-radius: var(--syn-border-radius-none);
-  }
-
-  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab-panel:first-of-type) {
-    border-start-end-radius: var(--syn-border-radius-none);
-  }
-
-  .tab-group--contained .tab-group__indicator {
-    /* Remove the animation of the indicator */
-    transition: none;
-    
-    /* Needed, otherwise the indicator is hidden under the background of the tab */
-    z-index: 2;
-  }
-
-  /* Contained styling for tabs */
-  .tab-group--contained ::slotted(syn-tab) {
-    --background-color: var(--syn-panel-background-color);
-    --border-width: var(--syn-panel-border-width);
-
-    position: relative;
-    z-index: 1;
-  }
-
-  /* Top */
-  .tab-group--top.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
-    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none);
-  }
-
-  .tab-group--top.tab-group--contained ::slotted(syn-tab[active]) {
-    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);
-
-    /* We need to move the tab down, so the bottom border, hides parts of the border of the tab-group */
-    top: var(--syn-panel-border-width);
-  }
-
-  .tab-group--top.tab-group--contained ::slotted(syn-tab:not([active])) {
-    /*  We need to move down the non-active tabs also, so we don't get jumping of the tab text content */
-    top: var(--syn-panel-border-width);
-  }
-
-  /* Start & End with rtl */
-  .tab-group--start.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),
-  .tab-group--end.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
-    --border-radius: var(--syn-border-radius-medium) var(--syn-border-radius-none) var(--syn-border-radius-none) var(--syn-border-radius-medium);
-  }
-
-  .tab-group--start.tab-group--contained ::slotted(syn-tab[active]),
-  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {
-    --border-color: var(--syn-panel-border-color) var(--syn-panel-background-color) var(--syn-panel-border-color)  var(--syn-panel-border-color) ;
-
-    /* We need to move the tab right, so the right border, hides parts of the border of the tab-group */
-    left: var(--syn-panel-border-width);
-    right: unset;
-  }
-
-  .tab-group--start.tab-group--contained ::slotted(syn-tab:not([active])),
-  .tab-group--end.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {
-    /*  We need to move right the non-active tabs also, so we don't get jumping of the tab text content */
-    left: var(--syn-panel-border-width);
-    right: unset;
-  }
-
-  /* End & Start with rtl */
-  .tab-group--end.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab),
-  .tab-group--start.tab-group--rtl.tab-group--contained:not(.tab-group--sharp) ::slotted(syn-tab) {
-    --border-radius: var(--syn-border-radius-none) var(--syn-border-radius-medium) var(--syn-border-radius-medium) var(--syn-border-radius-none);
-  }
-
-  .tab-group--end.tab-group--contained ::slotted(syn-tab[active]),
-  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab[active]) {
-    --border-color: var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-border-color) var(--syn-panel-background-color);
-
-    /* We need to move the tab left, so the left border, hides parts of the border of the tab-group */
-    left: unset;
-    right: var(--syn-panel-border-width);
-  }
-
-  .tab-group--end.tab-group--contained ::slotted(syn-tab:not([active])),
-  .tab-group--start.tab-group--rtl.tab-group--contained ::slotted(syn-tab:not([active])) {
-    /*  We need to move left the non-active tabs also, so we don't get jumping of the tab text content */
-    left: unset;
-    right: var(--syn-panel-border-width);
-  }
-
-
-  /**
-   * Sharp styling
-   */
-  .tab-group--sharp ::slotted(syn-tab-panel) {
-    border-radius: var(--syn-border-radius-none);
-  }
-
-
-  /**
-   * Scroll buttons
-   */
-  .tab-group--has-scroll-controls .tab-group__nav-container {
-    padding: 0 calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
-  }
-
-  .tab-group__scroll-button {
-    /* we need to move the scroll buttons to the top, to align the borders with the border of the tab-group--nav  */
-    bottom: var(--syn-panel-border-width);
-    color: var(--syn-interactive-quiet-color);
-    font-size: var(--syn-font-size-medium);
-    width: calc(var(--syn-spacing-x-large) + var( --syn-spacing-2x-small));
-  }
-
-  .tab-group__scroll-button::part(base) {
-    padding: calc(var(--syn-spacing-small) - var(--syn-spacing-3x-small));
-  }
-
-  .tab-group--has-scroll-controls:not(.tab-group--contained) .tab-group__scroll-button {
-    border-bottom: solid var(--track-width) var(--track-color);
-  }
-
-  /**
-   * Shoelace 2.17 introduced a new attribute "fixed-scroll-controls".
-   * Per default, tab-groups now hide the scroll buttons when they are not needed.
-   * "fixed-scroll-controls" will keep the scroll buttons visible at all times,
-   * which is the default behavior of Synergy.
-   * For this reason, we make the buttons visible by default, but show them in a "disabled" state when they are not needed.
-   */
-  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden,
-  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden {
-    visibility: visible;
-  }
-
-  .tab-group--has-scroll-controls .tab-group__scroll-button--start--hidden::part(base),
-  .tab-group--has-scroll-controls .tab-group__scroll-button--end--hidden::part(base) {
-    opacity: var(--syn-input-disabled-opacity);
-    pointer-events: none;
-  }
-`;

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

@@ -1,58 +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/tab-group/tab-group.component.js';
-
-import { type EventName } from '@lit/react';
-import type { SynTabShowEvent } from '@synergy-design-system/components';
-import type { SynTabHideEvent } from '@synergy-design-system/components';
-
-const tagName = 'syn-tab-group';
-Component.define('syn-tab-group');
-
-/**
- * @summary Tab groups organize content into a container that shows one section at a time.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
- * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
- *
- * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
- * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
- *
- * @csspart base - The component's base wrapper.
- * @csspart nav - The tab group's navigation container where tabs are slotted in.
- * @csspart tabs - The container that wraps the tabs.
- * @csspart active-tab-indicator - The line that highlights the currently selected tab.
- * @csspart body - The tab group's body where tab panels are slotted in.
- * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
- * @csspart scroll-button--start - The starting scroll button.
- * @csspart scroll-button--end - The ending scroll button.
- * @csspart scroll-button__base - The scroll button's exported `base` part.
- *
- * @cssproperty --indicator-color - The color of the active tab indicator.
- * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
- * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
- * @cssproperty --indicator-width - The width of the active tab indicator.
- */
-export const SynTabGroup = createComponent({
-  displayName: 'SynTabGroup',
-  elementClass: Component,
-  events: {
-    onSynTabShow: 'syn-tab-show' as EventName<SynTabShowEvent>,
-    onSynTabHide: 'syn-tab-hide' as EventName<SynTabHideEvent>,
-  },
-  react: React,
-  tagName,
-});
-
-export type { SynTabShowEvent } from '@synergy-design-system/components';
-export type { SynTabHideEvent } from '@synergy-design-system/components';