@eui/ecl 23.0.0-alpha.10 → 23.0.0-alpha.11

package/fesm2022/eui-ecl-components-ecl-file.mjs

@@ -1,12 +1,11 @@
 import * as i0 from '@angular/core';
-import { HostBinding, Directive, input, inject, contentChild, Component, booleanAttribute, model, output, contentChildren } from '@angular/core';
-import { ECLBaseDirective, EclThemeService, EclBaseEvent } from '@eui/ecl/core';
+import { Directive, input, booleanAttribute, Component, model, inject, signal, output, contentChild, computed, effect } from '@angular/core';
+import { ECLBaseDirective, EclBaseEvent, EclThemeService } from '@eui/ecl/core';
 import * as i1 from '@eui/ecl/components/ecl-icon';
 import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
 import * as i2 from '@eui/ecl/components/ecl-label';
 import { EUI_ECL_LABEL } from '@eui/ecl/components/ecl-label';
-import { TranslatePipe } from '@ngx-translate/core';
-import * as i1$1 from '@eui/ecl/components/ecl-button';
+import * as i3 from '@eui/ecl/components/ecl-button';
 import { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
 
 /**
@@ -14,166 +13,279 @@ import { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
  * inside a file component.
  */
 class EclFileTranslationDownloadDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies the ECL translation download class to the host element.
-         */
-        this.className = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileTranslationDownloadDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFileTranslationDownloadDirective, isStandalone: true, selector: "[eclFileTranslationDownload]", host: { properties: { "class.ecl-file__translation-download": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFileTranslationDownloadDirective, isStandalone: true, selector: "[eclFileTranslationDownload]", host: { classAttribute: "ecl-file__translation-download" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileTranslationDownloadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclFileTranslationDownload]',
+                    host: {
+                        class: 'ecl-file__translation-download',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-file__translation-download']
-            }] } });
+        }] });
 /**
  * Directive to apply the correct styling class for a standard file download link.
  */
 class EclFileDownloadDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies the ECL download class to the host element.
-         */
-        this.className = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileDownloadDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFileDownloadDirective, isStandalone: true, selector: "[eclFileDownload]", host: { properties: { "class.ecl-file__download": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFileDownloadDirective, isStandalone: true, selector: "[eclFileDownload]", host: { classAttribute: "ecl-file__download" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileDownloadDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclFileDownload]',
+                    host: {
+                        class: 'ecl-file__download',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-file__download']
-            }] } });
+        }] });
 /**
  * Directive to style a file preview link.
- * Adds spacing and ECL link classes for standalone appearance.
+ * Adds ECL link classes for standalone branded appearance.
  */
 class EclFilePreviewDirective extends ECLBaseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFilePreviewDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFilePreviewDirective, isStandalone: true, selector: "[eclFilePreview]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFilePreviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclFilePreview]',
