@synergy-design-system/mcp 2.15.0 → 3.0.0

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

@@ -1,81 +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 Tags are used as labels to organize things or to indicate a selection.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs
- * @status stable
- * @since 2.0
- *
- * @dependency syn-icon-button
- *
- * @slot - The tag's content.
- *
- * @event syn-remove - Emitted when the remove button is activated.
- *
- * @csspart base - The component's base wrapper.
- * @csspart content - The tag's content.
- * @csspart remove-button - The tag's remove button, an `<syn-icon-button>`.
- * @csspart remove-button__base - The remove button's exported `base` part.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/tag/tag.js';
-
-import type { SynRemoveEvent } from '@synergy-design-system/components';
-import type { SynTag } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynTag>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The tag's size.
-   */
-  size?: SynTag['size'];
-
-  /**
-   * Makes the tag removable and shows a remove button.
-   */
-  removable?: SynTag['removable'];
-}>();
-
-// 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 remove button is activated.
-   */
-  'syn-remove': [e: SynRemoveEvent];
-}>();
-</script>
-
-<script lang="ts">
-export type { SynRemoveEvent } from '@synergy-design-system/components';
-</script>
-
-<template>
-  <syn-tag
-    @syn-remove="$emit('syn-remove', $event)"
-    v-bind="visibleProps"
-    ref="nativeElement">
-    <slot></slot>
-  </syn-tag>
-</template>

package/metadata/packages/components/components/syn-tag-group/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 { SynTagGroup } from '@synergy-design-system/components';
-
-import '@synergy-design-system/components/components/tag-group/tag-group.js';
-
-/**
- * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
- * It arranges tags in flexible rows and supports different sizes and layouts.
- * Tags can be removable, icon‑based, or purely textual.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
- * @status stable
- *
- * @slot - The tag group's main content. Must be `<syn-tag />` elements.
- * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
- *
- * @csspart base - The component's base wrapper.
- * @csspart tag-label - The tag group's label.
- */
-@Component({
-  selector: 'syn-tag-group',
-  standalone: true,
-  template: '<ng-content></ng-content>',
-})
-export class SynTagGroupComponent {
-  public nativeElement: SynTagGroup;
-  private _ngZone: NgZone;
-
-  constructor(e: ElementRef, ngZone: NgZone) {
-    this.nativeElement = e.nativeElement;
-    this._ngZone = ngZone;
-  }
-
-  /**
-   * The tag group's label.
-   * If you need to display HTML, use the `label` slot instead.
-   */
-  @Input()
-  set label(v: SynTagGroup['label']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
-  }
-  get label(): SynTagGroup['label'] {
-    return this.nativeElement.label;
-  }
-
-  /**
-   * Controls the label position.
-   * Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
-   */
-  @Input()
-  set labelPosition(v: SynTagGroup['labelPosition']) {
-    this._ngZone.runOutsideAngular(
-      () => (this.nativeElement.labelPosition = v),
-    );
-  }
-  get labelPosition(): SynTagGroup['labelPosition'] {
-    return this.nativeElement.labelPosition;
-  }
-
-  /**
-   * The size that should be applied to all slotted `<syn-tag>` elements
-   */
-  @Input()
-  set size(v: SynTagGroup['size']) {
-    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
-  }
-  get size(): SynTagGroup['size'] {
-    return this.nativeElement.size;
-  }
-}

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

@@ -1,33 +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/tag-group/tag-group.component.js';
-
-const tagName = 'syn-tag-group';
-Component.define('syn-tag-group');
-
-/**
- * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
- * It arranges tags in flexible rows and supports different sizes and layouts.
- * Tags can be removable, icon‑based, or purely textual.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
- * @status stable
- *
- * @slot - The tag group's main content. Must be `<syn-tag />` elements.
- * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
- *
- * @csspart base - The component's base wrapper.
- * @csspart tag-label - The tag group's label.
- */
-export const SynTagGroup = createComponent({
-  displayName: 'SynTagGroup',
-  elementClass: Component,
-  events: {},
-  react: React,
-  tagName,
-});

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

