@synergy-design-system/mcp 0.1.0 → 1.0.0

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

@@ -0,0 +1,204 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynRadioGroup } from '@synergy-design-system/components';
+import type { SynChangeEvent } 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/radio-group/radio-group.js';
+
+/**
+ * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-button-group
+ *
+ * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
+ * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
+ *  attribute.
+ * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-change - Emitted when the radio group's selected value changes.
+ * @event syn-input - Emitted when the radio group receives user 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 button-group - The button group that wraps radio buttons.
+ * @csspart button-group__base - The button group's `base` part.
+ */
+@Component({
+  selector: 'syn-radio-group',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynRadioGroupComponent {
+  public nativeElement: SynRadioGroup;
+  private _ngZone: NgZone;
+  private modelSignal = new AbortController();
+
+  constructor(e: ElementRef, ngZone: NgZone) {
+    this.nativeElement = e.nativeElement;
+    this._ngZone = ngZone;
+    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-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;
+  }
+
+  /**
+* The radio group's label.
+* Required for proper accessibility.
+* If you need to display HTML, use the `label` slot
+instead.
+ */
+  @Input()
+  set label(v: SynRadioGroup['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynRadioGroup['label'] {
+    return this.nativeElement.label;
+  }
+
+  /**
+   * The radio groups's help text.
+   * If you need to display HTML, use the `help-text` slot instead.
+   */
+  @Input()
+  set helpText(v: SynRadioGroup['helpText']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.helpText = v));
+  }
+  get helpText(): SynRadioGroup['helpText'] {
+    return this.nativeElement.helpText;
+  }
+
+  /**
+   * The name of the radio group, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set name(v: SynRadioGroup['name']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
+  }
+  get name(): SynRadioGroup['name'] {
+    return this.nativeElement.name;
+  }
+
+  /**
+   * The current value of the radio group, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set value(v: SynRadioGroup['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynRadioGroup['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * The radio group's size.
+   * This size will be applied to all child radios and radio buttons.
+   */
+  @Input()
+  set size(v: SynRadioGroup['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynRadioGroup['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+* 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: SynRadioGroup['form']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
+  }
+  get form(): SynRadioGroup['form'] {
+    return this.nativeElement.form;
+  }
+
+  /**
+   * Ensures a child radio is checked before allowing the containing form to submit.
+   */
+  @Input()
+  set required(v: '' | SynRadioGroup['required']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.required = v === '' || v),
+    );
+  }
+  get required(): SynRadioGroup['required'] {
+    return this.nativeElement.required;
+  }
+
+  /**
+   * Emitted when the radio group's selected value changes.
+   */
+  @Output() synChangeEvent = new EventEmitter<SynChangeEvent>();
+
+  /**
+   * Emitted when the radio group receives user 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<SynRadioGroup['value']>();
+}
+
+export type { SynChangeEvent } 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-radio-group/component.custom.styles.ts

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+
+export default css`
+  :host([data-user-invalid]) {
+    --syn-input-border-color: var(--syn-input-border-color-focus-error);
+    --syn-input-border-color-hover: var(--syn-input-border-color-focus-error);
+    --syn-color-primary-600: var(--syn-color-error-700);
+    --syn-color-primary-900: var(--syn-color-error-900);
+    --syn-color-primary-950: var(--syn-color-error-950);
+  }
+
+  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
+    margin-top: var(--syn-spacing-x-small);
+  }
+
+  .form-control-input {
+    display: flex;
+    flex-direction: column;
+    gap: var(--syn-spacing-x-small);
+  }
+
+`;

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

@@ -0,0 +1,56 @@
+// ---------------------------------------------------------------------
+// 🔒 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/radio-group/radio-group.component.js';
+
+import { type EventName } from '@lit/react';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynInputEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+
+const tagName = 'syn-radio-group';
+Component.define('syn-radio-group');
+
+/**
+ * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-button-group
+ *
+ * @slot - The default slot where `<syn-radio>` or `<syn-radio-button>` elements are placed.
+ * @slot label - The radio group's label. Required for proper accessibility. Alternatively, you can use the `label`
+ *  attribute.
+ * @slot help-text - Text that describes how to use the radio group. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event syn-change - Emitted when the radio group's selected value changes.
+ * @event syn-input - Emitted when the radio group receives user 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 button-group - The button group that wraps radio buttons.
+ * @csspart button-group__base - The button group's `base` part.
+ */
+export const SynRadioGroup = createComponent({
+  displayName: 'SynRadioGroup',
+  elementClass: Component,
+  events: {
+    onSynChange: 'syn-change' as EventName<SynChangeEvent>,
+    onSynInput: 'syn-input' as EventName<SynInputEvent>,
+    onSynInvalid: 'syn-invalid' as EventName<SynInvalidEvent>,
+  },
+  react: React,
+  tagName,
+});
+
+export type { SynChangeEvent } 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-radio-group/component.styles.ts

@@ -0,0 +1,44 @@
+/**
+ * ---------------------------------------------------------------------
+ * 🔒 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: block;
+  }
+
+  .form-control {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .form-control__label {
+    padding: 0;
+  }
+
+  .radio-group--required .radio-group__label::after {
+    content: var(--syn-input-required-content);
+    margin-inline-start: var(--syn-input-required-content-offset);
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;