mat-progress-buttons/esm2015/mat-progress-buttons.js

Material Design Progress Buttons

import { Component, Input, Output, HostListener, EventEmitter, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule, MatProgressBarModule, MatProgressSpinnerModule, MatRippleModule, MatIconModule } from '@angular/material';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MatSpinnerButtonComponent {
    constructor() {
        this.btnClick = new EventEmitter();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onClick(event) {
        if (!this.options.disabled && !this.options.active) {
            this.btnClick.emit(event);
        }
    }
}
MatSpinnerButtonComponent.decorators = [
    { type: Component, args: [{
                // tslint:disable-next-line:component-selector
                selector: 'mat-spinner-button',
                template: `
    <button mat-button
      [type]="options.type"
      [color]="options.buttonColor"
      [class.active]="options.active"
      [class.fullWidth]="options.fullWidth"
      [class.mat-raised-button]="options.raised"
      [class.mat-stroked-button]="options.stroked"
      [class.mat-flat-button]="options.flat"
      [class.mat-fab]="options.fab"
      [ngClass]="options.customClass"
      [disabled]="options.active || options.disabled">

      <ng-container
        *ngIf="options.buttonIcon">
        <mat-icon
          class="mat-button-icon"
          [class.is-mat-icon]="!options.buttonIcon.fontSet"
          [class.active]="options.active && !options.disabled"
          [ngClass]="options.buttonIcon.customClass"
          [fontSet]="options.buttonIcon.fontSet"
          [fontIcon]="options.buttonIcon.fontIcon"
          [color]="options.buttonIcon.color"
          [svgIcon]="options.buttonIcon.svgIcon"
          [inline]="options.buttonIcon.inline">
          {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}
        </mat-icon>
      </ng-container>

      <span
        class="button-text"
        *ngIf="!options.fab"
        [class.active]="options.active && !options.disabled">
          {{ options.text }}
      </span>

      <ng-container
        *ngIf="options.fab && options.icon">
        <mat-icon
          [fontSet]="options.icon.fontSet"
          [fontIcon]="options.icon.fontIcon"
          [color]="options.icon.color"
          [svgIcon]="options.icon.svgIcon"
          [inline]="options.icon.inline">
            {{ options.icon.fontSet ? '' : options.icon.fontIcon }}
        </mat-icon>
      </ng-container>

      <mat-spinner class="spinner"
        [diameter]="options.fab ? 58 : options.spinnerSize"
        [color]="options.spinnerColor"
        [mode]="options.mode"
        [value]="options.value"
        [class.active]="options.active && !options.disabled">
      </mat-spinner>
    </button>
  `,
                styles: [`
    :host button{outline:none}:host button.active{cursor:not-allowed}:host button/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.propDecorators = {
    options: [{ type: Input }],
    btnClick: [{ type: Output }],
    onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MatBarButtonComponent {
    constructor() {
        this.btnClick = new EventEmitter();
    }
    /**
     * @param {?} event
     * @return {?}
     */
    onClick(event) {
        if (!this.options.disabled && !this.options.active) {
            this.btnClick.emit(event);
        }
    }
}
MatBarButtonComponent.decorators = [
    { type: Component, args: [{
                // tslint:disable-next-line:component-selector
                selector: 'mat-bar-button',
                template: `
    <button mat-button
      [type]="options.type"
      [color]="options.buttonColor"
      [class.active]="options.active"
      [class.mat-raised-button]="options.raised"
      [class.mat-stroked-button]="options.stroked"
      [class.mat-flat-button]="options.flat"
      [class.fullWidth]="options.fullWidth"
      [ngClass]="options.customClass"
      [disabled]="options.active || options.disabled">

      <ng-container
        *ngIf="options.buttonIcon">
        <mat-icon
          [class.is-mat-icon]="!options.buttonIcon.fontSet"
          [ngClass]="options.buttonIcon.customClass"
          [fontSet]="options.buttonIcon.fontSet"
          [fontIcon]="options.buttonIcon.fontIcon"
          [color]="options.buttonIcon.color"
          [svgIcon]="options.buttonIcon.svgIcon"
          [inline]="options.buttonIcon.inline">
          {{ options.buttonIcon.fontSet ? '' : options.buttonIcon.fontIcon }}
        </mat-icon>
      </ng-container>

      <span>{{ options.text }}</span>

      <mat-progress-bar
        class="bar"
        *ngIf="options.active && !options.disabled"
        [color]="options.barColor"
        [mode]="options.mode"
        [value]="options.value">
      </mat-progress-bar>
    </button>
  `,
                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.propDecorators = {
    options: [{ type: Input }],
    btnClick: [{ type: Output }],
    onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
class MatProgressButtonsModule {
    /**
     * @return {?}
     */
    static forRoot() {
        return {
            ngModule: MatProgressButtonsModule
        };
    }
}
MatProgressButtonsModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatButtonModule,
                    MatProgressBarModule,
                    MatProgressSpinnerModule,
                    MatRippleModule,
                    MatIconModule
                ],
                exports: [
                    MatSpinnerButtonComponent,
                    MatBarButtonComponent
                ],
                declarations: [
                    MatSpinnerButtonComponent,
                    MatBarButtonComponent
                ]
            },] },
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */

export { MatSpinnerButtonComponent, MatBarButtonComponent, MatProgressButtonsModule };
//# sourceMappingURL=mat-progress-buttons.js.map