@sixbell-telco/sdk/fesm2022/sixbell-telco-sdk-components-card.mjs.map

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

{"version":3,"file":"sixbell-telco-sdk-components-card.mjs","sources":["../../../projects/sdk/components/card/card-actions/card-actions.component.ts","../../../projects/sdk/components/card/card-actions/card-actions.component.html","../../../projects/sdk/components/card/card-content/card-content.component.ts","../../../projects/sdk/components/card/card-content/card-content.component.html","../../../projects/sdk/components/card/card-title/card-title.component.ts","../../../projects/sdk/components/card/card-title/card-title.component.html","../../../projects/sdk/components/card/src/card.component.ts","../../../projects/sdk/components/card/src/card.component.html","../../../projects/sdk/components/card/sixbell-telco-sdk-components-card.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\n\n/** Possible alignment options for card actions */\nexport type CardActionsAligmentProps = 'left' | 'right' | 'center';\n\n/**\n * A container component for card action buttons/controls\n *\n * @remarks\n * Part of the card component ecosystem. Provides consistent layout\n * and alignment for card actions. Should be used inside `<st-card>`\n * components following content sections.\n *\n * @example\n * ```html\n * <st-card>\n *   <st-card-title>Card Header</st-card-title>\n *   <st-card-content>Content</st-card-content>\n *   <st-card-actions alignment=\"right\">\n *     <button class=\"btn\">Action</button>\n *   </st-card-actions>\n * </st-card>\n * ```\n */\n@Component({\n\tselector: 'st-card-actions',\n\timports: [CommonModule],\n\ttemplateUrl: './card-actions.component.html',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardActionsComponent {\n\t/**\n\t * Horizontal alignment of actions\n\t * @defaultValue 'left'\n\t */\n\talignment = input<CardActionsAligmentProps>('left');\n\n\t/**\n\t * @internal\n\t * Computed class string for the actions container\n\t */\n\tcomponentClass = computed(() => {\n\t\treturn cn('card-actions', {\n\t\t\t'justify-start': this.alignment() === 'left',\n\t\t\t'justify-end': this.alignment() === 'right',\n\t\t\t'justify-center': this.alignment() === 'center',\n\t\t});\n\t});\n}\n","<div [class]=\"componentClass()\">\n\t<ng-content></ng-content>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/**\n * A content container component designed for use within cards\n *\n * @remarks\n * Part of the card component ecosystem. Provides consistent spacing\n * and styling for card content. Should be used inside `<st-card>` components\n * following the `<st-card-title>` element.\n *\n * @example\n * ```html\n * <st-card>\n *   <st-card-title>Card Header</st-card-title>\n *   <st-card-content>\n *     <p>Main card content here</p>\n *   </st-card-content>\n * </st-card>\n * ```\n *\n * @example\n * ```html\n * <st-card-content class=\"custom-content-style\">\n *   Custom styled content area\n * </st-card-content>\n * ```\n */\n@Component({\n\tselector: 'st-card-content',\n\timports: [CommonModule],\n\ttemplateUrl: './card-content.component.html',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardContentComponent {}\n","<div class=\"card-content font-body\">\n\t<ng-content></ng-content>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component } from '@angular/core';\n\n/**\n * A title component designed for use within cards\n *\n * @remarks\n * Part of the card component ecosystem. Provides consistent styling\n * and typography for card titles. Should be used inside `<st-card>` components.\n *\n * @example\n * ```html\n * <st-card>\n *   <st-card-title>Card Header</st-card-title>\n *   <p>Card content</p>\n * </st-card>\n * ```\n *\n * @example\n * ```html\n * <st-card-title class=\"custom-class\">\n *   Custom Styled Title\n * </st-card-title>\n * ```\n */\n@Component({\n\tselector: 'st-card-title',\n\timports: [CommonModule],\n\ttemplateUrl: './card-title.component.html',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardTitleComponent {}\n","<div class=\"card-title font-heading\">\n\t<ng-content></ng-content>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { Component, computed, input } from '@angular/core';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { cva } from 'class-variance-authority';\n\n/**\n * @internal\n * Generates base card classes with style variants\n */\nexport const cardComponent = cva(['card'], {\n\tvariants: {\n\t\tsize: {\n\t\t\txs: 'card-xs',\n\t\t\tsm: 'card-sm',\n\t\t\tmd: 'card-md',\n\t\t\tlg: 'card-lg',\n\t\t\txl: 'card-xl',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: 'md',\n\t},\n});\n\n/** Possible card container size variants */\nexport type CardContainerSizeProps = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | null | undefined;\n\n/** Possible card image orientation options */\nexport type CardImageOrientationProps = 'vertical' | 'horizontal';\n\n/** Possible card image alignment options */\nexport type CardImageAlignmentProps = 'start' | 'end';\n\n/** Configuration object for card styling variants */\nexport type CardProps = {\n\tsize?: CardContainerSizeProps;\n\tborder?: boolean;\n\timage?: string | null;\n\timageAlt?: string;\n\timageOrientation?: CardImageOrientationProps;\n\timageAlignment?: CardImageAlignmentProps;\n\timageAsBackground?: boolean;\n\tshadow?: boolean;\n\tglass?: boolean;\n\tdash?: boolean;\n\tblock?: boolean;\n};\n\n/**\n * A customizable card component with multiple layout and styling options\n *\n * @remarks\n * Built with Tailwind CSS and class-variance-authority for style management.\n * Supports various sizes, image configurations, and decorative styles.\n *\n * @example\n * ```html\n * <st-card\n *   size=\"md\"\n *   border=\"true\"\n *   image=\"background.jpg\"\n *   imageOrientation=\"horizontal\"\n * >\n *   <h3 class=\"card-title\">Card Title</h3>\n *   <p>Card content</p>\n * </st-card>\n * ```\n */\n@Component({\n\tselector: 'st-card',\n\timports: [CommonModule],\n\ttemplateUrl: './card.component.html',\n\tstyles: '',\n})\nexport class CardComponent {\n\t/**\n\t * Card container size variant\n\t * @defaultValue 'md'\n\t */\n\tsize = input<CardContainerSizeProps>();\n\n\t/**\n\t * Show border around card\n\t * @defaultValue false\n\t */\n\tborder = input<boolean>(false);\n\n\t/**\n\t * Image source URL\n\t */\n\timage = input<string | null>(null);\n\n\t/**\n\t * Alt text for card image\n\t * @defaultValue 'card image'\n\t */\n\timageAlt = input<string>('card image');\n\n\t/**\n\t * Orientation of card image\n\t * @defaultValue 'vertical'\n\t */\n\timageOrientation = input<CardImageOrientationProps>('vertical');\n\n\t/**\n\t * Alignment of card image\n\t * @defaultValue 'start'\n\t */\n\timageAlignment = input<CardImageAlignmentProps>('start');\n\n\t/**\n\t * Use image as full background\n\t * @defaultValue false\n\t */\n\timageAsBackground = input<boolean>(false);\n\n\t/**\n\t * Add drop shadow\n\t * @defaultValue false\n\t */\n\tshadow = input<boolean>(false);\n\n\t/**\n\t * Glass effect styling\n\t * @defaultValue false\n\t */\n\tglass = input<boolean>(false);\n\n\t/**\n\t * Dashed border style\n\t * @defaultValue false\n\t */\n\tdash = input<boolean>(false);\n\n\t/**\n\t * Full-width card\n\t * @defaultValue false\n\t */\n\tblock = input<boolean>(false);\n\n\t/**\n\t * @internal\n\t * Computed class string for the card container\n\t */\n\tcomponentClass = computed(() =>\n\t\tcn(\n\t\t\tcardComponent({\n\t\t\t\tsize: this.size(),\n\t\t\t}),\n\t\t\t{\n\t\t\t\t'card-side': this.imageOrientation() === 'horizontal' && this.image(),\n\t\t\t\t'image-full': this.imageAsBackground(),\n\t\t\t\t'shadow-main': this.shadow(),\n\t\t\t\t'card-border': this.border(),\n\t\t\t\t'card-dash': this.dash(),\n\t\t\t\t'bg-base-200': !this.glass(),\n\t\t\t\tglass: this.glass(),\n\t\t\t},\n\t\t),\n\t);\n}\n","@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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}