@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,81 @@
+<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-textarea/component.angular.ts

@@ -0,0 +1,394 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynTextarea } from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+import '@synergy-design-system/components/components/textarea/textarea.js';
+
+/**
+ * @summary Textareas collect data from the user and allow multiple lines of text.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart textarea - The internal `<textarea>` control.
+ */
+@Component({
+  selector: 'syn-textarea',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynTextareaComponent {
+  public nativeElement: SynTextarea;
+  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-focus', (e: SynFocusEvent) => {
+      this.synFocusEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-input', (e: SynInputEvent) => {
+      this.synInputEvent.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.valueChange.emit(this.value);
+      },
+      {
+        signal: this.modelSignal.signal,
+      },
+    );
+  }
+  get ngModelUpdateOn(): keyof HTMLElementEventMap {
+    return this.ngModelUpdateOn;
+  }
+
+  @Input()
+  set title(v: SynTextarea['title']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.title = v));
+  }
+  get title(): SynTextarea['title'] {
+    return this.nativeElement.title;
+  }
+
+  /**
+   * The name of the textarea, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set name(v: SynTextarea['name']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
+  }
+  get name(): SynTextarea['name'] {
+    return this.nativeElement.name;
+  }
+
+  /**
+   * The current value of the textarea, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set value(v: SynTextarea['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynTextarea['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * The textarea's size.
+   */
+  @Input()
+  set size(v: SynTextarea['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynTextarea['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * The textarea's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  @Input()
+  set label(v: SynTextarea['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynTextarea['label'] {
+    return this.nativeElement.label;
+  }
+
+  /**
+   * The textarea's help text.
+   * If you need to display HTML, use the `help-text` slot instead.
+   */
+  @Input()
+  set helpText(v: SynTextarea['helpText']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.helpText = v));
+  }
+  get helpText(): SynTextarea['helpText'] {
+    return this.nativeElement.helpText;
+  }
+
+  /**
+   * Placeholder text to show as a hint when the input is empty.
+   */
+  @Input()
+  set placeholder(v: SynTextarea['placeholder']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.placeholder = v));
+  }
+  get placeholder(): SynTextarea['placeholder'] {
+    return this.nativeElement.placeholder;
+  }
+
+  /**
+   * The number of rows to display by default.
+   */
+  @Input()
+  set rows(v: SynTextarea['rows']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.rows = v));
+  }
+  get rows(): SynTextarea['rows'] {
+    return this.nativeElement.rows;
+  }
+
+  /**
+   * Controls how the textarea can be resized.
+   */
+  @Input()
+  set resize(v: SynTextarea['resize']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.resize = v));
+  }
+  get resize(): SynTextarea['resize'] {
+    return this.nativeElement.resize;
+  }
+
+  /**
+   * Disables the textarea.
+   */
+  @Input()
+  set disabled(v: '' | SynTextarea['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynTextarea['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * Makes the textarea readonly.
+   */
+  @Input()
+  set readonly(v: '' | SynTextarea['readonly']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.readonly = v === '' || v),
+    );
+  }
+  get readonly(): SynTextarea['readonly'] {
+    return this.nativeElement.readonly;
+  }
+
+  /**
+* 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: SynTextarea['form']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
+  }
+  get form(): SynTextarea['form'] {
+    return this.nativeElement.form;
+  }
+
+  /**
+   * Makes the textarea a required field.
+   */
+  @Input()
+  set required(v: '' | SynTextarea['required']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.required = v === '' || v),
+    );
+  }
+  get required(): SynTextarea['required'] {
+    return this.nativeElement.required;
+  }
+
+  /**
+   * The minimum length of input that will be considered valid.
+   */
+  @Input()
+  set minlength(v: SynTextarea['minlength']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.minlength = v));
+  }
+  get minlength(): SynTextarea['minlength'] {
+    return this.nativeElement.minlength;
+  }
+
+  /**
+   * The maximum length of input that will be considered valid.
+   */
+  @Input()
+  set maxlength(v: SynTextarea['maxlength']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.maxlength = v));
+  }
+  get maxlength(): SynTextarea['maxlength'] {
+    return this.nativeElement.maxlength;
+  }
+
+  /**
+   * Controls whether and how text input is automatically capitalized as it is entered by the user.
+   */
+  @Input()
+  set autocapitalize(v: SynTextarea['autocapitalize']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.autocapitalize = v),
+    );
+  }
+  get autocapitalize(): SynTextarea['autocapitalize'] {
+    return this.nativeElement.autocapitalize;
+  }
+
+  /**
+   * Indicates whether the browser's autocorrect feature is on or off.
+   */
+  @Input()
+  set autocorrect(v: SynTextarea['autocorrect']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.autocorrect = v));
+  }
+  get autocorrect(): SynTextarea['autocorrect'] {
+    return this.nativeElement.autocorrect;
+  }
+
+  /**
+* Specifies what permission the browser has to provide assistance in filling out form field values.
+* Refer to
+[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
+ */
+  @Input()
+  set autocomplete(v: SynTextarea['autocomplete']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.autocomplete = v));
+  }
+  get autocomplete(): SynTextarea['autocomplete'] {
+    return this.nativeElement.autocomplete;
+  }
+
+  /**
+   * Indicates that the input should receive focus on page load.
+   */
+  @Input()
+  set autofocus(v: '' | SynTextarea['autofocus']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.autofocus = v === '' || v),
+    );
+  }
+  get autofocus(): SynTextarea['autofocus'] {
+    return this.nativeElement.autofocus;
+  }
+
+  /**
+   * Used to customize the label or icon of the Enter key on virtual keyboards.
+   */
+  @Input()
+  set enterkeyhint(v: SynTextarea['enterkeyhint']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.enterkeyhint = v));
+  }
+  get enterkeyhint(): SynTextarea['enterkeyhint'] {
+    return this.nativeElement.enterkeyhint;
+  }
+
+  /**
+   * Enables spell checking on the textarea.
+   */
+  @Input()
+  set spellcheck(v: '' | SynTextarea['spellcheck']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.spellcheck = v === '' || v),
+    );
+  }
+  get spellcheck(): SynTextarea['spellcheck'] {
+    return this.nativeElement.spellcheck;
+  }
+
+  /**
+* Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
+keyboard on supportive devices.
+ */
+  @Input()
+  set inputmode(v: SynTextarea['inputmode']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.inputmode = v));
+  }
+  get inputmode(): SynTextarea['inputmode'] {
+    return this.nativeElement.inputmode;
+  }
+
+  /**
+   * Emitted when the control loses focus.
+   */
+  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
+
+  /**
+   * Emitted when an alteration to the control's value is committed by the user.
+   */
+  @Output() synChangeEvent = new EventEmitter<SynChangeEvent>();
+
+  /**
+   * Emitted when the control gains focus.
+   */
+  @Output() synFocusEvent = new EventEmitter<SynFocusEvent>();
+
+  /**
+   * Emitted when the control receives input.
+   */
+  @Output() synInputEvent = new EventEmitter<SynInputEvent>();
+
+  /**
+   * 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() valueChange = new EventEmitter<SynTextarea['value']>();
+}
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';

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

@@ -0,0 +1,18 @@
+import { css } from 'lit';
+
+export default css`
+  :host([data-user-invalid]) .textarea--standard {
+    border-color: var(--syn-input-border-color-focus-error);
+  }
+
+  :host([data-user-invalid]) .textarea--standard.textarea--focused:not(.textarea--disabled) {
+    border-color: var(--syn-input-border-color-focus-error);
+    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);
+  }
+
+  /** #429: Use token for opacity */
+  .textarea--readonly.textarea--disabled,
+  .textarea--standard.textarea--disabled {
+    opacity: var(--syn-input-disabled-opacity);
+  }
+`;

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

@@ -0,0 +1,60 @@
+// ---------------------------------------------------------------------
+// 🔒 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/textarea/textarea.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-textarea';
+Component.define('syn-textarea');
+
+/**
+ * @summary Textareas collect data from the user and allow multiple lines of text.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-input - The input's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart textarea - The internal `<textarea>` control.
+ */
+export const SynTextarea = createComponent({
+  displayName: 'SynTextarea',
+  elementClass: Component,
+  events: {
+    onSynBlur: 'syn-blur' as EventName<SynBlurEvent>,
+    onSynChange: 'syn-change' as EventName<SynChangeEvent>,
+    onSynFocus: 'syn-focus' as EventName<SynFocusEvent>,
+    onSynInput: 'syn-input' as EventName<SynInputEvent>,
+    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';