@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-badge.mjs

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';

/**
 * @internal
 * Generates base badge classes with style variants
 */
const badgeComponent = cva(['badge', 'font-body', 'font-normal', 'inline-flex', 'align-top', 'items-center', 'leading-normal'], {
    variants: {
        variant: {
            primary: ['badge-primary'],
            secondary: ['badge-secondary'],
            tertiary: ['badge-tertiary'],
            accent: ['badge-accent'],
            success: ['badge-success'],
            info: ['badge-info'],
            warning: ['badge-warning'],
            error: ['badge-error'],
        },
        size: {
            xs: ['badge-xs'],
            sm: ['badge-sm'],
            md: ['badge-md'],
            lg: ['badge-lg'],
            xl: ['badge-xl'],
        },
        iconPosition: {
            left: [''],
            right: ['flex-row-reverse'],
        },
    },
    compoundVariants: [],
    defaultVariants: {
        variant: 'primary',
        size: 'md',
        iconPosition: 'left',
    },
});
/**
 * A customizable badge component with multiple variants and icon support
 *
 * @remarks
 * Built with Tailwind CSS and class-variance-authority for style management.
 * Supports various styling variants, sizes, icon positions, and state modifiers.
 *
 * @example
 * ```html
 * <st-badge
 *   variant="primary"
 *   size="md"
 *   icon="info"
 *   iconPosition="left"
 * >
 *   New Feature
 * </st-badge>
 * ```
 */
class BadgeComponent {
    /**
     * Badge style variant
     * @defaultValue 'primary'
     */
    variant = input();
    /**
     * Badge size variant
     * @defaultValue 'md'
     */
    size = input();
    /**
     * Outline style (border with transparent fill)
     * @defaultValue false
     */
    outline = input(false);
    /**
     * Soft style (muted/subdued color variant)
     * @defaultValue false
     */
    soft = input(false);
    /**
     * Dash style (dashed border)
     * @defaultValue false
     */
    dash = input(false);
    /**
     * Ghost style (transparent background)
     * @defaultValue false
     */
    ghost = input(false);
    /**
     * Icon name (from icon library)
     */
    icon = input();
    /**
     * Position of icon relative to text
     * @defaultValue 'left'
     */
    iconPosition = input();
    /**
     * @internal
     * Computed class string for the badge container
     */
    componentClass = computed(() => cn(badgeComponent({
        variant: this.variant(),
        size: this.size(),
        iconPosition: this.iconPosition(),
    }), {
        'badge-outline': this.outline(),
        'badge-soft': this.soft(),
        'badge-dash': this.dash(),
        'badge-ghost': this.ghost(),
    }));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: BadgeComponent, isStandalone: true, selector: "st-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, dash: { classPropertyName: "dash", publicName: "dash", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let iconVar = this.icon();\n@let componentClassVar = this.componentClass();\n\n<span [class]=\"componentClassVar\">\n\t@if (iconVar) {\n\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"auto\"></st-icon>\n\t}\n\t<ng-content></ng-content>\n</span>\n", styles: [""], dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: BadgeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'st-badge', imports: [IconComponent, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let iconVar = this.icon();\n@let componentClassVar = this.componentClass();\n\n<span [class]=\"componentClassVar\">\n\t@if (iconVar) {\n\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"auto\"></st-icon>\n\t}\n\t<ng-content></ng-content>\n</span>\n" }]
        }] });

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

export { BadgeComponent, badgeComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-badge.mjs.map