@eui/components 19.1.2-snapshot-1743600141774 → 19.1.3-snapshot-1744273107050

package/fesm2022/eui-components-eui-card.mjs

@@ -72,23 +72,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
             type: Injectable
         }] });
 
+/**
+ * @description
+ * The eui-card-header component provides the header options of the eui-card.
+ *
+ * @example
+ * ```html
+ *   <eui-card euiCollapsible>
+ *       <eui-card-header>
+ *           <eui-card-header-left-content>
+ *               <eui-icon-svg icon="home:sharp" fillColor="accent"></eui-icon-svg>
+ *           </eui-card-header-left-content>
+ *           <eui-card-header-title>Title</eui-card-header-title>
+ *           <eui-card-header-right-content>
+ *               <button euiButton euiPrimary euiSizeS>Action</button>
+ *           </eui-card-header-right-content>
+ *       </eui-card-header>
+ *       <eui-card-content>
+ *           Card content...
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
+ */
 class EuiCardHeaderComponent {
     constructor(uiStateService) {
         this.uiStateService = uiStateService;
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-header'
+         */
         this.string = 'eui-card-header';
+        /**
+         * Sets the expandLabel Input property.
+         *
+         * @default 'expand'
+         */
         this.expandLabel = 'expand';
+        /**
+         * Sets the collapseLabel Input property.
+         *
+         * @default 'collapse'
+         */
         this.collapseLabel = 'collapse';
+        /**
+         * Input property to enable/disable the header click toggle.
+         *
+         * @default true
+         */
         this.hasHeaderClickToggle = true;
+        /**
+         * Input property to expand the bottom part of the card header.
+         *
+         * @default false
+         */
         this.hasBottomExpander = false;
+        /**
+         * Input property to display the title within the full card container's width.
+         *
+         * @default false
+         */
         this.hasFullTitle = false;
+        /**
+         * Input property to display the title & subtitle content in multiple lines.
+         *
+         * @default false
+         */
         this.isHeaderMultilines = false;
+        /**
+         * Event emitted when the card header collapses.
+         */
         this.collapse = new EventEmitter();
     }
+    /**
+     * Fires when the icon button expander is clicked/pressed to expand/collapse the bottom expander.
+     *
+     * @param event The event that fires the toggle.
+     */
     onToggle(event) {
         this.uiStateService.toggleCollapsed();
         this.collapse.emit(this.uiStateService.state.isCollapsed);
         event.stopPropagation();
     }
+    /**
+     * Toggles the header when the header is clicked and emits the isCollapsed state.
+     *
+     */
     onToggleHeader() {
         if (this.hasHeaderClickToggle && this.uiStateService.state.isCollapsible) {
             this.uiStateService.toggleCollapsed();
@@ -124,8 +194,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 type: Output
             }] } });
 
+/**
+ * @description
+ * The eui-card-header-title component projects the title for eui-card-header.
+ *
+ * @example
+ * ```html
+ *   <eui-card euiCollapsible>
+ *       <eui-card-header>
+ *           <eui-card-header-left-content>
+ *               <eui-icon-svg icon="home:sharp" fillColor="accent"></eui-icon-svg>
+ *           </eui-card-header-left-content>
+ *           <eui-card-header-title>Title</eui-card-header-title>
+ *           <eui-card-header-right-content>
+ *               <button euiButton euiPrimary euiSizeS>Action</button>
+ *           </eui-card-header-right-content>
+ *       </eui-card-header>
+ *       <eui-card-content>
+ *           Card content...
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
+ */
 class EuiCardHeaderTitleComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-header__title-container-title'
+         */
         this.string = 'eui-card-header__title-container-title';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardHeaderTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -144,8 +242,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-header-right-content component projects the right content for eui-card-header.
