import * as i0 from '@angular/core';
import { Directive, Input, EventEmitter, Output, HostBinding, HostListener, Component, NgModule } from '@angular/core';
import { first, finalize } from 'rxjs/operators';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i3 from '@aztrix/components/spinner';
import { SpinnerModule } from '@aztrix/components/spinner';
import { mapColor } from '@aztrix/helpers';

class AbstractButton {
    constructor() {
        this._labelHideMobile = false;
        this._smallButton = false;
        this._bigButton = false;
        this._fullWidth = false;
        this._filled = false;
        this._outline = false;
        this._iconButton = false;
        this._hoverLabel = false;
        this._lowercase = false;
        this._hover = true;
        this._loading = false;
        this.disabled = false;
    }
    set labelHideMobile(labelHideMobile) {
        this._labelHideMobile = typeof labelHideMobile === 'boolean' ? labelHideMobile : true;
    }
    set smallButton(smallButton) {
        this._smallButton = typeof smallButton === 'boolean' ? smallButton : true;
    }
    set bigButton(bigButton) {
        this._bigButton = typeof bigButton === 'boolean' ? bigButton : true;
    }
    set fullWidth(fullWidth) {
        this._fullWidth = typeof fullWidth === 'boolean' ? fullWidth : true;
    }
    set filled(filled) {
        this._filled = typeof filled === 'boolean' ? filled : true;
    }
    set outline(outline) {
        this._outline = typeof outline === 'boolean' ? outline : true;
    }
    // eslint-disable-next-line @angular-eslint/no-input-rename
    set iconButton(iconButton) {
        this._iconButton = typeof iconButton === 'boolean' ? iconButton : true;
    }
    set hoverLabel(hoverLabel) {
        this._hoverLabel = typeof hoverLabel === 'boolean' ? hoverLabel : true;
    }
    set lowercase(lowercase) {
        this._lowercase = typeof lowercase === 'boolean' ? lowercase : true;
    }
    set hover(hover) {
        this._hover = typeof hover === 'boolean' ? hover : true;
    }
    set loading(loading) {
        this._loading = typeof loading === 'boolean' ? loading : true;
    }
}
AbstractButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AbstractButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
AbstractButton.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: AbstractButton, inputs: { type: "type", color: "color", icon: "icon", labelHideMobile: "labelHideMobile", smallButton: "smallButton", bigButton: "bigButton", fullWidth: "fullWidth", filled: "filled", outline: "outline", iconButton: ["icon-button", "iconButton"], hoverLabel: "hoverLabel", lowercase: "lowercase", hover: "hover", loading: "loading", disabled: "disabled" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AbstractButton, decorators: [{
            type: Directive
        }], propDecorators: { type: [{
                type: Input
            }], color: [{
                type: Input
            }], icon: [{
                type: Input
            }], labelHideMobile: [{
                type: Input
            }], smallButton: [{
                type: Input
            }], bigButton: [{
                type: Input
            }], fullWidth: [{
                type: Input
            }], filled: [{
                type: Input
            }], outline: [{
                type: Input
            }], iconButton: [{
                type: Input,
                args: ['icon-button']
            }], hoverLabel: [{
                type: Input
            }], lowercase: [{
                type: Input
            }], hover: [{
                type: Input
            }], loading: [{
                type: Input
            }], disabled: [{
                type: Input
            }] } });

class AutoDisableButtonDirective {
    constructor(changeDetector) {
        this.changeDetector = changeDetector;
        this.axAutoDisableButtonChange = new EventEmitter();
        this.axAutoDisableButtonError = new EventEmitter();
        this._pending = false;
        this._enabled = true;
    }
    set enabled(value) {
        this._enabled = value;
    }
    get disabledClass() {
        return !this._enabled || this._pending;
    }
    get pendingClass() {
        return this._pending;
    }
    onClick() {
        if (this._enabled && !this._pending) {
            this._pending = true;
            this.changeDetector.markForCheck();
            (this.action instanceof Function ? this.action() : this.action)
                .pipe(first(), finalize(() => {
                this._pending = false;
                this.changeDetector.markForCheck();
            }))
                .subscribe((result) => this.axAutoDisableButtonChange.emit(result), (err) => this.axAutoDisableButtonError.next(err));
        }
    }
}
AutoDisableButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AutoDisableButtonDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
AutoDisableButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: AutoDisableButtonDirective, selector: "[axAutoDisableButton]", inputs: { action: ["axAutoDisableButton", "action"], enabled: "enabled" }, outputs: { axAutoDisableButtonChange: "axAutoDisableButtonChange", axAutoDisableButtonError: "axAutoDisableButtonError" }, host: { listeners: { "click": "onClick()" }, properties: { "class.disabled": "this.disabledClass", "class.pending": "this.pendingClass" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: AutoDisableButtonDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[axAutoDisableButton]',
                }]
        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { action: [{
                type: Input,
                args: ['axAutoDisableButton']
            }], axAutoDisableButtonChange: [{
                type: Output
            }], axAutoDisableButtonError: [{
                type: Output
            }], enabled: [{
                type: Input
            }], disabledClass: [{
                type: HostBinding,
                args: ['class.disabled']
            }], pendingClass: [{
                type: HostBinding,
                args: ['class.pending']
            }], onClick: [{
                type: HostListener,
                args: ['click']
            }] } });

