mat-progress-buttons
Version:
Material Design Progress Buttons
164 lines (155 loc) • 11.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/common'), require('@angular/core'), require('/material/button'), require('/material/progress-bar'), require('/material/progress-spinner'), require('/material/core'), require('/material/icon')) :
typeof define === 'function' && define.amd ? define('mat-progress-buttons', ['exports', '/common', '@angular/core', '/material/button', '/material/progress-bar', '/material/progress-spinner', '/material/core', '/material/icon'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['mat-progress-buttons'] = {}, global.ng.common, global.ng.core, global.ng.material.button, global.ng.material.progressBar, global.ng.material.progressSpinner, global.ng.material.core, global.ng.material.icon));
}(this, (function (exports, common, core, button, progressBar, progressSpinner, core$1, icon) { 'use strict';
var GLOBAL_CONFIG = new core.InjectionToken('Global Config');
var MatSpinnerButtonComponent = /** @class */ (function () {
function MatSpinnerButtonComponent(config) {
this.config = config;
this.btnClick = new core.EventEmitter();
}
MatSpinnerButtonComponent.prototype.handleClick = function (event) {
if (!this.options.disabled && !this.options.active) {
this.btnClick.emit(event);
}
};
Object.defineProperty(MatSpinnerButtonComponent.prototype, "configExists", {
get: function () {
return !!this.buttonId && !!this.config;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MatSpinnerButtonComponent.prototype, "globalConfig", {
get: function () {
var _this = this;
return this.configExists
? this.config.find(function (item) { return item.id === _this.buttonId; })
: this.options;
},
enumerable: false,
configurable: true
});
MatSpinnerButtonComponent.prototype.ngOnChanges = function (changes) {
if (changes.active) {
this.options.active = changes.active.currentValue;
}
if (changes.disabled) {
this.options.disabled = changes.disabled.currentValue;
}
this.options = Object.assign(Object.assign({}, this.globalConfig), this.options);
};
return MatSpinnerButtonComponent;
}());
MatSpinnerButtonComponent.decorators = [
{ type: core.Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'mat-spinner-button',
template: "<button mat-button\n [type]=\"options.type\"\n [color]=\"options.buttonColor\"\n [class.active]=\"options.active\"\n [class.fullWidth]=\"options.fullWidth\"\n [class.mat-raised-button]=\"options.raised\"\n [class.mat-stroked-button]=\"options.stroked\"\n [class.mat-flat-button]=\"options.flat\"\n [class.mat-fab]=\"options.fab\"\n [ngClass]=\"options.customClass\"\n [disabled]=\"options.active || options.disabled\">\n\n <ng-container\n *ngIf=\"options.buttonIcon\">\n <mat-icon\n class=\"mat-button-icon\"\n [class.is-mat-icon]=\"!options.buttonIcon.fontSet\"\n [class.active]=\"options.active && !options.disabled\"\n [ngClass]=\"options.buttonIcon.customClass\"\n [fontSet]=\"options.buttonIcon.fontSet\"\n [fontIcon]=\"options.buttonIcon.fontIcon\"\n [color]=\"options.buttonIcon.color\"\n [svgIcon]=\"options.buttonIcon.svgIcon\"\n [inline]=\"options.buttonIcon.inline\">\n {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n </mat-icon>\n </ng-container>\n\n <span\n class=\"button-text\"\n *ngIf=\"!options.fab\"\n [class.active]=\"options.active && !options.disabled\">\n {{ options.text }}\n </span>\n\n <ng-container\n *ngIf=\"options.fab && options.icon\">\n <mat-icon\n [fontSet]=\"options.icon.fontSet\"\n [fontIcon]=\"options.icon.fontIcon\"\n [color]=\"options.icon.color\"\n [svgIcon]=\"options.icon.svgIcon\"\n [inline]=\"options.icon.inline\">\n {{ options.icon.fontSet ? '' : options.icon.fontIcon }}\n </mat-icon>\n </ng-container>\n\n <mat-spinner class=\"spinner\"\n *ngIf=\"options.active && !options.disabled\"\n [diameter]=\"options.fab ? 58 : options.spinnerSize\"\n [color]=\"options.spinnerColor\"\n [mode]=\"options.mode\"\n [value]=\"options.value\"\n [class.active]=\"options.active && !options.disabled\">\n </mat-spinner>\n</button>\n",
styles: [":host button{outline:none}:host button.active{cursor:not-allowed}:host button ::ng-deep .mat-button-wrapper{display:flex;align-items:center;justify-content:center}:host button.fullWidth{width:100%}:host button.mat-fab .spinner{margin-top:-15px}:host button .spinner{position:absolute;top:25%;opacity:0;transition:opacity .3s ease-in-out}:host button .spinner.active{opacity:1}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.active{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out}:host button mat-icon.mat-button-icon.is-mat-icon{font-size:18px;position:relative;top:3px}:host button mat-icon.mat-button-icon.active{opacity:0}"]
},] }
];
MatSpinnerButtonComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: core.Inject, args: [GLOBAL_CONFIG,] }] }
]; };
MatSpinnerButtonComponent.propDecorators = {
options: [{ type: core.Input }],
buttonId: [{ type: core.Input }],
active: [{ type: core.Input }],
disabled: [{ type: core.Input }],
btnClick: [{ type: core.Output }],
handleClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
};
var MatBarButtonComponent = /** @class */ (function () {
function MatBarButtonComponent(config) {
this.config = config;
this.btnClick = new core.EventEmitter();
}
MatBarButtonComponent.prototype.handleClick = function (event) {
if (!this.options.disabled && !this.options.active) {
this.btnClick.emit(event);
}
};
Object.defineProperty(MatBarButtonComponent.prototype, "configExists", {
get: function () {
return !!this.buttonId && !!this.config;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MatBarButtonComponent.prototype, "globalConfig", {
get: function () {
var _this = this;
return this.configExists
? this.config.find(function (item) { return item.id === _this.buttonId; })
: this.options;
},
enumerable: false,
configurable: true
});
MatBarButtonComponent.prototype.ngOnChanges = function (changes) {
this.options = Object.assign(Object.assign({}, this.globalConfig), this.options);
if (changes.active) {
this.options.active = changes.active.currentValue;
}
if (changes.disabled) {
this.options.disabled = changes.disabled.currentValue;
}
};
return MatBarButtonComponent;
}());
MatBarButtonComponent.decorators = [
{ type: core.Component, args: [{
// tslint:disable-next-line:component-selector
selector: 'mat-bar-button',
template: "<button\n mat-button\n [type]=\"options.type\"\n [color]=\"options.buttonColor\"\n [class.active]=\"options.active\"\n [class.mat-raised-button]=\"options.raised\"\n [class.mat-stroked-button]=\"options.stroked\"\n [class.mat-flat-button]=\"options.flat\"\n [class.fullWidth]=\"options.fullWidth\"\n [ngClass]=\"options.customClass\"\n [disabled]=\"options.active || options.disabled\"\n>\n <ng-container *ngIf=\"options.buttonIcon\">\n <mat-icon\n [class.is-mat-icon]=\"!options.buttonIcon.fontSet\"\n [ngClass]=\"options.buttonIcon.customClass\"\n [fontSet]=\"options.buttonIcon.fontSet\"\n [fontIcon]=\"options.buttonIcon.fontIcon\"\n [color]=\"options.buttonIcon.color\"\n [svgIcon]=\"options.buttonIcon.svgIcon\"\n [inline]=\"options.buttonIcon.inline\"\n >\n {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}\n </mat-icon>\n </ng-container>\n\n <span>{{ options.text }}</span>\n\n <mat-progress-bar\n class=\"bar\"\n *ngIf=\"options.active && !options.disabled\"\n [color]=\"options.barColor\"\n [mode]=\"options.mode\"\n [value]=\"options.value\"\n >\n </mat-progress-bar>\n</button>\n",
styles: [":host button.active{cursor:not-allowed}:host button.fullWidth{width:100%}:host button .bar{position:absolute;top:0;left:0}:host button mat-icon{padding-right:5px}:host button mat-icon.is-mat-icon{font-size:18px;position:relative;top:3px}"]
},] }
];
MatBarButtonComponent.ctorParameters = function () { return [
{ type: undefined, decorators: [{ type: core.Inject, args: [GLOBAL_CONFIG,] }] }
]; };
MatBarButtonComponent.propDecorators = {
options: [{ type: core.Input }],
buttonId: [{ type: core.Input }],
active: [{ type: core.Input }],
disabled: [{ type: core.Input }],
btnClick: [{ type: core.Output }],
handleClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
};
var MatProgressButtonsModule = /** @class */ (function () {
function MatProgressButtonsModule() {
}
MatProgressButtonsModule.forRoot = function (config) {
return {
ngModule: MatProgressButtonsModule,
providers: [{ provide: GLOBAL_CONFIG, useValue: config }],
};
};
return MatProgressButtonsModule;
}());
MatProgressButtonsModule.decorators = [
{ type: core.NgModule, args: [{
imports: [
common.CommonModule,
button.MatButtonModule,
progressBar.MatProgressBarModule,
progressSpinner.MatProgressSpinnerModule,
core$1.MatRippleModule,
icon.MatIconModule,
],
exports: [MatSpinnerButtonComponent, MatBarButtonComponent],
declarations: [MatSpinnerButtonComponent, MatBarButtonComponent],
},] }
];
/**
* Generated bundle index. Do not edit.
*/
exports.MatBarButtonComponent = MatBarButtonComponent;
exports.MatProgressButtonsModule = MatProgressButtonsModule;
exports.MatSpinnerButtonComponent = MatSpinnerButtonComponent;
exports.ɵb = GLOBAL_CONFIG;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=mat-progress-buttons.umd.js.map