import { ChangeDetectionStrategy, Component, computed, ElementRef, viewChild } from '@angular/core';
import { AbstractProgressButtonDirective } from './abstract.progress.button.directive';
import { distinctUntilChanged, map, shareReplay } from 'rxjs';
import { spaceSeparatedCssClasses } from '@dereekb/util';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { toObservable, toSignal } from '@angular/core/rxjs-interop';
import { NgClass, NgStyle } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/button";
import * as i2 from "@angular/material/icon";
export class DbxProgressSpinnerButtonComponent extends AbstractProgressButtonDirective {
    buttonRef = viewChild.required('button', { read: (ElementRef) });
    buttonCssArraySignal = computed(() => {
        const config = this.configSignal();
        const classes = [...this.baseCssClassSignal()];
        if (config?.iconOnly) {
            classes.push('mat-mdc-icon-button');
        }
        if (config?.fab) {
            classes.push('dbx-progress-spinner-fab');
        }
        return classes;
    });
    buttonCss$ = toObservable(this.buttonCssArraySignal).pipe(map(spaceSeparatedCssClasses), distinctUntilChanged(), shareReplay(1));
    spinnerSizeSignal = computed(() => {
        const config = this.configSignal();
        const buttonRef = this.buttonRef();
        const elem = buttonRef.nativeElement;
        const height = elem.clientHeight;
        let size;
        if (config != null) {
            if (config.iconOnly) {
                if (config.fab) {
                    size = 48;
                }
                else {
                    size = height;
                }
            }
            else {
                size = config.spinnerSize;
            }
        }
        if (!size) {
            const minimumSpinnerSize = 24;
            const spinnerRatio = config?.spinnerRatio ?? 0.33;
            const targetSpinnerSize = height * Math.min(1, spinnerRatio);
            size = Math.min(height, Math.max(minimumSpinnerSize, targetSpinnerSize));
        }
        return size;
    });
    buttonCssSignal = toSignal(this.buttonCss$);
    showTextSignal = computed(() => {
        const config = this.configSignal();
        return !(config?.fab || config?.iconOnly);
    });
    showTextButtonIconSignal = computed(() => {
        const config = this.configSignal();
        const showText = this.showTextSignal();
        return showText && config?.buttonIcon; // shows the button icon with showing the text.
    });
    showIconSignal = computed(() => {
        const config = this.configSignal();
        return (config &&
            config.buttonIcon && // button icon must be defined
            !this.showTextSignal()); // show icon if either fab or iconOnly is true
    });
    customSpinnerStyleSignal = computed(() => {
        const customSpinnerColor = this.configSignal()?.customSpinnerColor;
        return customSpinnerColor ? { stroke: customSpinnerColor } : undefined;
    });
    customSpinnerStyleClassSignal = computed(() => {
        const hasCustomStyle = Boolean(this.customSpinnerStyleSignal());
        return hasCustomStyle ? { 'dbx-progress-spinner-custom': true } : undefined;
    });
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxProgressSpinnerButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DbxProgressSpinnerButtonComponent, isStandalone: true, selector: "dbx-progress-spinner-button,dbx-spinner-button", viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, read: ElementRef, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (showTextSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"showProgressSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\">\n        {{ configSignal()?.buttonIcon?.fontSet ? '' : configSignal()?.buttonIcon?.fontIcon }}\n      </mat-icon>\n    }\n    <span class=\"button-text\" [class.working]=\"showProgressSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showIconSignal()) {\n    <!-- Use ng-container to prevent mat-icon from being a child of the button which changes the behavior -->\n    <ng-container>\n      <mat-icon class=\"mat-fab-icon\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.fab && configSignal()?.buttonIcon?.inline!\">\n        {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n      </mat-icon>\n    </ng-container>\n  }\n  @if (showProgressSignal()) {\n    <mat-spinner class=\"spinner\" [diameter]=\"spinnerSizeSignal()\" [color]=\"configSignal()?.spinnerColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\n  }\n</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;--mdc-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mdc-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mdc-icon-button-icon-size: 36px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mdc-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mdc-icon-button-icon-size: 48px}:host button.fullWidth{width:100%}:host button .mat-mdc-progress-spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .mat-mdc-progress-spinner.working{opacity:1}:host button .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-protected-button-icon-spacing, 8px)}:host button mat-icon.mat-button-icon.is-mat-icon{position:relative;left:3px}:host button mat-icon.mat-button-icon.working{opacity:0}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DbxProgressSpinnerButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'dbx-progress-spinner-button,dbx-spinner-button', imports: [MatButtonModule, MatIconModule, MatProgressSpinner, NgClass, NgStyle], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<button class=\"dbx-base-button dbx-progress-spinner-button\" #button mat-button [type]=\"buttonTypeAttributeSignal()\" [color]=\"configSignal()?.buttonColor\" [ngClass]=\"buttonCssSignal()\" [ngStyle]=\"configSignal()?.customStyle\" [disabled]=\"buttonDisabledSignal()\">\n  @if (showTextSignal()) {\n    @if (showTextButtonIconSignal()) {\n      <mat-icon class=\"mat-button-icon\" [class.is-mat-icon]=\"!configSignal()?.buttonIcon?.fontSet\" [class.working]=\"showProgressSignal()\" [ngClass]=\"configSignal()?.buttonIcon?.customClass\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\">\n        {{ configSignal()?.buttonIcon?.fontSet ? '' : configSignal()?.buttonIcon?.fontIcon }}\n      </mat-icon>\n    }\n    <span class=\"button-text\" [class.working]=\"showProgressSignal()\">\n      {{ configSignal()?.text }}\n      <ng-content></ng-content>\n    </span>\n  }\n  @if (showIconSignal()) {\n    <!-- Use ng-container to prevent mat-icon from being a child of the button which changes the behavior -->\n    <ng-container>\n      <mat-icon class=\"mat-fab-icon\" [fontSet]=\"configSignal()?.buttonIcon?.fontSet!\" [fontIcon]=\"configSignal()?.buttonIcon?.fontIcon!\" [color]=\"configSignal()?.buttonIcon?.color!\" [svgIcon]=\"configSignal()?.buttonIcon?.svgIcon!\" [inline]=\"configSignal()?.fab && configSignal()?.buttonIcon?.inline!\">\n        {{ configSignal()?.buttonIcon?.fontSet! ? '' : configSignal()?.buttonIcon?.fontIcon! }}\n      </mat-icon>\n    </ng-container>\n  }\n  @if (showProgressSignal()) {\n    <mat-spinner class=\"spinner\" [diameter]=\"spinnerSizeSignal()\" [color]=\"configSignal()?.spinnerColor!\" [mode]=\"modeSignal()\" [value]=\"workingValueSignal()\" [ngStyle]=\"customSpinnerStyleSignal()\" [ngClass]=\"customSpinnerStyleClassSignal()\" [class.working]=\"showProgressSignal()\"></mat-spinner>\n  }\n</button>\n", styles: [":host button{min-height:36px;height:unset;outline:none}:host button.working{cursor:not-allowed}:host button ::ng-deep .mdc-button__label{display:flex;align-items:center;justify-content:center}:host button.mat-mdc-button.mat-mdc-icon-button{min-width:unset;--mdc-icon-button-icon-size: unset;--mat-text-button-with-icon-horizontal-padding: 0px;--mdc-icon-button-state-layer-size: 36px;border-radius:50%}:host button.mat-mdc-button.mat-mdc-icon-button .mat-mdc-progress-spinner{--mdc-icon-button-icon-size: 36px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab{height:48px;--mdc-icon-button-state-layer-size: 48px}:host button.mat-mdc-button.mat-mdc-icon-button.dbx-progress-spinner-fab .mat-mdc-progress-spinner{--mdc-icon-button-icon-size: 48px}:host button.fullWidth{width:100%}:host button .mat-mdc-progress-spinner{position:absolute;opacity:0;transition:opacity .3s ease-in-out}:host button .mat-mdc-progress-spinner.working{opacity:1}:host button .dbx-progress-spinner-custom.mat-progress-spinner.mat-accent circle,:host button .dbx-progress-spinner-custom.mat-mdc-progress-spinner.mat-accent circle{stroke:unset!important}:host button .button-text{opacity:1;transition:opacity .3s ease-in-out}:host button .button-text.working{opacity:0}:host button mat-icon.mat-button-icon{padding-right:5px;transition:opacity .3s ease-in-out;font-size:1.125rem;height:1.125rem;width:1.125rem;margin-right:var(--mat-protected-button-icon-spacing, 8px)}:host button mat-icon.mat-button-icon.is-mat-icon{position:relative;left:3px}:host button mat-icon.mat-button-icon.working{opacity:0}\n", ":host button.mat-mdc-button .button-text{display:flex;align-items:center}:host button.mat-mdc-button mat-icon.mat-button-icon.mat-icon.mat-ligature-font[fontIcon]:before,:host button.mat-mdc-button mat-icon.mat-fab-icon.mat-icon.mat-ligature-font[fontIcon]:before{content:unset}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 