+                }]
+        }] });
+/**
+ * Directive to style the file meta element (e.g. file size and format)
+ * inside the download link label.
+ */
+class EclFileMetaDirective extends ECLBaseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileMetaDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFileMetaDirective, isStandalone: true, selector: "[eclFileMeta]", host: { classAttribute: "ecl-file__meta" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileMetaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclFileMeta]',
+                    host: {
+                        class: 'ecl-file__meta',
+                    },
+                }]
+        }] });
+
+/**
+ * Component representing a single file translation item
+ * inside the ecl-file-items translation list.
+ */
+class EclFileItemComponent extends ECLBaseDirective {
     constructor() {
         super(...arguments);
         /**
-         * Applies ECL link class to the host element.
+         * @deprecated No longer used in v5.1.0. Kept for backward compatibility.
          */
-        this.hasClass = true;
+        this.isDescription = input(false, { ...(ngDevMode ? { debugName: "isDescription" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * Applies the standalone variant of the ECL link class to the host element.
+         * Title text of the file item (language name, e.g. "български").
          */
-        this.hasClassStandalone = true;
+        this.eclTitle = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "eclTitle" }] : /* istanbul ignore next */ []));
+        /**
+         * ID applied to the title element for accessibility.
+         */
+        this.titleId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "titleId" }] : /* istanbul ignore next */ []));
+        /**
+         * ID applied to the meta element for accessibility.
+         */
+        this.metaId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "metaId" }] : /* istanbul ignore next */ []));
+        /**
+         * Additional metadata for the item (e.g., file size, type).
+         */
+        this.meta = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
+        /**
+         * @deprecated No longer used in v5.1.0. Kept for backward compatibility.
+         */
+        this.label = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        /**
+         * Language code (e.g. "bg", "fr") applied as the `lang` attribute on the title element.
+         */
+        this.langDetail = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "langDetail" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFilePreviewDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFilePreviewDirective, isStandalone: true, selector: "[eclFilePreview]", host: { properties: { "style.margin-inline-end.px": "24", "class.ecl-link": "this.hasClass", "class.ecl-link--standalone": "this.hasClassStandalone" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclFileItemComponent, isStandalone: true, selector: "ecl-file-item", inputs: { isDescription: { classPropertyName: "isDescription", publicName: "isDescription", isSignal: true, isRequired: false, transformFunction: null }, eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, metaId: { classPropertyName: "metaId", publicName: "metaId", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, langDetail: { classPropertyName: "langDetail", publicName: "langDetail", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "listitem" }, classAttribute: "ecl-file__translation-item" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-file__translation-info\">\n    @if (eclTitle()) {\n        <div class=\"ecl-file__translation-title\" [id]=\"titleId()\" [attr.lang]=\"langDetail()\">{{ eclTitle() }}</div>\n    }\n    @if (meta()) {\n        <div class=\"ecl-file__translation-meta\" [id]=\"metaId()\">{{ meta() }}</div>\n    }\n</div>\n<div class=\"ecl-file__translation-action\">\n    <ng-content select=\"[eclFilePreview]\"></ng-content>\n    <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n</div>\n" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFilePreviewDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-file-item', host: {
+                        class: 'ecl-file__translation-item',
+                        role: 'listitem',
+                    }, template: "<div class=\"ecl-file__translation-info\">\n    @if (eclTitle()) {\n        <div class=\"ecl-file__translation-title\" [id]=\"titleId()\" [attr.lang]=\"langDetail()\">{{ eclTitle() }}</div>\n    }\n    @if (meta()) {\n        <div class=\"ecl-file__translation-meta\" [id]=\"metaId()\">{{ meta() }}</div>\n    }\n</div>\n<div class=\"ecl-file__translation-action\">\n    <ng-content select=\"[eclFilePreview]\"></ng-content>\n    <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n</div>\n" }]
+        }], propDecorators: { isDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDescription", required: false }] }], eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], metaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaId", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], langDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "langDetail", required: false }] }] } });
+
+/**
+ * Component representing the translation list within an ECL File component.
+ * The host element IS the list. The toggle button is rendered by the parent ecl-file.
+ */
+class EclFileItemsComponent extends ECLBaseDirective {
+    constructor() {
+        super(...arguments);
+        /**
+         * ID for the list, used by the toggle button's aria-controls.
+         */
+        this.id = model(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the list is expanded. Managed by the parent ecl-file component.
+         */
+        this.isExpanded = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: EclFileItemsComponent, isStandalone: true, selector: "ecl-file-items", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { id: "idChange", isExpanded: "isExpandedChange" }, host: { attributes: { "role": "list" }, properties: { "attr.id": "id()", "style.display": "isExpanded() ? \"block\" : \"none\"" }, classAttribute: "ecl-file__translation-list" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileItemsComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[eclFilePreview]',
+                    selector: 'ecl-file-items',
+                    template: '<ng-content></ng-content>',
                     host: {
-                        '[style.margin-inline-end.px]': '24',
+                        class: 'ecl-file__translation-list',
+                        role: 'list',
+                        '[attr.id]': 'id()',
+                        '[style.display]': 'isExpanded() ? "block" : "none"',
                     },
                 }]
-        }], propDecorators: { hasClass: [{
-                type: HostBinding,
-                args: ['class.ecl-link']
-            }], hasClassStandalone: [{
-                type: HostBinding,
-                args: ['class.ecl-link--standalone']
-            }] } });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }, { type: i0.Output, args: ["idChange"] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }, { type: i0.Output, args: ["isExpandedChange"] }] } });
 
 /**
  * Directive to style a <picture> element used in an ECL file component.
  * Adds ECL-specific picture and file picture classes.
  */
 class EclFilePictureDirective extends ECLBaseDirective {
-    /**
-     * Applies ECL picture styling classes to the host element.
-     */
-    get cssClasses() {
-        return [super.getCssClasses('ecl-picture ecl-file__picture')].join(' ').trim();
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFilePictureDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFilePictureDirective, isStandalone: true, selector: "picture[eclFilePicture]", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFilePictureDirective, isStandalone: true, selector: "picture[eclFilePicture]", host: { classAttribute: "ecl-picture ecl-file__picture" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFilePictureDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'picture[eclFilePicture]',
+                    host: {
+                        class: 'ecl-picture ecl-file__picture',
+                    },
                 }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }] });
 /**
  * Directive to style an <img> element inside an ECL file component.
  * Adds the ECL-specific image class.
  */
 class EclFileImageDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies the ECL image class to the host element.
-         */
-        this.className = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileImageDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFileImageDirective, isStandalone: true, selector: "img[eclFileImage]", host: { properties: { "class.ecl-file__image": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFileImageDirective, isStandalone: true, selector: "img[eclFileImage]", host: { classAttribute: "ecl-file__image" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img[eclFileImage]',
+                    host: {
+                        class: 'ecl-file__image',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-file__image']
-            }] } });
+        }] });
 /**
  * Directive to style a title element in an ECL file component.
  */
 class EclFileTitleDirective extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Applies the ECL file title class to the host element.
