@angular/material
Version:
Angular Material
324 lines (319 loc) • 18.6 kB
JavaScript
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { ChangeDetectionStrategy, Component, Directive, ElementRef, Inject, NgModule, Optional, Renderer2, Self, ViewEncapsulation, forwardRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MATERIAL_COMPATIBILITY_MODE, MdCommonModule, MdRippleModule, mixinColor, mixinDisableRipple, mixinDisabled } from '@angular/material/core';
import { A11yModule, FocusMonitor } from '@angular/cdk/a11y';
import { Platform } from '@angular/cdk/platform';
/**
* Default color palette for round buttons (md-fab and md-mini-fab)
*/
const DEFAULT_ROUND_BUTTON_COLOR = 'accent';
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* \@docs-private
*/
class MdButtonCssMatStyler {
}
MdButtonCssMatStyler.decorators = [
{ type: Directive, args: [{
selector: 'button[md-button], button[mat-button], a[md-button], a[mat-button]',
host: { 'class': 'mat-button' }
},] },
];
/**
* @nocollapse
*/
MdButtonCssMatStyler.ctorParameters = () => [];
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* \@docs-private
*/
class MdRaisedButtonCssMatStyler {
}
MdRaisedButtonCssMatStyler.decorators = [
{ type: Directive, args: [{
selector: 'button[md-raised-button], button[mat-raised-button], ' +
'a[md-raised-button], a[mat-raised-button]',
host: { 'class': 'mat-raised-button' }
},] },
];
/**
* @nocollapse
*/
MdRaisedButtonCssMatStyler.ctorParameters = () => [];
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* \@docs-private
*/
class MdIconButtonCssMatStyler {
}
MdIconButtonCssMatStyler.decorators = [
{ type: Directive, args: [{
selector: 'button[md-icon-button], button[mat-icon-button], a[md-icon-button], a[mat-icon-button]',
host: { 'class': 'mat-icon-button' }
},] },
];
/**
* @nocollapse
*/
MdIconButtonCssMatStyler.ctorParameters = () => [];
/**
* Directive whose purpose is to add the mat- CSS styling to this selector.
* \@docs-private
*/
class MdFab {
/**
* @param {?} button
* @param {?} anchor
*/
constructor(button, anchor) {
// Set the default color palette for the md-fab components.
(button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR;
}
}
MdFab.decorators = [
{ type: Directive, args: [{
selector: 'button[md-fab], button[mat-fab], a[md-fab], a[mat-fab]',
host: { 'class': 'mat-fab' }
},] },
];
/**
* @nocollapse
*/
MdFab.ctorParameters = () => [
{ type: MdButton, decorators: [{ type: Self }, { type: Optional }, { type: Inject, args: [forwardRef(() => MdButton),] },] },
{ type: MdAnchor, decorators: [{ type: Self }, { type: Optional }, { type: Inject, args: [forwardRef(() => MdAnchor),] },] },
];
/**
* Directive that targets mini-fab buttons and anchors. It's used to apply the `mat-` class
* to all mini-fab buttons and also is responsible for setting the default color palette.
* \@docs-private
*/
class MdMiniFab {
/**
* @param {?} button
* @param {?} anchor
*/
constructor(button, anchor) {
// Set the default color palette for the md-mini-fab components.
(button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR;
}
}
MdMiniFab.decorators = [
{ type: Directive, args: [{
selector: 'button[md-mini-fab], button[mat-mini-fab], a[md-mini-fab], a[mat-mini-fab]',
host: { 'class': 'mat-mini-fab' }
},] },
];
/**
* @nocollapse
*/
MdMiniFab.ctorParameters = () => [
{ type: MdButton, decorators: [{ type: Self }, { type: Optional }, { type: Inject, args: [forwardRef(() => MdButton),] },] },
{ type: MdAnchor, decorators: [{ type: Self }, { type: Optional }, { type: Inject, args: [forwardRef(() => MdAnchor),] },] },
];
/**
* \@docs-private
*/
class MdButtonBase {
/**
* @param {?} _renderer
* @param {?} _elementRef
*/
constructor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
}
}
const _MdButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(MdButtonBase)));
/**
* Material design button.
*/
class MdButton extends _MdButtonMixinBase {
/**
* @param {?} renderer
* @param {?} elementRef
* @param {?} _platform
* @param {?} _focusMonitor
*/
constructor(renderer, elementRef, _platform, _focusMonitor) {
super(renderer, elementRef);
this._platform = _platform;
this._focusMonitor = _focusMonitor;
/**
* Whether the button is round.
*/
this._isRoundButton = this._hasAttributeWithPrefix('fab', 'mini-fab');
/**
* Whether the button is icon button.
*/
this._isIconButton = this._hasAttributeWithPrefix('icon-button');
this._focusMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
}
/**
* @return {?}
*/
ngOnDestroy() {
this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
}
/**
* Focuses the button.
* @return {?}
*/
focus() {
this._getHostElement().focus();
}
/**
* @return {?}
*/
_getHostElement() {
return this._elementRef.nativeElement;
}
/**
* @return {?}
*/
_isRippleDisabled() {
return this.disableRipple || this.disabled;
}
/**
* Gets whether the button has one of the given attributes
* with either an 'md-' or 'mat-' prefix.
* @param {...?} unprefixedAttributeNames
* @return {?}
*/
_hasAttributeWithPrefix(...unprefixedAttributeNames) {
// If not on the browser, say that there are none of the attributes present.
// Since these only affect how the ripple displays (and ripples only happen on the client),
// detecting these attributes isn't necessary when not on the browser.
if (!this._platform.isBrowser) {
return false;
}
return unprefixedAttributeNames.some(suffix => {
const /** @type {?} */ el = this._getHostElement();
return el.hasAttribute('md-' + suffix) || el.hasAttribute('mat-' + suffix);
});
}
}
MdButton.decorators = [
{ type: Component, args: [{selector: `button[md-button], button[md-raised-button], button[md-icon-button],
button[md-fab], button[md-mini-fab],
button[mat-button], button[mat-raised-button], button[mat-icon-button],
button[mat-fab], button[mat-mini-fab]`,
host: {
'[disabled]': 'disabled || null',
},
template: "<span class=\"mat-button-wrapper\"><ng-content></ng-content></span><div mat-ripple class=\"mat-button-ripple\" [class.mat-button-ripple-round]=\"_isRoundButton || _isIconButton\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleCentered]=\"_isIconButton\" [matRippleTrigger]=\"_getHostElement()\"></div><div class=\"mat-button-focus-overlay\"></div>",
styles: [".mat-button,.mat-fab,.mat-icon-button,.mat-mini-fab,.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:88px;line-height:36px;padding:0 16px;border-radius:2px}[disabled].mat-button,[disabled].mat-fab,[disabled].mat-icon-button,[disabled].mat-mini-fab,[disabled].mat-raised-button{cursor:default}.cdk-keyboard-focused.mat-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-fab .mat-button-focus-overlay,.cdk-keyboard-focused.mat-icon-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-mini-fab .mat-button-focus-overlay,.cdk-keyboard-focused.mat-raised-button .mat-button-focus-overlay{opacity:1}.mat-button::-moz-focus-inner,.mat-fab::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-mini-fab::-moz-focus-inner,.mat-raised-button::-moz-focus-inner{border:0}.mat-fab,.mat-mini-fab,.mat-raised-button{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-fab:not([disabled]):active,.mat-mini-fab:not([disabled]):active,.mat-raised-button:not([disabled]):active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}[disabled].mat-fab,[disabled].mat-mini-fab,[disabled].mat-raised-button{box-shadow:none}.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{transition:none;opacity:0}.mat-button:hover .mat-button-focus-overlay{opacity:1}.mat-fab{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab:not([disabled]):active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab:not([disabled]):active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button,.mat-icon-button,.mat-raised-button{color:currentColor}.mat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*{vertical-align:middle}.mat-button-focus-overlay,.mat-button-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-button-focus-overlay{background-color:rgba(0,0,0,.12);border-radius:inherit;opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}@media screen and (-ms-high-contrast:active){.mat-button-focus-overlay{background-color:rgba(255,255,255,.5)}}.mat-button-ripple-round{border-radius:50%;z-index:1}@media screen and (-ms-high-contrast:active){.mat-button,.mat-fab,.mat-icon-button,.mat-mini-fab,.mat-raised-button{outline:solid 1px}}"],
inputs: ['disabled', 'disableRipple', 'color'],
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
viewProviders: [{ provide: MATERIAL_COMPATIBILITY_MODE, useValue: true }],
},] },
];
/**
* @nocollapse
*/
MdButton.ctorParameters = () => [
{ type: Renderer2, },
{ type: ElementRef, },
{ type: Platform, },
{ type: FocusMonitor, },
];
/**
* Raised Material design button.
*/
class MdAnchor extends MdButton {
/**
* @param {?} platform
* @param {?} focusMonitor
* @param {?} elementRef
* @param {?} renderer
*/
constructor(platform, focusMonitor, elementRef, renderer) {
super(renderer, elementRef, platform, focusMonitor);
}
/**
* @param {?} event
* @return {?}
*/
_haltDisabledEvents(event) {
// A disabled button shouldn't apply any actions
if (this.disabled) {
event.preventDefault();
event.stopImmediatePropagation();
}
}
}
MdAnchor.decorators = [
{ type: Component, args: [{selector: `a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab],
a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]`,
host: {
'[attr.tabindex]': 'disabled ? -1 : 0',
'[attr.disabled]': 'disabled || null',
'[attr.aria-disabled]': 'disabled.toString()',
'(click)': '_haltDisabledEvents($event)',
},
inputs: ['disabled', 'disableRipple', 'color'],
template: "<span class=\"mat-button-wrapper\"><ng-content></ng-content></span><div mat-ripple class=\"mat-button-ripple\" [class.mat-button-ripple-round]=\"_isRoundButton || _isIconButton\" [matRippleDisabled]=\"_isRippleDisabled()\" [matRippleCentered]=\"_isIconButton\" [matRippleTrigger]=\"_getHostElement()\"></div><div class=\"mat-button-focus-overlay\"></div>",
styles: [".mat-button,.mat-fab,.mat-icon-button,.mat-mini-fab,.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:88px;line-height:36px;padding:0 16px;border-radius:2px}[disabled].mat-button,[disabled].mat-fab,[disabled].mat-icon-button,[disabled].mat-mini-fab,[disabled].mat-raised-button{cursor:default}.cdk-keyboard-focused.mat-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-fab .mat-button-focus-overlay,.cdk-keyboard-focused.mat-icon-button .mat-button-focus-overlay,.cdk-keyboard-focused.mat-mini-fab .mat-button-focus-overlay,.cdk-keyboard-focused.mat-raised-button .mat-button-focus-overlay{opacity:1}.mat-button::-moz-focus-inner,.mat-fab::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-mini-fab::-moz-focus-inner,.mat-raised-button::-moz-focus-inner{border:0}.mat-fab,.mat-mini-fab,.mat-raised-button{box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-fab:not([disabled]):active,.mat-mini-fab:not([disabled]):active,.mat-raised-button:not([disabled]):active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}[disabled].mat-fab,[disabled].mat-mini-fab,[disabled].mat-raised-button{box-shadow:none}.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{transition:none;opacity:0}.mat-button:hover .mat-button-focus-overlay{opacity:1}.mat-fab{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab:not([disabled]):active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-shadow:0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab:not([disabled]):active{box-shadow:0 7px 8px -4px rgba(0,0,0,.2),0 12px 17px 2px rgba(0,0,0,.14),0 5px 22px 4px rgba(0,0,0,.12)}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button,.mat-icon-button,.mat-raised-button{color:currentColor}.mat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*{vertical-align:middle}.mat-button-focus-overlay,.mat-button-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none}.mat-button-focus-overlay{background-color:rgba(0,0,0,.12);border-radius:inherit;opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}@media screen and (-ms-high-contrast:active){.mat-button-focus-overlay{background-color:rgba(255,255,255,.5)}}.mat-button-ripple-round{border-radius:50%;z-index:1}@media screen and (-ms-high-contrast:active){.mat-button,.mat-fab,.mat-icon-button,.mat-mini-fab,.mat-raised-button{outline:solid 1px}}"],
encapsulation: ViewEncapsulation.None,
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
},] },
];
/**
* @nocollapse
*/
MdAnchor.ctorParameters = () => [
{ type: Platform, },
{ type: FocusMonitor, },
{ type: ElementRef, },
{ type: Renderer2, },
];
class MdButtonModule {
}
MdButtonModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
MdRippleModule,
MdCommonModule,
A11yModule,
],
exports: [
MdButton,
MdAnchor,
MdMiniFab,
MdFab,
MdCommonModule,
MdButtonCssMatStyler,
MdRaisedButtonCssMatStyler,
MdIconButtonCssMatStyler,
],
declarations: [
MdButton,
MdAnchor,
MdMiniFab,
MdFab,
MdButtonCssMatStyler,
MdRaisedButtonCssMatStyler,
MdIconButtonCssMatStyler,
],
},] },
];
/**
* @nocollapse
*/
MdButtonModule.ctorParameters = () => [];
/**
* Generated bundle index. Do not edit.
*/
export { MdButtonModule, MdButtonCssMatStyler, MdRaisedButtonCssMatStyler, MdIconButtonCssMatStyler, MdFab, MdMiniFab, MdButtonBase, _MdButtonMixinBase, MdButton, MdAnchor, MdButton as MatButton, MdButtonBase as MatButtonBase, MdButtonCssMatStyler as MatButtonCssMatStyler, MdButtonModule as MatButtonModule, MdAnchor as MatAnchor, MdIconButtonCssMatStyler as MatIconButtonCssMatStyler, MdFab as MatFab, MdMiniFab as MatMiniFab, MdRaisedButtonCssMatStyler as MatRaisedButtonCssMatStyler };
//# sourceMappingURL=button.js.map