@blox/material
Version:
Material Components for Angular
96 lines (95 loc) • 4.13 kB
TypeScript
import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
import { ControlValueAccessor } from '@angular/forms';
import { AbstractMdcIcon } from './abstract.mdc.icon';
import { MdcEventRegistry } from '../../utils/mdc.event.registry';
/**
* Directive for an icon button. Icon buttons can be used with a font icon library such as
* <a href="https://material.io/tools/icons" target="_blank">Google Material Icons</a>, SVG
* elements or images. They provide material styling and a ripple to the icon. Use it on anchor and
* button tags. For toggling icon buttons, see `MdcIconToggleDirective`.
*/
export declare class MdcIconButtonDirective extends AbstractMdcIcon implements AfterContentInit, OnDestroy {
constructor(_elm: ElementRef, renderer: Renderer2, registry: MdcEventRegistry, doc: any);
ngAfterContentInit(): void;
ngOnDestroy(): void;
}
/**
* Directive for the icon to display on one of the toggle states of an `mdcIconToggle`. See
* `MdcIconToggleDirective` for more information.
*/
export declare class MdcIconDirective {
/**
* Set this input to false to remove the ripple effect from the surface.
*/
get mdcIcon(): 'on' | '';
set mdcIcon(value: 'on' | '');
}
/**
* Directive for creating a Material Design icon toggle button: a button that toggles state, and
* switches the icon based on the value of the toggle.
*
* When the applied icon font uses CSS pseudo elements, add a child element for the actual icon,
* and give that element the <code>mdcIconButtonIcon</code> directive. The icon button will
* then update the child element with the correct icon if it is toggled.
*/
export declare class MdcIconToggleDirective extends AbstractMdcIcon implements AfterContentInit {
/**
* The aria-label to assign to the icon toggle. You can override the value for the
* on respectively off state by assigning to property `labelOn` or `labelOff`.
*/
label: string | null;
/**
* The aria-label to assign to the icon toggle when it is on. If this input has no value,
* the aria-label will default to the value of the `label` input.
*/
labelOn: string | null;
/**
* The aria-label to assign to the icon toggle when it is off. If this input has no value,
* the aria-label will default to the value of the `label` input.
*/
labelOff: string | null;
/**
* Event emitted when the state of the icon toggle changes (for example when a user clicks
* the icon).
*/
readonly onChange: EventEmitter<boolean>;
private _onChange;
private _onTouched;
private _on;
private _disabled;
private toggleAdapter;
private toggleFoundation;
constructor(_elm: ElementRef, rndr: Renderer2, registry: MdcEventRegistry, doc: any);
ngAfterContentInit(): void;
ngOnDestroy(): void;
/**
* The current state of the icon (true for on/pressed, false for off/unpressed).
*/
get on(): boolean;
set on(value: boolean);
static ngAcceptInputType_on: boolean | '';
/**
* To disable the icon, set this input to true.
*/
get disabled(): boolean;
set disabled(value: boolean);
static ngAcceptInputType_disabled: boolean | '';
}
/**
* Directive for adding Angular Forms (<code>ControlValueAccessor</code>) behavior to an
* <code>MdcIconToggleDirective</code>. Allows the use of the Angular Forms API with
* icon toggle buttons, e.g. binding to <code>[(ngModel)]</code>, form validation, etc.
*/
export declare class MdcFormsIconButtonDirective implements ControlValueAccessor {
private mdcIconButton;
constructor(mdcIconButton: MdcIconToggleDirective);
/** @docs-private */
writeValue(obj: any): void;
/** @docs-private */
registerOnChange(onChange: (value: any) => void): void;
/** @docs-private */
registerOnTouched(onTouched: () => any): void;
/** @docs-private */
setDisabledState(disabled: boolean): void;
}
export declare const ICON_BUTTON_DIRECTIVES: (typeof MdcIconButtonDirective | typeof MdcIconDirective | typeof MdcFormsIconButtonDirective)[];