+ *
+ * @example
+ * ```html
+ *   <eui-card euiCollapsible>
+ *       <eui-card-header>
+ *           <eui-card-header-left-content>
+ *               <eui-icon-svg icon="home:sharp" fillColor="accent"></eui-icon-svg>
+ *           </eui-card-header-left-content>
+ *           <eui-card-header-title>Title</eui-card-header-title>
+ *           <eui-card-header-right-content>
+ *               <button euiButton euiPrimary euiSizeS>Action</button>
+ *           </eui-card-header-right-content>
+ *       </eui-card-header>
+ *       <eui-card-content>
+ *           Card content...
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
+ */
 class EuiCardHeaderRightContentComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-header__right-content'
+         */
         this.string = 'eui-card-header__right-content';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardHeaderRightContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -164,8 +290,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-header-left-content component projects the left content for eui-card-header.
+ *
+ * @example
+ * ```html
+ *   <eui-card euiCollapsible>
+ *       <eui-card-header>
+ *           <eui-card-header-left-content>
+ *               <eui-icon-svg icon="home:sharp" fillColor="accent"></eui-icon-svg>
+ *           </eui-card-header-left-content>
+ *           <eui-card-header-title>Title</eui-card-header-title>
+ *       </eui-card-header>
+ *       <eui-card-content>
+ *           Card content...
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
+ */
 class EuiCardHeaderLeftContentComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-header__left-content'
+         */
         this.string = 'eui-card-header__left-content';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardHeaderLeftContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -184,8 +335,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-header-subtitle component projects the subtitle for eui-card-header.
+ *
+ * @example
+ * ```html
+ *   <eui-card>
+ *       <eui-card-header>
+ *           <eui-card-header-title>
+ *               {{ cardTitle }}
+ *           </eui-card-header-title>
+ *           <eui-card-header-subtitle>
+ *               {{ cardSubtitle }}
+ *           </eui-card-header-subtitle>
+ *       </eui-card-header>
+ *       <eui-card-content>
+ *           I am the content of the card container...
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card} for more details.
+ */
 class EuiCardHeaderSubtitleComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-header__title-container-subtitle'
+         */
         this.string = 'eui-card-header__title-container-subtitle';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardHeaderSubtitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -204,8 +382,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-header-body component projects the body for eui-card-header.
+ *
+ * @example
+ * ```html
+ *   <eui-card>
+ *       <eui-card-header>
+ *           <eui-card-header-title>Title</eui-card-header-title>
+ *           <eui-card-header-body>Body</eui-card-header-body>
+ *       </eui-card-header>
+ *       <eui-card-content>
+ *           Card content...
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-header} for more details.
+ */
 class EuiCardHeaderBodyComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-header-body'
+         */
         this.string = 'eui-card-header-body';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardHeaderBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -224,9 +425,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-content component projects the content for eui-card.
