import { EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Input, Output, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
import { Subscription, fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

var _disabled, _initialized, _subscription, _onChanges;
class SdButton {
    constructor(ref) {
        this.ref = ref;
        _disabled.set(this, false);
        _initialized.set(this, false);
        this.isDisabled = false;
        this.type = 'light';
        this.color = 'secondary';
        this.iconSuffix = false;
        this.fontSet = 'material-icons';
        this.loading = false;
        this.action = new EventEmitter();
        _subscription.set(this, new Subscription());
        _onChanges.set(this, () => {
            this.isDisabled = __classPrivateFieldGet(this, _disabled);
            this.ref.detectChanges();
        });
        this.onClick = ($event) => {
            if (this.loading) {
                return;
            }
            this.action.emit($event);
        };
    }
    set _type(type) {
        this.type = type || 'light';
    }
    set _color(color) {
        this.color = color || 'secondary';
    }
    set disabled(value) {
        __classPrivateFieldSet(this, _disabled, value || false);
        if (__classPrivateFieldGet(this, _initialized)) {
            setTimeout(() => {
                __classPrivateFieldGet(this, _onChanges).call(this);
            }, 0);
        }
    }
    ngOnInit() {
    }
    ngAfterViewInit() {
        setTimeout(() => {
            __classPrivateFieldGet(this, _onChanges).call(this);
        }, 0);
        __classPrivateFieldGet(this, _subscription).add(fromEvent(this.button._elementRef.nativeElement, 'click').pipe(debounceTime(200)).subscribe($event => {
            if (this.loading) {
                return;
            }
            this.action.emit($event);
        }));
        __classPrivateFieldSet(this, _initialized, true);
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _subscription).unsubscribe();
    }
}
_disabled = new WeakMap(), _initialized = new WeakMap(), _subscription = new WeakMap(), _onChanges = new WeakMap();
SdButton.decorators = [
    { type: Component, args: [{
                selector: 'sd-button',
                template: "<button *ngIf=\"type === 'fill'\" aria-hidden=\"true\" [ngStyle]=\"{'width':width}\" class=\"c-button c-fill\" [class.c-square]=\"icon && !title\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-flat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'light'\" aria-hidden=\"true\" [ngStyle]=\"{'width':width}\" class=\"c-button c-light\" [class.c-square]=\"icon && !title\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-flat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'outline'\" aria-hidden=\"true\" [ngStyle]=\"{'width':width}\" class=\"c-button c-outline\"\r\n  [class.c-square]=\"icon && !title\" [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\"\r\n  [color]=\"color\" [disabled]=\"isDisabled\" matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-stroked-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'link'\" aria-hidden=\"true\" [ngStyle]=\"{'width':width}\" class=\"c-button c-link\" [class.c-square]=\"icon && !title\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<ng-template #buttonContent>\r\n  <ng-container *ngIf=\"title\">\r\n    <ng-container *ngIf=\"!iconSuffix\">\r\n      <mat-spinner *ngIf=\"loading\" strokeWidth=\"2\" mode=\"indeterminate\" diameter=\"18\" value=\"100\"\r\n        class=\"d-inline-block\"></mat-spinner>\r\n      <mat-icon *ngIf=\"!loading && icon\" [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n    </ng-container>\r\n    <span class=\"d-inline\" [ngClass]=\"{'ml-8': icon && !iconSuffix, 'mr-8': icon && iconSuffix}\">{{title}}</span>\r\n    <mat-icon *ngIf=\"iconSuffix && icon\" [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!title\">\r\n    <mat-icon [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n  </ng-container>\r\n</ng-template>",
                changeDetection: ChangeDetectionStrategy.OnPush,
                host: {
                    '[attr.disabled]': 'isDisabled ? true : null'
                },
                styles: [".text-black400{color:#757575}:host[disabled=true]{pointer-events:none}:host ::ng-deep button.c-button{font-size:16px;height:40px;line-height:20px;min-width:auto;padding:2px 16px!important}:host ::ng-deep button.c-button .mat-button-wrapper{align-items:center;display:flex;justify-content:center}:host ::ng-deep button.c-button.mat-button-disabled{background-color:#e9e9e9!important;color:#a6a6a6!important}:host ::ng-deep button.c-button.c-square{min-width:auto!important;padding:0!important;width:40px!important}:host ::ng-deep button.c-button.c-sm{font-size:14px!important;font-weight:400;height:32px;line-height:20px!important;padding:2px 16px!important}:host ::ng-deep button.c-button.c-sm mat-icon{font-size:16px!important;height:16px!important;width:16px!important}:host ::ng-deep button.c-button.c-sm.c-square{width:32px!important}:host ::ng-deep button.c-button.c-lg{font-size:16px!important;height:48px;line-height:20px!important;padding:2px 16px!important}:host ::ng-deep button.c-button.c-lg.c-square{width:48px!important}:host ::ng-deep button.c-button:focus{outline:none}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-info,:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-primary{background-color:#2962ff;color:#fff}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-success{background-color:#4caf50;color:#fff}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-warning{background-color:#ff9600;color:#fff}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-danger{background-color:#f82c13;color:#fff}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-secondary{background-color:#212121;color:#fff}:host ::ng-deep button.c-button.c-fill .mat-spinner.mat-progress-spinner circle,:host ::ng-deep button.c-button.c-fill .mat-spinner.mat-spinner circle{stroke:#fff}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-info,:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-primary{background-color:#e7e9ff;color:#2962ff}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-success{background-color:#dbefdc;color:#4caf50}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-warning{background-color:#ffeacc;color:#ff9600}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-danger{background-color:#fed5d0;color:#f82c13}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-secondary{background-color:#e9e9e9;color:#212121}:host ::ng-deep button.c-button.c-outline.mat-stroked-button{border-color:#d3d3d3}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-info,:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-primary{color:#2962ff}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-success{color:#4caf50}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-warning{color:#ff9600}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-danger{color:#f82c13}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-secondary{color:#212121}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-button-disabled{background:transparent!important}:host ::ng-deep button.c-button.c-link.mat-button.mat-info,:host ::ng-deep button.c-button.c-link.mat-button.mat-primary{color:#2962ff}:host ::ng-deep button.c-button.c-link.mat-button.mat-success{color:#4caf50}:host ::ng-deep button.c-button.c-link.mat-button.mat-warning{color:#ff9600}:host ::ng-deep button.c-button.c-link.mat-button.mat-danger{color:#f82c13}:host ::ng-deep button.c-button.c-link.mat-button.mat-secondary{color:#212121}"]
            },] }
];
SdButton.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
SdButton.propDecorators = {
    button: [{ type: ViewChild, args: ['button',] }],
    _type: [{ type: Input, args: ['type',] }],
    _color: [{ type: Input, args: ['color',] }],
    title: [{ type: Input }],
    icon: [{ type: Input }],
    width: [{ type: Input }],
    size: [{ type: Input }],
    tooltip: [{ type: Input }],
    iconSuffix: [{ type: Input }],
    fontSet: [{ type: Input }],
    disabled: [{ type: Input }],
    loading: [{ type: Input }],
    action: [{ type: Output }]
};

class SdButtonModule {
}
SdButtonModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatIconModule,
                    MatButtonModule,
                    MatProgressSpinnerModule,
                    MatTooltipModule
                ],
                declarations: [
                    SdButton
                ],
                exports: [
                    SdButton
                ]
            },] }
];

/*
 * Public API Surface of superdev-angular-core
 */

/**
 * Generated bundle index. Do not edit.
 */

export { SdButton, SdButtonModule };
//# sourceMappingURL=sd-angular-core-button.js.map