/** Mixin to augment a directive with a `color` property. */
function mixinColor(base, defaultColor) {
    return class extends base {
        constructor(...args) {
            super(...args);
            this._color = '';
            this.defaultColor = defaultColor;
            this.color = '';
        }
        get color() {
            return this._color;
        }
        set color(value) {
            const color = this._prefixColors(mapColor(value || this.defaultColor));
            if (color !== this._color) {
                if (this._color) {
                    for (const c of this._color.split(' ')) {
                        if (c.length) {
                            this._elementRef.nativeElement.classList.remove(c);
                        }
                    }
                }
                if (color) {
                    for (const c of color.split(' ')) {
                        if (c.length) {
                            this._elementRef.nativeElement.classList.add(c);
                        }
                    }
                }
                this._color = color;
            }
        }
        _prefixColors(color) {
            return color
                .split(' ')
                .map((c) => (c ? `ax-${c}` : ''))
                .join(' ');
        }
    };
}

class ButtonBase {
    constructor(_elementRef) {
        this._elementRef = _elementRef;
    }
}
// eslint-disable-next-line @typescript-eslint/naming-convention
const _ButtonMixinBase = mixinColor(ButtonBase);
/* eslint-disable @angular-eslint/no-inputs-metadata-property */
class ButtonDirective extends _ButtonMixinBase {
    constructor(_el, _renderer) {
        super(_el);
        this._labelHideMobile = false;
        this._smallButton = false;
        this._bigButton = false;
        this._fullWidth = false;
        this._filled = false;
        this._outline = false;
        this._iconButton = false;
        this._hoverLabel = false;
        this._noHover = false;
        this._lowercase = false;
        this.disabled = false;
        _renderer.addClass(_el.nativeElement, 'ax-button');
    }
    set labelHideMobile(labelHideMobile) {
        this._labelHideMobile = typeof labelHideMobile === 'boolean' ? labelHideMobile : true;
    }
    set smallButton(smallButton) {
        this._smallButton = typeof smallButton === 'boolean' ? smallButton : true;
    }
    set bigButton(bigButton) {
        this._bigButton = typeof bigButton === 'boolean' ? bigButton : true;
    }
    set fullWidth(fullWidth) {
        this._fullWidth = typeof fullWidth === 'boolean' ? fullWidth : true;
    }
    set filled(filled) {
        this._filled = typeof filled === 'boolean' ? filled : true;
    }
    set outline(outline) {
        this._outline = typeof outline === 'boolean' ? outline : true;
    }
    // eslint-disable-next-line @angular-eslint/no-input-rename
    set iconButton(iconButton) {
        this._iconButton = typeof iconButton === 'boolean' ? iconButton : true;
    }
    set hoverLabel(hoverLabel) {
        this._hoverLabel = typeof hoverLabel === 'boolean' ? hoverLabel : true;
    }
    set hover(hover) {
        this._noHover = typeof hover === 'boolean' ? !hover : true;
    }
    set lowercase(lowercase) {
        this._lowercase = typeof lowercase === 'boolean' ? lowercase : true;
    }
}
ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.1.5", type: ButtonDirective, selector: "[axButton]", inputs: { color: "color", labelHideMobile: "labelHideMobile", smallButton: "smallButton", bigButton: "bigButton", fullWidth: "fullWidth", filled: "filled", outline: "outline", iconButton: ["icon-button", "iconButton"], hoverLabel: "hoverLabel", hover: "hover", lowercase: "lowercase", disabled: "disabled" }, host: { properties: { "class.hide-label-mobile": "this._labelHideMobile", "class.small": "this._smallButton", "class.big-button": "this._bigButton", "class.button-full-width": "this._fullWidth", "class.button-filled": "this._filled", "class.button-outline": "this._outline", "class.icon-button": "this._iconButton", "class.has-hover-label": "this._hoverLabel", "class.no-hover": "this._noHover", "class.button-lowercase": "this._lowercase", "class.is-disabled": "this.disabled" } }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ButtonDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[axButton]',
                    inputs: ['color'],
                }]
        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { _labelHideMobile: [{
                type: HostBinding,
                args: ['class.hide-label-mobile']
            }], labelHideMobile: [{
                type: Input
            }], _smallButton: [{
                type: HostBinding,
                args: ['class.small']
            }], smallButton: [{
                type: Input
            }], _bigButton: [{
                type: HostBinding,
                args: ['class.big-button']
            }], bigButton: [{
                type: Input
            }], _fullWidth: [{
                type: HostBinding,
                args: ['class.button-full-width']
            }], fullWidth: [{
                type: Input
            }], _filled: [{
                type: HostBinding,
                args: ['class.button-filled']
            }], filled: [{
                type: Input
            }], _outline: [{
                type: HostBinding,
                args: ['class.button-outline']
            }], outline: [{
                type: Input
            }], _iconButton: [{
                type: HostBinding,
                args: ['class.icon-button']
            }], iconButton: [{
                type: Input,
                args: ['icon-button']
            }], _hoverLabel: [{
                type: HostBinding,
                args: ['class.has-hover-label']
            }], hoverLabel: [{
                type: Input
            }], _noHover: [{
                type: HostBinding,
                args: ['class.no-hover']
            }], hover: [{
                type: Input
            }], _lowercase: [{
                type: HostBinding,
                args: ['class.button-lowercase']
            }], lowercase: [{
                type: Input
            }], disabled: [{
                type: Input
            }, {
                type: HostBinding,
                args: ['class.is-disabled']
            }] } });