+ *
+ * @example
+ * ```html
+ *   <eui-card>
+ *       <eui-card-header>
+ *           <eui-card-header-title>
+ *               {{ cardTitle }}
+ *           </eui-card-header-title>
+ *           <eui-card-header-subtitle>
+ *               {{ cardSubtitle }}
+ *           </eui-card-header-subtitle>
+ *       </eui-card-header>
+ *       <eui-card-content>
+ *           I am the content of the card container...
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card}.
+ */
 class EuiCardContentComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-content'
+         */
         this.string = 'eui-card-content';
+        /**
+         * Binds the tabindex attribute to the component.
+         *
+         * @default 0
+         */
         this.tabindex = 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -248,10 +481,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['attr.tabindex']
             }] } });
 
+/**
+ * @description
+ * The eui-card-header-body component projects the body for eui-card-header.
+ *
+ * @example
+ * ```html
+ *    <eui-card euiNoShadow>
+ *       <eui-card-media
+ *           imageUrl="./assets/images/cards/home-card-eu-publications.jpg"
+ *           imageLegend="EU Publications"
+ *           imageClickUrl="/style-guide-next/components/eui-card"
+ *           euiTooltip="Internal link Url defined pointing to this page">
+ *       </eui-card-media>
+ *       <eui-card-content style="height: 8rem;">
+ *           Reports, studies, information booklets, magazines and other publications from the EU institutions and other bodies
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#media-cards} for more details.
+ */
 class EuiCardMediaComponent {
     constructor() {
+        /**
+         * Option to specify an image description.
+         * @default 'eUI Card Image'
+         */
         this.imageDescription = 'eUI Card Image';
+        /**
+         * Option to specify the image height.
+         * @default 'auto'
+         */
         this.imageHeight = 'auto';
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-media'
+         */
         this.string = 'eui-card-media';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -277,8 +543,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-footer-action-buttons component projects the action buttons content for eui-card.
+ *
+ * @example
+ * ```html
+ *   <eui-card euiHoverable>
+ *       <eui-card-media
+ *           imageUrl="./assets/images/cards/home-card-law.jpg">
+ *       </eui-card-media>
+ *       <eui-card-content style="max-height: 11rem; min-height: 11rem;">
+ *           <h5 class="eui-u-f-bold eui-u-mb-s">Law | EUR Lex</h5>
+ *           The Official Journal of the European Union, EU case law and other resources for EU law
+ *       </eui-card-content>
+ *       <eui-card-footer>
+ *           <eui-card-footer-action-buttons class="eui-u-flex-justify-content-end">
+ *               <button euiButton euiPrimary euiSizeS>
+ *                   <span euiLabel>Action</span>
+ *                   <eui-icon-svg icon="chevron-forward:sharp"></eui-icon-svg>
+ *               </button>
+ *           </eui-card-footer-action-buttons>
+ *       </eui-card-footer>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
+ */
 class EuiCardFooterActionButtonsComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-footer-actions__buttons'
+         */
         this.string = 'eui-card-footer-actions__buttons';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterActionButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -297,8 +594,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-footer-action-icons component projects the action icons content for eui-card.
+ *
+ * @example
+ * ```html
+ *   <eui-card>
+ *       <eui-card-header>
+ *           <eui-card-header-title>
+ *               <strong>Default layout of a card footer</strong>
+ *           </eui-card-header-title>
+ *       </eui-card-header>
+ *
+ *       <eui-card-content>
+ *           <p class="eui-u-text-paragraph">Hover on footer's elements to display more information.</p>
+ *       </eui-card-content>
+ *
+ *       <eui-card-footer>
+ *           <eui-card-footer-action-buttons euiTooltip="Here are displayed the main action buttons.&#13;It is recommended to have maximum 2 buttons.&#13;Primary action button is always displayed first.&#13;Other actions will be put in the menu.">
+ *               <span class="eui-u-cursor-help">Action buttons</span>
+ *           </eui-card-footer-action-buttons>
+ *
+ *           <eui-card-footer-action-icons euiTooltip="Here are displayed the action icons.&#13;It is recommended to have maximum 2 icons.&#13;Other actions will be put in the menu.">
+ *               <span class="eui-u-cursor-help">Action icons</span>
+ *           </eui-card-footer-action-icons>
+ *
+ *           <eui-card-footer-menu-content [tooltipText]="'Actions menu to propose more options'">
+ *               <div class="m-2">Menu content here</div>
+ *           </eui-card-footer-menu-content>
+ *       </eui-card-footer>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
+ */
 class EuiCardFooterActionIconsComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-footer-actions__icons'
+         */
         this.string = 'eui-card-footer-actions__icons';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterActionIconsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -317,9 +653,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-footer-menu-content component projects the content of the actions menu of the eui-card.
+ *
+ * @example
+ * ```html
+ *   <eui-card>
+ *       <eui-card-header>
+ *           <eui-card-header-title>
+ *               <strong>Default layout of a card footer</strong>
+ *           </eui-card-header-title>
+ *       </eui-card-header>
+ *
+ *       <eui-card-content>
+ *           <p class="eui-u-text-paragraph">Hover on footer's elements to display more information.</p>
+ *       </eui-card-content>
+ *
+ *       <eui-card-footer>
+ *           <eui-card-footer-action-buttons euiTooltip="Here are displayed the main action buttons.&#13;It is recommended to have maximum 2 buttons.&#13;Primary action button is always displayed first.&#13;Other actions will be put in the menu.">
+ *               <span class="eui-u-cursor-help">Action buttons</span>
+ *           </eui-card-footer-action-buttons>
+ *
+ *           <eui-card-footer-action-icons euiTooltip="Here are displayed the action icons.&#13;It is recommended to have maximum 2 icons.&#13;Other actions will be put in the menu.">
+ *               <span class="eui-u-cursor-help">Action icons</span>
+ *           </eui-card-footer-action-icons>
+ *
+ *           <eui-card-footer-menu-content [tooltipText]="'Actions menu to propose more options'">
+ *               <div class="m-2">Menu content here</div>
+ *           </eui-card-footer-menu-content>
+ *       </eui-card-footer>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
+ */
 class EuiCardFooterMenuContentComponent {
     constructor() {
+        /**
+         * Sets the tooltipText Input property.
+         *
+         * @default 'More options'
+         */
         this.tooltipText = 'More options';
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-footer-menu-content'
+         */
         this.string = 'eui-card-footer-menu-content';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterMenuContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -335,8 +715,73 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-footer-menu component provides menu options for the footer of the eui-card.
+ *
+ * @example
+ * ```html
+ *   <eui-card>
+ *       <eui-card-header>
+ *           <eui-card-header-title>
+ *               <strong>Sample Card Title</strong>
+ *           </eui-card-header-title>
+ *       </eui-card-header>
+ *
+ *       <eui-card-content>
+ *           <p class="eui-u-text-paragraph">I am the content of the card container with a full default footer's layout.</p>
+ *       </eui-card-content>
+ *
+ *       <eui-card-footer>
+ *           <eui-card-footer-action-buttons>
+ *               <div class="eui-u-flex eui-u-flex-wrap">
+ *                   <button euiButton euiPrimary>Action 1</button>
+ *                   <button euiButton euiSecondary>Action 2</button>
+ *               </div>
+ *           </eui-card-footer-action-buttons>
+ *
+ *           <eui-card-footer-action-icons>
+ *               <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary euiTooltip="Mark as favourite" aria-label="Mark as favourite">
+ *                   <eui-icon-svg icon="eui-star" size="l" fillColor="neutral-lighter"></eui-icon-svg>
+ *               </button>
+ *               <button euiButton euiRounded euiIconButton euiBasicButton euiSecondary euiTooltip="Share" aria-label="Share">
+ *                   <eui-icon-svg icon="eui-ecl-share" size="m" fillColor="neutral-lighter"></eui-icon-svg>
+ *               </button>
+ *           </eui-card-footer-action-icons>
+ *
+ *           <eui-card-footer-menu>
+ *               <eui-dropdown>
+ *                   <button
+ *                       euiButton
+ *                       euiRounded
+ *                       euiIconButton
+ *                       euiBasicButton
+ *                       euiSecondary
+ *                       type="button"
+ *                       euiTooltip="more options"
+ *                       [attr.aria-label]="'more options'">
+ *                       <eui-icon-svg icon="ellipsis-vertical:sharp"></eui-icon-svg>
+ *                   </button>
+ *                   <eui-dropdown-content>
+ *                       <button euiDropdownItem>Menu item 1</button>
+ *                       <button euiDropdownItem>Menu item 2</button>
+ *                       <button euiDropdownItem>Menu item 3</button>
+ *                   </eui-dropdown-content>
+ *               </eui-dropdown>
+ *           </eui-card-footer-menu>
+ *
+ *       </eui-card-footer>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
+ */
 class EuiCardFooterMenuComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-footer-menu'
+         */
         this.string = 'eui-card-footer-menu';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -356,8 +801,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: ['class']
             }] } });
 
