@synergy-design-system/mcp 0.1.0 → 1.1.0

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

@@ -0,0 +1,606 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynInput } from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynClearEvent } 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 type { SynClampEvent } from '@synergy-design-system/components';
+import '@synergy-design-system/components/components/input/input.js';
+
+/**
+ * @summary Inputs collect data from the user.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-divider
+ *
+ * @slot label - The input's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the input.
+ * @slot suffix - Used to append a presentational icon or similar element to the input.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
+ * @slot show-password-icon - An icon to use in lieu of the default show password icon.
+ * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.
+ * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.
+ *
+ * @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-clear - Emitted when the clear button is activated.
+ * @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.
+ * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
+ *
+ * @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 input - The internal `<input>` control.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart clear-button - The clear button.
+ * @csspart password-toggle-button - The password toggle button.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart stepper - The container that wraps the number stepper.
+ * @csspart decrement-number-stepper - The decrement number stepper button.
+ * @csspart increment-number-stepper - The increment number stepper button.
+ * @csspart divider - The divider between the increment and decrement number stepper buttons.
+ *
+ * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.
+ * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.
+ * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.
+ * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.
+ */
+@Component({
+  selector: 'syn-input',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynInputComponent {
+  public nativeElement: SynInput;
+  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-clear', (e: SynClearEvent) => {
+      this.synClearEvent.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.nativeElement.addEventListener('syn-clamp', (e: SynClampEvent) => {
+      this.synClampEvent.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: SynInput['title']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.title = v));
+  }
+  get title(): SynInput['title'] {
+    return this.nativeElement.title;
+  }
+
+  /**
+* The type of input.
+* Works the same as a native `<input>` element, but only a subset of types are supported.
+* Defaults
+to `text`.
+ */
+  @Input()
+  set type(v: SynInput['type']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.type = v));
+  }
+  get type(): SynInput['type'] {
+    return this.nativeElement.type;
+  }
+
+  /**
+   * The name of the input, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set name(v: SynInput['name']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
+  }
+  get name(): SynInput['name'] {
+    return this.nativeElement.name;
+  }
+
+  /**
+   * The current value of the input, submitted as a name/value pair with form data.
+   */
+  @Input()
+  set value(v: SynInput['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynInput['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * The input's size.
+   */
+  @Input()
+  set size(v: SynInput['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynInput['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * The input's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  @Input()
+  set label(v: SynInput['label']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.label = v));
+  }
+  get label(): SynInput['label'] {
+    return this.nativeElement.label;
+  }
+
+  /**
+   * The input's help text.
+   * If you need to display HTML, use the `help-text` slot instead.
+   */
+  @Input()
+  set helpText(v: SynInput['helpText']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.helpText = v));
+  }
+  get helpText(): SynInput['helpText'] {
+    return this.nativeElement.helpText;
+  }
+
+  /**
+   * Adds a clear button when the input is not empty.
+   */
+  @Input()
+  set clearable(v: '' | SynInput['clearable']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.clearable = v === '' || v),
+    );
+  }
+  get clearable(): SynInput['clearable'] {
+    return this.nativeElement.clearable;
+  }
+
+  /**
+   * Disables the input.
+   */
+  @Input()
+  set disabled(v: '' | SynInput['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynInput['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * Placeholder text to show as a hint when the input is empty.
+   */
+  @Input()
+  set placeholder(v: SynInput['placeholder']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.placeholder = v));
+  }
+  get placeholder(): SynInput['placeholder'] {
+    return this.nativeElement.placeholder;
+  }
+
+  /**
+   * Makes the input readonly.
+   */
+  @Input()
+  set readonly(v: '' | SynInput['readonly']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.readonly = v === '' || v),
+    );
+  }
+  get readonly(): SynInput['readonly'] {
+    return this.nativeElement.readonly;
+  }
+
+  /**
+   * Adds a button to toggle the password's visibility.
+   * Only applies to password types.
+   */
+  @Input()
+  set passwordToggle(v: '' | SynInput['passwordToggle']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.passwordToggle = v === '' || v),
+    );
+  }
+  get passwordToggle(): SynInput['passwordToggle'] {
+    return this.nativeElement.passwordToggle;
+  }
+
+  /**
+   * Determines whether or not the password is currently visible.
+   * Only applies to password input types.
+   */
+  @Input()
+  set passwordVisible(v: '' | SynInput['passwordVisible']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.passwordVisible = v === '' || v),
+    );
+  }
+  get passwordVisible(): SynInput['passwordVisible'] {
+    return this.nativeElement.passwordVisible;
+  }
+
+  /**
+   * Hides the increment/decrement spin buttons for number inputs.
+   */
+  @Input()
+  set noSpinButtons(v: '' | SynInput['noSpinButtons']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.noSpinButtons = v === '' || v),
+    );
+  }
+  get noSpinButtons(): SynInput['noSpinButtons'] {
+    return this.nativeElement.noSpinButtons;
+  }
+
+  /**
+* 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: SynInput['form']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
+  }
+  get form(): SynInput['form'] {
+    return this.nativeElement.form;
+  }
+
+  /**
+   * Makes the input a required field.
+   */
+  @Input()
+  set required(v: '' | SynInput['required']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.required = v === '' || v),
+    );
+  }
+  get required(): SynInput['required'] {
+    return this.nativeElement.required;
+  }
+
+  /**
+   * A regular expression pattern to validate input against.
+   */
+  @Input()
+  set pattern(v: SynInput['pattern']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.pattern = v));
+  }
+  get pattern(): SynInput['pattern'] {
+    return this.nativeElement.pattern;
+  }
+
+  /**
+   * The minimum length of input that will be considered valid.
+   */
+  @Input()
+  set minlength(v: SynInput['minlength']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.minlength = v));
+  }
+  get minlength(): SynInput['minlength'] {
+    return this.nativeElement.minlength;
+  }
+
+  /**
+   * The maximum length of input that will be considered valid.
+   */
+  @Input()
+  set maxlength(v: SynInput['maxlength']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.maxlength = v));
+  }
+  get maxlength(): SynInput['maxlength'] {
+    return this.nativeElement.maxlength;
+  }
+
+  /**
+   * The input's minimum value.
+   * Only applies to date and number input types.
+   */
+  @Input()
+  set min(v: SynInput['min']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.min = v));
+  }
+  get min(): SynInput['min'] {
+    return this.nativeElement.min;
+  }
+
+  /**
+   * The input's maximum value.
+   * Only applies to date and number input types.
+   */
+  @Input()
+  set max(v: SynInput['max']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.max = v));
+  }
+  get max(): SynInput['max'] {
+    return this.nativeElement.max;
+  }
+
+  /**
+* Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+implied, allowing any numeric value.
+* Only applies to date and number input types.
+ */
+  @Input()
+  set step(v: SynInput['step']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.step = v));
+  }
+  get step(): SynInput['step'] {
+    return this.nativeElement.step;
+  }
+
+  /**
+   * Controls whether and how text input is automatically capitalized as it is entered by the user.
+   */
+  @Input()
+  set autocapitalize(v: SynInput['autocapitalize']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.autocapitalize = v),
+    );
+  }
+  get autocapitalize(): SynInput['autocapitalize'] {
+    return this.nativeElement.autocapitalize;
+  }
+
+  /**
+   * Indicates whether the browser's autocorrect feature is on or off.
+   */
+  @Input()
+  set autocorrect(v: SynInput['autocorrect']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.autocorrect = v));
+  }
+  get autocorrect(): SynInput['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: SynInput['autocomplete']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.autocomplete = v));
+  }
+  get autocomplete(): SynInput['autocomplete'] {
+    return this.nativeElement.autocomplete;
+  }
+
+  /**
+   * Indicates that the input should receive focus on page load.
+   */
+  @Input()
+  set autofocus(v: '' | SynInput['autofocus']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.autofocus = v === '' || v),
+    );
+  }
+  get autofocus(): SynInput['autofocus'] {
+    return this.nativeElement.autofocus;
+  }
+
+  /**
+   * Used to customize the label or icon of the Enter key on virtual keyboards.
+   */
+  @Input()
+  set enterkeyhint(v: SynInput['enterkeyhint']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.enterkeyhint = v));
+  }
+  get enterkeyhint(): SynInput['enterkeyhint'] {
+    return this.nativeElement.enterkeyhint;
+  }
+
+  /**
+   * Enables spell checking on the input.
+   */
+  @Input()
+  set spellcheck(v: '' | SynInput['spellcheck']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.spellcheck = v === '' || v),
+    );
+  }
+  get spellcheck(): SynInput['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: SynInput['inputmode']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.inputmode = v));
+  }
+  get inputmode(): SynInput['inputmode'] {
+    return this.nativeElement.inputmode;
+  }
+
+  /**
+* The minimal amount of fraction digits to use for numeric values.
+Used to format the number when the input type is `number`.
+ */
+  @Input()
+  set minFractionDigits(v: SynInput['minFractionDigits']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.minFractionDigits = v),
+    );
+  }
+  get minFractionDigits(): SynInput['minFractionDigits'] {
+    return this.nativeElement.minFractionDigits;
+  }
+
+  /**
+* The maximal amount of fraction digits to use for numeric values.
+Used to format the number when the input type is `number`.
+ */
+  @Input()
+  set maxFractionDigits(v: SynInput['maxFractionDigits']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.maxFractionDigits = v),
+    );
+  }
+  get maxFractionDigits(): SynInput['maxFractionDigits'] {
+    return this.nativeElement.maxFractionDigits;
+  }
+
+  /**
+* Defines the strategy for handling numbers in the numeric input.
+This is used to determine how the input behaves when the user interacts with it.
+
+Includes the following configuration options:
+
+- **autoClamp**: If true, the input will clamp the value to the min and max attributes.
+- **noStepAlign**: If true, the input will not align the value to the step attribute.
+- **noStepValidation**: If true, the input will not validate the value against the step attribute.
+
+You may provide this as one of the following values:
+
+- 'native': Uses the native browser implementation.
+- 'modern': Uses a more intuitive implementation:
+  - Values are clamped to the nearest min or max value.
+  - Stepping is inclusive to the provided min and max values.
+  - Provided stepping is no longer used in validation.
+- An object that matches the `NumericStrategy` type.
+* Note this can only be set via `property`, not as an `attribute`!
+ */
+  @Input()
+  set numericStrategy(v: SynInput['numericStrategy']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.numericStrategy = v),
+    );
+  }
+  get numericStrategy(): SynInput['numericStrategy'] {
+    return this.nativeElement.numericStrategy;
+  }
+
+  /**
+* Optional options that should be passed to the `NumberFormatter` when formatting the value.
+This is used to format the number when the input type is `number`.
+Note this can only be set via `property`, not as an `attribute`!
+ */
+  @Input()
+  set numberFormatterOptions(v: SynInput['numberFormatterOptions']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.numberFormatterOptions = v),
+    );
+  }
+  get numberFormatterOptions(): SynInput['numberFormatterOptions'] {
+    return this.nativeElement.numberFormatterOptions;
+  }
+
+  /**
+   * 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 clear button is activated.
+   */
+  @Output() synClearEvent = new EventEmitter<SynClearEvent>();
+
+  /**
+   * 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>();
+
+  /**
+   * Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
+   */
+  @Output() synClampEvent = new EventEmitter<SynClampEvent>();
+
+  /**
+   * Support for two way data binding
+   */
+  @Output() valueChange = new EventEmitter<SynInput['value']>();
+}
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynClearEvent } 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';
+export type { SynClampEvent } from '@synergy-design-system/components';