class ButtonComponent extends AbstractButton {
    constructor() {
        super(...arguments);
        this.pointerEvents = 'auto';
    }
    ngOnChanges(changes) {
        if (changes.disabled !== undefined || changes.loading !== undefined) {
            this.pointerEvents = this.disabled || this._loading ? 'none' : 'auto';
        }
    }
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: ButtonComponent, selector: "ax-button", host: { properties: { "style.pointer-events": "this.pointerEvents" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `<button
    axButton
    [attr.type]="type"
    [color]="color"
    [hover]="hover"
    [labelHideMobile]="_labelHideMobile"
    [smallButton]="_smallButton"
    [fullWidth]="_fullWidth"
    [filled]="_filled"
    [outline]="_outline"
    [icon-button]="_iconButton"
    [hover]="_hover"
    [hoverLabel]="_hoverLabel"
    [lowercase]="_lowercase"
    [disabled]="disabled || _loading"
  >
    <ax-icon *ngIf="icon && !_loading" [name]="icon" class="icon"></ax-icon>
    <ax-spinner class="button-spinner" *ngIf="_loading"></ax-spinner>
    <ng-content></ng-content>
  </button>`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i3.SpinnerComponent, selector: "ax-spinner" }, { kind: "directive", type: ButtonDirective, selector: "[axButton]", inputs: ["color", "labelHideMobile", "smallButton", "bigButton", "fullWidth", "filled", "outline", "icon-button", "hoverLabel", "hover", "lowercase", "disabled"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ax-button',
                    template: `<button
    axButton
    [attr.type]="type"
    [color]="color"
    [hover]="hover"
    [labelHideMobile]="_labelHideMobile"
    [smallButton]="_smallButton"
    [fullWidth]="_fullWidth"
    [filled]="_filled"
    [outline]="_outline"
    [icon-button]="_iconButton"
    [hover]="_hover"
    [hoverLabel]="_hoverLabel"
    [lowercase]="_lowercase"
    [disabled]="disabled || _loading"
  >
    <ax-icon *ngIf="icon && !_loading" [name]="icon" class="icon"></ax-icon>
    <ax-spinner class="button-spinner" *ngIf="_loading"></ax-spinner>
    <ng-content></ng-content>
  </button>`,
                }]
        }], propDecorators: { pointerEvents: [{
                type: HostBinding,
                args: ['style.pointer-events']
            }] } });

class ButtonModule {
}
ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: ButtonModule, declarations: [ButtonDirective, AutoDisableButtonDirective, ButtonComponent], imports: [CommonModule, IconsModule, SpinnerModule], exports: [ButtonDirective, AutoDisableButtonDirective, ButtonComponent] });
ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ButtonModule, imports: [CommonModule, IconsModule, SpinnerModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: ButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [ButtonDirective, AutoDisableButtonDirective, ButtonComponent],
                    imports: [CommonModule, IconsModule, SpinnerModule],
                    exports: [ButtonDirective, AutoDisableButtonDirective, ButtonComponent],
                }]
        }] });

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

export { AbstractButton, AutoDisableButtonDirective, ButtonComponent, ButtonDirective, ButtonModule, mixinColor };
//# sourceMappingURL=aztrix-components-button.mjs.map
//# sourceMappingURL=aztrix-components-button.mjs.map
