@blox/material
Version:
Material Components for Angular
130 lines • 12.9 kB
JavaScript
import { Directive, ElementRef, HostBinding, Input, Renderer2, forwardRef, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { asBoolean } from '../../utils/value.utils';
import { AbstractMdcRipple } from '../ripple/abstract.mdc.ripple';
import { MdcEventRegistry } from '../../utils/mdc.event.registry';
/**
* Use this directive for adding an icon to an <code>mdcButton</code>. This directive can be
* added to font-style icons (such as <a href="https://material.io/icons/" target="_blank">material icons</a>
* from Google fonts), or with <code>svg</code> elements for svg based icons.
*/
export class MdcButtonIconDirective {
constructor() {
/** @internal */
this._cls = true;
/** @internal */
this._ariaHidden = true;
}
}
MdcButtonIconDirective.decorators = [
{ type: Directive, args: [{
selector: '[mdcButtonIcon]'
},] }
];
MdcButtonIconDirective.propDecorators = {
_cls: [{ type: HostBinding, args: ['class.mdc-button__icon',] }],
_ariaHidden: [{ type: HostBinding, args: ['attr.aria-hidden',] }]
};
/**
* Directive for the label of an <code>mdcButton</code>. Must be a direct child
* of <code>mdcButton</code>.
*/
export class MdcButtonLabelDirective {
constructor() {
/** @internal */
this._cls = true;
}
}
MdcButtonLabelDirective.decorators = [
{ type: Directive, args: [{
selector: '[mdcButtonLabel]'
},] }
];
MdcButtonLabelDirective.propDecorators = {
_cls: [{ type: HostBinding, args: ['class.mdc-button__label',] }]
};
/**
* Material design button. Anchors can also be styled as buttons with this directive.
* Defaults to a button that is flushed with the surface.
* Use the input modifiers to alter the styling, or create your own style
* based on the provided sass-mixins.
*
* For buttons with a trailing icon, you must put the label inside an `mdcButtonLabel`
* directive. For all other buttons it is also recommnded to put the label inside
* an `mdcButtonLabel`, because future version of material-components-web may make
* it's use mandatory.
*
* A ripple (and the required DOM elements for the ripple) will be added automatically.
*/
export class MdcButtonDirective extends AbstractMdcRipple {
constructor(_elm, renderer, registry, doc) {
super(_elm, renderer, registry, doc);
this._elm = _elm;
/** @internal */
this._cls = true;
this._raised = false;
this._unelevated = false;
this._outlined = false;
this.addRippleSurface('mdc-button__ripple');
}
ngAfterContentInit() {
this.initRipple();
}
ngOnDestroy() {
this.destroyRipple();
}
/**
* When this input is defined and does not have value false, the button will be elevated
* upon the surface.
*/
get raised() {
return this._raised;
}
set raised(val) {
this._raised = asBoolean(val);
}
/**
* When this input is defined and does not have value false, the button will be styled
* flush with the surface and have a visible border.
*/
get outlined() {
return this._outlined;
}
set outlined(val) {
this._outlined = asBoolean(val);
}
/**
* Set this property to a non false value for a contained button
* flush with the surface.
*/
get unelevated() {
return this._unelevated;
}
set unelevated(val) {
this._unelevated = asBoolean(val);
}
}
MdcButtonDirective.decorators = [
{ type: Directive, args: [{
selector: 'button[mdcButton],a[mdcButton]',
providers: [{ provide: AbstractMdcRipple, useExisting: forwardRef(() => MdcButtonDirective) }]
},] }
];
MdcButtonDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: Renderer2 },
{ type: MdcEventRegistry },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
];
MdcButtonDirective.propDecorators = {
_cls: [{ type: HostBinding, args: ['class.mdc-button',] }],
raised: [{ type: HostBinding, args: ['class.mdc-button--raised',] }, { type: Input }],
outlined: [{ type: HostBinding, args: ['class.mdc-button--outlined',] }, { type: Input }],
unelevated: [{ type: HostBinding, args: ['class.mdc-button--unelevated',] }, { type: Input }]
};
export const BUTTON_DIRECTIVES = [
MdcButtonIconDirective,
MdcButtonLabelDirective,
MdcButtonDirective
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWRjLmJ1dHRvbi5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9idXR0b24vbWRjLmJ1dHRvbi5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFvQixTQUFTLEVBQUUsVUFBVSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQWEsU0FBUyxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdEksT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzNDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUNwRCxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUVsRTs7OztHQUlHO0FBSUgsTUFBTSxPQUFPLHNCQUFzQjtJQUhuQztRQUlJLGdCQUFnQjtRQUNnQyxTQUFJLEdBQUcsSUFBSSxDQUFDO1FBQzVELGdCQUFnQjtRQUNpQixnQkFBVyxHQUFHLElBQUksQ0FBQztJQUN4RCxDQUFDOzs7WUFSQSxTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLGlCQUFpQjthQUM5Qjs7O21CQUdJLFdBQVcsU0FBQyx3QkFBd0I7MEJBRXBDLFdBQVcsU0FBQyxrQkFBa0I7O0FBR25DOzs7R0FHRztBQUlILE1BQU0sT0FBTyx1QkFBdUI7SUFIcEM7UUFJSSxnQkFBZ0I7UUFDaUMsU0FBSSxHQUFHLElBQUksQ0FBQztJQUNqRSxDQUFDOzs7WUFOQSxTQUFTLFNBQUM7Z0JBQ1AsUUFBUSxFQUFFLGtCQUFrQjthQUMvQjs7O21CQUdJLFdBQVcsU0FBQyx5QkFBeUI7O0FBRzFDOzs7Ozs7Ozs7Ozs7R0FZRztBQUtILE1BQU0sT0FBTyxrQkFBbUIsU0FBUSxpQkFBaUI7SUFPckQsWUFBbUIsSUFBZ0IsRUFBRSxRQUFtQixFQUFFLFFBQTBCLEVBQW9CLEdBQVE7UUFDNUcsS0FBSyxDQUFDLElBQUksRUFBRSxRQUFRLEVBQUUsUUFBUSxFQUFFLEdBQWUsQ0FBQyxDQUFDO1FBRGxDLFNBQUksR0FBSixJQUFJLENBQVk7UUFObkMsZ0JBQWdCO1FBQzBCLFNBQUksR0FBRyxJQUFJLENBQUM7UUFDOUMsWUFBTyxHQUFHLEtBQUssQ0FBQztRQUNoQixnQkFBVyxHQUFHLEtBQUssQ0FBQztRQUNwQixjQUFTLEdBQUcsS0FBSyxDQUFDO1FBSXRCLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxvQkFBb0IsQ0FBQyxDQUFDO0lBQ2hELENBQUM7SUFFRCxrQkFBa0I7UUFDZCxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVEOzs7T0FHRztJQUNILElBQ0ksTUFBTTtRQUNOLE9BQU8sSUFBSSxDQUFDLE9BQU8sQ0FBQztJQUN4QixDQUFDO0lBRUQsSUFBSSxNQUFNLENBQUMsR0FBWTtRQUNuQixJQUFJLENBQUMsT0FBTyxHQUFHLFNBQVMsQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBSUQ7OztPQUdHO0lBQ0gsSUFDSSxRQUFRO1FBQ1IsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDO0lBQzFCLENBQUM7SUFFRCxJQUFJLFFBQVEsQ0FBQyxHQUFZO1FBQ3JCLElBQUksQ0FBQyxTQUFTLEdBQUcsU0FBUyxDQUFDLEdBQUcsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7SUFJRDs7O09BR0c7SUFDSCxJQUNJLFVBQVU7UUFDVixPQUFPLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDNUIsQ0FBQztJQUVELElBQUksVUFBVSxDQUFDLEdBQVk7UUFDdkIsSUFBSSxDQUFDLFdBQVcsR0FBRyxTQUFTLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDdEMsQ0FBQzs7O1lBakVKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsZ0NBQWdDO2dCQUMxQyxTQUFTLEVBQUUsQ0FBQyxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGtCQUFrQixDQUFDLEVBQUUsQ0FBQzthQUNoRzs7O1lBakRxQyxVQUFVO1lBQWlDLFNBQVM7WUFJakYsZ0JBQWdCOzRDQXFEa0UsTUFBTSxTQUFDLFFBQVE7OzttQkFMckcsV0FBVyxTQUFDLGtCQUFrQjtxQkFzQjlCLFdBQVcsU0FBQywwQkFBMEIsY0FBRyxLQUFLO3VCQWU5QyxXQUFXLFNBQUMsNEJBQTRCLGNBQUcsS0FBSzt5QkFlaEQsV0FBVyxTQUFDLDhCQUE4QixjQUFHLEtBQUs7O0FBWXZELE1BQU0sQ0FBQyxNQUFNLGlCQUFpQixHQUFHO0lBQzdCLHNCQUFzQjtJQUN0Qix1QkFBdUI7SUFDdkIsa0JBQWtCO0NBQ3JCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlckNvbnRlbnRJbml0LCBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25EZXN0cm95LCBSZW5kZXJlcjIsIGZvcndhcmRSZWYsIEluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRE9DVU1FTlQgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgYXNCb29sZWFuIH0gZnJvbSAnLi4vLi4vdXRpbHMvdmFsdWUudXRpbHMnO1xuaW1wb3J0IHsgQWJzdHJhY3RNZGNSaXBwbGUgfSBmcm9tICcuLi9yaXBwbGUvYWJzdHJhY3QubWRjLnJpcHBsZSc7XG5pbXBvcnQgeyBNZGNFdmVudFJlZ2lzdHJ5IH0gZnJvbSAnLi4vLi4vdXRpbHMvbWRjLmV2ZW50LnJlZ2lzdHJ5JztcblxuLyoqXG4gKiBVc2UgdGhpcyBkaXJlY3RpdmUgZm9yIGFkZGluZyBhbiBpY29uIHRvIGFuIDxjb2RlPm1kY0J1dHRvbjwvY29kZT4uIFRoaXMgZGlyZWN0aXZlIGNhbiBiZVxuICogYWRkZWQgdG8gZm9udC1zdHlsZSBpY29ucyAoc3VjaCBhcyA8YSBocmVmPVwiaHR0cHM6Ly9tYXRlcmlhbC5pby9pY29ucy9cIiB0YXJnZXQ9XCJfYmxhbmtcIj5tYXRlcmlhbCBpY29uczwvYT5cbiAqIGZyb20gR29vZ2xlIGZvbnRzKSwgb3Igd2l0aCA8Y29kZT5zdmc8L2NvZGU+IGVsZW1lbnRzIGZvciBzdmcgYmFzZWQgaWNvbnMuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICAgIHNlbGVjdG9yOiAnW21kY0J1dHRvbkljb25dJ1xufSlcbmV4cG9ydCBjbGFzcyBNZGNCdXR0b25JY29uRGlyZWN0aXZlIHtcbiAgICAvKiogQGludGVybmFsICovXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tZGMtYnV0dG9uX19pY29uJykgcmVhZG9ubHkgX2NscyA9IHRydWU7XG4gICAgLyoqIEBpbnRlcm5hbCAqL1xuICAgIEBIb3N0QmluZGluZygnYXR0ci5hcmlhLWhpZGRlbicpIF9hcmlhSGlkZGVuID0gdHJ1ZTtcbn1cblxuLyoqXG4gKiBEaXJlY3RpdmUgZm9yIHRoZSBsYWJlbCBvZiBhbiA8Y29kZT5tZGNCdXR0b248L2NvZGU+LiBNdXN0IGJlIGEgZGlyZWN0IGNoaWxkXG4gKiBvZiA8Y29kZT5tZGNCdXR0b248L2NvZGU+LlxuICovXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1ttZGNCdXR0b25MYWJlbF0nXG59KVxuZXhwb3J0IGNsYXNzIE1kY0J1dHRvbkxhYmVsRGlyZWN0aXZlIHtcbiAgICAvKiogQGludGVybmFsICovXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tZGMtYnV0dG9uX19sYWJlbCcpIHJlYWRvbmx5IF9jbHMgPSB0cnVlO1xufVxuXG4vKipcbiAqIE1hdGVyaWFsIGRlc2lnbiBidXR0b24uIEFuY2hvcnMgY2FuIGFsc28gYmUgc3R5bGVkIGFzIGJ1dHRvbnMgd2l0aCB0aGlzIGRpcmVjdGl2ZS5cbiAqIERlZmF1bHRzIHRvIGEgYnV0dG9uIHRoYXQgaXMgZmx1c2hlZCB3aXRoIHRoZSBzdXJmYWNlLlxuICogVXNlIHRoZSBpbnB1dCBtb2RpZmllcnMgdG8gYWx0ZXIgdGhlIHN0eWxpbmcsIG9yIGNyZWF0ZSB5b3VyIG93biBzdHlsZVxuICogYmFzZWQgb24gdGhlIHByb3ZpZGVkIHNhc3MtbWl4aW5zLlxuICogXG4gKiBGb3IgYnV0dG9ucyB3aXRoIGEgdHJhaWxpbmcgaWNvbiwgeW91IG11c3QgcHV0IHRoZSBsYWJlbCBpbnNpZGUgYW4gYG1kY0J1dHRvbkxhYmVsYFxuICogZGlyZWN0aXZlLiBGb3IgYWxsIG90aGVyIGJ1dHRvbnMgaXQgaXMgYWxzbyByZWNvbW1uZGVkIHRvIHB1dCB0aGUgbGFiZWwgaW5zaWRlXG4gKiBhbiBgbWRjQnV0dG9uTGFiZWxgLCBiZWNhdXNlIGZ1dHVyZSB2ZXJzaW9uIG9mIG1hdGVyaWFsLWNvbXBvbmVudHMtd2ViIG1heSBtYWtlXG4gKiBpdCdzIHVzZSBtYW5kYXRvcnkuXG4gKiBcbiAqIEEgcmlwcGxlIChhbmQgdGhlIHJlcXVpcmVkIERPTSBlbGVtZW50cyBmb3IgdGhlIHJpcHBsZSkgd2lsbCBiZSBhZGRlZCBhdXRvbWF0aWNhbGx5LlxuICovXG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ2J1dHRvblttZGNCdXR0b25dLGFbbWRjQnV0dG9uXScsXG4gICAgcHJvdmlkZXJzOiBbe3Byb3ZpZGU6IEFic3RyYWN0TWRjUmlwcGxlLCB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBNZGNCdXR0b25EaXJlY3RpdmUpIH1dXG59KVxuZXhwb3J0IGNsYXNzIE1kY0J1dHRvbkRpcmVjdGl2ZSBleHRlbmRzIEFic3RyYWN0TWRjUmlwcGxlIGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCwgT25EZXN0cm95IHtcbiAgICAvKiogQGludGVybmFsICovXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tZGMtYnV0dG9uJykgcmVhZG9ubHkgX2NscyA9IHRydWU7XG4gICAgcHJpdmF0ZSBfcmFpc2VkID0gZmFsc2U7XG4gICAgcHJpdmF0ZSBfdW5lbGV2YXRlZCA9IGZhbHNlO1xuICAgIHByaXZhdGUgX291dGxpbmVkID0gZmFsc2U7XG5cbiAgICBjb25zdHJ1Y3RvcihwdWJsaWMgX2VsbTogRWxlbWVudFJlZiwgcmVuZGVyZXI6IFJlbmRlcmVyMiwgcmVnaXN0cnk6IE1kY0V2ZW50UmVnaXN0cnksIEBJbmplY3QoRE9DVU1FTlQpIGRvYzogYW55KSB7XG4gICAgICAgIHN1cGVyKF9lbG0sIHJlbmRlcmVyLCByZWdpc3RyeSwgZG9jIGFzIERvY3VtZW50KTtcbiAgICAgICAgdGhpcy5hZGRSaXBwbGVTdXJmYWNlKCdtZGMtYnV0dG9uX19yaXBwbGUnKTtcbiAgICB9XG5cbiAgICBuZ0FmdGVyQ29udGVudEluaXQoKSB7XG4gICAgICAgIHRoaXMuaW5pdFJpcHBsZSgpO1xuICAgIH1cblxuICAgIG5nT25EZXN0cm95KCkge1xuICAgICAgICB0aGlzLmRlc3Ryb3lSaXBwbGUoKTtcbiAgICB9XG5cbiAgICAvKipcbiAgICAgKiBXaGVuIHRoaXMgaW5wdXQgaXMgZGVmaW5lZCBhbmQgZG9lcyBub3QgaGF2ZSB2YWx1ZSBmYWxzZSwgdGhlIGJ1dHRvbiB3aWxsIGJlIGVsZXZhdGVkXG4gICAgICogdXBvbiB0aGUgc3VyZmFjZS5cbiAgICAgKi9cbiAgICBASG9zdEJpbmRpbmcoJ2NsYXNzLm1kYy1idXR0b24tLXJhaXNlZCcpIEBJbnB1dCgpXG4gICAgZ2V0IHJhaXNlZCgpIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3JhaXNlZDtcbiAgICB9XG5cbiAgICBzZXQgcmFpc2VkKHZhbDogYm9vbGVhbikge1xuICAgICAgICB0aGlzLl9yYWlzZWQgPSBhc0Jvb2xlYW4odmFsKTtcbiAgICB9XG5cbiAgICBzdGF0aWMgbmdBY2NlcHRJbnB1dFR5cGVfcmFpc2VkOiBib29sZWFuIHwgJyc7XG5cbiAgICAvKipcbiAgICAgKiBXaGVuIHRoaXMgaW5wdXQgaXMgZGVmaW5lZCBhbmQgZG9lcyBub3QgaGF2ZSB2YWx1ZSBmYWxzZSwgdGhlIGJ1dHRvbiB3aWxsIGJlIHN0eWxlZCBcbiAgICAgKiBmbHVzaCB3aXRoIHRoZSBzdXJmYWNlIGFuZCBoYXZlIGEgdmlzaWJsZSBib3JkZXIuXG4gICAgICovXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tZGMtYnV0dG9uLS1vdXRsaW5lZCcpIEBJbnB1dCgpXG4gICAgZ2V0IG91dGxpbmVkKCkge1xuICAgICAgICByZXR1cm4gdGhpcy5fb3V0bGluZWQ7XG4gICAgfVxuXG4gICAgc2V0IG91dGxpbmVkKHZhbDogYm9vbGVhbikge1xuICAgICAgICB0aGlzLl9vdXRsaW5lZCA9IGFzQm9vbGVhbih2YWwpO1xuICAgIH1cblxuICAgIHN0YXRpYyBuZ0FjY2VwdElucHV0VHlwZV9vdXRsaW5lZDogYm9vbGVhbiB8ICcnO1xuXG4gICAgLyoqXG4gICAgICogU2V0IHRoaXMgcHJvcGVydHkgdG8gYSBub24gZmFsc2UgdmFsdWUgZm9yIGEgY29udGFpbmVkIGJ1dHRvblxuICAgICAqIGZsdXNoIHdpdGggdGhlIHN1cmZhY2UuXG4gICAgICovXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5tZGMtYnV0dG9uLS11bmVsZXZhdGVkJykgQElucHV0KClcbiAgICBnZXQgdW5lbGV2YXRlZCgpIHtcbiAgICAgICAgcmV0dXJuIHRoaXMuX3VuZWxldmF0ZWQ7XG4gICAgfVxuXG4gICAgc2V0IHVuZWxldmF0ZWQodmFsOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMuX3VuZWxldmF0ZWQgPSBhc0Jvb2xlYW4odmFsKTtcbiAgICB9XG5cbiAgICBzdGF0aWMgbmdBY2NlcHRJbnB1dFR5cGVfdW5lbGV2YXRlZDogYm9vbGVhbiB8ICcnO1xufVxuXG5leHBvcnQgY29uc3QgQlVUVE9OX0RJUkVDVElWRVMgPSBbXG4gICAgTWRjQnV0dG9uSWNvbkRpcmVjdGl2ZSxcbiAgICBNZGNCdXR0b25MYWJlbERpcmVjdGl2ZSxcbiAgICBNZGNCdXR0b25EaXJlY3RpdmVcbl07XG4iXX0=