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

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { IconComponent } from '../icon/icon.component';
import { SizeEnum } from '../../../model/components/size.enum';
import { NgClass } from '@angular/common';
import { VariantEnum } from '../../../model/components/variant.enum';
import * as i0 from "@angular/core";
/**
 * This is the ButtonComponent, widely used among other components
 */
export class ButtonComponent {
    constructor() {
        this.iconPosition = 'left';
        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 === VariantEnum.SOLID || this.variant === VariantEnum.GRADIENT,
            [`text-neutral-950 dark:text-neutral-50 hover:text-${this.type}-dark dark:hover:text-${this.type}`]: this.variant === VariantEnum.GRADIENT || this.variant === VariantEnum.BLANK,
            [`bg-${this.type} dark:bg-${this.type}-dark hover:bg-${this.type}-variant hover:dark:bg-${this.type}-variant-dark`]: this.variant === VariantEnum.SOLID,
            [`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 === VariantEnum.GRADIENT,
            [`border border-2 border-${this.type} hover:border-${this.type}-variant dark:border-${this.type}-dark`]: this.variant === VariantEnum.OUTLINE,
            'px-3 py-2': (this.size === SizeEnum.XS || this.size === SizeEnum.SM) && !this.hasJustIcon(),
            'px-5 py-2.5': (this.size === SizeEnum.BASE || this.size === SizeEnum.LG) && !this.hasJustIcon(),
            'px-6 py-3': this.size === SizeEnum.XL && !this.hasJustIcon(),
            'p-2': this.hasJustIcon() && this.variant !== 'blank',
            'text-xs': this.size === SizeEnum.XS,
            'text-sm': this.size === SizeEnum.SM || this.size === SizeEnum.BASE,
            'text-base': this.size === SizeEnum.LG || this.size === SizeEnum.XL,
            'w-full': this.fullSize,
        };
    }
    hasJustIcon() {
        return this.icon !== undefined && this.text === undefined;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: ButtonComponent, isStandalone: true, selector: "ct-button", inputs: { text: "text", icon: "icon", iconPosition: "iconPosition", fullSize: "fullSize", size: "size", type: "type", variant: "variant" }, ngImport: i0, template: "<button class=\"flex flex-row items-center justify-center gap-1.5 rounded-md font-medium\" [ngClass]=\"cssClassmap\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"size\" [icon]=\"icon\" />\n  }\n  @if (text) {\n    <span [class.order-first]=\"iconPosition === 'right'\">\n      {{ text }}\n    </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.2", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-button', standalone: true, imports: [NgClass, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button class=\"flex flex-row items-center justify-center gap-1.5 rounded-md font-medium\" [ngClass]=\"cssClassmap\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"size\" [icon]=\"icon\" />\n  }\n  @if (text) {\n    <span [class.order-first]=\"iconPosition === 'right'\">\n      {{ text }}\n    </span>\n  }\n</button>\n" }]
        }], propDecorators: { text: [{
                type: Input
            }], icon: [{
                type: Input
            }], iconPosition: [{
                type: Input
            }], fullSize: [{
                type: Input
            }], size: [{
                type: Input
            }], type: [{
                type: Input
            }], variant: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDdkQsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQy9ELE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUUxQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sd0NBQXdDLENBQUM7O0FBRXJFOztHQUVHO0FBUUgsTUFBTSxPQUFPLGVBQWU7SUFQNUI7UUFVVyxpQkFBWSxHQUEyQixNQUFNLENBQUM7UUFFOUMsYUFBUSxHQUFZLEtBQUssQ0FBQztRQUMxQixTQUFJLEdBQXNCLE1BQU0sQ0FBQztRQUNqQyxTQUFJLEdBQXNCLFNBQVMsQ0FBQztRQUNwQyxZQUFPLEdBQXlCLE9BQU8sQ0FBQztLQTRCbEQ7SUExQkMsSUFBSSxXQUFXO1FBQ2IsT0FBTztZQUNMLENBQUMsV0FBVyxJQUFJLENBQUMsSUFBSSxpQkFBaUIsSUFBSSxDQUFDLElBQUksT0FBTyxDQUFDLEVBQ3JELElBQUksQ0FBQyxPQUFPLEtBQUssV0FBVyxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLFdBQVcsQ0FBQyxRQUFRO1lBQzdFLENBQUMsb0RBQW9ELElBQUksQ0FBQyxJQUFJLHlCQUF5QixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsRUFDakcsSUFBSSxDQUFDLE9BQU8sS0FBSyxXQUFXLENBQUMsUUFBUSxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssV0FBVyxDQUFDLEtBQUs7WUFDN0UsQ0FBQyxNQUFNLElBQUksQ0FBQyxJQUFJLFlBQVksSUFBSSxDQUFDLElBQUksa0JBQWtCLElBQUksQ0FBQyxJQUFJLDBCQUEwQixJQUFJLENBQUMsSUFBSSxlQUFlLENBQUMsRUFDakgsSUFBSSxDQUFDLE9BQU8sS0FBSyxXQUFXLENBQUMsS0FBSztZQUNwQyxDQUFDLFFBQVEsSUFBSSxDQUFDLElBQUksd0JBQXdCLElBQUksQ0FBQyxJQUFJLHdEQUF3RCxJQUFJLENBQUMsSUFBSSx5QkFBeUIsSUFBSSxDQUFDLElBQUksT0FBTyxDQUFDLEVBQzVKLElBQUksQ0FBQyxPQUFPLEtBQUssV0FBVyxDQUFDLFFBQVE7WUFDdkMsQ0FBQywwQkFBMEIsSUFBSSxDQUFDLElBQUksaUJBQWlCLElBQUksQ0FBQyxJQUFJLHdCQUF3QixJQUFJLENBQUMsSUFBSSxPQUFPLENBQUMsRUFDckcsSUFBSSxDQUFDLE9BQU8sS0FBSyxXQUFXLENBQUMsT0FBTztZQUN0QyxXQUFXLEVBQUUsQ0FBQyxJQUFJLENBQUMsSUFBSSxLQUFLLFFBQVEsQ0FBQyxFQUFFLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxRQUFRLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFO1lBQzVGLGFBQWEsRUFBRSxDQUFDLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDLElBQUksSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLFFBQVEsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDaEcsV0FBVyxFQUFFLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDN0QsS0FBSyxFQUFFLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLE9BQU87WUFDckQsU0FBUyxFQUFFLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDLEVBQUU7WUFDcEMsU0FBUyxFQUFFLElBQUksQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDLEVBQUUsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLFFBQVEsQ0FBQyxJQUFJO1lBQ25FLFdBQVcsRUFBRSxJQUFJLENBQUMsSUFBSSxLQUFLLFFBQVEsQ0FBQyxFQUFFLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxRQUFRLENBQUMsRUFBRTtZQUNuRSxRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7U0FDeEIsQ0FBQztJQUNKLENBQUM7SUFFRCxXQUFXO1FBQ1QsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLFNBQVMsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLFNBQVMsQ0FBQztJQUM1RCxDQUFDOzhHQW5DVSxlQUFlO2tHQUFmLGVBQWUsaU5DakI1QiwwVUFVQSw0Q0RHWSxPQUFPLG9GQUFFLGFBQWE7OzJGQUlyQixlQUFlO2tCQVAzQixTQUFTOytCQUNFLFdBQVcsY0FDVCxJQUFJLFdBQ1AsQ0FBQyxPQUFPLEVBQUUsYUFBYSxDQUFDLG1CQUVoQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBTaXplRW51bSB9IGZyb20gJy4uLy4uLy4uL21vZGVsL2NvbXBvbmVudHMvc2l6ZS5lbnVtJztcbmltcG9ydCB7IE5nQ2xhc3MgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgVHlwZUVudW0gfSBmcm9tICcuLi8uLi8uLi9tb2RlbC9jb21wb25lbnRzL3R5cGUuZW51bSc7XG5pbXBvcnQgeyBWYXJpYW50RW51bSB9IGZyb20gJy4uLy4uLy4uL21vZGVsL2NvbXBvbmVudHMvdmFyaWFudC5lbnVtJztcbmltcG9ydCB7IFBvc2l0aW9uRW51bSB9IGZyb20gJy4uLy4uLy4uL21vZGVsL2NvbXBvbmVudHMvcG9zaXRpb24uZW51bSc7XG4vKipcbiAqIFRoaXMgaXMgdGhlIEJ1dHRvbkNvbXBvbmVudCwgd2lkZWx5IHVzZWQgYW1vbmcgb3RoZXIgY29tcG9uZW50c1xuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjdC1idXR0b24nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdDbGFzcywgSWNvbkNvbXBvbmVudF0sXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdGV4dD86IHN0cmluZztcbiAgQElucHV0KCkgaWNvbj86IHN0cmluZztcbiAgQElucHV0KCkgaWNvblBvc2l0aW9uPzogUG9zaXRpb25FbnVtIHwgc3RyaW5nID0gJ2xlZnQnO1xuXG4gIEBJbnB1dCgpIGZ1bGxTaXplOiBib29sZWFuID0gZmFsc2U7XG4gIEBJbnB1dCgpIHNpemU6IFNpemVFbnVtIHwgc3RyaW5nID0gJ2Jhc2UnO1xuICBASW5wdXQoKSB0eXBlOiBUeXBlRW51bSB8IHN0cmluZyA9ICdwcmltYXJ5JztcbiAgQElucHV0KCkgdmFyaWFudDogVmFyaWFudEVudW0gfCBzdHJpbmcgPSAnc29saWQnO1xuXG4gIGdldCBjc3NDbGFzc21hcCgpOiB7IFtjbGFzc05hbWU6IHN0cmluZ106IGJvb2xlYW4gfSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIFtgdGV4dC1vbi0ke3RoaXMudHlwZX0gZGFyazp0ZXh0LW9uLSR7dGhpcy50eXBlfS1kYXJrYF06XG4gICAgICAgIHRoaXMudmFyaWFudCA9PT0gVmFyaWFudEVudW0uU09MSUQgfHwgdGhpcy52YXJpYW50ID09PSBWYXJpYW50RW51bS5HUkFESUVOVCxcbiAgICAgIFtgdGV4dC1uZXV0cmFsLTk1MCBkYXJrOnRleHQtbmV1dHJhbC01MCBob3Zlcjp0ZXh0LSR7dGhpcy50eXBlfS1kYXJrIGRhcms6aG92ZXI6dGV4dC0ke3RoaXMudHlwZX1gXTpcbiAgICAgICAgdGhpcy52YXJpYW50ID09PSBWYXJpYW50RW51bS5HUkFESUVOVCB8fCB0aGlzLnZhcmlhbnQgPT09IFZhcmlhbnRFbnVtLkJMQU5LLFxuICAgICAgW2BiZy0ke3RoaXMudHlwZX0gZGFyazpiZy0ke3RoaXMudHlwZX0tZGFyayBob3ZlcjpiZy0ke3RoaXMudHlwZX0tdmFyaWFudCBob3ZlcjpkYXJrOmJnLSR7dGhpcy50eXBlfS12YXJpYW50LWRhcmtgXTpcbiAgICAgICAgdGhpcy52YXJpYW50ID09PSBWYXJpYW50RW51bS5TT0xJRCxcbiAgICAgIFtgZnJvbS0ke3RoaXMudHlwZX0tdmFyaWFudCBmcm9tLTMwJSB0by0ke3RoaXMudHlwZX0gYmctZ3JhZGllbnQtdG8tdGwgaG92ZXI6YmctZ3JhZGllbnQtdG8tYnIgZGFyazpmcm9tLSR7dGhpcy50eXBlfS12YXJpYW50LWRhcmsgZGFyazp0by0ke3RoaXMudHlwZX0tZGFya2BdOlxuICAgICAgICB0aGlzLnZhcmlhbnQgPT09IFZhcmlhbnRFbnVtLkdSQURJRU5ULFxuICAgICAgW2Bib3JkZXIgYm9yZGVyLTIgYm9yZGVyLSR7dGhpcy50eXBlfSBob3Zlcjpib3JkZXItJHt0aGlzLnR5cGV9LXZhcmlhbnQgZGFyazpib3JkZXItJHt0aGlzLnR5cGV9LWRhcmtgXTpcbiAgICAgICAgdGhpcy52YXJpYW50ID09PSBWYXJpYW50RW51bS5PVVRMSU5FLFxuICAgICAgJ3B4LTMgcHktMic6ICh0aGlzLnNpemUgPT09IFNpemVFbnVtLlhTIHx8IHRoaXMuc2l6ZSA9PT0gU2l6ZUVudW0uU00pICYmICF0aGlzLmhhc0p1c3RJY29uKCksXG4gICAgICAncHgtNSBweS0yLjUnOiAodGhpcy5zaXplID09PSBTaXplRW51bS5CQVNFIHx8IHRoaXMuc2l6ZSA9PT0gU2l6ZUVudW0uTEcpICYmICF0aGlzLmhhc0p1c3RJY29uKCksXG4gICAgICAncHgtNiBweS0zJzogdGhpcy5zaXplID09PSBTaXplRW51bS5YTCAmJiAhdGhpcy5oYXNKdXN0SWNvbigpLFxuICAgICAgJ3AtMic6IHRoaXMuaGFzSnVzdEljb24oKSAmJiB0aGlzLnZhcmlhbnQgIT09ICdibGFuaycsXG4gICAgICAndGV4dC14cyc6IHRoaXMuc2l6ZSA9PT0gU2l6ZUVudW0uWFMsXG4gICAgICAndGV4dC1zbSc6IHRoaXMuc2l6ZSA9PT0gU2l6ZUVudW0uU00gfHwgdGhpcy5zaXplID09PSBTaXplRW51bS5CQVNFLFxuICAgICAgJ3RleHQtYmFzZSc6IHRoaXMuc2l6ZSA9PT0gU2l6ZUVudW0uTEcgfHwgdGhpcy5zaXplID09PSBTaXplRW51bS5YTCxcbiAgICAgICd3LWZ1bGwnOiB0aGlzLmZ1bGxTaXplLFxuICAgIH07XG4gIH1cblxuICBoYXNKdXN0SWNvbigpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5pY29uICE9PSB1bmRlZmluZWQgJiYgdGhpcy50ZXh0ID09PSB1bmRlZmluZWQ7XG4gIH1cbn1cbiIsIjxidXR0b24gY2xhc3M9XCJmbGV4IGZsZXgtcm93IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlciBnYXAtMS41IHJvdW5kZWQtbWQgZm9udC1tZWRpdW1cIiBbbmdDbGFzc109XCJjc3NDbGFzc21hcFwiPlxuICBAaWYgKGljb24pIHtcbiAgICA8Y3QtaWNvbiBjbGFzcz1cImZsZXhcIiBbc2l6ZV09XCJzaXplXCIgW2ljb25dPVwiaWNvblwiIC8+XG4gIH1cbiAgQGlmICh0ZXh0KSB7XG4gICAgPHNwYW4gW2NsYXNzLm9yZGVyLWZpcnN0XT1cImljb25Qb3NpdGlvbiA9PT0gJ3JpZ2h0J1wiPlxuICAgICAge3sgdGV4dCB9fVxuICAgIDwvc3Bhbj5cbiAgfVxuPC9idXR0b24+XG4iXX0=