/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { ComponentFactoryResolver, Directive, ElementRef, Input, Renderer2, ViewContainerRef, HostBinding, } from '@angular/core';
import { ElSpinnerComponent } from './spinner.component';
/**
 * Styled spinner directive
 *
 * @stacked-example(Spinner Showcase, spinner/spinner-card.component)
 *
 *
 * ```ts
 * <el-card [elSpinner]="loading" elSpinnerStatus="danger">
 *   <el-card-body>Card Content</el-card-body>
 * </el-card>
 * ```
 *
 * ### Installation
 *
 * Import `ElSpinnerModule` to your feature module.
 * ```ts
 * @NgModule({
 *   imports: [
 *     // ...
 *     ElSpinnerModule,
 *   ],
 * })
 * export class PageModule { }
 * ```
 * ### Usage
 *
 * Could be colored using `status` property
 *
 * @stacked-example(Spinner Colors, spinner/spinner-colors.component)
 *
 * Available in different sizes with `size` property:
 *
 * @stacked-example(Spinner Sizes, spinner/spinner-sizes.component)
 *
 * It is also possible to place it into the button:
 * @stacked-example(Buttons with spinner, spinner/spinner-button.component)
 *
 * Or tabs:
 * @stacked-example(Spinner in tabs, spinner/spinner-tabs.component)
 */
var ElSpinnerDirective = /** @class */ (function () {
    function ElSpinnerDirective(directiveView, componentFactoryResolver, renderer, directiveElement) {
        this.directiveView = directiveView;
        this.componentFactoryResolver = componentFactoryResolver;
        this.renderer = renderer;
        this.directiveElement = directiveElement;
        this.shouldShow = false;
        /**
         * Spinner size. Possible values: `tiny`, `small`, `medium` (default), `large`, `giant`
         */
        this.spinnerSize = 'medium';
        this.isSpinnerExist = false;
    }
    Object.defineProperty(ElSpinnerDirective.prototype, "elSpinner", {
        /**
         * Directive value - show or hide spinner
         * @param {boolean} val
         */
        set: function (val) {
            if (this.componentFactory) {
                if (val) {
                    this.show();
                }
                else {
                    this.hide();
                }
            }
            else {
                this.shouldShow = val;
            }
        },
        enumerable: true,
        configurable: true
    });
    ElSpinnerDirective.prototype.ngOnInit = function () {
        this.componentFactory = this.componentFactoryResolver.resolveComponentFactory(ElSpinnerComponent);
        if (this.shouldShow) {
            this.show();
        }
    };
    ElSpinnerDirective.prototype.hide = function () {
        if (this.isSpinnerExist) {
            this.directiveView.remove();
            this.isSpinnerExist = false;
        }
    };
    ElSpinnerDirective.prototype.show = function () {
        if (!this.isSpinnerExist) {
            this.spinner = this.directiveView.createComponent(this.componentFactory);
            this.setInstanceInputs(this.spinner.instance);
            this.spinner.changeDetectorRef.detectChanges();
            this.renderer.appendChild(this.directiveElement.nativeElement, this.spinner.location.nativeElement);
            this.isSpinnerExist = true;
        }
    };
    ElSpinnerDirective.prototype.setInstanceInputs = function (instance) {
        instance.message = this.spinnerMessage;
        typeof this.spinnerStatus !== 'undefined' && (instance.status = this.spinnerStatus);
        typeof this.spinnerSize !== 'undefined' && (instance.size = this.spinnerSize);
    };
    __decorate([
        Input('elSpinnerMessage'),
        __metadata("design:type", String)
    ], ElSpinnerDirective.prototype, "spinnerMessage", void 0);
    __decorate([
        Input('elSpinnerStatus'),
        __metadata("design:type", String)
    ], ElSpinnerDirective.prototype, "spinnerStatus", void 0);
    __decorate([
        Input('elSpinnerSize'),
        __metadata("design:type", String)
    ], ElSpinnerDirective.prototype, "spinnerSize", void 0);
    __decorate([
        Input('elSpinner'),
        __metadata("design:type", Boolean),
        __metadata("design:paramtypes", [Boolean])
    ], ElSpinnerDirective.prototype, "elSpinner", null);
    __decorate([
        HostBinding('class.el-spinner-container'),
        __metadata("design:type", Object)
    ], ElSpinnerDirective.prototype, "isSpinnerExist", void 0);
    ElSpinnerDirective = __decorate([
        Directive({ selector: '[elSpinner]' }),
        __metadata("design:paramtypes", [ViewContainerRef,
            ComponentFactoryResolver,
            Renderer2,
            ElementRef])
    ], ElSpinnerDirective);
    return ElSpinnerDirective;
}());
export { ElSpinnerDirective };
//# sourceMappingURL=spinner.directive.js.map