import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { IconComponent } from '../icon/icon.component';
import { NgClass } from '@angular/common';
import * as i0 from "@angular/core";
/**
 * This is the ButtonComponent, widely used among other components
 */
export class ButtonComponent {
    constructor() {
        this.iconPosition = 'left';
        this.role = 'button';
        this.disabled = false;
        this.fullSize = false;
        this.size = 'base';
        this.type = 'primary';
        this.variant = 'solid';
    }
    get cssClassmap() {
        return {
            [`text-on-${this.type} dark:text-on-${this.type}-dark`]: this.variant === 'solid' || this.variant === 'gradient' || this.variant === 'flat',
            [`text-${this.type} dark:text-${this.type}-dark hover:text-${this.type}-variant dark:hover:text-${this.type}-variant-dark`]: this.variant === 'blank' || this.variant === 'outline',
            [`bg-${this.type} dark:bg-${this.type}-dark hover:bg-${this.type}-variant hover:dark:bg-${this.type}-variant-dark`]: this.variant === 'solid',
            [`bg-${this.type}/25 dark:bg-${this.type}-dark/25 hover:bg-${this.type}-variant/25 hover:dark:bg-${this.type}-variant-dark/25`]: this.variant === 'flat',
            [`from-${this.type}-variant from-30% to-${this.type} bg-gradient-to-tl hover:bg-gradient-to-br dark:from-${this.type}-variant-dark dark:to-${this.type}-dark`]: this.variant === 'gradient',
            [`border border-2 border-${this.type} hover:border-${this.type}-variant dark:border-${this.type}-dark`]: this.variant === 'outline',
            'px-3 py-2': (this.size === 'xs' || this.size === 'sm') && !this.hasJustIcon(),
            'px-5 py-2.5': (this.size === 'base' || this.size === 'lg') && !this.hasJustIcon(),
            'px-6 py-3': this.size === 'xl' && !this.hasJustIcon(),
            'p-1': this.hasJustIcon() && this.variant !== 'blank',
            'text-xs': this.size === 'xs',
            'text-sm': this.size === 'sm' || this.size === 'base',
            'text-base': this.size === 'lg' || this.size === 'xl',
            'w-full grow': this.fullSize,
            'opacity-50 hover:none': this.disabled,
        };
    }
    hasJustIcon() {
        return this.icon !== undefined && this.text === undefined;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "ct-button", inputs: { text: "text", icon: "icon", iconPosition: "iconPosition", role: "role", disabled: "disabled", fullSize: "fullSize", size: "size", type: "type", variant: "variant" }, ngImport: i0, template: "<button\n  [type]=\"role\"\n  class=\"flex flex-row items-center justify-center gap-1.5 rounded-md font-primary font-medium\"\n  [ngClass]=\"cssClassmap\"\n  [disabled]=\"disabled\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"size\" [icon]=\"icon\" />\n  }\n  @if (text) {\n    <span [class.order-first]=\"iconPosition === 'right'\"> {{ text }} </span>\n  }\n</button>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-button', standalone: true, imports: [NgClass, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"role\"\n  class=\"flex flex-row items-center justify-center gap-1.5 rounded-md font-primary font-medium\"\n  [ngClass]=\"cssClassmap\"\n  [disabled]=\"disabled\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"size\" [icon]=\"icon\" />\n  }\n  @if (text) {\n    <span [class.order-first]=\"iconPosition === 'right'\"> {{ text }} </span>\n  }\n</button>\n" }]
        }], propDecorators: { text: [{
                type: Input
            }], icon: [{
                type: Input
            }], iconPosition: [{
                type: Input
            }], role: [{
                type: Input
            }], disabled: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], size: [{
                type: Input
            }], type: [{
                type: Input
            }], variant: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,[encoded data, 8008 characters]