@@ -1,49 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    --tag-group-item-gap: var(--syn-spacing-x-small);
-    --tag-group-label-gap: var(--syn-spacing-x-small);
-    --tag-group-label-font: var(--syn-body-medium-semibold);
-
-    display: block;
-  }
-
-  .tag-group {
-    align-items: anchor-center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--tag-group-item-gap);
-  }
-
-  /* Label Styles */
-  .tag-group__label {
-    color: var(--syn-input-label-color);
-    display: block;
-    font: var(--tag-group-label-font);
-  }
-
-  .tag-group--top .tag-group__label {
-    /**
-     * When calculating the margin-bottom, we have to take the gap of .tag-group into account.
-     * We dont want to remove the row-gap above, as otherwise the gap between multi line tags would be 0.
-     * By subtracting the row-gap from the label gap, we ensure that the distance between the label and the first row of tags is consistent.
-     */
-    margin-bottom: calc(var(--tag-group-label-gap) - var(--syn-spacing-2x-small));
-    order: -1;  
-    width: 100%;  
-  }
-
-  /* Size Modifiers */
-  .tag-group--small {
-    --tag-group-item-gap: var(--syn-spacing-2x-small);
-    --tag-group-label-gap: var(--syn-spacing-x-small);
-    --tag-group-label-font: var(--syn-body-small-semibold);
-  }
-
-  .tag-group--large {
-    --tag-group-item-gap: var(--syn-spacing-small);
-    --tag-group-label-gap: var(--syn-spacing-x-small);
-    --tag-group-label-font: var(--syn-body-large-semibold);
-  }
-`;

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

@@ -1,95 +0,0 @@
-import { html } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
-import type { CSSResultGroup } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { HasSlotController } from '../../internal/slot.js';
-import SynergyElement from '../../internal/synergy-element.js';
-import { watch } from '../../internal/watch.js';
-import componentStyles from '../../styles/component.styles.js';
-import styles from './tag-group.styles.js';
-import type SynTag from '../tag/tag.component.js';
-import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
-
-/**
- * @summary A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
- * It arranges tags in flexible rows and supports different sizes and layouts.
- * Tags can be removable, icon‑based, or purely textual.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
- * @status stable
- *
- * @slot - The tag group's main content. Must be `<syn-tag />` elements.
- * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
- *
- * @csspart base - The component's base wrapper.
- * @csspart tag-label - The tag group's label.
- */
-@enableDefaultSettings('SynTagGroup')
-export default class SynTagGroup extends SynergyElement {
-  static styles: CSSResultGroup = [
-    componentStyles,
-    styles,
-  ];
-
-  @queryAssignedElements({ selector: 'syn-tag' }) tagsInDefaultSlot!: SynTag[];
-
-  private readonly hasSlotController = new HasSlotController(this, 'label');
-
-  /** The tag group's label. If you need to display HTML, use the `label` slot instead. */
-  @property() label = '';
-
-  /**
-   * Controls the label position. Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
-   */
-  @property({ attribute: 'label-position', reflect: true }) labelPosition: 'top' | 'start' = 'top';
-
-  /** The size that should be applied to all slotted `<syn-tag>` elements */
-  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
-
-  private adjustTagSize() {
-    this.tagsInDefaultSlot.forEach(tag => {
-      tag.setAttribute('size', this.size);
-    });
-  }
-
-  @watch('size', { waitUntilFirstUpdate: true })
-  handleSizeChange() {
-    this.adjustTagSize();
-  }
-
-  handleSlotChange() {
-    this.adjustTagSize();
-  }
-
-  render() {
-    const hasLabelSlot = this.hasSlotController.test('label');
-    const hasLabel = this.label ? true : !!hasLabelSlot;
-
-    /* eslint-disable @typescript-eslint/unbound-method */
-    return html`
-      <div 
-        part="base"
-        class=${classMap({
-          'tag-group': true,
-          'tag-group--large': this.size === 'large',
-          'tag-group--medium': this.size === 'medium',
-          'tag-group--small': this.size === 'small',
-          'tag-group--start': this.labelPosition === 'start',
-          'tag-group--top': this.labelPosition === 'top',
-        })}
-      >
-
-        <span
-            part="tag-label"
-            class="tag-group__label"
-            aria-hidden=${hasLabel ? 'false' : 'true'}
-          >
-            <slot name="label">${this.label}</slot>
-        </span>
-
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </div>
-    `;
-    /* eslint-enable @typescript-eslint/unbound-method */
-  }
-}

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

@@ -1,69 +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 A tag group is used to display multiple tags that belong together, often representing selected filters, categories, or user‑generated labels.
- * It arranges tags in flexible rows and supports different sizes and layouts.
- * Tags can be removable, icon‑based, or purely textual.
- *
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag-group--docs
- * @status stable
- *
- * @slot - The tag group's main content. Must be `<syn-tag />` elements.
- * @slot label - The tag group's label. Alternatively, you can use the `label` attribute.
- *
- * @csspart base - The component's base wrapper.
- * @csspart tag-label - The tag group's label.
- */
-import { computed, ref } from 'vue';
-import '@synergy-design-system/components/components/tag-group/tag-group.js';
-
-import type { SynTagGroup } from '@synergy-design-system/components';
-
-// DOM Reference to the element
-const nativeElement = ref<SynTagGroup>();
-
-defineExpose({
-  nativeElement,
-});
-
-// Map attributes
-const props = defineProps<{
-  /**
-   * The tag group's label.
-   * If you need to display HTML, use the `label` slot instead.
-   */
-  label?: SynTagGroup['label'];
-
-  /**
-   * Controls the label position.
-   * Use 'top' to place the label above the tags, or 'start' to place it to the begin of the tag group.
-   */
-  labelPosition?: SynTagGroup['labelPosition'];
-
-  /**
-   * The size that should be applied to all slotted `<syn-tag>` elements
-   */
-  size?: SynTagGroup['size'];
-}>();
-
-// 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-tag-group v-bind="visibleProps" ref="nativeElement">
-    <slot></slot>
-  </syn-tag-group>
-</template>