@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
112 lines (111 loc) • 4.27 kB
TypeScript
import * as i0 from "@angular/core";
/**
* @internal
* Generates base card classes with style variants
*/
export declare const cardComponent: (props?: ({
size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible card container size variants */
export type CardContainerSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;
/** Possible card image orientation options */
export type CardImageOrientationProps = 'vertical' | 'horizontal';
/** Possible card image alignment options */
export type CardImageAlignmentProps = 'start' | 'end';
/** Configuration object for card styling variants */
export type CardProps = {
size?: CardContainerSizeProps;
border?: boolean;
image?: string | null;
imageAlt?: string;
imageOrientation?: CardImageOrientationProps;
imageAlignment?: CardImageAlignmentProps;
imageAsBackground?: boolean;
shadow?: boolean;
glass?: boolean;
dash?: boolean;
block?: boolean;
};
/**
* A customizable card component with multiple layout and styling options
*
* @remarks
* Built with Tailwind CSS and class-variance-authority for style management.
* Supports various sizes, image configurations, and decorative styles.
*
* @example
* ```html
* <st-card
* size="md"
* border="true"
* image="background.jpg"
* imageOrientation="horizontal"
* >
* <h3 class="card-title">Card Title</h3>
* <p>Card content</p>
* </st-card>
* ```
*/
export declare class CardComponent {
/**
* Card container size variant
* @defaultValue 'md'
*/
size: import("@angular/core").InputSignal<CardContainerSizeProps>;
/**
* Show border around card
* @defaultValue false
*/
border: import("@angular/core").InputSignal<boolean>;
/**
* Image source URL
*/
image: import("@angular/core").InputSignal<string | null>;
/**
* Alt text for card image
* @defaultValue 'card image'
*/
imageAlt: import("@angular/core").InputSignal<string>;
/**
* Orientation of card image
* @defaultValue 'vertical'
*/
imageOrientation: import("@angular/core").InputSignal<CardImageOrientationProps>;
/**
* Alignment of card image
* @defaultValue 'start'
*/
imageAlignment: import("@angular/core").InputSignal<CardImageAlignmentProps>;
/**
* Use image as full background
* @defaultValue false
*/
imageAsBackground: import("@angular/core").InputSignal<boolean>;
/**
* Add drop shadow
* @defaultValue false
*/
shadow: import("@angular/core").InputSignal<boolean>;
/**
* Glass effect styling
* @defaultValue false
*/
glass: import("@angular/core").InputSignal<boolean>;
/**
* Dashed border style
* @defaultValue false
*/
dash: import("@angular/core").InputSignal<boolean>;
/**
* Full-width card
* @defaultValue false
*/
block: import("@angular/core").InputSignal<boolean>;
/**
* @internal
* Computed class string for the card container
*/
componentClass: import("@angular/core").Signal<string>;
static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "st-card", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "border": { "alias": "border"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "imageOrientation": { "alias": "imageOrientation"; "required": false; "isSignal": true; }; "imageAlignment": { "alias": "imageAlignment"; "required": false; "isSignal": true; }; "imageAsBackground": { "alias": "imageAsBackground"; "required": false; "isSignal": true; }; "shadow": { "alias": "shadow"; "required": false; "isSignal": true; }; "glass": { "alias": "glass"; "required": false; "isSignal": true; }; "dash": { "alias": "dash"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; }, {}, never, ["st-card-title", "st-card-content", "st-card-actions"], true, never>;
}