-         */
-        this.className = true;
-        /**
-         * ID attribute for the title element.
-         */
-        this.id = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileTitleDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: EclFileTitleDirective, isStandalone: true, selector: "[eclFileTitle]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ecl-file__title": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclFileTitleDirective, isStandalone: true, selector: "[eclFileTitle]", host: { classAttribute: "ecl-file__title" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileTitleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclFileTitle]',
+                    host: {
+                        class: 'ecl-file__title',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-file__title']
-            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
+        }] });
 
 /**
- * Component representing a file item with optional metadata, description,
- * and image (thumbnail) support.
+ * Component representing the lists section of a file in the ECL File component.
+ */
+class EclFileListsComponent extends ECLBaseDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileListsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EclFileListsComponent, isStandalone: true, selector: "ecl-file-lists, ecl-file-taxonomy", host: { styleAttribute: "display: block", classAttribute: "ecl-file__lists" }, usesInheritance: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileListsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ecl-file-lists, ecl-file-taxonomy',
+                    template: '<ng-content></ng-content>',
+                    host: {
+                        class: 'ecl-file__lists',
+                        style: 'display: block',
+                    },
+                }]
+        }] });
+
+class EclFileItemsToggleEvent extends EclBaseEvent {
+    constructor(isExpanded) {
+        super();
+        this.isExpanded = isExpanded;
+    }
+}
+
+/**
+ * ECL File component.
+ * Displays downloadable file information with an icon or picture,
+ * metadata, and an optional expandable translations panel.
+ *
+ * @example
+ * ```html
+ * <ecl-file id="my-file" language="English" langId="my-file-lang"
+ *           [primaryMeta]="['Meta info', 'DD Month YYYY']"
+ *           labelInfo="Highlight" description="File description"
+ *           fileIcon="pdf"
+ *           toggleAriaLabel="Translations"
+ *           (translationsToggle)="onToggle($event)">
+ *
+ *   <div eclFileTitle id="my-file-title">State of the Union 2018 brochure</div>
+ *
+ *   <a eclFileDownload eclLink variant="standalone" isBranded href="/path/to/file">
+ *     <span eclLinkLabel>
+ *       <span>Download</span>
+ *       <span eclFileMeta>(16.2 MB - PDF)</span>
+ *     </span>
+ *     <ecl-icon icon="download-simple" iconSet="phosphor" size="fluid"></ecl-icon>
+ *   </a>
+ *
+ *   <ecl-file-items>
+ *     <ecl-file-item eclTitle="български" meta="(15.7 MB - PDF)" langDetail="bg"
+ *                    titleId="my-file-0-title" metaId="my-file-0-meta">
+ *       <a eclFileTranslationDownload eclLink variant="standalone" href="/example#bg" hreflang="bg">
+ *         <span eclLinkLabel>Download</span>
+ *         <ecl-icon icon="download-simple" iconSet="phosphor" size="fluid"></ecl-icon>
+ *       </a>
+ *     </ecl-file-item>
+ *   </ecl-file-items>
+ * </ecl-file>
+ * ```
  */
 class EclFileComponent extends ECLBaseDirective {
+    /**
+     * Host element CSS classes.
+     */
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-file'),
+            this.isTranslationsExpanded() ? 'ecl-file--open' : '',
+        ].join(' ').trim();
+    }
     constructor() {
-        super(...arguments);
+        super();
         this.eclThemeService = inject(EclThemeService);
         /**
          * Optional description displayed under the file title.
@@ -181,9 +293,10 @@ class EclFileComponent extends ECLBaseDirective {
         this.description = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
         /**
-         * Optional ID for the file component, useful for accessibility or referencing.
+         * Unique ID for the file component. Auto-generated if not provided.
+         * Used to derive accessibility IDs for child elements.
          */
-        this.id = input(undefined, /* @ts-ignore */
+        this.id = input(`ecl-file-${crypto.randomUUID()}`, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
         /**
          * Optional language ID (e.g., for translation or accessibility attributes).
@@ -196,249 +309,145 @@ class EclFileComponent extends ECLBaseDirective {
         this.labelInfo = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "labelInfo" }] : /* istanbul ignore next */ []));
         /**
-         * Language indicator string (e.g. "EN", "FR") used in the label.
+         * Language indicator string (e.g. "English", "French") used in the footer.
+         * When translations are present, this becomes the toggle button label.
          */
         this.language = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "language" }] : /* istanbul ignore next */ []));
         /**
-         * Additional details displayed in the file component (e.g. file size, date).
+         * Primary metadata array (e.g. ['Meta info', 'DD Month YYYY']).
+         * Rendered as a list below the title/description.
+         */
+        this.primaryMeta = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "primaryMeta" }] : /* istanbul ignore next */ []));
+        /**
+         * @deprecated Use `primaryMeta` instead. Kept for backward compatibility.
          */
         this.detailMeta = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "detailMeta" }] : /* istanbul ignore next */ []));
         /**
-         * Main metadata displayed for the file (e.g. format, license).
+         * @deprecated Meta is now rendered inside the download link by the consumer.
+         * Kept for backward compatibility — no longer rendered in the template.
          */
         this.meta = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
         /**
-         * ID applied to the meta element for accessibility.
+         * @deprecated Meta ID is now managed by the consumer inside the download link.
+         * Kept for backward compatibility — no longer rendered in the template.
          */
         this.metaId = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "metaId" }] : /* istanbul ignore next */ []));
         /**
-         * Optional image directive projected via content slot, used for thumbnails.
-         */
-        this.eclPictureContent = contentChild(EclFilePictureDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "eclPictureContent" }] : /* istanbul ignore next */ []));
-    }
-    /**
-     * Host element CSS classes based on theme and content.
-     */
-    get cssClasses() {
-        return [super.getCssClasses('ecl-file'), this.isThumbnail ? 'ecl-file--thumbnail' : ''].join(' ').trim();
-    }
-    /**
-     * Determines whether the file has an associated thumbnail.
-     * Returns true if an `EclFilePictureDirective` is present in projected content.
-     */
-    get isThumbnail() {
-        return !!this.eclPictureContent();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclFileComponent, isStandalone: true, selector: "ecl-file", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, langId: { classPropertyName: "langId", publicName: "langId", isSignal: true, isRequired: false, transformFunction: null }, labelInfo: { classPropertyName: "labelInfo", publicName: "labelInfo", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, detailMeta: { classPropertyName: "detailMeta", publicName: "detailMeta", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, metaId: { classPropertyName: "metaId", publicName: "metaId", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo()) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo() }}</span>\n        </div>\n        }\n        @if(detailMeta()) {\n        <ul class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta(); track el) {\n                <li class=\"ecl-file__detail-meta-item\" >{{ el }}</li>\n            }\n        </ul>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description()) {\n            <div class=\"ecl-file__description\">{{ description() }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId()\">{{ language() }}</div>\n        <div class=\"ecl-file__meta\" [id]=\"metaId()\">{{ meta() }}</div>\n        <div class=\"ecl-file__action\">\n            <ng-content select=\"[eclFilePreview]\"></ng-content>\n            <ng-content select=\"[eclFileDownload]\"></ng-content>\n        </div>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i2.EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ecl-file', imports: [
-                        ...EUI_ECL_ICON,
-                        ...EUI_ECL_LABEL,
-                    ], template: "<div class=\"ecl-file__container\">\n    @if(!isThumbnail) {\n        @if(eclThemeService.isECTheme()) {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"2xl\"></ecl-icon>\n        } @else {\n            <ecl-icon icon=\"file\" class=\"ecl-file__icon\" size=\"m\"></ecl-icon>\n        }\n    } @else {\n    <ng-content select=\"[eclFilePicture]\"></ng-content>\n    }\n    <div class=\"ecl-file__info\">\n        @if(labelInfo()) {\n        <div class=\"ecl-file__label\">\n            <span eclLabel variant=\"highlight\">{{ labelInfo() }}</span>\n        </div>\n        }\n        @if(detailMeta()) {\n        <ul class=\"ecl-file__detail-meta\">\n            @for (el of detailMeta(); track el) {\n                <li class=\"ecl-file__detail-meta-item\" >{{ el }}</li>\n            }\n        </ul>\n        }\n        <ng-content select=\"[eclFileTitle]\"></ng-content>\n        @if(description()) {\n            <div class=\"ecl-file__description\">{{ description() }}</div>\n        }\n        <ng-content select=\"ecl-file-taxonomy\"></ng-content>\n    </div>\n\n    </div>\n    <div class=\"ecl-file__footer\">\n        <div class=\"ecl-file__language\" [id]=\"langId()\">{{ language() }}</div>\n        <div class=\"ecl-file__meta\" [id]=\"metaId()\">{{ meta() }}</div>\n        <div class=\"ecl-file__action\">\n            <ng-content select=\"[eclFilePreview]\"></ng-content>\n            <ng-content select=\"[eclFileDownload]\"></ng-content>\n        </div>\n    </div>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], langId: [{ type: i0.Input, args: [{ isSignal: true, alias: "langId", required: false }] }], labelInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelInfo", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], detailMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailMeta", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], metaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaId", required: false }] }], eclPictureContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclFilePictureDirective), { isSignal: true }] }] } });
-
-/**
- * Component representing a single file translation or descriptive item
- * inside the main ECL File component.
- */
-class EclFileItemComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        /**
-         * Indicates whether the item is a description block rather than a translation.
-         * Adds the `ecl-file__translation-description` class when true.
+         * Accessible label for the translation toggle button.
+         * Defaults to the `language` value if not provided.
          */