+/**
+ * @description
+ * The eui-card-footer component projects the footer of the eui-card.
+ *
+ * @example
+ * ```html
+ *   <eui-card>
+ *       <eui-card-header>
+ *           <eui-card-header-title>
+ *               <strong>Default layout of a card footer</strong>
+ *           </eui-card-header-title>
+ *       </eui-card-header>
+ *
+ *       <eui-card-content>
+ *           <p class="eui-u-text-paragraph">Hover on footer's elements to display more information.</p>
+ *       </eui-card-content>
+ *
+ *       <eui-card-footer>
+ *           <eui-card-footer-action-buttons euiTooltip="Here are displayed the main action buttons.&#13;It is recommended to have maximum 2 buttons.&#13;Primary action button is always displayed first.&#13;Other actions will be put in the menu.">
+ *               <span class="eui-u-cursor-help">Action buttons</span>
+ *           </eui-card-footer-action-buttons>
+ *
+ *           <eui-card-footer-action-icons euiTooltip="Here are displayed the action icons.&#13;It is recommended to have maximum 2 icons.&#13;Other actions will be put in the menu.">
+ *               <span class="eui-u-cursor-help">Action icons</span>
+ *           </eui-card-footer-action-icons>
+ *
+ *           <eui-card-footer-menu-content [tooltipText]="'Actions menu to propose more options'">
+ *               <div class="m-2">Menu content here</div>
+ *           </eui-card-footer-menu-content>
+ *       </eui-card-footer>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card#card-footer}.
+ */
 class EuiCardFooterComponent {
     constructor() {
+        /**
+         * Binds the class to the component.
+         *
+         * @default 'eui-card-footer'
+         */
         this.string = 'eui-card-footer';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.1", ngImport: i0, type: EuiCardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -383,21 +867,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.1", ngImpor
                 args: [forwardRef(() => EuiCardFooterMenuComponent), { static: false }]
             }] } });
 
