@synergy-design-system/mcp 2.14.1 → 3.0.0

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

@@ -1,204 +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 { 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.react.ts

@@ -1,56 +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/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

@@ -1,58 +0,0 @@
-import { css } from 'lit';
-
-export default css`
-  :host {
-    display: block;
-  }
-
-  :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-input-border-color-focus-error);
-    --syn-color-primary-900: var(--syn-color-error-900);
-    --syn-color-primary-950: var(--syn-color-error-950);
-    --syn-color-neutral-1000: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color-hover: var(--syn-input-border-color-focus-error);
-    --syn-interactive-emphasis-color-active: var(--syn-input-border-color-focus-error);
-  }
-
-  .form-control {
-    border: none;
-    margin: 0;
-    padding: 0;
-    position: relative;
-  }
-
-  .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 {
-    border: 0;
-    /* stylelint-disable-next-line property-no-deprecated */
-    clip: rect(0, 0, 0, 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  .form-control-input {
-    display: flex;
-    flex-direction: column;
-    gap: var(--syn-spacing-x-small);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--syn-spacing-x-small);
-  }
-`;