{"version":3,"file":"eui-components-eui-content-card.mjs","sources":["../../eui-content-card/eui-content-card-body/eui-content-card-body-top.ts","../../eui-content-card/eui-content-card-body/eui-content-card-body.component.ts","../../eui-content-card/eui-content-card-body/eui-content-card-body.component.html","../../eui-content-card/eui-content-card-footer/eui-content-card-footer.component.ts","../../eui-content-card/eui-content-card-header/eui-content-card-header-start.ts","../../eui-content-card/eui-content-card.component.ts","../../eui-content-card/eui-content-card.component.html","../../eui-content-card/eui-content-card-header/eui-content-card-header-end.ts","../../eui-content-card/eui-content-card-header/eui-content-card-header-end.html","../../eui-content-card/eui-content-card-header/eui-content-card-header-metadata.ts","../../eui-content-card/eui-content-card-header/eui-content-card-header-submetadata.ts","../../eui-content-card/eui-content-card-header/eui-content-card-header-subtitle.ts","../../eui-content-card/eui-content-card-header/eui-content-card-header-title.ts","../../eui-content-card/eui-content-card-header/eui-content-card-header.component.ts","../../eui-content-card/eui-content-card-header/eui-content-card-header.component.html","../../eui-content-card/eui-content-card-media/eui-content-card-media.component.ts","../../eui-content-card/index.ts","../../eui-content-card/eui-components-eui-content-card.ts"],"sourcesContent":["import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n/**\n * @description\n * Container for content at the top of the card body. Used for highlighted information, alerts, or content that needs visual separation from the main body.\n * \n * @usageNotes\n * ### Alert Message\n * ```html\n * \n *
\n * \n * ```\n * \n * ### Accessibility\n * - Use appropriate semantic elements for content type\n * - Ensure alerts have proper ARIA roles when needed\n * - Maintain color contrast for all content\n * \n * ### Notes\n * - Positioned at the top of the body with visual separation\n * - Optional component - only use when content needs emphasis\n * - Commonly used for alerts, summaries, or key metrics\n * - Automatically styled with appropriate spacing\n */\n@Component({\n selector: 'eui-content-card-body-top',\n template: '',\n styleUrl: './eui-content-card-body-top.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiContentCardBodyTopComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-content-card-body-top'\n */\n @HostBinding('class') string = 'eui-content-card-body-top';\n}\n","import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\n/**\n * @description\n * Container for the main content area of the card. Supports optional top section for highlighted content.\n * Content is hidden when the card is collapsed.\n * \n * @usageNotes\n * ### Basic Body\n * ```html\n * \n *
Main card content goes here
\n * \n * ```\n * \n * ### With Top Section\n * ```html\n * \n * \n *
\n * Important notice or highlighted content\n *
\n * \n *
Regular card content follows
\n * \n * ```\n * \n * ### Accessibility\n * - Use semantic HTML elements for content structure\n * - Ensure proper heading hierarchy within body content\n * - Maintain sufficient color contrast for all text\n * - Make interactive elements keyboard accessible\n * \n * ### Notes\n * - Primary content container for the card\n * - Automatically hidden when parent card is collapsed\n * - Can contain any HTML content or components\n * - Use body-top for content that needs visual separation\n */\n@Component({\n selector: 'eui-content-card-body',\n templateUrl: './eui-content-card-body.component.html',\n styleUrl: './eui-content-card-body.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiContentCardBodyComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-content-card-body'\n */\n @HostBinding('class') string = 'eui-content-card-body';\n}\n","\n\n\n\n
\n \n
","import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\n/**\n * @description\n * Container for footer content at the bottom of the card. Typically used for actions, links, or supplementary information.\n * \n * @usageNotes\n * ### Action Buttons\n * ```html\n * \n * View Details\n * Cancel\n * \n * ```\n * \n * ### Links\n * ```html\n * \n * Read more\n * \n * ```\n * \n * ### Mixed Content\n * ```html\n * \n *
\n * Last updated: 2 hours ago\n * Edit\n *
\n * \n * ```\n * \n * ### Accessibility\n * - Ensure all interactive elements are keyboard accessible\n * - Provide clear labels for all actions\n * - Use appropriate button types (button vs link)\n * - Maintain logical tab order\n * \n * ### Notes\n * - Positioned at the bottom of the card with visual separation\n * - Optional component - only include when actions or additional info needed\n * - Commonly used for primary/secondary actions\n * - Automatically styled with appropriate spacing and borders\n */\n@Component({\n selector: 'eui-content-card-footer',\n template: '',\n styleUrl: './eui-content-card-footer.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiContentCardFooterComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-content-card-footer'\n */\n @HostBinding('class') string = 'eui-content-card-footer';\n}\n","import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\n/**\n * @description\n * Container for content placed at the start (left side) of the card header. Typically used for status indicators, badges, or icons.\n * \n * @usageNotes\n * ### With Status Chip\n * ```html\n * \n * Active\n * \n * ```\n * \n * ### With Icon\n * ```html\n * \n * \n * \n * ```\n * \n * ### Accessibility\n * - Ensure status indicators have appropriate text or ARIA labels\n * - Icons should have descriptive labels when conveying important information\n * \n * ### Notes\n * - Positioned at the start of the header before the title\n * - Commonly used for visual status indicators or categorization\n * - Content is automatically aligned and spaced\n */\n@Component({\n selector: 'eui-content-card-header-start',\n template: '',\n styleUrl: './eui-content-card-header-start.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class EuiContentCardHeaderStartComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-content-card-header-start'\n */\n @HostBinding('class') string = 'eui-content-card-header-start';\n}\n","import {\n Component,\n HostBinding,\n Input,\n ChangeDetectionStrategy,\n booleanAttribute,\n inject,\n Output,\n EventEmitter,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { EUI_INPUT_CHECKBOX } from '@eui/components/eui-input-checkbox';\n\nimport { BaseStatesDirective } from '@eui/components/shared';\n\n/**\n * @description\n * The eui-content-card component is based on Material Design and provides a content container for text, photos and actions in the context of a single subject.\n * Supports selection, collapsing, and bookmarking functionality.\n * \n * @usageNotes\n * ### Basic Usage\n * ```html\n * \n * \n * Card Title\n * \n * Card content goes here\n * \n * ```\n * \n * ### With Selection and Collapse\n * ```html\n * \n * \n * Collapsible Card\n * \n * This content can be collapsed\n * \n * ```\n * \n * ### Accessibility\n * - Use semantic heading levels within card titles for proper document structure\n * - Ensure interactive elements (checkboxes, buttons) have appropriate labels\n * - When using selection, the checkbox is automatically managed with proper ARIA attributes\n * - Collapsible cards use icon buttons with appropriate accessibility labels\n * \n * ### Notes\n * - Cards can be made selectable with `isSelectable` input\n * - Cards can be made collapsible with `isCollapsible` input\n * - Bookmarking functionality is available via `isBookmarkable` input\n * - All interactive features emit events for state changes\n * - Use with child components for structured content layout\n */\n@Component({\n templateUrl: './eui-content-card.component.html',\n selector: 'eui-content-card',\n styleUrl: './eui-content-card.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n hostDirectives: [\n {\n directive: BaseStatesDirective,\n },\n ],\n imports: [\n FormsModule,\n ...EUI_INPUT_CHECKBOX,\n ],\n})\nexport class EuiContentCardComponent {\n /**\n * @description\n * Computes and returns the CSS classes for the component based on its current state.\n *\n * @returns {string} Space-separated string of CSS class names\n */\n @HostBinding('class')\n get cssClasses(): string {\n return [\n this.baseStatesDirective.getCssClasses('eui-content-card'),\n this.isCollapsible ? 'eui-content-card--collapsible' : '',\n this.isCollapsed ? 'eui-content-card--collapsed' : '',\n this.isSelectable ? 'eui-content-card--selectable': '',\n this.isSelected ? 'eui-content-card--selected' : '',\n ]\n .join(' ')\n .trim();\n }\n /**\n * Sets the `data-e2e` attribute at the host element.\n * \n * @default 'eui-card'\n */\n @HostBinding('attr.data-e2e') @Input() e2eAttr = 'eui-content-card';\n /**\n * Sets the `isSelected` attribute in order to show the card header as selected.\n *\n * @default false\n */\n @Input({ transform: booleanAttribute }) isSelected = false;\n /**\n * Sets the `isSelectable` attribute in order to show the card header checkbox for selection\n *\n * @default false\n */\n @Input({ transform: booleanAttribute }) isSelectable = false;\n /**\n * Sets the `isCollapsible` attribute which shows the collapsible toggle in the header.\n *\n * @default false\n */\n @Input({ transform: booleanAttribute }) isCollapsible = false;\n /**\n * Sets the `isCollapsed` attribute which collapses the card content.\n *\n * @default false\n */\n @Input({ transform: booleanAttribute }) isCollapsed = false;\n /**\n * Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.\n *\n * @default false\n */\n @Input({ transform: booleanAttribute }) isBookmarkable = false;\n /**\n * Sets the `isBookmarkable` attribute which is adding a bookmark toggle to the card header end-block.\n *\n * @default false\n */\n @Input({ transform: booleanAttribute }) isBookmarked = false;\n\n /**\n * Event emitted when the card is selected.\n */\n @Output() cardSelect = new EventEmitter();\n /**\n * Event emitted when the card is bookmarked.\n */\n @Output() cardBookmark = new EventEmitter();\n /**\n * Event emitted when the card is bookmarked.\n */\n @Output() cardCollapse = new EventEmitter();\n\n private baseStatesDirective: BaseStatesDirective = inject(BaseStatesDirective);\n\n toggleCollapse(): void {\n this.isCollapsed = !this.isCollapsed;\n this.cardCollapse.emit(this.isCollapsed);\n }\n toggleBookmark(): void {\n this.isBookmarked = !this.isBookmarked;\n this.cardBookmark.emit(this.isBookmarked);\n } \n \n protected onSelect(event: Event): void {\n this.cardSelect.emit(this.isSelected);\n }\n}\n","
\n @if (isSelectable) {\n
\n \n
\n }\n\n \n\n
\n \n\n
\n \n
\n
\n
\n\n\n","import { Component, HostBinding, ChangeDetectionStrategy, inject, forwardRef, Input } from '@angular/core';\nimport { EuiContentCardComponent } from '../eui-content-card.component';\nimport { EUI_ICON_TOGGLE } from '@eui/components/eui-icon-toggle';\nimport { EUI_BUTTON } from '@eui/components/eui-button';\n\n/**\n * @description\n * Container for content placed at the end (right side) of the card header. Typically used for action buttons or menus.\n * Automatically integrates bookmark toggle when parent card has `isBookmarkable` enabled.\n * \n * @usageNotes\n * ### With Action Button\n * ```html\n * \n * \n * \n * ```\n * \n * ### With Multiple Actions\n * ```html\n * \n * \n * \n * \n * ```\n * \n * ### Accessibility\n * - All action buttons must have accessible labels\n * - Use `aria-label` or visible text for icon buttons\n * - Group related actions logically\n * \n * ### Notes\n * - Positioned at the end of the header after all other content\n * - Automatically includes bookmark toggle when parent card is bookmarkable\n * - Actions are automatically aligned and spaced\n * - Commonly used for contextual menus or quick actions\n */\n@Component({\n selector: 'eui-content-card-header-end',\n templateUrl: './eui-content-card-header-end.html',\n styleUrl: './eui-content-card-header-end.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ...EUI_ICON_TOGGLE,\n ...EUI_BUTTON,\n ],\n})\nexport class EuiContentCardHeaderEndComponent {\n /**\n * Binds the class to the component.\n *\n * @default 'eui-content-card-header-end'\n */\n @HostBinding('class') string = 'eui-content-card-header-end';\n\n /**\n * Keyboard shortcut key for the bookmark toggle.\n * @default 'b'\n */\n @Input() bookmarkAccessKey = 'b';\n\n protected euiContentCardParent: EuiContentCardComponent = inject(forwardRef(() => EuiContentCardComponent), { optional: true, host: true });\n\n onToggle(event: boolean): void {\n this.euiContentCardParent.toggleBookmark();\n }\n}\n","\n\n@if (euiContentCardParent.isBookmarkable) {\n
\n \n
\n}","import { Component, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\n/**\n * @description\n * Container for primary metadata information displayed below the subtitle. Used for key details like dates, authors, or categories.\n * \n * @usageNotes\n * ### Simple Metadata\n * ```html\n * \n * Created: January 26, 2024\n * \n * ```\n * \n * ### Multiple Metadata Items\n * ```html\n * \n * Author: John Doe | Category: Research | Status: Published\n * \n * ```\n * \n * ### With Semantic Markup\n * ```html\n * \n * | \n * 5 min read\n * \n * ```\n * \n * ### Accessibility\n * - Use semantic HTML elements like `