-        this.isDescription = input(false, { ...(ngDevMode ? { debugName: "isDescription" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.toggleAriaLabel = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
         /**
-         * Title text of the file item.
+         * File type icon to display. Renders a phosphor icon internally.
+         * Options: 'file' (default), 'pdf', 'doc', 'xls', 'txt', 'zip'.
+         * Ignored when a picture is projected.
          */
-        this.eclTitle = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "eclTitle" }] : /* istanbul ignore next */ []));
+        this.fileIcon = input('file', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileIcon" }] : /* istanbul ignore next */ []));
         /**
-         * ID applied to the title element for accessibility.
+         * Whether the translation list is currently expanded.
          */
-        this.titleId = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "titleId" }] : /* istanbul ignore next */ []));
-        /**
-         * ID applied to the meta element for accessibility.
-         */
-        this.metaId = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "metaId" }] : /* istanbul ignore next */ []));
+        this.isTranslationsExpanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTranslationsExpanded" }] : /* istanbul ignore next */ []));
         /**
-         * Additional metadata for the item (e.g., file size, type).
-         */
-        this.meta = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "meta" }] : /* istanbul ignore next */ []));
-        /**
-         * Language label displayed next to the title (e.g., "FR", "EN").
+         * Emits when the translation toggle is clicked.
+         * Consumers can call `preventDefault()` on the event to cancel the toggle.
          */
