@synergy-design-system/angular
Version:
Angular wrappers for the Synergy Design System
94 lines (91 loc) • 3.92 kB
TypeScript
import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynIconButton, SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
export { SynBlurEvent, SynFocusEvent } from '@synergy-design-system/components';
/**
* @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs
* @status stable
* @since 2.0
*
* @dependency syn-icon
*
* @event syn-blur - Emitted when the icon button loses focus.
* @event syn-focus - Emitted when the icon button gains focus.
*
* @csspart base - The component's base wrapper.
*/
declare class SynIconButtonComponent {
nativeElement: SynIconButton;
private _ngZone;
constructor(e: ElementRef, ngZone: NgZone);
/**
* The name of the icon to draw.
* Available names depend on the icon library being used.
*/
set name(v: SynIconButton['name']);
get name(): SynIconButton['name'];
/**
* The name of a registered custom icon library.
*/
set library(v: SynIconButton['library']);
get library(): SynIconButton['library'];
/**
* An external URL of an SVG file.
* Be sure you trust the content you are including, as it will be executed as code and
can result in XSS attacks.
*/
set src(v: SynIconButton['src']);
get src(): SynIconButton['src'];
/**
* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
*/
set href(v: SynIconButton['href']);
get href(): SynIconButton['href'];
/**
* Tells the browser where to open the link.
* Only used when `href` is set.
*/
set target(v: SynIconButton['target']);
get target(): SynIconButton['target'];
/**
* Tells the browser to download the linked file as this filename.
* Only used when `href` is set.
*/
set download(v: SynIconButton['download']);
get download(): SynIconButton['download'];
/**
* A description that gets read by assistive devices.
* For optimal accessibility, you should always include a label
that describes what the icon button does.
*/
set label(v: SynIconButton['label']);
get label(): SynIconButton['label'];
/**
* The icon button's size.
*/
set size(v: SynIconButton['size']);
get size(): SynIconButton['size'];
/**
* The color of the icon button.
The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.
*/
set color(v: SynIconButton['color']);
get color(): SynIconButton['color'];
/**
* Disables the button.
*/
set disabled(v: '' | SynIconButton['disabled']);
get disabled(): SynIconButton['disabled'];
/**
* Emitted when the icon button loses focus.
*/
synBlurEvent: EventEmitter<SynBlurEvent>;
/**
* Emitted when the icon button gains focus.
*/
synFocusEvent: EventEmitter<SynFocusEvent>;
static ɵfac: i0.ɵɵFactoryDeclaration<SynIconButtonComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<SynIconButtonComponent, "syn-icon-button", never, { "name": { "alias": "name"; "required": false; }; "library": { "alias": "library"; "required": false; }; "src": { "alias": "src"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "download": { "alias": "download"; "required": false; }; "label": { "alias": "label"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "synBlurEvent": "synBlurEvent"; "synFocusEvent": "synFocusEvent"; }, never, ["*"], true, never>;
}
export { SynIconButtonComponent };