@synergy-design-system/metadata 1.0.0 → 3.0.1

package/data/layers/full/component/component:syn-button/angular/button.component.ts

@@ -0,0 +1,318 @@
+// ---------------------------------------------------------------------
+// 🔒 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 { SynButton } from '@synergy-design-system/components';
+import type { SynBlurEvent } 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/button/button.js';
+
+/**
+ * @summary Buttons represent actions that are available to the user.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-spinner
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @slot - The button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart caret - The button's caret icon, an `<syn-icon>` element.
+ * @csspart spinner - The spinner that shows when the button is in the loading state.
+ */
+@Component({
+  selector: 'syn-button',
+  standalone: true,
+  template: '<ng-content></ng-content>',
+})
+export class SynButtonComponent {
+  public nativeElement: SynButton;
+  private _ngZone: NgZone;
+
+  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-focus', (e: SynFocusEvent) => {
+      this.synFocusEvent.emit(e);
+    });
+    this.nativeElement.addEventListener('syn-invalid', (e: SynInvalidEvent) => {
+      this.synInvalidEvent.emit(e);
+    });
+  }
+
+  @Input()
+  set title(v: SynButton['title']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.title = v));
+  }
+  get title(): SynButton['title'] {
+    return this.nativeElement.title;
+  }
+
+  /**
+   * The button's theme variant.
+   */
+  @Input()
+  set variant(v: SynButton['variant']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.variant = v));
+  }
+  get variant(): SynButton['variant'] {
+    return this.nativeElement.variant;
+  }
+
+  /**
+   * The button's size.
+   */
+  @Input()
+  set size(v: SynButton['size']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.size = v));
+  }
+  get size(): SynButton['size'] {
+    return this.nativeElement.size;
+  }
+
+  /**
+   * Draws the button with a caret.
+   * Used to indicate that the button triggers a dropdown menu or similar behavior.
+   */
+  @Input()
+  set caret(v: '' | SynButton['caret']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.caret = v === '' || v),
+    );
+  }
+  get caret(): SynButton['caret'] {
+    return this.nativeElement.caret;
+  }
+
+  /**
+   * Disables the button.
+   */
+  @Input()
+  set disabled(v: '' | SynButton['disabled']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.disabled = v === '' || v),
+    );
+  }
+  get disabled(): SynButton['disabled'] {
+    return this.nativeElement.disabled;
+  }
+
+  /**
+   * Draws the button in a loading state.
+   */
+  @Input()
+  set loading(v: '' | SynButton['loading']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.loading = v === '' || v),
+    );
+  }
+  get loading(): SynButton['loading'] {
+    return this.nativeElement.loading;
+  }
+
+  /**
+* The type of button.
+* Note that the default value is `button` instead of `submit`, which is opposite of how native
+`<button>` elements behave.
+* When the type is `submit`, the button will submit the surrounding form.
+ */
+  @Input()
+  set type(v: SynButton['type']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.type = v));
+  }
+  get type(): SynButton['type'] {
+    return this.nativeElement.type;
+  }
+
+  /**
+* The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
+This attribute is ignored when `href` is present.
+ */
+  @Input()
+  set name(v: SynButton['name']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.name = v));
+  }
+  get name(): SynButton['name'] {
+    return this.nativeElement.name;
+  }
+
+  /**
+* The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
+button is the submitter.
+* This attribute is ignored when `href` is present.
+ */
+  @Input()
+  set value(v: SynButton['value']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.value = v));
+  }
+  get value(): SynButton['value'] {
+    return this.nativeElement.value;
+  }
+
+  /**
+   * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+   */
+  @Input()
+  set href(v: SynButton['href']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.href = v));
+  }
+  get href(): SynButton['href'] {
+    return this.nativeElement.href;
+  }
+
+  /**
+   * Tells the browser where to open the link.
+   * Only used when `href` is present.
+   */
+  @Input()
+  set target(v: SynButton['target']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.target = v));
+  }
+  get target(): SynButton['target'] {
+    return this.nativeElement.target;
+  }
+
+  /**
+* When using `href`, this attribute will map to the underlying link's `rel` attribute.
+* Unlike regular links, the
+default is `noreferrer noopener` to prevent security exploits.
+* However, if you're using `target` to point to a
+specific tab/window, this will prevent that from working correctly.
+* You can remove or change the default value by
+setting the attribute to an empty string or a value of your choice, respectively.
+ */
+  @Input()
+  set rel(v: SynButton['rel']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.rel = v));
+  }
+  get rel(): SynButton['rel'] {
+    return this.nativeElement.rel;
+  }
+
+  /**
+   * Tells the browser to download the linked file as this filename.
+   * Only used when `href` is present.
+   */
+  @Input()
+  set download(v: SynButton['download']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.download = v));
+  }
+  get download(): SynButton['download'] {
+    return this.nativeElement.download;
+  }
+
+  /**
+* The "form owner" to associate the button with.
+* If omitted, the closest containing form will be used instead.
+* The
+value of this attribute must be an id of a form in the same document or shadow root as the button.
+ */
+  @Input()
+  set form(v: SynButton['form']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.form = v));
+  }
+  get form(): SynButton['form'] {
+    return this.nativeElement.form;
+  }
+
+  /**
+   * Used to override the form owner's `action` attribute.
+   */
+  @Input()
+  set formAction(v: SynButton['formAction']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.formAction = v));
+  }
+  get formAction(): SynButton['formAction'] {
+    return this.nativeElement.formAction;
+  }
+
+  /**
+   * Used to override the form owner's `enctype` attribute.
+   */
+  @Input()
+  set formEnctype(v: SynButton['formEnctype']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.formEnctype = v));
+  }
+  get formEnctype(): SynButton['formEnctype'] {
+    return this.nativeElement.formEnctype;
+  }
+
+  /**
+   * Used to override the form owner's `method` attribute.
+   */
+  @Input()
+  set formMethod(v: SynButton['formMethod']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.formMethod = v));
+  }
+  get formMethod(): SynButton['formMethod'] {
+    return this.nativeElement.formMethod;
+  }
+
+  /**
+   * Used to override the form owner's `novalidate` attribute.
+   */
+  @Input()
+  set formNoValidate(v: '' | SynButton['formNoValidate']) {
+    this._ngZone.runOutsideAngular(
+      () => (this.nativeElement.formNoValidate = v === '' || v),
+    );
+  }
+  get formNoValidate(): SynButton['formNoValidate'] {
+    return this.nativeElement.formNoValidate;
+  }
+
+  /**
+   * Used to override the form owner's `target` attribute.
+   */
+  @Input()
+  set formTarget(v: SynButton['formTarget']) {
+    this._ngZone.runOutsideAngular(() => (this.nativeElement.formTarget = v));
+  }
+  get formTarget(): SynButton['formTarget'] {
+    return this.nativeElement.formTarget;
+  }
+
+  /**
+   * Emitted when the button loses focus.
+   */
+  @Output() synBlurEvent = new EventEmitter<SynBlurEvent>();
+
+  /**
+   * Emitted when the button 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>();
+}
+
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';

package/data/layers/full/component/component:syn-button/components/button.component.ts

@@ -0,0 +1,315 @@
+/* eslint-disable */
+import { classMap } from 'lit/directives/class-map.js';
+import { FormControlController, validValidityState } from '../../internal/form.js';
+import { HasSlotController, getTextContent } from '../../internal/slot.js';
+import { html, literal } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeController } from '../../utilities/localize.js';
+import { property, query, state } from 'lit/decorators.js';
+import { watch } from '../../internal/watch.js';
+import componentStyles from '../../styles/component.styles.js';
+import SynergyElement from '../../internal/synergy-element.js';
+import SynIcon from '../icon/icon.component.js';
+import SynSpinner from '../spinner/spinner.component.js';
+import styles from './button.styles.js';
+import customStyles from './button.custom.styles.js';
+import type { CSSResultGroup } from 'lit';
+import type { SynergyFormControl } from '../../internal/synergy-element.js';
+import { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';
+
+/**
+ * @summary Buttons represent actions that are available to the user.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ * @dependency syn-spinner
+ *
+ * @event syn-blur - Emitted when the button loses focus.
+ * @event syn-focus - Emitted when the button gains focus.
+ * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @slot - The button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart caret - The button's caret icon, an `<syn-icon>` element.
+ * @csspart spinner - The spinner that shows when the button is in the loading state.
+ */
+@enableDefaultSettings('SynButton')
+export default class SynButton extends SynergyElement implements SynergyFormControl {
+  static styles: CSSResultGroup = [componentStyles, styles, customStyles];
+  static dependencies = {
+    'syn-icon': SynIcon,
+    'syn-spinner': SynSpinner
+  };
+
+  private readonly formControlController = new FormControlController(this, {
+    assumeInteractionOn: ['click']
+  });
+
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
+  private readonly localize = new LocalizeController(this);
+
+  @query('.button') button: HTMLButtonElement | HTMLLinkElement;
+  @query('slot:not([name])') defaultSlot: HTMLSlotElement;
+
+  @state() private iconOnly = false;
+
+  @state() private hasFocus = false;
+  @state() invalid = false;
+  @property({ reflect: true }) title = ''; // make reactive to pass through
+
+  /** The button's theme variant. */
+  @property({ reflect: true }) variant: 'filled' | 'outline' | 'text' = 'outline';
+
+  /** The button's size. */
+  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
+
+  /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
+  @property({ type: Boolean, reflect: true }) caret = false;
+
+  /** Disables the button. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  /** Draws the button in a loading state. */
+  @property({ type: Boolean, reflect: true }) loading = false;
+
+  /**
+   * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
+   * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
+   */
+  @property() type: 'button' | 'submit' | 'reset' = 'button';
+
+  /**
+   * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
+   * This attribute is ignored when `href` is present.
+   */
+  @property() name = '';
+
+  /**
+   * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
+   * button is the submitter. This attribute is ignored when `href` is present.
+   */
+  @property() value = '';
+
+  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+  @property() href = '';
+
+  /** Tells the browser where to open the link. Only used when `href` is present. */
+  @property() target: '_blank' | '_parent' | '_self' | '_top';
+
+  /**
+   * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
+   * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
+   * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
+   * setting the attribute to an empty string or a value of your choice, respectively.
+   */
+  @property() rel = 'noreferrer noopener';
+
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
+  @property() download?: string;
+
+  /**
+   * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
+   * value of this attribute must be an id of a form in the same document or shadow root as the button.
+   */
+  @property() form: string;
+
+  /** Used to override the form owner's `action` attribute. */
+  @property({ attribute: 'formaction' }) formAction: string;
+
+  /** Used to override the form owner's `enctype` attribute.  */
+  @property({ attribute: 'formenctype' })
+  formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+
+  /** Used to override the form owner's `method` attribute.  */
+  @property({ attribute: 'formmethod' }) formMethod: 'post' | 'get';
+
+  /** Used to override the form owner's `novalidate` attribute. */
+  @property({ attribute: 'formnovalidate', type: Boolean }) formNoValidate: boolean;
+
+  /** Used to override the form owner's `target` attribute. */
+  @property({ attribute: 'formtarget' }) formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+
+  /** Gets the validity state object */
+  get validity() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).validity;
+    }
+
+    return validValidityState;
+  }
+
+  /** Gets the validation message */
+  get validationMessage() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).validationMessage;
+    }
+
+    return '';
+  }
+
+  firstUpdated() {
+    if (this.isButton()) {
+      this.formControlController.updateValidity();
+    }
+  }
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('syn-blur');
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('syn-focus');
+  }
+
+  private handleClick() {
+    if (this.type === 'submit') {
+      this.formControlController.submit(this);
+    }
+
+    if (this.type === 'reset') {
+      this.formControlController.reset(this);
+    }
+  }
+
+  private handleInvalid(event: Event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+
+  private isButton() {
+    return this.href ? false : true;
+  }
+
+  private isLink() {
+    return this.href ? true : false;
+  }
+
+  private handleSlotChange() {
+    const textContent = getTextContent(this.defaultSlot).trim();
+    const assignedElements = this.defaultSlot.assignedElements({flatten: true})
+    const iconOnlyElement = assignedElements.length === 1 && assignedElements[0].tagName.toLowerCase() === 'syn-icon';
+
+    this.iconOnly = iconOnlyElement && textContent === '';
+  }
+
+  @watch('disabled', { waitUntilFirstUpdate: true })
+  handleDisabledChange() {
+    if (this.isButton()) {
+      // Disabled form controls are always valid
+      this.formControlController.setValidity(this.disabled);
+    }
+  }
+
+  /** Simulates a click on the button. */
+  click() {
+    this.button.click();
+  }
+
+  /** Sets focus on the button. */
+  focus(options?: FocusOptions) {
+    this.button.focus(options);
+  }
+
+  /** Removes focus from the button. */
+  blur() {
+    this.button.blur();
+  }
+
+  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+  checkValidity() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).checkValidity();
+    }
+
+    return true;
+  }
+
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
+  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  reportValidity() {
+    if (this.isButton()) {
+      return (this.button as HTMLButtonElement).reportValidity();
+    }
+
+    return true;
+  }
+
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message: string) {
+    if (this.isButton()) {
+      (this.button as HTMLButtonElement).setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
+  }
+
+  render() {
+    const isLink = this.isLink();
+    const tag = isLink ? literal`a` : literal`button`;
+
+    /* eslint-disable lit/no-invalid-html */
+    /* eslint-disable lit/binding-positions */
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+          button: true,
+          'button--primary': true,
+          'button--text': this.variant === 'text',
+          'button--small': this.size === 'small',
+          'button--medium': this.size === 'medium',
+          'button--large': this.size === 'large',
+          'button--caret': this.caret,
+          'button--disabled': this.disabled,
+          'button--focused': this.hasFocus,
+          'button--loading': this.loading,
+          'button--filled': this.variant === 'filled',
+          'button--outline': this.variant === 'outline',
+          'button--rtl': this.localize.dir() === 'rtl',
+          'button--has-label': this.hasSlotController.test('[default]'),
+          'button--has-prefix': this.hasSlotController.test('prefix'),
+          'button--has-suffix': this.hasSlotController.test('suffix')
+        })}
+        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
+        type=${ifDefined(isLink ? undefined : this.type)}
+        title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
+        name=${ifDefined(isLink ? undefined : this.name)}
+        value=${ifDefined(isLink ? undefined : this.value)}
+        href=${ifDefined(isLink && !this.disabled ? this.href : undefined)}
+        target=${ifDefined(isLink ? this.target : undefined)}
+        download=${ifDefined(isLink ? this.download : undefined)}
+        rel=${ifDefined(isLink ? this.rel : undefined)}
+        role=${ifDefined(isLink ? undefined : 'button')}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @invalid=${this.isButton() ? this.handleInvalid : null}
+        @click=${this.handleClick}
+      >
+        <slot name="prefix" part="prefix" class="button__prefix"></slot>
+        <slot part="label" class=${classMap({ 'button__label': true, 'button__icon-only': this.iconOnly })} @slotchange=${this.handleSlotChange}></slot>
+        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        ${
+          this.caret ? html` <syn-icon part="caret" class="button__caret" library="system" name="chevron-down"></syn-icon> ` : ''
+        }
+        ${this.loading ? html`<syn-spinner part="spinner"></syn-spinner>` : ''}
+      </${tag}>
+    `;
+    /* eslint-enable lit/no-invalid-html */
+    /* eslint-enable lit/binding-positions */
+  }
+}