/**
 * @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 { Directive, Input, HostBinding } from '@angular/core';
import { convertToBoolProperty } from '../helpers';
/**
 * Basic input directive.
 *
 * ```html
 * <input elInput></input>
 * ```
 *
 * ### Installation
 *
 * Import `ElInputModule` to your feature module.
 * ```ts
 * @NgModule({
 *   imports: [
 *     // ...
 *     ElInputModule,
 *   ],
 * })
 * export class PageModule { }
 * ```
 * ### Usage
 *
 * Default input size is `medium`:
 * @stacked-example(Showcase, input/input-showcase.component)
 *
 * Inputs are available in multiple colors using `status` property:
 * @stacked-example(Input Colors, input/input-colors.component)
 *
 * There are three input sizes:
 *
 * @stacked-example(Input Sizes, input/input-sizes.component)
 *
 * Inputs available in different shapes, which could be combined with the other properties:
 * @stacked-example(Input Shapes, input/input-shapes.component)
 *
 * `elInput` could be applied to the following selectors - `input`, `textarea`:
 * @stacked-example(Input Elements, input/input-types.component)
 *
 * You can add `fullWidth` attribute to make element fill container:
 * @stacked-example(Full width inputs, input/input-full-width.component)
 *
 * Or you can bind control with form controls or ngModel:
 * @stacked-example(Input form binding, input/input-form.component)
 *
 * @styles
 *
 * input-background-color:
 * input-border-style:
 * input-border-width:
 * input-outline-color:
 * input-outline-width:
 * input-placeholder-text-color:
 * input-placeholder-text-font-family:
 * input-text-color:
 * input-text-font-family:
 * input-border-color:
 * input-focus-border-color:
 * input-hover-border-color:
 * input-disabled-border-color:
 * input-disabled-background-color:
 * input-disabled-text-color:
 * input-disabled-placeholder-text-color:
 * input-primary-border-color:
 * input-primary-focus-border-color:
 * input-primary-hover-border-color:
 * input-success-border-color:
 * input-success-focus-border-color:
 * input-success-hover-border-color:
 * input-info-border-color:
 * input-info-focus-border-color:
 * input-info-hover-border-color:
 * input-warning-border-color:
 * input-warning-focus-border-color:
 * input-warning-hover-border-color:
 * input-danger-border-color:
 * input-danger-focus-border-color:
 * input-danger-hover-border-color:
 * input-rectangle-border-radius:
 * input-semi-round-border-radius:
 * input-round-border-radius:
 * input-tiny-text-font-size:
 * input-tiny-text-font-weight:
 * input-tiny-text-line-height:
 * input-tiny-placeholder-text-font-size:
 * input-tiny-placeholder-text-font-weight:
 * input-tiny-placeholder-text-line-height:
 * input-tiny-padding:
 * input-tiny-max-width:
 * input-small-text-font-size:
 * input-small-text-font-weight:
 * input-small-text-line-height:
 * input-small-placeholder-text-font-size:
 * input-small-placeholder-text-font-weight:
 * input-small-placeholder-text-line-height:
 * input-small-padding:
 * input-small-max-width:
 * input-medium-text-font-size:
 * input-medium-text-font-weight:
 * input-medium-text-line-height:
 * input-medium-placeholder-text-font-size:
 * input-medium-placeholder-text-font-weight:
 * input-medium-placeholder-text-line-height:
 * input-medium-padding:
 * input-medium-max-width:
 * input-large-text-font-size:
 * input-large-text-font-weight:
 * input-large-text-line-height:
 * input-large-placeholder-text-font-size:
 * input-large-placeholder-text-font-weight:
 * input-large-placeholder-text-line-height:
 * input-large-padding:
 * input-large-max-width:
 * input-giant-text-font-size:
 * input-giant-text-font-weight:
 * input-giant-text-line-height:
 * input-giant-placeholder-text-font-size:
 * input-giant-placeholder-text-font-weight:
 * input-giant-placeholder-text-line-height:
 * input-giant-padding:
 * input-giant-max-width:
 */