-        this.label = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+        this.translationsToggle = output();
         /**
-         * Supplementary language detail displayed below the language label.
+         * Optional image directive projected via content slot, used for pictures.
          */
-        this.langDetail = input(/* @ts-ignore */
-        ...(ngDevMode ? [undefined, { debugName: "langDetail" }] : /* istanbul ignore next */ []));
+        this.eclPictureContent = contentChild(EclFilePictureDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclPictureContent" }] : /* istanbul ignore next */ []));
         /**
-         * ARIA role attribute set to 'listitem' for accessibility.
+         * Projected translation list component.
          */
-        this.role = 'listitem';
-        this.eclFileComponent = inject(EclFileComponent);
-    }
-    /**
-     * Host CSS classes for the item, based on the content and state.
-     */
-    get cssClasses() {
-        return [
-            super.getCssClasses('ecl-file__translation-item'),
-            this.isDescription() ? 'ecl-file__translation-description' : '',
-        ].join(' ').trim();
-    }
-    /**
-     * Indicates whether the parent `EclFileComponent` has a thumbnail image.
-     */
-    get isThumbnail() {
-        return this.eclFileComponent && this.eclFileComponent.isThumbnail;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclFileItemComponent, isStandalone: true, selector: "ecl-file-item", inputs: { isDescription: { classPropertyName: "isDescription", publicName: "isDescription", isSignal: true, isRequired: false, transformFunction: null }, eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, titleId: { classPropertyName: "titleId", publicName: "titleId", isSignal: true, isRequired: false, transformFunction: null }, metaId: { classPropertyName: "metaId", publicName: "metaId", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, langDetail: { classPropertyName: "langDetail", publicName: "langDetail", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.cssClasses", "attr.role": "this.role" } }, usesInheritance: true, ngImport: i0, template: "@if (isDescription()) {\n    <ng-content></ng-content>\n} @else {\n    <div class=\"ecl-file__translation-info\">\n        <div class=\"ecl-file__translation-title\" [id]=\"titleId()\" [attr.lang]=\"langDetail()\">{{ eclTitle() }}</div>\n        <div class=\"ecl-file__translation-meta\" [id]=\"metaId()\">{{ meta() }}</div>\n    </div>\n    <div class=\"ecl-file__translation-action\">\n        <ng-content select=\"[eclFilePreview]\"></ng-content>\n        <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n    </div>\n}\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ecl-file-item', template: "@if (isDescription()) {\n    <ng-content></ng-content>\n} @else {\n    <div class=\"ecl-file__translation-info\">\n        <div class=\"ecl-file__translation-title\" [id]=\"titleId()\" [attr.lang]=\"langDetail()\">{{ eclTitle() }}</div>\n        <div class=\"ecl-file__translation-meta\" [id]=\"metaId()\">{{ meta() }}</div>\n    </div>\n    <div class=\"ecl-file__translation-action\">\n        <ng-content select=\"[eclFilePreview]\"></ng-content>\n        <ng-content select=\"[eclFileTranslationDownload]\"></ng-content>\n    </div>\n}\n" }]
-        }], propDecorators: { isDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDescription", required: false }] }], eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], titleId: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleId", required: false }] }], metaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaId", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], langDetail: [{ type: i0.Input, args: [{ isSignal: true, alias: "langDetail", required: false }] }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }] } });
-
-class EclFileItemsToggleEvent extends EclBaseEvent {
-    constructor(isExpanded) {
-        super();
-        this.isExpanded = isExpanded;
-    }
-}
-
-/**
- * Component representing a container for file item translations within an ECL File component.
- * It can be expanded or collapsed, and emits an event when toggled.
- */
-class EclFileItemsComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
+        this.eclFileItems = contentChild(EclFileItemsComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclFileItems" }] : /* istanbul ignore next */ []));
         /**
-         * Label displayed above the translations list.
+         * Whether this file has a picture projected.
          */
-        this.label = input(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        this.hasPicture = computed(() => !!this.eclPictureContent(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasPicture" }] : /* istanbul ignore next */ []));
         /**
-         * Whether the list is initially expanded.
+         * Resolved phosphor icon name based on the fileIcon input.
          */
-        this.isExpanded = model(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+        this.resolvedIconName = computed(() => {
+            const icon = this.fileIcon();
+            return icon === 'file' ? 'file' : `file-${icon}`;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedIconName" }] : /* istanbul ignore next */ []));
         /**
-         * Emits a toggle event when the translations list is expanded or collapsed.
-         *
-         * @remarks
-         * Consumers can call `preventDefault()` on the event to cancel the toggle.
+         * Whether translations are present.
          */
-        // eslint-disable-next-line
-        this.toggle = output();
+        this.hasTranslations = computed(() => !!this.eclFileItems(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasTranslations" }] : /* istanbul ignore next */ []));
         /**
-         * Content-projected list of translation items (excluding description blocks).
+         * Resolved primary meta — uses primaryMeta if available, falls back to deprecated detailMeta.
          */
-        this.items = contentChildren(EclFileItemComponent, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.resolvedPrimaryMeta = computed(() => this.primaryMeta() ?? this.detailMeta(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedPrimaryMeta" }] : /* istanbul ignore next */ []));
+        // When eclFileItems becomes available, assign ID if not set
+        effect(() => {
+            const items = this.eclFileItems();
+            if (items && !items.id()) {
+                items.id.set(`${this.id()}-translations`);
+            }
+        });
     }
     /**
-     * CSS classes applied to the host element.
+     * Handles the translation toggle button click.
      */
-    get cssClasses() {
-        return [super.getCssClasses('ecl-file__translation-container')].join(' ').trim();
-    }
-    /**
-     * Returns the number of translation items excluding description entries.
-     */
-    getItemsCount() {
-        return this.items().filter((item) => !item.isDescription()).length;
-    }
-    /**
-     * Toggles the expansion state of the translation list.
-     * Emits `toggle` event and updates `isExpanded` if not prevented.
-     */
-    onToggleClick(evt) {
-        const nextExpandedState = !this.isExpanded();
-        const event = new EclFileItemsToggleEvent(nextExpandedState);
-        this.toggle.emit(event);
+    onTranslationToggleClick() {
+        const nextState = !this.isTranslationsExpanded();
+        const event = new EclFileItemsToggleEvent(nextState);
+        this.translationsToggle.emit(event);
         if (!event.defaultPrevented) {
-            this.isExpanded.set(nextExpandedState);
+            this.isTranslationsExpanded.set(nextState);
+            const items = this.eclFileItems();
+            if (items) {
+                items.isExpanded.set(nextState);
+            }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileItemsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: EclFileItemsComponent, isStandalone: true, selector: "ecl-file-items", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange", toggle: "toggle" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "items", predicate: EclFileItemComponent, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<button eclButton variant=\"tertiary\" class=\"ecl-file__translation-toggle\" [attr.aria-expanded]=\"isExpanded()\" (click)=\"onToggleClick($event)\">\n    <span eclButtonLabel>\n        {{ label() || 'ecl.file.OTHER-LANGUAGES' | translate: { count: getItemsCount() } }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<ul class=\"ecl-file__translation-list\">\n    <ng-content></ng-content>\n</ul>\n", dependencies: [{ kind: "component", type: i1$1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i1$1.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclFileComponent, isStandalone: true, selector: "ecl-file", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, langId: { classPropertyName: "langId", publicName: "langId", isSignal: true, isRequired: false, transformFunction: null }, labelInfo: { classPropertyName: "labelInfo", publicName: "labelInfo", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, primaryMeta: { classPropertyName: "primaryMeta", publicName: "primaryMeta", isSignal: true, isRequired: false, transformFunction: null }, detailMeta: { classPropertyName: "detailMeta", publicName: "detailMeta", isSignal: true, isRequired: false, transformFunction: null }, meta: { classPropertyName: "meta", publicName: "meta", isSignal: true, isRequired: false, transformFunction: null }, metaId: { classPropertyName: "metaId", publicName: "metaId", isSignal: true, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, fileIcon: { classPropertyName: "fileIcon", publicName: "fileIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { translationsToggle: "translationsToggle" }, host: { properties: { "class": "cssClasses", "attr.id": "id()" } }, queries: [{ propertyName: "eclPictureContent", first: true, predicate: EclFilePictureDirective, descendants: true, isSignal: true }, { propertyName: "eclFileItems", first: true, predicate: EclFileItemsComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<article class=\"ecl-file__container\">\n    <div class=\"ecl-file__info\">\n        @if (hasPicture()) {\n            <ng-content select=\"[eclFilePicture]\"></ng-content>\n        } @else {\n            <div class=\"ecl-file__icon-box\">\n                <ecl-icon [icon]=\"resolvedIconName()\" iconSet=\"phosphor\" size=\"l\" class=\"ecl-file__icon\" [title]=\"fileIcon()\"></ecl-icon>\n            </div>\n        }\n\n        <div class=\"ecl-file__content\">\n            @if (labelInfo()) {\n                <div class=\"ecl-file__labels\">\n                    <div class=\"ecl-file__label\">\n                        <span eclLabel variant=\"highlight\">{{ labelInfo() }}</span>\n                    </div>\n                </div>\n            }\n\n            <ng-content select=\"[eclFileTitle]\"></ng-content>\n\n            @if (description()) {\n                <div class=\"ecl-file__description\">{{ description() }}</div>\n            }\n\n            @if (resolvedPrimaryMeta()) {\n                <ul class=\"ecl-file__primary-meta\">\n                    @for (item of resolvedPrimaryMeta(); track item) {\n                        <li class=\"ecl-file__primary-meta-item\">{{ item }}</li>\n                    }\n                </ul>\n            }\n\n            <ng-content select=\"ecl-file-lists, ecl-file-taxonomy\"></ng-content>\n        </div>\n    </div>\n\n    <footer class=\"ecl-file__footer\">\n        @if (language()) {\n            @if (hasTranslations()) {\n                <button eclButton variant=\"tertiary\" eclStyle=\"neutral\"\n                    class=\"ecl-file__translation-toggle\"\n                    type=\"button\"\n                    [attr.aria-expanded]=\"isTranslationsExpanded()\"\n                    [attr.aria-controls]=\"eclFileItems()?.id()\"\n                    [attr.aria-label]=\"toggleAriaLabel() || language()\"\n                    (click)=\"onTranslationToggleClick()\">\n                    <span eclButtonLabel>\n                        <span class=\"ecl-file__language\" [id]=\"langId()\">{{ language() }}</span>\n                    </span>\n                    <ecl-icon icon=\"caret-down\" iconSet=\"phosphor\" size=\"fluid\"></ecl-icon>\n                </button>\n            } @else {\n                <span class=\"ecl-file__language ecl-file__language--no-toggle\" [id]=\"langId()\">{{ language() }}</span>\n            }\n        }\n\n        <div class=\"ecl-file__action\">\n            <ng-content select=\"[eclFilePreview]\"></ng-content>\n            <ng-content select=\"[eclFileDownload]\"></ng-content>\n        </div>\n    </footer>\n</article>\n\n<ng-content select=\"ecl-file-items\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "component", type: i1.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }, { kind: "directive", type: i2.EclLabelDirective, selector: "[eclLabel]", inputs: ["variant"] }, { kind: "component", type: i3.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i3.EclButtonLabelDirective, selector: "[eclButtonLabel]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileItemsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-file-items', imports: [
-                        ...EUI_ECL_BUTTON,
+            args: [{ selector: 'ecl-file', imports: [
                         ...EUI_ECL_ICON,
-                        TranslatePipe,
-                    ], template: "<button eclButton variant=\"tertiary\" class=\"ecl-file__translation-toggle\" [attr.aria-expanded]=\"isExpanded()\" (click)=\"onToggleClick($event)\">\n    <span eclButtonLabel>\n        {{ label() || 'ecl.file.OTHER-LANGUAGES' | translate: { count: getItemsCount() } }}\n    </span>\n    <ecl-icon icon=\"corner-arrow\" transform=\"rotate-180\"></ecl-icon>\n</button>\n<ul class=\"ecl-file__translation-list\">\n    <ng-content></ng-content>\n</ul>\n" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], isExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isExpanded", required: false }] }, { type: i0.Output, args: ["isExpandedChange"] }], toggle: [{ type: i0.Output, args: ["toggle"] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclFileItemComponent), { isSignal: true }] }] } });
-
-/**
- * Component representing the taxonomy section of a file in the ECL File component.
- */
-class EclFileTaxonomyComponent extends ECLBaseDirective {
-    /**
-     * CSS classes applied to the host element.
-     */
-    get cssClasses() {
-        return [super.getCssClasses('ecl-file__taxonomy')].join(' ').trim();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileTaxonomyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: EclFileTaxonomyComponent, isStandalone: true, selector: "ecl-file-taxonomy", host: { properties: { "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclFileTaxonomyComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ecl-file-taxonomy', template: "<ng-content></ng-content>\n" }]
-        }], propDecorators: { cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+                        ...EUI_ECL_LABEL,
+                        ...EUI_ECL_BUTTON,
+                    ], host: {
+                        '[class]': 'cssClasses',
+                        '[attr.id]': 'id()',
+                    }, template: "<article class=\"ecl-file__container\">\n    <div class=\"ecl-file__info\">\n        @if (hasPicture()) {\n            <ng-content select=\"[eclFilePicture]\"></ng-content>\n        } @else {\n            <div class=\"ecl-file__icon-box\">\n                <ecl-icon [icon]=\"resolvedIconName()\" iconSet=\"phosphor\" size=\"l\" class=\"ecl-file__icon\" [title]=\"fileIcon()\"></ecl-icon>\n            </div>\n        }\n\n        <div class=\"ecl-file__content\">\n            @if (labelInfo()) {\n                <div class=\"ecl-file__labels\">\n                    <div class=\"ecl-file__label\">\n                        <span eclLabel variant=\"highlight\">{{ labelInfo() }}</span>\n                    </div>\n                </div>\n            }\n\n            <ng-content select=\"[eclFileTitle]\"></ng-content>\n\n            @if (description()) {\n                <div class=\"ecl-file__description\">{{ description() }}</div>\n            }\n\n            @if (resolvedPrimaryMeta()) {\n                <ul class=\"ecl-file__primary-meta\">\n                    @for (item of resolvedPrimaryMeta(); track item) {\n                        <li class=\"ecl-file__primary-meta-item\">{{ item }}</li>\n                    }\n                </ul>\n            }\n\n            <ng-content select=\"ecl-file-lists, ecl-file-taxonomy\"></ng-content>\n        </div>\n    </div>\n\n    <footer class=\"ecl-file__footer\">\n        @if (language()) {\n            @if (hasTranslations()) {\n                <button eclButton variant=\"tertiary\" eclStyle=\"neutral\"\n                    class=\"ecl-file__translation-toggle\"\n                    type=\"button\"\n                    [attr.aria-expanded]=\"isTranslationsExpanded()\"\n                    [attr.aria-controls]=\"eclFileItems()?.id()\"\n                    [attr.aria-label]=\"toggleAriaLabel() || language()\"\n                    (click)=\"onTranslationToggleClick()\">\n                    <span eclButtonLabel>\n                        <span class=\"ecl-file__language\" [id]=\"langId()\">{{ language() }}</span>\n                    </span>\n                    <ecl-icon icon=\"caret-down\" iconSet=\"phosphor\" size=\"fluid\"></ecl-icon>\n                </button>\n            } @else {\n                <span class=\"ecl-file__language ecl-file__language--no-toggle\" [id]=\"langId()\">{{ language() }}</span>\n            }\n        }\n\n        <div class=\"ecl-file__action\">\n            <ng-content select=\"[eclFilePreview]\"></ng-content>\n            <ng-content select=\"[eclFileDownload]\"></ng-content>\n        </div>\n    </footer>\n</article>\n\n<ng-content select=\"ecl-file-items\"></ng-content>\n<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], langId: [{ type: i0.Input, args: [{ isSignal: true, alias: "langId", required: false }] }], labelInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelInfo", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], primaryMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryMeta", required: false }] }], detailMeta: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailMeta", required: false }] }], meta: [{ type: i0.Input, args: [{ isSignal: true, alias: "meta", required: false }] }], metaId: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaId", required: false }] }], toggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAriaLabel", required: false }] }], fileIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileIcon", required: false }] }], translationsToggle: [{ type: i0.Output, args: ["translationsToggle"] }], eclPictureContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclFilePictureDirective), { isSignal: true }] }], eclFileItems: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclFileItemsComponent), { isSignal: true }] }] } });
 
 const EUI_ECL_FILE = [
     EclFileComponent,
     EclFileDownloadDirective,
     EclFileItemsComponent,
     EclFileItemComponent,
-    EclFileTaxonomyComponent,
+    EclFileListsComponent,
     EclFileTitleDirective,
     EclFileTranslationDownloadDirective,
     EclFilePictureDirective,
     EclFileImageDirective,
     EclFilePreviewDirective,
+    EclFileMetaDirective,
 ];
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { EUI_ECL_FILE, EclFileComponent, EclFileDownloadDirective, EclFileImageDirective, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFilePictureDirective, EclFilePreviewDirective, EclFileTaxonomyComponent, EclFileTitleDirective, EclFileTranslationDownloadDirective };
+export { EUI_ECL_FILE, EclFileComponent, EclFileDownloadDirective, EclFileImageDirective, EclFileItemComponent, EclFileItemsComponent, EclFileItemsToggleEvent, EclFileListsComponent, EclFileMetaDirective, EclFilePictureDirective, EclFilePreviewDirective, EclFileTitleDirective, EclFileTranslationDownloadDirective };
 //# sourceMappingURL=eui-ecl-components-ecl-file.mjs.map