@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
94 lines (93 loc) • 3.65 kB
TypeScript
import * as i0 from "@angular/core";
export type Route = {
label: string;
path: string;
};
/**
* @internal
* Generates base badge classes with style variants
*/
export declare const badgeComponent: (props?: ({
variant?: "primary" | "secondary" | "tertiary" | "accent" | "success" | "info" | "warning" | "error" | null | undefined;
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
iconPosition?: "left" | "right" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible badge style variants */
export type BadgeVariantProps = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'info' | 'warning' | 'error' | null | undefined;
/** Possible badge size variants */
export type BadgeSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Possible icon positions relative to badge text */
export type BadgeIconPositionProps = 'left' | 'right' | null | undefined;
/** Configuration object for badge styling variants */
export type BadgeProps = {
variant?: BadgeVariantProps;
size?: BadgeSizeProps;
iconPosition?: BadgeIconPositionProps;
};
/**
* 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>
* ```
*/
export declare class BadgeComponent {
/**
* Badge style variant
* @defaultValue 'primary'
*/
variant: import("@angular/core").InputSignal<BadgeVariantProps>;
/**
* Badge size variant
* @defaultValue 'md'
*/
size: import("@angular/core").InputSignal<BadgeSizeProps>;
/**
* Outline style (border with transparent fill)
* @defaultValue false
*/
outline: import("@angular/core").InputSignal<boolean>;
/**
* Soft style (muted/subdued color variant)
* @defaultValue false
*/
soft: import("@angular/core").InputSignal<boolean>;
/**
* Dash style (dashed border)
* @defaultValue false
*/
dash: import("@angular/core").InputSignal<boolean>;
/**
* Ghost style (transparent background)
* @defaultValue false
*/
ghost: import("@angular/core").InputSignal<boolean>;
/**
* Icon name (from icon library)
*/
icon: import("@angular/core").InputSignal<string | undefined>;
/**
* Position of icon relative to text
* @defaultValue 'left'
*/
iconPosition: import("@angular/core").InputSignal<BadgeIconPositionProps>;
/**
* @internal
* Computed class string for the badge container
*/
componentClass: import("@angular/core").Signal<string>;
static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "st-badge", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "soft": { "alias": "soft"; "required": false; "isSignal": true; }; "dash": { "alias": "dash"; "required": false; "isSignal": true; }; "ghost": { "alias": "ghost"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
}