circletone/esm2022/lib/components/atoms/button/button.component.mjs

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: "17.3.5", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", 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: "17.3.5", 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFFdkQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDOztBQUkxQzs7R0FFRztBQVFILE1BQU0sT0FBTyxlQUFlO0lBUDVCO1FBVVcsaUJBQVksR0FBZ0MsTUFBTSxDQUFDO1FBQ25ELFNBQUksR0FBa0MsUUFBUSxDQUFDO1FBQy9DLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFFakIsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixTQUFJLEdBQWtCLE1BQU0sQ0FBQztRQUM3QixTQUFJLEdBQWtCLFNBQVMsQ0FBQztRQUNoQyxZQUFPLEdBQXFCLE9BQU8sQ0FBQztLQStCOUM7SUE3QkMsSUFBSSxXQUFXO1FBQ2IsT0FBTztZQUNMLENBQUMsV0FBVyxJQUFJLENBQUMsSUFBSSxpQkFBaUIsSUFBSSxDQUFDLElBQUksT0FBTyxDQUFDLEVBQ3JELElBQUksQ0FBQyxPQUFPLEtBQUssT0FBTyxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssVUFBVSxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssTUFBTTtZQUNwRixDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksY0FBYyxJQUFJLENBQUMsSUFBSSxvQkFBb0IsSUFBSSxDQUFDLElBQUksNEJBQTRCLElBQUksQ0FBQyxJQUFJLGVBQWUsQ0FBQyxFQUN6SCxJQUFJLENBQUMsT0FBTyxLQUFLLE9BQU8sSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLFNBQVM7WUFDeEQsQ0FBQyxNQUFNLElBQUksQ0FBQyxJQUFJLFlBQVksSUFBSSxDQUFDLElBQUksa0JBQWtCLElBQUksQ0FBQyxJQUFJLDBCQUEwQixJQUFJLENBQUMsSUFBSSxlQUFlLENBQUMsRUFDakgsSUFBSSxDQUFDLE9BQU8sS0FBSyxPQUFPO1lBQzFCLENBQUMsTUFBTSxJQUFJLENBQUMsSUFBSSxlQUFlLElBQUksQ0FBQyxJQUFJLHFCQUFxQixJQUFJLENBQUMsSUFBSSw2QkFBNkIsSUFBSSxDQUFDLElBQUksa0JBQWtCLENBQUMsRUFDN0gsSUFBSSxDQUFDLE9BQU8sS0FBSyxNQUFNO1lBQ3pCLENBQUMsUUFBUSxJQUFJLENBQUMsSUFBSSx3QkFBd0IsSUFBSSxDQUFDLElBQUksd0RBQXdELElBQUksQ0FBQyxJQUFJLHlCQUF5QixJQUFJLENBQUMsSUFBSSxPQUFPLENBQUMsRUFDNUosSUFBSSxDQUFDLE9BQU8sS0FBSyxVQUFVO1lBQzdCLENBQUMsMEJBQTBCLElBQUksQ0FBQyxJQUFJLGlCQUFpQixJQUFJLENBQUMsSUFBSSx3QkFBd0IsSUFBSSxDQUFDLElBQUksT0FBTyxDQUFDLEVBQ3JHLElBQUksQ0FBQyxPQUFPLEtBQUssU0FBUztZQUM1QixXQUFXLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUM5RSxhQUFhLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLE1BQU0sSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNsRixXQUFXLEVBQUUsSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQ3RELEtBQUssRUFBRSxJQUFJLENBQUMsV0FBVyxFQUFFLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxPQUFPO1lBQ3JELFNBQVMsRUFBRSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUk7WUFDN0IsU0FBUyxFQUFFLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssTUFBTTtZQUNyRCxXQUFXLEVBQUUsSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxJQUFJO1lBQ3JELGFBQWEsRUFBRSxJQUFJLENBQUMsUUFBUTtZQUM1Qix1QkFBdUIsRUFBRSxJQUFJLENBQUMsUUFBUTtTQUN2QyxDQUFDO0lBQ0osQ0FBQztJQUVELFdBQVc7UUFDVCxPQUFPLElBQUksQ0FBQyxJQUFJLEtBQUssU0FBUyxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssU0FBUyxDQUFDO0lBQzVELENBQUM7OEdBeENVLGVBQWU7a0dBQWYsZUFBZSxxUENqQjVCLCtYQVlBLDRDRENZLE9BQU8sb0ZBQUUsYUFBYTs7MkZBSXJCLGVBQWU7a0JBUDNCLFNBQVM7K0JBQ0UsV0FBVyxjQUNULElBQUksV0FDUCxDQUFDLE9BQU8sRUFBRSxhQUFhLENBQUMsbUJBRWhCLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxRQUFRO3NCQUFoQixLQUFLO2dCQUNHLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi9pY29uL2ljb24uY29tcG9uZW50JztcbmltcG9ydCB7IENvbXBvbmVudFNpemUgfSBmcm9tICcuLi8uLi8uLi9tb2RlbC9jb21wb25lbnRzL2NvbXBvbmVudC1zaXplLnR5cGUnO1xuaW1wb3J0IHsgTmdDbGFzcyB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnRUeXBlIH0gZnJvbSAnLi4vLi4vLi4vbW9kZWwvY29tcG9uZW50cy9jb21wb25lbnQtdHlwZS50eXBlJztcbmltcG9ydCB7IENvbXBvbmVudFZhcmlhbnQgfSBmcm9tICcuLi8uLi8uLi9tb2RlbC9jb21wb25lbnRzL2NvbXBvbmVudC12YXJpYW50LnR5cGUnO1xuaW1wb3J0IHsgQ29tcG9uZW50UG9zaXRpb24gfSBmcm9tICcuLi8uLi8uLi9tb2RlbC9jb21wb25lbnRzL2NvbXBvbmVudC1wb3NpdGlvbi50eXBlJztcbi8qKlxuICogVGhpcyBpcyB0aGUgQnV0dG9uQ29tcG9uZW50LCB3aWRlbHkgdXNlZCBhbW9uZyBvdGhlciBjb21wb25lbnRzXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2N0LWJ1dHRvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtOZ0NsYXNzLCBJY29uQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKSB0ZXh0Pzogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uPzogc3RyaW5nO1xuICBASW5wdXQoKSBpY29uUG9zaXRpb24/OiBDb21wb25lbnRQb3NpdGlvbiB8IHN0cmluZyA9ICdsZWZ0JztcbiAgQElucHV0KCkgcm9sZTogJ2J1dHRvbicgfCAnc3VibWl0JyB8ICdyZXNldCcgPSAnYnV0dG9uJztcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICBASW5wdXQoKSBmdWxsU2l6ZTogYm9vbGVhbiA9IGZhbHNlO1xuICBASW5wdXQoKSBzaXplOiBDb21wb25lbnRTaXplID0gJ2Jhc2UnO1xuICBASW5wdXQoKSB0eXBlOiBDb21wb25lbnRUeXBlID0gJ3ByaW1hcnknO1xuICBASW5wdXQoKSB2YXJpYW50OiBDb21wb25lbnRWYXJpYW50ID0gJ3NvbGlkJztcblxuICBnZXQgY3NzQ2xhc3NtYXAoKTogeyBbY2xhc3NOYW1lOiBzdHJpbmddOiBib29sZWFuIH0ge1xuICAgIHJldHVybiB7XG4gICAgICBbYHRleHQtb24tJHt0aGlzLnR5cGV9IGRhcms6dGV4dC1vbi0ke3RoaXMudHlwZX0tZGFya2BdOlxuICAgICAgICB0aGlzLnZhcmlhbnQgPT09ICdzb2xpZCcgfHwgdGhpcy52YXJpYW50ID09PSAnZ3JhZGllbnQnIHx8IHRoaXMudmFyaWFudCA9PT0gJ2ZsYXQnLFxuICAgICAgW2B0ZXh0LSR7dGhpcy50eXBlfSBkYXJrOnRleHQtJHt0aGlzLnR5cGV9LWRhcmsgaG92ZXI6dGV4dC0ke3RoaXMudHlwZX0tdmFyaWFudCBkYXJrOmhvdmVyOnRleHQtJHt0aGlzLnR5cGV9LXZhcmlhbnQtZGFya2BdOlxuICAgICAgICB0aGlzLnZhcmlhbnQgPT09ICdibGFuaycgfHwgdGhpcy52YXJpYW50ID09PSAnb3V0bGluZScsXG4gICAgICBbYGJnLSR7dGhpcy50eXBlfSBkYXJrOmJnLSR7dGhpcy50eXBlfS1kYXJrIGhvdmVyOmJnLSR7dGhpcy50eXBlfS12YXJpYW50IGhvdmVyOmRhcms6YmctJHt0aGlzLnR5cGV9LXZhcmlhbnQtZGFya2BdOlxuICAgICAgICB0aGlzLnZhcmlhbnQgPT09ICdzb2xpZCcsXG4gICAgICBbYGJnLSR7dGhpcy50eXBlfS8yNSBkYXJrOmJnLSR7dGhpcy50eXBlfS1kYXJrLzI1IGhvdmVyOmJnLSR7dGhpcy50eXBlfS12YXJpYW50LzI1IGhvdmVyOmRhcms6YmctJHt0aGlzLnR5cGV9LXZhcmlhbnQtZGFyay8yNWBdOlxuICAgICAgICB0aGlzLnZhcmlhbnQgPT09ICdmbGF0JyxcbiAgICAgIFtgZnJvbS0ke3RoaXMudHlwZX0tdmFyaWFudCBmcm9tLTMwJSB0by0ke3RoaXMudHlwZX0gYmctZ3JhZGllbnQtdG8tdGwgaG92ZXI6YmctZ3JhZGllbnQtdG8tYnIgZGFyazpmcm9tLSR7dGhpcy50eXBlfS12YXJpYW50LWRhcmsgZGFyazp0by0ke3RoaXMudHlwZX0tZGFya2BdOlxuICAgICAgICB0aGlzLnZhcmlhbnQgPT09ICdncmFkaWVudCcsXG4gICAgICBbYGJvcmRlciBib3JkZXItMiBib3JkZXItJHt0aGlzLnR5cGV9IGhvdmVyOmJvcmRlci0ke3RoaXMudHlwZX0tdmFyaWFudCBkYXJrOmJvcmRlci0ke3RoaXMudHlwZX0tZGFya2BdOlxuICAgICAgICB0aGlzLnZhcmlhbnQgPT09ICdvdXRsaW5lJyxcbiAgICAgICdweC0zIHB5LTInOiAodGhpcy5zaXplID09PSAneHMnIHx8IHRoaXMuc2l6ZSA9PT0gJ3NtJykgJiYgIXRoaXMuaGFzSnVzdEljb24oKSxcbiAgICAgICdweC01IHB5LTIuNSc6ICh0aGlzLnNpemUgPT09ICdiYXNlJyB8fCB0aGlzLnNpemUgPT09ICdsZycpICYmICF0aGlzLmhhc0p1c3RJY29uKCksXG4gICAgICAncHgtNiBweS0zJzogdGhpcy5zaXplID09PSAneGwnICYmICF0aGlzLmhhc0p1c3RJY29uKCksXG4gICAgICAncC0xJzogdGhpcy5oYXNKdXN0SWNvbigpICYmIHRoaXMudmFyaWFudCAhPT0gJ2JsYW5rJyxcbiAgICAgICd0ZXh0LXhzJzogdGhpcy5zaXplID09PSAneHMnLFxuICAgICAgJ3RleHQtc20nOiB0aGlzLnNpemUgPT09ICdzbScgfHwgdGhpcy5zaXplID09PSAnYmFzZScsXG4gICAgICAndGV4dC1iYXNlJzogdGhpcy5zaXplID09PSAnbGcnIHx8IHRoaXMuc2l6ZSA9PT0gJ3hsJyxcbiAgICAgICd3LWZ1bGwgZ3Jvdyc6IHRoaXMuZnVsbFNpemUsXG4gICAgICAnb3BhY2l0eS01MCBob3Zlcjpub25lJzogdGhpcy5kaXNhYmxlZCxcbiAgICB9O1xuICB9XG5cbiAgaGFzSnVzdEljb24oKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuaWNvbiAhPT0gdW5kZWZpbmVkICYmIHRoaXMudGV4dCA9PT0gdW5kZWZpbmVkO1xuICB9XG59XG4iLCI8YnV0dG9uXG4gIFt0eXBlXT1cInJvbGVcIlxuICBjbGFzcz1cImZsZXggZmxleC1yb3cgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGdhcC0xLjUgcm91bmRlZC1tZCBmb250LXByaW1hcnkgZm9udC1tZWRpdW1cIlxuICBbbmdDbGFzc109XCJjc3NDbGFzc21hcFwiXG4gIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiPlxuICBAaWYgKGljb24pIHtcbiAgICA8Y3QtaWNvbiBjbGFzcz1cImZsZXhcIiBbc2l6ZV09XCJzaXplXCIgW2ljb25dPVwiaWNvblwiIC8+XG4gIH1cbiAgQGlmICh0ZXh0KSB7XG4gICAgPHNwYW4gW2NsYXNzLm9yZGVyLWZpcnN0XT1cImljb25Qb3NpdGlvbiA9PT0gJ3JpZ2h0J1wiPiB7eyB0ZXh0IH19IDwvc3Bhbj5cbiAgfVxuPC9idXR0b24+XG4iXX0=