@dishamahajan36/ui-components/fesm2022/dishamahajan36-ui-components.mjs

A collection of reusable Angular UI components built with Spartan UI and Tailwind CSS.

import * as i0 from '@angular/core';
import { InjectionToken, inject, signal, input, computed, Directive, NgModule, output, Component } from '@angular/core';
import { hlm } from '@spartan-ng/brain/core';
import { cva } from 'class-variance-authority';

const defaultConfig = {
    variant: 'default',
    size: 'default',
};
const BrnButtonConfigToken = new InjectionToken('BrnButtonConfig');
function provideBrnButtonConfig(config) {
    return { provide: BrnButtonConfigToken, useValue: { ...defaultConfig, ...config } };
}
function injectBrnButtonConfig() {
    return inject(BrnButtonConfigToken, { optional: true }) ?? defaultConfig;
}

const buttonVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background', {
    variants: {
        variant: {
            default: 'bg-primary text-primary-foreground hover:bg-primary/90',
            destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
            outline: 'border border-input hover:bg-accent hover:text-accent-foreground',
            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
            ghost: 'hover:bg-accent hover:text-accent-foreground',
            link: 'underline-offset-4 hover:underline text-primary',
        },
        size: {
            default: 'h-10 py-2 px-4',
            sm: 'h-9 px-3 rounded-md',
            lg: 'h-11 px-8 rounded-md',
            icon: 'h-10 w-10',
        },
    },
    defaultVariants: {
        variant: 'default',
        size: 'default',
    },
});
class HlmButtonDirective {
    _config = injectBrnButtonConfig();
    _additionalClasses = signal('');
    userClass = input('', { alias: 'class' });
    _computedClass = computed(() => hlm(buttonVariants({ variant: this.variant(), size: this.size() }), this.userClass(), this._additionalClasses()));
    variant = input(this._config.variant);
    size = input(this._config.size);
    setClass(classes) {
        this._additionalClasses.set(classes);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HlmButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.13", type: HlmButtonDirective, isStandalone: true, selector: "[hlmBtn]", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_computedClass()" } }, exportAs: ["hlmBtn"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HlmButtonDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[hlmBtn]',
                    standalone: true,
                    exportAs: 'hlmBtn',
                    host: {
                        '[class]': '_computedClass()',
                    },
                }]
        }] });

class HlmButtonModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HlmButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: HlmButtonModule, imports: [HlmButtonDirective], exports: [HlmButtonDirective] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HlmButtonModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: HlmButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [HlmButtonDirective],
                    exports: [HlmButtonDirective],
                }]
        }] });

class ButtonComponent {
    // Input properties
    variant = input('default');
    size = input('default');
    disabled = input(false);
    type = input('button');
    customClass = input('');
    // Output events
    clicked = output();
    handleClick(event) {
        if (!this.disabled()) {
            this.clicked.emit(event);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.13", type: ButtonComponent, isStandalone: true, selector: "ui-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
    <button
      hlmBtn
      [variant]="variant()"
      [size]="size()"
      [disabled]="disabled()"
      [class]="customClass()"
      (click)="handleClick($event)"
      [type]="type()"
    >
      <ng-content></ng-content>
    </button>
  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: HlmButtonDirective, selector: "[hlmBtn]", inputs: ["class", "variant", "size"], exportAs: ["hlmBtn"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ui-button', standalone: true, imports: [HlmButtonDirective], template: `
    <button
      hlmBtn
      [variant]="variant()"
      [size]="size()"
      [disabled]="disabled()"
      [class]="customClass()"
      (click)="handleClick($event)"
      [type]="type()"
    >
      <ng-content></ng-content>
    </button>
  ` }]
        }] });

/*
 * Public API Surface of ui-components
 */
// Export from index files

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

export { ButtonComponent, HlmButtonDirective, HlmButtonModule, buttonVariants, injectBrnButtonConfig, provideBrnButtonConfig };
//# sourceMappingURL=dishamahajan36-ui-components.mjs.map