@synergy-design-system/mcp 0.1.0 → 1.0.0

package/metadata/packages/components/components/syn-side-nav/component.vue

@@ -0,0 +1,201 @@
+<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 The <syn-side-nav /> element contains secondary navigation and fits below the header.
+ * It can be used to group multiple navigation items (<syn-nav-item />s) together.
+ *
+ * @example
+ * <syn-side-nav open>
+ *  <syn-nav-item >Item 1</syn-nav-item>
+ *  <syn-nav-item divider>Item 2</syn-nav-item>
+ * </syn-side-nav>
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
+ * @status stable
+ * @since 1.14.0
+ *
+ * @dependency syn-divider
+ * @dependency syn-drawer
+ * @dependency syn-icon
+ * @dependency syn-nav-item
+ *
+ * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
+ * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
+ *    Please avoid having to many nav-items as it can massively influence the user experience.
+ * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
+ * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
+ * for variant="sticky".
+ *
+ * @event syn-show - Emitted when the side-nav opens.
+ * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
+ * @event syn-hide - Emitted when the side-nav closes.
+ * @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
+ *
+ * @csspart base - The components base wrapper
+ * @csspart drawer - The drawer that is used under the hood for creating the side-nav
+ * @csspart content-container - The components main content container
+ * @csspart content - The components main content
+ * @csspart footer-container - The components footer content container
+  (where the footer slot content is rendered)
+ * @csspart footer-divider - The components footer divider
+ * @csspart footer - The components footer content
+ * @csspart overlay - The overlay that covers the screen behind the side-nav.
+ * @csspart panel - The side-nav's panel (where the whole content is rendered).
+ * @csspart body - The side-nav's body (where the default slot content is rendered)
+ * @csspart drawer__base - The drawer's base wrapper
+ * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
+ * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
+ * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
+
+ * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
+ *
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav
+ *  in variant="default".
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
+ *  in variant="default".
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
+ * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/side-nav/side-nav.js';
+
+import type { SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterShowEvent } from '@synergy-design-system/components';
+import type { SynHideEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent } from '@synergy-design-system/components';
+import type { SynSideNav } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynSideNav>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Indicates whether or not the side-nav is open.
+You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
+`hide()` methods and this attribute will reflect the side-nav's open state.
+
+Depending on the "variant" attribute, the behavior will differ.
+
+__Default__:
+With `open` will show the side-nav with an overlay.
+Without `open`, the side-nav will be hidden.
+
+__Rail__:
+With `open` will show the whole side-nav with an overlay for touch devices
+or without an overlay for non-touch devices.
+Without `open`, the side-nav will only show the prefix of nav-item's.
+
+__Sticky__:
+With `open` will show the whole side-nav with an overlay for touch devices
+or without an overlay for non-touch devices.
+Without `open`, the side-nav will only show the prefix of nav-item's.
+ */
+  open?: SynSideNav['open'];
+
+  /**
+* Use the rail attribute to only show the prefix of navigation items in closed state.
+This will open on hover on the rail navigation.
+On touch devices the navigation opens on click and shows an overlay.
+
+Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
+If this is not the case you should use a burger navigation.
+
+@deprecated Use the `variant` attribute with `rail` instead.
+Will be removed in synergy version 3.0
+ */
+  rail?: SynSideNav['rail'];
+
+  /**
+* The variant that should be used to show the side navigation.
+
+The following variants are supported:
+- **default** (default): Always shows the whole content and additionally an overlay.
+This makes especially sense for applications, where you navigate to a place and stay
+there for a longer time.
+- **rail**: Only show the prefix of navigation items in closed state.
+This will open on hover on the rail navigation.
+On touch devices the navigation opens on click and shows an overlay.
+Note: The rail variant is only an option if all Navigation Items on the first level
+have an Icon.
+If this is not the case you should use a burger navigation.
+- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
+and full width.
+* This variant is only possible for non-nested navigation items.
+Note: The sticky variant is only an option if all Navigation Items on the first level
+have an Icon and if there are only "first level" items.
+ */
+  variant?: SynSideNav['variant'];
+
+  /**
+* By default, the side-nav traps the focus if in variant="default" and open.
+To disable the focus trapping, set this attribute.
+ */
+  noFocusTrapping?: SynSideNav['noFocusTrapping'];
+}>();
+
+// 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 side-nav opens.
+   */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+   * Emitted after the side-nav opens and all animations are complete.
+   */
+  'syn-after-show': [e: SynAfterShowEvent];
+
+  /**
+   * Emitted when the side-nav closes.
+   */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+   * Emitted after the side-nav closes and all animations are complete.
+   */
+  'syn-after-hide': [e: SynAfterHideEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynShowEvent } from '@synergy-design-system/components';
+export type { SynAfterShowEvent } from '@synergy-design-system/components';
+export type { SynHideEvent } from '@synergy-design-system/components';
+export type { SynAfterHideEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-side-nav
+    @syn-show="$emit('syn-show', $event)"
+    @syn-after-show="$emit('syn-after-show', $event)"
+    @syn-hide="$emit('syn-hide', $event)"
+    @syn-after-hide="$emit('syn-after-hide', $event)"
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
+  </syn-side-nav>
+</template>

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

@@ -0,0 +1,44 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynSpinner } from '@synergy-design-system/components';
+
+import '@synergy-design-system/components/components/spinner/spinner.js';
+
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+@Component({
+  selector: 'syn-spinner',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynSpinnerComponent {
+  public nativeElement: SynSpinner;
+  private _ngZone: NgZone;
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+  }
+}

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

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --speed: var(--syn-transition-x-slow);
+  }
+
+  .spinner__indicator {
+    stroke-dasharray: 75% 360%;
+    stroke-linecap: initial;
+  }
+
+  /**
+   * Make sure the spinner track is using the correct color.
+   */
+  .spinner__track {
+    filter: saturate(0);
+    opacity: 0.16;
+    stroke: var(--indicator-color);
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;

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

@@ -0,0 +1,31 @@
+// ---------------------------------------------------------------------
+// 🔒 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/spinner/spinner.component.js';
+
+const tagName = 'syn-spinner';
+Component.define('syn-spinner');
+
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+export const SynSpinner = createComponent({
+  displayName: 'SynSpinner',
+  elementClass: Component,
+  events: {},
+  react: React,
+  tagName,
+});

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

@@ -0,0 +1,55 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { css } from 'lit';
+
+// Resizing a spinner element using anything but font-size will break the animation because the animation uses em units.
+// Therefore, if a spinner is used in a flex container without `flex: none` applied, the spinner can grow/shrink and
+// break the animation. The use of `flex: none` on the host element prevents this by always having the spinner sized
+// according to its actual dimensions.
+
+export default css`
+	/* stylelint-disable */
+  :host {
+    --track-width: 2px;
+    --indicator-color: var(--syn-color-primary-600);
+    --speed: 2s;
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex: none;
+  }
+
+  .spinner {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner__track,
+  .spinner__indicator {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(0.5em - var(--track-width) / 2);
+    cx: 0.5em;
+    cy: 0.5em;
+    transform-origin: 50% 50%;
+  }
+
+  .spinner__track {
+    transform-origin: 0% 0%;
+  }
+
+  .spinner__indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    stroke-dasharray: 150% 75%;
+    animation: spin var(--speed) linear infinite;
+  }
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 AUTOGENERATED BY VENDORISM
+ * Removing this comment will prevent it from being managed by it.
+ * ---------------------------------------------------------------------
+ */
+
+/* eslint-disable */
+import { html } from 'lit';
+import { LocalizeController } from '../../utilities/localize.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import styles from './spinner.styles.js';
+import customStyles from './spinner.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * @summary Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+export default class SynSpinner extends SynergyElement {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+
+  private readonly localize = new LocalizeController(this);
+
+  render() {
+    return html`
+      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term('loading')}>
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+  }
+}

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

