import { Component, Input, HostBinding, Renderer2, ElementRef, HostListener, } from '@angular/core';
export class RButtonComponent {
    constructor(renderer, hostElement) {
        this.renderer = renderer;
        this.hostElement = hostElement;
        this.size = 'medium';
        this.status = 'primary';
        this.shape = 'rectangle';
        this.appearance = 'filled';
        this._fullWidth = false;
        this._disabled = false;
    }
    getIcon() {
        return this.getAttribute('icon');
    }
    getAttribute(attribute) {
        return this.hostElement.nativeElement.getAttribute(attribute);
    }
    get filled() {
        return this.appearance === 'filled';
    }
    set filled(value) {
        if (value) {
            this.appearance = 'filled';
        }
    }
    get ghost() {
        return this.appearance === 'ghost';
    }
    set ghost(value) {
        if (value) {
            this.appearance = 'ghost';
        }
    }
    get outline() {
        return this.appearance === 'outline';
    }
    set outline(value) {
        if (value) {
            this.appearance = 'outline';
        }
    }
    get fullWidth() {
        return this._fullWidth;
    }
    set fullWidth(value) {
        this._fullWidth = value;
    }
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        this._disabled = value;
        this.renderer.setProperty(this.hostElement.nativeElement, 'disabled', this.disabled);
    }
    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 basic() {
        return this.status === 'basic';
    }
    get rectangle() {
        return this.shape === 'rectangle';
    }
    get roundedPill() {
        return this.shape === 'rounded-pill';
    }
    get small() {
        return this.size === 'small';
    }
    get medium() {
        return this.size === 'medium';
    }
    get large() {
        return this.size === 'large';
    }
    get iconLeft() {
        const el = this.hostElement.nativeElement;
        const icon = this.iconElement;
        return !!(icon && this.firstChildNotComment(el) === icon);
    }
    get iconRight() {
        const el = this.hostElement.nativeElement;
        const icon = this.iconElement;
        return !!(icon && this.lastChildNotComment(el) === icon);
    }
    onClick(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopImmediatePropagation();
        }
    }
    get iconElement() {
        const el = this.hostElement.nativeElement;
        return el.querySelector('r-icon');
    }
    firstChildNotComment(node) {
        const children = Array
            .from(node.childNodes)
            .filter((child) => child.nodeType !== Node.COMMENT_NODE);
        return children[0];
    }
    lastChildNotComment(node) {
        const children = Array
            .from(node.childNodes)
            .filter((child) => child.nodeType !== Node.COMMENT_NODE);
        return children[children.length - 1];
    }
}
RButtonComponent.decorators = [
    { type: Component, args: [{
                selector: `
    input[type="button"][r-button],
    input[type="submit"][r-button],
    a[r-button],
    button[r-button],
    button[r-icon-button]
  `,
                template: `
    <ng-content></ng-content>
  `,
                styles: [":host{transition-duration:.15s;transition-property:background-color,border-color,box-shadow,color;transition-timing-function:ease-in;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-weight:700;text-transform:uppercase;outline:none;font-family:inherit;margin:6px;cursor:pointer}:host,:host:focus,:host:hover{text-decoration:none}:host.full-width{width:100%}"]
            },] }
];
RButtonComponent.ctorParameters = () => [
    { type: Renderer2 },
    { type: ElementRef }
];
RButtonComponent.propDecorators = {
    size: [{ type: Input }],
    status: [{ type: Input }],
    shape: [{ type: Input }],
    appearance: [{ type: Input }],
    filled: [{ type: Input }, { type: HostBinding, args: ['class.appearance-filled',] }],
    ghost: [{ type: Input }, { type: HostBinding, args: ['class.appearance-ghost',] }],
    outline: [{ type: Input }, { type: HostBinding, args: ['class.appearance-outline',] }],
    fullWidth: [{ type: Input }, { type: HostBinding, args: ['class.full-width',] }],
    disabled: [{ type: Input }, { type: HostBinding, args: ['attr.aria-disabled',] }, { type: HostBinding, args: ['class.btn-disabled',] }],
    primary: [{ type: HostBinding, args: ['class.status-primary',] }],
    info: [{ type: HostBinding, args: ['class.status-info',] }],
    success: [{ type: HostBinding, args: ['class.status-success',] }],
    warning: [{ type: HostBinding, args: ['class.status-warning',] }],
    danger: [{ type: HostBinding, args: ['class.status-danger',] }],
    basic: [{ type: HostBinding, args: ['class.status-basic',] }],
    rectangle: [{ type: HostBinding, args: ['class.shape-rectangle',] }],
    roundedPill: [{ type: HostBinding, args: ['class.shape-rounded-pill',] }],
    small: [{ type: HostBinding, args: ['class.size-small',] }],
    medium: [{ type: HostBinding, args: ['class.size-medium',] }],
    large: [{ type: HostBinding, args: ['class.size-large',] }],
    iconLeft: [{ type: HostBinding, args: ['class.icon-start',] }],
    iconRight: [{ type: HostBinding, args: ['class.icon-end',] }],
    onClick: [{ type: HostListener, args: ['click', ['$event'],] }]
};
//# sourceMappingURL=button.component.js.map