+/**
+ * @description
+ * The eui-card component is based on Material Design and provides a content container for text, photos and actions in the context of a single subject.
+ *
+ * @example
+ * ```html
+ *   <eui-card>
+ *       <eui-card-header>
+ *           <eui-card-header-title>
+ *               {{ cardTitle }}
+ *           </eui-card-header-title>
+ *           <eui-card-header-subtitle>
+ *               {{ cardSubtitle }}
+ *           </eui-card-header-subtitle>
+ *       </eui-card-header>
+ *       <eui-card-content>
+ *           I am the content of the card container...
+ *       </eui-card-content>
+ *   </eui-card>
+ * ```
+ * See {@link https://eui.ecdevops.eu/eui-showcase-ux-components-19.x/style-guide/components/eui-card}.
+ */
 class EuiCardComponent {
     constructor() {
+        /**
+         * Sets the `data-e2e` attribute at the host element.
+         *
+         * @default 'eui-card'
+         */
         this.e2eAttr = 'eui-card';
+        /**
+         * Sets the `euiSelected` attribute in order to show the card header as selected.
+         *
+         * @default false
+         */
         this.euiSelected = false;
+        /**
+         * Sets the `euiCollapsible` attribute which shows the collapsible toggle in the header.
+         *
+         * @default false
+         */
         this.euiCollapsible = false;
+        /**
+         * Sets the `euiCollapsed` attribute which collapses the card content.
+         *
+         * @default false
+         */
         this.euiCollapsed = false;
+        /**
+         * Sets the `euiUrgent` attribute in order to show the card header as urgent.
+         *
+         * @default false
+         */
         this.euiUrgent = false;
+        /**
+         * Sets the `euiNoShadow` attribute in order to remove the shadow from the card.
+         *
+         * @default false
+         */
         this.euiNoShadow = false;
+        /**
+         * Sets the `euiNoContentPadding` attribute in order to remove the padding from the card content.
+         *
+         * @default false
+         */
         this.euiNoContentPadding = false;
+        /**
+         * Sets the `euiHoverable` attribute in order to show the hover effect on the card.
+         *
+         * @default false
+         */
         this.euiHoverable = false;
+        /**
+         * Event emitted when the card collapses.
+         */
         this.collapse = new EventEmitter();
         this.uiStateService = inject(UiStateService);
         this.destroy$ = new Subject();
         this.baseStatesDirective = inject(BaseStatesDirective);
     }
+    /**
+     * @description
+     * Computes and returns the CSS classes for the component based on its current state.
+     *
+     * @returns {string} Space-separated string of CSS class names
+     */
     get cssClasses() {
         return [
             this.baseStatesDirective.getCssClasses('eui-card'),
@@ -443,6 +998,10 @@ class EuiCardComponent {
         this.destroy$.next(true);
         this.destroy$.unsubscribe();
     }
+    /**
+     * Sets the card state in the UIStateService.
+     * This method is called when the component is initialized and when the input properties change.
+     */
     _setCardState() {
         const nextState = {
             ...this.uiStateService.state,