@@ -0,0 +1,35 @@
+<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 Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/spinner/spinner.js';
+
+import type { SynSpinner } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynSpinner>();
+
+defineExpose({
+  nativeElement,
+});
+</script>
+
+<template>
+  <syn-spinner ref="nativeElement"> </syn-spinner>
+</template>

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

@@ -0,0 +1,244 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynSwitch } from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } 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/switch/switch.js';
+
+/**
+ * @summary Switches allow the user to toggle an option on or off.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The switch's label.
+ * @slot help-text - Text that describes how to use the switch. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when the control's checked state changes.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart control - The control that houses the switch's thumb.
+ * @csspart thumb - The switch's thumb.
+ * @csspart label - The switch's label.
+ * @csspart form-control-help-text - The help text's wrapper.
+ *
+ * @cssproperty --width - The width of the switch.
+ * @cssproperty --height - The height of the switch.
+ * @cssproperty --thumb-size - The size of the thumb.
+ */
+@Component({
+  selector: 'syn-switch',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynSwitchComponent {
+  public nativeElement: SynSwitch;
+  private _ngZone: NgZone;
+  private modelSignal = new AbortController();
+
+  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-change', (e: SynChangeEvent) => {
+      this.synChangeEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-input', (e: SynInputEvent) => {
+      this.synInputEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-focus', (e: SynFocusEvent) => {
+      this.synFocusEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-invalid', (e: SynInvalidEvent) => {
+      this.synInvalidEvent.emit(e);
+    });
+    this.ngModelUpdateOn = 'syn-input';
+  }
+
+  /**
+   * The event that will trigger the ngModel update.
+   * By default, this is set to "syn-input".
+   */
+  @Input()
+  set ngModelUpdateOn(v: keyof HTMLElementEventMap) {
+    this.modelSignal.abort();
+    this.modelSignal = new AbortController();
+    const option = v || 'syn-input';
+    this.nativeElement.addEventListener(
+      option,
+      () => {
+        this.checkedChange.emit(this.checked);
+      },
+      {
+        signal: this.modelSignal.signal,
+      },
+    );
+  }
+  get ngModelUpdateOn(): keyof HTMLElementEventMap {
+    return this.ngModelUpdateOn;
+  }
+
+  @Input()
+  set title(v: SynSwitch['title']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.title = v));
+  }
+  get title(): SynSwitch['title'] {
+    return this.nativeElement.title;
+  }
+
+  /**
+   * The name of the switch, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set name(v: SynSwitch['name']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
+  }
+  get name(): SynSwitch['name'] {
+    return this.nativeElement.name;
+  }
+
+  /**
+   * The current value of the switch, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set value(v: SynSwitch['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynSwitch['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * The switch's size.
+   */
+  @Input()
+  set size(v: SynSwitch['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynSwitch['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * Disables the switch.
+   */
+  @Input()
+  set disabled(v: '' | SynSwitch['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynSwitch['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * Draws the switch in a checked state.
+   */
+  @Input()
+  set checked(v: '' | SynSwitch['checked']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.checked = v === '' || v),
+    );
+  }
+  get checked(): SynSwitch['checked'] {
+    return this.nativeElement.checked;
+  }
+
+  /**
+* By default, form controls are associated with the nearest containing `<form>` element.
+* This attribute allows you
+to place the form control outside of a form and associate it with the form that has this `id`.
+* The form must be in
+the same document or shadow root for this to work.
+ */
+  @Input()
+  set form(v: SynSwitch['form']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
+  }
+  get form(): SynSwitch['form'] {
+    return this.nativeElement.form;
+  }
+
+  /**
+   * Makes the switch a required field.
+   */
+  @Input()
+  set required(v: '' | SynSwitch['required']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.required = v === '' || v),
+    );
+  }
+  get required(): SynSwitch['required'] {
+    return this.nativeElement.required;
+  }
+
+  /**
+   * The switch's help text.
+   * If you need to display HTML, use the `help-text` slot instead.
+   */
+  @Input()
+  set helpText(v: SynSwitch['helpText']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.helpText = v));
+  }
+  get helpText(): SynSwitch['helpText'] {
+    return this.nativeElement.helpText;
+  }
+
+  /**
+   * Emitted when the control loses focus.
+   */
+  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
+
+  /**
+   * Emitted when the control's checked state changes.
+   */
+  @Output() synChangeEvent = new EventEmitter<SynChangeEvent>();
+
+  /**
+   * Emitted when the control receives input.
+   */
+  @Output() synInputEvent = new EventEmitter<SynInputEvent>();
+
+  /**
+   * Emitted when the control 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>();
+
+  /**
+   * Support for two way data binding
+   */
+  @Output() checkedChange = new EventEmitter<SynSwitch['checked']>();
+}
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';