let ElInputDirective = class ElInputDirective {
    /**
     * Basic input directive.
     *
     * ```html
     * <input elInput></input>
     * ```
     *
     * ### Installation
     *
     * Import `ElInputModule` to your feature module.
     * ```ts
     * @NgModule({
     *   imports: [
     *     // ...
     *     ElInputModule,
     *   ],
     * })
     * export class PageModule { }
     * ```
     * ### Usage
     *
     * Default input size is `medium`:
     * @stacked-example(Showcase, input/input-showcase.component)
     *
     * Inputs are available in multiple colors using `status` property:
     * @stacked-example(Input Colors, input/input-colors.component)
     *
     * There are three input sizes:
     *
     * @stacked-example(Input Sizes, input/input-sizes.component)
     *
     * Inputs available in different shapes, which could be combined with the other properties:
     * @stacked-example(Input Shapes, input/input-shapes.component)
     *
     * `elInput` could be applied to the following selectors - `input`, `textarea`:
     * @stacked-example(Input Elements, input/input-types.component)
     *
     * You can add `fullWidth` attribute to make element fill container:
     * @stacked-example(Full width inputs, input/input-full-width.component)
     *
     * Or you can bind control with form controls or ngModel:
     * @stacked-example(Input form binding, input/input-form.component)
     *
     * @styles
     *
     * input-background-color:
     * input-border-style:
     * input-border-width:
     * input-outline-color:
     * input-outline-width:
     * input-placeholder-text-color:
     * input-placeholder-text-font-family:
     * input-text-color:
     * input-text-font-family:
     * input-border-color:
     * input-focus-border-color:
     * input-hover-border-color:
     * input-disabled-border-color:
     * input-disabled-background-color:
     * input-disabled-text-color:
     * input-disabled-placeholder-text-color:
     * input-primary-border-color:
     * input-primary-focus-border-color:
     * input-primary-hover-border-color:
     * input-success-border-color:
     * input-success-focus-border-color:
     * input-success-hover-border-color:
     * input-info-border-color:
     * input-info-focus-border-color:
     * input-info-hover-border-color:
     * input-warning-border-color:
     * input-warning-focus-border-color:
     * input-warning-hover-border-color:
     * input-danger-border-color:
     * input-danger-focus-border-color:
     * input-danger-hover-border-color:
     * input-rectangle-border-radius:
     * input-semi-round-border-radius:
     * input-round-border-radius:
     * input-tiny-text-font-size:
     * input-tiny-text-font-weight:
     * input-tiny-text-line-height:
     * input-tiny-placeholder-text-font-size:
     * input-tiny-placeholder-text-font-weight:
     * input-tiny-placeholder-text-line-height:
     * input-tiny-padding:
     * input-tiny-max-width:
     * input-small-text-font-size:
     * input-small-text-font-weight:
     * input-small-text-line-height:
     * input-small-placeholder-text-font-size:
     * input-small-placeholder-text-font-weight:
     * input-small-placeholder-text-line-height:
     * input-small-padding:
     * input-small-max-width:
     * input-medium-text-font-size:
     * input-medium-text-font-weight:
     * input-medium-text-line-height:
     * input-medium-placeholder-text-font-size:
     * input-medium-placeholder-text-font-weight:
     * input-medium-placeholder-text-line-height:
     * input-medium-padding:
     * input-medium-max-width:
     * input-large-text-font-size:
     * input-large-text-font-weight:
     * input-large-text-line-height:
     * input-large-placeholder-text-font-size:
     * input-large-placeholder-text-font-weight:
     * input-large-placeholder-text-line-height:
     * input-large-padding:
     * input-large-max-width:
     * input-giant-text-font-size:
     * input-giant-text-font-weight:
     * input-giant-text-line-height:
     * input-giant-placeholder-text-font-size:
     * input-giant-placeholder-text-font-weight:
     * input-giant-placeholder-text-line-height:
     * input-giant-padding:
     * input-giant-max-width:
     */
    constructor() {
        /**
         * Field size modifications. Possible values: `small`, `medium` (default), `large`.
         */
        this.fieldSize = 'medium';
        /**
         * Field status (adds specific styles):
         * `primary`, `info`, `success`, `warning`, `danger`
         */
        this.status = '';
        /**
         * Field shapes modifications. Possible values: `rectangle` (default), `round`, `semi-round`.
         */
        this.shape = 'rectangle';
        this._fullWidth = false;
    }
    /**
     * If set element will fill container. `false` by default.
     */
    get fullWidth() {
        return this._fullWidth;
    }
    set fullWidth(value) {
        this._fullWidth = convertToBoolProperty(value);
    }
    get tiny() {
        return this.fieldSize === 'tiny';
    }
    get small() {
        return this.fieldSize === 'small';
    }
    get medium() {
        return this.fieldSize === 'medium';
    }
    get large() {
        return this.fieldSize === 'large';
    }
    get giant() {
        return this.fieldSize === 'giant';
    }
    get primary() {
        return this.status === 'primary';
    }
    get info() {
        return this.status === 'info';
    }
    get success() {
        return this.status === 'success';
    }
    get warning() {
        return this.status === 'warning';
    }
    get danger() {
        return this.status === 'danger';
    }
    get rectangle() {
        return this.shape === 'rectangle';
    }
    get semiRound() {
        return this.shape === 'semi-round';
    }
    get round() {
        return this.shape === 'round';
    }
};
__decorate([
    Input(),
    __metadata("design:type", String)
], ElInputDirective.prototype, "fieldSize", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], ElInputDirective.prototype, "status", void 0);
__decorate([
    Input(),
    __metadata("design:type", String)
], ElInputDirective.prototype, "shape", void 0);
__decorate([
    Input(),
    HostBinding('class.input-full-width'),
    __metadata("design:type", Boolean),
    __metadata("design:paramtypes", [Boolean])
], ElInputDirective.prototype, "fullWidth", null);
__decorate([
    HostBinding('class.size-tiny'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "tiny", null);
__decorate([
    HostBinding('class.size-small'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "small", null);
__decorate([
    HostBinding('class.size-medium'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "medium", null);
__decorate([
    HostBinding('class.size-large'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "large", null);
__decorate([
    HostBinding('class.size-giant'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "giant", null);
__decorate([
    HostBinding('class.status-primary'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "primary", null);
__decorate([
    HostBinding('class.status-info'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "info", null);
__decorate([
    HostBinding('class.status-success'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "success", null);
__decorate([
    HostBinding('class.status-warning'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "warning", null);
__decorate([
    HostBinding('class.status-danger'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "danger", null);
__decorate([
    HostBinding('class.shape-rectangle'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "rectangle", null);
__decorate([
    HostBinding('class.shape-semi-round'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "semiRound", null);
__decorate([
    HostBinding('class.shape-round'),
    __metadata("design:type", Object),
    __metadata("design:paramtypes", [])
], ElInputDirective.prototype, "round", null);
ElInputDirective = __decorate([
    Directive({
        selector: 'input[elInput],textarea[elInput]',
    })
], ElInputDirective);
export { ElInputDirective };
//# sourceMappingURL=input.directive.js.map