(false);\n\n\tprotected readonly sections = contentChildren(CardSectionComponent);\n\n\tconstructor() {\n\t\tafterRenderEffect(() => {\n\t\t\tthis.syncDividers();\n\t\t});\n\n\t\tthis.destroyRef.onDestroy(() => {\n\t\t\tthis.removeDividers();\n\t\t});\n\t}\n\n\tprivate syncDividers(): void {\n\t\tthis.removeDividers();\n\n\t\tif (!this.divided()) return;\n\n\t\tconst host = this.host.nativeElement;\n\t\tconst sections = Array.from(host.children).filter(\n\t\t\t(element): element is HTMLElement => element instanceof HTMLElement && element.tagName === 'ST-CARD-SECTION',\n\t\t);\n\n\t\tif (sections.length < 2) return;\n\n\t\tfor (let index = 0; index < sections.length - 1; index += 1) {\n\t\t\tconst dividerRef = createComponent(DividerComponent, {\n\t\t\t\tenvironmentInjector: this.envInjector,\n\t\t\t\telementInjector: undefined,\n\t\t\t});\n\n\t\t\tdividerRef.setInput('variant', 'neutral');\n\t\t\tdividerRef.changeDetectorRef.detectChanges();\n\n\t\t\tconst dividerHost = dividerRef.location.nativeElement as HTMLElement;\n\t\t\tdividerHost.classList.add(this.dividerClass);\n\t\t\tsections[index].insertAdjacentElement('afterend', dividerHost);\n\t\t\tthis.dividerRefs.push(dividerRef);\n\t\t}\n\t}\n\n\tprivate removeDividers(): void {\n\t\tfor (const dividerRef of this.dividerRefs) {\n\t\t\tdividerRef.location.nativeElement.remove();\n\t\t\tdividerRef.destroy();\n\t\t}\n\t\tthis.dividerRefs = [];\n\t}\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n\tselector: 'st-card-section-header-aside',\n\thost: {\n\t\tclass: 'shrink-0',\n\t},\n\ttemplate: '',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardSectionHeaderAsideComponent {}\n","import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { CARD_TYPOGRAPHY_CONTEXT } from '../card-context';\n\nconst SECTION_HEADER_PROMINENCE = signal(false).asReadonly();\n\n@Component({\n\tselector: 'st-card-section-header',\n\thost: {\n\t\tclass: 'block',\n\t},\n\ttemplate: `\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t
\n\t\t\t
\n\t\t
` element with the prominent card-header preset inside `` when the card contains sections.\n * If the card has no sections, the subtitle downgrades to the same preset used by section subtitles.\n * Preset and classes are overridable per instance.\n * Supports arbitrary inner HTML/components.\n *\n * Uses `display: contents` so the rendered paragraph element participates\n * directly in the parent flex layout.\n *\n * @example\n * ```html\n * \n * Title\n * Last updated today\n * \n * ```\n */\n@Component({\n\tselector: 'st-card-subtitle',\n\timports: [TextDirective],\n\ttemplate: `\n\t\t\n\t\t\t\n\t\t
\n\t`,\n\thost: { style: 'display: contents' },\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardSubtitleComponent {\n\tprivate readonly typographyContext = inject(CARD_TYPOGRAPHY_CONTEXT, { optional: true });\n\tprivate readonly hostStaticClasses = inject(ElementRef).nativeElement.getAttribute('class') ?? '';\n\n\tpreset = input(undefined);\n\tclass = input('');\n\n\tprotected readonly isCardHeader = computed(() => this.typographyContext?.area === 'card-header');\n\tprotected readonly prominent = computed(() => this.typographyContext?.prominent() ?? false);\n\tprotected readonly resolvedPreset = computed(() => {\n\t\tconst override = this.preset();\n\t\tif (override) return override;\n\t\tif (!this.isCardHeader()) return '8';\n\t\treturn this.prominent() ? '7' : '8';\n\t});\n\tprotected readonly resolvedClass = computed(() => {\n\t\tconst toneClass = this.isCardHeader() && this.prominent() ? 'block text-base-content/70' : 'block text-base-content/60';\n\t\treturn [toneClass, this.class(), this.hostStaticClasses].filter(Boolean).join(' ');\n\t});\n}\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, ElementRef, computed, inject, input } from '@angular/core';\nimport { TextDirective, TextPreset } from '@sixbell-telco/sdk/directives/text';\nimport { CARD_TYPOGRAPHY_CONTEXT } from '../card-context';\n\n/**\n * A context-aware title primitive for cards.\n *\n * @remarks\n * Renders as `` with prominent preset 2 inside `` when the card contains sections.\n * If the card has no sections, the header title downgrades to preset 4 so the header does not overstate hierarchy.\n * Inside `` (or standalone), it renders as `` with preset 4.\n * Semantic tag (`as`), preset, and classes are overridable per instance.\n * Supports arbitrary inner HTML/components (badges, links, icons).\n *\n * Uses `display: contents` so the rendered heading element participates\n * directly in the parent flex layout.\n *\n * @example\n * ```html\n * \n * Customer overview\n * \n * ```\n */\n@Component({\n\tselector: 'st-card-title',\n\timports: [NgTemplateOutlet, TextDirective],\n\ttemplate: `\n\t\t\n\t\t@switch (tag()) {\n\t\t\t@case ('h2') {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t}\n\t\t\t@default {\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t}\n\t\t}\n\t`,\n\thost: { style: 'display: contents' },\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardTitleComponent {\n\tprivate readonly typographyContext = inject(CARD_TYPOGRAPHY_CONTEXT, { optional: true });\n\tprivate readonly hostStaticClasses = inject(ElementRef).nativeElement.getAttribute('class') ?? '';\n\t// eslint-disable-next-line @angular-eslint/no-input-rename\n\ttagOverride = input<'h2' | 'h3' | undefined>(undefined, { alias: 'as' });\n\tpreset = input(undefined);\n\tclass = input('');\n\n\tprotected readonly isCardHeader = computed(() => this.typographyContext?.area === 'card-header');\n\tprotected readonly prominent = computed(() => this.typographyContext?.prominent() ?? false);\n\tprotected readonly tag = computed(() => this.tagOverride() ?? (this.isCardHeader() ? 'h2' : 'h3'));\n\tprotected readonly resolvedPreset = computed(() => {\n\t\tconst override = this.preset();\n\t\tif (override) return override;\n\t\tif (!this.isCardHeader()) return '4';\n\t\treturn this.prominent() ? '2' : '4';\n\t});\n\tprotected readonly resolvedClass = computed(() => {\n\t\tconst classes = [this.hostStaticClasses, this.class(), 'block'].filter(Boolean).join(' ');\n\t\treturn classes;\n\t});\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, contentChildren, input } from '@angular/core';\nimport { cn } from '@sixbell-telco/sdk/utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { CARD_HAS_SECTIONS } from '../card-context';\nimport { CardSectionComponent } from '../card-section/card-section.component';\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 * \n * Card Title
\n * Card content
\n *