@synergy-design-system/angular/components/button/index.d.ts

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynButton, SynBlurEvent, SynFocusEvent, SynInvalidEvent } from '@synergy-design-system/components';
export { SynBlurEvent, SynFocusEvent, SynInvalidEvent } from '@synergy-design-system/components';

/**
 * @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.
 */
declare class SynButtonComponent {
    nativeElement: SynButton;
    private _ngZone;
    constructor(e: ElementRef, ngZone: NgZone);
    set title(v: SynButton['title']);
    get title(): SynButton['title'];
    /**
     * The button's theme variant.
     */
    set variant(v: SynButton['variant']);
    get variant(): SynButton['variant'];
    /**
     * The button's size.
     */
    set size(v: SynButton['size']);
    get size(): SynButton['size'];
    /**
     * Draws the button with a caret.
     * Used to indicate that the button triggers a dropdown menu or similar behavior.
     */
    set caret(v: '' | SynButton['caret']);
    get caret(): SynButton['caret'];
    /**
     * Disables the button.
     */
    set disabled(v: '' | SynButton['disabled']);
    get disabled(): SynButton['disabled'];
    /**
     * Draws the button in a loading state.
     */
    set loading(v: '' | SynButton['loading']);
    get loading(): SynButton['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.
   */
    set type(v: SynButton['type']);
    get type(): SynButton['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.
   */
    set name(v: SynButton['name']);
    get name(): SynButton['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.
   */
    set value(v: SynButton['value']);
    get value(): SynButton['value'];
    /**
     * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
     */
    set href(v: SynButton['href']);
    get href(): SynButton['href'];
    /**
     * Tells the browser where to open the link.
     * Only used when `href` is present.
     */
    set target(v: SynButton['target']);
    get target(): SynButton['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.
   */
    set rel(v: SynButton['rel']);
    get rel(): SynButton['rel'];
    /**
     * Tells the browser to download the linked file as this filename.
     * Only used when `href` is present.
     */
    set download(v: SynButton['download']);
    get download(): SynButton['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.
   */
    set form(v: SynButton['form']);
    get form(): SynButton['form'];
    /**
     * Used to override the form owner's `action` attribute.
     */
    set formAction(v: SynButton['formAction']);
    get formAction(): SynButton['formAction'];
    /**
     * Used to override the form owner's `enctype` attribute.
     */
    set formEnctype(v: SynButton['formEnctype']);
    get formEnctype(): SynButton['formEnctype'];
    /**
     * Used to override the form owner's `method` attribute.
     */
    set formMethod(v: SynButton['formMethod']);
    get formMethod(): SynButton['formMethod'];
    /**
     * Used to override the form owner's `novalidate` attribute.
     */
    set formNoValidate(v: '' | SynButton['formNoValidate']);
    get formNoValidate(): SynButton['formNoValidate'];
    /**
     * Used to override the form owner's `target` attribute.
     */
    set formTarget(v: SynButton['formTarget']);
    get formTarget(): SynButton['formTarget'];
    /**
     * Emitted when the button loses focus.
     */
    synBlurEvent: EventEmitter<SynBlurEvent>;
    /**
     * Emitted when the button gains focus.
     */
    synFocusEvent: EventEmitter<SynFocusEvent>;
    /**
     * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
     */
    synInvalidEvent: EventEmitter<SynInvalidEvent>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynButtonComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynButtonComponent, "syn-button", never, { "title": { "alias": "title"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "caret": { "alias": "caret"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "type": { "alias": "type"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "download": { "alias": "download"; "required": false; }; "form": { "alias": "form"; "required": false; }; "formAction": { "alias": "formAction"; "required": false; }; "formEnctype": { "alias": "formEnctype"; "required": false; }; "formMethod": { "alias": "formMethod"; "required": false; }; "formNoValidate": { "alias": "formNoValidate"; "required": false; }; "formTarget": { "alias": "formTarget"; "required": false; }; }, { "synBlurEvent": "synBlurEvent"; "synFocusEvent": "synFocusEvent"; "synInvalidEvent": "synInvalidEvent"; }, never, ["*"], true, never>;
}

export { SynButtonComponent };