@synergy-design-system/mcp 0.1.0 → 1.1.0

package/metadata/packages/components/components/syn-breadcrumb-item/component.react.ts

@@ -0,0 +1,37 @@
+// ---------------------------------------------------------------------
+// 🔒 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/breadcrumb-item/breadcrumb-item.component.js';
+
+const tagName = 'syn-breadcrumb-item';
+Component.define('syn-breadcrumb-item');
+
+/**
+ * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The breadcrumb item's label.
+ * @slot prefix - An optional prefix, usually an icon or icon button.
+ * @slot suffix - An optional suffix, usually an icon or icon button.
+ * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
+ * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The breadcrumb item's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart separator - The container that wraps the separator.
+ */
+export const SynBreadcrumbItem = createComponent({
+  displayName: 'SynBreadcrumbItem',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

package/metadata/packages/components/components/syn-breadcrumb-item/component.styles.ts

@@ -0,0 +1,95 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { css } from 'lit';
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    display: inline-flex;
+  }
+
+  .breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--syn-font-sans);
+    font-size: var(--syn-font-size-small);
+    font-weight: var(--syn-font-weight-semibold);
+    color: var(--syn-color-neutral-600);
+    line-height: var(--syn-line-height-normal);
+    white-space: nowrap;
+  }
+
+  .breadcrumb-item__label {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-decoration: none;
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: var(--syn-border-radius-medium);
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: var(--syn-transition-fast) --color;
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label {
+    color: var(--syn-color-primary-600);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
+    color: var(--syn-color-primary-500);
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
+    color: var(--syn-color-primary-600);
+  }
+
+  .breadcrumb-item__label:focus {
+    outline: none;
+  }
+
+  .breadcrumb-item__label:focus-visible {
+    outline: var(--syn-focus-ring);
+    outline-offset: var(--syn-focus-ring-offset);
+  }
+
+  .breadcrumb-item__prefix,
+  .breadcrumb-item__suffix {
+    display: none;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
+    display: inline-flex;
+    margin-inline-end: var(--syn-spacing-x-small);
+  }
+
+  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
+    display: inline-flex;
+    margin-inline-start: var(--syn-spacing-x-small);
+  }
+
+  :host(:last-of-type) .breadcrumb-item__separator {
+    display: none;
+  }
+
+  .breadcrumb-item__separator {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 var(--syn-spacing-x-small);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+`;

package/metadata/packages/components/components/syn-breadcrumb-item/component.ts

@@ -0,0 +1,139 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { classMap } from 'lit/directives/class-map.js';
+import { HasSlotController } from '../../internal/slot.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.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 styles from './breadcrumb-item.styles.js';
+import customStyles from './breadcrumb-item.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The breadcrumb item's label.
+ * @slot prefix - An optional prefix, usually an icon or icon button.
+ * @slot suffix - An optional suffix, usually an icon or icon button.
+ * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
+ * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The breadcrumb item's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart separator - The container that wraps the separator.
+ */
+export default class SynBreadcrumbItem extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+
+  private readonly hasSlotController = new HasSlotController(this, 'prefix', 'suffix');
+
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @state() private renderType: 'button' | 'link' | 'dropdown' = 'button';
+
+  /**
+   * Optional URL to direct the user to when the breadcrumb item is activated. When set, a link will be rendered
+   * internally. When unset, a button will be rendered instead.
+   */
+  @property() href?: string;
+
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  @property() target?: '_blank' | '_parent' | '_self' | '_top';
+
+  /** The `rel` attribute to use on the link. Only used when `href` is set. */
+  @property() rel = 'noreferrer noopener';
+
+  private setRenderType() {
+    const hasDropdown =
+      this.defaultSlot.assignedElements({ flatten: true }).filter(i => i.tagName.toLowerCase() === 'syn-dropdown')
+        .length > 0;
+
+    if (this.href) {
+      this.renderType = 'link';
+      return;
+    }
+
+    if (hasDropdown) {
+      this.renderType = 'dropdown';
+      return;
+    }
+
+    this.renderType = 'button';
+  }
+
+  @watch('href', { waitUntilFirstUpdate: true })
+  hrefChanged() {
+    this.setRenderType();
+  }
+
+  handleSlotChange() {
+    this.setRenderType();
+  }
+
+  render() {
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          'breadcrumb-item': true,
+          'breadcrumb-item--has-prefix': this.hasSlotController.test('prefix'),
+          'breadcrumb-item--has-suffix': this.hasSlotController.test('suffix')
+        })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix"></slot>
+        </span>
+
+        ${this.renderType === 'link'
+          ? html`
+              <a
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--link"
+                href="${this.href!}"
+                target="${ifDefined(this.target ? this.target : undefined)}"
+                rel=${ifDefined(this.target ? this.rel : undefined)}
+              >
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </a>
+            `
+          : ''}
+        ${this.renderType === 'button'
+          ? html`
+              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </button>
+            `
+          : ''}
+        ${this.renderType === 'dropdown'
+          ? html`
+              <div part="label" class="breadcrumb-item__label breadcrumb-item__label--drop-down">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+              </div>
+            `
+          : ''}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix"></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+}

package/metadata/packages/components/components/syn-breadcrumb-item/component.vue

@@ -0,0 +1,76 @@
+<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 Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The breadcrumb item's label.
+ * @slot prefix - An optional prefix, usually an icon or icon button.
+ * @slot suffix - An optional suffix, usually an icon or icon button.
+ * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
+ * you want to change it for all items in the group, set the separator on `<syn-breadcrumb>` instead.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The breadcrumb item's label.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart separator - The container that wraps the separator.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/breadcrumb-item/breadcrumb-item.js';
+
+import type { SynBreadcrumbItem } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynBreadcrumbItem>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Optional URL to direct the user to when the breadcrumb item is activated.
+* When set, a link will be rendered
+internally.
+* When unset, a button will be rendered instead.
+ */
+  href?: SynBreadcrumbItem['href'];
+
+  /**
+   * Tells the browser where to open the link.
+   * Only used when `href` is set.
+   */
+  target?: SynBreadcrumbItem['target'];
+
+  /**
+   * The `rel` attribute to use on the link.
+   * Only used when `href` is set.
+   */
+  rel?: SynBreadcrumbItem['rel'];
+}>();
+
+// 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-breadcrumb-item v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
+  </syn-breadcrumb-item>
+</template>

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

@@ -0,0 +1,318 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynButton } from '@synergy-design-system/components';
+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 '@synergy-design-system/components/components/button/button.js';
+
+/**
+ * @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.
+ */
+@Component({
+  selector: 'syn-button',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynButtonComponent {
+  public nativeElement: SynButton;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    this.nativeElement.addEventListener('syn-blur', (e: SynBlurEvent) => {
+      this.synBlurEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-focus', (e: SynFocusEvent) => {
+      this.synFocusEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-invalid', (e: SynInvalidEvent) => {
+      this.synInvalidEvent.emit(e);
+    });
+  }
+
+  @Input()
+  set title(v: SynButton['title']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.title = v));
+  }
+  get title(): SynButton['title'] {
+    return this.nativeElement.title;
+  }
+
+  /**
+   * The button's theme variant.
+   */
+  @Input()
+  set variant(v: SynButton['variant']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
+  }
+  get variant(): SynButton['variant'] {
+    return this.nativeElement.variant;
+  }
+
+  /**
+   * The button's size.
+   */
+  @Input()
+  set size(v: SynButton['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynButton['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * Draws the button with a caret.
+   * Used to indicate that the button triggers a dropdown menu or similar behavior.
+   */
+  @Input()
+  set caret(v: '' | SynButton['caret']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.caret = v === '' || v),
+    );
+  }
+  get caret(): SynButton['caret'] {
+    return this.nativeElement.caret;
+  }
+
+  /**
+   * Disables the button.
+   */
+  @Input()
+  set disabled(v: '' | SynButton['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynButton['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * Draws the button in a loading state.
+   */
+  @Input()
+  set loading(v: '' | SynButton['loading']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.loading = v === '' || v),
+    );
+  }
+  get loading(): SynButton['loading'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set type(v: SynButton['type']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.type = v));
+  }
+  get type(): SynButton['type'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set name(v: SynButton['name']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
+  }
+  get name(): SynButton['name'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set value(v: SynButton['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynButton['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+   */
+  @Input()
+  set href(v: SynButton['href']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.href = v));
+  }
+  get href(): SynButton['href'] {
+    return this.nativeElement.href;
+  }
+
+  /**
+   * Tells the browser where to open the link.
+   * Only used when `href` is present.
+   */
+  @Input()
+  set target(v: SynButton['target']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.target = v));
+  }
+  get target(): SynButton['target'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set rel(v: SynButton['rel']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.rel = v));
+  }
+  get rel(): SynButton['rel'] {
+    return this.nativeElement.rel;
+  }
+
+  /**
+   * Tells the browser to download the linked file as this filename.
+   * Only used when `href` is present.
+   */
+  @Input()
+  set download(v: SynButton['download']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.download = v));
+  }
+  get download(): SynButton['download'] {
+    return this.nativeElement.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.
+ */
+  @Input()
+  set form(v: SynButton['form']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
+  }
+  get form(): SynButton['form'] {
+    return this.nativeElement.form;
+  }
+
+  /**
+   * Used to override the form owner's `action` attribute.
+   */
+  @Input()
+  set formAction(v: SynButton['formAction']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.formAction = v));
+  }
+  get formAction(): SynButton['formAction'] {
+    return this.nativeElement.formAction;
+  }
+
+  /**
+   * Used to override the form owner's `enctype` attribute.
+   */
+  @Input()
+  set formEnctype(v: SynButton['formEnctype']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.formEnctype = v));
+  }
+  get formEnctype(): SynButton['formEnctype'] {
+    return this.nativeElement.formEnctype;
+  }
+
+  /**
+   * Used to override the form owner's `method` attribute.
+   */
+  @Input()
+  set formMethod(v: SynButton['formMethod']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.formMethod = v));
+  }
+  get formMethod(): SynButton['formMethod'] {
+    return this.nativeElement.formMethod;
+  }
+
+  /**
+   * Used to override the form owner's `novalidate` attribute.
+   */
+  @Input()
+  set formNoValidate(v: '' | SynButton['formNoValidate']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.formNoValidate = v === '' || v),
+    );
+  }
+  get formNoValidate(): SynButton['formNoValidate'] {
+    return this.nativeElement.formNoValidate;
+  }
+
+  /**
+   * Used to override the form owner's `target` attribute.
+   */
+  @Input()
+  set formTarget(v: SynButton['formTarget']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.formTarget = v));
+  }
+  get formTarget(): SynButton['formTarget'] {
+    return this.nativeElement.formTarget;
+  }
+
+  /**
+   * Emitted when the button loses focus.
+   */
+  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
+
+  /**
+   * Emitted when the button gains focus.
+   */
+  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
+
+  /**
+   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   */
+  @Output() synInvalidEvent = new EventEmitter<SynInvalidEvent>();
+}
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';