@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
238 lines (231 loc) • 11.7 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
/**
* A container component for card action buttons/controls
*
* @remarks
* Part of the card component ecosystem. Provides consistent layout
* and alignment for card actions. Should be used inside `<st-card>`
* components following content sections.
*
* @example
* ```html
* <st-card>
* <st-card-title>Card Header</st-card-title>
* <st-card-content>Content</st-card-content>
* <st-card-actions alignment="right">
* <button class="btn">Action</button>
* </st-card-actions>
* </st-card>
* ```
*/
class CardActionsComponent {
/**
* Horizontal alignment of actions
* @defaultValue 'left'
*/
alignment = input('left');
/**
* @internal
* Computed class string for the actions container
*/
componentClass = computed(() => {
return cn('card-actions', {
'justify-start': this.alignment() === 'left',
'justify-end': this.alignment() === 'right',
'justify-center': this.alignment() === 'center',
});
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: CardActionsComponent, isStandalone: true, selector: "st-card-actions", inputs: { alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CardActionsComponent, decorators: [{
type: Component,
args: [{ selector: 'st-card-actions', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n" }]
}] });
/**
* A content container component designed for use within cards
*
* @remarks
* Part of the card component ecosystem. Provides consistent spacing
* and styling for card content. Should be used inside `<st-card>` components
* following the `<st-card-title>` element.
*
* @example
* ```html
* <st-card>
* <st-card-title>Card Header</st-card-title>
* <st-card-content>
* <p>Main card content here</p>
* </st-card-content>
* </st-card>
* ```
*
* @example
* ```html
* <st-card-content class="custom-content-style">
* Custom styled content area
* </st-card-content>
* ```
*/
class CardContentComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: CardContentComponent, isStandalone: true, selector: "st-card-content", ngImport: i0, template: "<div class=\"card-content font-body\">\n\t<ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CardContentComponent, decorators: [{
type: Component,
args: [{ selector: 'st-card-content', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-content font-body\">\n\t<ng-content></ng-content>\n</div>\n" }]
}] });
/**
* A title component designed for use within cards
*
* @remarks
* Part of the card component ecosystem. Provides consistent styling
* and typography for card titles. Should be used inside `<st-card>` components.
*
* @example
* ```html
* <st-card>
* <st-card-title>Card Header</st-card-title>
* <p>Card content</p>
* </st-card>
* ```
*
* @example
* ```html
* <st-card-title class="custom-class">
* Custom Styled Title
* </st-card-title>
* ```
*/
class CardTitleComponent {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: CardTitleComponent, isStandalone: true, selector: "st-card-title", ngImport: i0, template: "<div class=\"card-title font-heading\">\n\t<ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CardTitleComponent, decorators: [{
type: Component,
args: [{ selector: 'st-card-title', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card-title font-heading\">\n\t<ng-content></ng-content>\n</div>\n" }]
}] });
/**
* @internal
* Generates base card classes with style variants
*/
const cardComponent = cva(['card'], {
variants: {
size: {
xs: 'card-xs',
sm: 'card-sm',
md: 'card-md',
lg: 'card-lg',
xl: 'card-xl',
},
},
defaultVariants: {
size: 'md',
},
});
/**
* 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>
* ```
*/
class CardComponent {
/**
* Card container size variant
* @defaultValue 'md'
*/
size = input();
/**
* Show border around card
* @defaultValue false
*/
border = input(false);
/**
* Image source URL
*/
image = input(null);
/**
* Alt text for card image
* @defaultValue 'card image'
*/
imageAlt = input('card image');
/**
* Orientation of card image
* @defaultValue 'vertical'
*/
imageOrientation = input('vertical');
/**
* Alignment of card image
* @defaultValue 'start'
*/
imageAlignment = input('start');
/**
* Use image as full background
* @defaultValue false
*/
imageAsBackground = input(false);
/**
* Add drop shadow
* @defaultValue false
*/
shadow = input(false);
/**
* Glass effect styling
* @defaultValue false
*/
glass = input(false);
/**
* Dashed border style
* @defaultValue false
*/
dash = input(false);
/**
* Full-width card
* @defaultValue false
*/
block = input(false);
/**
* @internal
* Computed class string for the card container
*/
componentClass = computed(() => cn(cardComponent({
size: this.size(),
}), {
'card-side': this.imageOrientation() === 'horizontal' && this.image(),
'image-full': this.imageAsBackground(),
'shadow-main': this.shadow(),
'card-border': this.border(),
'card-dash': this.dash(),
'bg-base-200': !this.glass(),
glass: this.glass(),
}));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: CardComponent, isStandalone: true, selector: "st-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, imageOrientation: { classPropertyName: "imageOrientation", publicName: "imageOrientation", isSignal: true, isRequired: false, transformFunction: null }, imageAlignment: { classPropertyName: "imageAlignment", publicName: "imageAlignment", isSignal: true, isRequired: false, transformFunction: null }, imageAsBackground: { classPropertyName: "imageAsBackground", publicName: "imageAsBackground", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, dash: { classPropertyName: "dash", publicName: "dash", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let componentClassVar = this.componentClass();\n@let imageVar = this.image();\n@let imageAltVar = this.imageAlt();\n@let imageAlignmentVar = this.imageAlignment();\n<section [class]=\"componentClassVar\">\n\t@if (imageVar && imageAlignmentVar === 'start') {\n\t\t<figure>\n\t\t\t<img [src]=\"imageVar\" [alt]=\"imageAltVar\" />\n\t\t</figure>\n\t}\n\t<div class=\"card-body gap-6 [&_st-card-content]:grow\">\n\t\t<ng-content select=\"st-card-title\"></ng-content>\n\t\t<ng-content select=\"st-card-content\"></ng-content>\n\t\t<ng-content select=\"st-card-actions\"></ng-content>\n\t</div>\n\t@if (imageVar && imageAlignmentVar === 'end') {\n\t\t<figure>\n\t\t\t<img [src]=\"imageVar\" [alt]=\"imageAltVar\" />\n\t\t</figure>\n\t}\n</section>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CardComponent, decorators: [{
type: Component,
args: [{ selector: 'st-card', imports: [CommonModule], template: "@let componentClassVar = this.componentClass();\n@let imageVar = this.image();\n@let imageAltVar = this.imageAlt();\n@let imageAlignmentVar = this.imageAlignment();\n<section [class]=\"componentClassVar\">\n\t@if (imageVar && imageAlignmentVar === 'start') {\n\t\t<figure>\n\t\t\t<img [src]=\"imageVar\" [alt]=\"imageAltVar\" />\n\t\t</figure>\n\t}\n\t<div class=\"card-body gap-6 [&_st-card-content]:grow\">\n\t\t<ng-content select=\"st-card-title\"></ng-content>\n\t\t<ng-content select=\"st-card-content\"></ng-content>\n\t\t<ng-content select=\"st-card-actions\"></ng-content>\n\t</div>\n\t@if (imageVar && imageAlignmentVar === 'end') {\n\t\t<figure>\n\t\t\t<img [src]=\"imageVar\" [alt]=\"imageAltVar\" />\n\t\t</figure>\n\t}\n</section>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { CardActionsComponent, CardComponent, CardContentComponent, CardTitleComponent, cardComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-card.mjs.map